Introduce new OrderProcessState

8 files changed, 45 insertions, 26 deletions

diff --git a/packages/instant/src/components/buy_order_state_button.tsx b/packages/instant/src/components/buy_order_state_button.tsx
index 5bc965c7d..b5b21fd1e 100644
--- a/packages/instant/src/components/buy_order_state_button.tsx
+++ b/packages/instant/src/components/buy_order_state_button.tsx
@@ -4,18 +4,21 @@ import { PlacingOrderButton } from '../components/placing_order_button';
 import { SelectedAssetBuyButton } from '../containers/selected_asset_buy_button';
 import { SelectedAssetRetryButton } from '../containers/selected_asset_retry_button';
 import { SelectedAssetViewTransactionButton } from '../containers/selected_asset_view_transaction_button';
-import { AsyncProcessState } from '../types';
+import { OrderProcessState } from '../types';
 
 export interface BuyOrderStateButtonProps {
-    buyOrderProcessingState: AsyncProcessState;
+    buyOrderProcessingState: OrderProcessState;
 }
 
 export const BuyOrderStateButton: React.StatelessComponent<BuyOrderStateButtonProps> = props => {
-    if (props.buyOrderProcessingState === AsyncProcessState.FAILURE) {
+    if (props.buyOrderProcessingState === OrderProcessState.FAILURE) {
         return <SelectedAssetRetryButton />;
-    } else if (props.buyOrderProcessingState === AsyncProcessState.SUCCESS) {
+    } else if (props.buyOrderProcessingState === OrderProcessState.SUCCESS) {
         return <SelectedAssetViewTransactionButton />;
-    } else if (props.buyOrderProcessingState === AsyncProcessState.PENDING) {
+    } else if (
+        props.buyOrderProcessingState === OrderProcessState.AWAITING_SIGNATURE ||
+        props.buyOrderProcessingState === OrderProcessState.PROCESSING
+    ) {
         return <PlacingOrderButton />;
     }
 
diff --git a/packages/instant/src/components/instant_heading.tsx b/packages/instant/src/components/instant_heading.tsx
index ed753a3bd..37d87580d 100644
--- a/packages/instant/src/components/instant_heading.tsx
+++ b/packages/instant/src/components/instant_heading.tsx
@@ -4,7 +4,7 @@ import * as React from 'react';
 
 import { SelectedAssetAmountInput } from '../containers/selected_asset_amount_input';
 import { ColorOption } from '../style/theme';
-import { AsyncProcessState, OrderState } from '../types';
+import { AsyncProcessState, OrderProcessState, OrderState } from '../types';
 import { format } from '../util/format';
 
 import { AmountPlaceholder } from './amount_placeholder';
@@ -68,9 +68,9 @@ export class InstantHeading extends React.Component<InstantHeadingProps, {}> {
     private _renderIcon(): React.ReactNode {
         const processState = this.props.buyOrderState.processState;
 
-        if (processState === AsyncProcessState.FAILURE) {
+        if (processState === OrderProcessState.FAILURE) {
             return <Icon icon={'failed'} width={ICON_WIDTH} height={ICON_HEIGHT} color={ICON_COLOR} />;
-        } else if (processState === AsyncProcessState.SUCCESS) {
+        } else if (processState === OrderProcessState.SUCCESS) {
             return <Icon icon={'success'} width={ICON_WIDTH} height={ICON_HEIGHT} color={ICON_COLOR} />;
         }
         return undefined;
@@ -78,9 +78,9 @@ export class InstantHeading extends React.Component<InstantHeadingProps, {}> {
 
     private _renderTopText(): React.ReactNode {
         const processState = this.props.buyOrderState.processState;
-        if (processState === AsyncProcessState.FAILURE) {
+        if (processState === OrderProcessState.FAILURE) {
             return 'Order failed';
-        } else if (processState === AsyncProcessState.SUCCESS) {
+        } else if (processState === OrderProcessState.SUCCESS) {
             return 'Tokens received!';
         }
 
diff --git a/packages/instant/src/containers/selected_asset_amount_input.ts b/packages/instant/src/containers/selected_asset_amount_input.ts
index f23b2010e..e9dbc61ce 100644
--- a/packages/instant/src/containers/selected_asset_amount_input.ts
+++ b/packages/instant/src/containers/selected_asset_amount_input.ts
@@ -10,7 +10,7 @@ import { Dispatch } from 'redux';
 import { Action, actions } from '../redux/actions';
 import { State } from '../redux/reducer';
 import { ColorOption } from '../style/theme';
-import { AsyncProcessState, ERC20Asset } from '../types';
+import { ERC20Asset, OrderProcessState } from '../types';
 import { errorUtil } from '../util/error';
 
 import { AssetAmountInput } from '../components/asset_amount_input';
@@ -90,7 +90,7 @@ const mapDispatchToProps = (
         // invalidate the last buy quote.
         dispatch(actions.updateLatestBuyQuote(undefined));
         // reset our buy state
-        dispatch(actions.updateBuyOrderState({ processState: AsyncProcessState.NONE }));
+        dispatch(actions.updateBuyOrderState({ processState: OrderProcessState.NONE }));
 
         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/containers/selected_asset_buy_button.ts b/packages/instant/src/containers/selected_asset_buy_button.ts
index 428939e79..1d8b3b4bd 100644
--- a/packages/instant/src/containers/selected_asset_buy_button.ts
+++ b/packages/instant/src/containers/selected_asset_buy_button.ts
@@ -6,7 +6,7 @@ import { Dispatch } from 'redux';
 
 import { Action, actions } from '../redux/actions';
 import { State } from '../redux/reducer';
-import { AsyncProcessState } from '../types';
+import { AsyncProcessState, OrderProcessState } from '../types';
 
 import { BuyButton } from '../components/buy_button';
 
@@ -30,10 +30,10 @@ const mapStateToProps = (state: State, _ownProps: SelectedAssetBuyButtonProps):
 });
 
 const mapDispatchToProps = (dispatch: Dispatch<Action>, ownProps: SelectedAssetBuyButtonProps): ConnectedDispatch => ({
-    onClick: buyQuote => dispatch(actions.updateBuyOrderState({ processState: AsyncProcessState.PENDING })),
+    onClick: buyQuote => dispatch(actions.updateBuyOrderState({ processState: OrderProcessState.AWAITING_SIGNATURE })),
     onBuySuccess: (buyQuote: BuyQuote, txnHash: string) =>
-        dispatch(actions.updateBuyOrderState({ processState: AsyncProcessState.SUCCESS, txnHash })),
-    onBuyFailure: buyQuote => dispatch(actions.updateBuyOrderState({ processState: AsyncProcessState.FAILURE })),
+        dispatch(actions.updateBuyOrderState({ processState: OrderProcessState.SUCCESS, txnHash })),
+    onBuyFailure: buyQuote => dispatch(actions.updateBuyOrderState({ processState: OrderProcessState.FAILURE })),
     onBuyPrevented: (buyQuote, error) => {
         dispatch(actions.resetAmount());
         dispatch(actions.setError(error));
diff --git a/packages/instant/src/containers/selected_asset_buy_order_state_button.tsx b/packages/instant/src/containers/selected_asset_buy_order_state_button.tsx
index f3efbb5d2..c02228d76 100644
--- a/packages/instant/src/containers/selected_asset_buy_order_state_button.tsx
+++ b/packages/instant/src/containers/selected_asset_buy_order_state_button.tsx
@@ -3,12 +3,12 @@ import * as React from 'react';
 import { connect } from 'react-redux';
 
 import { State } from '../redux/reducer';
-import { AsyncProcessState } from '../types';
+import { AsyncProcessState, OrderProcessState } from '../types';
 
 import { BuyOrderStateButton } from '../components/buy_order_state_button';
 
 interface ConnectedState {
-    buyOrderProcessingState: AsyncProcessState;
+    buyOrderProcessingState: OrderProcessState;
 }
 export interface SelectedAssetButtonProps {}
 const mapStateToProps = (state: State, _ownProps: SelectedAssetButtonProps): ConnectedState => ({
diff --git a/packages/instant/src/containers/selected_asset_view_transaction_button.tsx b/packages/instant/src/containers/selected_asset_view_transaction_button.tsx
index 6f42b9f85..1f9bfd7a6 100644
--- a/packages/instant/src/containers/selected_asset_view_transaction_button.tsx
+++ b/packages/instant/src/containers/selected_asset_view_transaction_button.tsx
@@ -5,7 +5,7 @@ import { connect } from 'react-redux';
 import { State } from '../redux/reducer';
 
 import { ViewTransactionButton } from '../components/view_transaction_button';
-import { AsyncProcessState } from '../types';
+import { AsyncProcessState, OrderProcessState } from '../types';
 import { etherscanUtil } from '../util/etherscan';
 
 export interface SelectedAssetViewTransactionButtonProps {}
@@ -16,7 +16,7 @@ interface ConnectedState {
 
 const mapStateToProps = (state: State, _ownProps: {}): ConnectedState => ({
     onClick: () => {
-        if (state.assetBuyer && state.buyOrderState.processState === AsyncProcessState.SUCCESS) {
+        if (state.assetBuyer && state.buyOrderState.processState === OrderProcessState.SUCCESS) {
             const etherscanUrl = etherscanUtil.getEtherScanTxnAddressIfExists(
                 state.buyOrderState.txnHash,
                 state.assetBuyer.networkId,
diff --git a/packages/instant/src/redux/reducer.ts b/packages/instant/src/redux/reducer.ts
index c6a05ac52..25d0092b2 100644
--- a/packages/instant/src/redux/reducer.ts
+++ b/packages/instant/src/redux/reducer.ts
@@ -4,7 +4,15 @@ import { BigNumber } from '@0x/utils';
 import * as _ from 'lodash';
 
 import { assetMetaDataMap } from '../data/asset_meta_data_map';
-import { Asset, AssetMetaData, AsyncProcessState, DisplayStatus, Network, OrderState } from '../types';
+import {
+    Asset,
+    AssetMetaData,
+    AsyncProcessState,
+    DisplayStatus,
+    Network,
+    OrderProcessState,
+    OrderState,
+} from '../types';
 import { assetUtils } from '../util/asset';
 
 import { Action, ActionTypes } from './actions';
@@ -27,7 +35,7 @@ export const INITIAL_STATE: State = {
     network: Network.Mainnet,
     selectedAssetAmount: undefined,
     assetMetaDataMap,
-    buyOrderState: { processState: AsyncProcessState.NONE },
+    buyOrderState: { processState: OrderProcessState.NONE },
     ethUsdPrice: undefined,
     latestBuyQuote: undefined,
     latestError: undefined,
@@ -106,7 +114,7 @@ export const reducer = (state: State = INITIAL_STATE, action: Action): State =>
                 ...state,
                 latestBuyQuote: undefined,
                 quoteRequestState: AsyncProcessState.NONE,
-                buyOrderState: { processState: AsyncProcessState.NONE },
+                buyOrderState: { processState: OrderProcessState.NONE },
                 selectedAssetAmount: undefined,
             };
         default:
diff --git a/packages/instant/src/types.ts b/packages/instant/src/types.ts
index c5521c63c..91453eac8 100644
--- a/packages/instant/src/types.ts
+++ b/packages/instant/src/types.ts
@@ -8,15 +8,23 @@ export enum AsyncProcessState {
     FAILURE = 'Failure',
 }
 
+export enum OrderProcessState {
+    NONE = 'None',
+    AWAITING_SIGNATURE = 'Awaiting Signature',
+    PROCESSING = 'Processing',
+    SUCCESS = 'Success',
+    FAILURE = 'Failure',
+}
+
 interface RegularOrderState {
-    processState: AsyncProcessState.NONE | AsyncProcessState.PENDING;
+    processState: OrderProcessState.NONE | OrderProcessState.AWAITING_SIGNATURE;
 }
 interface SuccessfulOrderState {
-    processState: AsyncProcessState.SUCCESS;
+    processState: OrderProcessState.SUCCESS;
     txnHash: string;
 }
 interface FailureOrderState {
-    processState: AsyncProcessState.FAILURE;
+    processState: OrderProcessState.FAILURE;
     txnHash?: string;
 }
 export type OrderState = RegularOrderState | SuccessfulOrderState | FailureOrderState;