crowetic/protocol
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Use simulated progress bar for txn

Browse Source
This commit is contained in:
Steve Klebanoff
2018-10-30 16:40:51 -07:00
parent 9cc82308e5
commit 1c0569cfc6
6 changed files with 107 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
packages/instant/src/components/buy_button.tsx
View File

@@ -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);
};
}

39
packages/instant/src/components/buy_order_state_buttons.tsx
View File

@@ -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>
);
};

1
packages/instant/src/constants.ts
View File

@@ -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;

70
packages/instant/src/containers/selected_asset_buy_order_state_buttons.ts
View File

@@ -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(

24
packages/instant/src/containers/selected_asset_simulated_progress_bar.tsx
View File

@@ -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;
const { buyOrderState } = 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) {
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}
/>
);
}

3
packages/instant/src/types.ts
View File

@@ -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;