arno/trezor-wallet
1
0
Fork 0
mirror of https://github.com/trezor/trezor-wallet synced 2025-07-09 16:18:17 +00:00
Code Issues Releases Wiki Activity

Use "CoinLogo" component instead of a locally styled "Logo" div

Browse Source
This commit is contained in:
Vasek Mlejnsky 2018-08-27 10:46:41 +02:00
parent df9f7f51a1
commit f0bf6eb277
1 changed files with 9 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
src/js/views/Wallet/components/LeftNavigation/components/RowCoin/index.js
View File

@ -2,26 +2,18 @@ import React from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import styled from 'styled-components'; import styled from 'styled-components';
import Icon from 'components/Icon'; 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 colors from 'config/colors';
import Row from '../Row'; import Row from '../Row';
const CoinNameWrapper = styled.div` const CoinNameWrapper = styled.div`
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; 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` const RowCoinWrapper = styled.div`
padding: ${LEFT_NAVIGATION_ROW.PADDING}; padding: ${LEFT_NAVIGATION_ROW.PADDING};
height: 50px; height: 50px;
@ -64,7 +56,10 @@ const RowCoin = ({
)} )}
<CoinNameWrapper> <CoinNameWrapper>
<LogoWrapper> <LogoWrapper>
<Logo coinImg={coin.img} /> <CoinLogo
coinNetwork={coin.network}
coinImg={coin.img}
/>
</LogoWrapper> </LogoWrapper>
<p>{coin.name}</p> <p>{coin.name}</p>
</CoinNameWrapper> </CoinNameWrapper>
@ -87,8 +82,9 @@ const iconShape = {
}; };
RowCoin.propTypes = { RowCoin.propTypes = {
coin: PropTypes.shape({ coin: PropTypes.shape({
img: PropTypes.string.isRequired,
name: PropTypes.string.isRequired, name: PropTypes.string.isRequired,
network: PropTypes.string.isRequired,
img: PropTypes.string,
}).isRequired, }).isRequired,
iconLeft: PropTypes.shape(iconShape), iconLeft: PropTypes.shape(iconShape),
iconRight: PropTypes.shape(iconShape), iconRight: PropTypes.shape(iconShape),