diff options
| author | Brandon Millman <brandon.millman@gmail.com> | 2018-11-15 08:01:16 +0800 |
|---|---|---|
| committer | Brandon Millman <brandon.millman@gmail.com> | 2018-11-16 10:54:17 +0800 |
| commit | 004e197863e4df942d21f9e4ed629c08eeadad56 (patch) | |
| tree | 9ff45041f655ce5eed764e6b77d944284b1f33e3 /packages/instant/src/components | |
| parent | ae1fb97794f0bc3609deaf9872f53768c3059880 (diff) | |
| download | dexon-sol-tools-004e197863e4df942d21f9e4ed629c08eeadad56.tar.gz dexon-sol-tools-004e197863e4df942d21f9e4ed629c08eeadad56.tar.zst dexon-sol-tools-004e197863e4df942d21f9e4ed629c08eeadad56.zip | |
feat(instant): add icons to token selector
Diffstat (limited to 'packages/instant/src/components')
| -rw-r--r-- | packages/instant/src/components/erc20_token_selector.tsx | 15 |
1 files changed, 10 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..62dd52a4c 100644 --- a/packages/instant/src/components/erc20_token_selector.tsx +++ b/packages/instant/src/components/erc20_token_selector.tsx @@ -79,6 +79,7 @@ class TokenSelectorRow extends React.Component<TokenSelectorRowProps> { public render(): React.ReactNode { const { token } = this.props; const displaySymbol = assetUtils.bestNameForAsset(token); + const TokenIcon = require(`../assets/icons/${token.metaData.symbol}.svg`); return ( <Container padding="12px 0px" @@ -93,11 +94,15 @@ 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={token.metaData.primaryColor}> + <Flex height="100%" width="100%"> + {!_.isUndefined(TokenIcon) ? ( + <TokenIcon /> + ) : ( + <Text fontColor={ColorOption.white} fontSize="8px"> + {displaySymbol} + </Text> + )} </Flex> </Circle> </Container> |