5 files changed, 98 insertions, 13 deletions
diff --git a/packages/instant/src/util/asset.ts b/packages/instant/src/util/asset.ts
index ec22276ae..edeac0da3 100644
--- a/packages/instant/src/util/asset.ts
+++ b/packages/instant/src/util/asset.ts
@@ -1,5 +1,5 @@
-import { assetDataUtils } from '@0xproject/order-utils';
-import { AssetProxyId, ObjectMap } from '@0xproject/types';
+import { assetDataUtils } from '@0x/order-utils';
+import { AssetProxyId, ObjectMap } from '@0x/types';
 import * as _ from 'lodash';
 
 import { assetDataNetworkMapping } from '../data/asset_data_network_mapping';
@@ -8,7 +8,6 @@ import { Asset, AssetMetaData, Network, ZeroExInstantError } from '../types';
 export const assetUtils = {
     createAssetFromAssetData: (assetData: string, assetMetaDataMap: ObjectMap<AssetMetaData>): Asset => {
         return {
-            assetProxyId: assetDataUtils.decodeAssetProxyId(assetData),
             assetData,
             metaData: assetUtils.getMetaDataOrThrow(assetData, assetMetaDataMap),
         };
@@ -31,4 +30,18 @@ export const assetUtils = {
         }
         return metaData;
     },
+    bestNameForAsset: (asset?: Asset, defaultName: string = '???'): string => {
+        if (_.isUndefined(asset)) {
+            return defaultName;
+        }
+        const metaData = asset.metaData;
+        switch (metaData.assetProxyId) {
+            case AssetProxyId.ERC20:
+                return metaData.symbol;
+            case AssetProxyId.ERC721:
+                return metaData.name;
+            default:
+                return defaultName;
+        }
+    },
 };
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..40fd24c7e
--- /dev/null
+++ b/packages/instant/src/util/error.ts
@@ -0,0 +1,64 @@
+import { AssetBuyerError } from '@0x/asset-buyer';
+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`;
+    }
+
+    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);
+        }
+        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';