Rewrite coin logo component to use import
@ -2,6 +2,5 @@ public
|
||||
build
|
||||
build-devel
|
||||
coverage
|
||||
images
|
||||
node_modules
|
||||
src/flowtype/npm
|
BIN
src/components/images/CoinLogo/images/bch.png
Normal file
After Width: | Height: | Size: 5.6 KiB |
BIN
src/components/images/CoinLogo/images/btc.png
Normal file
After Width: | Height: | Size: 5.7 KiB |
BIN
src/components/images/CoinLogo/images/btg.png
Normal file
After Width: | Height: | Size: 6.9 KiB |
BIN
src/components/images/CoinLogo/images/dash.png
Normal file
After Width: | Height: | Size: 4.6 KiB |
BIN
src/components/images/CoinLogo/images/etc.png
Normal file
After Width: | Height: | Size: 5.4 KiB |
BIN
src/components/images/CoinLogo/images/eth.png
Normal file
After Width: | Height: | Size: 4.9 KiB |
BIN
src/components/images/CoinLogo/images/ltc.png
Normal file
After Width: | Height: | Size: 7.3 KiB |
BIN
src/components/images/CoinLogo/images/nem.png
Normal file
After Width: | Height: | Size: 4.8 KiB |
BIN
src/components/images/CoinLogo/images/rinkeby.png
Normal file
After Width: | Height: | Size: 3.5 KiB |
BIN
src/components/images/CoinLogo/images/trop.png
Normal file
After Width: | Height: | Size: 3.7 KiB |
BIN
src/components/images/CoinLogo/images/zec.png
Normal file
After Width: | Height: | Size: 4.8 KiB |
@ -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 CoinLogo = ({
|
||||
className, coinNetwork, coinImg,
|
||||
}) => {
|
||||
const Logo = styled.img`
|
||||
width: ${props => (props.hasLongIcon ? '15px' : '23px')};
|
||||
margin-left: ${props => (props.hasLongIcon ? '3px' : '0px')};
|
||||
display: block;
|
||||
`;
|
||||
|
||||
class CoinLogo extends Component {
|
||||
constructor() {
|
||||
super();
|
||||
this.longIcons = ['etc', 'eth', 'trop'];
|
||||
}
|
||||
|
||||
getIcon() {
|
||||
const { coinNetwork, coinId } = this.props;
|
||||
let coinImgName = coinNetwork;
|
||||
if (coinImgName === 'ethereum') {
|
||||
coinImgName = 'eth';
|
||||
} else if (coinImgName === 'ethereum-classic') {
|
||||
coinImgName = 'etc';
|
||||
}
|
||||
const coinImgUrl = `../images/${coinImgName}-logo.png`;
|
||||
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
|
||||
className={className}
|
||||
coinImg={coinImgName ? coinImgUrl : coinImg}
|
||||
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,
|
||||
};
|
||||
|
||||
|
@ -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',
|
||||
},
|
||||
];
|
@ -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,
|
||||
|
@ -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}
|
||||
coinId={coin.id}
|
||||
/>
|
||||
</LogoWrapper>
|
||||
<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),
|
||||
|