Refactor TokenState type

packages/website/ts/components/eth_wrappers.tsx

@@ -10,7 +10,14 @@ import ReactTooltip = require('react-tooltip');
 import { Blockchain } from 'ts/blockchain';
 import { EthWethConversionButton } from 'ts/components/eth_weth_conversion_button';
 import { Dispatcher } from 'ts/redux/dispatcher';
-import { OutdatedWrappedEtherByNetworkId, Side, Token, TokenByAddress, TokenState } from 'ts/types';
+import {
+    OutdatedWrappedEtherByNetworkId,
+    Side,
+    Token,
+    TokenByAddress,
+    TokenState,
+    TokenStateByAddress,
+} from 'ts/types';
 import { configs } from 'ts/utils/configs';
 import { constants } from 'ts/utils/constants';
 import { utils } from 'ts/utils/utils';
@@ -20,13 +27,6 @@ const ICON_DIMENSION = 40;
 const ETHER_ICON_PATH = '/images/ether.png';
 const OUTDATED_WETH_ICON_PATH = '/images/wrapped_eth_gray.png';
 
-interface OutdatedWETHAddressToIsStateLoaded {
-    [address: string]: boolean;
-}
-interface OutdatedWETHStateByAddress {
-    [address: string]: TokenState;
-}
-
 interface EthWrappersProps {
     networkId: number;
     blockchain: Blockchain;
@@ -39,9 +39,7 @@ interface EthWrappersProps {
 
 interface EthWrappersState {
     ethTokenState: TokenState;
-    isWethStateLoaded: boolean;
-    outdatedWETHAddressToIsStateLoaded: OutdatedWETHAddressToIsStateLoaded;
-    outdatedWETHStateByAddress: OutdatedWETHStateByAddress;
+    outdatedWETHStateByAddress: TokenStateByAddress;
 }
 
 export class EthWrappers extends React.Component<EthWrappersProps, EthWrappersState> {
@@ -50,22 +48,20 @@ export class EthWrappers extends React.Component<EthWrappersProps, EthWrappersSt
         super(props);
         this._isUnmounted = false;
         const outdatedWETHAddresses = this._getOutdatedWETHAddresses();
-        const outdatedWETHAddressToIsStateLoaded: OutdatedWETHAddressToIsStateLoaded = {};
-        const outdatedWETHStateByAddress: OutdatedWETHStateByAddress = {};
+        const outdatedWETHStateByAddress: TokenStateByAddress = {};
         _.each(outdatedWETHAddresses, outdatedWETHAddress => {
-            outdatedWETHAddressToIsStateLoaded[outdatedWETHAddress] = false;
             outdatedWETHStateByAddress[outdatedWETHAddress] = {
                 balance: new BigNumber(0),
                 allowance: new BigNumber(0),
+                isLoaded: false,
             };
         });
         this.state = {
-            outdatedWETHAddressToIsStateLoaded,
             outdatedWETHStateByAddress,
-            isWethStateLoaded: false,
             ethTokenState: {
                 balance: new BigNumber(0),
                 allowance: new BigNumber(0),
+                isLoaded: false,
             },
         };
     }
@@ -169,7 +165,7 @@ export class EthWrappers extends React.Component<EthWrappersProps, EthWrappersSt
                                         {this._renderTokenLink(tokenLabel, etherscanUrl)}
                                     </TableRowColumn>
                                     <TableRowColumn>
-                                        {this.state.isWethStateLoaded ? (
+                                        {this.state.ethTokenState.isLoaded ? (
                                             `${wethBalance.toFixed(configs.AMOUNT_DISPLAY_PRECSION)} WETH`
                                         ) : (
                                             <i className="zmdi zmdi-spinner zmdi-hc-spin" />
@@ -183,7 +179,7 @@ export class EthWrappers extends React.Component<EthWrappersProps, EthWrappersSt
                                             networkId={this.props.networkId}
                                             isOutdatedWrappedEther={false}
                                             direction={Side.Receive}
-                                            isDisabled={!this.state.isWethStateLoaded}
+                                            isDisabled={!this.state.ethTokenState.isLoaded}
                                             ethToken={etherToken}
                                             dispatcher={this.props.dispatcher}
                                             blockchain={this.props.blockchain}
@@ -266,8 +262,8 @@ export class EthWrappers extends React.Component<EthWrappersProps, EthWrappersSt
                     ...etherToken,
                     address: outdatedWETHIfExists.address,
                 };
-                const isStateLoaded = this.state.outdatedWETHAddressToIsStateLoaded[outdatedWETHIfExists.address];
                 const outdatedEtherTokenState = this.state.outdatedWETHStateByAddress[outdatedWETHIfExists.address];
+                const isStateLoaded = outdatedEtherTokenState.isLoaded;
                 const balanceInEthIfExists = isStateLoaded
                     ? ZeroEx.toUnitAmount(outdatedEtherTokenState.balance, constants.DECIMAL_PLACES_ETH).toFixed(
                           configs.AMOUNT_DISPLAY_PRECSION,
@@ -345,10 +341,15 @@ export class EthWrappers extends React.Component<EthWrappersProps, EthWrappersSt
         );
     }
     private async _onOutdatedConversionSuccessfulAsync(outdatedWETHAddress: string) {
+        const currentOutdatedWETHState = this.state.outdatedWETHStateByAddress[outdatedWETHAddress];
         this.setState({
-            outdatedWETHAddressToIsStateLoaded: {
-                ...this.state.outdatedWETHAddressToIsStateLoaded,
-                [outdatedWETHAddress]: false,
+            outdatedWETHStateByAddress: {
+                ...this.state.outdatedWETHStateByAddress,
+                [outdatedWETHAddress]: {
+                    balance: currentOutdatedWETHState.balance,
+                    allowance: currentOutdatedWETHState.allowance,
+                    isLoaded: false,
+                },
             },
         });
         const userAddressIfExists = _.isEmpty(this.props.userAddress) ? undefined : this.props.userAddress;
@@ -357,15 +358,12 @@ export class EthWrappers extends React.Component<EthWrappersProps, EthWrappersSt
             outdatedWETHAddress,
         );
         this.setState({
-            outdatedWETHAddressToIsStateLoaded: {
-                ...this.state.outdatedWETHAddressToIsStateLoaded,
-                [outdatedWETHAddress]: true,
-            },
             outdatedWETHStateByAddress: {
                 ...this.state.outdatedWETHStateByAddress,
                 [outdatedWETHAddress]: {
                     balance,
                     allowance,
+                    isLoaded: true,
                 },
             },
         });
@@ -380,8 +378,7 @@ export class EthWrappers extends React.Component<EthWrappersProps, EthWrappersSt
         );
 
         const outdatedWETHAddresses = this._getOutdatedWETHAddresses();
-        const outdatedWETHAddressToIsStateLoaded: OutdatedWETHAddressToIsStateLoaded = {};
-        const outdatedWETHStateByAddress: OutdatedWETHStateByAddress = {};
+        const outdatedWETHStateByAddress: TokenStateByAddress = {};
         for (const address of outdatedWETHAddresses) {
             const [balance, allowance] = await this.props.blockchain.getTokenBalanceAndAllowanceAsync(
                 userAddressIfExists,
@@ -390,18 +387,17 @@ export class EthWrappers extends React.Component<EthWrappersProps, EthWrappersSt
             outdatedWETHStateByAddress[address] = {
                 balance,
                 allowance,
+                isLoaded: true,
             };
-            outdatedWETHAddressToIsStateLoaded[address] = true;
         }
         if (!this._isUnmounted) {
             this.setState({
                 outdatedWETHStateByAddress,
-                outdatedWETHAddressToIsStateLoaded,
                 ethTokenState: {
                     balance: wethBalance,
                     allowance: wethAllowance,
+                    isLoaded: true,
                 },
-                isWethStateLoaded: true,
             });
         }
     }
@@ -434,6 +430,7 @@ export class EthWrappers extends React.Component<EthWrappersProps, EthWrappersSt
             ethTokenState: {
                 balance,
                 allowance,
+                isLoaded: true,
             },
         });
     }