Dispatching progress

packages/instant/src/components/progress_bar.tsx

@@ -0,0 +1,17 @@
+import * as React from 'react';
+
+import { ColorOption } from '../style/theme';
+
+import { Container } from './ui/container';
+import { Text } from './ui/text';
+
+export interface ProgressBarProps {
+    percentageDone: number;
+}
+export const ProgressBar: React.StatelessComponent<ProgressBarProps> = props => (
+    <Container width="100%" backgroundColor={ColorOption.white}>
+        <Container width={`${props.percentageDone}%`} backgroundColor={ColorOption.black}>
+            <Text fontColor={ColorOption.white}>{props.percentageDone}%</Text>
+        </Container>
+    </Container>
+);

packages/instant/src/components/zero_ex_instant_container.tsx

@@ -4,11 +4,11 @@ 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';
+import { SelectedAssetProgressBar } from '../containers/selected_asset_progress_bar';
 
 import { ColorOption } from '../style/theme';
 
 import { Container, Flex } from './ui';
-
 export interface ZeroExInstantContainerProps {}
 
 export const ZeroExInstantContainer: React.StatelessComponent<ZeroExInstantContainerProps> = props => (
@@ -25,6 +25,7 @@ export const ZeroExInstantContainer: React.StatelessComponent<ZeroExInstantConta
         >
             <Flex direction="column" justify="flex-start">
                 <SelectedAssetInstantHeading />
+                <SelectedAssetProgressBar />
                 <LatestBuyQuoteOrderDetails />
                 <Container padding="20px" width="100%">
                     <SelectedAssetBuyOrderStateButtons />

packages/instant/src/containers/selected_asset_progress_bar.tsx

@@ -0,0 +1,37 @@
+import * as React from 'react';
+
+import { connect } from 'react-redux';
+
+import { ProgressBar } from '../components/progress_bar';
+import { State } from '../redux/reducer';
+import { OrderProcessState, OrderState } from '../types';
+
+interface SelectedAssetProgressComponentProps {
+    buyOrderState: OrderState;
+    percentageDone?: number;
+}
+export const SelectedAssetProgressComponent: React.StatelessComponent<SelectedAssetProgressComponentProps> = props => {
+    const { buyOrderState, percentageDone } = props;
+
+    // TODO: uncomment after done testing
+    // const isOrderStateOk =
+    //     buyOrderState.processState === OrderProcessState.PROCESSING ||
+    //     buyOrderState.processState === OrderProcessState.SUCCESS;
+    const isOrderStateOk = true;
+
+    if (isOrderStateOk && percentageDone) {
+        return <ProgressBar percentageDone={percentageDone} />;
+    }
+
+    return null;
+};
+
+interface ConnectedState {
+    buyOrderState: OrderState;
+    percentageDone?: number;
+}
+const mapStateToProps = (state: State, _ownProps: {}): ConnectedState => ({
+    buyOrderState: state.buyOrderState,
+    percentageDone: state.orderProgress && state.orderProgress.percentageDone,
+});
+export const SelectedAssetProgressBar = connect(mapStateToProps)(SelectedAssetProgressComponent);

packages/instant/src/redux/actions.ts

@@ -28,6 +28,7 @@ export enum ActionTypes {
     UPDATE_BUY_ORDER_STATE = 'UPDATE_BUY_ORDER_STATE',
     UPDATE_LATEST_BUY_QUOTE = 'UPDATE_LATEST_BUY_QUOTE',
     UPDATE_SELECTED_ASSET = 'UPDATE_SELECTED_ASSET',
+    UPDATE_ORDER_PROGRESS_PERCENTAGE = 'UPDATE_ORDER_PROGRESS_PERCENTAGE',
     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',
@@ -43,6 +44,8 @@ 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),
+    updateOrderProgressPercentage: (percentDone: number) =>
+        createAction(ActionTypes.UPDATE_ORDER_PROGRESS_PERCENTAGE, percentDone),
     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),

packages/instant/src/redux/reducer.ts

@@ -12,6 +12,7 @@ import {
     DisplayStatus,
     Network,
     OrderProcessState,
+    OrderProgress,
     OrderState,
 } from '../types';
 import { assetUtils } from '../util/asset';
@@ -31,6 +32,7 @@ export interface State {
     quoteRequestState: AsyncProcessState;
     latestErrorMessage?: string;
     latestErrorDisplayStatus: DisplayStatus;
+    orderProgress?: OrderProgress;
 }
 
 export const INITIAL_STATE: State = {
@@ -119,6 +121,11 @@ export const reducer = (state: State = INITIAL_STATE, action: Action): State =>
                 ...state,
                 selectedAsset: newSelectedAsset,
             };
+        case ActionTypes.UPDATE_ORDER_PROGRESS_PERCENTAGE:
+            return {
+                ...state,
+                orderProgress: { percentageDone: action.data },
+            };
         case ActionTypes.RESET_AMOUNT:
             return {
                 ...state,

packages/instant/src/types.ts

@@ -16,12 +16,17 @@ export enum OrderProcessState {
     FAILURE = 'Failure',
 }
 
+export interface OrderProgress {
+    percentageDone: number;
+}
+
 interface OrderStatePreTx {
     processState: OrderProcessState.NONE | OrderProcessState.VALIDATING;
 }
 interface OrderStatePostTx {
     processState: OrderProcessState.PROCESSING | OrderProcessState.SUCCESS | OrderProcessState.FAILURE;
     txHash: string;
+    // TODO: move/rename?
     estimatedTimeMs?: number;
 }
 export type OrderState = OrderStatePreTx | OrderStatePostTx;

packages/instant/src/util/progress.ts

@@ -1,3 +1,4 @@
+// TODO: change filename?
 import * as _ from 'lodash';
 import { Dispatch } from 'redux';
 
@@ -26,19 +27,21 @@ interface TickingFinishingStatus {
 type TickingStatus = TickingNoneState | TickingRunningStatus | TickingFinishingStatus;
 
 const TICKS_PER_SECOND = 1000 / PROGRESS_TICK_INTERVAL_MS;
-export class Progress {
+class Progress {
     private _startTimeUnix?: number;
     private _expectedTimeMs?: number;
     private _intervalId?: number;
     private _percentageDone: number;
     private _tickingStatus: TickingStatus;
+    private _dispatcher: Dispatch<Action>;
 
-    constructor() {
+    constructor(dispatcher: Dispatch<Action>) {
         this._startTimeUnix = undefined;
         this._expectedTimeMs = undefined;
         this._percentageDone = 0;
         this._intervalId = undefined;
         this._tickingStatus = { state: TickingState.None };
+        this._dispatcher = dispatcher;
     }
 
     public beginRunning(expectedTimeMs: number): void {
@@ -66,8 +69,9 @@ export class Progress {
                 : this._getNewPercentageNormal();
 
         const maxPercentage = this._tickingStatus.state === TickingState.Finishing ? 100 : PROGRESS_STALL_AT_PERCENTAGE;
-        const percentageDone = Math.min(rawPercentageDone, maxPercentage);
+        const percentageDone = Math.floor(Math.min(rawPercentageDone, maxPercentage));
         this._percentageDone = percentageDone;
+        this._dispatcher(actions.updateOrderProgressPercentage(this._percentageDone));
         console.log('percentageDone', this._percentageDone);
         if (percentageDone >= 100) {
             this._clearTimer();
@@ -96,3 +100,9 @@ export class Progress {
         return this._percentageDone + finishingState.increasePercentageEveryTick;
     }
 }
+
+let _currentProgress: Progress | undefined;
+export const progress = (dispatcher: Dispatch<Action>): Progress => {
+    _currentProgress = _currentProgress || new Progress(dispatcher);
+    return _currentProgress;
+};