Create SelectedAssetInputAmount

6 files changed, 72 insertions, 15 deletions

diff --git a/packages/instant/package.json b/packages/instant/package.json
index 557a7f00f..949854197 100644
--- a/packages/instant/package.json
+++ b/packages/instant/package.json
@@ -45,6 +45,7 @@
     "dependencies": {
         "@0xproject/types": "^1.1.1",
         "@0xproject/typescript-typings": "^2.0.2",
+        "@0xproject/utils": "^2.0.2",
         "@0xproject/web3-wrapper": "^3.0.1",
         "ethereum-types": "^1.0.8",
         "lodash": "^4.17.10",
diff --git a/packages/instant/src/components/amount_input.tsx b/packages/instant/src/components/amount_input.tsx
index 699541bfb..8fead78ca 100644
--- a/packages/instant/src/components/amount_input.tsx
+++ b/packages/instant/src/components/amount_input.tsx
@@ -1,4 +1,5 @@
 import { BigNumber } from '@0xproject/utils';
+import * as _ from 'lodash';
 import * as React from 'react';
 
 import { ColorOption } from '../style/theme';
@@ -12,16 +13,26 @@ export interface AmountInputProps {
     onChange?: (value: BigNumber) => void;
 }
 
-export const AmountInput: React.StatelessComponent<AmountInputProps> = props => (
-    <Container borderBottom="1px solid rgba(255,255,255,0.3)" display="inline-block">
-        <Input
-            fontColor={props.fontColor}
-            fontSize={props.fontSize}
-            value={props.value ? props.value.toString() : undefined}
-            placeholder="0.00"
-            width="2em"
-        />
-    </Container>
-);
-
-AmountInput.defaultProps = {};
+export class AmountInput extends React.Component<AmountInputProps> {
+    public render(): React.ReactNode {
+        const { fontColor, fontSize, value } = this.props;
+        return (
+            <Container borderBottom="1px solid rgba(255,255,255,0.3)" display="inline-block">
+                <Input
+                    fontColor={fontColor}
+                    fontSize={fontSize}
+                    onChange={this._handleChange}
+                    value={value ? value.toString() : undefined}
+                    placeholder="0.00"
+                    width="2em"
+                />
+            </Container>
+        );
+    }
+    private _handleChange = (event: React.ChangeEvent<HTMLInputElement>): void => {
+        const bigNumberValue = new BigNumber(event.target.value);
+        if (!_.isUndefined(this.props.onChange)) {
+            this.props.onChange(bigNumberValue);
+        }
+    };
+}
diff --git a/packages/instant/src/components/instant_heading.tsx b/packages/instant/src/components/instant_heading.tsx
index 3da280652..2b07ef666 100644
--- a/packages/instant/src/components/instant_heading.tsx
+++ b/packages/instant/src/components/instant_heading.tsx
@@ -1,9 +1,9 @@
 import { BigNumber } from '@0xproject/utils';
 import * as React from 'react';
 
+import { SelectedAssetAmountInput } from '../containers/selected_asset_amount_input';
 import { ColorOption } from '../style/theme';
 
-import { AmountInput } from './amount_input';
 import { Container, Flex, Text } from './ui';
 
 export interface InstantHeadingProps {}
@@ -24,7 +24,7 @@ export const InstantHeading: React.StatelessComponent<InstantHeadingProps> = pro
         </Container>
         <Flex direction="row" justify="space-between">
             <Container>
-                <AmountInput fontSize="45px" />
+                <SelectedAssetAmountInput fontSize="45px" />
                 <Container display="inline-block" marginLeft="10px">
                     <Text fontSize="45px" fontColor={ColorOption.white} textTransform="uppercase">
                         rep
diff --git a/packages/instant/src/containers/selected_asset_amount_input.tsx b/packages/instant/src/containers/selected_asset_amount_input.tsx
new file mode 100644
index 000000000..f5e1e134a
--- /dev/null
+++ b/packages/instant/src/containers/selected_asset_amount_input.tsx
@@ -0,0 +1,36 @@
+import { BigNumber } from '@0xproject/utils';
+import { Web3Wrapper } from '@0xproject/web3-wrapper';
+import * as React from 'react';
+import { connect } from 'react-redux';
+import { Dispatch } from 'redux';
+
+import { State } from '../redux/reducer';
+import { ColorOption } from '../style/theme';
+import { Action, ActionTypes } from '../types';
+
+import { AmountInput, AmountInputProps } from '../components/amount_input';
+
+export interface SelectedAssetAmountInputProps {
+    fontColor?: ColorOption;
+    fontSize?: string;
+}
+
+interface ConnectedState {
+    value?: BigNumber;
+}
+
+interface ConnectedDispatch {
+    onChange?: (value: BigNumber) => void;
+}
+
+const mapStateToProps = (state: State, _ownProps: SelectedAssetAmountInputProps): ConnectedState => ({
+    value: state.selectedAssetAmount,
+});
+
+const mapDispatchToProps = (dispatch: Dispatch<Action>): ConnectedDispatch => ({
+    onChange: value => dispatch({ type: ActionTypes.UPDATE_SELECTED_ASSET_AMOUNT, data: value }),
+});
+
+export const SelectedAssetAmountInput: React.ComponentClass<SelectedAssetAmountInputProps> = connect(mapStateToProps)(
+    AmountInput,
+);
diff --git a/packages/instant/src/redux/reducer.ts b/packages/instant/src/redux/reducer.ts
index e4578d620..5026895ae 100644
--- a/packages/instant/src/redux/reducer.ts
+++ b/packages/instant/src/redux/reducer.ts
@@ -1,13 +1,16 @@
+import { BigNumber } from '@0xproject/utils';
 import * as _ from 'lodash';
 
 import { Action, ActionTypes } from '../types';
 
 export interface State {
     ethUsdPrice?: string;
+    selectedAssetAmount?: BigNumber;
 }
 
 export const INITIAL_STATE: State = {
     ethUsdPrice: undefined,
+    selectedAssetAmount: undefined,
 };
 
 export const reducer = (state: State = INITIAL_STATE, action: Action): State => {
@@ -17,6 +20,11 @@ export const reducer = (state: State = INITIAL_STATE, action: Action): State =>
                 ...state,
                 ethUsdPrice: action.data,
             };
+        case ActionTypes.UPDATE_SELECTED_ASSET_AMOUNT:
+            return {
+                ...state,
+                selectedAssetAmount: action.data,
+            };
         default:
             return state;
     }
diff --git a/packages/instant/src/types.ts b/packages/instant/src/types.ts
index 3ba5a9b94..d150bd8ab 100644
--- a/packages/instant/src/types.ts
+++ b/packages/instant/src/types.ts
@@ -1,5 +1,6 @@
 export enum ActionTypes {
     UPDATE_ETH_USD_PRICE,
+    UPDATE_SELECTED_ASSET_AMOUNT,
 }
 
 export interface Action {