feat(instant): Handle AssetBuyer errors

2 files changed, 48 insertions, 1 deletions

diff --git a/packages/instant/src/containers/latest_error.tsx b/packages/instant/src/containers/latest_error.tsx
new file mode 100644
index 000000000..5272d9610
--- /dev/null
+++ b/packages/instant/src/containers/latest_error.tsx
@@ -0,0 +1,36 @@
+import * as React from 'react';
+
+import { connect } from 'react-redux';
+
+import { SlidingError } from '../components/sliding_error';
+import { State } from '../redux/reducer';
+import { errorDescription } from '../util/error_description';
+
+export interface LatestErrorComponentProps {
+    assetData?: string;
+    latestError?: any;
+    latestErrorDismissed?: boolean;
+}
+
+export const LatestErrorComponent: React.StatelessComponent<LatestErrorComponentProps> = props => {
+    if (!props.latestError) {
+        return <div />;
+    }
+    const slidingDirection = props.latestErrorDismissed ? 'down' : 'up';
+    const { icon, message } = errorDescription(props.latestError, props.assetData);
+    return <SlidingError direction={slidingDirection} icon={icon} message={message} />;
+};
+
+interface ConnectedState {
+    assetData?: string;
+    latestError?: any;
+    latestErrorDismissed?: boolean;
+}
+export interface LatestErrorProps {}
+const mapStateToProps = (state: State, _ownProps: LatestErrorProps): ConnectedState => ({
+    assetData: state.selectedAssetData,
+    latestError: state.latestError,
+    latestErrorDismissed: state.latestErrorDismissed,
+});
+
+export const LatestError = connect(mapStateToProps)(LatestErrorComponent);
diff --git a/packages/instant/src/containers/selected_asset_amount_input.ts b/packages/instant/src/containers/selected_asset_amount_input.ts
index f2ca96ae4..00c0a1114 100644
--- a/packages/instant/src/containers/selected_asset_amount_input.ts
+++ b/packages/instant/src/containers/selected_asset_amount_input.ts
@@ -1,3 +1,4 @@
+import { BuyQuote } from '@0xproject/asset-buyer';
 import { BigNumber } from '@0xproject/utils';
 import { Web3Wrapper } from '@0xproject/web3-wrapper';
 import * as _ from 'lodash';
@@ -11,6 +12,7 @@ import { State } from '../redux/reducer';
 import { ColorOption } from '../style/theme';
 import { AsyncProcessState } from '../types';
 import { assetBuyer } from '../util/asset_buyer';
+import { errorFlasher } from '../util/error_flasher';
 
 import { AssetAmountInput } from '../components/asset_amount_input';
 
@@ -43,7 +45,16 @@ const updateBuyQuoteAsync = async (
     }
     // get a new buy quote.
     const baseUnitValue = Web3Wrapper.toBaseUnitAmount(assetAmount, zrxDecimals);
-    const newBuyQuote = await assetBuyer.getBuyQuoteAsync(assetData, baseUnitValue);
+
+    let newBuyQuote: BuyQuote | undefined;
+    try {
+        newBuyQuote = await assetBuyer.getBuyQuoteAsync(assetData, baseUnitValue);
+        errorFlasher.clearError(dispatch);
+    } catch (error) {
+        errorFlasher.flashNewError(dispatch, error);
+        return;
+    }
+
     // invalidate the last buy quote.
     dispatch(actions.updateLatestBuyQuote(newBuyQuote));
 };