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

3 files changed, 12 insertions, 15 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);
     };
 }
diff --git a/packages/instant/src/components/buy_order_state_buttons.tsx b/packages/instant/src/components/buy_order_state_buttons.tsx
index 3d0ede7b1..b15415e71 100644
--- a/packages/instant/src/components/buy_order_state_buttons.tsx
+++ b/packages/instant/src/components/buy_order_state_buttons.tsx
@@ -13,6 +13,7 @@ import { Flex } from './ui/flex';
 import { Text } from './ui/text';
 
 export interface BuyOrderStateButtonProps {
+    accountAddress?: string;
     buyQuote?: BuyQuote;
     buyOrderProcessingState: OrderProcessState;
     assetBuyer: AssetBuyer;
@@ -52,6 +53,7 @@ export const BuyOrderStateButtons: React.StatelessComponent<BuyOrderStateButtonP
 
     return (
         <BuyButton
+            accountAddress={props.accountAddress}
             buyQuote={props.buyQuote}
             assetBuyer={props.assetBuyer}
             affiliateInfo={props.affiliateInfo}
diff --git a/packages/instant/src/components/zero_ex_instant_provider.tsx b/packages/instant/src/components/zero_ex_instant_provider.tsx
index 1fb5cf64f..fa0588b71 100644
--- a/packages/instant/src/components/zero_ex_instant_provider.tsx
+++ b/packages/instant/src/components/zero_ex_instant_provider.tsx
@@ -92,12 +92,12 @@ export class ZeroExInstantProvider extends React.Component<ZeroExInstantProvider
             // tslint:disable-next-line:no-floating-promises
             asyncData.fetchAvailableAssetDatasAndDispatchToStore(this._store);
         }
-
+        // tslint:disable-next-line:no-floating-promises
+        asyncData.fetchAccountInfoAndDispatchToStore(this._store);
         // warm up the gas price estimator cache just in case we can't
         // grab the gas price estimate when submitting the transaction
         // tslint:disable-next-line:no-floating-promises
         gasPriceEstimator.getGasInfoAsync();
-
         // tslint:disable-next-line:no-floating-promises
         this._flashErrorIfWrongNetwork();
     }