Create coin link styled components for aside panel

src/js/components/wallet/aside/CoinLink/CoinLink.js

@@ -0,0 +1,52 @@
+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 CoinLogo from './CoinLogo';
+
+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 CoinLink = ({ coin, iconRight }) => (
+    <Wrapper>
+        <CoinLogo
+            coinImg={coin.img}
+            text={coin.name}
+        />
+        {iconRight ? (
+            <Icon
+                icon={iconRight.type}
+                color={iconRight.color}
+            />
+        ) : null}
+    </Wrapper>
+);
+
+CoinLink.propTypes = {
+    ...coinProp,
+    iconRight: PropTypes.shape({
+        type: PropTypes.string.isRequired,
+        color: PropTypes.string.isRequired,
+    }),
+};
+
+export default CoinLink;

src/js/components/wallet/aside/CoinLink/CoinLogo.js

@@ -0,0 +1,44 @@
+import styled from 'styled-components';
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import colors from 'config/colors';
+import { ICON_SIZE } from 'config/variables';
+
+const Wrapper = styled.div`
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+
+    p {
+        color: ${colors.TEXT_PRIMARY};
+    }
+
+`;
+
+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('images/${props => props.coinImg}-logo.png');
+`;
+
+const CoinLogo = ({ coinImg, text }) => (
+    <Wrapper>
+        <Logo
+            coinImg={coinImg}
+        />
+        <p>{text}</p>
+    </Wrapper>
+);
+
+CoinLogo.propTypes = {
+    coinImg: PropTypes.string.isRequired,
+    text: PropTypes.string.isRequired,
+};
+
+export default CoinLogo

src/js/components/wallet/aside/CoinLink/ExternalCoinLink.js

@@ -0,0 +1,32 @@
+import styled from 'styled-components';
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import ICONS from 'constants/icons';
+import colors from 'config/colors';
+
+import { coinProp } from './common';
+import CoinLink from './CoinLink';
+
+const A = styled.a`
+    display: block;
+`;
+
+const ExternalCoinLink = ({ coin, url }) => (
+    <A href={url}>
+        <CoinLink
+            coin={coin}
+            iconRight={{
+                type: ICONS.REDIRECT,
+                color: colors.TEXT_SECONDARY,
+            }}
+        />
+    </A>
+);
+
+ExternalCoinLink.propTypes = {
+    ...coinProp,
+    url: PropTypes.string,
+};
+
+export default ExternalCoinLink;

src/js/components/wallet/aside/CoinLink/WalletCoinLink.js

@@ -0,0 +1,24 @@
+import styled from 'styled-components';
+import React from 'react';
+import PropTypes from 'prop-types';
+import { NavLink } from 'react-router-dom';
+
+import { coinProp } from './common';
+import CoinLink from './CoinLink';
+
+const Wrapper = styled(NavLink)`
+    display: block;
+`;
+
+const WalletCoinLink = ({ coin, url }) => (
+    <Wrapper to={url}>
+        <CoinLink coin={coin}/>
+    </Wrapper>
+);
+
+WalletCoinLink.propTypes = {
+    ...coinProp,
+    url: PropTypes.string.isRequired,
+};
+
+export default WalletCoinLink;

src/js/components/wallet/aside/CoinLink/common.js

@@ -0,0 +1,8 @@
+import PropTypes from 'prop-types';
+
+export const coinProp = {
+    coin: PropTypes.shape({
+        img: PropTypes.string.isRequired,
+        name: PropTypes.string.isRequired,
+    }).isRequired,
+};

src/js/components/wallet/aside/CoinLink/index.js

@@ -0,0 +1,2 @@
+export { default as ExternalCoinLink } from './ExternalCoinLink';
+export { default as WalletCoinLink } from './WalletCoinLink';