Separate row coin logic into a 'AsideRowCoin' component

src/js/components/wallet/aside/AsideRow.js

@@ -1,30 +1,39 @@
-import styled from 'styled-components';
+import styled, { css } from 'styled-components';
 import React from 'react';
+import PropTypes from 'prop-types';
 
 import colors from 'config/colors';
-import { FONT_SIZE, TRANSITION_TIME } from 'config/variables';
+import { TRANSITION_TIME } from 'config/variables';
 
 const Wrapper = styled.div`
+    padding: 16px 24px;
+
     display: flex;
+    flex-direction: row;
     align-items: center;
     justify-content: space-between;
-
-    padding: 16px 24px;
+    ${props => props.column && css`
+        flex-direction: column;
+        align-items: flex-start;
+    `}
 
     cursor: pointer;
-    font-size: ${FONT_SIZE.BASE};
-
     transition: background-color ${TRANSITION_TIME.BASE}, color ${TRANSITION_TIME.BASE};
-
-    &:hover {
-        background-color: ${colors.GRAY_LIGHT};
-    }
 `;
 
-const AsideRow = (props) => (
-    <Wrapper>
-        {props.children}
+const AsideRow = ({ children, column }) => (
+    <Wrapper
+        column={column}
+    >{children}
     </Wrapper>
 );
 
+AsideRow.propTypes = {
+    column: PropTypes.bool,
+};
+
+AsideRow.defaultProps = {
+    column: false,
+}
+
 export default AsideRow;

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

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

@@ -4,29 +4,28 @@ import PropTypes from 'prop-types';
 
 import Icon from 'components/common/Icon';
 import AsideRow from './AsideRow';
+import AsideRowCoin from './AsideRowCoin';
 import CoinName from './CoinName';
 
 import ICONS from 'constants/icons';
 import colors from 'config/colors';
 import { coinProp } from './common';
 
-const A = styled.a`
-    display: block;
-`;
-
 const AsideRowCoinExternal = ({ coin, url }) => (
-    <A href={url}>
-        <AsideRow>
-            <CoinName
-                coinImg={coin.img}
-                text={coin.name}
-            />
-            <Icon
-                icon={ICONS.REDIRECT}
-                color={colors.TEXT_SECONDARY}
-            />
-        </AsideRow>
-    </A>
+    <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 = {

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

@@ -4,23 +4,23 @@ import PropTypes from 'prop-types';
 import { NavLink } from 'react-router-dom';
 
 import AsideRow from './AsideRow';
+import AsideRowCoin from './AsideRowCoin';
 import CoinName from './CoinName';
 
+import colors from 'config/colors';
 import { coinProp } from './common';
 
-const Wrapper = styled(NavLink)`
-    display: block;
-`;
-
 const AsideRowCoinWallet = ({ coin, url }) => (
-    <Wrapper to={url}>
-        <AsideRow>
-            <CoinName
-                coinImg={coin.img}
-                text={coin.name}
-            />
-        </AsideRow>
-    </Wrapper>
+    <NavLink to={url}>
+        <AsideRowCoin>
+            <AsideRow>
+                <CoinName
+                    coinImg={coin.img}
+                    text={coin.name}
+                />
+            </AsideRow>
+        </AsideRowCoin>
+    </NavLink>
 );
 
 AsideRowCoinWallet.propTypes = {

src/js/components/wallet/aside/CoinName.js

@@ -9,10 +9,6 @@ const Wrapper = styled.div`
     display: flex;
     align-items: center;
     justify-content: space-between;
-
-    p {
-        color: ${colors.TEXT_PRIMARY};
-    }
 `;
 
 const Logo = styled.div`