Merge branch 'development' of https://github.com/0xProject/0x-monorepo into feature/instant/push-to-history

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>
+        );
+    }
+};