6 files changed, 102 insertions, 11 deletions
diff --git a/packages/instant/src/util/asset_buyer.ts b/packages/instant/src/util/asset_buyer.ts
index 27d66d600..6855fbcab 100644
--- a/packages/instant/src/util/asset_buyer.ts
+++ b/packages/instant/src/util/asset_buyer.ts
@@ -1,4 +1,4 @@
-import { AssetBuyer } from '@0xproject/asset-buyer';
+import { AssetBuyer } from '@0x/asset-buyer';
 
 import { sraApiUrl } from '../constants';
 
diff --git a/packages/instant/src/util/asset_data.ts b/packages/instant/src/util/asset_data.ts
new file mode 100644
index 000000000..fea2e2b19
--- /dev/null
+++ b/packages/instant/src/util/asset_data.ts
@@ -0,0 +1,21 @@
+import * as _ from 'lodash';
+
+import { AssetProxyId } from '@0x/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/coinbase_api.ts b/packages/instant/src/util/coinbase_api.ts
index 94a5d3c80..080421f98 100644
--- a/packages/instant/src/util/coinbase_api.ts
+++ b/packages/instant/src/util/coinbase_api.ts
@@ -1,4 +1,4 @@
-import { BigNumber } from '@0xproject/utils';
+import { BigNumber } from '@0x/utils';
 
 const baseEndpoint = 'https://api.coinbase.com/v2';
 export const coinbaseApi = {
diff --git a/packages/instant/src/util/error.ts b/packages/instant/src/util/error.ts
new file mode 100644
index 000000000..c9b13ef83
--- /dev/null
+++ b/packages/instant/src/util/error.ts
@@ -0,0 +1,62 @@
+import { AssetBuyerError } from '@0x/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..8482b1526 100644
--- a/packages/instant/src/util/format.ts
+++ b/packages/instant/src/util/format.ts
@@ -1,18 +1,26 @@
-import { BigNumber } from '@0xproject/utils';
-import { Web3Wrapper } from '@0xproject/web3-wrapper';
+import { BigNumber } from '@0x/utils';
+import { Web3Wrapper } from '@0x/web3-wrapper';
 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;
         }
diff --git a/packages/instant/src/util/web3_wrapper.ts b/packages/instant/src/util/web3_wrapper.ts
index d7e43521f..24dcd9076 100644
--- a/packages/instant/src/util/web3_wrapper.ts
+++ b/packages/instant/src/util/web3_wrapper.ts
@@ -1,4 +1,4 @@
-import { Web3Wrapper } from '@0xproject/web3-wrapper';
+import { Web3Wrapper } from '@0x/web3-wrapper';
 
 import { getProvider } from './provider';