From 4f5ab1a72d33dc6a7516d7b1d51f1aa15752a6b8 Mon Sep 17 00:00:00 2001 From: Brandon Millman Date: Fri, 26 Oct 2018 15:32:04 -0700 Subject: Refactor error handling such that errorMessage lives on the top level state --- packages/instant/src/components/buy_button.tsx | 4 +- .../instant/src/components/zero_ex_instant.tsx | 4 +- packages/instant/src/containers/latest_error.tsx | 14 ++--- .../src/containers/selected_asset_buy_button.ts | 8 ++- .../selected_erc20_asset_amount_input.ts | 22 +++++-- packages/instant/src/redux/actions.ts | 4 +- packages/instant/src/redux/reducer.ts | 20 +++--- packages/instant/src/util/error.ts | 71 ---------------------- packages/instant/src/util/error_flasher.ts | 26 ++++++++ packages/instant/test/util/error.test.ts | 56 ----------------- 10 files changed, 71 insertions(+), 158 deletions(-) delete mode 100644 packages/instant/src/util/error.ts create mode 100644 packages/instant/src/util/error_flasher.ts delete mode 100644 packages/instant/test/util/error.test.ts diff --git a/packages/instant/src/components/buy_button.tsx b/packages/instant/src/components/buy_button.tsx index a70269dde..9e06604e0 100644 --- a/packages/instant/src/components/buy_button.tsx +++ b/packages/instant/src/components/buy_button.tsx @@ -13,7 +13,7 @@ export interface BuyButtonProps { buyQuote?: BuyQuote; assetBuyer?: AssetBuyer; onAwaitingSignature: (buyQuote: BuyQuote) => void; - onSignatureDenied: (buyQuote: BuyQuote, preventedError: Error) => void; + onSignatureDenied: (buyQuote: BuyQuote) => void; onBuyProcessing: (buyQuote: BuyQuote, txHash: string) => void; onBuySuccess: (buyQuote: BuyQuote, txHash: string) => void; onBuyFailure: (buyQuote: BuyQuote, txHash: string) => void; @@ -48,7 +48,7 @@ export class BuyButton extends React.Component { txHash = await assetBuyer.executeBuyQuoteAsync(buyQuote); } catch (e) { if (e instanceof Error && e.message === AssetBuyerError.SignatureRequestDenied) { - this.props.onSignatureDenied(buyQuote, e); + this.props.onSignatureDenied(buyQuote); return; } throw e; diff --git a/packages/instant/src/components/zero_ex_instant.tsx b/packages/instant/src/components/zero_ex_instant.tsx index b080f0bad..19a2d6b9b 100644 --- a/packages/instant/src/components/zero_ex_instant.tsx +++ b/packages/instant/src/components/zero_ex_instant.tsx @@ -12,7 +12,7 @@ import { fonts } from '../style/fonts'; import { AssetMetaData, Network } from '../types'; import { assetUtils } from '../util/asset'; import { BigNumberInput } from '../util/big_number_input'; -import { errorUtil } from '../util/error'; +import { errorFlasher } from '../util/error_flasher'; import { getProvider } from '../util/provider'; import { web3Wrapper } from '../util/web3_wrapper'; @@ -98,7 +98,7 @@ export class ZeroExInstant extends React.Component { const networkOfProvider = await web3Wrapper.getNetworkIdAsync(); if (network !== networkOfProvider) { const errorMessage = `Wrong network detected. Try switching to ${Network[network]}.`; - errorUtil.errorFlasher.flashNewError(this._store.dispatch, errorMessage, msToShowError); + errorFlasher.flashNewErrorMessage(this._store.dispatch, errorMessage, msToShowError); } }; } diff --git a/packages/instant/src/containers/latest_error.tsx b/packages/instant/src/containers/latest_error.tsx index b75ec00aa..45ca09673 100644 --- a/packages/instant/src/containers/latest_error.tsx +++ b/packages/instant/src/containers/latest_error.tsx @@ -5,32 +5,30 @@ import { connect } from 'react-redux'; import { SlidingError } from '../components/sliding_error'; import { State } from '../redux/reducer'; import { Asset, DisplayStatus } from '../types'; -import { errorUtil } from '../util/error'; export interface LatestErrorComponentProps { asset?: Asset; - latestError?: any; + latestErrorMessage?: string; slidingDirection: 'down' | 'up'; } export const LatestErrorComponent: React.StatelessComponent = props => { - if (!props.latestError) { + if (!props.latestErrorMessage) { return
; } - const { icon, message } = errorUtil.errorDescription(props.latestError, props.asset); - return ; + return ; }; interface ConnectedState { asset?: Asset; - latestError?: any; + latestErrorMessage?: string; slidingDirection: 'down' | 'up'; } export interface LatestErrorProps {} const mapStateToProps = (state: State, _ownProps: LatestErrorProps): ConnectedState => ({ asset: state.selectedAsset, - latestError: state.latestError, - slidingDirection: state.latestErrorDisplay === DisplayStatus.Present ? 'up' : 'down', + latestErrorMessage: state.latestErrorMessage, + slidingDirection: state.latestErrorDisplayStatus === DisplayStatus.Present ? 'up' : 'down', }); export const LatestError = connect(mapStateToProps)(LatestErrorComponent); diff --git a/packages/instant/src/containers/selected_asset_buy_button.ts b/packages/instant/src/containers/selected_asset_buy_button.ts index adcbd61bc..377831b43 100644 --- a/packages/instant/src/containers/selected_asset_buy_button.ts +++ b/packages/instant/src/containers/selected_asset_buy_button.ts @@ -7,6 +7,7 @@ import { Dispatch } from 'redux'; import { Action, actions } from '../redux/actions'; import { State } from '../redux/reducer'; import { OrderProcessState, OrderState } from '../types'; +import { errorFlasher } from '../util/error_flasher'; import { BuyButton } from '../components/buy_button'; @@ -19,7 +20,7 @@ interface ConnectedState { interface ConnectedDispatch { onAwaitingSignature: (buyQuote: BuyQuote) => void; - onSignatureDenied: (buyQuote: BuyQuote, error: Error) => void; + onSignatureDenied: (buyQuote: BuyQuote) => void; onBuyProcessing: (buyQuote: BuyQuote, txHash: string) => void; onBuySuccess: (buyQuote: BuyQuote, txHash: string) => void; onBuyFailure: (buyQuote: BuyQuote, txHash: string) => void; @@ -43,9 +44,10 @@ const mapDispatchToProps = (dispatch: Dispatch, ownProps: SelectedAssetB dispatch(actions.updateBuyOrderState({ processState: OrderProcessState.SUCCESS, txHash })), onBuyFailure: (buyQuote: BuyQuote, txHash: string) => dispatch(actions.updateBuyOrderState({ processState: OrderProcessState.FAILURE, txHash })), - onSignatureDenied: (buyQuote, error) => { + onSignatureDenied: () => { dispatch(actions.resetAmount()); - dispatch(actions.setError(error)); + const errorMessage = 'You denied this transaction'; + 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 ee76e9d66..8fcb430a7 100644 --- a/packages/instant/src/containers/selected_erc20_asset_amount_input.ts +++ b/packages/instant/src/containers/selected_erc20_asset_amount_input.ts @@ -1,4 +1,4 @@ -import { AssetBuyer, BuyQuote } from '@0x/asset-buyer'; +import { AssetBuyer, AssetBuyerError, BuyQuote } from '@0x/asset-buyer'; import { AssetProxyId } from '@0x/types'; import { BigNumber } from '@0x/utils'; import { Web3Wrapper } from '@0x/web3-wrapper'; @@ -11,8 +11,9 @@ import { Action, actions } from '../redux/actions'; import { State } from '../redux/reducer'; import { ColorOption } from '../style/theme'; import { ERC20Asset, OrderProcessState } from '../types'; +import { assetUtils } from '../util/asset'; import { BigNumberInput } from '../util/big_number_input'; -import { errorUtil } from '../util/error'; +import { errorFlasher } from '../util/error_flasher'; import { ERC20AssetAmountInput } from '../components/erc20_asset_amount_input'; @@ -70,11 +71,24 @@ const updateBuyQuoteAsync = async ( newBuyQuote = await assetBuyer.getBuyQuoteAsync(asset.assetData, baseUnitValue); } catch (error) { dispatch(actions.setQuoteRequestStateFailure()); - errorUtil.errorFlasher.flashNewError(dispatch, error); + let errorMessage; + if (error.message === AssetBuyerError.InsufficientAssetLiquidity) { + const assetName = assetUtils.bestNameForAsset(asset, 'of this asset'); + errorMessage = `Not enough ${assetName} available`; + } else if (error.message === AssetBuyerError.InsufficientZrxLiquidity) { + errorMessage = 'Not enough ZRX available'; + } else if ( + error.message === AssetBuyerError.StandardRelayerApiError || + error.message.startsWith(AssetBuyerError.AssetUnavailable) + ) { + const assetName = assetUtils.bestNameForAsset(asset, 'This asset'); + errorMessage = `${assetName} is currently unavailable`; + } + errorFlasher.flashNewErrorMessage(dispatch, errorMessage); return; } // We have a successful new buy quote - errorUtil.errorFlasher.clearError(dispatch); + errorFlasher.clearError(dispatch); // invalidate the last buy quote. dispatch(actions.updateLatestBuyQuote(newBuyQuote)); }; diff --git a/packages/instant/src/redux/actions.ts b/packages/instant/src/redux/actions.ts index 46045024b..bfae68e2b 100644 --- a/packages/instant/src/redux/actions.ts +++ b/packages/instant/src/redux/actions.ts @@ -30,7 +30,7 @@ export enum ActionTypes { UPDATE_SELECTED_ASSET = 'UPDATE_SELECTED_ASSET', SET_QUOTE_REQUEST_STATE_PENDING = 'SET_QUOTE_REQUEST_STATE_PENDING', SET_QUOTE_REQUEST_STATE_FAILURE = 'SET_QUOTE_REQUEST_STATE_FAILURE', - SET_ERROR = 'SET_ERROR', + SET_ERROR_MESSAGE = 'SET_ERROR_MESSAGE', HIDE_ERROR = 'HIDE_ERROR', CLEAR_ERROR = 'CLEAR_ERROR', RESET_AMOUNT = 'RESET_AMOUNT', @@ -45,7 +45,7 @@ export const actions = { updateSelectedAsset: (assetData?: string) => createAction(ActionTypes.UPDATE_SELECTED_ASSET, assetData), setQuoteRequestStatePending: () => createAction(ActionTypes.SET_QUOTE_REQUEST_STATE_PENDING), setQuoteRequestStateFailure: () => createAction(ActionTypes.SET_QUOTE_REQUEST_STATE_FAILURE), - setError: (error?: any) => createAction(ActionTypes.SET_ERROR, error), + setErrorMessage: (errorMessage: string) => createAction(ActionTypes.SET_ERROR_MESSAGE, errorMessage), hideError: () => createAction(ActionTypes.HIDE_ERROR), clearError: () => createAction(ActionTypes.CLEAR_ERROR), resetAmount: () => createAction(ActionTypes.RESET_AMOUNT), diff --git a/packages/instant/src/redux/reducer.ts b/packages/instant/src/redux/reducer.ts index d7e5bdfb5..3884eeea9 100644 --- a/packages/instant/src/redux/reducer.ts +++ b/packages/instant/src/redux/reducer.ts @@ -28,8 +28,8 @@ export interface State { ethUsdPrice?: BigNumber; latestBuyQuote?: BuyQuote; quoteRequestState: AsyncProcessState; - latestError?: any; - latestErrorDisplay: DisplayStatus; + latestErrorMessage?: string; + latestErrorDisplayStatus: DisplayStatus; } export const INITIAL_STATE: State = { @@ -39,8 +39,8 @@ export const INITIAL_STATE: State = { buyOrderState: { processState: OrderProcessState.NONE }, ethUsdPrice: undefined, latestBuyQuote: undefined, - latestError: undefined, - latestErrorDisplay: DisplayStatus.Hidden, + latestErrorMessage: undefined, + latestErrorDisplayStatus: DisplayStatus.Hidden, quoteRequestState: AsyncProcessState.NONE, }; @@ -79,22 +79,22 @@ export const reducer = (state: State = INITIAL_STATE, action: Action): State => ...state, buyOrderState: action.data, }; - case ActionTypes.SET_ERROR: + case ActionTypes.SET_ERROR_MESSAGE: return { ...state, - latestError: action.data, - latestErrorDisplay: DisplayStatus.Present, + latestErrorMessage: action.data, + latestErrorDisplayStatus: DisplayStatus.Present, }; case ActionTypes.HIDE_ERROR: return { ...state, - latestErrorDisplay: DisplayStatus.Hidden, + latestErrorDisplayStatus: DisplayStatus.Hidden, }; case ActionTypes.CLEAR_ERROR: return { ...state, - latestError: undefined, - latestErrorDisplay: DisplayStatus.Hidden, + latestErrorMessage: undefined, + latestErrorDisplayStatus: DisplayStatus.Hidden, }; case ActionTypes.UPDATE_SELECTED_ASSET: const newSelectedAssetData = action.data; diff --git a/packages/instant/src/util/error.ts b/packages/instant/src/util/error.ts deleted file mode 100644 index 844a28d8b..000000000 --- a/packages/instant/src/util/error.ts +++ /dev/null @@ -1,71 +0,0 @@ -import { AssetBuyerError } from '@0x/asset-buyer'; -import * as _ from 'lodash'; -import { Dispatch } from 'redux'; - -import { Action, actions } from '../redux/actions'; -import { Asset } from '../types'; - -import { assetUtils } from './asset'; - -class ErrorFlasher { - private _timeoutId?: number; - public flashNewError(dispatch: Dispatch, error: any, delayMs: number = 7000): void { - this._clearTimeout(); - // dispatch new message - dispatch(actions.setError(error)); - - this._timeoutId = window.setTimeout(() => { - dispatch(actions.hideError()); - }, delayMs); - } - public clearError(dispatch: Dispatch): void { - this._clearTimeout(); - dispatch(actions.hideError()); - } - private _clearTimeout(): void { - if (this._timeoutId) { - window.clearTimeout(this._timeoutId); - } - } -} - -const humanReadableMessageForError = (error: Error, asset?: Asset): string | undefined => { - const hasInsufficientLiquidity = - error.message === AssetBuyerError.InsufficientAssetLiquidity || - error.message === AssetBuyerError.InsufficientZrxLiquidity; - if (hasInsufficientLiquidity) { - const assetName = assetUtils.bestNameForAsset(asset, 'of this asset'); - return `Not enough ${assetName} available`; - } - - if ( - error.message === AssetBuyerError.StandardRelayerApiError || - error.message.startsWith(AssetBuyerError.AssetUnavailable) - ) { - const assetName = assetUtils.bestNameForAsset(asset, 'This asset'); - return `${assetName} is currently unavailable`; - } - - if (error.message === AssetBuyerError.SignatureRequestDenied) { - return 'You denied this transaction'; - } - - return undefined; -}; - -export const errorUtil = { - errorFlasher: new ErrorFlasher(), - errorDescription: (error?: any, asset?: Asset): { icon: string; message: string } => { - let bestMessage: string | undefined; - if (error instanceof Error) { - bestMessage = humanReadableMessageForError(error, asset); - } - if (_.isString(error)) { - bestMessage = error; - } - return { - icon: '😢', - message: bestMessage || 'Something went wrong...', - }; - }, -}; diff --git a/packages/instant/src/util/error_flasher.ts b/packages/instant/src/util/error_flasher.ts new file mode 100644 index 000000000..068c12fe2 --- /dev/null +++ b/packages/instant/src/util/error_flasher.ts @@ -0,0 +1,26 @@ +import { Dispatch } from 'redux'; + +import { Action, actions } from '../redux/actions'; + +class ErrorFlasher { + private _timeoutId?: number; + public flashNewErrorMessage(dispatch: Dispatch, errorMessage?: string, delayMs: number = 7000): void { + this._clearTimeout(); + // dispatch new message + dispatch(actions.setErrorMessage(errorMessage || 'Something went wrong...')); + this._timeoutId = window.setTimeout(() => { + dispatch(actions.hideError()); + }, delayMs); + } + public clearError(dispatch: Dispatch): void { + this._clearTimeout(); + dispatch(actions.hideError()); + } + private _clearTimeout(): void { + if (this._timeoutId) { + window.clearTimeout(this._timeoutId); + } + } +} + +export const errorFlasher = new ErrorFlasher(); diff --git a/packages/instant/test/util/error.test.ts b/packages/instant/test/util/error.test.ts deleted file mode 100644 index 90e9c5fb4..000000000 --- a/packages/instant/test/util/error.test.ts +++ /dev/null @@ -1,56 +0,0 @@ -import { AssetBuyerError } from '@0x/asset-buyer'; -import { AssetProxyId } from '@0x/types'; - -import { Asset } from '../../src/types'; -import { errorUtil } from '../../src/util/error'; - -const ZRX_ASSET_DATA = '0xf47261b0000000000000000000000000e41d2489571d322189246dafa5ebde1f4699f498'; -const ZRX_ASSET: Asset = { - assetData: ZRX_ASSET_DATA, - metaData: { - assetProxyId: AssetProxyId.ERC20, - symbol: 'zrx', - decimals: 18, - }, -}; - -describe('errorUtil', () => { - describe('errorFlasher', () => { - it('should return error and asset name for InsufficientAssetLiquidity', () => { - const insufficientAssetError = new Error(AssetBuyerError.InsufficientAssetLiquidity); - expect(errorUtil.errorDescription(insufficientAssetError, ZRX_ASSET).message).toEqual( - 'Not enough ZRX available', - ); - }); - it('should return error default name for InsufficientAssetLiquidity', () => { - const insufficientZrxError = new Error(AssetBuyerError.InsufficientZrxLiquidity); - expect(errorUtil.errorDescription(insufficientZrxError).message).toEqual( - 'Not enough of this asset available', - ); - }); - it('should return asset name for InsufficientAssetLiquidity', () => { - const insufficientZrxError = new Error(AssetBuyerError.InsufficientZrxLiquidity); - expect(errorUtil.errorDescription(insufficientZrxError, ZRX_ASSET).message).toEqual( - 'Not enough ZRX available', - ); - }); - it('should return unavailable error and asset name for StandardRelayerApiError', () => { - const standardRelayerError = new Error(AssetBuyerError.StandardRelayerApiError); - expect(errorUtil.errorDescription(standardRelayerError, ZRX_ASSET).message).toEqual( - 'ZRX is currently unavailable', - ); - }); - it('should return error for AssetUnavailable error', () => { - const assetUnavailableError = new Error(`${AssetBuyerError.AssetUnavailable}: For assetData ${ZRX_ASSET}`); - expect(errorUtil.errorDescription(assetUnavailableError, ZRX_ASSET).message).toEqual( - 'ZRX is currently unavailable', - ); - }); - it('should return default for AssetUnavailable error', () => { - const assetUnavailableError = new Error(`${AssetBuyerError.AssetUnavailable}: For assetData xyz`); - expect(errorUtil.errorDescription(assetUnavailableError, undefined).message).toEqual( - 'This asset is currently unavailable', - ); - }); - }); -}); -- cgit v1.2.3