mirror of https://github.com/trezor/trezor-wallet
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
129 lines
3.8 KiB
129 lines
3.8 KiB
import React, { PureComponent } from 'react';
|
|
import styled from 'styled-components';
|
|
import { FormattedMessage } from 'react-intl';
|
|
import ColorHash from 'color-hash';
|
|
import ScaleText from 'react-scale-text';
|
|
import { FONT_WEIGHT } from 'config/variables';
|
|
import { Button, Icon, Tooltip, colors, icons as ICONS } from 'trezor-ui-components';
|
|
import * as stateUtils from 'reducers/utils';
|
|
import BigNumber from 'bignumber.js';
|
|
import PropTypes from 'prop-types';
|
|
import l10nCommonMessages from 'views/common.messages';
|
|
|
|
const TokenWrapper = styled.div`
|
|
padding: 14px 0;
|
|
position: relative;
|
|
display: flex;
|
|
align-items: center;
|
|
border-top: 1px solid ${colors.DIVIDER};
|
|
`;
|
|
|
|
const TokenIcon = styled.div`
|
|
width: 36px;
|
|
height: 36px;
|
|
border-radius: 50%;
|
|
margin-right: 10px;
|
|
line-height: 30px;
|
|
text-transform: uppercase;
|
|
user-select: none;
|
|
text-align: center;
|
|
padding: 6px;
|
|
color: ${props => props.textColor};
|
|
border-color: ${props => props.backgroundColor};
|
|
background: ${props => props.backgroundColor};
|
|
`;
|
|
|
|
const P = styled.p`
|
|
line-height: 24px;
|
|
padding: 0px;
|
|
color: inherit;
|
|
`;
|
|
|
|
const TokenText = styled.div`
|
|
font-weight: ${FONT_WEIGHT.MEDIUM};
|
|
color: ${colors.TEXT_SECONDARY};
|
|
`;
|
|
|
|
const TokenName = styled(TokenText)`
|
|
flex: 1 1 0;
|
|
padding-right: 5px;
|
|
`;
|
|
|
|
const TokenBalance = styled(TokenText)`
|
|
flex: 1 0 0;
|
|
word-break: break-all;
|
|
text-align: right;
|
|
`;
|
|
|
|
const RemoveTokenButton = styled(Button)`
|
|
padding: 0 0 0 10px;
|
|
`;
|
|
|
|
const TooltipIcon = styled(Icon)`
|
|
cursor: pointer;
|
|
`;
|
|
|
|
class AddedToken extends PureComponent {
|
|
getTokenBalance(token) {
|
|
const pendingAmount = stateUtils.getPendingAmount(this.props.pending, token.symbol, true);
|
|
const balance = new BigNumber(token.balance).minus(pendingAmount).toString(10);
|
|
return balance;
|
|
}
|
|
|
|
render() {
|
|
const bgColor = new ColorHash({ lightness: 0.9 });
|
|
const textColor = new ColorHash({ lightness: 0.3, saturation: 1 });
|
|
|
|
return (
|
|
<TokenWrapper key={this.props.token.symbol}>
|
|
<TokenIcon
|
|
textColor={textColor.hex(this.props.token.address)}
|
|
backgroundColor={bgColor.hex(this.props.token.address)}
|
|
>
|
|
<ScaleText widthOnly>
|
|
<P>{this.props.token.symbol}</P>
|
|
</ScaleText>
|
|
</TokenIcon>
|
|
|
|
<TokenName>{this.props.token.name}</TokenName>
|
|
<TokenBalance>
|
|
{this.props.hideBalance ? (
|
|
<Tooltip
|
|
maxWidth={200}
|
|
placement="top"
|
|
content={
|
|
<FormattedMessage
|
|
{...l10nCommonMessages.TR_THE_ACCOUNT_BALANCE_IS_HIDDEN}
|
|
/>
|
|
}
|
|
>
|
|
<TooltipIcon
|
|
icon={ICONS.EYE_CROSSED}
|
|
size={14}
|
|
color={colors.TEXT_SECONDARY}
|
|
/>
|
|
</Tooltip>
|
|
) : (
|
|
`${this.getTokenBalance(this.props.token)} ${this.props.token.symbol}`
|
|
)}
|
|
</TokenBalance>
|
|
<RemoveTokenButton
|
|
isTransparent
|
|
onClick={() => this.props.removeToken(this.props.token)}
|
|
>
|
|
<Icon icon={ICONS.CLOSE} size={12} />
|
|
</RemoveTokenButton>
|
|
</TokenWrapper>
|
|
);
|
|
}
|
|
}
|
|
|
|
AddedToken.propTypes = {
|
|
token: PropTypes.object,
|
|
pending: PropTypes.array,
|
|
removeToken: PropTypes.func,
|
|
hideBalance: PropTypes.bool,
|
|
};
|
|
|
|
export default AddedToken;
|