Simplify and fix useSessions

src/components/walletconnect/ProposalForm/styles.module.css

@@ -27,4 +27,4 @@
 .alert {
   width: 100%;
   text-align: left;
-}
+}

src/components/walletconnect/SessionList/index.tsx

@@ -3,7 +3,7 @@ import { Button, Typography } from '@mui/material'
 import type { SessionTypes } from '@walletconnect/types'
 
 type SesstionListProps = {
-  sessions: Record<string, SessionTypes.Struct>
+  sessions: SessionTypes.Struct[]
   onDisconnect: (session: SessionTypes.Struct) => void
 }
 

src/components/walletconnect/SessionManager/index.tsx

@@ -4,18 +4,18 @@ import type { SessionTypes } from '@walletconnect/types'
 
 import useSafeInfo from '@/hooks/useSafeInfo'
 import { WalletConnectContext } from '@/services/walletconnect/WalletConnectContext'
+import useWalletConnectSessions from '@/services/walletconnect/useWalletConnectSessions'
 import { asError } from '@/services/exceptions/utils'
 import ProposalForm from '../ProposalForm'
 import WcInput from '../WcInput'
 import ErrorMessage from '@/components/tx/ErrorMessage'
 import SessionList from '../SessionList'
-import { useSessions } from './useSessions'
 
 const SessionManager = () => {
   const { safe, safeAddress } = useSafeInfo()
   const { chainId } = safe
   const { walletConnect, error: walletConnectError } = useContext(WalletConnectContext)
-  const sessions = useSessions()
+  const sessions = useWalletConnectSessions()
   const [proposal, setProposal] = useState<Web3WalletTypes.SessionProposal>()
   const [error, setError] = useState<Error>()
 

src/services/walletconnect/WalletConnectContext.tsx

@@ -31,14 +31,14 @@ export const WalletConnectProvider = ({ children }: { children: ReactNode }) =>
   // Update chainId
   useEffect(() => {
     if (chainId) {
-      walletConnect.chainChanged(chainId)
+      walletConnect.chainChanged(chainId).catch(setError)
     }
   }, [chainId])
 
   // Update accounts
   useEffect(() => {
     if (safeAddress && chainId) {
-      walletConnect.accountsChanged(chainId, safeAddress)
+      walletConnect.accountsChanged(chainId, safeAddress).catch(setError)
     }
   }, [chainId, safeAddress])
 

src/services/walletconnect/WalletConnectWallet.ts

@@ -12,10 +12,17 @@ import { invariant } from '@/utils/helpers'
 import { getEip155ChainId } from './utils'
 import type { Eip155ChainId } from './utils'
 
+const SESSION_ADD_EVENT = 'session_add' as 'session_delete' // Workaround: WalletConnect doesn't emit session_add event
+
 function assertWeb3Wallet<T extends Web3WalletType | null>(web3Wallet: T): asserts web3Wallet {
   return invariant(web3Wallet, 'WalletConnect not initialized')
 }
 
+/**
+ * An abstraction over the WalletConnect SDK to simplify event subscriptions
+ * and add workarounds for dapps requesting wrong required chains.
+ * Should be kept stateless exept for the web3Wallet instance.
+ */
 class WalletConnectWallet {
   private web3Wallet: Web3WalletType | null = null
 
@@ -52,7 +59,7 @@ class WalletConnectWallet {
     const eipChainId = getEip155ChainId(chainId)
 
     await Promise.all(
-      Object.keys(sessions).map((topic) => {
+      sessions.map(({ topic }) => {
         return this.web3Wallet?.emitSessionEvent({
           topic,
           event: {
@@ -70,7 +77,7 @@ class WalletConnectWallet {
     const eipChainId = getEip155ChainId(chainId)
 
     await Promise.all(
-      Object.keys(sessions).map((topic) => {
+      sessions.map(({ topic }) => {
         return this.web3Wallet?.emitSessionEvent({
           topic,
           event: {
@@ -132,6 +139,9 @@ class WalletConnectWallet {
         // Ignore
       }
 
+      // Workaround: WalletConnect doesn't have a session_add event
+      this.web3Wallet?.events.emit(SESSION_ADD_EVENT, session)
+
       return session
     }
   }
@@ -158,6 +168,17 @@ class WalletConnectWallet {
     }
   }
 
+  /**
+   * Subscribe to session add
+   */
+  public onSessionAdd(handler: () => void) {
+    this.web3Wallet?.on(SESSION_ADD_EVENT, handler)
+
+    return () => {
+      this.web3Wallet?.off(SESSION_ADD_EVENT, handler)
+    }
+  }
+
   /**
    * Subscribe to session delete
    */
@@ -179,13 +200,17 @@ class WalletConnectWallet {
       topic: session.topic,
       reason: getSdkError('USER_DISCONNECTED'),
     })
+
+    // Workaround: WalletConnect doesn't emit session_approve event
+    this.web3Wallet?.events.emit('session_delete', session)
   }
 
   /**
    * Get active sessions
    */
-  public getActiveSessions() {
-    return this.web3Wallet?.getActiveSessions() || {}
+  public getActiveSessions(): SessionTypes.Struct[] {
+    const sessionsMap = this.web3Wallet?.getActiveSessions() || {}
+    return Object.values(sessionsMap)
   }
 
   /**

src/services/walletconnect/useWalletConnectSessions.ts

@@ -0,0 +1,28 @@
+import { useContext, useEffect, useCallback, useState } from 'react'
+import type { SessionTypes } from '@walletconnect/types'
+import { WalletConnectContext } from '@/services/walletconnect/WalletConnectContext'
+
+function useWalletConnectSessions(): SessionTypes.Struct[] {
+  const { walletConnect } = useContext(WalletConnectContext)
+  const [sessions, setSessions] = useState<SessionTypes.Struct[]>([])
+
+  const updateSessions = useCallback(() => {
+    setSessions(walletConnect.getActiveSessions())
+  }, [walletConnect])
+
+  useEffect(() => {
+    walletConnect.init().then(updateSessions)
+  }, [walletConnect, updateSessions])
+
+  useEffect(() => {
+    return walletConnect.onSessionAdd(updateSessions)
+  }, [walletConnect])
+
+  useEffect(() => {
+    return walletConnect.onSessionDelete(updateSessions)
+  }, [walletConnect])
+
+  return sessions
+}
+
+export default useWalletConnectSessions