3 files changed, 28 insertions, 12 deletions
diff --git a/packages/instant/src/components/buy_button.tsx b/packages/instant/src/components/buy_button.tsx
index 0d35d36ca..f70f2f5be 100644
--- a/packages/instant/src/components/buy_button.tsx
+++ b/packages/instant/src/components/buy_button.tsx
@@ -11,7 +11,8 @@ import { Button, Text } from './ui';
 export interface BuyButtonProps {
     buyQuote?: BuyQuote;
     assetBuyer?: AssetBuyer;
-    onClick: (buyQuote: BuyQuote) => void;
+    onAwaitingSignature: (buyQuote: BuyQuote) => void;
+    onProcessingTransaction: (buyQuote: BuyQuote, txnHash: string) => void;
     onBuySuccess: (buyQuote: BuyQuote, txnHash: string) => void;
     onBuyFailure: (buyQuote: BuyQuote, tnxHash?: string) => void;
     onBuyPrevented: (buyQuote: BuyQuote, preventedError: Error) => void;
@@ -35,21 +36,23 @@ export class BuyButton extends React.Component<BuyButtonProps> {
     }
     private readonly _handleClick = async () => {
         // The button is disabled when there is no buy quote anyway.
-        if (_.isUndefined(this.props.buyQuote) || _.isUndefined(this.props.assetBuyer)) {
+        const { buyQuote, assetBuyer } = this.props;
+        if (_.isUndefined(buyQuote) || _.isUndefined(assetBuyer)) {
             return;
         }
-        this.props.onClick(this.props.buyQuote);
+        this.props.onAwaitingSignature(buyQuote);
         let txnHash;
         try {
-            txnHash = await this.props.assetBuyer.executeBuyQuoteAsync(this.props.buyQuote);
-            const txnReceipt = await web3Wrapper.awaitTransactionSuccessAsync(txnHash);
-            this.props.onBuySuccess(this.props.buyQuote, txnReceipt.transactionHash);
+            txnHash = await assetBuyer.executeBuyQuoteAsync(buyQuote);
+            this.props.onProcessingTransaction(buyQuote, txnHash);
+            await web3Wrapper.awaitTransactionSuccessAsync(txnHash);
+            this.props.onBuySuccess(buyQuote, txnHash);
         } catch (e) {
             if (e instanceof Error && e.message === AssetBuyerError.SignatureRequestDenied) {
-                this.props.onBuyPrevented(this.props.buyQuote, e);
+                this.props.onBuyPrevented(buyQuote, e);
                 return;
             }
-            this.props.onBuyFailure(this.props.buyQuote, txnHash);
+            this.props.onBuyFailure(buyQuote, txnHash);
         }
     };
 }
diff --git a/packages/instant/src/containers/selected_asset_buy_button.ts b/packages/instant/src/containers/selected_asset_buy_button.ts
index 1d8b3b4bd..f55254daf 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, OrderProcessState } from '../types';
+import { OrderProcessState, OrderState } from '../types';
 
 import { BuyButton } from '../components/buy_button';
 
@@ -18,7 +18,8 @@ interface ConnectedState {
 }
 
 interface ConnectedDispatch {
-    onClick: (buyQuote: BuyQuote) => void;
+    onAwaitingSignature: (buyQuote: BuyQuote) => void;
+    onProcessingTransaction: (buyQuote: BuyQuote, txnHash: string) => void;
     onBuySuccess: (buyQuote: BuyQuote, txnHash: string) => void;
     onBuyFailure: (buyQuote: BuyQuote) => void;
     onBuyPrevented: (buyQuote: BuyQuote, error: Error) => void;
@@ -30,7 +31,14 @@ const mapStateToProps = (state: State, _ownProps: SelectedAssetBuyButtonProps):
 });
 
 const mapDispatchToProps = (dispatch: Dispatch<Action>, ownProps: SelectedAssetBuyButtonProps): ConnectedDispatch => ({
-    onClick: buyQuote => dispatch(actions.updateBuyOrderState({ processState: OrderProcessState.AWAITING_SIGNATURE })),
+    onAwaitingSignature: (buyQuote: BuyQuote) => {
+        const newOrderState: OrderState = { processState: OrderProcessState.AWAITING_SIGNATURE };
+        dispatch(actions.updateBuyOrderState(newOrderState));
+    },
+    onProcessingTransaction: (buyQuote: BuyQuote, txnHash: string) => {
+        const newOrderState: OrderState = { processState: OrderProcessState.PROCESSING, txnHash };
+        dispatch(actions.updateBuyOrderState(newOrderState));
+    },
     onBuySuccess: (buyQuote: BuyQuote, txnHash: string) =>
         dispatch(actions.updateBuyOrderState({ processState: OrderProcessState.SUCCESS, txnHash })),
     onBuyFailure: buyQuote => dispatch(actions.updateBuyOrderState({ processState: OrderProcessState.FAILURE })),
diff --git a/packages/instant/src/types.ts b/packages/instant/src/types.ts
index 91453eac8..47c60016c 100644
--- a/packages/instant/src/types.ts
+++ b/packages/instant/src/types.ts
@@ -19,6 +19,11 @@ export enum OrderProcessState {
 interface RegularOrderState {
     processState: OrderProcessState.NONE | OrderProcessState.AWAITING_SIGNATURE;
 }
+// TODO: later turn into just a generic OrderStateWithTxn
+interface ProcessingOrderState {
+    processState: OrderProcessState.PROCESSING;
+    txnHash: string;
+}
 interface SuccessfulOrderState {
     processState: OrderProcessState.SUCCESS;
     txnHash: string;
@@ -27,7 +32,7 @@ interface FailureOrderState {
     processState: OrderProcessState.FAILURE;
     txnHash?: string;
 }
-export type OrderState = RegularOrderState | SuccessfulOrderState | FailureOrderState;
+export type OrderState = RegularOrderState | ProcessingOrderState | SuccessfulOrderState | FailureOrderState;
 
 export enum DisplayStatus {
     Present,