3 files changed, 97 insertions, 6 deletions
diff --git a/packages/instant/src/util/asset_data.ts b/packages/instant/src/util/asset_data.ts
new file mode 100644
index 000000000..f7c5b78cd
--- /dev/null
+++ b/packages/instant/src/util/asset_data.ts
@@ -0,0 +1,21 @@
+import * as _ from 'lodash';
+
+import { AssetProxyId } from '@0xproject/types';
+
+import { assetMetaData } from '../data/asset_meta_data';
+
+export const assetDataUtil = {
+    bestNameForAsset: (assetData: string | undefined, defaultString: string) => {
+        if (_.isUndefined(assetData)) {
+            return defaultString;
+        }
+        const metaData = assetMetaData[assetData];
+        if (_.isUndefined(metaData)) {
+            return defaultString;
+        }
+        if (metaData.assetProxyId === AssetProxyId.ERC20) {
+            return metaData.symbol.toUpperCase();
+        }
+        return defaultString;
+    },
+};
diff --git a/packages/instant/src/util/error.ts b/packages/instant/src/util/error.ts
new file mode 100644
index 000000000..48cb131a9
--- /dev/null
+++ b/packages/instant/src/util/error.ts
@@ -0,0 +1,62 @@
+import { AssetBuyerError } from '@0xproject/asset-buyer';
+import { Dispatch } from 'redux';
+
+import { Action, actions } from '../redux/actions';
+import { assetDataUtil } from '../util/asset_data';
+
+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, assetData?: string): string | undefined => {
+    const hasInsufficientLiquidity =
+        error.message === AssetBuyerError.InsufficientAssetLiquidity ||
+        error.message === AssetBuyerError.InsufficientZrxLiquidity;
+    if (hasInsufficientLiquidity) {
+        const assetName = assetDataUtil.bestNameForAsset(assetData, 'of this asset');
+        return `Not enough ${assetName} available`;
+    }
+
+    if (
+        error.message === AssetBuyerError.StandardRelayerApiError ||
+        error.message.startsWith(AssetBuyerError.AssetUnavailable)
+    ) {
+        const assetName = assetDataUtil.bestNameForAsset(assetData, 'This asset');
+        return `${assetName} is currently unavailable`;
+    }
+
+    return undefined;
+};
+
+export const errorUtil = {
+    errorFlasher: new ErrorFlasher(),
+    errorDescription: (error?: any, assetData?: string): { icon: string; message: string } => {
+        let bestMessage: string | undefined;
+        if (error instanceof Error) {
+            bestMessage = humanReadableMessageForError(error, assetData);
+        }
+        return {
+            icon: '😢',
+            message: bestMessage || 'Something went wrong...',
+        };
+    },
+};
diff --git a/packages/instant/src/util/format.ts b/packages/instant/src/util/format.ts
index b62c968fb..09eb880b2 100644
--- a/packages/instant/src/util/format.ts
+++ b/packages/instant/src/util/format.ts
@@ -5,14 +5,22 @@ import * as _ from 'lodash';
 import { ethDecimals } from '../constants';
 
 export const format = {
-    ethBaseAmount: (ethBaseAmount?: BigNumber, decimalPlaces: number = 4, defaultText: string = '0 ETH'): string => {
+    ethBaseAmount: (
+        ethBaseAmount?: BigNumber,
+        decimalPlaces: number = 4,
+        defaultText: React.ReactNode = '0 ETH',
+    ): React.ReactNode => {
         if (_.isUndefined(ethBaseAmount)) {
             return defaultText;
         }
         const ethUnitAmount = Web3Wrapper.toUnitAmount(ethBaseAmount, ethDecimals);
         return format.ethUnitAmount(ethUnitAmount, decimalPlaces);
     },
-    ethUnitAmount: (ethUnitAmount?: BigNumber, decimalPlaces: number = 4, defaultText: string = '0 ETH'): string => {
+    ethUnitAmount: (
+        ethUnitAmount?: BigNumber,
+        decimalPlaces: number = 4,
+        defaultText: React.ReactNode = '0 ETH',
+    ): React.ReactNode => {
         if (_.isUndefined(ethUnitAmount)) {
             return defaultText;
         }
@@ -23,8 +31,8 @@ export const format = {
         ethBaseAmount?: BigNumber,
         ethUsdPrice?: BigNumber,
         decimalPlaces: number = 2,
-        defaultText: string = '$0.00',
-    ): string => {
+        defaultText: React.ReactNode = '$0.00',
+    ): React.ReactNode => {
         if (_.isUndefined(ethBaseAmount) || _.isUndefined(ethUsdPrice)) {
             return defaultText;
         }
@@ -35,8 +43,8 @@ export const format = {
         ethUnitAmount?: BigNumber,
         ethUsdPrice?: BigNumber,
         decimalPlaces: number = 2,
-        defaultText: string = '$0.00',
-    ): string => {
+        defaultText: React.ReactNode = '$0.00',
+    ): React.ReactNode => {
         if (_.isUndefined(ethUnitAmount) || _.isUndefined(ethUsdPrice)) {
             return defaultText;
         }