Move 'CoinName' component inside 'RowCoin'

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

@@ -19,7 +19,7 @@ import Row from '../Row';
 import RowCoin from '../RowCoin';
 
 
-const Wrapper = style.div``;
+const Wrapper = styled.div``;
 
 const Text = styled.span`
     font-size: ${FONT_SIZE.SMALLER};

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

@@ -1,35 +0,0 @@
-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

@@ -2,10 +2,25 @@ 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 { ICON_SIZE, FONT_SIZE } from 'config/variables';
 import colors from 'config/colors';
 import Row from '../Row';
-import CoinName from './components/CoinName';
+
+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 RowCoinWrapper = styled.div`
     padding: 16px 24px;
@@ -43,10 +58,10 @@ const RowCoin = ({
                         />
                     </IconWrapper>
                 )}
-                <CoinName
+                <CoinNameWrapper>
-                    coinImg={coin.img}
+                    <Logo coinImg={coin.img} />
-                    text={coin.name}
+                    <p>{coin.name}</p>
-                />
+                </CoinNameWrapper>
             </Left>
             {iconRight && (
                 <Icon