Rewrite coin logo component to use import

.eslintignore

@@ -2,6 +2,5 @@ public
 build
 build-devel
 coverage
-images
 node_modules
 src/flowtype/npm

src/components/images/CoinLogo/index.js

@@ -1,40 +1,58 @@
-import React from 'react';
+import React, { Component } from 'react';
 import styled from 'styled-components';
 import PropTypes from 'prop-types';
-import { ICON_SIZE } from 'config/variables';
-
-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 Wrapper = styled.div`
+    padding-right: 20px;
+    width: 40px;
+`;
+
+const Logo = styled.img`
+    width: ${props => (props.hasLongIcon ? '15px' : '23px')};
+    margin-left: ${props => (props.hasLongIcon ? '3px' : '0px')};
+    display: block;
 `;
 
-const CoinLogo = ({
-    className, coinNetwork, coinImg,
-}) => {
-    let coinImgName = coinNetwork;
-    if (coinImgName === 'ethereum') {
-        coinImgName = 'eth';
-    } else if (coinImgName === 'ethereum-classic') {
-        coinImgName = 'etc';
+class CoinLogo extends Component {
+    constructor() {
+        super();
+        this.longIcons = ['etc', 'eth', 'trop'];
     }
-    const coinImgUrl = `../images/${coinImgName}-logo.png`;
-
-    return (
-        <Logo
-            className={className}
-            coinImg={coinImgName ? coinImgUrl : coinImg}
-        />
-    );
-};
+
+    getIcon() {
+        const { coinNetwork, coinId } = this.props;
+        let coinImgName = coinNetwork;
+        if (coinImgName === 'ethereum') {
+            coinImgName = 'eth';
+        } else if (coinImgName === 'ethereum-classic') {
+            coinImgName = 'etc';
+        }
+        return coinImgName || coinId;
+    }
+
+    hasLongIcon(coinImgName) {
+        let hasLongIcon = false;
+        if (this.longIcons.includes(coinImgName)) {
+            hasLongIcon = true;
+        }
+        return hasLongIcon;
+    }
+
+    render() {
+        const iconName = this.getIcon();
+        return (
+            <Wrapper>
+                <Logo
+                    hasLongIcon={this.hasLongIcon(iconName)}
+                    src={require(`./images/${iconName}.png`)} // eslint-disable-line
+                />
+            </Wrapper>
+        );
+    }
+}
 
 CoinLogo.propTypes = {
-    className: PropTypes.string,
-    coinImg: PropTypes.string,
+    coinId: PropTypes.string,
     coinNetwork: PropTypes.string,
 };
 

src/constants/coins.js

@@ -1,32 +1,26 @@
 export default [
     {
+        id: 'btc',
         coinName: 'Bitcoin',
-        url: 'https://wallet.trezor.io/#/coin/btc',
-        image: '../images/btc-logo.png',
     },
     {
+        id: 'ltc',
         coinName: 'Litecoin',
-        url: 'https://wallet.trezor.io/#/coin/ltc',
-        image: '../images/ltc-logo.png',
     },
     {
+        id: 'bch',
         coinName: 'Bitcoin Cash',
-        url: 'https://wallet.trezor.io/#/coin/bch',
-        image: '../images/bch-logo.png',
     },
     {
+        id: 'btg',
         coinName: 'Bitcoin Gold',
-        url: 'https://wallet.trezor.io/#/coin/btg',
-        image: '../images/btg-logo.png',
     },
     {
+        id: 'dash',
         coinName: 'Dash',
-        url: 'https://wallet.trezor.io/#/coin/dash',
-        image: '../images/dash-logo.png',
     },
     {
+        id: 'zec',
         coinName: 'Zcash',
-        url: 'https://wallet.trezor.io/#/coin/zec',
-        image: '../images/zec-logo.png',
     },
-];
+];

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

@@ -24,6 +24,10 @@ class CoinMenu extends Component {
         return baseUrl;
     }
 
+    getCoinUrl(coinId) {
+        return `https://wallet.trezor.io/#/coin/${coinId}`;
+    }
+
     render() {
         const { config } = this.props.localStorage;
         return (
@@ -47,11 +51,11 @@ class CoinMenu extends Component {
                     hasBorder
                 />
                 {coins.map(coin => (
-                    <a key={coin.url} href={coin.url}>
+                    <a key={this.getCoinUrl(coin.id)} href={this.getCoinUrl(coin.id)}>
                         <RowCoin
                             coin={{
                                 name: coin.coinName,
-                                img: coin.image,
+                                id: coin.id,
                             }}
                             iconRight={{
                                 type: ICONS.SKIP,

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

@@ -37,10 +37,6 @@ const IconWrapper = styled.div`
     margin-right: 10px;
 `;
 
-const LogoWrapper = styled.div`
-    margin-right: 3px;
-`;
-
 const RowCoin = ({
     coin, iconLeft, iconRight,
 }) => (
@@ -57,12 +53,10 @@ const RowCoin = ({
                     </IconWrapper>
                 )}
                 <CoinNameWrapper>
-                    <LogoWrapper>
-                        <CoinLogo
-                            coinNetwork={coin.network}
-                            coinImg={coin.img}
-                        />
-                    </LogoWrapper>
+                    <CoinLogo
+                        coinNetwork={coin.network}
+                        coinId={coin.id}
+                    />
                     <p>{coin.name}</p>
                 </CoinNameWrapper>
             </Left>
@@ -86,7 +80,7 @@ RowCoin.propTypes = {
     coin: PropTypes.shape({
         name: PropTypes.string.isRequired,
         network: PropTypes.string,
-        img: PropTypes.string,
+        id: PropTypes.string,
     }).isRequired,
     iconLeft: PropTypes.shape(iconShape),
     iconRight: PropTypes.shape(iconShape),