feat: add 'Select Token' UI to asset amount input

4 files changed, 61 insertions, 17 deletions

diff --git a/packages/instant/src/components/erc20_asset_amount_input.tsx b/packages/instant/src/components/erc20_asset_amount_input.tsx
index 5abb34c2f..4108fd0e8 100644
--- a/packages/instant/src/components/erc20_asset_amount_input.tsx
+++ b/packages/instant/src/components/erc20_asset_amount_input.tsx
@@ -8,13 +8,14 @@ import { BigNumberInput } from '../util/big_number_input';
 import { util } from '../util/util';
 
 import { ScalingAmountInput } from './scaling_amount_input';
-import { Container, Text } from './ui';
+import { Container, Flex, Icon, Text } from './ui';
 
 // Asset amounts only apply to ERC20 assets
 export interface ERC20AssetAmountInputProps {
     asset?: ERC20Asset;
     value?: BigNumberInput;
     onChange: (value?: BigNumberInput, asset?: ERC20Asset) => void;
+    onSymbolClick: (asset?: ERC20Asset) => void;
     startingFontSizePx: number;
     fontColor?: ColorOption;
     isDisabled: boolean;
@@ -27,6 +28,7 @@ export interface ERC20AssetAmountInputState {
 export class ERC20AssetAmountInput extends React.Component<ERC20AssetAmountInputProps, ERC20AssetAmountInputState> {
     public static defaultProps = {
         onChange: util.boundNoop,
+        onSymbolClick: util.boundNoop,
         isDisabled: false,
     };
     constructor(props: ERC20AssetAmountInputProps) {
@@ -36,10 +38,18 @@ export class ERC20AssetAmountInput extends React.Component<ERC20AssetAmountInput
         };
     }
     public render(): React.ReactNode {
-        const { asset, onChange, ...rest } = this.props;
-        const amountBorderBottom = this.props.isDisabled ? '' : `1px solid ${transparentWhite}`;
+        const { asset } = this.props;
         return (
             <Container whiteSpace="nowrap">
+                {!_.isUndefined(asset) ? this._renderContentForAsset(asset) : this._renderBackupContent()}
+            </Container>
+        );
+    }
+    private readonly _renderContentForAsset = (asset: ERC20Asset): React.ReactNode => {
+        const { onChange, ...rest } = this.props;
+        const amountBorderBottom = this.props.isDisabled ? '' : `1px solid ${transparentWhite}`;
+        return (
+            <React.Fragment>
                 <Container borderBottom={amountBorderBottom} display="inline-block">
                     <ScalingAmountInput
                         {...rest}
@@ -49,18 +59,50 @@ export class ERC20AssetAmountInput extends React.Component<ERC20AssetAmountInput
                         onFontSizeChange={this._handleFontSizeChange}
                     />
                 </Container>
-                <Container display="inline-flex" marginLeft="10px" title={assetUtils.bestNameForAsset(asset)}>
-                    <Text
-                        fontSize={`${this.state.currentFontSizePx}px`}
-                        fontColor={ColorOption.white}
-                        textTransform="uppercase"
-                    >
-                        {assetUtils.formattedSymbolForAsset(asset)}
-                    </Text>
+                <Container
+                    cursor="pointer"
+                    display="inline-block"
+                    marginLeft="8px"
+                    title={assetUtils.bestNameForAsset(asset, undefined)}
+                >
+                    <Flex inline={true}>
+                        <Text
+                            fontSize={`${this.state.currentFontSizePx}px`}
+                            fontColor={ColorOption.white}
+                            textTransform="uppercase"
+                            onClick={this._handleSymbolClick}
+                        >
+                            {assetUtils.formattedSymbolForAsset(asset)}
+                        </Text>
+                        {this._renderChevronIcon()}
+                    </Flex>
                 </Container>
+            </React.Fragment>
+        );
+    };
+    private readonly _renderBackupContent = (): React.ReactNode => {
+        return (
+            <Flex>
+                <Text
+                    fontSize="30px"
+                    fontColor={ColorOption.white}
+                    opacity={0.7}
+                    fontWeight="500"
+                    onClick={this._handleSymbolClick}
+                >
+                    Select Token
+                </Text>
+                {this._renderChevronIcon()}
+            </Flex>
+        );
+    };
+    private readonly _renderChevronIcon = (): React.ReactNode => {
+        return (
+            <Container marginLeft="5px" onClick={this._handleSymbolClick}>
+                <Icon icon="chevron" width={12} />
             </Container>
         );
-    }
+    };
     private readonly _handleChange = (value?: BigNumberInput): void => {
         this.props.onChange(value, this.props.asset);
     };
@@ -69,6 +111,9 @@ export class ERC20AssetAmountInput extends React.Component<ERC20AssetAmountInput
             currentFontSizePx: fontSizePx,
         });
     };
+    private readonly _handleSymbolClick = () => {
+        this.props.onSymbolClick(this.props.asset);
+    };
     // For assets with symbols of different length,
     // start scaling the input at different character lengths
     private readonly _textLengthThresholdForAsset = (asset?: ERC20Asset): number => {
diff --git a/packages/instant/src/components/instant_heading.tsx b/packages/instant/src/components/instant_heading.tsx
index 00c45ba3a..0b41d44d7 100644
--- a/packages/instant/src/components/instant_heading.tsx
+++ b/packages/instant/src/components/instant_heading.tsx
@@ -48,9 +48,6 @@ export class InstantHeading extends React.Component<InstantHeadingProps, {}> {
                 <Flex direction="row" justify="space-between">
                     <Flex height="60px">
                         <SelectedERC20AssetAmountInput startingFontSizePx={38} />
-                        <Container marginLeft="5px">
-                            <Icon icon="chevron" width={12} />
-                        </Container>
                     </Flex>
                     <Flex direction="column" justify="space-between">
                         {iconOrAmounts}
diff --git a/packages/instant/src/components/ui/container.tsx b/packages/instant/src/components/ui/container.tsx
index 76b570de7..b6842b294 100644
--- a/packages/instant/src/components/ui/container.tsx
+++ b/packages/instant/src/components/ui/container.tsx
@@ -28,6 +28,7 @@ export interface ContainerProps {
     zIndex?: number;
     whiteSpace?: string;
     opacity?: number;
+    cursor?: string;
 }
 
 export const Container =
@@ -57,6 +58,7 @@ export const Container =
     ${props => cssRuleIfExists(props, 'z-index')}
     ${props => cssRuleIfExists(props, 'white-space')}
     ${props => cssRuleIfExists(props, 'opacity')}
+    ${props => cssRuleIfExists(props, 'cursor')}
     ${props => (props.hasBoxShadow ? `box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.1)` : '')};
     background-color: ${props => (props.backgroundColor ? props.theme[props.backgroundColor] : 'none')};
     border-color: ${props => (props.borderColor ? props.theme[props.borderColor] : 'none')};
diff --git a/packages/instant/src/components/ui/flex.tsx b/packages/instant/src/components/ui/flex.tsx
index 5fa3fc95b..29c6511bb 100644
--- a/packages/instant/src/components/ui/flex.tsx
+++ b/packages/instant/src/components/ui/flex.tsx
@@ -9,14 +9,14 @@ export interface FlexProps {
     width?: string;
     height?: string;
     backgroundColor?: ColorOption;
-    className?: string;
+    inline?: boolean;
 }
 
 export const Flex =
     styled.div <
     FlexProps >
     `
-    display: flex;
+    display: ${props => (props.inline ? 'inline-flex' : 'flex')};
     flex-direction: ${props => props.direction};
     flex-wrap: ${props => props.flexWrap};
     justify-content: ${props => props.justify};