Merge pull request #1142 from 0xProject/feature/instant/asset-buyer-errors

[instant] Asset buyer errors

4 files changed, 68 insertions, 13 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..08ea418e7
--- /dev/null
+++ b/packages/instant/src/containers/latest_error.tsx
@@ -0,0 +1,35 @@
+import * as React from 'react';
+
+import { connect } from 'react-redux';
+
+import { SlidingError } from '../components/sliding_error';
+import { LatestErrorDisplay, State } from '../redux/reducer';
+import { errorUtil } from '../util/error';
+
+export interface LatestErrorComponentProps {
+    assetData?: string;
+    latestError?: any;
+    slidingDirection: 'down' | 'up';
+}
+
+export const LatestErrorComponent: React.StatelessComponent<LatestErrorComponentProps> = props => {
+    if (!props.latestError) {
+        return <div />;
+    }
+    const { icon, message } = errorUtil.errorDescription(props.latestError, props.assetData);
+    return <SlidingError direction={props.slidingDirection} icon={icon} message={message} />;
+};
+
+interface ConnectedState {
+    assetData?: string;
+    latestError?: any;
+    slidingDirection: 'down' | 'up';
+}
+export interface LatestErrorProps {}
+const mapStateToProps = (state: State, _ownProps: LatestErrorProps): ConnectedState => ({
+    assetData: state.selectedAssetData,
+    latestError: state.latestError,
+    slidingDirection: state.latestErrorDisplay === LatestErrorDisplay.Present ? 'up' : 'down',
+});
+
+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..0873f1ab6 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 { errorUtil } from '../util/error';
 
 import { AssetAmountInput } from '../components/asset_amount_input';
 
@@ -35,15 +37,25 @@ const mapStateToProps = (state: State, _ownProps: SelectedAssetAmountInputProps)
 
 const updateBuyQuoteAsync = async (
     dispatch: Dispatch<Action>,
-    assetData?: string,
-    assetAmount?: BigNumber,
+    assetData: string,
+    assetAmount: BigNumber,
 ): Promise<void> => {
-    if (_.isUndefined(assetAmount) || _.isUndefined(assetData)) {
-        return;
-    }
     // get a new buy quote.
     const baseUnitValue = Web3Wrapper.toBaseUnitAmount(assetAmount, zrxDecimals);
-    const newBuyQuote = await assetBuyer.getBuyQuoteAsync(assetData, baseUnitValue);
+
+    // mark quote as pending
+    dispatch(actions.updateBuyQuoteStatePending());
+
+    let newBuyQuote: BuyQuote | undefined;
+    try {
+        newBuyQuote = await assetBuyer.getBuyQuoteAsync(assetData, baseUnitValue);
+    } catch (error) {
+        dispatch(actions.updateBuyQuoteStateFailure());
+        errorUtil.errorFlasher.flashNewError(dispatch, error);
+        return;
+    }
+    // We have a successful new buy quote
+    errorUtil.errorFlasher.clearError(dispatch);
     // invalidate the last buy quote.
     dispatch(actions.updateLatestBuyQuote(newBuyQuote));
 };
@@ -60,9 +72,14 @@ const mapDispatchToProps = (
         // invalidate the last buy quote.
         dispatch(actions.updateLatestBuyQuote(undefined));
         // reset our buy state
-        dispatch(actions.updateSelectedAssetBuyState(AsyncProcessState.NONE));
-        // tslint:disable-next-line:no-floating-promises
-        debouncedUpdateBuyQuoteAsync(dispatch, assetData, value);
+        dispatch(actions.updatebuyOrderState(AsyncProcessState.NONE));
+
+        if (!_.isUndefined(value) && !_.isUndefined(assetData)) {
+            // even if it's debounced, give them the illusion it's loading
+            dispatch(actions.updateBuyQuoteStatePending());
+            // tslint:disable-next-line:no-floating-promises
+            debouncedUpdateBuyQuoteAsync(dispatch, assetData, value);
+        }
     },
 });
 
diff --git a/packages/instant/src/containers/selected_asset_buy_button.ts b/packages/instant/src/containers/selected_asset_buy_button.ts
index 4cbaf5537..7d3919468 100644
--- a/packages/instant/src/containers/selected_asset_buy_button.ts
+++ b/packages/instant/src/containers/selected_asset_buy_button.ts
@@ -39,14 +39,14 @@ const textForState = (state: AsyncProcessState): string => {
 };
 
 const mapStateToProps = (state: State, _ownProps: SelectedAssetBuyButtonProps): ConnectedState => ({
-    text: textForState(state.selectedAssetBuyState),
+    text: textForState(state.buyOrderState),
     buyQuote: state.latestBuyQuote,
 });
 
 const mapDispatchToProps = (dispatch: Dispatch<Action>, ownProps: SelectedAssetBuyButtonProps): ConnectedDispatch => ({
-    onClick: buyQuote => dispatch(actions.updateSelectedAssetBuyState(AsyncProcessState.PENDING)),
-    onBuySuccess: buyQuote => dispatch(actions.updateSelectedAssetBuyState(AsyncProcessState.SUCCESS)),
-    onBuyFailure: buyQuote => dispatch(actions.updateSelectedAssetBuyState(AsyncProcessState.FAILURE)),
+    onClick: buyQuote => dispatch(actions.updatebuyOrderState(AsyncProcessState.PENDING)),
+    onBuySuccess: buyQuote => dispatch(actions.updatebuyOrderState(AsyncProcessState.SUCCESS)),
+    onBuyFailure: buyQuote => dispatch(actions.updatebuyOrderState(AsyncProcessState.FAILURE)),
 });
 
 export const SelectedAssetBuyButton: React.ComponentClass<SelectedAssetBuyButtonProps> = connect(
diff --git a/packages/instant/src/containers/selected_asset_instant_heading.ts b/packages/instant/src/containers/selected_asset_instant_heading.ts
index c97cfe11a..be31527f1 100644
--- a/packages/instant/src/containers/selected_asset_instant_heading.ts
+++ b/packages/instant/src/containers/selected_asset_instant_heading.ts
@@ -5,6 +5,7 @@ import { connect } from 'react-redux';
 import { oc } from 'ts-optchain';
 
 import { State } from '../redux/reducer';
+import { AsyncProcessState } from '../types';
 
 import { InstantHeading } from '../components/instant_heading';
 
@@ -14,12 +15,14 @@ interface ConnectedState {
     selectedAssetAmount?: BigNumber;
     totalEthBaseAmount?: BigNumber;
     ethUsdPrice?: BigNumber;
+    quoteState: AsyncProcessState;
 }
 
 const mapStateToProps = (state: State, _ownProps: InstantHeadingProps): ConnectedState => ({
     selectedAssetAmount: state.selectedAssetAmount,
     totalEthBaseAmount: oc(state).latestBuyQuote.worstCaseQuoteInfo.totalEthAmount(),
     ethUsdPrice: state.ethUsdPrice,
+    quoteState: state.quoteState,
 });
 
 export const SelectedAssetInstantHeading: React.ComponentClass<InstantHeadingProps> = connect(mapStateToProps)(