Newer
Older
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
// Copyright 2015-2018 Parity Technologies (UK) Ltd.
// This file is part of Parity.
//
// SPDX-License-Identifier: MIT
import React from 'react';
import PropTypes from 'prop-types';
import Card from '../Card';
import Placeholder from '../Placeholder';
const TokenCard = ({ balance, decimals, token, ...otherProps }) => (
<Card {...otherProps}>
<div className='token'>
<div className='token_icon'>
{token.logo ? (
<img alt={token.symbol} src={token.logo} />
) : (
<Placeholder height={20} width={20} />
)}
</div>
<div className='token_name'>
{token.name ? token.name : <Placeholder height={20} width={100} />}
</div>
<div className='token_balance'>
{Number.isFinite(balance) ? (
<span>
{balance.toFixed(decimals)}{' '}
<span className='token_symbol'>{token.symbol}</span>
</span>
) : (
<Placeholder height={20} width={80} />
)}
</div>
</div>
</Card>
);
TokenCard.defaultProps = {
decimals: 2
};
TokenCard.propTypes = {
balance: PropTypes.number,
decimals: PropTypes.number.isRequired,
token: PropTypes.shape({
logo: PropTypes.string,
name: PropTypes.string,
symbol: PropTypes.string
}).isRequired
};
export default TokenCard;