9 files changed, 69 insertions, 13 deletions
diff --git a/packages/instant/src/components/buy_button.tsx b/packages/instant/src/components/buy_button.tsx
index a70269dde..4780b80e7 100644
--- a/packages/instant/src/components/buy_button.tsx
+++ b/packages/instant/src/components/buy_button.tsx
@@ -4,6 +4,7 @@ import * as React from 'react';
 
 import { WEB_3_WRAPPER_TRANSACTION_FAILED_ERROR_MSG_PREFIX } from '../constants';
 import { ColorOption } from '../style/theme';
+import { getBestAddress } from '../util/address';
 import { util } from '../util/util';
 import { web3Wrapper } from '../util/web3_wrapper';
 
@@ -45,7 +46,8 @@ export class BuyButton extends React.Component<BuyButtonProps> {
         let txHash: string | undefined;
         this.props.onAwaitingSignature(buyQuote);
         try {
-            txHash = await assetBuyer.executeBuyQuoteAsync(buyQuote);
+            const takerAddress = await getBestAddress();
+            txHash = await assetBuyer.executeBuyQuoteAsync(buyQuote, { takerAddress });
         } catch (e) {
             if (e instanceof Error && e.message === AssetBuyerError.SignatureRequestDenied) {
                 this.props.onSignatureDenied(buyQuote, e);
diff --git a/packages/instant/src/constants.ts b/packages/instant/src/constants.ts
index 48d0d4aa2..e4281d54a 100644
--- a/packages/instant/src/constants.ts
+++ b/packages/instant/src/constants.ts
@@ -1,5 +1,5 @@
 import { BigNumber } from '@0x/utils';
 export const BIG_NUMBER_ZERO = new BigNumber(0);
-export const ethDecimals = 18;
+export const ETH_DECIMALS = 18;
 export const DEFAULT_ZERO_EX_CONTAINER_SELECTOR = '#zeroExInstantContainer';
 export const WEB_3_WRAPPER_TRANSACTION_FAILED_ERROR_MSG_PREFIX = 'Transaction failed';
diff --git a/packages/instant/src/containers/selected_erc20_asset_amount_input.ts b/packages/instant/src/containers/selected_erc20_asset_amount_input.ts
index ee76e9d66..325dc0ef2 100644
--- a/packages/instant/src/containers/selected_erc20_asset_amount_input.ts
+++ b/packages/instant/src/containers/selected_erc20_asset_amount_input.ts
@@ -7,14 +7,16 @@ import * as React from 'react';
 import { connect } from 'react-redux';
 import { Dispatch } from 'redux';
 
+import { ERC20AssetAmountInput } from '../components/erc20_asset_amount_input';
 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 { balanceUtil } from '../util/balance';
 import { BigNumberInput } from '../util/big_number_input';
 import { errorUtil } from '../util/error';
-
-import { ERC20AssetAmountInput } from '../components/erc20_asset_amount_input';
+import { web3Wrapper } from '../util/web3_wrapper';
 
 export interface SelectedERC20AssetAmountInputProps {
     fontColor?: ColorOption;
@@ -77,6 +79,10 @@ 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();
+    await balanceUtil.checkInsufficientEthBalanceAndFlashError(takerAddress, newBuyQuote, web3Wrapper, dispatch);
 };
 
 const debouncedUpdateBuyQuoteAsync = _.debounce(updateBuyQuoteAsync, 200, { trailing: true });
diff --git a/packages/instant/src/types.ts b/packages/instant/src/types.ts
index c63371fb4..174ad86e6 100644
--- a/packages/instant/src/types.ts
+++ b/packages/instant/src/types.ts
@@ -72,4 +72,5 @@ export enum Network {
 
 export enum ZeroExInstantError {
     AssetMetaDataNotAvailable = 'ASSET_META_DATA_NOT_AVAILABLE',
+    InsufficientBalance = 'INSUFFICIENT_BALANCE',
 }
diff --git a/packages/instant/src/util/address.ts b/packages/instant/src/util/address.ts
new file mode 100644
index 000000000..14d42d8c0
--- /dev/null
+++ b/packages/instant/src/util/address.ts
@@ -0,0 +1,6 @@
+import { web3Wrapper } from '../util/web3_wrapper';
+
+export const getBestAddress = async (): Promise<string | undefined> => {
+    const addresses = await web3Wrapper.getAvailableAddressesAsync();
+    return addresses[0];
+};
diff --git a/packages/instant/src/util/balance.ts b/packages/instant/src/util/balance.ts
new file mode 100644
index 000000000..954dc7156
--- /dev/null
+++ b/packages/instant/src/util/balance.ts
@@ -0,0 +1,38 @@
+import { BuyQuote } from '@0x/asset-buyer';
+import { Web3Wrapper } from '@0x/web3-wrapper';
+import * as _ from 'lodash';
+import { Dispatch } from 'redux';
+
+import { ZeroExInstantError } from '../types';
+
+import { errorUtil } from './error';
+
+const hasSufficientFunds = async (takerAddress: string | undefined, buyQuote: BuyQuote, web3Wrapper: Web3Wrapper) => {
+    if (_.isUndefined(takerAddress)) {
+        return false;
+    }
+    const balanceWei = await web3Wrapper.getBalanceInWeiAsync(takerAddress);
+    return balanceWei >= buyQuote.worstCaseQuoteInfo.totalEthAmount;
+};
+
+export const balanceUtil = {
+    /**
+     * Checks to see if user has enough balance to buy assets
+     * If they do not, flash an error and return false
+     * If they do, return true
+     */
+    checkInsufficientEthBalanceAndFlashError: async (
+        takerAddress: string | undefined,
+        buyQuote: BuyQuote,
+        web3Wrapper: Web3Wrapper,
+        dispatch: Dispatch,
+    ) => {
+        const hasEnoughFunds = await hasSufficientFunds(takerAddress, buyQuote, web3Wrapper);
+        if (hasEnoughFunds) {
+            return true;
+        }
+        const balanceError = new Error(ZeroExInstantError.InsufficientBalance);
+        errorUtil.errorFlasher.flashNewError(dispatch, balanceError);
+        return false;
+    },
+};
diff --git a/packages/instant/src/util/error.ts b/packages/instant/src/util/error.ts
index 64c1f4885..5db0c66d2 100644
--- a/packages/instant/src/util/error.ts
+++ b/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;
 };
diff --git a/packages/instant/src/util/format.ts b/packages/instant/src/util/format.ts
index ca7c01359..4a48dec9d 100644
--- a/packages/instant/src/util/format.ts
+++ b/packages/instant/src/util/format.ts
@@ -2,7 +2,7 @@ import { BigNumber } from '@0x/utils';
 import { Web3Wrapper } from '@0x/web3-wrapper';
 import * as _ from 'lodash';
 
-import { ethDecimals } from '../constants';
+import { ETH_DECIMALS } from '../constants';
 
 export const format = {
     ethBaseAmount: (
@@ -13,7 +13,7 @@ export const format = {
         if (_.isUndefined(ethBaseAmount)) {
             return defaultText;
         }
-        const ethUnitAmount = Web3Wrapper.toUnitAmount(ethBaseAmount, ethDecimals);
+        const ethUnitAmount = Web3Wrapper.toUnitAmount(ethBaseAmount, ETH_DECIMALS);
         return format.ethUnitAmount(ethUnitAmount, decimalPlaces);
     },
     ethUnitAmount: (
@@ -36,7 +36,7 @@ export const format = {
         if (_.isUndefined(ethBaseAmount) || _.isUndefined(ethUsdPrice)) {
             return defaultText;
         }
-        const ethUnitAmount = Web3Wrapper.toUnitAmount(ethBaseAmount, ethDecimals);
+        const ethUnitAmount = Web3Wrapper.toUnitAmount(ethBaseAmount, ETH_DECIMALS);
         return format.ethUnitAmountInUsd(ethUnitAmount, ethUsdPrice, decimalPlaces);
     },
     ethUnitAmountInUsd: (
diff --git a/packages/instant/test/util/format.test.ts b/packages/instant/test/util/format.test.ts
index 2c9294c78..c346b7604 100644
--- a/packages/instant/test/util/format.test.ts
+++ b/packages/instant/test/util/format.test.ts
@@ -1,15 +1,15 @@
 import { BigNumber } from '@0x/utils';
 import { Web3Wrapper } from '@0x/web3-wrapper';
 
-import { ethDecimals } from '../../src/constants';
+import { ETH_DECIMALS } from '../../src/constants';
 import { format } from '../../src/util/format';
 
 const BIG_NUMBER_ONE = new BigNumber(1);
 const BIG_NUMBER_DECIMAL = new BigNumber(0.432414);
 const BIG_NUMBER_IRRATIONAL = new BigNumber(5.3014059295032);
-const ONE_ETH_IN_BASE_UNITS = Web3Wrapper.toBaseUnitAmount(BIG_NUMBER_ONE, ethDecimals);
-const DECIMAL_ETH_IN_BASE_UNITS = Web3Wrapper.toBaseUnitAmount(BIG_NUMBER_DECIMAL, ethDecimals);
-const IRRATIONAL_ETH_IN_BASE_UNITS = Web3Wrapper.toBaseUnitAmount(BIG_NUMBER_IRRATIONAL, ethDecimals);
+const ONE_ETH_IN_BASE_UNITS = Web3Wrapper.toBaseUnitAmount(BIG_NUMBER_ONE, ETH_DECIMALS);
+const DECIMAL_ETH_IN_BASE_UNITS = Web3Wrapper.toBaseUnitAmount(BIG_NUMBER_DECIMAL, ETH_DECIMALS);
+const IRRATIONAL_ETH_IN_BASE_UNITS = Web3Wrapper.toBaseUnitAmount(BIG_NUMBER_IRRATIONAL, ETH_DECIMALS);
 const BIG_NUMBER_FAKE_ETH_USD_PRICE = new BigNumber(2.534);
 
 describe('format', () => {