From 728f70f51b2fe4c5037e7b74a5dfb29f1f8ca4c9 Mon Sep 17 00:00:00 2001 From: Steve Klebanoff Date: Mon, 29 Oct 2018 20:08:46 -0700 Subject: store estimated time in Ms on state --- .../src/containers/selected_asset_buy_order_state_buttons.ts | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) (limited to 'packages/instant/src/containers') 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 500d6b88a..3750e5219 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,7 +21,7 @@ interface ConnectedState { interface ConnectedDispatch { onValidationPending: (buyQuote: BuyQuote) => void; onSignatureDenied: (buyQuote: BuyQuote) => void; - onBuyProcessing: (buyQuote: BuyQuote, txHash: string) => void; + onBuyProcessing: (buyQuote: BuyQuote, txHash: string, estimatedTimeMs?: number) => void; onBuySuccess: (buyQuote: BuyQuote, txHash: string) => void; onBuyFailure: (buyQuote: BuyQuote, txHash: string) => void; onRetry: () => void; @@ -59,8 +59,8 @@ const mapDispatchToProps = ( const newOrderState: OrderState = { processState: OrderProcessState.VALIDATING }; dispatch(actions.updateBuyOrderState(newOrderState)); }, - onBuyProcessing: (buyQuote: BuyQuote, txHash: string) => { - const newOrderState: OrderState = { processState: OrderProcessState.PROCESSING, txHash }; + onBuyProcessing: (buyQuote: BuyQuote, txHash: string, estimatedTimeMs?: number) => { + const newOrderState: OrderState = { processState: OrderProcessState.PROCESSING, txHash, estimatedTimeMs }; dispatch(actions.updateBuyOrderState(newOrderState)); }, onBuySuccess: (buyQuote: BuyQuote, txHash: string) => -- cgit v1.2.3 From 05b74ba1c8b10c356d396ce9a4834d053cd791b1 Mon Sep 17 00:00:00 2001 From: Steve Klebanoff Date: Tue, 30 Oct 2018 13:27:28 -0700 Subject: Dispatching progress --- .../src/containers/selected_asset_progress_bar.tsx | 37 ++++++++++++++++++++++ 1 file changed, 37 insertions(+) create mode 100644 packages/instant/src/containers/selected_asset_progress_bar.tsx (limited to 'packages/instant/src/containers') 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 = 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 ; + } + + 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); -- cgit v1.2.3 From 13b41c976b42983f5869813715313c2da22abcbc Mon Sep 17 00:00:00 2001 From: Steve Klebanoff Date: Tue, 30 Oct 2018 13:51:18 -0700 Subject: Placeholder for estimated time --- packages/instant/src/containers/selected_asset_progress_bar.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'packages/instant/src/containers') diff --git a/packages/instant/src/containers/selected_asset_progress_bar.tsx b/packages/instant/src/containers/selected_asset_progress_bar.tsx index 886e223d3..4564c790a 100644 --- a/packages/instant/src/containers/selected_asset_progress_bar.tsx +++ b/packages/instant/src/containers/selected_asset_progress_bar.tsx @@ -20,7 +20,7 @@ export const SelectedAssetProgressComponent: React.StatelessComponent; + return ; } return null; -- cgit v1.2.3 From abaa39a5e24daa8a1a7ff5617a14d2f3088cb0e3 Mon Sep 17 00:00:00 2001 From: Steve Klebanoff Date: Tue, 30 Oct 2018 15:39:58 -0700 Subject: Simulated Progress component working --- .../selected_asset_simulated_progress_bar.tsx | 48 ++++++++++++++++++++++ 1 file changed, 48 insertions(+) create mode 100644 packages/instant/src/containers/selected_asset_simulated_progress_bar.tsx (limited to 'packages/instant/src/containers') 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 ( + + ); + } + + 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); -- cgit v1.2.3 From dc9013652914333bfdc3c067d9b83a71f28c7382 Mon Sep 17 00:00:00 2001 From: Steve Klebanoff Date: Tue, 30 Oct 2018 15:43:38 -0700 Subject: Remove old files --- .../src/containers/selected_asset_progress_bar.tsx | 37 ---------------------- 1 file changed, 37 deletions(-) delete mode 100644 packages/instant/src/containers/selected_asset_progress_bar.tsx (limited to 'packages/instant/src/containers') diff --git a/packages/instant/src/containers/selected_asset_progress_bar.tsx b/packages/instant/src/containers/selected_asset_progress_bar.tsx deleted file mode 100644 index 4564c790a..000000000 --- a/packages/instant/src/containers/selected_asset_progress_bar.tsx +++ /dev/null @@ -1,37 +0,0 @@ -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 = 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 ; - } - - 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); -- cgit v1.2.3 From 1c0569cfc61d7b166d79d2d73e9bbc6d11a5b4e8 Mon Sep 17 00:00:00 2001 From: Steve Klebanoff Date: Tue, 30 Oct 2018 16:40:51 -0700 Subject: Use simulated progress bar for txn --- .../selected_asset_buy_order_state_buttons.ts | 70 +++++++++++++++++++--- .../selected_asset_simulated_progress_bar.tsx | 26 ++++---- 2 files changed, 72 insertions(+), 24 deletions(-) (limited to 'packages/instant/src/containers') 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 = 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 ( ); } -- cgit v1.2.3 From 9787d1085da225ac3180983065f63d26a6bab3e6 Mon Sep 17 00:00:00 2001 From: Steve Klebanoff Date: Tue, 30 Oct 2018 16:43:58 -0700 Subject: Get rid of old demo --- .../selected_asset_buy_order_state_buttons.ts | 24 ---------------------- .../selected_asset_simulated_progress_bar.tsx | 1 - 2 files changed, 25 deletions(-) (limited to 'packages/instant/src/containers') 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 5cfd1ff6c..247d57938 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 @@ -26,7 +26,6 @@ interface ConnectedDispatch { 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 => ({ @@ -113,29 +112,6 @@ 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 = 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 adb5daad8..a7acc4cb7 100644 --- a/packages/instant/src/containers/selected_asset_simulated_progress_bar.tsx +++ b/packages/instant/src/containers/selected_asset_simulated_progress_bar.tsx @@ -39,6 +39,5 @@ interface ConnectedState { } const mapStateToProps = (state: State, _ownProps: {}): ConnectedState => ({ buyOrderState: state.buyOrderState, - simulatedProgress: state.simulatedProgress, }); export const SelectedAssetSimulatedProgressBar = connect(mapStateToProps)(SelectedAssetSimulatedProgressComponent); -- cgit v1.2.3 From d6755472087af76982779728db7424b1171a1b47 Mon Sep 17 00:00:00 2001 From: Steve Klebanoff Date: Wed, 31 Oct 2018 09:14:50 -0700 Subject: Explicit actions for setting different order states This allows us to dispatch updates with less syntax, and allows us to not have to send in progress info when setting failure and success --- .../selected_asset_buy_order_state_buttons.ts | 46 ++++------------------ .../selected_erc20_asset_amount_input.ts | 2 +- 2 files changed, 8 insertions(+), 40 deletions(-) (limited to 'packages/instant/src/containers') 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 247d57938..a94538ffc 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 @@ -22,8 +22,8 @@ interface ConnectedDispatch { onValidationPending: (buyQuote: BuyQuote) => void; onSignatureDenied: (buyQuote: BuyQuote) => 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; + onBuySuccess: (buyQuote: BuyQuote, txHash: string) => void; + onBuyFailure: (buyQuote: BuyQuote, txHash: string) => void; onRetry: () => void; onValidationFail: (buyQuote: BuyQuote, errorMessage: AssetBuyerError | ZeroExInstantError) => void; } @@ -56,52 +56,20 @@ const mapDispatchToProps = ( ownProps: SelectedAssetBuyOrderStateButtons, ): ConnectedDispatch => ({ onValidationPending: (buyQuote: BuyQuote) => { - const newOrderState: OrderState = { processState: OrderProcessState.VALIDATING }; - dispatch(actions.updateBuyOrderState(newOrderState)); + dispatch(actions.setBuyOrderStateValidating()); }, 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)); + dispatch(actions.setBuyOrderStateProcessing(txHash, startTimeUnix, expectedEndTimeUnix)); }, - 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, - }, - }), - ), + onBuySuccess: (buyQuote: BuyQuote, txHash: string) => dispatch(actions.setBuyOrderStateSuccess(txHash)), + onBuyFailure: (buyQuote: BuyQuote, txHash: string) => dispatch(actions.setBuyOrderStateFailure(txHash)), onSignatureDenied: () => { dispatch(actions.resetAmount()); const errorMessage = 'You denied this transaction'; errorFlasher.flashNewErrorMessage(dispatch, errorMessage); }, onValidationFail: (buyQuote, error) => { - dispatch(actions.updateBuyOrderState({ processState: OrderProcessState.NONE })); + dispatch(actions.setBuyOrderStateNone()); if (error === ZeroExInstantError.InsufficientETH) { const errorMessage = "You don't have enough ETH"; errorFlasher.flashNewErrorMessage(dispatch, errorMessage); diff --git a/packages/instant/src/containers/selected_erc20_asset_amount_input.ts b/packages/instant/src/containers/selected_erc20_asset_amount_input.ts index 4767b15d4..c0245f721 100644 --- a/packages/instant/src/containers/selected_erc20_asset_amount_input.ts +++ b/packages/instant/src/containers/selected_erc20_asset_amount_input.ts @@ -113,7 +113,7 @@ const mapDispatchToProps = ( // invalidate the last buy quote. dispatch(actions.updateLatestBuyQuote(undefined)); // reset our buy state - dispatch(actions.updateBuyOrderState({ processState: OrderProcessState.NONE })); + dispatch(actions.setBuyOrderStateNone()); if (!_.isUndefined(value) && !_.isUndefined(asset) && !_.isUndefined(assetBuyer)) { // even if it's debounced, give them the illusion it's loading -- cgit v1.2.3 From ae84dac46382258e9a59b194f8aed7184d283e6f Mon Sep 17 00:00:00 2001 From: Steve Klebanoff Date: Wed, 31 Oct 2018 16:46:24 -0700 Subject: WIP of new timedprogressbar using CSS animations --- .../selected_asset_simulated_progress_bar.tsx | 18 +++++++++++++----- 1 file changed, 13 insertions(+), 5 deletions(-) (limited to 'packages/instant/src/containers') 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 a7acc4cb7..a989407d5 100644 --- a/packages/instant/src/containers/selected_asset_simulated_progress_bar.tsx +++ b/packages/instant/src/containers/selected_asset_simulated_progress_bar.tsx @@ -3,10 +3,15 @@ import * as React from 'react'; import { connect } from 'react-redux'; import { SimulatedProgressBar } from '../components/simulated_progress_bar'; +import { TimedProgressBar } from '../components/timed_progress_bar'; +import { TimeCounter } from '../components/time_counter'; +import { Container } from '../components/ui'; import { State } from '../redux/reducer'; import { OrderProcessState, OrderState, SimulatedProgress } from '../types'; +// TODO: rename this +// TODO: delete SimulatedProgressBar code and anything else remaining interface SelectedAssetProgressComponentProps { buyOrderState: OrderState; } @@ -21,12 +26,15 @@ export const SelectedAssetSimulatedProgressComponent: React.StatelessComponent< buyOrderState.processState === OrderProcessState.FAILURE ) { const progress = buyOrderState.progress; + const ended = buyOrderState.processState !== OrderProcessState.PROCESSING; + const expectedTimeMs = progress.expectedEndTimeUnix - progress.startTimeUnix; return ( - + + + + + + ); } -- cgit v1.2.3 From 096f9deceedabff7fe90a7781271f55dfa059e1f Mon Sep 17 00:00:00 2001 From: Steve Klebanoff Date: Wed, 31 Oct 2018 16:49:41 -0700 Subject: Removing old simulated progress bar, and adding documentation to TimedProgressBar --- .../instant/src/containers/selected_asset_simulated_progress_bar.tsx | 2 -- 1 file changed, 2 deletions(-) (limited to 'packages/instant/src/containers') 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 a989407d5..ceab61175 100644 --- a/packages/instant/src/containers/selected_asset_simulated_progress_bar.tsx +++ b/packages/instant/src/containers/selected_asset_simulated_progress_bar.tsx @@ -2,7 +2,6 @@ import * as React from 'react'; import { connect } from 'react-redux'; -import { SimulatedProgressBar } from '../components/simulated_progress_bar'; import { TimedProgressBar } from '../components/timed_progress_bar'; import { TimeCounter } from '../components/time_counter'; @@ -11,7 +10,6 @@ import { State } from '../redux/reducer'; import { OrderProcessState, OrderState, SimulatedProgress } from '../types'; // TODO: rename this -// TODO: delete SimulatedProgressBar code and anything else remaining interface SelectedAssetProgressComponentProps { buyOrderState: OrderState; } -- cgit v1.2.3 From 906909e33fe97d49196696c528c131c1a1c66f14 Mon Sep 17 00:00:00 2001 From: Steve Klebanoff Date: Wed, 31 Oct 2018 16:54:52 -0700 Subject: Rename to SelectedAssetProgress --- .../src/containers/selected_asset_progress.tsx | 49 ++++++++++++++++++++++ .../selected_asset_simulated_progress_bar.tsx | 49 ---------------------- 2 files changed, 49 insertions(+), 49 deletions(-) create mode 100644 packages/instant/src/containers/selected_asset_progress.tsx delete mode 100644 packages/instant/src/containers/selected_asset_simulated_progress_bar.tsx (limited to 'packages/instant/src/containers') diff --git a/packages/instant/src/containers/selected_asset_progress.tsx b/packages/instant/src/containers/selected_asset_progress.tsx new file mode 100644 index 000000000..afbb45dac --- /dev/null +++ b/packages/instant/src/containers/selected_asset_progress.tsx @@ -0,0 +1,49 @@ +import * as React from 'react'; + +import { connect } from 'react-redux'; + +import { TimedProgressBar } from '../components/timed_progress_bar'; + +import { TimeCounter } from '../components/time_counter'; +import { Container } from '../components/ui'; +import { State } from '../redux/reducer'; +import { OrderProcessState, OrderState, SimulatedProgress } from '../types'; + +interface SelectedAssetProgressComponentProps { + buyOrderState: OrderState; +} +// TODO: rename this component and move to seperate file, and get props using mapStateToProps +export const SelectedAssetSimulatedProgressComponent: React.StatelessComponent< + SelectedAssetProgressComponentProps +> = props => { + const { buyOrderState } = props; + + if ( + buyOrderState.processState === OrderProcessState.PROCESSING || + buyOrderState.processState === OrderProcessState.SUCCESS || + buyOrderState.processState === OrderProcessState.FAILURE + ) { + const progress = buyOrderState.progress; + const ended = buyOrderState.processState !== OrderProcessState.PROCESSING; + const expectedTimeMs = progress.expectedEndTimeUnix - progress.startTimeUnix; + return ( + + + + + + + ); + } + + return null; +}; + +interface ConnectedState { + buyOrderState: OrderState; + simulatedProgress?: SimulatedProgress; +} +const mapStateToProps = (state: State, _ownProps: {}): ConnectedState => ({ + buyOrderState: state.buyOrderState, +}); +export const SelectedAssetProgress = connect(mapStateToProps)(SelectedAssetSimulatedProgressComponent); diff --git a/packages/instant/src/containers/selected_asset_simulated_progress_bar.tsx b/packages/instant/src/containers/selected_asset_simulated_progress_bar.tsx deleted file mode 100644 index ceab61175..000000000 --- a/packages/instant/src/containers/selected_asset_simulated_progress_bar.tsx +++ /dev/null @@ -1,49 +0,0 @@ -import * as React from 'react'; - -import { connect } from 'react-redux'; - -import { TimedProgressBar } from '../components/timed_progress_bar'; - -import { TimeCounter } from '../components/time_counter'; -import { Container } from '../components/ui'; -import { State } from '../redux/reducer'; -import { OrderProcessState, OrderState, SimulatedProgress } from '../types'; - -// TODO: rename this -interface SelectedAssetProgressComponentProps { - buyOrderState: OrderState; -} -export const SelectedAssetSimulatedProgressComponent: React.StatelessComponent< - SelectedAssetProgressComponentProps -> = props => { - const { buyOrderState } = props; - - if ( - buyOrderState.processState === OrderProcessState.PROCESSING || - buyOrderState.processState === OrderProcessState.SUCCESS || - buyOrderState.processState === OrderProcessState.FAILURE - ) { - const progress = buyOrderState.progress; - const ended = buyOrderState.processState !== OrderProcessState.PROCESSING; - const expectedTimeMs = progress.expectedEndTimeUnix - progress.startTimeUnix; - return ( - - - - - - - ); - } - - return null; -}; - -interface ConnectedState { - buyOrderState: OrderState; - simulatedProgress?: SimulatedProgress; -} -const mapStateToProps = (state: State, _ownProps: {}): ConnectedState => ({ - buyOrderState: state.buyOrderState, -}); -export const SelectedAssetSimulatedProgressBar = connect(mapStateToProps)(SelectedAssetSimulatedProgressComponent); -- cgit v1.2.3 From f9a38fcb32ee4e755c7f271a1c5a116c29985a10 Mon Sep 17 00:00:00 2001 From: Steve Klebanoff Date: Thu, 1 Nov 2018 09:51:27 -0700 Subject: ended -> hasEnded --- packages/instant/src/containers/selected_asset_progress.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) (limited to 'packages/instant/src/containers') diff --git a/packages/instant/src/containers/selected_asset_progress.tsx b/packages/instant/src/containers/selected_asset_progress.tsx index afbb45dac..a910d8031 100644 --- a/packages/instant/src/containers/selected_asset_progress.tsx +++ b/packages/instant/src/containers/selected_asset_progress.tsx @@ -24,14 +24,14 @@ export const SelectedAssetSimulatedProgressComponent: React.StatelessComponent< buyOrderState.processState === OrderProcessState.FAILURE ) { const progress = buyOrderState.progress; - const ended = buyOrderState.processState !== OrderProcessState.PROCESSING; + const hasEnded = buyOrderState.processState !== OrderProcessState.PROCESSING; const expectedTimeMs = progress.expectedEndTimeUnix - progress.startTimeUnix; return ( - + - + ); } -- cgit v1.2.3 From 61a1a0be974c8610623f2bcb9a43797532cc78d9 Mon Sep 17 00:00:00 2001 From: Steve Klebanoff Date: Thu, 1 Nov 2018 11:29:33 -0700 Subject: Move BuyOrderProgress to its own component --- .../src/containers/selected_asset_progress.tsx | 42 +++------------------- 1 file changed, 4 insertions(+), 38 deletions(-) (limited to 'packages/instant/src/containers') diff --git a/packages/instant/src/containers/selected_asset_progress.tsx b/packages/instant/src/containers/selected_asset_progress.tsx index a910d8031..354a15bf0 100644 --- a/packages/instant/src/containers/selected_asset_progress.tsx +++ b/packages/instant/src/containers/selected_asset_progress.tsx @@ -1,49 +1,15 @@ -import * as React from 'react'; +// TODO: rename file and props to SelectedAssetBuyOrderProgress and use .ts import { connect } from 'react-redux'; -import { TimedProgressBar } from '../components/timed_progress_bar'; - -import { TimeCounter } from '../components/time_counter'; -import { Container } from '../components/ui'; +import { BuyOrderProgress } from '../components/buy_order_progress'; import { State } from '../redux/reducer'; -import { OrderProcessState, OrderState, SimulatedProgress } from '../types'; - -interface SelectedAssetProgressComponentProps { - buyOrderState: OrderState; -} -// TODO: rename this component and move to seperate file, and get props using mapStateToProps -export const SelectedAssetSimulatedProgressComponent: React.StatelessComponent< - SelectedAssetProgressComponentProps -> = props => { - const { buyOrderState } = props; - - if ( - buyOrderState.processState === OrderProcessState.PROCESSING || - buyOrderState.processState === OrderProcessState.SUCCESS || - buyOrderState.processState === OrderProcessState.FAILURE - ) { - const progress = buyOrderState.progress; - const hasEnded = buyOrderState.processState !== OrderProcessState.PROCESSING; - const expectedTimeMs = progress.expectedEndTimeUnix - progress.startTimeUnix; - return ( - - - - - - - ); - } - - return null; -}; +import { OrderState } from '../types'; interface ConnectedState { buyOrderState: OrderState; - simulatedProgress?: SimulatedProgress; } const mapStateToProps = (state: State, _ownProps: {}): ConnectedState => ({ buyOrderState: state.buyOrderState, }); -export const SelectedAssetProgress = connect(mapStateToProps)(SelectedAssetSimulatedProgressComponent); +export const SelectedAssetProgress = connect(mapStateToProps)(BuyOrderProgress); -- cgit v1.2.3 From 771e01162d2c1f8543d5561872fb82af9e8e7b62 Mon Sep 17 00:00:00 2001 From: Steve Klebanoff Date: Thu, 1 Nov 2018 11:30:13 -0700 Subject: Rename export --- packages/instant/src/containers/selected_asset_progress.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'packages/instant/src/containers') diff --git a/packages/instant/src/containers/selected_asset_progress.tsx b/packages/instant/src/containers/selected_asset_progress.tsx index 354a15bf0..726967bc7 100644 --- a/packages/instant/src/containers/selected_asset_progress.tsx +++ b/packages/instant/src/containers/selected_asset_progress.tsx @@ -12,4 +12,4 @@ interface ConnectedState { const mapStateToProps = (state: State, _ownProps: {}): ConnectedState => ({ buyOrderState: state.buyOrderState, }); -export const SelectedAssetProgress = connect(mapStateToProps)(BuyOrderProgress); +export const SelectedAssetBuyOrderProgress = connect(mapStateToProps)(BuyOrderProgress); -- cgit v1.2.3 From f9d13cd43ae43c05558538ac3d108552c7854fee Mon Sep 17 00:00:00 2001 From: Steve Klebanoff Date: Thu, 1 Nov 2018 11:32:18 -0700 Subject: Move file to new file to reflect the new export name --- .../src/containers/selected_asset_buy_order_progress.ts | 13 +++++++++++++ .../instant/src/containers/selected_asset_progress.tsx | 15 --------------- 2 files changed, 13 insertions(+), 15 deletions(-) create mode 100644 packages/instant/src/containers/selected_asset_buy_order_progress.ts delete mode 100644 packages/instant/src/containers/selected_asset_progress.tsx (limited to 'packages/instant/src/containers') diff --git a/packages/instant/src/containers/selected_asset_buy_order_progress.ts b/packages/instant/src/containers/selected_asset_buy_order_progress.ts new file mode 100644 index 000000000..7c8c24676 --- /dev/null +++ b/packages/instant/src/containers/selected_asset_buy_order_progress.ts @@ -0,0 +1,13 @@ +import { connect } from 'react-redux'; + +import { BuyOrderProgress } from '../components/buy_order_progress'; +import { State } from '../redux/reducer'; +import { OrderState } from '../types'; + +interface ConnectedState { + buyOrderState: OrderState; +} +const mapStateToProps = (state: State, _ownProps: {}): ConnectedState => ({ + buyOrderState: state.buyOrderState, +}); +export const SelectedAssetBuyOrderProgress = connect(mapStateToProps)(BuyOrderProgress); diff --git a/packages/instant/src/containers/selected_asset_progress.tsx b/packages/instant/src/containers/selected_asset_progress.tsx deleted file mode 100644 index 726967bc7..000000000 --- a/packages/instant/src/containers/selected_asset_progress.tsx +++ /dev/null @@ -1,15 +0,0 @@ -// TODO: rename file and props to SelectedAssetBuyOrderProgress and use .ts - -import { connect } from 'react-redux'; - -import { BuyOrderProgress } from '../components/buy_order_progress'; -import { State } from '../redux/reducer'; -import { OrderState } from '../types'; - -interface ConnectedState { - buyOrderState: OrderState; -} -const mapStateToProps = (state: State, _ownProps: {}): ConnectedState => ({ - buyOrderState: state.buyOrderState, -}); -export const SelectedAssetBuyOrderProgress = connect(mapStateToProps)(BuyOrderProgress); -- cgit v1.2.3 From 82b6a81a223a75040054b4578a16f88be6271440 Mon Sep 17 00:00:00 2001 From: Steve Klebanoff Date: Thu, 1 Nov 2018 11:35:53 -0700 Subject: removing unused imports --- .../instant/src/containers/selected_asset_buy_order_state_buttons.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'packages/instant/src/containers') 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 a94538ffc..7c36fa4d0 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 @@ -7,7 +7,7 @@ import { Dispatch } from 'redux'; import { BuyOrderStateButtons } from '../components/buy_order_state_buttons'; import { Action, actions } from '../redux/actions'; import { State } from '../redux/reducer'; -import { OrderProcessState, OrderState, ZeroExInstantError } from '../types'; +import { OrderProcessState, ZeroExInstantError } from '../types'; import { errorFlasher } from '../util/error_flasher'; import { etherscanUtil } from '../util/etherscan'; -- cgit v1.2.3 From 5e66cc8a40759658a8763f85996163e5ae013fcd Mon Sep 17 00:00:00 2001 From: Brandon Millman Date: Thu, 1 Nov 2018 18:24:32 -0700 Subject: feat(instant): implement affiliateFeeInfo prop --- .../selected_asset_buy_order_state_buttons.ts | 4 +++- .../selected_erc20_asset_amount_input.ts | 28 ++++++++++++++++------ 2 files changed, 24 insertions(+), 8 deletions(-) (limited to 'packages/instant/src/containers') 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 7c36fa4d0..72d99f844 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 @@ -7,7 +7,7 @@ import { Dispatch } from 'redux'; import { BuyOrderStateButtons } from '../components/buy_order_state_buttons'; import { Action, actions } from '../redux/actions'; import { State } from '../redux/reducer'; -import { OrderProcessState, ZeroExInstantError } from '../types'; +import { AffiliateInfo, OrderProcessState, ZeroExInstantError } from '../types'; import { errorFlasher } from '../util/error_flasher'; import { etherscanUtil } from '../util/etherscan'; @@ -15,6 +15,7 @@ interface ConnectedState { buyQuote?: BuyQuote; buyOrderProcessingState: OrderProcessState; assetBuyer?: AssetBuyer; + affiliateInfo?: AffiliateInfo; onViewTransaction: () => void; } @@ -32,6 +33,7 @@ const mapStateToProps = (state: State, _ownProps: SelectedAssetBuyOrderStateButt buyOrderProcessingState: state.buyOrderState.processState, assetBuyer: state.assetBuyer, buyQuote: state.latestBuyQuote, + affiliateInfo: state.affiliateInfo, onViewTransaction: () => { if ( state.assetBuyer && diff --git a/packages/instant/src/containers/selected_erc20_asset_amount_input.ts b/packages/instant/src/containers/selected_erc20_asset_amount_input.ts index f0e792e2f..7859261dd 100644 --- a/packages/instant/src/containers/selected_erc20_asset_amount_input.ts +++ b/packages/instant/src/containers/selected_erc20_asset_amount_input.ts @@ -6,12 +6,13 @@ import * as _ from 'lodash'; import * as React from 'react'; import { connect } from 'react-redux'; import { Dispatch } from 'redux'; +import { oc } from 'ts-optchain'; import { ERC20AssetAmountInput } from '../components/erc20_asset_amount_input'; import { Action, actions } from '../redux/actions'; import { State } from '../redux/reducer'; import { ColorOption } from '../style/theme'; -import { ERC20Asset, OrderProcessState } from '../types'; +import { AffiliateInfo, ERC20Asset, OrderProcessState } from '../types'; import { assetUtils } from '../util/asset'; import { BigNumberInput } from '../util/big_number_input'; import { errorFlasher } from '../util/error_flasher'; @@ -27,10 +28,16 @@ interface ConnectedState { value?: BigNumberInput; asset?: ERC20Asset; isDisabled: boolean; + affiliateInfo?: AffiliateInfo; } interface ConnectedDispatch { - updateBuyQuote: (assetBuyer?: AssetBuyer, value?: BigNumberInput, asset?: ERC20Asset) => void; + updateBuyQuote: ( + assetBuyer?: AssetBuyer, + value?: BigNumberInput, + asset?: ERC20Asset, + affiliateInfo?: AffiliateInfo, + ) => void; } interface ConnectedProps { @@ -60,6 +67,7 @@ const mapStateToProps = (state: State, _ownProps: SelectedERC20AssetAmountInputP value: state.selectedAssetAmount, asset: selectedAsset as ERC20Asset, isDisabled, + affiliateInfo: state.affiliateInfo, }; }; @@ -68,6 +76,7 @@ const updateBuyQuoteAsync = async ( dispatch: Dispatch, asset: ERC20Asset, assetAmount: BigNumber, + affiliateInfo?: AffiliateInfo, ): Promise => { // get a new buy quote. const baseUnitValue = Web3Wrapper.toBaseUnitAmount(assetAmount, asset.metaData.decimals); @@ -75,9 +84,10 @@ const updateBuyQuoteAsync = async ( // mark quote as pending dispatch(actions.setQuoteRequestStatePending()); + const feePercentage = oc(affiliateInfo).feePercentage(); let newBuyQuote: BuyQuote | undefined; try { - newBuyQuote = await assetBuyer.getBuyQuoteAsync(asset.assetData, baseUnitValue); + newBuyQuote = await assetBuyer.getBuyQuoteAsync(asset.assetData, baseUnitValue, { feePercentage }); } catch (error) { dispatch(actions.setQuoteRequestStateFailure()); let errorMessage; @@ -93,7 +103,11 @@ const updateBuyQuoteAsync = async ( const assetName = assetUtils.bestNameForAsset(asset, 'This asset'); errorMessage = `${assetName} is currently unavailable`; } - errorFlasher.flashNewErrorMessage(dispatch, errorMessage); + if (!_.isUndefined(errorMessage)) { + errorFlasher.flashNewErrorMessage(dispatch, errorMessage); + } else { + throw error; + } return; } // We have a successful new buy quote @@ -108,7 +122,7 @@ const mapDispatchToProps = ( dispatch: Dispatch, _ownProps: SelectedERC20AssetAmountInputProps, ): ConnectedDispatch => ({ - updateBuyQuote: (assetBuyer, value, asset) => { + updateBuyQuote: (assetBuyer, value, asset, affiliateInfo) => { // Update the input dispatch(actions.updateSelectedAssetAmount(value)); // invalidate the last buy quote. @@ -120,7 +134,7 @@ const mapDispatchToProps = ( // even if it's debounced, give them the illusion it's loading dispatch(actions.setQuoteRequestStatePending()); // tslint:disable-next-line:no-floating-promises - debouncedUpdateBuyQuoteAsync(assetBuyer, dispatch, asset, value); + debouncedUpdateBuyQuoteAsync(assetBuyer, dispatch, asset, value, affiliateInfo); } }, }); @@ -135,7 +149,7 @@ const mergeProps = ( asset: connectedState.asset, value: connectedState.value, onChange: (value, asset) => { - connectedDispatch.updateBuyQuote(connectedState.assetBuyer, value, asset); + connectedDispatch.updateBuyQuote(connectedState.assetBuyer, value, asset, connectedState.affiliateInfo); }, isDisabled: connectedState.isDisabled, }; -- cgit v1.2.3 From a770ea56eae47c4ec840d28d1f363a017a89c69c Mon Sep 17 00:00:00 2001 From: Steve Klebanoff Date: Fri, 2 Nov 2018 11:48:59 -0700 Subject: fix(instant): dont get buy quote for zero value --- packages/instant/src/containers/selected_erc20_asset_amount_input.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'packages/instant/src/containers') diff --git a/packages/instant/src/containers/selected_erc20_asset_amount_input.ts b/packages/instant/src/containers/selected_erc20_asset_amount_input.ts index f0e792e2f..0ba0bd31f 100644 --- a/packages/instant/src/containers/selected_erc20_asset_amount_input.ts +++ b/packages/instant/src/containers/selected_erc20_asset_amount_input.ts @@ -116,7 +116,7 @@ const mapDispatchToProps = ( // reset our buy state dispatch(actions.setBuyOrderStateNone()); - if (!_.isUndefined(value) && !_.isUndefined(asset) && !_.isUndefined(assetBuyer)) { + if (!_.isUndefined(value) && value.greaterThan(0) && !_.isUndefined(asset) && !_.isUndefined(assetBuyer)) { // even if it's debounced, give them the illusion it's loading dispatch(actions.setQuoteRequestStatePending()); // tslint:disable-next-line:no-floating-promises -- cgit v1.2.3