fix(instant): prevent outdated quote requests from overriding the correct quote

2 files changed, 37 insertions, 9 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 ee76e9d66..828c4fcb5 100644
--- a/packages/instant/src/containers/selected_erc20_asset_amount_input.ts
+++ b/packages/instant/src/containers/selected_erc20_asset_amount_input.ts
@@ -79,8 +79,6 @@ const updateBuyQuoteAsync = async (
     dispatch(actions.updateLatestBuyQuote(newBuyQuote));
 };
 
-const debouncedUpdateBuyQuoteAsync = _.debounce(updateBuyQuoteAsync, 200, { trailing: true });
-
 const mapDispatchToProps = (
     dispatch: Dispatch<Action>,
     _ownProps: SelectedERC20AssetAmountInputProps,
@@ -97,7 +95,7 @@ const mapDispatchToProps = (
             // 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);
+            updateBuyQuoteAsync(assetBuyer, dispatch, asset, value);
         }
     },
 });
diff --git a/packages/instant/src/redux/reducer.ts b/packages/instant/src/redux/reducer.ts
index d7e5bdfb5..4f572532a 100644
--- a/packages/instant/src/redux/reducer.ts
+++ b/packages/instant/src/redux/reducer.ts
@@ -1,6 +1,7 @@
 import { AssetBuyer, BuyQuote } from '@0x/asset-buyer';
-import { ObjectMap } from '@0x/types';
+import { AssetProxyId, ObjectMap } from '@0x/types';
 import { BigNumber } from '@0x/utils';
+import { Web3Wrapper } from '@0x/web3-wrapper';
 import * as _ from 'lodash';
 
 import { assetMetaDataMap } from '../data/asset_meta_data_map';
@@ -57,11 +58,19 @@ export const reducer = (state: State = INITIAL_STATE, action: Action): State =>
                 selectedAssetAmount: action.data,
             };
         case ActionTypes.UPDATE_LATEST_BUY_QUOTE:
-            return {
-                ...state,
-                latestBuyQuote: action.data,
-                quoteRequestState: AsyncProcessState.SUCCESS,
-            };
+            const newBuyQuoteIfExists = action.data;
+            const shouldUpdate =
+                _.isUndefined(newBuyQuoteIfExists) || doesBuyQuoteMatchState(newBuyQuoteIfExists, state);
+            if (shouldUpdate) {
+                return {
+                    ...state,
+                    latestBuyQuote: newBuyQuoteIfExists,
+                    quoteRequestState: AsyncProcessState.SUCCESS,
+                };
+            } else {
+                return state;
+            }
+
         case ActionTypes.SET_QUOTE_REQUEST_STATE_PENDING:
             return {
                 ...state,
@@ -122,3 +131,24 @@ export const reducer = (state: State = INITIAL_STATE, action: Action): State =>
             return state;
     }
 };
+
+const doesBuyQuoteMatchState = (buyQuote: BuyQuote, state: State): boolean => {
+    const selectedAssetIfExists = state.selectedAsset;
+    const selectedAssetAmountIfExists = state.selectedAssetAmount;
+    // if no selectedAsset or selectedAssetAmount exists on the current state, return false
+    if (_.isUndefined(selectedAssetIfExists) || _.isUndefined(selectedAssetAmountIfExists)) {
+        return false;
+    }
+    // if buyQuote's assetData does not match that of the current selected asset, return false
+    if (selectedAssetIfExists.assetData !== buyQuote.assetData) {
+        return false;
+    }
+    // if buyQuote's assetBuyAmount does not match selectedAssetAmount, return false
+    const selectedAssetMetaData = selectedAssetIfExists.metaData;
+    const selectedAssetAmountBaseUnits =
+        selectedAssetMetaData.assetProxyId === AssetProxyId.ERC20
+            ? Web3Wrapper.toBaseUnitAmount(selectedAssetAmountIfExists, selectedAssetMetaData.decimals)
+            : new BigNumber(1);
+    const doesAssetAmountMatch = selectedAssetAmountBaseUnits.eq(buyQuote.assetBuyAmount);
+    return doesAssetAmountMatch;
+};