3 files changed, 68 insertions, 0 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..958f500bb
--- /dev/null
+++ b/packages/instant/src/util/asset_data.ts
@@ -0,0 +1,18 @@
+import { AssetProxyId } from '@0xproject/types';
+
+import { assetMetaData } from '../data/asset_meta_data';
+
+// TODO: tests for this
+export const bestNameForAsset = (assetData: string | undefined, defaultString: string) => {
+    if (assetData === undefined) {
+        return defaultString;
+    }
+    const metaData = assetMetaData[assetData];
+    if (metaData === undefined) {
+        return defaultString;
+    }
+    if (metaData.assetProxyId === AssetProxyId.ERC20) {
+        return metaData.symbol.toUpperCase();
+    }
+    return defaultString;
+};
diff --git a/packages/instant/src/util/error_description.ts b/packages/instant/src/util/error_description.ts
new file mode 100644
index 000000000..78af9e9ff
--- /dev/null
+++ b/packages/instant/src/util/error_description.ts
@@ -0,0 +1,23 @@
+import { AssetBuyerError } from '@0xproject/asset-buyer';
+
+import { bestNameForAsset } from '../util/asset_data';
+
+const humanReadableMessageForError = (error: Error, assetData?: string): string | undefined => {
+    if (error.message === AssetBuyerError.InsufficientAssetLiquidity) {
+        const assetName = bestNameForAsset(assetData, 'of this asset');
+        return `Not enough ${assetName} available`;
+    }
+
+    return undefined;
+};
+
+export const 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/error_flasher.ts b/packages/instant/src/util/error_flasher.ts
new file mode 100644
index 000000000..f43c4211b
--- /dev/null
+++ b/packages/instant/src/util/error_flasher.ts
@@ -0,0 +1,27 @@
+import { Dispatch } from 'redux';
+
+import { Action, actions } from '../redux/actions';
+
+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);
+        }
+    }
+}
+export const errorFlasher = new ErrorFlasher();