Implement just-in-time loading of token balances & allowances

1 files changed, 9 insertions, 5 deletions

diff --git a/packages/website/ts/components/eth_weth_conversion_button.tsx b/packages/website/ts/components/eth_weth_conversion_button.tsx
index cc5e623ea..52240fd0f 100644
--- a/packages/website/ts/components/eth_weth_conversion_button.tsx
+++ b/packages/website/ts/components/eth_weth_conversion_button.tsx
@@ -12,6 +12,8 @@ import { errorReporter } from 'ts/utils/error_reporter';
 import { utils } from 'ts/utils/utils';
 
 interface EthWethConversionButtonProps {
+    userAddress: string;
+    networkId: number;
     direction: Side;
     ethToken: Token;
     ethTokenState: TokenState;
@@ -21,6 +23,8 @@ interface EthWethConversionButtonProps {
     isOutdatedWrappedEther: boolean;
     onConversionSuccessful?: () => void;
     isDisabled?: boolean;
+    lastForceTokenStateRefetch: number;
+    refetchEthTokenStateAsync: () => Promise<void>;
 }
 
 interface EthWethConversionButtonState {
@@ -64,13 +68,16 @@ export class EthWethConversionButton extends React.Component<
                     onClick={this._toggleConversionDialog.bind(this)}
                 />
                 <EthWethConversionDialog
+                    blockchain={this.props.blockchain}
+                    userAddress={this.props.userAddress}
+                    networkId={this.props.networkId}
                     direction={this.props.direction}
                     isOpen={this.state.isEthConversionDialogVisible}
                     onComplete={this._onConversionAmountSelectedAsync.bind(this)}
                     onCancelled={this._toggleConversionDialog.bind(this)}
                     etherBalance={this.props.userEtherBalance}
                     token={this.props.ethToken}
-                    tokenState={this.props.ethTokenState}
+                    lastForceTokenStateRefetch={this.props.lastForceTokenStateRefetch}
                 />
             </div>
         );
@@ -87,21 +94,18 @@ export class EthWethConversionButton extends React.Component<
         this._toggleConversionDialog();
         const token = this.props.ethToken;
         const tokenState = this.props.ethTokenState;
-        let balance = tokenState.balance;
         try {
             if (direction === Side.Deposit) {
                 await this.props.blockchain.convertEthToWrappedEthTokensAsync(token.address, value);
                 const ethAmount = ZeroEx.toUnitAmount(value, constants.DECIMAL_PLACES_ETH);
                 this.props.dispatcher.showFlashMessage(`Successfully wrapped ${ethAmount.toString()} ETH to WETH`);
-                balance = balance.plus(value);
             } else {
                 await this.props.blockchain.convertWrappedEthTokensToEthAsync(token.address, value);
                 const tokenAmount = ZeroEx.toUnitAmount(value, token.decimals);
                 this.props.dispatcher.showFlashMessage(`Successfully unwrapped ${tokenAmount.toString()} WETH to ETH`);
-                balance = balance.minus(value);
             }
             if (!this.props.isOutdatedWrappedEther) {
-                this.props.dispatcher.replaceTokenBalanceByAddress(token.address, balance);
+                this.props.refetchEthTokenStateAsync();
             }
             this.props.onConversionSuccessful();
         } catch (err) {