Use simulated progress bar for txn

1 files changed, 61 insertions, 9 deletions

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 3750e5219..5cfd1ff6c 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
@@ -21,11 +21,12 @@ interface ConnectedState {
 interface ConnectedDispatch {
     onValidationPending: (buyQuote: BuyQuote) => void;
     onSignatureDenied: (buyQuote: BuyQuote) => void;
-    onBuyProcessing: (buyQuote: BuyQuote, txHash: string, estimatedTimeMs?: number) => void;
-    onBuySuccess: (buyQuote: BuyQuote, txHash: string) => void;
-    onBuyFailure: (buyQuote: BuyQuote, txHash: string) => 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;
     onRetry: () => void;
     onValidationFail: (buyQuote: BuyQuote, errorMessage: AssetBuyerError | ZeroExInstantError) => void;
+    secondaryProgressDemo: () => void;
 }
 export interface SelectedAssetBuyOrderStateButtons {}
 const mapStateToProps = (state: State, _ownProps: SelectedAssetBuyOrderStateButtons): ConnectedState => ({
@@ -59,14 +60,42 @@ const mapDispatchToProps = (
         const newOrderState: OrderState = { processState: OrderProcessState.VALIDATING };
         dispatch(actions.updateBuyOrderState(newOrderState));
     },
-    onBuyProcessing: (buyQuote: BuyQuote, txHash: string, estimatedTimeMs?: number) => {
-        const newOrderState: OrderState = { processState: OrderProcessState.PROCESSING, txHash, estimatedTimeMs };
+    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));
     },
-    onBuySuccess: (buyQuote: BuyQuote, txHash: string) =>
-        dispatch(actions.updateBuyOrderState({ processState: OrderProcessState.SUCCESS, txHash })),
-    onBuyFailure: (buyQuote: BuyQuote, txHash: string) =>
-        dispatch(actions.updateBuyOrderState({ processState: OrderProcessState.FAILURE, txHash })),
+    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,
+                },
+            }),
+        ),
     onSignatureDenied: () => {
         dispatch(actions.resetAmount());
         const errorMessage = 'You denied this transaction';
@@ -84,6 +113,29 @@ const mapDispatchToProps = (
     onRetry: () => {
         dispatch(actions.resetAmount());
     },
+    secondaryProgressDemo: () => {
+        const nowTime = new Date().getTime();
+        const futureTime = nowTime + 5000;
+        dispatch(
+            actions.updateSimulatedOrderProgress({
+                startTimeUnix: nowTime,
+                expectedEndTimeUnix: futureTime,
+                ended: false,
+            }),
+        );
+
+        window.setTimeout(() => {
+            console.log('simulate finishing');
+
+            dispatch(
+                actions.updateSimulatedOrderProgress({
+                    startTimeUnix: nowTime,
+                    expectedEndTimeUnix: futureTime,
+                    ended: true,
+                }),
+            );
+        }, 2000);
+    },
 });
 
 export const SelectedAssetBuyOrderStateButtons: React.ComponentClass<SelectedAssetBuyOrderStateButtons> = connect(