feat(instant): Show message if user doesn't have enough ETH

packages/instant/src/containers/selected_asset_amount_input.ts

@@ -10,11 +10,15 @@ import { Dispatch } from 'redux';
 import { Action, actions } from '../redux/actions';
 import { State } from '../redux/reducer';
 import { ColorOption } from '../style/theme';
-import { ERC20Asset, OrderProcessState } from '../types';
+import { ERC20Asset, OrderProcessState, ZeroExInstantError } from '../types';
+import { getBestAddress } from '../util/address';
 import { errorUtil } from '../util/error';
+import { web3Wrapper } from '../util/web3_wrapper';
 
 import { AssetAmountInput } from '../components/asset_amount_input';
 
+import { ETH_DECIMALS } from '../constants';
+
 export interface SelectedAssetAmountInputProps {
     fontColor?: ColorOption;
     fontSize?: string;
@@ -76,6 +80,14 @@ const updateBuyQuoteAsync = async (
     errorUtil.errorFlasher.clearError(dispatch);
     // invalidate the last buy quote.
     dispatch(actions.updateLatestBuyQuote(newBuyQuote));
+
+    // set error if user doesn't have appropriate balance
+    const takerAddress = await getBestAddress();
+    const balanceWei = await web3Wrapper.getBalanceInWeiAsync(takerAddress);
+    if (balanceWei < newBuyQuote.worstCaseQuoteInfo.totalEthAmount) {
+        const balanceError = new Error(ZeroExInstantError.InsufficientBalance);
+        errorUtil.errorFlasher.flashNewError(dispatch, balanceError);
+    }
 };
 
 const debouncedUpdateBuyQuoteAsync = _.debounce(updateBuyQuoteAsync, 200, { trailing: true });

packages/instant/src/types.ts

@@ -72,4 +72,5 @@ export enum Network {
 
 export enum ZeroExInstantError {
     AssetMetaDataNotAvailable = 'ASSET_META_DATA_NOT_AVAILABLE',
+    InsufficientBalance = 'INSUFFICIENT_BALANCE',
 }

packages/instant/src/util/address.ts

@@ -0,0 +1,6 @@
+import { web3Wrapper } from '../util/web3_wrapper';
+
+export const getBestAddress = async (): Promise<string> => {
+    const addresses = await web3Wrapper.getAvailableAddressesAsync();
+    return addresses[0];
+};

packages/instant/src/util/error.ts

@@ -2,7 +2,7 @@ import { AssetBuyerError } from '@0x/asset-buyer';
 import { Dispatch } from 'redux';
 
 import { Action, actions } from '../redux/actions';
-import { Asset } from '../types';
+import { Asset, ZeroExInstantError } from '../types';
 
 import { assetUtils } from './asset';
 
@@ -49,6 +49,9 @@ const humanReadableMessageForError = (error: Error, asset?: Asset): string | und
     if (error.message === AssetBuyerError.SignatureRequestDenied) {
         return 'You denied this transaction';
     }
+    if (error.message === ZeroExInstantError.InsufficientBalance) {
+        return "You don't have enough ETH";
+    }
 
     return undefined;
 };