From db77cd10c550803c4f3fac585adc0a7f6ffa8999 Mon Sep 17 00:00:00 2001 From: Steve Klebanoff Date: Tue, 16 Oct 2018 11:25:52 -0700 Subject: feat(instant): Handle AssetBuyer errors --- packages/instant/src/containers/latest_error.tsx | 36 ++++++++++++++++++++++ .../src/containers/selected_asset_amount_input.ts | 13 +++++++- 2 files changed, 48 insertions(+), 1 deletion(-) create mode 100644 packages/instant/src/containers/latest_error.tsx (limited to 'packages/instant/src/containers') diff --git a/packages/instant/src/containers/latest_error.tsx b/packages/instant/src/containers/latest_error.tsx new file mode 100644 index 000000000..5272d9610 --- /dev/null +++ b/packages/instant/src/containers/latest_error.tsx @@ -0,0 +1,36 @@ +import * as React from 'react'; + +import { connect } from 'react-redux'; + +import { SlidingError } from '../components/sliding_error'; +import { State } from '../redux/reducer'; +import { errorDescription } from '../util/error_description'; + +export interface LatestErrorComponentProps { + assetData?: string; + latestError?: any; + latestErrorDismissed?: boolean; +} + +export const LatestErrorComponent: React.StatelessComponent = props => { + if (!props.latestError) { + return
; + } + const slidingDirection = props.latestErrorDismissed ? 'down' : 'up'; + const { icon, message } = errorDescription(props.latestError, props.assetData); + return ; +}; + +interface ConnectedState { + assetData?: string; + latestError?: any; + latestErrorDismissed?: boolean; +} +export interface LatestErrorProps {} +const mapStateToProps = (state: State, _ownProps: LatestErrorProps): ConnectedState => ({ + assetData: state.selectedAssetData, + latestError: state.latestError, + latestErrorDismissed: state.latestErrorDismissed, +}); + +export const LatestError = connect(mapStateToProps)(LatestErrorComponent); diff --git a/packages/instant/src/containers/selected_asset_amount_input.ts b/packages/instant/src/containers/selected_asset_amount_input.ts index f2ca96ae4..00c0a1114 100644 --- a/packages/instant/src/containers/selected_asset_amount_input.ts +++ b/packages/instant/src/containers/selected_asset_amount_input.ts @@ -1,3 +1,4 @@ +import { BuyQuote } from '@0xproject/asset-buyer'; import { BigNumber } from '@0xproject/utils'; import { Web3Wrapper } from '@0xproject/web3-wrapper'; import * as _ from 'lodash'; @@ -11,6 +12,7 @@ import { State } from '../redux/reducer'; import { ColorOption } from '../style/theme'; import { AsyncProcessState } from '../types'; import { assetBuyer } from '../util/asset_buyer'; +import { errorFlasher } from '../util/error_flasher'; import { AssetAmountInput } from '../components/asset_amount_input'; @@ -43,7 +45,16 @@ const updateBuyQuoteAsync = async ( } // get a new buy quote. const baseUnitValue = Web3Wrapper.toBaseUnitAmount(assetAmount, zrxDecimals); - const newBuyQuote = await assetBuyer.getBuyQuoteAsync(assetData, baseUnitValue); + + let newBuyQuote: BuyQuote | undefined; + try { + newBuyQuote = await assetBuyer.getBuyQuoteAsync(assetData, baseUnitValue); + errorFlasher.clearError(dispatch); + } catch (error) { + errorFlasher.flashNewError(dispatch, error); + return; + } + // invalidate the last buy quote. dispatch(actions.updateLatestBuyQuote(newBuyQuote)); }; -- cgit v1.2.3 From 187bbc7fc14ccc0385981a38602334de65e2506c Mon Sep 17 00:00:00 2001 From: Steve Klebanoff Date: Wed, 17 Oct 2018 13:26:18 -0700 Subject: latestErrorDismissed -> latestErrorDisplay enum --- packages/instant/src/containers/latest_error.tsx | 11 +++++------ 1 file changed, 5 insertions(+), 6 deletions(-) (limited to 'packages/instant/src/containers') diff --git a/packages/instant/src/containers/latest_error.tsx b/packages/instant/src/containers/latest_error.tsx index 5272d9610..7f36d3bf8 100644 --- a/packages/instant/src/containers/latest_error.tsx +++ b/packages/instant/src/containers/latest_error.tsx @@ -3,34 +3,33 @@ import * as React from 'react'; import { connect } from 'react-redux'; import { SlidingError } from '../components/sliding_error'; -import { State } from '../redux/reducer'; +import { LatestErrorDisplay, State } from '../redux/reducer'; import { errorDescription } from '../util/error_description'; export interface LatestErrorComponentProps { assetData?: string; latestError?: any; - latestErrorDismissed?: boolean; + slidingDirection: 'down' | 'up'; } export const LatestErrorComponent: React.StatelessComponent = props => { if (!props.latestError) { return
; } - const slidingDirection = props.latestErrorDismissed ? 'down' : 'up'; const { icon, message } = errorDescription(props.latestError, props.assetData); - return ; + return ; }; interface ConnectedState { assetData?: string; latestError?: any; - latestErrorDismissed?: boolean; + slidingDirection: 'down' | 'up'; } export interface LatestErrorProps {} const mapStateToProps = (state: State, _ownProps: LatestErrorProps): ConnectedState => ({ assetData: state.selectedAssetData, latestError: state.latestError, - latestErrorDismissed: state.latestErrorDismissed, + slidingDirection: state.latestErrorDisplay === LatestErrorDisplay.Present ? 'up' : 'down', }); export const LatestError = connect(mapStateToProps)(LatestErrorComponent); -- cgit v1.2.3 From 155858de6e79d488293473e34868e20d2c39ef37 Mon Sep 17 00:00:00 2001 From: Steve Klebanoff Date: Wed, 17 Oct 2018 13:42:28 -0700 Subject: creating big error util file per francescos comment in PR --- packages/instant/src/containers/latest_error.tsx | 4 ++-- packages/instant/src/containers/selected_asset_amount_input.ts | 6 +++--- 2 files changed, 5 insertions(+), 5 deletions(-) (limited to 'packages/instant/src/containers') diff --git a/packages/instant/src/containers/latest_error.tsx b/packages/instant/src/containers/latest_error.tsx index 7f36d3bf8..08ea418e7 100644 --- a/packages/instant/src/containers/latest_error.tsx +++ b/packages/instant/src/containers/latest_error.tsx @@ -4,7 +4,7 @@ import { connect } from 'react-redux'; import { SlidingError } from '../components/sliding_error'; import { LatestErrorDisplay, State } from '../redux/reducer'; -import { errorDescription } from '../util/error_description'; +import { errorUtil } from '../util/error'; export interface LatestErrorComponentProps { assetData?: string; @@ -16,7 +16,7 @@ export const LatestErrorComponent: React.StatelessComponent; } - const { icon, message } = errorDescription(props.latestError, props.assetData); + const { icon, message } = errorUtil.errorDescription(props.latestError, props.assetData); return ; }; diff --git a/packages/instant/src/containers/selected_asset_amount_input.ts b/packages/instant/src/containers/selected_asset_amount_input.ts index 00c0a1114..0d2c6dd7b 100644 --- a/packages/instant/src/containers/selected_asset_amount_input.ts +++ b/packages/instant/src/containers/selected_asset_amount_input.ts @@ -12,7 +12,7 @@ import { State } from '../redux/reducer'; import { ColorOption } from '../style/theme'; import { AsyncProcessState } from '../types'; import { assetBuyer } from '../util/asset_buyer'; -import { errorFlasher } from '../util/error_flasher'; +import { errorUtil } from '../util/error'; import { AssetAmountInput } from '../components/asset_amount_input'; @@ -49,9 +49,9 @@ const updateBuyQuoteAsync = async ( let newBuyQuote: BuyQuote | undefined; try { newBuyQuote = await assetBuyer.getBuyQuoteAsync(assetData, baseUnitValue); - errorFlasher.clearError(dispatch); + errorUtil.errorFlasher.clearError(dispatch); } catch (error) { - errorFlasher.flashNewError(dispatch, error); + errorUtil.errorFlasher.flashNewError(dispatch, error); return; } -- cgit v1.2.3 From 6cf8d57aee3ed332bd1109f8f39792894147d2dd Mon Sep 17 00:00:00 2001 From: Steve Klebanoff Date: Wed, 17 Oct 2018 16:41:35 -0700 Subject: add concept of quoteState --- .../src/containers/selected_asset_amount_input.ts | 24 ++++++++++++++-------- .../containers/selected_asset_instant_heading.ts | 3 +++ 2 files changed, 18 insertions(+), 9 deletions(-) (limited to 'packages/instant/src/containers') diff --git a/packages/instant/src/containers/selected_asset_amount_input.ts b/packages/instant/src/containers/selected_asset_amount_input.ts index 0d2c6dd7b..87bb0e335 100644 --- a/packages/instant/src/containers/selected_asset_amount_input.ts +++ b/packages/instant/src/containers/selected_asset_amount_input.ts @@ -37,24 +37,25 @@ const mapStateToProps = (state: State, _ownProps: SelectedAssetAmountInputProps) const updateBuyQuoteAsync = async ( dispatch: Dispatch, - assetData?: string, - assetAmount?: BigNumber, + assetData: string, + assetAmount: BigNumber, ): Promise => { - if (_.isUndefined(assetAmount) || _.isUndefined(assetData)) { - return; - } // get a new buy quote. const baseUnitValue = Web3Wrapper.toBaseUnitAmount(assetAmount, zrxDecimals); + // mark quote as pending + dispatch(actions.updateBuyQuoteStatePending()); + let newBuyQuote: BuyQuote | undefined; try { newBuyQuote = await assetBuyer.getBuyQuoteAsync(assetData, baseUnitValue); - errorUtil.errorFlasher.clearError(dispatch); } catch (error) { + dispatch(actions.updateBuyQuoteStateFailure()); errorUtil.errorFlasher.flashNewError(dispatch, error); return; } - + // We have a successful new buy quote + errorUtil.errorFlasher.clearError(dispatch); // invalidate the last buy quote. dispatch(actions.updateLatestBuyQuote(newBuyQuote)); }; @@ -72,8 +73,13 @@ const mapDispatchToProps = ( dispatch(actions.updateLatestBuyQuote(undefined)); // reset our buy state dispatch(actions.updateSelectedAssetBuyState(AsyncProcessState.NONE)); - // tslint:disable-next-line:no-floating-promises - debouncedUpdateBuyQuoteAsync(dispatch, assetData, value); + + if (!_.isUndefined(value) && !_.isUndefined(assetData)) { + // even if it's debounced, give them the illusion it's loading + dispatch(actions.updateBuyQuoteStatePending()); + // tslint:disable-next-line:no-floating-promises + debouncedUpdateBuyQuoteAsync(dispatch, assetData, value); + } }, }); diff --git a/packages/instant/src/containers/selected_asset_instant_heading.ts b/packages/instant/src/containers/selected_asset_instant_heading.ts index c97cfe11a..be31527f1 100644 --- a/packages/instant/src/containers/selected_asset_instant_heading.ts +++ b/packages/instant/src/containers/selected_asset_instant_heading.ts @@ -5,6 +5,7 @@ import { connect } from 'react-redux'; import { oc } from 'ts-optchain'; import { State } from '../redux/reducer'; +import { AsyncProcessState } from '../types'; import { InstantHeading } from '../components/instant_heading'; @@ -14,12 +15,14 @@ interface ConnectedState { selectedAssetAmount?: BigNumber; totalEthBaseAmount?: BigNumber; ethUsdPrice?: BigNumber; + quoteState: AsyncProcessState; } const mapStateToProps = (state: State, _ownProps: InstantHeadingProps): ConnectedState => ({ selectedAssetAmount: state.selectedAssetAmount, totalEthBaseAmount: oc(state).latestBuyQuote.worstCaseQuoteInfo.totalEthAmount(), ethUsdPrice: state.ethUsdPrice, + quoteState: state.quoteState, }); export const SelectedAssetInstantHeading: React.ComponentClass = connect(mapStateToProps)( -- cgit v1.2.3 From 6ea386a7af89c1b8a4df94b656ae1772c29c1401 Mon Sep 17 00:00:00 2001 From: Steve Klebanoff Date: Wed, 17 Oct 2018 16:50:21 -0700 Subject: selectedAssetBuyState -> buyOrderState --- packages/instant/src/containers/selected_asset_amount_input.ts | 2 +- packages/instant/src/containers/selected_asset_buy_button.ts | 8 ++++---- 2 files changed, 5 insertions(+), 5 deletions(-) (limited to 'packages/instant/src/containers') diff --git a/packages/instant/src/containers/selected_asset_amount_input.ts b/packages/instant/src/containers/selected_asset_amount_input.ts index 87bb0e335..0873f1ab6 100644 --- a/packages/instant/src/containers/selected_asset_amount_input.ts +++ b/packages/instant/src/containers/selected_asset_amount_input.ts @@ -72,7 +72,7 @@ const mapDispatchToProps = ( // invalidate the last buy quote. dispatch(actions.updateLatestBuyQuote(undefined)); // reset our buy state - dispatch(actions.updateSelectedAssetBuyState(AsyncProcessState.NONE)); + dispatch(actions.updatebuyOrderState(AsyncProcessState.NONE)); if (!_.isUndefined(value) && !_.isUndefined(assetData)) { // even if it's debounced, give them the illusion it's loading diff --git a/packages/instant/src/containers/selected_asset_buy_button.ts b/packages/instant/src/containers/selected_asset_buy_button.ts index 4cbaf5537..7d3919468 100644 --- a/packages/instant/src/containers/selected_asset_buy_button.ts +++ b/packages/instant/src/containers/selected_asset_buy_button.ts @@ -39,14 +39,14 @@ const textForState = (state: AsyncProcessState): string => { }; const mapStateToProps = (state: State, _ownProps: SelectedAssetBuyButtonProps): ConnectedState => ({ - text: textForState(state.selectedAssetBuyState), + text: textForState(state.buyOrderState), buyQuote: state.latestBuyQuote, }); const mapDispatchToProps = (dispatch: Dispatch, ownProps: SelectedAssetBuyButtonProps): ConnectedDispatch => ({ - onClick: buyQuote => dispatch(actions.updateSelectedAssetBuyState(AsyncProcessState.PENDING)), - onBuySuccess: buyQuote => dispatch(actions.updateSelectedAssetBuyState(AsyncProcessState.SUCCESS)), - onBuyFailure: buyQuote => dispatch(actions.updateSelectedAssetBuyState(AsyncProcessState.FAILURE)), + onClick: buyQuote => dispatch(actions.updatebuyOrderState(AsyncProcessState.PENDING)), + onBuySuccess: buyQuote => dispatch(actions.updatebuyOrderState(AsyncProcessState.SUCCESS)), + onBuyFailure: buyQuote => dispatch(actions.updatebuyOrderState(AsyncProcessState.FAILURE)), }); export const SelectedAssetBuyButton: React.ComponentClass = connect( -- cgit v1.2.3 From 9f924e459c43c023e35ab7222cd9824cc0e67411 Mon Sep 17 00:00:00 2001 From: Jacob Evans Date: Thu, 18 Oct 2018 21:51:56 +1100 Subject: chore: change package org from 0xproject to 0x --- packages/instant/src/containers/latest_buy_quote_order_details.ts | 4 ++-- packages/instant/src/containers/selected_asset_amount_input.ts | 6 +++--- packages/instant/src/containers/selected_asset_buy_button.ts | 2 +- packages/instant/src/containers/selected_asset_instant_heading.ts | 2 +- 4 files changed, 7 insertions(+), 7 deletions(-) (limited to 'packages/instant/src/containers') diff --git a/packages/instant/src/containers/latest_buy_quote_order_details.ts b/packages/instant/src/containers/latest_buy_quote_order_details.ts index b354c78fa..597bf3088 100644 --- a/packages/instant/src/containers/latest_buy_quote_order_details.ts +++ b/packages/instant/src/containers/latest_buy_quote_order_details.ts @@ -1,5 +1,5 @@ -import { BuyQuoteInfo } from '@0xproject/asset-buyer'; -import { BigNumber } from '@0xproject/utils'; +import { BuyQuoteInfo } from '@0x/asset-buyer'; +import { BigNumber } from '@0x/utils'; import * as _ from 'lodash'; import * as React from 'react'; import { connect } from 'react-redux'; diff --git a/packages/instant/src/containers/selected_asset_amount_input.ts b/packages/instant/src/containers/selected_asset_amount_input.ts index 0873f1ab6..0810b093a 100644 --- a/packages/instant/src/containers/selected_asset_amount_input.ts +++ b/packages/instant/src/containers/selected_asset_amount_input.ts @@ -1,6 +1,6 @@ -import { BuyQuote } from '@0xproject/asset-buyer'; -import { BigNumber } from '@0xproject/utils'; -import { Web3Wrapper } from '@0xproject/web3-wrapper'; +import { BuyQuote } from '@0x/asset-buyer'; +import { BigNumber } from '@0x/utils'; +import { Web3Wrapper } from '@0x/web3-wrapper'; import * as _ from 'lodash'; import * as React from 'react'; import { connect } from 'react-redux'; diff --git a/packages/instant/src/containers/selected_asset_buy_button.ts b/packages/instant/src/containers/selected_asset_buy_button.ts index 7d3919468..4a8e31525 100644 --- a/packages/instant/src/containers/selected_asset_buy_button.ts +++ b/packages/instant/src/containers/selected_asset_buy_button.ts @@ -1,4 +1,4 @@ -import { BuyQuote } from '@0xproject/asset-buyer'; +import { BuyQuote } from '@0x/asset-buyer'; import * as _ from 'lodash'; import * as React from 'react'; import { connect } from 'react-redux'; diff --git a/packages/instant/src/containers/selected_asset_instant_heading.ts b/packages/instant/src/containers/selected_asset_instant_heading.ts index be31527f1..0509db5da 100644 --- a/packages/instant/src/containers/selected_asset_instant_heading.ts +++ b/packages/instant/src/containers/selected_asset_instant_heading.ts @@ -1,4 +1,4 @@ -import { BigNumber } from '@0xproject/utils'; +import { BigNumber } from '@0x/utils'; import * as _ from 'lodash'; import * as React from 'react'; import { connect } from 'react-redux'; -- cgit v1.2.3