Merge pull request #1179 from 0xProject/feature/instant/processing-state

[instant] Success and Processing state

5 files changed, 44 insertions, 9 deletions

diff --git a/packages/instant/src/containers/selected_asset_amount_input.ts b/packages/instant/src/containers/selected_asset_amount_input.ts
index 0d847cf02..f23b2010e 100644
--- a/packages/instant/src/containers/selected_asset_amount_input.ts
+++ b/packages/instant/src/containers/selected_asset_amount_input.ts
@@ -90,7 +90,7 @@ const mapDispatchToProps = (
         // invalidate the last buy quote.
         dispatch(actions.updateLatestBuyQuote(undefined));
         // reset our buy state
-        dispatch(actions.updateBuyOrderState(AsyncProcessState.NONE));
+        dispatch(actions.updateBuyOrderState({ processState: AsyncProcessState.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 208bb2582..71d2b8cf0 100644
--- a/packages/instant/src/containers/selected_asset_buy_button.ts
+++ b/packages/instant/src/containers/selected_asset_buy_button.ts
@@ -19,7 +19,7 @@ interface ConnectedState {
 
 interface ConnectedDispatch {
     onClick: (buyQuote: BuyQuote) => void;
-    onBuySuccess: (buyQuote: BuyQuote) => void;
+    onBuySuccess: (buyQuote: BuyQuote, txnHash: string) => void;
     onBuyFailure: (buyQuote: BuyQuote) => void;
 }
 
@@ -29,9 +29,10 @@ const mapStateToProps = (state: State, _ownProps: SelectedAssetBuyButtonProps):
 });
 
 const mapDispatchToProps = (dispatch: Dispatch<Action>, ownProps: SelectedAssetBuyButtonProps): ConnectedDispatch => ({
-    onClick: buyQuote => dispatch(actions.updateBuyOrderState(AsyncProcessState.PENDING)),
-    onBuySuccess: buyQuote => dispatch(actions.updateBuyOrderState(AsyncProcessState.SUCCESS)),
-    onBuyFailure: buyQuote => dispatch(actions.updateBuyOrderState(AsyncProcessState.FAILURE)),
+    onClick: buyQuote => dispatch(actions.updateBuyOrderState({ processState: AsyncProcessState.PENDING })),
+    onBuySuccess: (buyQuote: BuyQuote, txnHash: string) =>
+        dispatch(actions.updateBuyOrderState({ processState: AsyncProcessState.SUCCESS, txnHash })),
+    onBuyFailure: buyQuote => dispatch(actions.updateBuyOrderState({ processState: AsyncProcessState.FAILURE })),
 });
 
 export const SelectedAssetBuyButton: React.ComponentClass<SelectedAssetBuyButtonProps> = connect(
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 3b7fc0054..f3efbb5d2 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
@@ -8,11 +8,11 @@ import { AsyncProcessState } from '../types';
 import { BuyOrderStateButton } from '../components/buy_order_state_button';
 
 interface ConnectedState {
-    buyOrderState: AsyncProcessState;
+    buyOrderProcessingState: AsyncProcessState;
 }
 export interface SelectedAssetButtonProps {}
 const mapStateToProps = (state: State, _ownProps: SelectedAssetButtonProps): ConnectedState => ({
-    buyOrderState: state.buyOrderState,
+    buyOrderProcessingState: state.buyOrderState.processState,
 });
 
 export const SelectedAssetBuyOrderStateButton: React.ComponentClass<SelectedAssetButtonProps> = connect(
diff --git a/packages/instant/src/containers/selected_asset_instant_heading.ts b/packages/instant/src/containers/selected_asset_instant_heading.ts
index 24efed32e..6b2a29b07 100644
--- a/packages/instant/src/containers/selected_asset_instant_heading.ts
+++ b/packages/instant/src/containers/selected_asset_instant_heading.ts
@@ -5,7 +5,7 @@ import { connect } from 'react-redux';
 import { oc } from 'ts-optchain';
 
 import { State } from '../redux/reducer';
-import { AsyncProcessState } from '../types';
+import { AsyncProcessState, OrderState } from '../types';
 
 import { InstantHeading } from '../components/instant_heading';
 
@@ -16,7 +16,7 @@ interface ConnectedState {
     totalEthBaseAmount?: BigNumber;
     ethUsdPrice?: BigNumber;
     quoteRequestState: AsyncProcessState;
-    buyOrderState: AsyncProcessState;
+    buyOrderState: OrderState;
 }
 
 const mapStateToProps = (state: State, _ownProps: InstantHeadingProps): 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
new file mode 100644
index 000000000..6f42b9f85
--- /dev/null
+++ b/packages/instant/src/containers/selected_asset_view_transaction_button.tsx
@@ -0,0 +1,34 @@
+import * as _ from 'lodash';
+import * as React from 'react';
+import { connect } from 'react-redux';
+
+import { State } from '../redux/reducer';
+
+import { ViewTransactionButton } from '../components/view_transaction_button';
+import { AsyncProcessState } from '../types';
+import { etherscanUtil } from '../util/etherscan';
+
+export interface SelectedAssetViewTransactionButtonProps {}
+
+interface ConnectedState {
+    onClick: () => void;
+}
+
+const mapStateToProps = (state: State, _ownProps: {}): ConnectedState => ({
+    onClick: () => {
+        if (state.assetBuyer && state.buyOrderState.processState === AsyncProcessState.SUCCESS) {
+            const etherscanUrl = etherscanUtil.getEtherScanTxnAddressIfExists(
+                state.buyOrderState.txnHash,
+                state.assetBuyer.networkId,
+            );
+            if (etherscanUrl) {
+                window.open(etherscanUrl, '_blank');
+                return;
+            }
+        }
+    },
+});
+
+export const SelectedAssetViewTransactionButton: React.ComponentClass<
+    SelectedAssetViewTransactionButtonProps
+> = connect(mapStateToProps)(ViewTransactionButton);