feat(instant): fetch account address at startup and drive account state changes

1 files changed, 8 insertions, 13 deletions

diff --git a/packages/instant/src/components/buy_button.tsx b/packages/instant/src/components/buy_button.tsx
index 515cd18e9..f24bb57ee 100644
--- a/packages/instant/src/components/buy_button.tsx
+++ b/packages/instant/src/components/buy_button.tsx
@@ -16,6 +16,7 @@ import { Button } from './ui/button';
 import { Text } from './ui/text';
 
 export interface BuyButtonProps {
+    accountAddress?: string;
     buyQuote?: BuyQuote;
     assetBuyer: AssetBuyer;
     affiliateInfo?: AffiliateInfo;
@@ -34,7 +35,8 @@ export class BuyButton extends React.Component<BuyButtonProps> {
         onBuyFailure: util.boundNoop,
     };
     public render(): React.ReactNode {
-        const shouldDisableButton = _.isUndefined(this.props.buyQuote);
+        const { buyQuote, accountAddress } = this.props;
+        const shouldDisableButton = _.isUndefined(buyQuote) || _.isUndefined(accountAddress);
         return (
             <Button width="100%" onClick={this._handleClick} isDisabled={shouldDisableButton}>
                 <Text fontColor={ColorOption.white} fontWeight={600} fontSize="20px">
@@ -45,30 +47,25 @@ 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 } = this.props;
-        if (_.isUndefined(buyQuote)) {
+        const { buyQuote, assetBuyer, affiliateInfo, accountAddress } = this.props;
+        if (_.isUndefined(buyQuote) || _.isUndefined(accountAddress)) {
             return;
         }
-
         this.props.onValidationPending(buyQuote);
-
-        // TODO(bmillman): move address and balance fetching to the async state
+        // TODO(bmillman): move balance fetching to the async state and get rid of web3 wrapper here
         const web3Wrapper = new Web3Wrapper(assetBuyer.provider);
-        const takerAddress = await getBestAddress(web3Wrapper);
-
-        const hasSufficientEth = await balanceUtil.hasSufficientEth(takerAddress, buyQuote, web3Wrapper);
+        const hasSufficientEth = await balanceUtil.hasSufficientEth(accountAddress, buyQuote, web3Wrapper);
         if (!hasSufficientEth) {
             this.props.onValidationFail(buyQuote, ZeroExInstantError.InsufficientETH);
             return;
         }
-
         let txHash: string | undefined;
         const gasInfo = await gasPriceEstimator.getGasInfoAsync();
         const feeRecipient = oc(affiliateInfo).feeRecipient();
         try {
             txHash = await assetBuyer.executeBuyQuoteAsync(buyQuote, {
                 feeRecipient,
-                takerAddress,
+                takerAddress: accountAddress,
                 gasPrice: gasInfo.gasPriceInWei,
             });
         } catch (e) {
@@ -83,7 +80,6 @@ export class BuyButton extends React.Component<BuyButtonProps> {
             }
             throw e;
         }
-
         const startTimeUnix = new Date().getTime();
         const expectedEndTimeUnix = startTimeUnix + gasInfo.estimatedTimeMs;
         this.props.onBuyProcessing(buyQuote, txHash, startTimeUnix, expectedEndTimeUnix);
@@ -96,7 +92,6 @@ export class BuyButton extends React.Component<BuyButtonProps> {
             }
             throw e;
         }
-
         this.props.onBuySuccess(buyQuote, txHash);
     };
 }