Extra connect status

src/contexts/Web3Context.tsx

@@ -112,10 +112,9 @@ const web3Modal = new Web3Modal({
 const logger = getLogger('Web3Context')
 
 export const Web3ContextProvider = ({ children }: Props) => {
-  const web3StatusDefault: Web3Status = web3Modal.cachedProvider
-    ? { _type: Web3ContextStatus.Connecting }
-    : { _type: Web3ContextStatus.NotAsked }
-  const [web3Status, setWeb3Status] = React.useState<Web3Status>(web3StatusDefault)
+  const [web3Status, setWeb3Status] = React.useState<Web3Status>({
+    _type: Web3ContextStatus.NotAsked,
+  })
 
   const { getValue, setValue } = useLocalStorage(`isUsingTheCPK`)
 
@@ -220,17 +219,18 @@ export const Web3ContextProvider = ({ children }: Props) => {
   }, [web3Status, resetApp])
 
   const connectWeb3Modal = React.useCallback(async () => {
-    if (web3Status._type === Web3ContextStatus.Connected) {
-      return
-    }
     let web3Provider: Web3Provider
     try {
+      setWeb3Status({ _type: Web3ContextStatus.Connecting })
       web3Provider = await web3Modal.connect()
     } catch (error) {
-      if (error.match(/modal closed/i)) {
+      web3Modal.clearCachedProvider()
+
+      if (error && error.match(/modal closed/i)) {
+        setWeb3Status({ _type: Web3ContextStatus.NotAsked })
         return
       }
-      web3Modal.clearCachedProvider()
+
       setWeb3Status({ _type: Web3ContextStatus.Error, error } as ErrorWeb3)
       return
     }
@@ -253,6 +253,7 @@ export const Web3ContextProvider = ({ children }: Props) => {
         const CPKService = new CPKServiceClass(cpk, provider, networkConfig)
 
         const address = await signer.getAddress()
+
         setWeb3Status({
           _type: Web3ContextStatus.Connected,
           provider,
@@ -274,13 +275,9 @@ export const Web3ContextProvider = ({ children }: Props) => {
     } catch (error) {
       setWeb3Status({ _type: Web3ContextStatus.Error, error } as ErrorWeb3)
     }
-  }, [web3Status, subscribeProvider])
+  }, [subscribeProvider])
 
   const connectInfura = React.useCallback(async () => {
-    if (web3Status._type === Web3ContextStatus.Infura) {
-      return
-    }
-
     try {
       const provider = new ethers.providers.InfuraProvider(DEFAULT_NETWORK_ID, INFURA_ID)
 
@@ -307,15 +304,21 @@ export const Web3ContextProvider = ({ children }: Props) => {
     } catch (error) {
       setWeb3Status({ _type: Web3ContextStatus.Error, error } as ErrorWeb3)
     }
-  }, [web3Status])
+  }, [])
 
+  // By default try to reach Infura
   React.useEffect(() => {
-    if (web3Modal.cachedProvider) {
-      connectWeb3Modal()
-    } else {
+    if (web3Status._type === Web3ContextStatus.NotAsked) {
       connectInfura()
     }
-  }, [connectWeb3Modal, connectInfura])
+  }, [connectInfura, web3Status._type])
+
+  // If a cachedProvider is present, continue with web3Modal connection
+  React.useEffect(() => {
+    if (web3Modal.cachedProvider && web3Status._type === Web3ContextStatus.Infura) {
+      connectWeb3Modal()
+    }
+  }, [connectWeb3Modal, web3Status._type])
 
   return (
     <Web3Context.Provider

src/hooks/useIsStateStalled.tsx

@@ -0,0 +1,26 @@
+import { useEffect, useRef, useState } from 'react'
+
+// With object or functions use memoized versions (useMemo / useCallback)
+export const useIsStateStalled = <T,>(state: T, stalledIn: T, timeout: number) => {
+  const [isStalled, setIsStalled] = useState(false)
+  const stateRef = useRef(state)
+  stateRef.current = state
+
+  useEffect(() => {
+    let timer: Maybe<number> = null
+    if (stateRef.current === stalledIn) {
+      timer = setTimeout(() => {
+        if (stateRef.current === stalledIn) {
+          setIsStalled(true)
+        }
+      }, timeout)
+    } else {
+      setIsStalled(false)
+    }
+    return () => {
+      timer && clearTimeout(timer)
+    }
+  }, [state, stalledIn, timeout])
+
+  return isStalled
+}

src/pages/Routes/index.tsx

@@ -3,6 +3,7 @@ import { Redirect, Route, RouteProps, Switch } from 'react-router-dom'
 
 import { InfoCard } from 'components/statusInfo/InfoCard'
 import { Web3ContextStatus, useWeb3Context } from 'contexts/Web3Context'
+import { useIsStateStalled } from 'hooks/useIsStateStalled'
 import { ConditionDetails } from 'pages/ConditionDetails'
 import { ConditionsList } from 'pages/ConditionsList'
 import { CookiePolicy } from 'pages/CookiePolicy'
@@ -19,9 +20,13 @@ import { TermsAndConditions } from 'pages/TermsAndConditions'
 const ProtectedRoute: React.FC<RouteProps> = (props) => {
   const { component, path } = props
   const { status } = useWeb3Context()
+  const connectingError = useIsStateStalled(status._type, Web3ContextStatus.Connecting, 2500)
 
   return (
     <>
+      {connectingError && (
+        <InfoCard message="You need to unlock or connect your wallet..." title="Error" />
+      )}
       {status._type === Web3ContextStatus.Error && (
         <InfoCard message="Error when trying to connect..." title="Error" />
       )}