aboutsummaryrefslogtreecommitdiffstats
path: root/packages
diff options
context:
space:
mode:
Diffstat (limited to 'packages')
-rw-r--r--packages/instant/src/components/progress_bar.tsx17
-rw-r--r--packages/instant/src/components/zero_ex_instant_container.tsx3
-rw-r--r--packages/instant/src/containers/selected_asset_progress_bar.tsx37
-rw-r--r--packages/instant/src/redux/actions.ts3
-rw-r--r--packages/instant/src/redux/reducer.ts7
-rw-r--r--packages/instant/src/types.ts5
-rw-r--r--packages/instant/src/util/progress.ts16
7 files changed, 84 insertions, 4 deletions
diff --git a/packages/instant/src/components/progress_bar.tsx b/packages/instant/src/components/progress_bar.tsx
new file mode 100644
index 000000000..b89c56ed5
--- /dev/null
+++ b/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>
+);
diff --git a/packages/instant/src/components/zero_ex_instant_container.tsx b/packages/instant/src/components/zero_ex_instant_container.tsx
index ff19351ff..b9f8d0d92 100644
--- a/packages/instant/src/components/zero_ex_instant_container.tsx
+++ b/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 />
diff --git a/packages/instant/src/containers/selected_asset_progress_bar.tsx b/packages/instant/src/containers/selected_asset_progress_bar.tsx
new file mode 100644
index 000000000..886e223d3
--- /dev/null
+++ b/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);
diff --git a/packages/instant/src/redux/actions.ts b/packages/instant/src/redux/actions.ts
index bfae68e2b..59d059b59 100644
--- a/packages/instant/src/redux/actions.ts
+++ b/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),
diff --git a/packages/instant/src/redux/reducer.ts b/packages/instant/src/redux/reducer.ts
index dd9403052..be336f7c2 100644
--- a/packages/instant/src/redux/reducer.ts
+++ b/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,
diff --git a/packages/instant/src/types.ts b/packages/instant/src/types.ts
index 4631c9cae..722590165 100644
--- a/packages/instant/src/types.ts
+++ b/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;
diff --git a/packages/instant/src/util/progress.ts b/packages/instant/src/util/progress.ts
index 5cb6a6de9..08b813e3d 100644
--- a/packages/instant/src/util/progress.ts
+++ b/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;
+};
generated by cgit v1.2.3 (git 2.25.1) at 2024-11-15 12:57:25 +0800