feat: implement basic token selection UI

1 files changed, 33 insertions, 4 deletions

diff --git a/packages/instant/src/components/erc20_token_selector.tsx b/packages/instant/src/components/erc20_token_selector.tsx
index 12051b382..a8bef3d61 100644
--- a/packages/instant/src/components/erc20_token_selector.tsx
+++ b/packages/instant/src/components/erc20_token_selector.tsx
@@ -1,9 +1,11 @@
 import * as _ from 'lodash';
 import * as React from 'react';
 
+import { ColorOption } from '../style/theme';
 import { ERC20Asset } from '../types';
+import { assetUtils } from '../util/asset';
 
-import { Button, Container } from './ui';
+import { Circle, Container, Flex, Text } from './ui';
 
 export interface ERC20TokenSelectorProps {
     tokens: ERC20Asset[];
@@ -12,7 +14,9 @@ export interface ERC20TokenSelectorProps {
 
 export const ERC20TokenSelector: React.StatelessComponent<ERC20TokenSelectorProps> = ({ tokens, onTokenSelect }) => (
     <Container>
-        {_.map(tokens, token => <TokenSelectorRow key={token.assetData} token={token} onClick={onTokenSelect} />)}
+        <Container overflow="scroll" height="325px">
+            {_.map(tokens, token => <TokenSelectorRow key={token.assetData} token={token} onClick={onTokenSelect} />)}
+        </Container>
     </Container>
 );
 
@@ -24,9 +28,34 @@ interface TokenSelectorRowProps {
 class TokenSelectorRow extends React.Component<TokenSelectorRowProps> {
     public render(): React.ReactNode {
         const { token } = this.props;
+        const displaySymbol = assetUtils.bestNameForAsset(token);
         return (
-            <Container>
-                <Button onClick={this._handleClick}>Select {token.metaData.symbol}</Button>
+            <Container
+                padding="12px 0px"
+                borderBottom="1px solid"
+                borderColor={ColorOption.feintGrey}
+                backgroundColor={ColorOption.white}
+                width="100%"
+                onClick={this._handleClick}
+                darkenOnHover={true}
+                cursor="pointer"
+            >
+                <Container marginLeft="10px">
+                    <Flex justify="flex-start">
+                        <Container marginRight="10px">
+                            <Circle diameter={30} fillColor={token.metaData.primaryColor}>
+                                <Flex height="100%">
+                                    <Text fontColor={ColorOption.white} fontSize="8px">
+                                        {displaySymbol}
+                                    </Text>
+                                </Flex>
+                            </Circle>
+                        </Container>
+                        <Text fontWeight={700} fontColor={ColorOption.black}>
+                            {displaySymbol}
+                        </Text>
+                    </Flex>
+                </Container>
             </Container>
         );
     }