aboutsummaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
authorSteve Klebanoff <steve.klebanoff@gmail.com>2018-10-31 06:39:58 +0800
committerSteve Klebanoff <steve.klebanoff@gmail.com>2018-10-31 06:39:58 +0800
commitabaa39a5e24daa8a1a7ff5617a14d2f3088cb0e3 (patch)
treeb40d6f01f0df15f9be5d74fc54999abdab3b7db3
parent05f059492bbc86d61946562ac8c116259ded3487 (diff)
downloaddexon-sol-tools-abaa39a5e24daa8a1a7ff5617a14d2f3088cb0e3.tar.gz
dexon-sol-tools-abaa39a5e24daa8a1a7ff5617a14d2f3088cb0e3.tar.zst
dexon-sol-tools-abaa39a5e24daa8a1a7ff5617a14d2f3088cb0e3.zip
Simulated Progress component working
-rw-r--r--packages/instant/src/components/simulated_progress_bar.tsx34
-rw-r--r--packages/instant/src/components/zero_ex_instant_container.tsx4
-rw-r--r--packages/instant/src/containers/selected_asset_simulated_progress_bar.tsx48
-rw-r--r--packages/instant/src/redux/actions.ts6
-rw-r--r--packages/instant/src/redux/reducer.ts9
-rw-r--r--packages/instant/src/types.ts7
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;
}