Merge pull request #1187 from 0xProject/feature/instant/fixed-orders-in-render-method

[instant] Add ability to toggle render settings through URL, flash error on incorrect network, provided liquidity

3 files changed, 36 insertions, 19 deletions

diff --git a/packages/instant/src/containers/latest_error.tsx b/packages/instant/src/containers/latest_error.tsx
index b75ec00aa..45ca09673 100644
--- a/packages/instant/src/containers/latest_error.tsx
+++ b/packages/instant/src/containers/latest_error.tsx
@@ -5,32 +5,30 @@ import { connect } from 'react-redux';
 import { SlidingError } from '../components/sliding_error';
 import { State } from '../redux/reducer';
 import { Asset, DisplayStatus } from '../types';
-import { errorUtil } from '../util/error';
 
 export interface LatestErrorComponentProps {
     asset?: Asset;
-    latestError?: any;
+    latestErrorMessage?: string;
     slidingDirection: 'down' | 'up';
 }
 
 export const LatestErrorComponent: React.StatelessComponent<LatestErrorComponentProps> = props => {
-    if (!props.latestError) {
+    if (!props.latestErrorMessage) {
         return <div />;
     }
-    const { icon, message } = errorUtil.errorDescription(props.latestError, props.asset);
-    return <SlidingError direction={props.slidingDirection} icon={icon} message={message} />;
+    return <SlidingError direction={props.slidingDirection} icon="😢" message={props.latestErrorMessage} />;
 };
 
 interface ConnectedState {
     asset?: Asset;
-    latestError?: any;
+    latestErrorMessage?: string;
     slidingDirection: 'down' | 'up';
 }
 export interface LatestErrorProps {}
 const mapStateToProps = (state: State, _ownProps: LatestErrorProps): ConnectedState => ({
     asset: state.selectedAsset,
-    latestError: state.latestError,
-    slidingDirection: state.latestErrorDisplay === DisplayStatus.Present ? 'up' : 'down',
+    latestErrorMessage: state.latestErrorMessage,
+    slidingDirection: state.latestErrorDisplayStatus === DisplayStatus.Present ? 'up' : 'down',
 });
 
 export const LatestError = connect(mapStateToProps)(LatestErrorComponent);
diff --git a/packages/instant/src/containers/selected_asset_buy_order_state_buttons.ts b/packages/instant/src/containers/selected_asset_buy_order_state_buttons.ts
index 241c0192c..500d6b88a 100644
--- a/packages/instant/src/containers/selected_asset_buy_order_state_buttons.ts
+++ b/packages/instant/src/containers/selected_asset_buy_order_state_buttons.ts
@@ -4,14 +4,13 @@ import * as React from 'react';
 import { connect } from 'react-redux';
 import { Dispatch } from 'redux';
 
+import { BuyOrderStateButtons } from '../components/buy_order_state_buttons';
 import { Action, actions } from '../redux/actions';
 import { State } from '../redux/reducer';
 import { OrderProcessState, OrderState, ZeroExInstantError } from '../types';
+import { errorFlasher } from '../util/error_flasher';
 import { etherscanUtil } from '../util/etherscan';
 
-import { BuyOrderStateButtons } from '../components/buy_order_state_buttons';
-import { errorUtil } from '../util/error';
-
 interface ConnectedState {
     buyQuote?: BuyQuote;
     buyOrderProcessingState: OrderProcessState;
@@ -21,7 +20,7 @@ interface ConnectedState {
 
 interface ConnectedDispatch {
     onValidationPending: (buyQuote: BuyQuote) => void;
-    onSignatureDenied: (buyQuote: BuyQuote, error: Error) => void;
+    onSignatureDenied: (buyQuote: BuyQuote) => void;
     onBuyProcessing: (buyQuote: BuyQuote, txHash: string) => void;
     onBuySuccess: (buyQuote: BuyQuote, txHash: string) => void;
     onBuyFailure: (buyQuote: BuyQuote, txHash: string) => void;
@@ -68,13 +67,19 @@ const mapDispatchToProps = (
         dispatch(actions.updateBuyOrderState({ processState: OrderProcessState.SUCCESS, txHash })),
     onBuyFailure: (buyQuote: BuyQuote, txHash: string) =>
         dispatch(actions.updateBuyOrderState({ processState: OrderProcessState.FAILURE, txHash })),
-    onSignatureDenied: (buyQuote, error) => {
+    onSignatureDenied: () => {
         dispatch(actions.resetAmount());
-        errorUtil.errorFlasher.flashNewError(dispatch, error);
+        const errorMessage = 'You denied this transaction';
+        errorFlasher.flashNewErrorMessage(dispatch, errorMessage);
     },
     onValidationFail: (buyQuote, error) => {
         dispatch(actions.updateBuyOrderState({ processState: OrderProcessState.NONE }));
-        errorUtil.errorFlasher.flashNewError(dispatch, new Error(error));
+        if (error === ZeroExInstantError.InsufficientETH) {
+            const errorMessage = "You don't have enough ETH";
+            errorFlasher.flashNewErrorMessage(dispatch, errorMessage);
+        } else {
+            errorFlasher.flashNewErrorMessage(dispatch);
+        }
     },
     onRetry: () => {
         dispatch(actions.resetAmount());
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 41ed974a2..4767b15d4 100644
--- a/packages/instant/src/containers/selected_erc20_asset_amount_input.ts
+++ b/packages/instant/src/containers/selected_erc20_asset_amount_input.ts
@@ -1,4 +1,4 @@
-import { AssetBuyer, BuyQuote } from '@0x/asset-buyer';
+import { AssetBuyer, AssetBuyerError, BuyQuote } from '@0x/asset-buyer';
 import { AssetProxyId } from '@0x/types';
 import { BigNumber } from '@0x/utils';
 import { Web3Wrapper } from '@0x/web3-wrapper';
@@ -12,8 +12,9 @@ import { Action, actions } from '../redux/actions';
 import { State } from '../redux/reducer';
 import { ColorOption } from '../style/theme';
 import { ERC20Asset, OrderProcessState } from '../types';
+import { assetUtils } from '../util/asset';
 import { BigNumberInput } from '../util/big_number_input';
-import { errorUtil } from '../util/error';
+import { errorFlasher } from '../util/error_flasher';
 
 export interface SelectedERC20AssetAmountInputProps {
     fontColor?: ColorOption;
@@ -78,11 +79,24 @@ const updateBuyQuoteAsync = async (
         newBuyQuote = await assetBuyer.getBuyQuoteAsync(asset.assetData, baseUnitValue);
     } catch (error) {
         dispatch(actions.setQuoteRequestStateFailure());
-        errorUtil.errorFlasher.flashNewError(dispatch, error);
+        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`;
+        }
+        errorFlasher.flashNewErrorMessage(dispatch, errorMessage);
         return;
     }
     // We have a successful new buy quote
-    errorUtil.errorFlasher.clearError(dispatch);
+    errorFlasher.clearError(dispatch);
     // invalidate the last buy quote.
     dispatch(actions.updateLatestBuyQuote(newBuyQuote));
 };