Use simulated progress bar for txn

6 files changed, 108 insertions, 45 deletions

diff --git a/packages/instant/src/components/buy_button.tsx b/packages/instant/src/components/buy_button.tsx
index ec1010fe9..d10936d05 100644
--- a/packages/instant/src/components/buy_button.tsx
+++ b/packages/instant/src/components/buy_button.tsx
@@ -19,9 +19,9 @@ export interface BuyButtonProps {
     onValidationPending: (buyQuote: BuyQuote) => void;
     onValidationFail: (buyQuote: BuyQuote, errorMessage: AssetBuyerError | ZeroExInstantError) => 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;
 }
 
 export class BuyButton extends React.Component<BuyButtonProps> {
@@ -73,16 +73,18 @@ export class BuyButton extends React.Component<BuyButtonProps> {
             throw e;
         }
 
-        this.props.onBuyProcessing(buyQuote, txHash, gasInfo.estimatedTimeMs);
+        const startTimeUnix = new Date().getTime();
+        const expectedEndTimeUnix = startTimeUnix + gasInfo.estimatedTimeMs;
+        this.props.onBuyProcessing(buyQuote, txHash, startTimeUnix, expectedEndTimeUnix);
         try {
             await web3Wrapper.awaitTransactionSuccessAsync(txHash);
         } catch (e) {
             if (e instanceof Error && e.message.startsWith(WEB_3_WRAPPER_TRANSACTION_FAILED_ERROR_MSG_PREFIX)) {
-                this.props.onBuyFailure(buyQuote, txHash);
+                this.props.onBuyFailure(buyQuote, txHash, startTimeUnix, expectedEndTimeUnix);
                 return;
             }
             throw e;
         }
-        this.props.onBuySuccess(buyQuote, txHash);
+        this.props.onBuySuccess(buyQuote, txHash, startTimeUnix, expectedEndTimeUnix);
     };
 }
diff --git a/packages/instant/src/components/buy_order_state_buttons.tsx b/packages/instant/src/components/buy_order_state_buttons.tsx
index d01e9ff57..6f197a772 100644
--- a/packages/instant/src/components/buy_order_state_buttons.tsx
+++ b/packages/instant/src/components/buy_order_state_buttons.tsx
@@ -6,6 +6,7 @@ import { SecondaryButton } from '../components/secondary_button';
 import { Flex } from '../components/ui/flex';
 
 import { PlacingOrderButton } from '../components/placing_order_button';
+import { SimulatedProgressBar } from '../components/simulated_progress_bar';
 import { ColorOption } from '../style/theme';
 import { OrderProcessState, ZeroExInstantError } from '../types';
 
@@ -20,10 +21,13 @@ export interface BuyOrderStateButtonProps {
     onValidationPending: (buyQuote: BuyQuote) => void;
     onValidationFail: (buyQuote: BuyQuote, errorMessage: AssetBuyerError | ZeroExInstantError) => void;
     onSignatureDenied: (buyQuote: BuyQuote) => void;
-    onBuyProcessing: (buyQuote: BuyQuote, txHash: string) => 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;
+
+    // TODO: dont commit!
+    secondaryProgressDemo: () => void;
 }
 
 // TODO: rename to buttons
@@ -50,16 +54,25 @@ export const BuyOrderStateButtons: React.StatelessComponent<BuyOrderStateButtonP
         return <PlacingOrderButton />;
     }
 
+    const curTime = new Date().getTime();
+    const expectedEndTime = curTime + 5000;
     return (
-        <BuyButton
-            buyQuote={props.buyQuote}
-            assetBuyer={props.assetBuyer}
-            onValidationPending={props.onValidationPending}
-            onValidationFail={props.onValidationFail}
-            onSignatureDenied={props.onSignatureDenied}
-            onBuyProcessing={props.onBuyProcessing}
-            onBuySuccess={props.onBuySuccess}
-            onBuyFailure={props.onBuyFailure}
-        />
+        <div>
+            {/* <div style={{ marginBottom: '20px' }}>
+                <SimulatedProgressBar startTimeUnix={curTime} expectedEndTimeUnix={expectedEndTime} ended={false} />
+            </div> */}
+
+            <SecondaryButton onClick={props.secondaryProgressDemo}>New progress bar demo</SecondaryButton>
+            <BuyButton
+                buyQuote={props.buyQuote}
+                assetBuyer={props.assetBuyer}
+                onValidationPending={props.onValidationPending}
+                onValidationFail={props.onValidationFail}
+                onSignatureDenied={props.onSignatureDenied}
+                onBuyProcessing={props.onBuyProcessing}
+                onBuySuccess={props.onBuySuccess}
+                onBuyFailure={props.onBuyFailure}
+            />
+        </div>
     );
 };
diff --git a/packages/instant/src/constants.ts b/packages/instant/src/constants.ts
index e099044df..12e592ae8 100644
--- a/packages/instant/src/constants.ts
+++ b/packages/instant/src/constants.ts
@@ -5,6 +5,7 @@ export const DEFAULT_ZERO_EX_CONTAINER_SELECTOR = '#zeroExInstantContainer';
 export const WEB_3_WRAPPER_TRANSACTION_FAILED_ERROR_MSG_PREFIX = 'Transaction failed';
 export const GWEI_IN_WEI = new BigNumber(1000000000);
 export const DEFAULT_GAS_PRICE = GWEI_IN_WEI.mul(6);
+export const DEFAULT_ESTIMATED_TRANSACTION_TIME_MS = 2 * 60 * 1000; // 2 minutes
 export const ETH_GAS_STATION_API_BASE_URL = 'https://ethgasstation.info';
 export const COINBASE_API_BASE_URL = 'https://api.coinbase.com/v2';
 export const PROGRESS_TICK_INTERVAL_MS = 100;
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}
             />
         );
     }
diff --git a/packages/instant/src/types.ts b/packages/instant/src/types.ts
index 58d6692e4..34893676d 100644
--- a/packages/instant/src/types.ts
+++ b/packages/instant/src/types.ts
@@ -28,8 +28,7 @@ interface OrderStatePreTx {
 interface OrderStatePostTx {
     processState: OrderProcessState.PROCESSING | OrderProcessState.SUCCESS | OrderProcessState.FAILURE;
     txHash: string;
-    // TODO: move/rename?
-    estimatedTimeMs?: number;
+    progress: SimulatedProgress;
 }
 export type OrderState = OrderStatePreTx | OrderStatePostTx;