Move 'RowCoin' to its own component

- 'RowCoin' is used in both 'AccountMenu' and 'CoinMenu'

src/js/views/Wallet/components/LeftNavigation/components/AccountMenu/index.js

@@ -1,12 +1,13 @@
 /* @flow */
+import React, { components } from 'react';
 import BigNumber from 'bignumber.js';
 import colors from 'config/colors';
 import Loader from 'components/LoaderCircle';
 import PropTypes from 'prop-types';
-import React from 'react';
 import styled, { css } from 'styled-components';
 import * as stateUtils from 'reducers/utils';
 import Tooltip from 'rc-tooltip';
+import ICONS from 'config/icons';
 
 import { NavLink } from 'react-router-dom';
 import { findDeviceAccounts } from 'reducers/AccountsReducer';
@@ -14,8 +15,9 @@ import { FONT_SIZE, BORDER_WIDTH } from 'config/variables';
 
 import type { Accounts } from 'flowtype';
 import type { Props } from '../common';
-
 import Row from '../Row';
+import RowCoin from '../RowCoin';
+
 
 const Text = styled.span`
     font-size: ${FONT_SIZE.SMALLER};
@@ -63,7 +65,6 @@ const RowAccount = ({
         </RowAccountWrapper>
     </NavLink>
 );
-
 RowAccount.propTypes = {
     accountIndex: PropTypes.number.isRequired,
     url: PropTypes.string.isRequired,
@@ -183,12 +184,28 @@ const AccountMenu = (props: Props): ?React$Element<string> => {
         }
     }
 
-
     let backButton = null;
     if (selectedCoin) {
+        let imgName = selectedCoin.network;
+        if (selectedCoin.network === 'ethereum') {
+            imgName = 'eth';
+        } else if (selectedCoin.network === 'ethereum-classic') {
+            imgName = 'etc';
+        }
+        const imgUrl = `../images/${imgName}-logo.png`;
         backButton = (
-            <NavLink to={baseUrl} className={`back ${selectedCoin.network}`}>
-                <span className={selectedCoin.network}>{selectedCoin.name}</span>
+            <NavLink to={baseUrl}>
+                <RowCoin
+                    coin={{
+                        img: imgUrl,
+                        name: selectedCoin.name,
+                    }}
+                    iconLeft={{
+                        type: ICONS.ARROW_LEFT,
+                        color: colors.TEXT_PRIMARY,
+                        size: 20,
+                    }}
+                />
             </NavLink>
         );
     }

src/js/views/Wallet/components/LeftNavigation/components/CoinMenu/index.js

@@ -1,88 +1,12 @@
 /* @flow */
 import coins from 'constants/coins';
 import colors from 'config/colors';
-import Icon from 'components/Icon';
 import ICONS from 'config/icons';
-import { NavLink } from 'react-router-dom';
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
-import styled from 'styled-components';
-
-import { FONT_SIZE, ICON_SIZE } from 'config/variables';
-
+import { NavLink } from 'react-router-dom';
 import Divider from '../Divider';
-import Row from '../Row';
-
-const CoinNameWrapper = styled.div`
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-`;
-const Logo = styled.div`
-    height: ${ICON_SIZE.BASE};
-    width: ${ICON_SIZE.BASE};
-    margin-right: 10px;
-
-    background-repeat: no-repeat;
-    background-position: center;
-    background-size: auto ${ICON_SIZE.BASE};
-    background-image: url('${props => props.coinImg}');
-`;
-const CoinName = ({
-    coinImg, text,
-}) => (
-    <CoinNameWrapper>
-        <Logo
-            coinImg={coinImg}
-        />
-        <p>{text}</p>
-    </CoinNameWrapper>
-);
-CoinName.propTypes = {
-    coinImg: PropTypes.string.isRequired,
-    text: PropTypes.string.isRequired,
-};
-
-const RowCoinWrapper = styled.div`
-    display: block;
-    height: 50px;
-
-    font-size: ${FONT_SIZE.BASE};
-    color: ${colors.TEXT_PRIMARY};
-    &:hover {
-        background-color: ${colors.GRAY_LIGHT};
-    }
-`;
-const RowCoin = ({
-    coin, icon,
-}) => (
-    <RowCoinWrapper>
-        <Row>
-            <CoinName
-                coinImg={coin.img}
-                text={coin.name}
-            />
-            {icon && (
-                <Icon
-                    icon={icon.type}
-                    size={27}
-                    color={icon.color}
-                />
-            )}
-        </Row>
-    </RowCoinWrapper>
-);
-RowCoin.propTypes = {
-    coin: PropTypes.shape({
-        img: PropTypes.string.isRequired,
-        name: PropTypes.string.isRequired,
-    }).isRequired,
-    icon: PropTypes.shape({
-        type: PropTypes.string.isRequired,
-        color: PropTypes.string.isRequired,
-    }),
-};
-
+import RowCoin from '../RowCoin';
 
 class CoinMenu extends Component {
     getBaseUrl() {
@@ -136,9 +60,10 @@ class CoinMenu extends Component {
                                 img: coin.image,
                                 name: coin.coinName,
                             }}
-                            icon={{
+                            iconRight={{
                                 type: ICONS.SKIP,
                                 color: colors.TEXT_SECONDARY,
+                                size: 27,
                             }}
                         />
                     </a>

src/js/views/Wallet/components/LeftNavigation/components/Row/index.js

@@ -5,7 +5,6 @@ import PropTypes from 'prop-types';
 import { TRANSITION_TIME } from 'config/variables';
 
 const Wrapper = styled.div`
-    padding: 16px 24px;
     height: 100%;
 
     display: flex;

src/js/views/Wallet/components/LeftNavigation/components/RowCoin/components/CoinName/index.js

@@ -0,0 +1,35 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import styled from 'styled-components';
+import { ICON_SIZE } from 'config/variables';
+
+const CoinNameWrapper = styled.div`
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+`;
+
+const Logo = styled.div`
+    height: ${ICON_SIZE.BASE};
+    width: ${ICON_SIZE.BASE};
+    margin-right: 5px;
+    background-repeat: no-repeat;
+    background-position: center;
+    background-size: auto ${ICON_SIZE.BASE};
+    background-image: url('${props => props.coinImg}');
+`;
+
+const CoinName = ({
+    coinImg, text,
+}) => (
+    <CoinNameWrapper>
+        {coinImg && <Logo coinImg={coinImg} />}
+        <p>{text}</p>
+    </CoinNameWrapper>
+);
+CoinName.propTypes = {
+    coinImg: PropTypes.string,
+    text: PropTypes.string.isRequired,
+};
+
+export default CoinName;

src/js/views/Wallet/components/LeftNavigation/components/RowCoin/index.js

@@ -0,0 +1,76 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import styled from 'styled-components';
+import Icon from 'components/Icon';
+import { FONT_SIZE } from 'config/variables';
+import colors from 'config/colors';
+import Row from '../Row';
+import CoinName from './components/CoinName';
+
+const RowCoinWrapper = styled.div`
+    padding: 16px 24px;
+    height: 50px;
+    display: block;
+    font-size: ${FONT_SIZE.BASE};
+    color: ${colors.TEXT_PRIMARY};
+    &:hover {
+        background-color: ${colors.GRAY_LIGHT};
+    }
+`;
+
+const Left = styled.div`
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+`;
+
+const IconWrapper = styled.div`
+    margin-right: 10px;
+`;
+
+const RowCoin = ({
+    coin, iconLeft, iconRight,
+}) => (
+    <RowCoinWrapper>
+        <Row>
+            <Left>
+                {iconLeft && (
+                    <IconWrapper>
+                        <Icon
+                            icon={iconLeft.type}
+                            size={iconLeft.size}
+                            color={iconLeft.color}
+                        />
+                    </IconWrapper>
+                )}
+                <CoinName
+                    coinImg={coin.img}
+                    text={coin.name}
+                />
+            </Left>
+            {iconRight && (
+                <Icon
+                    icon={iconRight.type}
+                    size={iconRight.size}
+                    color={iconRight.color}
+                />
+            )}
+        </Row>
+    </RowCoinWrapper>
+);
+
+const iconShape = {
+    type: PropTypes.string.isRequired,
+    color: PropTypes.string.isRequired,
+    size: PropTypes.number.isRequired,
+};
+RowCoin.propTypes = {
+    coin: PropTypes.shape({
+        img: PropTypes.string.isRequired,
+        name: PropTypes.string.isRequired,
+    }).isRequired,
+    iconLeft: PropTypes.shape(iconShape),
+    iconRight: PropTypes.shape(iconShape),
+};
+
+export default RowCoin;