diff --git a/packages/instant/src/components/erc20_token_selector.tsx b/packages/instant/src/components/erc20_token_selector.tsx index 62dd52a4cd..1b1921acba 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 { 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 ( { - + - {!_.isUndefined(TokenIcon) ? ( - - ) : ( - - {displaySymbol} - - )} + @@ -122,3 +116,25 @@ class TokenSelectorRow extends React.Component { this.props.onClick(this.props.token); }; } + +interface TokenSelectorRowIconProps { + token: ERC20Asset; +} + +const TokenSelectorRowIcon: React.StatelessComponent = 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 ; + } else if (!_.isUndefined(TokenIcon)) { + return ; + } else { + return ( + + {displaySymbol} + + ); + } +}; diff --git a/packages/instant/src/types.ts b/packages/instant/src/types.ts index 67f21a3960..2d4a8a8509 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 {