diff --git a/.eslintignore b/.eslintignore index cb7239b8..ec297d25 100644 --- a/.eslintignore +++ b/.eslintignore @@ -2,6 +2,5 @@ public build build-devel coverage -images node_modules src/flowtype/npm \ No newline at end of file diff --git a/src/components/images/CoinLogo/images/bch.png b/src/components/images/CoinLogo/images/bch.png new file mode 100644 index 00000000..9590c12e Binary files /dev/null and b/src/components/images/CoinLogo/images/bch.png differ diff --git a/src/components/images/CoinLogo/images/btc.png b/src/components/images/CoinLogo/images/btc.png new file mode 100644 index 00000000..5b77226c Binary files /dev/null and b/src/components/images/CoinLogo/images/btc.png differ diff --git a/src/components/images/CoinLogo/images/btg.png b/src/components/images/CoinLogo/images/btg.png new file mode 100644 index 00000000..5eda4570 Binary files /dev/null and b/src/components/images/CoinLogo/images/btg.png differ diff --git a/src/components/images/CoinLogo/images/dash.png b/src/components/images/CoinLogo/images/dash.png new file mode 100644 index 00000000..5c3a113d Binary files /dev/null and b/src/components/images/CoinLogo/images/dash.png differ diff --git a/src/components/images/CoinLogo/images/etc.png b/src/components/images/CoinLogo/images/etc.png new file mode 100644 index 00000000..e868d6ea Binary files /dev/null and b/src/components/images/CoinLogo/images/etc.png differ diff --git a/src/components/images/CoinLogo/images/eth.png b/src/components/images/CoinLogo/images/eth.png new file mode 100644 index 00000000..5b7c1a8a Binary files /dev/null and b/src/components/images/CoinLogo/images/eth.png differ diff --git a/src/components/images/CoinLogo/images/ltc.png b/src/components/images/CoinLogo/images/ltc.png new file mode 100644 index 00000000..201f2350 Binary files /dev/null and b/src/components/images/CoinLogo/images/ltc.png differ diff --git a/src/components/images/CoinLogo/images/nem.png b/src/components/images/CoinLogo/images/nem.png new file mode 100644 index 00000000..1b4cccf2 Binary files /dev/null and b/src/components/images/CoinLogo/images/nem.png differ diff --git a/src/components/images/CoinLogo/images/rinkeby.png b/src/components/images/CoinLogo/images/rinkeby.png new file mode 100644 index 00000000..8e817a70 Binary files /dev/null and b/src/components/images/CoinLogo/images/rinkeby.png differ diff --git a/src/components/images/CoinLogo/images/trop.png b/src/components/images/CoinLogo/images/trop.png new file mode 100644 index 00000000..0f7e2aac Binary files /dev/null and b/src/components/images/CoinLogo/images/trop.png differ diff --git a/src/components/images/CoinLogo/images/zec.png b/src/components/images/CoinLogo/images/zec.png new file mode 100644 index 00000000..134ba792 Binary files /dev/null and b/src/components/images/CoinLogo/images/zec.png differ diff --git a/src/components/images/CoinLogo/index.js b/src/components/images/CoinLogo/index.js index 60761e7b..472bbdd1 100644 --- a/src/components/images/CoinLogo/index.js +++ b/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 CoinLogo = ({ - className, coinNetwork, coinImg, -}) => { - let coinImgName = coinNetwork; - if (coinImgName === 'ethereum') { - coinImgName = 'eth'; - } else if (coinImgName === 'ethereum-classic') { - coinImgName = 'etc'; - } - const coinImgUrl = `../images/${coinImgName}-logo.png`; +const Logo = styled.img` + width: ${props => (props.hasLongIcon ? '15px' : '23px')}; + margin-left: ${props => (props.hasLongIcon ? '3px' : '0px')}; + display: block; +`; - return ( - - ); -}; +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'; + } + return coinImgName || coinId; + } + + hasLongIcon(coinImgName) { + let hasLongIcon = false; + if (this.longIcons.includes(coinImgName)) { + hasLongIcon = true; + } + return hasLongIcon; + } + + render() { + const iconName = this.getIcon(); + return ( + + + + ); + } +} CoinLogo.propTypes = { - className: PropTypes.string, - coinImg: PropTypes.string, + coinId: PropTypes.string, coinNetwork: PropTypes.string, }; diff --git a/src/constants/coins.js b/src/constants/coins.js index cfdd9d26..7571f8ab 100644 --- a/src/constants/coins.js +++ b/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', }, -]; +]; \ No newline at end of file diff --git a/src/views/Wallet/components/LeftNavigation/components/CoinMenu/index.js b/src/views/Wallet/components/LeftNavigation/components/CoinMenu/index.js index 578ff20b..949d9d77 100644 --- a/src/views/Wallet/components/LeftNavigation/components/CoinMenu/index.js +++ b/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 => ( - + ( @@ -57,12 +53,10 @@ const RowCoin = ({ )} - - - +

{coin.name}

@@ -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),