feat(instant): fetch balance at startup

2 files changed, 13 insertions, 6 deletions

diff --git a/packages/instant/src/components/buy_button.tsx b/packages/instant/src/components/buy_button.tsx
index f24bb57ee..9a6e22ea9 100644
--- a/packages/instant/src/components/buy_button.tsx
+++ b/packages/instant/src/components/buy_button.tsx
@@ -1,4 +1,5 @@
 import { AssetBuyer, AssetBuyerError, BuyQuote } from '@0x/asset-buyer';
+import { BigNumber } from '@0x/utils';
 import { Web3Wrapper } from '@0x/web3-wrapper';
 import * as _ from 'lodash';
 import * as React from 'react';
@@ -7,8 +8,6 @@ import { oc } from 'ts-optchain';
 import { WEB_3_WRAPPER_TRANSACTION_FAILED_ERROR_MSG_PREFIX } from '../constants';
 import { ColorOption } from '../style/theme';
 import { AffiliateInfo, ZeroExInstantError } from '../types';
-import { getBestAddress } from '../util/address';
-import { balanceUtil } from '../util/balance';
 import { gasPriceEstimator } from '../util/gas_price_estimator';
 import { util } from '../util/util';
 
@@ -17,8 +16,10 @@ import { Text } from './ui/text';
 
 export interface BuyButtonProps {
     accountAddress?: string;
+    accountEthBalanceInWei?: BigNumber;
     buyQuote?: BuyQuote;
     assetBuyer: AssetBuyer;
+    web3Wrapper: Web3Wrapper;
     affiliateInfo?: AffiliateInfo;
     onValidationPending: (buyQuote: BuyQuote) => void;
     onValidationFail: (buyQuote: BuyQuote, errorMessage: AssetBuyerError | ZeroExInstantError) => void;
@@ -47,14 +48,14 @@ export class BuyButton extends React.Component<BuyButtonProps> {
     }
     private readonly _handleClick = async () => {
         // The button is disabled when there is no buy quote anyway.
-        const { buyQuote, assetBuyer, affiliateInfo, accountAddress } = this.props;
+        const { buyQuote, assetBuyer, affiliateInfo, accountAddress, accountEthBalanceInWei, web3Wrapper } = this.props;
         if (_.isUndefined(buyQuote) || _.isUndefined(accountAddress)) {
             return;
         }
         this.props.onValidationPending(buyQuote);
-        // TODO(bmillman): move balance fetching to the async state and get rid of web3 wrapper here
-        const web3Wrapper = new Web3Wrapper(assetBuyer.provider);
-        const hasSufficientEth = await balanceUtil.hasSufficientEth(accountAddress, buyQuote, web3Wrapper);
+        const ethNeededForBuy = buyQuote.worstCaseQuoteInfo.totalEthAmount;
+        // if we don't have a balance for the user, let the transaction through, it will be handled by the wallet
+        const hasSufficientEth = _.isUndefined(accountEthBalanceInWei) || accountEthBalanceInWei.gte(ethNeededForBuy);
         if (!hasSufficientEth) {
             this.props.onValidationFail(buyQuote, ZeroExInstantError.InsufficientETH);
             return;
diff --git a/packages/instant/src/components/buy_order_state_buttons.tsx b/packages/instant/src/components/buy_order_state_buttons.tsx
index b15415e71..b46ff7714 100644
--- a/packages/instant/src/components/buy_order_state_buttons.tsx
+++ b/packages/instant/src/components/buy_order_state_buttons.tsx
@@ -1,4 +1,6 @@
 import { AssetBuyer, AssetBuyerError, BuyQuote } from '@0x/asset-buyer';
+import { BigNumber } from '@0x/utils';
+import { Web3Wrapper } from '@0x/web3-wrapper';
 import * as React from 'react';
 
 import { ColorOption } from '../style/theme';
@@ -14,9 +16,11 @@ import { Text } from './ui/text';
 
 export interface BuyOrderStateButtonProps {
     accountAddress?: string;
+    accountEthBalanceInWei?: BigNumber;
     buyQuote?: BuyQuote;
     buyOrderProcessingState: OrderProcessState;
     assetBuyer: AssetBuyer;
+    web3Wrapper: Web3Wrapper;
     affiliateInfo?: AffiliateInfo;
     onViewTransaction: () => void;
     onValidationPending: (buyQuote: BuyQuote) => void;
@@ -54,8 +58,10 @@ export const BuyOrderStateButtons: React.StatelessComponent<BuyOrderStateButtonP
     return (
         <BuyButton
             accountAddress={props.accountAddress}
+            accountEthBalanceInWei={props.accountEthBalanceInWei}
             buyQuote={props.buyQuote}
             assetBuyer={props.assetBuyer}
+            web3Wrapper={props.web3Wrapper}
             affiliateInfo={props.affiliateInfo}
             onValidationPending={props.onValidationPending}
             onValidationFail={props.onValidationFail}