feat(instant): Handle AssetBuyer errors

3 files changed, 37 insertions, 2 deletions

diff --git a/packages/instant/src/redux/actions.ts b/packages/instant/src/redux/actions.ts
index 7d07b4950..cf5b39790 100644
--- a/packages/instant/src/redux/actions.ts
+++ b/packages/instant/src/redux/actions.ts
@@ -25,6 +25,9 @@ export enum ActionTypes {
     UPDATE_SELECTED_ASSET_AMOUNT = 'UPDATE_SELECTED_ASSET_AMOUNT',
     UPDATE_SELECTED_ASSET_BUY_STATE = 'UPDATE_SELECTED_ASSET_BUY_STATE',
     UPDATE_LATEST_BUY_QUOTE = 'UPDATE_LATEST_BUY_QUOTE',
+    SET_ERROR = 'SET_ERROR',
+    HIDE_ERROR = 'HIDE_ERROR',
+    CLEAR_ERROR = 'CLEAR_ERROR',
 }
 
 export const actions = {
@@ -33,4 +36,7 @@ export const actions = {
     updateSelectedAssetBuyState: (buyState: AsyncProcessState) =>
         createAction(ActionTypes.UPDATE_SELECTED_ASSET_BUY_STATE, buyState),
     updateLatestBuyQuote: (buyQuote?: BuyQuote) => createAction(ActionTypes.UPDATE_LATEST_BUY_QUOTE, buyQuote),
+    setError: (error?: any) => createAction(ActionTypes.SET_ERROR, error),
+    hideError: () => createAction(ActionTypes.HIDE_ERROR),
+    clearError: () => createAction(ActionTypes.CLEAR_ERROR),
 };
diff --git a/packages/instant/src/redux/reducer.ts b/packages/instant/src/redux/reducer.ts
index adecf2ab7..4ff49c225 100644
--- a/packages/instant/src/redux/reducer.ts
+++ b/packages/instant/src/redux/reducer.ts
@@ -7,13 +7,22 @@ import { AsyncProcessState } from '../types';
 
 import { Action, ActionTypes } from './actions';
 
-export interface State {
+interface BaseState {
     selectedAssetData?: string;
     selectedAssetAmount?: BigNumber;
     selectedAssetBuyState: AsyncProcessState;
     ethUsdPrice?: BigNumber;
     latestBuyQuote?: BuyQuote;
 }
+interface StateWithError extends BaseState {
+    latestError: any;
+    latestErrorDismissed: boolean;
+}
+interface StateWithoutError extends BaseState {
+    latestError: undefined;
+    latestErrorDismissed: undefined;
+}
+export type State = StateWithError | StateWithoutError;
 
 export const INITIAL_STATE: State = {
     // TODO: Remove hardcoded zrxAssetData
@@ -22,6 +31,8 @@ export const INITIAL_STATE: State = {
     selectedAssetBuyState: AsyncProcessState.NONE,
     ethUsdPrice: undefined,
     latestBuyQuote: undefined,
+    latestError: undefined,
+    latestErrorDismissed: undefined,
 };
 
 export const reducer = (state: State = INITIAL_STATE, action: Action): State => {
@@ -46,6 +57,23 @@ export const reducer = (state: State = INITIAL_STATE, action: Action): State =>
                 ...state,
                 selectedAssetBuyState: action.data,
             };
+        case ActionTypes.SET_ERROR:
+            return {
+                ...state,
+                latestError: action.data,
+                latestErrorDismissed: false,
+            };
+        case ActionTypes.HIDE_ERROR:
+            return {
+                ...state,
+                latestErrorDismissed: true,
+            };
+        case ActionTypes.CLEAR_ERROR:
+            return {
+                ...state,
+                latestError: undefined,
+                latestErrorDismissed: undefined,
+            };
         default:
             return state;
     }
diff --git a/packages/instant/src/redux/store.ts b/packages/instant/src/redux/store.ts
index fcd19f9a8..8d9fe34cb 100644
--- a/packages/instant/src/redux/store.ts
+++ b/packages/instant/src/redux/store.ts
@@ -3,4 +3,5 @@ import { createStore, Store as ReduxStore } from 'redux';
 
 import { reducer, State } from './reducer';
 
-export const store: ReduxStore<State> = createStore(reducer);
+const reduxDevTools = (window as any).__REDUX_DEVTOOLS_EXTENSION__;
+export const store: ReduxStore<State> = createStore(reducer, reduxDevTools && reduxDevTools());