Handle console erros and warnings

config/jest/Web3Mock.js

@@ -1,7 +1,7 @@
 import Web3 from 'web3'
 
 const window = global.window || {}
-window.web3 = window.web3 || {}
+window.web3 = {}
 window.web3.currentProvider = new Web3.providers.HttpProvider('http://localhost:8545')
 
 global.window = window

package.json

@@ -220,7 +220,6 @@
     "react-router-dom": "5.2.0",
     "react-scripts": "^4.0.1",
     "react-window": "^1.8.6",
-    "recompose": "^0.30.0",
     "redux": "4.0.5",
     "redux-actions": "^2.6.5",
     "redux-thunk": "^2.3.0",

src/components/AppLayout/Header/components/Layout.tsx

@@ -9,11 +9,11 @@ import { Link } from 'react-router-dom'
 import Provider from './Provider'
 
 import Spacer from 'src/components/Spacer'
-import openHoc from 'src/components/hoc/OpenHoc'
 import Col from 'src/components/layout/Col'
 import Img from 'src/components/layout/Img'
 import Row from 'src/components/layout/Row'
 import { border, headerHeight, md, screenSm, sm } from 'src/theme/variables'
+import { useStateHandler } from 'src/logic/hooks/useStateHandler'
 
 import SafeLogo from '../assets/gnosis-safe-multisig-logo.svg'
 
@@ -55,41 +55,45 @@ const styles = () => ({
   },
 })
 
-const Layout = openHoc(({ classes, clickAway, open, providerDetails, providerInfo, toggle }) => (
-  <Row className={classes.summary}>
-    <Col className={classes.logo} middle="xs" start="xs">
-      <Link to="/">
-        <Img alt="Gnosis Team Safe" height={36} src={SafeLogo} testId="heading-gnosis-logo" />
-      </Link>
-    </Col>
-    <Spacer />
-    <Provider
-      info={providerInfo}
-      open={open}
-      toggle={toggle}
-      render={(providerRef) => (
-        <Popper
-          anchorEl={providerRef.current}
-          className={classes.popper}
-          open={open}
-          placement="bottom"
-          popperOptions={{ positionFixed: true }}
-        >
-          {({ TransitionProps }) => (
-            <Grow {...TransitionProps}>
-              <>
-                <ClickAwayListener mouseEvent="onClick" onClickAway={clickAway} touchEvent={false}>
-                  <List className={classes.root} component="div">
-                    {providerDetails}
-                  </List>
-                </ClickAwayListener>
-              </>
-            </Grow>
-          )}
-        </Popper>
-      )}
-    />
-  </Row>
-))
+const Layout = ({ classes, providerDetails, providerInfo }) => {
+  const { clickAway, open, toggle } = useStateHandler()
+
+  return (
+    <Row className={classes.summary}>
+      <Col className={classes.logo} middle="xs" start="xs">
+        <Link to="/">
+          <Img alt="Gnosis Team Safe" height={36} src={SafeLogo} testId="heading-gnosis-logo" />
+        </Link>
+      </Col>
+      <Spacer />
+      <Provider
+        info={providerInfo}
+        open={open}
+        toggle={toggle}
+        render={(providerRef) => (
+          <Popper
+            anchorEl={providerRef.current}
+            className={classes.popper}
+            open={open}
+            placement="bottom"
+            popperOptions={{ positionFixed: true }}
+          >
+            {({ TransitionProps }) => (
+              <Grow {...TransitionProps}>
+                <>
+                  <ClickAwayListener mouseEvent="onClick" onClickAway={clickAway} touchEvent={false}>
+                    <List className={classes.root} component="div">
+                      {providerDetails}
+                    </List>
+                  </ClickAwayListener>
+                </>
+              </Grow>
+            )}
+          </Popper>
+        )}
+      />
+    </Row>
+  )
+}
 
 export default withStyles(styles as any)(Layout)

src/index.tsx

@@ -11,6 +11,9 @@ import loadDefaultSafe from 'src/logic/safe/store/actions/loadDefaultSafe'
 import loadSafesFromStorage from 'src/logic/safe/store/actions/loadSafesFromStorage'
 import { store } from 'src/store'
 import { SENTRY_DSN } from './utils/constants'
+import { disableMMAutoRefreshWarning } from './utils/mm_warnings'
+
+disableMMAutoRefreshWarning()
 
 BigNumber.set({ EXPONENTIAL_AT: [-7, 255] })
 

src/logic/contracts/generateBatchRequests.ts

@@ -57,6 +57,10 @@ const generateBatchRequests = <ReturnValues>({
         if (type !== undefined) {
           request = web3[type][method].request(...args, resolver)
         } else {
+          if (address === null) {
+            resolve()
+            return
+          }
           request = contractInstance.methods[method](...args).call.request(resolver)
         }
 

src/logic/hooks/useStateHandler.tsx

@@ -0,0 +1,17 @@
+import { useState } from 'react'
+
+type ReturnValue = {
+  open: boolean
+  toggle: () => void
+  clickAway: () => void
+}
+
+export const useStateHandler = (openInitialValue = false): ReturnValue => {
+  const [open, setOpen] = useState(openInitialValue)
+
+  return {
+    open,
+    toggle: () => setOpen((open) => !open),
+    clickAway: () => setOpen(false),
+  }
+}

src/logic/wallets/getWeb3.ts

@@ -35,7 +35,7 @@ const httpProviderOptions = {
 export const web3ReadOnly = new Web3(
   process.env.NODE_ENV !== 'test'
     ? new Web3.providers.HttpProvider(getRpcServiceUrl(), httpProviderOptions)
-    : window.web3?.currentProvider || 'ws://localhost:8545',
+    : 'ws://localhost:8545',
 )
 
 let web3 = web3ReadOnly

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

@@ -1,5 +1,5 @@
 import closeSnackbar from 'src/logic/notifications/store/actions/closeSnackbar'
-import { WALLET_PROVIDER, getProviderInfo, getWeb3 } from 'src/logic/wallets/getWeb3'
+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'
@@ -29,9 +29,6 @@ const providerWatcherMware = (store) => (next) => async (action) => {
           clearInterval(watcherInterval)
         }
 
-        if (currentProviderProps.name.toUpperCase() === WALLET_PROVIDER.METAMASK && (window as any).ethereum) {
-          ;(window as any).ethereum.autoRefreshOnNetworkChange = false
-        }
         saveToStorage(LAST_USED_PROVIDER_KEY, currentProviderProps.name)
 
         watcherInterval = setInterval(async () => {

src/test/utils/accounts.ts

@@ -1,10 +1,10 @@
 // 
 function useTestAccountAt(index = 0) {
-  (window as any).testAccountIndex = index
+  window.testAccountIndex = index
 }
 
 function resetTestAccount() {
-  delete (window as any).testAccountIndex
+  delete window.testAccountIndex
 }
 
 export { useTestAccountAt, resetTestAccount }

src/types/definitions.d.ts

@@ -1,8 +1,11 @@
-import Web3 from 'web3'
+export {}
 declare global {
   interface Window {
-    web3?: Web3
-    testAccountIndex?: string
+    ethereum?: {
+      autoRefreshOnNetworkChange: boolean
+      isMetaMask: boolean
+    }
+    testAccountIndex?: string | number
   }
 }
 declare module '@openzeppelin/contracts/build/contracts/ERC721'

src/utils/mm_warnings.ts

@@ -0,0 +1,6 @@
+// https://docs.metamask.io/guide/ethereum-provider.html#ethereum-autorefreshonnetworkchange
+export const disableMMAutoRefreshWarning = (): void => {
+  if (window.ethereum && window.ethereum.isMetaMask) {
+    window.ethereum.autoRefreshOnNetworkChange = false
+  }
+}