Use simulated progress bar for txn

2 files changed, 72 insertions, 24 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(
diff --git a/packages/instant/src/containers/selected_asset_simulated_progress_bar.tsx b/packages/instant/src/containers/selected_asset_simulated_progress_bar.tsx
index 1ddb4ae66..adb5daad8 100644
--- a/packages/instant/src/containers/selected_asset_simulated_progress_bar.tsx
+++ b/packages/instant/src/containers/selected_asset_simulated_progress_bar.tsx
@@ -9,27 +9,23 @@ import { OrderProcessState, OrderState, SimulatedProgress } from '../types';
 
 interface SelectedAssetProgressComponentProps {
     buyOrderState: OrderState;
-    simulatedProgress?: SimulatedProgress;
 }
 export const SelectedAssetSimulatedProgressComponent: React.StatelessComponent<
     SelectedAssetProgressComponentProps
 > = props => {
-    const { buyOrderState, simulatedProgress } = props;
-
-    console.log('simulatedProgress', simulatedProgress);
-
-    // TODO: uncomment after done testing
-    // const isOrderStateOk =
-    //     buyOrderState.processState === OrderProcessState.PROCESSING ||
-    //     buyOrderState.processState === OrderProcessState.SUCCESS;
-    const isOrderStateOk = true;
-
-    if (isOrderStateOk && simulatedProgress) {
+    const { buyOrderState } = props;
+
+    if (
+        buyOrderState.processState === OrderProcessState.PROCESSING ||
+        buyOrderState.processState === OrderProcessState.SUCCESS ||
+        buyOrderState.processState === OrderProcessState.FAILURE
+    ) {
+        const progress = buyOrderState.progress;
         return (
             <SimulatedProgressBar
-                startTimeUnix={simulatedProgress.startTimeUnix}
-                expectedEndTimeUnix={simulatedProgress.expectedEndTimeUnix}
-                ended={simulatedProgress.ended}
+                startTimeUnix={progress.startTimeUnix}
+                expectedEndTimeUnix={progress.expectedEndTimeUnix}
+                ended={progress.ended}
             />
         );
     }