Simulated Progress component working

6 files changed, 102 insertions, 6 deletions

diff --git a/packages/instant/src/components/simulated_progress_bar.tsx b/packages/instant/src/components/simulated_progress_bar.tsx
index 3a957aca6..1fd76ead7 100644
--- a/packages/instant/src/components/simulated_progress_bar.tsx
+++ b/packages/instant/src/components/simulated_progress_bar.tsx
@@ -23,9 +23,9 @@ export interface SimulatedProgressBarProps {
     ended: boolean;
 }
 enum TickingRunState {
-    None,
-    Running,
-    Finishing,
+    None = 'None',
+    Running = 'Running',
+    Finishing = 'Finishing',
 }
 interface TickingNoneStatus {
     runState: TickingRunState.None;
@@ -53,6 +53,7 @@ export class SimulatedProgressBar extends React.Component<SimulatedProgressBarPr
             throw new Error('End time before start time');
         }
 
+        // TODO: use getFreshState here
         const intervalId = window.setInterval(this._tick.bind(this), PROGRESS_TICK_INTERVAL_MS);
         this.state = {
             percentageDone: 0,
@@ -65,6 +66,7 @@ export class SimulatedProgressBar extends React.Component<SimulatedProgressBarPr
         const percentLeft = 100 - this.state.percentageDone;
         const increasePercentageEveryTick = percentLeft / TICKS_PER_SECOND;
 
+        // if we just switched to ending, having animate to end
         if (prevProps.ended === false && this.props.ended === true) {
             this.setState({
                 tickingStatus: {
@@ -72,10 +74,23 @@ export class SimulatedProgressBar extends React.Component<SimulatedProgressBarPr
                     increasePercentageEveryTick,
                 },
             });
+            return;
+        }
+
+        // later TODO: the new state could be for the wrong order, attach to order state or add concurrency checking
+
+        // if anything else changes, reset internal state
+        if (
+            prevProps.startTimeUnix !== this.props.startTimeUnix ||
+            prevProps.expectedEndTimeUnix !== this.props.expectedEndTimeUnix ||
+            prevProps.ended !== this.props.ended
+        ) {
+            this.setState(this._getFreshState());
         }
     }
 
     public componentWillUnmount(): void {
+        console.log('unmount');
         this._clearTimer();
     }
 
@@ -95,15 +110,24 @@ export class SimulatedProgressBar extends React.Component<SimulatedProgressBarPr
         );
     }
 
+    private _getFreshState(): SimulatedProgressState {
+        this._clearTimer();
+        const intervalId = window.setInterval(this._tick.bind(this), PROGRESS_TICK_INTERVAL_MS);
+        return {
+            percentageDone: 0,
+            intervalId,
+            tickingStatus: { runState: TickingRunState.Running },
+        };
+    }
+
     private _tick(): void {
         const rawPercentageDone =
             this.state.tickingStatus.runState === TickingRunState.Finishing
                 ? this._getNewPercentageFinishing(this.state.tickingStatus)
                 : this._getNewPercentageNormal();
-
         const maxPercentage =
             this.state.tickingStatus.runState === TickingRunState.Finishing ? 100 : PROGRESS_STALL_AT_PERCENTAGE;
-        const percentageDone = Math.floor(Math.min(rawPercentageDone, maxPercentage));
+        const percentageDone = Math.min(rawPercentageDone, maxPercentage);
 
         this.setState({
             percentageDone,
diff --git a/packages/instant/src/components/zero_ex_instant_container.tsx b/packages/instant/src/components/zero_ex_instant_container.tsx
index b9f8d0d92..ae315da47 100644
--- a/packages/instant/src/components/zero_ex_instant_container.tsx
+++ b/packages/instant/src/components/zero_ex_instant_container.tsx
@@ -4,7 +4,10 @@ import { LatestBuyQuoteOrderDetails } from '../containers/latest_buy_quote_order
 import { LatestError } from '../containers/latest_error';
 import { SelectedAssetBuyOrderStateButtons } from '../containers/selected_asset_buy_order_state_buttons';
 import { SelectedAssetInstantHeading } from '../containers/selected_asset_instant_heading';
+
+// TODO: delete this import and this actual file
 import { SelectedAssetProgressBar } from '../containers/selected_asset_progress_bar';
+import { SelectedAssetSimulatedProgressBar } from '../containers/selected_asset_simulated_progress_bar';
 
 import { ColorOption } from '../style/theme';
 
@@ -25,6 +28,7 @@ export const ZeroExInstantContainer: React.StatelessComponent<ZeroExInstantConta
         >
             <Flex direction="column" justify="flex-start">
                 <SelectedAssetInstantHeading />
+                <SelectedAssetSimulatedProgressBar />
                 <SelectedAssetProgressBar />
                 <LatestBuyQuoteOrderDetails />
                 <Container padding="20px" width="100%">
diff --git a/packages/instant/src/containers/selected_asset_simulated_progress_bar.tsx b/packages/instant/src/containers/selected_asset_simulated_progress_bar.tsx
new file mode 100644
index 000000000..1ddb4ae66
--- /dev/null
+++ b/packages/instant/src/containers/selected_asset_simulated_progress_bar.tsx
@@ -0,0 +1,48 @@
+import * as React from 'react';
+
+import { connect } from 'react-redux';
+
+import { SimulatedProgressBar } from '../components/simulated_progress_bar';
+
+import { State } from '../redux/reducer';
+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) {
+        return (
+            <SimulatedProgressBar
+                startTimeUnix={simulatedProgress.startTimeUnix}
+                expectedEndTimeUnix={simulatedProgress.expectedEndTimeUnix}
+                ended={simulatedProgress.ended}
+            />
+        );
+    }
+
+    return null;
+};
+
+interface ConnectedState {
+    buyOrderState: OrderState;
+    simulatedProgress?: SimulatedProgress;
+}
+const mapStateToProps = (state: State, _ownProps: {}): ConnectedState => ({
+    buyOrderState: state.buyOrderState,
+    simulatedProgress: state.simulatedProgress,
+});
+export const SelectedAssetSimulatedProgressBar = connect(mapStateToProps)(SelectedAssetSimulatedProgressComponent);
diff --git a/packages/instant/src/redux/actions.ts b/packages/instant/src/redux/actions.ts
index 59d059b59..e8002aa3b 100644
--- a/packages/instant/src/redux/actions.ts
+++ b/packages/instant/src/redux/actions.ts
@@ -4,7 +4,7 @@ import * as _ from 'lodash';
 
 import { BigNumberInput } from '../util/big_number_input';
 
-import { ActionsUnion, OrderState } from '../types';
+import { ActionsUnion, OrderState, SimulatedProgress } from '../types';
 
 export interface PlainAction<T extends string> {
     type: T;
@@ -29,6 +29,7 @@ export enum ActionTypes {
     UPDATE_LATEST_BUY_QUOTE = 'UPDATE_LATEST_BUY_QUOTE',
     UPDATE_SELECTED_ASSET = 'UPDATE_SELECTED_ASSET',
     UPDATE_ORDER_PROGRESS_PERCENTAGE = 'UPDATE_ORDER_PROGRESS_PERCENTAGE',
+    UPDATE_SIMULATED_ORDER_PROGRESS = 'UPDATE_SIMULATED_ORDER_PROGRESS',
     SET_QUOTE_REQUEST_STATE_PENDING = 'SET_QUOTE_REQUEST_STATE_PENDING',
     SET_QUOTE_REQUEST_STATE_FAILURE = 'SET_QUOTE_REQUEST_STATE_FAILURE',
     SET_ERROR_MESSAGE = 'SET_ERROR_MESSAGE',
@@ -44,8 +45,11 @@ export const actions = {
     updateBuyOrderState: (orderState: OrderState) => createAction(ActionTypes.UPDATE_BUY_ORDER_STATE, orderState),
     updateLatestBuyQuote: (buyQuote?: BuyQuote) => createAction(ActionTypes.UPDATE_LATEST_BUY_QUOTE, buyQuote),
     updateSelectedAsset: (assetData?: string) => createAction(ActionTypes.UPDATE_SELECTED_ASSET, assetData),
+    // TODO: this is old, delete
     updateOrderProgressPercentage: (percentDone: number) =>
         createAction(ActionTypes.UPDATE_ORDER_PROGRESS_PERCENTAGE, percentDone),
+    updateSimulatedOrderProgress: (orderProgress: SimulatedProgress) =>
+        createAction(ActionTypes.UPDATE_SIMULATED_ORDER_PROGRESS, orderProgress),
     setQuoteRequestStatePending: () => createAction(ActionTypes.SET_QUOTE_REQUEST_STATE_PENDING),
     setQuoteRequestStateFailure: () => createAction(ActionTypes.SET_QUOTE_REQUEST_STATE_FAILURE),
     setErrorMessage: (errorMessage: string) => createAction(ActionTypes.SET_ERROR_MESSAGE, errorMessage),
diff --git a/packages/instant/src/redux/reducer.ts b/packages/instant/src/redux/reducer.ts
index be336f7c2..428cf0984 100644
--- a/packages/instant/src/redux/reducer.ts
+++ b/packages/instant/src/redux/reducer.ts
@@ -14,6 +14,7 @@ import {
     OrderProcessState,
     OrderProgress,
     OrderState,
+    SimulatedProgress,
 } from '../types';
 import { assetUtils } from '../util/asset';
 import { BigNumberInput } from '../util/big_number_input';
@@ -32,7 +33,9 @@ export interface State {
     quoteRequestState: AsyncProcessState;
     latestErrorMessage?: string;
     latestErrorDisplayStatus: DisplayStatus;
+    // TODO: this is old, cleanup
     orderProgress?: OrderProgress;
+    simulatedProgress?: SimulatedProgress;
 }
 
 export const INITIAL_STATE: State = {
@@ -121,11 +124,17 @@ export const reducer = (state: State = INITIAL_STATE, action: Action): State =>
                 ...state,
                 selectedAsset: newSelectedAsset,
             };
+        // TODO: this is old, delete
         case ActionTypes.UPDATE_ORDER_PROGRESS_PERCENTAGE:
             return {
                 ...state,
                 orderProgress: { percentageDone: action.data },
             };
+        case ActionTypes.UPDATE_SIMULATED_ORDER_PROGRESS:
+            return {
+                ...state,
+                simulatedProgress: action.data,
+            };
         case ActionTypes.RESET_AMOUNT:
             return {
                 ...state,
diff --git a/packages/instant/src/types.ts b/packages/instant/src/types.ts
index 722590165..4b63abdda 100644
--- a/packages/instant/src/types.ts
+++ b/packages/instant/src/types.ts
@@ -16,10 +16,17 @@ export enum OrderProcessState {
     FAILURE = 'Failure',
 }
 
+// TODO: this is old, delete
 export interface OrderProgress {
     percentageDone: number;
 }
 
+export interface SimulatedProgress {
+    startTimeUnix: number;
+    expectedEndTimeUnix: number;
+    ended: boolean;
+}
+
 interface OrderStatePreTx {
     processState: OrderProcessState.NONE | OrderProcessState.VALIDATING;
 }