aboutsummaryrefslogtreecommitdiffstats
path: root/packages/instant
diff options
context:
space:
mode:
authorSteve Klebanoff <steve.klebanoff@gmail.com>2018-10-31 07:40:51 +0800
committerSteve Klebanoff <steve.klebanoff@gmail.com>2018-10-31 07:40:51 +0800
commit1c0569cfc61d7b166d79d2d73e9bbc6d11a5b4e8 (patch)
treef777e047a103bcd124cf28a3ce2be30167f8a104 /packages/instant
parent9cc82308e504a62a2bd3b16e79173a98279fdb66 (diff)
downloaddexon-sol-tools-1c0569cfc61d7b166d79d2d73e9bbc6d11a5b4e8.tar
dexon-sol-tools-1c0569cfc61d7b166d79d2d73e9bbc6d11a5b4e8.tar.gz
dexon-sol-tools-1c0569cfc61d7b166d79d2d73e9bbc6d11a5b4e8.tar.bz2
dexon-sol-tools-1c0569cfc61d7b166d79d2d73e9bbc6d11a5b4e8.tar.lz
dexon-sol-tools-1c0569cfc61d7b166d79d2d73e9bbc6d11a5b4e8.tar.xz
dexon-sol-tools-1c0569cfc61d7b166d79d2d73e9bbc6d11a5b4e8.tar.zst
dexon-sol-tools-1c0569cfc61d7b166d79d2d73e9bbc6d11a5b4e8.zip
Use simulated progress bar for txn
Diffstat (limited to 'packages/instant')
-rw-r--r--packages/instant/src/components/buy_button.tsx14
-rw-r--r--packages/instant/src/components/buy_order_state_buttons.tsx39
-rw-r--r--packages/instant/src/constants.ts1
-rw-r--r--packages/instant/src/containers/selected_asset_buy_order_state_buttons.ts70
-rw-r--r--packages/instant/src/containers/selected_asset_simulated_progress_bar.tsx26
-rw-r--r--packages/instant/src/types.ts3
6 files changed, 108 insertions, 45 deletions
diff --git a/packages/instant/src/components/buy_button.tsx b/packages/instant/src/components/buy_button.tsx
index ec1010fe9..d10936d05 100644
--- a/packages/instant/src/components/buy_button.tsx
+++ b/packages/instant/src/components/buy_button.tsx
@@ -19,9 +19,9 @@ export interface BuyButtonProps {
onValidationPending: (buyQuote: BuyQuote) => void;
onValidationFail: (buyQuote: BuyQuote, errorMessage: AssetBuyerError | ZeroExInstantError) => void;
onSignatureDenied: (buyQuote: BuyQuote) => void;
- onBuyProcessing: (buyQuote: BuyQuote, txHash: string, estimatedTimeMs?: number) => void;
- onBuySuccess: (buyQuote: BuyQuote, txHash: string) => void;
- onBuyFailure: (buyQuote: BuyQuote, txHash: string) => void;
+ onBuyProcessing: (buyQuote: BuyQuote, txHash: string, startTimeUnix: number, expectedEndTimeUnix: number) => void;
+ onBuySuccess: (buyQuote: BuyQuote, txHash: string, startTimeUnix: number, expectedEndTimeUnix: number) => void;
+ onBuyFailure: (buyQuote: BuyQuote, txHash: string, startTimeUnix: number, expectedEndTimeUnix: number) => void;
}
export class BuyButton extends React.Component<BuyButtonProps> {
@@ -73,16 +73,18 @@ export class BuyButton extends React.Component<BuyButtonProps> {
throw e;
}
- this.props.onBuyProcessing(buyQuote, txHash, gasInfo.estimatedTimeMs);
+ const startTimeUnix = new Date().getTime();
+ const expectedEndTimeUnix = startTimeUnix + gasInfo.estimatedTimeMs;
+ this.props.onBuyProcessing(buyQuote, txHash, startTimeUnix, expectedEndTimeUnix);
try {
await web3Wrapper.awaitTransactionSuccessAsync(txHash);
} catch (e) {
if (e instanceof Error && e.message.startsWith(WEB_3_WRAPPER_TRANSACTION_FAILED_ERROR_MSG_PREFIX)) {
- this.props.onBuyFailure(buyQuote, txHash);
+ this.props.onBuyFailure(buyQuote, txHash, startTimeUnix, expectedEndTimeUnix);
return;
}
throw e;
}
- this.props.onBuySuccess(buyQuote, txHash);
+ this.props.onBuySuccess(buyQuote, txHash, startTimeUnix, expectedEndTimeUnix);
};
}
diff --git a/packages/instant/src/components/buy_order_state_buttons.tsx b/packages/instant/src/components/buy_order_state_buttons.tsx
index d01e9ff57..6f197a772 100644
--- a/packages/instant/src/components/buy_order_state_buttons.tsx
+++ b/packages/instant/src/components/buy_order_state_buttons.tsx
@@ -6,6 +6,7 @@ import { SecondaryButton } from '../components/secondary_button';
import { Flex } from '../components/ui/flex';
import { PlacingOrderButton } from '../components/placing_order_button';
+import { SimulatedProgressBar } from '../components/simulated_progress_bar';
import { ColorOption } from '../style/theme';
import { OrderProcessState, ZeroExInstantError } from '../types';
@@ -20,10 +21,13 @@ export interface BuyOrderStateButtonProps {
onValidationPending: (buyQuote: BuyQuote) => void;
onValidationFail: (buyQuote: BuyQuote, errorMessage: AssetBuyerError | ZeroExInstantError) => void;
onSignatureDenied: (buyQuote: BuyQuote) => void;
- onBuyProcessing: (buyQuote: BuyQuote, txHash: string) => void;
- onBuySuccess: (buyQuote: BuyQuote, txHash: string) => void;
- onBuyFailure: (buyQuote: BuyQuote, txHash: string) => void;
+ onBuyProcessing: (buyQuote: BuyQuote, txHash: string, startTimeUnix: number, expectedEndTimeUnix: number) => void;
+ onBuySuccess: (buyQuote: BuyQuote, txHash: string, startTimeUnix: number, expectedEndTimeUnix: number) => void;
+ onBuyFailure: (buyQuote: BuyQuote, txHash: string, startTimeUnix: number, expectedEndTimeUnix: number) => void;
onRetry: () => void;
+
+ // TODO: dont commit!
+ secondaryProgressDemo: () => void;
}
// TODO: rename to buttons
@@ -50,16 +54,25 @@ export const BuyOrderStateButtons: React.StatelessComponent<BuyOrderStateButtonP
return <PlacingOrderButton />;
}
+ const curTime = new Date().getTime();
+ const expectedEndTime = curTime + 5000;
return (
- <BuyButton
- buyQuote={props.buyQuote}
- assetBuyer={props.assetBuyer}
- onValidationPending={props.onValidationPending}
- onValidationFail={props.onValidationFail}
- onSignatureDenied={props.onSignatureDenied}
- onBuyProcessing={props.onBuyProcessing}
- onBuySuccess={props.onBuySuccess}
- onBuyFailure={props.onBuyFailure}
- />
+ <div>
+ {/* <div style={{ marginBottom: '20px' }}>
+ <SimulatedProgressBar startTimeUnix={curTime} expectedEndTimeUnix={expectedEndTime} ended={false} />
+ </div> */}
+
+ <SecondaryButton onClick={props.secondaryProgressDemo}>New progress bar demo</SecondaryButton>
+ <BuyButton
+ buyQuote={props.buyQuote}
+ assetBuyer={props.assetBuyer}
+ onValidationPending={props.onValidationPending}
+ onValidationFail={props.onValidationFail}
+ onSignatureDenied={props.onSignatureDenied}
+ onBuyProcessing={props.onBuyProcessing}
+ onBuySuccess={props.onBuySuccess}
+ onBuyFailure={props.onBuyFailure}
+ />
+ </div>
);
};
diff --git a/packages/instant/src/constants.ts b/packages/instant/src/constants.ts
index e099044df..12e592ae8 100644
--- a/packages/instant/src/constants.ts
+++ b/packages/instant/src/constants.ts
@@ -5,6 +5,7 @@ export const DEFAULT_ZERO_EX_CONTAINER_SELECTOR = '#zeroExInstantContainer';
export const WEB_3_WRAPPER_TRANSACTION_FAILED_ERROR_MSG_PREFIX = 'Transaction failed';
export const GWEI_IN_WEI = new BigNumber(1000000000);
export const DEFAULT_GAS_PRICE = GWEI_IN_WEI.mul(6);
+export const DEFAULT_ESTIMATED_TRANSACTION_TIME_MS = 2 * 60 * 1000; // 2 minutes
export const ETH_GAS_STATION_API_BASE_URL = 'https://ethgasstation.info';
export const COINBASE_API_BASE_URL = 'https://api.coinbase.com/v2';
export const PROGRESS_TICK_INTERVAL_MS = 100;
diff --git a/packages/instant/src/containers/selected_asset_buy_order_state_buttons.ts b/packages/instant/src/containers/selected_asset_buy_order_state_buttons.ts
index 3750e5219..5cfd1ff6c 100644
--- a/packages/instant/src/containers/selected_asset_buy_order_state_buttons.ts
+++ b/packages/instant/src/containers/selected_asset_buy_order_state_buttons.ts
@@ -21,11 +21,12 @@ interface ConnectedState {
interface ConnectedDispatch {
onValidationPending: (buyQuote: BuyQuote) => void;
onSignatureDenied: (buyQuote: BuyQuote) => void;
- onBuyProcessing: (buyQuote: BuyQuote, txHash: string, estimatedTimeMs?: number) => void;
- onBuySuccess: (buyQuote: BuyQuote, txHash: string) => void;
- onBuyFailure: (buyQuote: BuyQuote, txHash: string) => void;
+ onBuyProcessing: (buyQuote: BuyQuote, txHash: string, startTimeUnix: number, expectedEndTimeUnix: number) => void;
+ onBuySuccess: (buyQuote: BuyQuote, txHash: string, startTimeUnix: number, expectedEndTimeUnix: number) => void;
+ onBuyFailure: (buyQuote: BuyQuote, txHash: string, startTimeUnix: number, expectedEndTimeUnix: number) => void;
onRetry: () => void;
onValidationFail: (buyQuote: BuyQuote, errorMessage: AssetBuyerError | ZeroExInstantError) => void;
+ secondaryProgressDemo: () => void;
}
export interface SelectedAssetBuyOrderStateButtons {}
const mapStateToProps = (state: State, _ownProps: SelectedAssetBuyOrderStateButtons): ConnectedState => ({
@@ -59,14 +60,42 @@ const mapDispatchToProps = (
const newOrderState: OrderState = { processState: OrderProcessState.VALIDATING };
dispatch(actions.updateBuyOrderState(newOrderState));
},
- onBuyProcessing: (buyQuote: BuyQuote, txHash: string, estimatedTimeMs?: number) => {
- const newOrderState: OrderState = { processState: OrderProcessState.PROCESSING, txHash, estimatedTimeMs };
+ onBuyProcessing: (buyQuote: BuyQuote, txHash: string, startTimeUnix: number, expectedEndTimeUnix: number) => {
+ const newOrderState: OrderState = {
+ processState: OrderProcessState.PROCESSING,
+ txHash,
+ progress: {
+ startTimeUnix,
+ expectedEndTimeUnix,
+ ended: false,
+ },
+ };
dispatch(actions.updateBuyOrderState(newOrderState));
},
- onBuySuccess: (buyQuote: BuyQuote, txHash: string) =>
- dispatch(actions.updateBuyOrderState({ processState: OrderProcessState.SUCCESS, txHash })),
- onBuyFailure: (buyQuote: BuyQuote, txHash: string) =>
- dispatch(actions.updateBuyOrderState({ processState: OrderProcessState.FAILURE, txHash })),
+ onBuySuccess: (buyQuote: BuyQuote, txHash: string, startTimeUnix: number, expectedEndTimeUnix: number) =>
+ dispatch(
+ actions.updateBuyOrderState({
+ processState: OrderProcessState.SUCCESS,
+ txHash,
+ progress: {
+ startTimeUnix,
+ expectedEndTimeUnix,
+ ended: true,
+ },
+ }),
+ ),
+ onBuyFailure: (buyQuote: BuyQuote, txHash: string, startTimeUnix: number, expectedEndTimeUnix: number) =>
+ dispatch(
+ actions.updateBuyOrderState({
+ processState: OrderProcessState.FAILURE,
+ txHash,
+ progress: {
+ startTimeUnix,
+ expectedEndTimeUnix,
+ ended: true,
+ },
+ }),
+ ),
onSignatureDenied: () => {
dispatch(actions.resetAmount());
const errorMessage = 'You denied this transaction';
@@ -84,6 +113,29 @@ const mapDispatchToProps = (
onRetry: () => {
dispatch(actions.resetAmount());
},
+ secondaryProgressDemo: () => {
+ const nowTime = new Date().getTime();
+ const futureTime = nowTime + 5000;
+ dispatch(
+ actions.updateSimulatedOrderProgress({
+ startTimeUnix: nowTime,
+ expectedEndTimeUnix: futureTime,
+ ended: false,
+ }),
+ );
+
+ window.setTimeout(() => {
+ console.log('simulate finishing');
+
+ dispatch(
+ actions.updateSimulatedOrderProgress({
+ startTimeUnix: nowTime,
+ expectedEndTimeUnix: futureTime,
+ ended: true,
+ }),
+ );
+ }, 2000);
+ },
});
export const SelectedAssetBuyOrderStateButtons: React.ComponentClass<SelectedAssetBuyOrderStateButtons> = connect(
diff --git a/packages/instant/src/containers/selected_asset_simulated_progress_bar.tsx b/packages/instant/src/containers/selected_asset_simulated_progress_bar.tsx
index 1ddb4ae66..adb5daad8 100644
--- a/packages/instant/src/containers/selected_asset_simulated_progress_bar.tsx
+++ b/packages/instant/src/containers/selected_asset_simulated_progress_bar.tsx
@@ -9,27 +9,23 @@ 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) {
+ const { buyOrderState } = props;
+
+ if (
+ buyOrderState.processState === OrderProcessState.PROCESSING ||
+ buyOrderState.processState === OrderProcessState.SUCCESS ||
+ buyOrderState.processState === OrderProcessState.FAILURE
+ ) {
+ const progress = buyOrderState.progress;
return (
<SimulatedProgressBar
- startTimeUnix={simulatedProgress.startTimeUnix}
- expectedEndTimeUnix={simulatedProgress.expectedEndTimeUnix}
- ended={simulatedProgress.ended}
+ startTimeUnix={progress.startTimeUnix}
+ expectedEndTimeUnix={progress.expectedEndTimeUnix}
+ ended={progress.ended}
/>
);
}
diff --git a/packages/instant/src/types.ts b/packages/instant/src/types.ts
index 58d6692e4..34893676d 100644
--- a/packages/instant/src/types.ts
+++ b/packages/instant/src/types.ts
@@ -28,8 +28,7 @@ interface OrderStatePreTx {
interface OrderStatePostTx {
processState: OrderProcessState.PROCESSING | OrderProcessState.SUCCESS | OrderProcessState.FAILURE;
txHash: string;
- // TODO: move/rename?
- estimatedTimeMs?: number;
+ progress: SimulatedProgress;
}
export type OrderState = OrderStatePreTx | OrderStatePostTx;