feat(instant): Be able to view transaction when transaction is in progress

3 files changed, 13 insertions, 4 deletions

diff --git a/packages/instant/src/components/buy_order_state_button.tsx b/packages/instant/src/components/buy_order_state_button.tsx
index b5b21fd1e..44115e5a1 100644
--- a/packages/instant/src/components/buy_order_state_button.tsx
+++ b/packages/instant/src/components/buy_order_state_button.tsx
@@ -13,12 +13,12 @@ export interface BuyOrderStateButtonProps {
 export const BuyOrderStateButton: React.StatelessComponent<BuyOrderStateButtonProps> = props => {
     if (props.buyOrderProcessingState === OrderProcessState.FAILURE) {
         return <SelectedAssetRetryButton />;
-    } else if (props.buyOrderProcessingState === OrderProcessState.SUCCESS) {
-        return <SelectedAssetViewTransactionButton />;
     } else if (
-        props.buyOrderProcessingState === OrderProcessState.AWAITING_SIGNATURE ||
+        props.buyOrderProcessingState === OrderProcessState.SUCCESS ||
         props.buyOrderProcessingState === OrderProcessState.PROCESSING
     ) {
+        return <SelectedAssetViewTransactionButton />;
+    } else if (props.buyOrderProcessingState === OrderProcessState.AWAITING_SIGNATURE) {
         return <PlacingOrderButton />;
     }
 
diff --git a/packages/instant/src/components/instant_heading.tsx b/packages/instant/src/components/instant_heading.tsx
index 37d87580d..17ac65429 100644
--- a/packages/instant/src/components/instant_heading.tsx
+++ b/packages/instant/src/components/instant_heading.tsx
@@ -10,6 +10,7 @@ import { format } from '../util/format';
 import { AmountPlaceholder } from './amount_placeholder';
 import { Container, Flex, Text } from './ui';
 import { Icon } from './ui/icon';
+import { Spinner } from './ui/spinner';
 
 export interface InstantHeadingProps {
     selectedAssetAmount?: BigNumber;
@@ -70,6 +71,8 @@ export class InstantHeading extends React.Component<InstantHeadingProps, {}> {
 
         if (processState === OrderProcessState.FAILURE) {
             return <Icon icon={'failed'} width={ICON_WIDTH} height={ICON_HEIGHT} color={ICON_COLOR} />;
+        } else if (processState === OrderProcessState.PROCESSING) {
+            return <Spinner widthPx={ICON_HEIGHT} heightPx={ICON_HEIGHT} />;
         } else if (processState === OrderProcessState.SUCCESS) {
             return <Icon icon={'success'} width={ICON_WIDTH} height={ICON_HEIGHT} color={ICON_COLOR} />;
         }
@@ -80,6 +83,8 @@ export class InstantHeading extends React.Component<InstantHeadingProps, {}> {
         const processState = this.props.buyOrderState.processState;
         if (processState === OrderProcessState.FAILURE) {
             return 'Order failed';
+        } else if (processState === OrderProcessState.PROCESSING) {
+            return 'Processing Order...';
         } else if (processState === OrderProcessState.SUCCESS) {
             return 'Tokens received!';
         }
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 1f9bfd7a6..91e959246 100644
--- a/packages/instant/src/containers/selected_asset_view_transaction_button.tsx
+++ b/packages/instant/src/containers/selected_asset_view_transaction_button.tsx
@@ -16,7 +16,11 @@ interface ConnectedState {
 
 const mapStateToProps = (state: State, _ownProps: {}): ConnectedState => ({
     onClick: () => {
-        if (state.assetBuyer && state.buyOrderState.processState === OrderProcessState.SUCCESS) {
+        if (
+            state.assetBuyer &&
+            (state.buyOrderState.processState === OrderProcessState.PROCESSING ||
+                state.buyOrderState.processState === OrderProcessState.SUCCESS)
+        ) {
             const etherscanUrl = etherscanUtil.getEtherScanTxnAddressIfExists(
                 state.buyOrderState.txnHash,
                 state.assetBuyer.networkId,