1 files changed, 12 insertions, 57 deletions

diff --git a/packages/instant/src/containers/selected_erc20_asset_amount_input.ts b/packages/instant/src/containers/selected_erc20_asset_amount_input.ts
index f7d56c564..93ff3db70 100644
--- a/packages/instant/src/containers/selected_erc20_asset_amount_input.ts
+++ b/packages/instant/src/containers/selected_erc20_asset_amount_input.ts
@@ -1,20 +1,17 @@
-import { AssetBuyer, AssetBuyerError, BuyQuote } from '@0x/asset-buyer';
+import { AssetBuyer } from '@0x/asset-buyer';
 import { AssetProxyId } from '@0x/types';
 import { BigNumber } from '@0x/utils';
-import { Web3Wrapper } from '@0x/web3-wrapper';
 import * as _ from 'lodash';
 import * as React from 'react';
 import { connect } from 'react-redux';
 import { Dispatch } from 'redux';
-import { oc } from 'ts-optchain';
 
 import { ERC20AssetAmountInput } from '../components/erc20_asset_amount_input';
 import { Action, actions } from '../redux/actions';
 import { State } from '../redux/reducer';
 import { ColorOption } from '../style/theme';
 import { AffiliateInfo, ERC20Asset, OrderProcessState } from '../types';
-import { assetUtils } from '../util/asset';
-import { errorFlasher } from '../util/error_flasher';
+import { buyQuoteUpdater } from '../util/buy_quote_updater';
 
 export interface SelectedERC20AssetAmountInputProps {
     fontColor?: ColorOption;
@@ -23,7 +20,7 @@ export interface SelectedERC20AssetAmountInputProps {
 }
 
 interface ConnectedState {
-    assetBuyer?: AssetBuyer;
+    assetBuyer: AssetBuyer;
     value?: BigNumber;
     asset?: ERC20Asset;
     isDisabled: boolean;
@@ -33,7 +30,7 @@ interface ConnectedState {
 
 interface ConnectedDispatch {
     updateBuyQuote: (
-        assetBuyer?: AssetBuyer,
+        assetBuyer: AssetBuyer,
         value?: BigNumber,
         asset?: ERC20Asset,
         affiliateInfo?: AffiliateInfo,
@@ -52,15 +49,16 @@ type FinalProps = ConnectedProps & SelectedERC20AssetAmountInputProps;
 
 const mapStateToProps = (state: State, _ownProps: SelectedERC20AssetAmountInputProps): ConnectedState => {
     const processState = state.buyOrderState.processState;
-    const isEnabled = processState === OrderProcessState.NONE || processState === OrderProcessState.FAILURE;
+    const isEnabled = processState === OrderProcessState.None || processState === OrderProcessState.Failure;
     const isDisabled = !isEnabled;
     const selectedAsset =
         !_.isUndefined(state.selectedAsset) && state.selectedAsset.metaData.assetProxyId === AssetProxyId.ERC20
             ? (state.selectedAsset as ERC20Asset)
             : undefined;
     const numberOfAssetsAvailable = _.isUndefined(state.availableAssets) ? undefined : state.availableAssets.length;
+    const assetBuyer = state.providerState.assetBuyer;
     return {
-        assetBuyer: state.assetBuyer,
+        assetBuyer,
         value: state.selectedAssetAmount,
         asset: selectedAsset,
         isDisabled,
@@ -69,52 +67,9 @@ const mapStateToProps = (state: State, _ownProps: SelectedERC20AssetAmountInputP
     };
 };
 
-const updateBuyQuoteAsync = async (
-    assetBuyer: AssetBuyer,
-    dispatch: Dispatch<Action>,
-    asset: ERC20Asset,
-    assetAmount: BigNumber,
-    affiliateInfo?: AffiliateInfo,
-): Promise<void> => {
-    // get a new buy quote.
-    const baseUnitValue = Web3Wrapper.toBaseUnitAmount(assetAmount, asset.metaData.decimals);
-
-    // mark quote as pending
-    dispatch(actions.setQuoteRequestStatePending());
-
-    const feePercentage = oc(affiliateInfo).feePercentage();
-    let newBuyQuote: BuyQuote | undefined;
-    try {
-        newBuyQuote = await assetBuyer.getBuyQuoteAsync(asset.assetData, baseUnitValue, { feePercentage });
-    } catch (error) {
-        dispatch(actions.setQuoteRequestStateFailure());
-        let errorMessage;
-        if (error.message === AssetBuyerError.InsufficientAssetLiquidity) {
-            const assetName = assetUtils.bestNameForAsset(asset, 'of this asset');
-            errorMessage = `Not enough ${assetName} available`;
-        } else if (error.message === AssetBuyerError.InsufficientZrxLiquidity) {
-            errorMessage = 'Not enough ZRX available';
-        } else if (
-            error.message === AssetBuyerError.StandardRelayerApiError ||
-            error.message.startsWith(AssetBuyerError.AssetUnavailable)
-        ) {
-            const assetName = assetUtils.bestNameForAsset(asset, 'This asset');
-            errorMessage = `${assetName} is currently unavailable`;
-        }
-        if (!_.isUndefined(errorMessage)) {
-            errorFlasher.flashNewErrorMessage(dispatch, errorMessage);
-        } else {
-            throw error;
-        }
-        return;
-    }
-    // We have a successful new buy quote
-    errorFlasher.clearError(dispatch);
-    // invalidate the last buy quote.
-    dispatch(actions.updateLatestBuyQuote(newBuyQuote));
-};
-
-const debouncedUpdateBuyQuoteAsync = _.debounce(updateBuyQuoteAsync, 200, { trailing: true });
+const debouncedUpdateBuyQuoteAsync = _.debounce(buyQuoteUpdater.updateBuyQuoteAsync.bind(buyQuoteUpdater), 200, {
+    trailing: true,
+}) as typeof buyQuoteUpdater.updateBuyQuoteAsync;
 
 const mapDispatchToProps = (
     dispatch: Dispatch<Action>,
@@ -128,11 +83,11 @@ const mapDispatchToProps = (
         // reset our buy state
         dispatch(actions.setBuyOrderStateNone());
 
-        if (!_.isUndefined(value) && value.greaterThan(0) && !_.isUndefined(asset) && !_.isUndefined(assetBuyer)) {
+        if (!_.isUndefined(value) && value.greaterThan(0) && !_.isUndefined(asset)) {
             // even if it's debounced, give them the illusion it's loading
             dispatch(actions.setQuoteRequestStatePending());
             // tslint:disable-next-line:no-floating-promises
-            debouncedUpdateBuyQuoteAsync(assetBuyer, dispatch, asset, value, affiliateInfo);
+            debouncedUpdateBuyQuoteAsync(assetBuyer, dispatch, asset, value, true, affiliateInfo);
         }
     },
 });