diff options
| -rw-r--r-- | packages/instant/src/components/erc20_token_selector.tsx | 34 | ||||
| -rw-r--r-- | packages/instant/src/types.ts | 1 |
2 files changed, 26 insertions, 9 deletions
diff --git a/packages/instant/src/components/erc20_token_selector.tsx b/packages/instant/src/components/erc20_token_selector.tsx index 62dd52a4c..1b1921acb 100644 --- a/packages/instant/src/components/erc20_token_selector.tsx +++ b/packages/instant/src/components/erc20_token_selector.tsx @@ -78,8 +78,8 @@ 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); - const TokenIcon = require(`../assets/icons/${token.metaData.symbol}.svg`); return ( <Container padding="12px 0px" @@ -94,15 +94,9 @@ class TokenSelectorRow extends React.Component<TokenSelectorRowProps> { <Container marginLeft="5px"> <Flex justify="flex-start"> <Container marginRight="10px"> - <Circle diameter={26} rawColor={token.metaData.primaryColor}> + <Circle diameter={26} rawColor={circleColor}> <Flex height="100%" width="100%"> - {!_.isUndefined(TokenIcon) ? ( - <TokenIcon /> - ) : ( - <Text fontColor={ColorOption.white} fontSize="8px"> - {displaySymbol} - </Text> - )} + <TokenSelectorRowIcon token={token} /> </Flex> </Circle> </Container> @@ -122,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> + ); + } +}; diff --git a/packages/instant/src/types.ts b/packages/instant/src/types.ts index 67f21a396..2d4a8a850 100644 --- a/packages/instant/src/types.ts +++ b/packages/instant/src/types.ts @@ -51,6 +51,7 @@ export interface ERC20AssetMetaData { primaryColor?: string; symbol: string; name: string; + iconUrl?: string; } export interface ERC721AssetMetaData { |