1
0
mirror of https://github.com/trezor/trezor-wallet synced 2024-12-25 16:38:08 +00:00

Convert 'CoinSelection' to a class component

This commit is contained in:
Vasek Mlejnsky 2018-08-16 12:26:40 +02:00
parent 0410735c2a
commit f8c11f918e

View File

@ -3,7 +3,8 @@ import coins from 'constants/coins';
import colors from 'config/colors';
import ICONS from 'config/icons';
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 AsideRowCoin from './row/coin/AsideRowCoin';
@ -12,67 +13,75 @@ import AsideRowCoin from './row/coin/AsideRowCoin';
import type { Props } from './index';
const CoinSelection = (props: Props) => {
const { config } = props.localStorage;
const { selectedDevice } = props.wallet;
let baseUrl: string = '';
if (selectedDevice && selectedDevice.features) {
baseUrl = `/device/${selectedDevice.features.device_id}`;
if (selectedDevice.instance) {
baseUrl += `:${selectedDevice.instance}`;
class CoinSelection extends Component {
getBaseUrl() {
const { selectedDevice } = this.props.wallet;
let baseUrl = '';
if (selectedDevice && selectedDevice.features) {
baseUrl = `/device/${selectedDevice.features.device_id}`;
if (selectedDevice.instance) {
baseUrl += `:${selectedDevice.instance}`;
}
}
return baseUrl;
}
const walletCoins = config.coins.map((item) => {
const url = `${baseUrl}/network/${item.network}/account/0`;
let imgName = item.network;
if (item.network === 'ethereum') {
imgName = 'eth';
} else if (item.network === 'ethereum-classic') {
imgName = 'etc';
}
const imgUrl = `../images/${imgName}-logo.png`;
render() {
const { config } = this.props.localStorage;
return (
<NavLink to={url}>
<AsideRowCoin
coin={{
img: imgUrl,
name: item.name,
}}
<React.Fragment>
{config.coins.map((item) => {
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 (
<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 => (
<a href={coin.url}>
<AsideRowCoin
coin={{
img: coin.image,
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>
);
CoinSelection.propTypes = {
config: PropTypes.object,
wallet: PropTypes.object,
selectedDevice: PropTypes.object,
localStorage: PropTypes.object,
};
export default CoinSelection;