Fix bug where could not switch to Ledger and back

6 files changed, 65 insertions, 31 deletions

diff --git a/packages/website/ts/blockchain.ts b/packages/website/ts/blockchain.ts
index 898cb2d01..e0f5a496f 100644
--- a/packages/website/ts/blockchain.ts
+++ b/packages/website/ts/blockchain.ts
@@ -37,6 +37,7 @@ import {
     EtherscanLinkSuffixes,
     ProviderType,
     Side,
+    SideToAssetToken,
     SignatureData,
     Token,
     TokenByAddress,
@@ -212,6 +213,7 @@ export class Blockchain {
         this._web3Wrapper = new Web3Wrapper(this._dispatcher, provider, this.networkId, shouldPollUserAddress);
         this._zeroEx.setProvider(provider, this.networkId);
         await this._postInstantiationOrUpdatingProviderZeroExAsync();
+        this._web3Wrapper.startEmittingNetworkConnectionAndUserBalanceStateAsync();
         this._dispatcher.updateProviderType(ProviderType.Ledger);
     }
     public async updateProviderToInjectedAsync() {
@@ -222,17 +224,18 @@ export class Blockchain {
         }
         const provider = this._cachedProvider;
         this.networkId = this._cachedProviderNetworkId;
-        this._dispatcher.updateNetworkId(this.networkId);
 
         this._web3Wrapper.destroy();
         const shouldPollUserAddress = true;
         this._web3Wrapper = new Web3Wrapper(this._dispatcher, provider, this.networkId, shouldPollUserAddress);
 
         this._userAddress = await this._web3Wrapper.getFirstAccountIfExistsAsync();
-        this._dispatcher.updateUserAddress(this._userAddress);
+
         this._zeroEx.setProvider(provider, this.networkId);
         await this._postInstantiationOrUpdatingProviderZeroExAsync();
+
         await this.fetchTokenInformationAsync();
+        this._web3Wrapper.startEmittingNetworkConnectionAndUserBalanceStateAsync();
         this._dispatcher.updateProviderType(ProviderType.Injected);
         delete this._ledgerSubprovider;
         delete this._cachedProvider;
@@ -473,20 +476,10 @@ export class Blockchain {
         );
 
         this._dispatcher.updateBlockchainIsLoaded(false);
-        // HACK: Without this timeout, the second call to dispatcher somehow causes blockchainIsLoaded
-        // to flicker... Need to debug further :(((())))
-        await new Promise(resolve => setTimeout(resolve, 100));
         this._dispatcher.clearTokenByAddress();
 
         const tokenRegistryTokensByAddress = await this._getTokenRegistryTokensByAddressAsync();
 
-        // HACK: This is a hack so that the loading spinner doesn't show up twice...
-        // Once for loading the blockchain, another for loading the userAddress
-        this._userAddress = await this._web3Wrapper.getFirstAccountIfExistsAsync();
-        if (!_.isEmpty(this._userAddress)) {
-            this._dispatcher.updateUserAddress(this._userAddress);
-        }
-
         let trackedTokensIfExists = trackedTokenStorage.getTrackedTokensIfExists(this._userAddress, this.networkId);
         const tokenRegistryTokens = _.values(tokenRegistryTokensByAddress);
         if (_.isUndefined(trackedTokensIfExists)) {
@@ -507,14 +500,20 @@ export class Blockchain {
             });
         }
         const allTokens = _.uniq([...tokenRegistryTokens, ...trackedTokensIfExists]);
-        this._dispatcher.updateTokenByAddress(allTokens);
-
         const mostPopularTradingPairTokens: Token[] = [
             _.find(allTokens, { symbol: configs.DEFAULT_TRACKED_TOKEN_SYMBOLS[0] }),
             _.find(allTokens, { symbol: configs.DEFAULT_TRACKED_TOKEN_SYMBOLS[1] }),
         ];
-        this._dispatcher.updateChosenAssetTokenAddress(Side.Deposit, mostPopularTradingPairTokens[0].address);
-        this._dispatcher.updateChosenAssetTokenAddress(Side.Receive, mostPopularTradingPairTokens[1].address);
+        const sideToAssetToken: SideToAssetToken = {
+            [Side.Deposit]: {
+                address: mostPopularTradingPairTokens[0].address,
+            },
+            [Side.Receive]: {
+                address: mostPopularTradingPairTokens[1].address,
+            },
+        };
+        this._dispatcher.batchDispatch(allTokens, this.networkId, this._userAddress, sideToAssetToken);
+
         this._dispatcher.updateBlockchainIsLoaded(true);
     }
     private async _showEtherScanLinkAndAwaitTransactionMinedAsync(
@@ -699,17 +698,23 @@ export class Blockchain {
         }
 
         const provider = await Blockchain._getProviderAsync(injectedWeb3, networkIdIfExists);
-        const networkId = !_.isUndefined(networkIdIfExists)
+        this.networkId = !_.isUndefined(networkIdIfExists)
             ? networkIdIfExists
             : configs.IS_MAINNET_ENABLED ? constants.NETWORK_ID_MAINNET : constants.NETWORK_ID_TESTNET;
+        this._dispatcher.updateNetworkId(this.networkId);
         const zeroExConfigs = {
-            networkId,
+            networkId: this.networkId,
         };
         this._zeroEx = new ZeroEx(provider, zeroExConfigs);
         this._updateProviderName(injectedWeb3);
         const shouldPollUserAddress = true;
-        this._web3Wrapper = new Web3Wrapper(this._dispatcher, provider, networkId, shouldPollUserAddress);
+        this._web3Wrapper = new Web3Wrapper(this._dispatcher, provider, this.networkId, shouldPollUserAddress);
         await this._postInstantiationOrUpdatingProviderZeroExAsync();
+        this._userAddress = await this._web3Wrapper.getFirstAccountIfExistsAsync();
+        this._dispatcher.updateUserAddress(this._userAddress);
+        await this.fetchTokenInformationAsync();
+        this._web3Wrapper.startEmittingNetworkConnectionAndUserBalanceStateAsync();
+        await this._rehydrateStoreWithContractEvents();
     }
     // This method should always be run after instantiating or updating the provider
     // of the ZeroEx instance.
diff --git a/packages/website/ts/components/inputs/token_amount_input.tsx b/packages/website/ts/components/inputs/token_amount_input.tsx
index f41d42d02..44f3fc4a8 100644
--- a/packages/website/ts/components/inputs/token_amount_input.tsx
+++ b/packages/website/ts/components/inputs/token_amount_input.tsx
@@ -41,7 +41,7 @@ export class TokenAmountInput extends React.Component<TokenAmountInputProps, Tok
     }
     public componentWillMount() {
         // tslint:disable-next-line:no-floating-promises
-        this._fetchBalanceAndAllowanceAsync(this.props.token.address);
+        this._fetchBalanceAndAllowanceAsync(this.props.token.address, this.props.userAddress);
     }
     public componentWillReceiveProps(nextProps: TokenAmountInputProps) {
         if (
@@ -50,7 +50,7 @@ export class TokenAmountInput extends React.Component<TokenAmountInputProps, Tok
             nextProps.token.address !== this.props.token.address ||
             nextProps.lastForceTokenStateRefetch !== this.props.lastForceTokenStateRefetch
         ) {
-            this._fetchBalanceAndAllowanceAsync(nextProps.token.address);
+            this._fetchBalanceAndAllowanceAsync(nextProps.token.address, nextProps.userAddress);
         }
     }
     public render() {
@@ -99,12 +99,12 @@ export class TokenAmountInput extends React.Component<TokenAmountInputProps, Tok
             return undefined;
         }
     }
-    private async _fetchBalanceAndAllowanceAsync(tokenAddress: string) {
+    private async _fetchBalanceAndAllowanceAsync(tokenAddress: string, userAddress: string) {
         this.setState({
             isBalanceAndAllowanceLoaded: false,
         });
         const [balance, allowance] = await this.props.blockchain.getTokenBalanceAndAllowanceAsync(
-            this.props.userAddress,
+            userAddress,
             tokenAddress,
         );
         this.setState({
diff --git a/packages/website/ts/redux/dispatcher.ts b/packages/website/ts/redux/dispatcher.ts
index dea0a8bfe..c7e0a5af3 100644
--- a/packages/website/ts/redux/dispatcher.ts
+++ b/packages/website/ts/redux/dispatcher.ts
@@ -9,6 +9,7 @@ import {
     ProviderType,
     ScreenWidths,
     Side,
+    SideToAssetToken,
     SignatureData,
     Token,
     TokenStateByAddress,
@@ -125,6 +126,17 @@ export class Dispatcher {
             type: ActionTypes.ClearTokenByAddress,
         });
     }
+    public batchDispatch(tokens: Token[], networkId: number, userAddress: string, sideToAssetToken: SideToAssetToken) {
+        this._dispatch({
+            data: {
+                tokens,
+                networkId,
+                userAddress,
+                sideToAssetToken,
+            },
+            type: ActionTypes.BatchDispatch,
+        });
+    }
     public updateTokenByAddress(tokens: Token[]) {
         this._dispatch({
             data: tokens,
diff --git a/packages/website/ts/redux/reducer.ts b/packages/website/ts/redux/reducer.ts
index cee475fa9..427a8dd4a 100644
--- a/packages/website/ts/redux/reducer.ts
+++ b/packages/website/ts/redux/reducer.ts
@@ -181,6 +181,25 @@ export function reducer(state: State = INITIAL_STATE, action: Action) {
             };
         }
 
+        case ActionTypes.BatchDispatch: {
+            const tokenByAddress = state.tokenByAddress;
+            const tokens = action.data.tokens;
+            _.each(tokens, token => {
+                const updatedToken = {
+                    ...tokenByAddress[token.address],
+                    ...token,
+                };
+                tokenByAddress[token.address] = updatedToken;
+            });
+            return {
+                ...state,
+                networkId: action.data.networkId,
+                userAddress: action.data.userAddress,
+                sideToAssetToken: action.data.sideToAssetToken,
+                tokenByAddress,
+            };
+        }
+
         case ActionTypes.ForceTokenStateRefetch:
             return {
                 ...state,
diff --git a/packages/website/ts/types.ts b/packages/website/ts/types.ts
index 134d4d7bf..aeba3a570 100644
--- a/packages/website/ts/types.ts
+++ b/packages/website/ts/types.ts
@@ -110,6 +110,7 @@ export enum BalanceErrs {
 
 export enum ActionTypes {
     // Portal
+    BatchDispatch = 'BATCH_DISPATCH',
     UpdateScreenWidth = 'UPDATE_SCREEN_WIDTH',
     UpdateNodeVersion = 'UPDATE_NODE_VERSION',
     ResetState = 'RESET_STATE',
diff --git a/packages/website/ts/web3_wrapper.ts b/packages/website/ts/web3_wrapper.ts
index 415df6e8b..e19b0ea06 100644
--- a/packages/website/ts/web3_wrapper.ts
+++ b/packages/website/ts/web3_wrapper.ts
@@ -24,9 +24,6 @@ export class Web3Wrapper {
 
         this._web3 = new Web3();
         this._web3.setProvider(provider);
-
-        // tslint:disable-next-line:no-floating-promises
-        this._startEmittingNetworkConnectionAndUserBalanceStateAsync();
     }
     public isAddress(address: string) {
         return this._web3.isAddress(address);
@@ -90,11 +87,7 @@ export class Web3Wrapper {
     public updatePrevUserAddress(userAddress: string) {
         this._prevUserAddress = userAddress;
     }
-    private async _getNetworkAsync() {
-        const networkId = await promisify(this._web3.version.getNetwork)();
-        return networkId;
-    }
-    private async _startEmittingNetworkConnectionAndUserBalanceStateAsync() {
+    public async startEmittingNetworkConnectionAndUserBalanceStateAsync() {
         if (!_.isUndefined(this._watchNetworkAndBalanceIntervalId)) {
             return; // we are already emitting the state
         }
@@ -145,6 +138,10 @@ export class Web3Wrapper {
             },
         );
     }
+    private async _getNetworkAsync() {
+        const networkId = await promisify(this._web3.version.getNetwork)();
+        return networkId;
+    }
     private async _updateUserEtherBalanceAsync(userAddress: string) {
         const balance = await this.getBalanceInEthAsync(userAddress);
         if (!balance.eq(this._prevUserEtherBalanceInEth)) {