Reinitialize drizzle on network changes

src/contracts/contractsSaga.js

@@ -274,7 +274,7 @@ function isSendOrCallOptions (options) {
 }
 
 export function * isContractDeployed ({ web3, contractConfig }) {
-  const networkId = yield call(getNetworkId, { web3 })
+  const networkId = yield call(web3.eth.net.getId);
   if(contractConfig.networks[networkId]){
     const contractAddress = contractConfig.networks[networkId].address;
 

src/drizzle-middleware.js

@@ -1,6 +1,7 @@
 import * as DrizzleActions from './drizzleStatus/drizzleActions'
 import * as ContractActions from './contracts/constants'
 import { ACCOUNTS_FETCHED } from './accounts/accountsActions'
+import { NETWORK_ID_CHANGED } from './web3/web3Actions'
 
 export const drizzleMiddleware = drizzleInstance => store => next => action => {
   const { type } = action
@@ -9,6 +10,14 @@ export const drizzleMiddleware = drizzleInstance => store => next => action => {
     drizzleInstance = action.drizzle
   }
 
+  if (type === NETWORK_ID_CHANGED) {
+    store.dispatch({
+      type: DrizzleActions.DRIZZLE_INITIALIZING,
+      drizzle: drizzleInstance,
+      options: drizzleInstance.options
+    })
+  }
+
   if (
     type === ACCOUNTS_FETCHED &&
     drizzleInstance &&

src/drizzleStatus/drizzleStatusSaga.js

@@ -7,7 +7,7 @@ import { getAccountBalances } from '../accountBalances/accountBalancesSaga'
 import * as DrizzleActions from './drizzleActions'
 import * as BlocksActions from '../blocks/blockActions'
 
-import { NETWORK_IDS, NETWORK_MISMATCH } from '../web3/web3Actions'
+import { NETWORK_ID_CHANGED, NETWORK_IDS, NETWORK_MISMATCH } from '../web3/web3Actions'
 import { CONTRACT_NOT_DEPLOYED } from '../contracts/constants'
 import { isContractDeployed } from '../contracts/contractsSaga'
 

src/rootSaga.js

@@ -2,12 +2,10 @@ import accountBalancesSaga from './accountBalances/accountBalancesSaga'
 import blocksSaga from './blocks/blocksSaga'
 import contractsSaga from './contracts/contractsSaga'
 import drizzleStatusSaga from './drizzleStatus/drizzleStatusSaga'
-import web3Saga from './web3/web3Saga'
 
 export default [
   accountBalancesSaga,
   blocksSaga,
   contractsSaga,
-  drizzleStatusSaga,
-  web3Saga
+  drizzleStatusSaga
 ]

src/web3/web3Actions.js

@@ -3,6 +3,7 @@ export const WEB3_INITIALIZED = 'WEB3_INITIALIZED'
 export const WEB3_FAILED = 'WEB3_FAILED'
 export const WEB3_USER_DENIED = 'WEB3_USER_DENIED'
 
+export const NETWORK_ID_FETCHING = 'NETWORK_ID_FETCHING'
 export const NETWORK_ID_FETCHED = 'NETWORK_ID_FETCHED'
 export const NETWORK_ID_CHANGED = 'NETWORK_ID_CHANGED'
 export const NETWORK_ID_FAILED = 'NETWORK_ID_FAILED'
@@ -17,9 +18,10 @@ export const NETWORK_IDS = {
     ganache: 5777
 }
 
-export function networkIdChanged (web3) {
+export function networkIdChanged (web3, networkId) {
     return {
         type: NETWORK_ID_CHANGED,
-        web3
+        web3,
+        networkId
     }
 }

src/web3/web3Middleware.js

@@ -8,9 +8,11 @@ export const web3Middleware = web3 => store => next => action => {
       console.warn('No Metamask detected, not subscribed to network changes!')
     else {
       web3 = action.web3;
-      window.ethereum.on('networkChanged', () => {
-        // We could have listened to 'networkChanged' but it is deprecated (EIP-1193)
-        store.dispatch(networkIdChanged(web3));
+      window.ethereum.on('networkChanged', (networkId) => {
+        // Warning: 'networkChanged' is deprecated (EIP-1193)
+        const storedNetworkId = store.getState().web3.networkId;
+        if(storedNetworkId && networkId !== storedNetworkId)
+          store.dispatch(networkIdChanged(web3, networkId));
       });
     }
   }

src/web3/web3Saga.js

@@ -85,10 +85,3 @@ export function * getNetworkId ({ web3 }) {
     console.error(error);
   }
 }
-
-function * web3Saga () {
-  yield takeLatest(Action.NETWORK_ID_CHANGED, getNetworkId);
-}
-
-export default web3Saga
-