Explicit actions for setting different order states

This allows us to dispatch updates with less syntax, and allows us to not have to send in progress info when setting failure and success

6 files changed, 88 insertions, 51 deletions

diff --git a/packages/instant/src/components/buy_button.tsx b/packages/instant/src/components/buy_button.tsx
index d10936d05..c00b1678d 100644
--- a/packages/instant/src/components/buy_button.tsx
+++ b/packages/instant/src/components/buy_button.tsx
@@ -20,8 +20,8 @@ export interface BuyButtonProps {
     onValidationFail: (buyQuote: BuyQuote, errorMessage: AssetBuyerError | ZeroExInstantError) => void;
     onSignatureDenied: (buyQuote: BuyQuote) => void;
     onBuyProcessing: (buyQuote: BuyQuote, txHash: string, startTimeUnix: number, expectedEndTimeUnix: number) => void;
-    onBuySuccess: (buyQuote: BuyQuote, txHash: string, startTimeUnix: number, expectedEndTimeUnix: number) => void;
-    onBuyFailure: (buyQuote: BuyQuote, txHash: string, startTimeUnix: number, expectedEndTimeUnix: number) => void;
+    onBuySuccess: (buyQuote: BuyQuote, txHash: string) => void;
+    onBuyFailure: (buyQuote: BuyQuote, txHash: string) => void;
 }
 
 export class BuyButton extends React.Component<BuyButtonProps> {
@@ -80,11 +80,12 @@ export class BuyButton extends React.Component<BuyButtonProps> {
             await web3Wrapper.awaitTransactionSuccessAsync(txHash);
         } catch (e) {
             if (e instanceof Error && e.message.startsWith(WEB_3_WRAPPER_TRANSACTION_FAILED_ERROR_MSG_PREFIX)) {
-                this.props.onBuyFailure(buyQuote, txHash, startTimeUnix, expectedEndTimeUnix);
+                this.props.onBuyFailure(buyQuote, txHash);
                 return;
             }
             throw e;
         }
-        this.props.onBuySuccess(buyQuote, txHash, startTimeUnix, expectedEndTimeUnix);
+
+        this.props.onBuySuccess(buyQuote, txHash);
     };
 }
diff --git a/packages/instant/src/components/buy_order_state_buttons.tsx b/packages/instant/src/components/buy_order_state_buttons.tsx
index 4a6b467d2..3f0764062 100644
--- a/packages/instant/src/components/buy_order_state_buttons.tsx
+++ b/packages/instant/src/components/buy_order_state_buttons.tsx
@@ -6,7 +6,6 @@ import { SecondaryButton } from '../components/secondary_button';
 import { Flex } from '../components/ui/flex';
 
 import { PlacingOrderButton } from '../components/placing_order_button';
-import { SimulatedProgressBar } from '../components/simulated_progress_bar';
 import { ColorOption } from '../style/theme';
 import { OrderProcessState, ZeroExInstantError } from '../types';
 
@@ -22,8 +21,8 @@ export interface BuyOrderStateButtonProps {
     onValidationFail: (buyQuote: BuyQuote, errorMessage: AssetBuyerError | ZeroExInstantError) => void;
     onSignatureDenied: (buyQuote: BuyQuote) => void;
     onBuyProcessing: (buyQuote: BuyQuote, txHash: string, startTimeUnix: number, expectedEndTimeUnix: number) => void;
-    onBuySuccess: (buyQuote: BuyQuote, txHash: string, startTimeUnix: number, expectedEndTimeUnix: number) => void;
-    onBuyFailure: (buyQuote: BuyQuote, txHash: string, startTimeUnix: number, expectedEndTimeUnix: number) => void;
+    onBuySuccess: (buyQuote: BuyQuote, txHash: string) => void;
+    onBuyFailure: (buyQuote: BuyQuote, txHash: string) => void;
     onRetry: () => void;
 }
 
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 247d57938..a94538ffc 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
@@ -22,8 +22,8 @@ interface ConnectedDispatch {
     onValidationPending: (buyQuote: BuyQuote) => void;
     onSignatureDenied: (buyQuote: BuyQuote) => void;
     onBuyProcessing: (buyQuote: BuyQuote, txHash: string, startTimeUnix: number, expectedEndTimeUnix: number) => void;
-    onBuySuccess: (buyQuote: BuyQuote, txHash: string, startTimeUnix: number, expectedEndTimeUnix: number) => void;
-    onBuyFailure: (buyQuote: BuyQuote, txHash: string, startTimeUnix: number, expectedEndTimeUnix: number) => void;
+    onBuySuccess: (buyQuote: BuyQuote, txHash: string) => void;
+    onBuyFailure: (buyQuote: BuyQuote, txHash: string) => void;
     onRetry: () => void;
     onValidationFail: (buyQuote: BuyQuote, errorMessage: AssetBuyerError | ZeroExInstantError) => void;
 }
@@ -56,52 +56,20 @@ const mapDispatchToProps = (
     ownProps: SelectedAssetBuyOrderStateButtons,
 ): ConnectedDispatch => ({
     onValidationPending: (buyQuote: BuyQuote) => {
-        const newOrderState: OrderState = { processState: OrderProcessState.VALIDATING };
-        dispatch(actions.updateBuyOrderState(newOrderState));
+        dispatch(actions.setBuyOrderStateValidating());
     },
     onBuyProcessing: (buyQuote: BuyQuote, txHash: string, startTimeUnix: number, expectedEndTimeUnix: number) => {
-        const newOrderState: OrderState = {
-            processState: OrderProcessState.PROCESSING,
-            txHash,
-            progress: {
-                startTimeUnix,
-                expectedEndTimeUnix,
-                ended: false,
-            },
-        };
-        dispatch(actions.updateBuyOrderState(newOrderState));
+        dispatch(actions.setBuyOrderStateProcessing(txHash, startTimeUnix, expectedEndTimeUnix));
     },
-    onBuySuccess: (buyQuote: BuyQuote, txHash: string, startTimeUnix: number, expectedEndTimeUnix: number) =>
-        dispatch(
-            actions.updateBuyOrderState({
-                processState: OrderProcessState.SUCCESS,
-                txHash,
-                progress: {
-                    startTimeUnix,
-                    expectedEndTimeUnix,
-                    ended: true,
-                },
-            }),
-        ),
-    onBuyFailure: (buyQuote: BuyQuote, txHash: string, startTimeUnix: number, expectedEndTimeUnix: number) =>
-        dispatch(
-            actions.updateBuyOrderState({
-                processState: OrderProcessState.FAILURE,
-                txHash,
-                progress: {
-                    startTimeUnix,
-                    expectedEndTimeUnix,
-                    ended: true,
-                },
-            }),
-        ),
+    onBuySuccess: (buyQuote: BuyQuote, txHash: string) => dispatch(actions.setBuyOrderStateSuccess(txHash)),
+    onBuyFailure: (buyQuote: BuyQuote, txHash: string) => dispatch(actions.setBuyOrderStateFailure(txHash)),
     onSignatureDenied: () => {
         dispatch(actions.resetAmount());
         const errorMessage = 'You denied this transaction';
         errorFlasher.flashNewErrorMessage(dispatch, errorMessage);
     },
     onValidationFail: (buyQuote, error) => {
-        dispatch(actions.updateBuyOrderState({ processState: OrderProcessState.NONE }));
+        dispatch(actions.setBuyOrderStateNone());
         if (error === ZeroExInstantError.InsufficientETH) {
             const errorMessage = "You don't have enough ETH";
             errorFlasher.flashNewErrorMessage(dispatch, errorMessage);
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 4767b15d4..c0245f721 100644
--- a/packages/instant/src/containers/selected_erc20_asset_amount_input.ts
+++ b/packages/instant/src/containers/selected_erc20_asset_amount_input.ts
@@ -113,7 +113,7 @@ const mapDispatchToProps = (
         // invalidate the last buy quote.
         dispatch(actions.updateLatestBuyQuote(undefined));
         // reset our buy state
-        dispatch(actions.updateBuyOrderState({ processState: OrderProcessState.NONE }));
+        dispatch(actions.setBuyOrderStateNone());
 
         if (!_.isUndefined(value) && !_.isUndefined(asset) && !_.isUndefined(assetBuyer)) {
             // even if it's debounced, give them the illusion it's loading
diff --git a/packages/instant/src/redux/actions.ts b/packages/instant/src/redux/actions.ts
index 61c273510..627e39ffc 100644
--- a/packages/instant/src/redux/actions.ts
+++ b/packages/instant/src/redux/actions.ts
@@ -25,7 +25,11 @@ function createAction<T extends string, P>(type: T, data?: P): PlainAction<T> |
 export enum ActionTypes {
     UPDATE_ETH_USD_PRICE = 'UPDATE_ETH_USD_PRICE',
     UPDATE_SELECTED_ASSET_AMOUNT = 'UPDATE_SELECTED_ASSET_AMOUNT',
-    UPDATE_BUY_ORDER_STATE = 'UPDATE_BUY_ORDER_STATE',
+    SET_BUY_ORDER_STATE_NONE = 'SET_BUY_ORDER_STATE_NONE',
+    SET_BUY_ORDER_STATE_VALIDATING = 'SET_BUY_ORDER_STATE_VALIDATING',
+    SET_BUY_ORDER_STATE_PROCESSING = 'SET_BUY_ORDER_STATE_PROCESSING',
+    SET_BUY_ORDER_STATE_FAILURE = 'SET_BUY_ORDER_STATE_FAILURE',
+    SET_BUY_ORDER_STATE_SUCCESS = 'SET_BUY_ORDER_STATE_SUCCESS',
     UPDATE_LATEST_BUY_QUOTE = 'UPDATE_LATEST_BUY_QUOTE',
     UPDATE_SELECTED_ASSET = 'UPDATE_SELECTED_ASSET',
     SET_QUOTE_REQUEST_STATE_PENDING = 'SET_QUOTE_REQUEST_STATE_PENDING',
@@ -40,7 +44,12 @@ export const actions = {
     updateEthUsdPrice: (price?: BigNumber) => createAction(ActionTypes.UPDATE_ETH_USD_PRICE, price),
     updateSelectedAssetAmount: (amount?: BigNumberInput) =>
         createAction(ActionTypes.UPDATE_SELECTED_ASSET_AMOUNT, amount),
-    updateBuyOrderState: (orderState: OrderState) => createAction(ActionTypes.UPDATE_BUY_ORDER_STATE, orderState),
+    setBuyOrderStateNone: () => createAction(ActionTypes.SET_BUY_ORDER_STATE_NONE),
+    setBuyOrderStateValidating: () => createAction(ActionTypes.SET_BUY_ORDER_STATE_VALIDATING),
+    setBuyOrderStateProcessing: (txHash: string, startTimeUnix: number, expectedEndTimeUnix: number) =>
+        createAction(ActionTypes.SET_BUY_ORDER_STATE_PROCESSING, { txHash, startTimeUnix, expectedEndTimeUnix }),
+    setBuyOrderStateFailure: (txHash: string) => createAction(ActionTypes.SET_BUY_ORDER_STATE_FAILURE, txHash),
+    setBuyOrderStateSuccess: (txHash: string) => createAction(ActionTypes.SET_BUY_ORDER_STATE_SUCCESS, txHash),
     updateLatestBuyQuote: (buyQuote?: BuyQuote) => createAction(ActionTypes.UPDATE_LATEST_BUY_QUOTE, buyQuote),
     updateSelectedAsset: (assetData?: string) => createAction(ActionTypes.UPDATE_SELECTED_ASSET, assetData),
     setQuoteRequestStatePending: () => createAction(ActionTypes.SET_QUOTE_REQUEST_STATE_PENDING),
diff --git a/packages/instant/src/redux/reducer.ts b/packages/instant/src/redux/reducer.ts
index dd9403052..11980066b 100644
--- a/packages/instant/src/redux/reducer.ts
+++ b/packages/instant/src/redux/reducer.ts
@@ -83,11 +83,71 @@ export const reducer = (state: State = INITIAL_STATE, action: Action): State =>
                 latestBuyQuote: undefined,
                 quoteRequestState: AsyncProcessState.FAILURE,
             };
-        case ActionTypes.UPDATE_BUY_ORDER_STATE:
+        case ActionTypes.SET_BUY_ORDER_STATE_NONE:
             return {
                 ...state,
-                buyOrderState: action.data,
+                buyOrderState: { processState: OrderProcessState.NONE },
+            };
+        case ActionTypes.SET_BUY_ORDER_STATE_VALIDATING:
+            return {
+                ...state,
+                buyOrderState: { processState: OrderProcessState.VALIDATING },
             };
+        case ActionTypes.SET_BUY_ORDER_STATE_PROCESSING:
+            const processingData = action.data;
+            const { startTimeUnix, expectedEndTimeUnix } = processingData;
+            return {
+                ...state,
+                buyOrderState: {
+                    processState: OrderProcessState.PROCESSING,
+                    txHash: processingData.txHash,
+                    progress: {
+                        startTimeUnix,
+                        expectedEndTimeUnix,
+                        ended: false,
+                    },
+                },
+            };
+        case ActionTypes.SET_BUY_ORDER_STATE_FAILURE:
+            const failureTxHash = action.data;
+            if ('txHash' in state.buyOrderState) {
+                if (state.buyOrderState.txHash === failureTxHash) {
+                    const failureProgress = {
+                        startTimeUnix: state.buyOrderState.progress.startTimeUnix,
+                        expectedEndTimeUnix: state.buyOrderState.progress.expectedEndTimeUnix,
+                        ended: true,
+                    };
+                    return {
+                        ...state,
+                        buyOrderState: {
+                            processState: OrderProcessState.FAILURE,
+                            txHash: state.buyOrderState.txHash,
+                            progress: failureProgress,
+                        },
+                    };
+                }
+            }
+            return state;
+        case ActionTypes.SET_BUY_ORDER_STATE_SUCCESS:
+            const successTxHash = action.data;
+            if ('txHash' in state.buyOrderState) {
+                if (state.buyOrderState.txHash === successTxHash) {
+                    const successProgress = {
+                        startTimeUnix: state.buyOrderState.progress.startTimeUnix,
+                        expectedEndTimeUnix: state.buyOrderState.progress.expectedEndTimeUnix,
+                        ended: true,
+                    };
+                    return {
+                        ...state,
+                        buyOrderState: {
+                            processState: OrderProcessState.SUCCESS,
+                            txHash: state.buyOrderState.txHash,
+                            progress: successProgress,
+                        },
+                    };
+                }
+            }
+            return state;
         case ActionTypes.SET_ERROR_MESSAGE:
             return {
                 ...state,