feat: Move over features from zrx-buyer

4 files changed, 142 insertions, 36 deletions

diff --git a/packages/instant/src/containers/selected_asset_amount_input.ts b/packages/instant/src/containers/selected_asset_amount_input.ts
new file mode 100644
index 000000000..b731b889a
--- /dev/null
+++ b/packages/instant/src/containers/selected_asset_amount_input.ts
@@ -0,0 +1,57 @@
+import { BigNumber } from '@0xproject/utils';
+import { Web3Wrapper } from '@0xproject/web3-wrapper';
+import * as _ from 'lodash';
+import * as React from 'react';
+import { connect } from 'react-redux';
+import { Dispatch } from 'redux';
+
+import { zrxContractAddress, zrxDecimals } from '../constants';
+import { State } from '../redux/reducer';
+import { ColorOption } from '../style/theme';
+import { Action, ActionTypes, AsyncProcessState } from '../types';
+import { assetBuyer } from '../util/asset_buyer';
+
+import { AmountInput } 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: async value => {
+        // Update the input
+        dispatch({ type: ActionTypes.UPDATE_SELECTED_ASSET_AMOUNT, data: value });
+        // invalidate the last buy quote.
+        dispatch({ type: ActionTypes.UPDATE_LATEST_BUY_QUOTE, data: undefined });
+        // reset our buy state
+        dispatch({ type: ActionTypes.UPDATE_SELECTED_ASSET_BUY_STATE, data: AsyncProcessState.NONE });
+        if (!_.isUndefined(value)) {
+            // get a new buy quote.
+            const baseUnitValue = Web3Wrapper.toBaseUnitAmount(value, zrxDecimals);
+            const newBuyQuote = await assetBuyer.getBuyQuoteForERC20TokenAddressAsync(
+                zrxContractAddress,
+                baseUnitValue,
+            );
+            // invalidate the last buy quote.
+            dispatch({ type: ActionTypes.UPDATE_LATEST_BUY_QUOTE, data: newBuyQuote });
+        }
+    },
+});
+
+export const SelectedAssetAmountInput: React.ComponentClass<SelectedAssetAmountInputProps> = connect(
+    mapStateToProps,
+    mapDispatchToProps,
+)(AmountInput);
diff --git a/packages/instant/src/containers/selected_asset_amount_input.tsx b/packages/instant/src/containers/selected_asset_amount_input.tsx
deleted file mode 100644
index 800a4c568..000000000
--- a/packages/instant/src/containers/selected_asset_amount_input.tsx
+++ /dev/null
@@ -1,36 +0,0 @@
-import { BigNumber } from '@0xproject/utils';
-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 } 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,
-    mapDispatchToProps,
-)(AmountInput);
diff --git a/packages/instant/src/containers/selected_asset_buy_button.ts b/packages/instant/src/containers/selected_asset_buy_button.ts
new file mode 100644
index 000000000..f537294e4
--- /dev/null
+++ b/packages/instant/src/containers/selected_asset_buy_button.ts
@@ -0,0 +1,59 @@
+import { BuyQuote } from '@0xproject/asset-buyer';
+import * as _ from 'lodash';
+import * as React from 'react';
+import { connect } from 'react-redux';
+import { Dispatch } from 'redux';
+
+import { State } from '../redux/reducer';
+import { Action, ActionTypes, AsyncProcessState } from '../types';
+import { assetBuyer } from '../util/asset_buyer';
+import { web3Wrapper } from '../util/web3_wrapper';
+
+import { BuyButton } from '../components/buy_button';
+
+export interface SelectedAssetBuyButtonProps {}
+
+interface ConnectedState {
+    text: string;
+    buyQuote?: BuyQuote;
+}
+
+interface ConnectedDispatch {
+    onClick: (buyQuote: BuyQuote) => void;
+    onBuySuccess: (buyQuote: BuyQuote) => void;
+    onBuyFailure: (buyQuote: BuyQuote) => void;
+}
+
+const textForState = (state: AsyncProcessState): string => {
+    switch (state) {
+        case AsyncProcessState.NONE:
+            return 'Buy';
+        case AsyncProcessState.PENDING:
+            return '...Loading';
+        case AsyncProcessState.SUCCESS:
+            return 'Success!';
+        case AsyncProcessState.FAILURE:
+            return 'Failed';
+        default:
+            return 'Buy';
+    }
+};
+
+const mapStateToProps = (state: State, _ownProps: SelectedAssetBuyButtonProps): ConnectedState => ({
+    text: textForState(state.selectedAssetBuyState),
+    buyQuote: state.latestBuyQuote,
+});
+
+const mapDispatchToProps = (dispatch: Dispatch<Action>, ownProps: SelectedAssetBuyButtonProps): ConnectedDispatch => ({
+    onClick: buyQuote =>
+        dispatch({ type: ActionTypes.UPDATE_SELECTED_ASSET_BUY_STATE, data: AsyncProcessState.PENDING }),
+    onBuySuccess: buyQuote =>
+        dispatch({ type: ActionTypes.UPDATE_SELECTED_ASSET_BUY_STATE, data: AsyncProcessState.SUCCESS }),
+    onBuyFailure: buyQuote =>
+        dispatch({ type: ActionTypes.UPDATE_SELECTED_ASSET_BUY_STATE, data: AsyncProcessState.FAILURE }),
+});
+
+export const SelectedAssetBuyButton: React.ComponentClass<SelectedAssetBuyButtonProps> = connect(
+    mapStateToProps,
+    mapDispatchToProps,
+)(BuyButton);
diff --git a/packages/instant/src/containers/selected_asset_instant_heading.ts b/packages/instant/src/containers/selected_asset_instant_heading.ts
new file mode 100644
index 000000000..a9e853fe1
--- /dev/null
+++ b/packages/instant/src/containers/selected_asset_instant_heading.ts
@@ -0,0 +1,26 @@
+import { BigNumber } from '@0xproject/utils';
+import * as _ from 'lodash';
+import * as React from 'react';
+import { connect } from 'react-redux';
+
+import { State } from '../redux/reducer';
+
+import { InstantHeading } from '../components/instant_heading';
+
+export interface InstantHeadingProps {}
+
+interface ConnectedState {
+    selectedAssetAmount?: BigNumber;
+    totalEthBaseAmount?: BigNumber;
+    ethUsdPrice?: BigNumber;
+}
+
+const mapStateToProps = (state: State, _ownProps: InstantHeadingProps): ConnectedState => ({
+    selectedAssetAmount: state.selectedAssetAmount,
+    totalEthBaseAmount: _.get(state, 'latestBuyQuote.worstCaseQuoteInfo.totalEthAmount'),
+    ethUsdPrice: state.ethUsdPrice,
+});
+
+export const SelectedAssetInstantHeading: React.ComponentClass<InstantHeadingProps> = connect(mapStateToProps)(
+    InstantHeading,
+);