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