|
|
@ -1,52 +1,8 @@
|
|
|
|
import React, { Component } from 'react';
|
|
|
|
import React, { Component } from 'react';
|
|
|
|
import PropTypes from 'prop-types';
|
|
|
|
import PropTypes from 'prop-types';
|
|
|
|
import colors from '~/js/config/colors';
|
|
|
|
|
|
|
|
import styled from 'styled-components';
|
|
|
|
|
|
|
|
import { NavLink } from 'react-router-dom';
|
|
|
|
import { NavLink } from 'react-router-dom';
|
|
|
|
import navigationConstants from '~/js/constants/navigation';
|
|
|
|
import navigationConstants from '~/js/constants/navigation';
|
|
|
|
|
|
|
|
|
|
|
|
const Wrapper = styled.div`
|
|
|
|
|
|
|
|
padding: 0 0 20px 0;
|
|
|
|
|
|
|
|
`;
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const ImgActive = styled.img`
|
|
|
|
|
|
|
|
margin-right: 20px;
|
|
|
|
|
|
|
|
`;
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const ImgRedirect = styled.img`
|
|
|
|
|
|
|
|
margin-right: 15px;
|
|
|
|
|
|
|
|
`;
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const Link = styled(NavLink)`
|
|
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
|
|
align-items: center;
|
|
|
|
|
|
|
|
`;
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const LinkRedirect = styled.a`
|
|
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
|
|
align-items: center;
|
|
|
|
|
|
|
|
`;
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const Divider = styled.div`
|
|
|
|
|
|
|
|
font-size: 12px;
|
|
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
|
|
justify-content: space-between;
|
|
|
|
|
|
|
|
color: ${colors.TEXT_SECONDARY};
|
|
|
|
|
|
|
|
background: ${colors.GRAY_LIGHT};
|
|
|
|
|
|
|
|
padding: 8px 28px 8px 24px;
|
|
|
|
|
|
|
|
border-top: 1px solid ${colors.DIVIDER};
|
|
|
|
|
|
|
|
border-bottom: 1px solid ${colors.DIVIDER};
|
|
|
|
|
|
|
|
`;
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const RedirectText = styled.span`
|
|
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
|
|
justify-content: flex-end;
|
|
|
|
|
|
|
|
`;
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const Name = styled.div`
|
|
|
|
|
|
|
|
height: 100%;
|
|
|
|
|
|
|
|
`;
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
class CoinSelection extends Component {
|
|
|
|
class CoinSelection extends Component {
|
|
|
|
getBaseUrl() {
|
|
|
|
getBaseUrl() {
|
|
|
|
const { selectedDevice } = this.props.wallet;
|
|
|
|
const { selectedDevice } = this.props.wallet;
|
|
|
@ -60,39 +16,30 @@ class CoinSelection extends Component {
|
|
|
|
return baseUrl;
|
|
|
|
return baseUrl;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
getImagePath(symbol, network) {
|
|
|
|
|
|
|
|
const coindId = (symbol === 'tETH' ? network : symbol);
|
|
|
|
|
|
|
|
return `../../../../images/${coindId}-logo.png`;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
render() {
|
|
|
|
render() {
|
|
|
|
const { config } = this.props.localStorage;
|
|
|
|
const { config } = this.props.localStorage;
|
|
|
|
return (
|
|
|
|
return (
|
|
|
|
<Wrapper>
|
|
|
|
<section>
|
|
|
|
{config.coins.map(item => (
|
|
|
|
{config.coins.map(item => (
|
|
|
|
<Link
|
|
|
|
<NavLink
|
|
|
|
key={item.network}
|
|
|
|
key={item.network}
|
|
|
|
to={`${this.getBaseUrl()}/network/${item.network}/account/0`}
|
|
|
|
to={`${this.getBaseUrl()}/network/${item.network}/account/0`}
|
|
|
|
>
|
|
|
|
>{ item.name }
|
|
|
|
<ImgActive width="12px" src={this.getImagePath(item.symbol, item.network)} />
|
|
|
|
</NavLink>
|
|
|
|
<Name>{ item.name }</Name>
|
|
|
|
|
|
|
|
</Link>
|
|
|
|
|
|
|
|
))}
|
|
|
|
))}
|
|
|
|
<Divider>
|
|
|
|
<div className="coin-divider">
|
|
|
|
Other coins <RedirectText>(You will be redirected)</RedirectText>
|
|
|
|
Other coins <span>(You will be redirected)</span>
|
|
|
|
</Divider>
|
|
|
|
</div>
|
|
|
|
{navigationConstants.map(item => (
|
|
|
|
{navigationConstants.map(item => (
|
|
|
|
<LinkRedirect
|
|
|
|
<a
|
|
|
|
key={item.coinName}
|
|
|
|
key={item.coinName}
|
|
|
|
rel="noopener noreferrer"
|
|
|
|
rel="noopener noreferrer"
|
|
|
|
target="_blank"
|
|
|
|
target="_blank"
|
|
|
|
href={item.url}
|
|
|
|
href={item.url}
|
|
|
|
>
|
|
|
|
>{item.coinName}
|
|
|
|
<ImgRedirect src={item.image} width="20px" />
|
|
|
|
</a>
|
|
|
|
{item.coinName}
|
|
|
|
|
|
|
|
</LinkRedirect>
|
|
|
|
|
|
|
|
))}
|
|
|
|
))}
|
|
|
|
</Wrapper>
|
|
|
|
</section>
|
|
|
|
);
|
|
|
|
);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|