arno/trezor-wallet
1
0
Fork 0
mirror of https://github.com/trezor/trezor-wallet synced 2024-11-24 17:28:10 +00:00
Code Issues Releases Wiki Activity

Convert 'CoinSelection' to a class component

Browse Source
This commit is contained in:
Vasek Mlejnsky 2018-08-16 12:26:40 +02:00
parent 0410735c2a
commit f8c11f918e
1 changed files with 64 additions and 55 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

119
src/js/components/wallet/aside/CoinSelection.js
View File

@ -3,7 +3,8 @@ import coins from 'constants/coins';
import colors from 'config/colors'; import colors from 'config/colors';
import ICONS from 'config/icons'; import ICONS from 'config/icons';
import { NavLink } from 'react-router-dom'; import { NavLink } from 'react-router-dom';
import React from 'react'; import PropTypes from 'prop-types';
import React, { Component } from 'react';
import AsideDivider from './AsideDivider'; import AsideDivider from './AsideDivider';
import AsideRowCoin from './row/coin/AsideRowCoin'; import AsideRowCoin from './row/coin/AsideRowCoin';
@ -12,67 +13,75 @@ import AsideRowCoin from './row/coin/AsideRowCoin';
import type { Props } from './index'; import type { Props } from './index';
const CoinSelection = (props: Props) => { class CoinSelection extends Component {
const { config } = props.localStorage; getBaseUrl() {
const { selectedDevice } = props.wallet; const { selectedDevice } = this.props.wallet;
let baseUrl = '';
let baseUrl: string = ''; if (selectedDevice && selectedDevice.features) {
if (selectedDevice && selectedDevice.features) { baseUrl = `/device/${selectedDevice.features.device_id}`;
baseUrl = `/device/${selectedDevice.features.device_id}`; if (selectedDevice.instance) {
if (selectedDevice.instance) { baseUrl += `:${selectedDevice.instance}`;
baseUrl += `:${selectedDevice.instance}`; }
} }
return baseUrl;
} }
const walletCoins = config.coins.map((item) => { render() {
const url = `${baseUrl}/network/${item.network}/account/0`; const { config } = this.props.localStorage;
let imgName = item.network;
if (item.network === 'ethereum') {
imgName = 'eth';
} else if (item.network === 'ethereum-classic') {
imgName = 'etc';
}
const imgUrl = `../images/${imgName}-logo.png`;
return ( return (
<NavLink to={url}> <React.Fragment>
<AsideRowCoin {config.coins.map((item) => {
coin={{ let imgName = item.network;
img: imgUrl, if (item.network === 'ethereum') {
name: item.name, imgName = 'eth';
}} } else if (item.network === 'ethereum-classic') {
imgName = 'etc';
}
const imgUrl = `../images/${imgName}-logo.png`;
return (
<NavLink
key={item.network}
to={`${this.getBaseUrl()}/network/${item.network}/account/0`}
>
<AsideRowCoin
coin={{
img: imgUrl,
name: item.name,
}}
/>
</NavLink>
);
})}
<AsideDivider
textLeft="Other coins"
textRight="(You will be redirected)"
/> />
</NavLink> {coins.map(coin => (
<a href={coin.url}>
<AsideRowCoin
coin={{
img: coin.image,
name: coin.coinName,
}}
icon={{
type: ICONS.REDIRECT,
color: colors.TEXT_SECONDARY,
}}
/>
</a>
))}
</React.Fragment>
); );
}); }
}
const externalCoins = coins.map(coin => ( CoinSelection.propTypes = {
<a href={coin.url}> config: PropTypes.object,
<AsideRowCoin wallet: PropTypes.object,
coin={{ selectedDevice: PropTypes.object,
img: coin.image, localStorage: PropTypes.object,
name: coin.coinName,
}}
icon={{
type: ICONS.REDIRECT,
color: colors.TEXT_SECONDARY,
}}
/>
</a>
));
return (
<AsideSection>
{ walletCoins }
<AsideDivider
textLeft="Other coins"
textRight="(You will be redirected)"
/>
{ externalCoins }
</AsideSection>
);
}; };
export default CoinSelection; export default CoinSelection;