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