From f0bf6eb277c59837257903c9f6b046890534213b Mon Sep 17 00:00:00 2001
From: Vasek Mlejnsky <vasek.mlejnsky@gmail.com>
Date: Mon, 27 Aug 2018 10:46:41 +0200
Subject: [PATCH] Use "CoinLogo" component instead of a locally styled "Logo"
 div

---
 .../components/RowCoin/index.js               | 22 ++++++++-----------
 1 file changed, 9 insertions(+), 13 deletions(-)

diff --git a/src/js/views/Wallet/components/LeftNavigation/components/RowCoin/index.js b/src/js/views/Wallet/components/LeftNavigation/components/RowCoin/index.js
index 819ff669..a0cad05f 100644
--- a/src/js/views/Wallet/components/LeftNavigation/components/RowCoin/index.js
+++ b/src/js/views/Wallet/components/LeftNavigation/components/RowCoin/index.js
@@ -2,26 +2,18 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import styled from 'styled-components';
 import Icon from 'components/Icon';
-import { ICON_SIZE, FONT_SIZE, LEFT_NAVIGATION_ROW } from 'config/variables';
+import CoinLogo from 'components/CoinLogo';
+import { FONT_SIZE, LEFT_NAVIGATION_ROW } from 'config/variables';
 import colors from 'config/colors';
 import Row from '../Row';
 
+
 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: ${LEFT_NAVIGATION_ROW.PADDING};
     height: 50px;
@@ -64,7 +56,10 @@ const RowCoin = ({
                 )}
                 <CoinNameWrapper>
                     <LogoWrapper>
-                        <Logo coinImg={coin.img} />
+                        <CoinLogo
+                            coinNetwork={coin.network}
+                            coinImg={coin.img}
+                        />
                     </LogoWrapper>
                     <p>{coin.name}</p>
                 </CoinNameWrapper>
@@ -87,8 +82,9 @@ const iconShape = {
 };
 RowCoin.propTypes = {
     coin: PropTypes.shape({
-        img: PropTypes.string.isRequired,
         name: PropTypes.string.isRequired,
+        network: PropTypes.string.isRequired,
+        img: PropTypes.string,
     }).isRequired,
     iconLeft: PropTypes.shape(iconShape),
     iconRight: PropTypes.shape(iconShape),