blob: a8bef3d613a9cfdaa45efbe58e0859f1560b6c4b (
plain) (
blame)
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
54
55
56
57
58
59
60
61
62
63
64
65
|
import * as _ from 'lodash';
import * as React from 'react';
import { ColorOption } from '../style/theme';
import { ERC20Asset } from '../types';
import { assetUtils } from '../util/asset';
import { Circle, Container, Flex, Text } from './ui';
export interface ERC20TokenSelectorProps {
tokens: ERC20Asset[];
onTokenSelect: (token: ERC20Asset) => void;
}
export const ERC20TokenSelector: React.StatelessComponent<ERC20TokenSelectorProps> = ({ tokens, onTokenSelect }) => (
<Container>
<Container overflow="scroll" height="325px">
{_.map(tokens, token => <TokenSelectorRow key={token.assetData} token={token} onClick={onTokenSelect} />)}
</Container>
</Container>
);
interface TokenSelectorRowProps {
token: ERC20Asset;
onClick: (token: ERC20Asset) => void;
}
class TokenSelectorRow extends React.Component<TokenSelectorRowProps> {
public render(): React.ReactNode {
const { token } = this.props;
const displaySymbol = assetUtils.bestNameForAsset(token);
return (
<Container
padding="12px 0px"
borderBottom="1px solid"
borderColor={ColorOption.feintGrey}
backgroundColor={ColorOption.white}
width="100%"
onClick={this._handleClick}
darkenOnHover={true}
cursor="pointer"
>
<Container marginLeft="10px">
<Flex justify="flex-start">
<Container marginRight="10px">
<Circle diameter={30} fillColor={token.metaData.primaryColor}>
<Flex height="100%">
<Text fontColor={ColorOption.white} fontSize="8px">
{displaySymbol}
</Text>
</Flex>
</Circle>
</Container>
<Text fontWeight={700} fontColor={ColorOption.black}>
{displaySymbol}
</Text>
</Flex>
</Container>
</Container>
);
}
private readonly _handleClick = (): void => {
this.props.onClick(this.props.token);
};
}
|
