feat: model asset meta data and add dynamic assetData state

3 files changed, 57 insertions, 12 deletions

diff --git a/packages/instant/src/components/amount_input.tsx b/packages/instant/src/components/amount_input.tsx
index a2113f143..5b81a3d68 100644
--- a/packages/instant/src/components/amount_input.tsx
+++ b/packages/instant/src/components/amount_input.tsx
@@ -10,10 +10,13 @@ export interface AmountInputProps {
     fontColor?: ColorOption;
     fontSize?: string;
     value?: BigNumber;
-    onChange?: (value?: BigNumber) => void;
+    onChange: (value?: BigNumber) => void;
 }
 
 export class AmountInput extends React.Component<AmountInputProps> {
+    public static defaultProps = {
+        onChange: _.noop.bind(_),
+    };
     public render(): React.ReactNode {
         const { fontColor, fontSize, value } = this.props;
         return (
@@ -40,8 +43,6 @@ export class AmountInput extends React.Component<AmountInputProps> {
                 return;
             }
         }
-        if (!_.isUndefined(this.props.onChange)) {
-            this.props.onChange(bigNumberValue);
-        }
+        this.props.onChange(bigNumberValue);
     };
 }
diff --git a/packages/instant/src/components/asset_amount_input.tsx b/packages/instant/src/components/asset_amount_input.tsx
new file mode 100644
index 000000000..915c66e1e
--- /dev/null
+++ b/packages/instant/src/components/asset_amount_input.tsx
@@ -0,0 +1,51 @@
+import { AssetProxyId } from '@0xproject/types';
+import { BigNumber } from '@0xproject/utils';
+import * as _ from 'lodash';
+import * as React from 'react';
+
+import { assetMetaData } from '../data/asset_meta_data';
+import { ColorOption } from '../style/theme';
+
+import { AmountInput, AmountInputProps } from './amount_input';
+import { Container, Text } from './ui';
+
+export interface AssetAmountInputProps extends AmountInputProps {
+    assetData?: string;
+    onChange: (value?: BigNumber, assetData?: string) => void;
+}
+
+export class AssetAmountInput extends React.Component<AssetAmountInputProps> {
+    public static defaultProps = {
+        onChange: _.noop.bind(_),
+    };
+    public render(): React.ReactNode {
+        const { assetData, onChange, ...rest } = this.props;
+        return (
+            <Container>
+                <AmountInput {...rest} onChange={this._handleChange} />
+                <Container display="inline-block" marginLeft="10px">
+                    <Text fontSize={rest.fontSize} fontColor={ColorOption.white} textTransform="uppercase">
+                        {this._getLabel()}
+                    </Text>
+                </Container>
+            </Container>
+        );
+    }
+    private readonly _getLabel = (): string => {
+        const unknownLabel = '???';
+        if (_.isUndefined(this.props.assetData)) {
+            return unknownLabel;
+        }
+        const metaData = assetMetaData[this.props.assetData];
+        if (_.isUndefined(metaData)) {
+            return unknownLabel;
+        }
+        if (metaData.assetProxyId === AssetProxyId.ERC20) {
+            return metaData.symbol;
+        }
+        return unknownLabel;
+    };
+    private readonly _handleChange = (value?: BigNumber): void => {
+        this.props.onChange(value, this.props.assetData);
+    };
+}
diff --git a/packages/instant/src/components/instant_heading.tsx b/packages/instant/src/components/instant_heading.tsx
index 377bb20bf..492c1b2c0 100644
--- a/packages/instant/src/components/instant_heading.tsx
+++ b/packages/instant/src/components/instant_heading.tsx
@@ -43,14 +43,7 @@ export const InstantHeading: React.StatelessComponent<InstantHeadingProps> = pro
             </Text>
         </Container>
         <Flex direction="row" justify="space-between">
-            <Container>
-                <SelectedAssetAmountInput fontSize="45px" />
-                <Container display="inline-block" marginLeft="10px">
-                    <Text fontSize="45px" fontColor={ColorOption.white} textTransform="uppercase">
-                        zrx
-                    </Text>
-                </Container>
-            </Container>
+            <SelectedAssetAmountInput fontSize="45px" />
             <Flex direction="column" justify="space-between">
                 <Container marginBottom="5px">
                     <Text fontSize="16px" fontColor={ColorOption.white} fontWeight={500}>