wip: abstract out updating buy quote

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 { updateBuyQuoteOrFlashErrorAsync } from '../util/buy_quote_fetcher';
-import { errorFlasher } from '../util/error_flasher';
 
 export interface SelectedERC20AssetAmountInputProps {
     fontColor?: ColorOption;
@@ -77,42 +74,10 @@ const updateBuyQuoteAsync = async (
     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());
-
+    // kick of buy quote
-    const feePercentage = oc(affiliateInfo).feePercentage();
+    updateBuyQuoteOrFlashErrorAsync(assetBuyer, asset, assetAmount, dispatch, affiliateInfo);
-    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 });

packages/instant/src/util/buy_quote_fetcher.ts

@@ -0,0 +1,55 @@
+// TODO: rename file and export object
+import { AssetBuyer, AssetBuyerError, BuyQuote } from '@0x/asset-buyer';
+import { BigNumber } from '@0x/utils';
+import { Web3Wrapper } from '@0x/web3-wrapper';
+import * as _ from 'lodash';
+import { Dispatch } from 'redux';
+import { oc } from 'ts-optchain';
+
+import { Action, actions } from '../redux/actions';
+import { AffiliateInfo, ERC20Asset } from '../types';
+import { assetUtils } from '../util/asset';
+
+import { errorFlasher } from './error_flasher';
+
+export const updateBuyQuoteOrFlashErrorAsync = async (
+    assetBuyer: AssetBuyer,
+    asset: ERC20Asset,
+    assetAmount: BigNumber,
+    dispatch: Dispatch<Action>,
+    affiliateInfo?: AffiliateInfo,
+) => {
+    // get a new buy quote.
+    const baseUnitValue = Web3Wrapper.toBaseUnitAmount(assetAmount, asset.metaData.decimals);
+
+    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));
+};