aboutsummaryrefslogtreecommitdiffstats
path: root/packages/instant/src/components
diff options
context:
space:
mode:
Diffstat (limited to 'packages/instant/src/components')
-rw-r--r--packages/instant/src/components/erc20_token_selector.tsx31
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>
+ );
+ }
+};