diff options
author | Brandon Millman <brandon@0xproject.com> | 2018-11-20 04:41:50 +0800 |
---|---|---|
committer | GitHub <noreply@github.com> | 2018-11-20 04:41:50 +0800 |
commit | 6119bd3115ea3270c7750e729b1d243cbba33fd2 (patch) | |
tree | 629f86641da48da7f0921e74e1852e306cfd7d5c /packages/instant/src/components | |
parent | 99541f89f7676f6b0d8a923ad377fa901a74f504 (diff) | |
parent | 9b725a645db423d20a4be1f1d5930f6ecb7ad682 (diff) | |
download | dexon-sol-tools-6119bd3115ea3270c7750e729b1d243cbba33fd2.tar dexon-sol-tools-6119bd3115ea3270c7750e729b1d243cbba33fd2.tar.gz dexon-sol-tools-6119bd3115ea3270c7750e729b1d243cbba33fd2.tar.bz2 dexon-sol-tools-6119bd3115ea3270c7750e729b1d243cbba33fd2.tar.lz dexon-sol-tools-6119bd3115ea3270c7750e729b1d243cbba33fd2.tar.xz dexon-sol-tools-6119bd3115ea3270c7750e729b1d243cbba33fd2.tar.zst dexon-sol-tools-6119bd3115ea3270c7750e729b1d243cbba33fd2.zip |
Merge pull request #1271 from 0xProject/feature/instant/icons
[instant] Add icons to token selector
Diffstat (limited to 'packages/instant/src/components')
-rw-r--r-- | packages/instant/src/components/erc20_token_selector.tsx | 31 |
1 files changed, 26 insertions, 5 deletions
diff --git a/packages/instant/src/components/erc20_token_selector.tsx b/packages/instant/src/components/erc20_token_selector.tsx index e4d8749a9..1b1921acb 100644 --- a/packages/instant/src/components/erc20_token_selector.tsx +++ b/packages/instant/src/components/erc20_token_selector.tsx @@ -78,6 +78,7 @@ interface TokenSelectorRowProps { class TokenSelectorRow extends React.Component<TokenSelectorRowProps> { public render(): React.ReactNode { const { token } = this.props; + const circleColor = token.metaData.primaryColor || 'black'; const displaySymbol = assetUtils.bestNameForAsset(token); return ( <Container @@ -93,11 +94,9 @@ class TokenSelectorRow extends React.Component<TokenSelectorRowProps> { <Container marginLeft="5px"> <Flex justify="flex-start"> <Container marginRight="10px"> - <Circle diameter={30} rawColor={token.metaData.primaryColor}> - <Flex height="100%"> - <Text fontColor={ColorOption.white} fontSize="8px"> - {displaySymbol} - </Text> + <Circle diameter={26} rawColor={circleColor}> + <Flex height="100%" width="100%"> + <TokenSelectorRowIcon token={token} /> </Flex> </Circle> </Container> @@ -117,3 +116,25 @@ class TokenSelectorRow extends React.Component<TokenSelectorRowProps> { this.props.onClick(this.props.token); }; } + +interface TokenSelectorRowIconProps { + token: ERC20Asset; +} + +const TokenSelectorRowIcon: React.StatelessComponent<TokenSelectorRowIconProps> = props => { + const { token } = props; + const iconUrlIfExists = token.metaData.iconUrl; + const TokenIcon = require(`../assets/icons/${token.metaData.symbol}.svg`); + const displaySymbol = assetUtils.bestNameForAsset(token); + if (!_.isUndefined(iconUrlIfExists)) { + return <img src={iconUrlIfExists} />; + } else if (!_.isUndefined(TokenIcon)) { + return <TokenIcon />; + } else { + return ( + <Text fontColor={ColorOption.white} fontSize="8px"> + {displaySymbol} + </Text> + ); + } +}; |