Delete 'AsideRowCoinExternal' and 'AsideRowCoinWallet' and move its logic into 'AsideRowCoin'

src/js/components/wallet/aside/AsideRowCoin.js

@@ -1,24 +0,0 @@
-
-import styled from 'styled-components';
-import React from 'react';
-import colors from 'config/colors';
-import { FONT_SIZE } from 'config/variables';
-
-const Wrapper = styled.div`
-    display: block;
-    height: 50px;
-
-    font-size: ${FONT_SIZE.BASE};
-    color: ${colors.TEXT_PRIMARY};
-    &:hover {
-        background-color: ${colors.GRAY_LIGHT};
-    }
-`;
-
-const AsideRowCoin = ({ children }) => (
-    <Wrapper>
-        {children}
-    </Wrapper>
-);
-
-export default AsideRowCoin;

src/js/components/wallet/aside/AsideRowCoinExternal.js

@@ -1,37 +0,0 @@
-import styled from 'styled-components';
-import React from 'react';
-import PropTypes from 'prop-types';
-
-import ICONS from 'config/icons';
-import colors from 'config/colors';
-
-import Icon from 'components/common/Icon';
-import AsideRow from './AsideRow';
-import AsideRowCoin from './AsideRowCoin';
-import CoinName from './CoinName';
-
-import { coinProp } from './common';
-
-const AsideRowCoinExternal = ({ coin, url }) => (
-    <a href={url}>
-        <AsideRowCoin>
-            <AsideRow>
-                <CoinName
-                    coinImg={coin.img}
-                    text={coin.name}
-                />
-                <Icon
-                    icon={ICONS.REDIRECT}
-                    color={colors.TEXT_SECONDARY}
-                />
-            </AsideRow>
-        </AsideRowCoin>
-    </a>
-);
-
-AsideRowCoinExternal.propTypes = {
-    ...coinProp,
-    url: PropTypes.string,
-};
-
-export default AsideRowCoinExternal;

src/js/components/wallet/aside/AsideRowCoinWallet.js

@@ -1,29 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { NavLink } from 'react-router-dom';
-
-import AsideRow from './AsideRow';
-import AsideRowCoin from './AsideRowCoin';
-import CoinName from './CoinName';
-
-import { coinProp } from './common';
-
-const AsideRowCoinWallet = ({ coin, url }) => (
-    <NavLink to={url}>
-        <AsideRowCoin>
-            <AsideRow>
-                <CoinName
-                    coinImg={coin.img}
-                    text={coin.name}
-                />
-            </AsideRow>
-        </AsideRowCoin>
-    </NavLink>
-);
-
-AsideRowCoinWallet.propTypes = {
-    ...coinProp,
-    url: PropTypes.string.isRequired,
-};
-
-export default AsideRowCoinWallet;

src/js/components/wallet/aside/CoinSelection.js

@@ -1,21 +1,18 @@
 /* @flow */
-
-import React from 'react';
-import { NavLink } from 'react-router-dom';
-
 import coins from 'constants/coins';
+import colors from 'config/colors';
+import ICONS from 'config/icons';
+import { NavLink } from 'react-router-dom';
+import React from 'react';
 
 import AsideDivider from './AsideDivider';
-import AsideRowCoinWallet from './AsideRowCoinWallet';
-import AsideRowCoinExternal from './AsideRowCoinExternal';
-import AsideSection from './AsideSection';
+import AsideRowCoin from './row/coin/AsideRowCoin';
+
 
-import type { TrezorDevice } from 'flowtype';
 import type { Props } from './index';
 
 
-const CoinSelection = (props: Props): React$Element<string> => {
-    const { location } = props.router;
+const CoinSelection = (props: Props) => {
     const { config } = props.localStorage;
     const { selectedDevice } = props.wallet;
 
@@ -29,37 +26,43 @@ const CoinSelection = (props: Props): React$Element<string> => {
 
     const walletCoins = config.coins.map((item) => {
         const url = `${baseUrl}/network/${item.network}/account/0`;
-        const className = `coin ${item.network}`;
 
-        let coinImg = item.network;
+        let imgName = item.network;
         if (item.network === 'ethereum') {
-            coinImg = 'eth';
-        } else if (item.network === 'ethereum-classic' ) {
-            coinImg = 'etc';
+            imgName = 'eth';
+        } else if (item.network === 'ethereum-classic') {
+            imgName = 'etc';
         }
+        const imgUrl = `../images/${imgName}-logo.png`;
 
         return (
-            <AsideRowCoinWallet
-                key={item.network}
-                coin={{
-                    img: coinImg,
-                    name: item.name,
-                }}
-                url={url}
-            />
+            <NavLink to={url}>
+                <AsideRowCoin
+                    coin={{
+                        img: imgUrl,
+                        name: item.name,
+                    }}
+                />
+            </NavLink>
         );
     });
 
     const externalCoins = coins.map(coin => (
-        <AsideDivider
-            coin={{
-                img: coin.image,
-                name: coin.coinName,
-            }}
-            url={coin.url}
-        />
+        <a href={coin.url}>
+            <AsideRowCoin
+                coin={{
+                    img: coin.image,
+                    name: coin.coinName,
+                }}
+                icon={{
+                    type: ICONS.REDIRECT,
+                    color: colors.TEXT_SECONDARY,
+                }}
+            />
+        </a>
     ));
 
+
     return (
         <AsideSection>
             { walletCoins }

src/js/components/wallet/aside/row/coin/AsideRowCoin.js

@@ -0,0 +1,49 @@
+
+import colors from 'config/colors';
+import { FONT_SIZE } from 'config/variables';
+import Icon from 'components/common/Icon';
+import PropTypes from 'prop-types';
+import React from 'react';
+import styled from 'styled-components';
+
+import AsideRow from '../AsideRow';
+import CoinName from './CoinName';
+import { coinProp } from '../../common';
+
+const Wrapper = styled.div`
+    display: block;
+    height: 50px;
+
+    font-size: ${FONT_SIZE.BASE};
+    color: ${colors.TEXT_PRIMARY};
+    &:hover {
+        background-color: ${colors.GRAY_LIGHT};
+    }
+`;
+
+const AsideRowCoin = ({ coin, icon }) => (
+    <Wrapper>
+        <AsideRow>
+            <CoinName
+                coinImg={coin.img}
+                text={coin.name}
+            />
+            {icon && (
+                <Icon
+                    icon={icon.type}
+                    color={icon.color}
+                />
+            )}
+        </AsideRow>
+    </Wrapper>
+);
+
+AsideRowCoin.propTypes = {
+    ...coinProp,
+    icon: PropTypes.shape({
+        type: PropTypes.string.isRequired,
+        color: PropTypes.string.isRequired,
+    }),
+};
+
+export default AsideRowCoin;