diff options
Diffstat (limited to 'packages/instant/src')
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; } |