From 27e3385b7d64002d5dfb2121c2b80fec2bfe877b Mon Sep 17 00:00:00 2001
From: Vasek Mlejnsky <vasek.mlejnsky@gmail.com>
Date: Fri, 17 Aug 2018 11:49:04 +0200
Subject: [PATCH] Move 'RowCoin' to its own component

- 'RowCoin' is used in both 'AccountMenu' and 'CoinMenu'
---
 .../components/AccountMenu/index.js           | 29 +++++--
 .../components/CoinMenu/index.js              | 83 +------------------
 .../LeftNavigation/components/Row/index.js    |  1 -
 .../RowCoin/components/CoinName/index.js      | 35 ++++++++
 .../components/RowCoin/index.js               | 76 +++++++++++++++++
 5 files changed, 138 insertions(+), 86 deletions(-)
 create mode 100644 src/js/views/Wallet/components/LeftNavigation/components/RowCoin/components/CoinName/index.js
 create mode 100644 src/js/views/Wallet/components/LeftNavigation/components/RowCoin/index.js

diff --git a/src/js/views/Wallet/components/LeftNavigation/components/AccountMenu/index.js b/src/js/views/Wallet/components/LeftNavigation/components/AccountMenu/index.js
index a55597e5..64825764 100644
--- a/src/js/views/Wallet/components/LeftNavigation/components/AccountMenu/index.js
+++ b/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>
         );
     }
diff --git a/src/js/views/Wallet/components/LeftNavigation/components/CoinMenu/index.js b/src/js/views/Wallet/components/LeftNavigation/components/CoinMenu/index.js
index ccdab5aa..27b71639 100644
--- a/src/js/views/Wallet/components/LeftNavigation/components/CoinMenu/index.js
+++ b/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>
diff --git a/src/js/views/Wallet/components/LeftNavigation/components/Row/index.js b/src/js/views/Wallet/components/LeftNavigation/components/Row/index.js
index de5f8209..5a8598f8 100644
--- a/src/js/views/Wallet/components/LeftNavigation/components/Row/index.js
+++ b/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;
diff --git a/src/js/views/Wallet/components/LeftNavigation/components/RowCoin/components/CoinName/index.js b/src/js/views/Wallet/components/LeftNavigation/components/RowCoin/components/CoinName/index.js
new file mode 100644
index 00000000..9066a06e
--- /dev/null
+++ b/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;
diff --git a/src/js/views/Wallet/components/LeftNavigation/components/RowCoin/index.js b/src/js/views/Wallet/components/LeftNavigation/components/RowCoin/index.js
new file mode 100644
index 00000000..7352d990
--- /dev/null
+++ b/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;