Instantiate contracts via chainId from loaded config

src/components/App/index.tsx

@@ -1,7 +1,7 @@
-import { useContext, useEffect } from 'react'
+import { useContext } from 'react'
 import { makeStyles } from '@material-ui/core/styles'
 import { SnackbarProvider } from 'notistack'
-import { useDispatch, useSelector } from 'react-redux'
+import { useSelector } from 'react-redux'
 import styled from 'styled-components'
 
 import AlertIcon from 'src/assets/icons/alert.svg'
@@ -26,8 +26,6 @@ import ReceiveModal from './ReceiveModal'
 import { useSidebarItems } from 'src/components/AppLayout/Sidebar/useSidebarItems'
 import useAddressBookSync from 'src/logic/addressBook/hooks/useAddressBookSync'
 import { extractSafeAddress } from 'src/routes/routes'
-import loadSafesFromStorage from 'src/logic/safe/store/actions/loadSafesFromStorage'
-import loadCurrentSessionFromStorage from 'src/logic/currentSession/store/actions/loadCurrentSessionFromStorage'
 
 const notificationStyles = {
   success: {
@@ -62,7 +60,6 @@ const App: React.FC = ({ children }) => {
   const currentCurrency = useSelector(currentCurrencySelector)
   const granted = useSelector(grantedSelector)
   const sidebarItems = useSidebarItems()
-  const dispatch = useDispatch()
   useLoadSafe(addressFromUrl) // load initially
   useSafeScheduledUpdates(addressFromUrl) // load every X seconds
   useAddressBookSync()
@@ -75,13 +72,6 @@ const App: React.FC = ({ children }) => {
   const onReceiveShow = () => onShow('Receive')
   const onReceiveHide = () => onHide('Receive')
 
-  // Load the Safes from LS just once,
-  // they'll be reloaded on network change
-  useEffect(() => {
-    dispatch(loadSafesFromStorage())
-    dispatch(loadCurrentSessionFromStorage())
-  }, [dispatch])
-
   return (
     <Frame>
       <SnackbarProvider

src/components/Root/index.tsx

@@ -47,6 +47,9 @@ const RootConsumer = (): React.ReactElement | null => {
       }
     }
     initChains()
+
+    // Set store chainId and init contracts/session
+    setChainId(_getChainId())
   }, [])
 
   // Chains failed to load

src/logic/config/store/middleware/index.ts

@@ -6,9 +6,10 @@ import { clearSafeList } from 'src/logic/safe/store/actions/clearSafeList'
 import loadSafesFromStorage from 'src/logic/safe/store/actions/loadSafesFromStorage'
 import { Dispatch } from 'src/logic/safe/store/actions/types'
 import { CONFIG_ACTIONS } from '../actions'
+import { store as reduxStore } from 'src/store'
 
 export const configMiddleware =
-  ({ dispatch }) =>
+  ({ dispatch }: typeof reduxStore) =>
   (next: Dispatch) =>
   async (action: Action<typeof CONFIG_ACTIONS.SET_CHAIN_ID>) => {
     const handledAction = next(action)

src/logic/config/utils/index.ts

@@ -1,7 +1,7 @@
-import { _getChainId, _setChainId } from 'src/config'
 import { ChainId } from 'src/config/chain.d'
 import { store } from 'src/store'
 import { setChainIdAction } from 'src/logic/config/store/actions'
+import { _setChainId } from 'src/config'
 
 export const setChainId = (newChainId: ChainId) => {
   _setChainId(newChainId)

src/logic/contracts/safeContracts.ts

@@ -15,7 +15,7 @@ import { getChainById, _getChainId } from 'src/config'
 import { ChainId } from 'src/config/chain.d'
 import { ZERO_ADDRESS } from 'src/logic/wallets/ethAddresses'
 import { calculateGasOf, EMPTY_DATA } from 'src/logic/wallets/ethTransactions'
-import { getWeb3, getChainIdFrom } from 'src/logic/wallets/getWeb3'
+import { getWeb3 } from 'src/logic/wallets/getWeb3'
 import { GnosisSafe } from 'src/types/contracts/gnosis_safe.d'
 import { ProxyFactory } from 'src/types/contracts/proxy_factory.d'
 import { CompatibilityFallbackHandler } from 'src/types/contracts/compatibility_fallback_handler.d'
@@ -194,9 +194,9 @@ export const getMasterCopyAddressFromProxyAddress = async (proxyAddress: string)
   return masterCopyAddress
 }
 
-export const instantiateSafeContracts = async () => {
+export const instantiateSafeContracts = () => {
   const web3 = getWeb3()
-  const chainId = (await getChainIdFrom(web3)).toString() as ChainId
+  const chainId = _getChainId()
 
   // Create ProxyFactory Master Copy
   proxyFactoryMaster = getProxyFactoryContractInstance(web3, chainId)
@@ -211,8 +211,8 @@ export const instantiateSafeContracts = async () => {
   multiSend = getMultiSendContractInstance(web3, chainId)
 }
 
-export const getSafeMasterContract = async () => {
-  await instantiateSafeContracts()
+export const getSafeMasterContract = () => {
+  instantiateSafeContracts()
   return safeMaster
 }
 

src/logic/safe/utils/safeVersion.ts

@@ -68,7 +68,7 @@ export const checkIfSafeNeedsUpdate = async (
 export const getCurrentMasterContractLastVersion = async (): Promise<string> => {
   let safeMasterVersion: string
   try {
-    const safeMaster = await getSafeMasterContract()
+    const safeMaster = getSafeMasterContract()
     safeMasterVersion = await safeMaster.methods.VERSION().call()
   } catch (err) {
     // Default in case that it's not possible to obtain the version from the contract, returns a hardcoded value or an

src/logic/wallets/store/middlewares/providerWatcher.ts

@@ -1,10 +1,13 @@
+import { instantiateSafeContracts } from 'src/logic/contracts/safeContracts'
 import closeSnackbar from 'src/logic/notifications/store/actions/closeSnackbar'
 import { getProviderInfo, getWeb3 } from 'src/logic/wallets/getWeb3'
 import { fetchProvider } from 'src/logic/wallets/store/actions'
 import { ADD_PROVIDER } from 'src/logic/wallets/store/actions/addProvider'
 import { REMOVE_PROVIDER } from 'src/logic/wallets/store/actions/removeProvider'
-
 import { loadFromStorage, removeFromStorage, saveToStorage } from 'src/utils/storage'
+import { store as reduxStore } from 'src/store'
+import { Dispatch } from 'redux'
+import { ProviderState } from '../reducer/provider'
 
 const watchedActions = [ADD_PROVIDER, REMOVE_PROVIDER]
 
@@ -16,50 +19,60 @@ export const loadLastUsedProvider = async (): Promise<string | undefined> => {
   return lastUsedProvider
 }
 
-let watcherInterval
-const providerWatcherMware = (store) => (next) => async (action) => {
-  const handledAction = next(action)
+type ProviderWatcherAction = {
+  type: string
+  payload: ProviderState
+}
 
-  if (watchedActions.includes(action.type)) {
-    switch (action.type) {
-      case ADD_PROVIDER: {
-        const currentProviderProps = action.payload.toJS()
+let watcherInterval: NodeJS.Timer
+const providerWatcherMware =
+  (store: typeof reduxStore) =>
+  (next: Dispatch) =>
+  async (action: ProviderWatcherAction): Promise<ProviderWatcherAction> => {
+    const handledAction = next(action)
 
-        if (watcherInterval) {
-          clearInterval(watcherInterval)
-        }
+    if (watchedActions.includes(action.type)) {
+      switch (action.type) {
+        case ADD_PROVIDER: {
+          const currentProviderProps = action.payload.toJS()
 
-        saveToStorage(LAST_USED_PROVIDER_KEY, currentProviderProps.name)
+          if (watcherInterval) {
+            clearInterval(watcherInterval)
+          }
 
-        watcherInterval = setInterval(async () => {
-          const web3 = getWeb3()
-          const providerInfo = await getProviderInfo(web3)
+          instantiateSafeContracts()
 
-          const networkChanged = currentProviderProps.network !== providerInfo.network
+          saveToStorage(LAST_USED_PROVIDER_KEY, currentProviderProps.name)
 
-          if (networkChanged) {
-            store.dispatch(closeSnackbar({ dismissAll: true }))
-          }
+          watcherInterval = setInterval(async () => {
+            const web3 = getWeb3()
+            const providerInfo = await getProviderInfo(web3)
 
-          if (currentProviderProps.account !== providerInfo.account || networkChanged) {
-            store.dispatch(fetchProvider(currentProviderProps.name))
-          }
-        }, 2000)
+            const networkChanged = currentProviderProps.network !== providerInfo.network
 
-        break
-      }
-      case REMOVE_PROVIDER:
-        clearInterval(watcherInterval)
-        if (!action.payload?.keepStorageKey) {
-          removeFromStorage(LAST_USED_PROVIDER_KEY)
+            if (networkChanged) {
+              store.dispatch(closeSnackbar({ dismissAll: true }))
+            }
+
+            if (currentProviderProps.account !== providerInfo.account || networkChanged) {
+              store.dispatch(fetchProvider(currentProviderProps.name))
+            }
+          }, 2000)
+
+          break
         }
-        break
-      default:
-        break
+        case REMOVE_PROVIDER:
+          clearInterval(watcherInterval)
+          if (!action.payload?.keepStorageKey) {
+            removeFromStorage(LAST_USED_PROVIDER_KEY)
+          }
+          break
+        default:
+          break
+      }
     }
-  }
 
-  return handledAction
-}
+    return handledAction
+  }
 
 export default providerWatcherMware

src/logic/wallets/store/reducer/provider.ts

@@ -6,7 +6,7 @@ import { makeProvider, ProviderRecord, ProviderProps } from 'src/logic/wallets/s
 
 export const PROVIDER_REDUCER_ID = 'providers'
 
-export type ProviderState = ProviderRecord
+export type ProviderState = ProviderRecord & { keepStorageKey?: boolean }
 
 const providerReducer = handleActions(
   {

src/routes/CreateSafePage/CreateSafePage.tsx

@@ -36,7 +36,6 @@ import ReviewNewSafeStep, { reviewNewSafeStepLabel } from './steps/ReviewNewSafe
 import { loadFromStorage, saveToStorage } from 'src/utils/storage'
 import SafeCreationProcess from './components/SafeCreationProcess'
 import SelectWalletAndNetworkStep, { selectWalletAndNetworkStepLabel } from './steps/SelectWalletAndNetworkStep'
-import { instantiateSafeContracts } from 'src/logic/contracts/safeContracts'
 
 function CreateSafePage(): ReactElement {
   const [safePendingToBeCreated, setSafePendingToBeCreated] = useState<CreateSafeFormValues>()
@@ -56,7 +55,6 @@ function CreateSafePage(): ReactElement {
       )
 
       if (provider) {
-        await instantiateSafeContracts()
         setSafePendingToBeCreated(safePendingToBeCreated)
       }
       setIsLoading(false)

src/routes/opening/index.tsx

@@ -10,7 +10,6 @@ import Button from 'src/components/layout/Button'
 import Heading from 'src/components/layout/Heading'
 import Img from 'src/components/layout/Img'
 import Paragraph from 'src/components/layout/Paragraph'
-import { instantiateSafeContracts } from 'src/logic/contracts/safeContracts'
 import { EMPTY_DATA } from 'src/logic/wallets/ethTransactions'
 import { getWeb3, isTxPendingError } from 'src/logic/wallets/getWeb3'
 import { background, connected, fontColor } from 'src/theme/variables'
@@ -94,13 +93,8 @@ export const SafeDeployment = ({
   }
 
   useEffect(() => {
-    const loadContracts = async () => {
-      await instantiateSafeContracts()
-      setLoading(false)
-    }
-
     if (provider) {
-      loadContracts()
+      setLoading(false)
     }
   }, [provider])