Create a general 'AsideRow' component

- delete 'AsideRowCoin' and move logic up into 'AsideRowCoinExternal' and 'AsideRowCoinWallet'

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

@@ -0,0 +1,30 @@
+import styled from 'styled-components';
+import React from 'react';
+
+import colors from 'config/colors';
+import { FONT_SIZE, TRANSITION_TIME } from 'config/variables';
+
+const Wrapper = styled.div`
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+
+    padding: 16px 24px;
+
+    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}
+    </Wrapper>
+);
+
+export default AsideRow;

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

@@ -1,52 +0,0 @@
-import styled from 'styled-components';
-import React from 'react';
-import PropTypes from 'prop-types';
-
-import Icon from 'components/common/Icon';
-import colors from 'config/colors';
-import { FONT_SIZE, TRANSITION_TIME } from 'config/variables';
-
-import { coinProp } from './common';
-import CoinName from './CoinName';
-
-const Wrapper = styled.div`
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-
-    padding: 16px 24px;
-
-    cursor: pointer;
-    font-size: ${FONT_SIZE.BASE};
-
-    transition: background-color ${TRANSITION_TIME.BASE}, color ${TRANSITION_TIME.BASE};
-
-    &:hover {
-        background-color: ${colors.GRAY_LIGHT};
-    }
-`;
-
-const AsideRowCoin = ({ coin, iconRight }) => (
-    <Wrapper>
-        <CoinName
-            coinImg={coin.img}
-            text={coin.name}
-        />
-        {iconRight ? (
-            <Icon
-                icon={iconRight.type}
-                color={iconRight.color}
-            />
-        ) : null}
-    </Wrapper>
-);
-
-AsideRowCoin.propTypes = {
-    ...coinProp,
-    iconRight: PropTypes.shape({
-        type: PropTypes.string.isRequired,
-        color: PropTypes.string.isRequired,
-    }),
-};
-
-export default AsideRowCoin;

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

@@ -2,11 +2,13 @@ import styled from 'styled-components';
 import React from 'react';
 import PropTypes from 'prop-types';
 
+import Icon from 'components/common/Icon';
+import AsideRow from './AsideRow';
+import CoinName from './CoinName';
+
 import ICONS from 'constants/icons';
 import colors from 'config/colors';
-
 import { coinProp } from './common';
-import AsideRowCoin from './AsideRowCoin';
 
 const A = styled.a`
     display: block;
@@ -14,13 +16,16 @@ const A = styled.a`
 
 const AsideRowCoinExternal = ({ coin, url }) => (
     <A href={url}>
-        <AsideRowCoin
+        <AsideRow>
-            coin={coin}
+            <CoinName
-            iconRight={{
+                coinImg={coin.img}
-                type: ICONS.REDIRECT,
+                text={coin.name}
-                color: colors.TEXT_SECONDARY,
+            />
-            }}
+            <Icon
-        />
+                icon={ICONS.REDIRECT}
+                color={colors.TEXT_SECONDARY}
+            />
+        </AsideRow>
     </A>
 );
 

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

@@ -3,8 +3,10 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { NavLink } from 'react-router-dom';
 
+import AsideRow from './AsideRow';
+import CoinName from './CoinName';
+
 import { coinProp } from './common';
-import AsideRowCoin from './AsideRowCoin';
 
 const Wrapper = styled(NavLink)`
     display: block;
@@ -12,7 +14,12 @@ const Wrapper = styled(NavLink)`
 
 const AsideRowCoinWallet = ({ coin, url }) => (
     <Wrapper to={url}>
-        <AsideRowCoin coin={coin}/>
+        <AsideRow>
+            <CoinName
+                coinImg={coin.img}
+                text={coin.name}
+            />
+        </AsideRow>
     </Wrapper>
 );