aboutsummaryrefslogtreecommitdiffstats
path: root/packages/instant/src
diff options
context:
space:
mode:
authorBrandon Millman <brandon.millman@gmail.com>2018-10-27 06:32:04 +0800
committerBrandon Millman <brandon.millman@gmail.com>2018-10-27 06:45:17 +0800
commit4f5ab1a72d33dc6a7516d7b1d51f1aa15752a6b8 (patch)
treebf3766ecf6ea51c6dfcd1d286c572b3410088087 /packages/instant/src
parent51da5311b54733540f44f938a0c953bb4ae42052 (diff)
downloaddexon-sol-tools-4f5ab1a72d33dc6a7516d7b1d51f1aa15752a6b8.tar
dexon-sol-tools-4f5ab1a72d33dc6a7516d7b1d51f1aa15752a6b8.tar.gz
dexon-sol-tools-4f5ab1a72d33dc6a7516d7b1d51f1aa15752a6b8.tar.bz2
dexon-sol-tools-4f5ab1a72d33dc6a7516d7b1d51f1aa15752a6b8.tar.lz
dexon-sol-tools-4f5ab1a72d33dc6a7516d7b1d51f1aa15752a6b8.tar.xz
dexon-sol-tools-4f5ab1a72d33dc6a7516d7b1d51f1aa15752a6b8.tar.zst
dexon-sol-tools-4f5ab1a72d33dc6a7516d7b1d51f1aa15752a6b8.zip
Refactor error handling such that errorMessage lives on the top level state
Diffstat (limited to 'packages/instant/src')
-rw-r--r--packages/instant/src/components/buy_button.tsx4
-rw-r--r--packages/instant/src/components/zero_ex_instant.tsx4
-rw-r--r--packages/instant/src/containers/latest_error.tsx14
-rw-r--r--packages/instant/src/containers/selected_asset_buy_button.ts8
-rw-r--r--packages/instant/src/containers/selected_erc20_asset_amount_input.ts22
-rw-r--r--packages/instant/src/redux/actions.ts4
-rw-r--r--packages/instant/src/redux/reducer.ts20
-rw-r--r--packages/instant/src/util/error.ts71
-rw-r--r--packages/instant/src/util/error_flasher.ts26
9 files changed, 71 insertions, 102 deletions
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<BuyButtonProps> {
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<ZeroExInstantProps> {
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<LatestErrorComponentProps> = props => {
- if (!props.latestError) {
+ if (!props.latestErrorMessage) {
return <div />;
}
- const { icon, message } = errorUtil.errorDescription(props.latestError, props.asset);
- return <SlidingError direction={props.slidingDirection} icon={icon} message={message} />;
+ return <SlidingError direction={props.slidingDirection} icon="😢" message={props.latestErrorMessage} />;
};
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<Action>, 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<Action>, 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<Action>): 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<Action>, 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<Action>): void {
+ this._clearTimeout();
+ dispatch(actions.hideError());
+ }
+ private _clearTimeout(): void {
+ if (this._timeoutId) {
+ window.clearTimeout(this._timeoutId);
+ }
+ }
+}
+
+export const errorFlasher = new ErrorFlasher();