Merge pull request #16 from gnosis/connections-bugfix

Connections bugfix

src/providers/useWalletConnectProvider.ts

@@ -6,7 +6,25 @@ interface Result {
   connected: boolean
 }
 
+class ProviderEventTarget extends EventTarget {
+  constructor(provider: WalletConnectEthereumProvider) {
+    super()
+
+    // @ts-expect-error signer is a private property, but we didn't find another way
+    provider.signer.on('connect', () => {
+      this.dispatchEvent(new Event('connect'))
+    })
+
+    provider.on('disconnect', () => {
+      this.dispatchEvent(new Event('disconnect'))
+    })
+  }
+}
+
+// Global states for providers and event targets
 const providers: Record<string, WalletConnectEthereumProvider> = {}
+// We need the indirection via an extra EventTarget to workaround MaxListenersExceededWarning emitted from WalletConnectEthereumProvider
+const providerEventTargets: Record<string, ProviderEventTarget> = {}
 
 const useWalletConnectProvider = (connectionId: string): Result => {
   if (!providers[connectionId]) {
@@ -17,30 +35,33 @@ const useWalletConnectProvider = (connectionId: string): Result => {
         100: 'https://rpc.gnosischain.com/',
       },
     })
+    providerEventTargets[connectionId] = new ProviderEventTarget(
+      providers[connectionId]
+    )
   }
+
   const provider = providers[connectionId]
 
   const [connected, setConnected] = useState(provider.connected)
+  const providerEventTarget = providerEventTargets[connectionId]
   useEffect(() => {
     const handleConnection = () => {
       console.log(`WalletConnect connected: ${connectionId}`)
       setConnected(true)
     }
-    // @ts-expect-error signer is a private property, but we didn't find another way
-    provider.signer.on('connect', handleConnection)
+    providerEventTarget.addEventListener('connect', handleConnection)
 
     const handleDisconnection = () => {
       console.log(`WalletConnect disconnected: ${connectionId}`)
       setConnected(false)
     }
-    provider.on('disconnect', handleDisconnection)
+    providerEventTarget.addEventListener('disconnect', handleDisconnection)
 
     return () => {
-      // @ts-expect-error signer is a private property, but we didn't find another way
-      provider.signer.off('connect', handleConnection)
-      provider.off('disconnect', handleDisconnection)
+      providerEventTarget.removeEventListener('connect', handleConnection)
+      providerEventTarget.removeEventListener('disconnect', handleDisconnection)
     }
-  }, [provider, connectionId])
+  }, [providerEventTarget, connectionId])
 
   return { provider, connected }
 }

src/settings/Connection/ConnectButton/index.tsx

@@ -6,8 +6,8 @@ import { useConnection } from '../../connectionHooks'
 import classes from './style.module.css'
 import walletConnectLogoUrl from './wallet-connect-logo.png'
 
-const ConnectButton: React.FC = () => {
-  const { provider, connected } = useConnection()
+const ConnectButton: React.FC<{ id: string }> = ({ id }) => {
+  const { provider, connected } = useConnection(id)
   return (
     <>
       {connected ? (

src/settings/Connection/Edit.tsx

@@ -27,8 +27,10 @@ const EditConnection: React.FC<Props> = ({ id, onLaunch }) => {
   const { connection, connected } = useConnection(id)
 
   const { label, avatarAddress, moduleAddress, roleId } = connection
-  const { loading, isValidSafe, enabledModules } =
-    useSafeModuleInfo(avatarAddress)
+  const { loading, isValidSafe, enabledModules } = useSafeModuleInfo(
+    avatarAddress,
+    id
+  )
 
   const pushSettingsRoute = usePushSettingsRoute()
 
@@ -86,7 +88,7 @@ const EditConnection: React.FC<Props> = ({ id, onLaunch }) => {
             />
           </Field>
           <Field>
-            <ConnectButton />
+            <ConnectButton id={id} />
           </Field>
           <Field label="DAO Safe">
             <input

src/settings/Connection/Select.tsx

@@ -2,7 +2,7 @@ import React from 'react'
 import { RiBallPenLine } from 'react-icons/ri'
 import { VscDebugDisconnect } from 'react-icons/vsc'
 
-import { AddressStack, BlockButton, Flex, IconButton } from '../../components'
+import { AddressStack, BlockButton, Flex } from '../../components'
 import { useWalletConnectProvider } from '../../providers'
 import { usePushSettingsRoute } from '../../routing'
 import { Connection } from '../../types'

src/settings/Connection/useSafeModuleInfo.ts

@@ -8,14 +8,14 @@ import { useConnection } from '../connectionHooks'
 import { isValidAddress } from './addressValidation'
 
 export const useSafeModuleInfo = (
-  safeAddress: string
+  safeAddress: string,
+  connectionId?: string
 ): { loading: boolean; isValidSafe: boolean; enabledModules: string[] } => {
   const [loading, setLoading] = useState(true)
   const [isValidSafe, setIsValidSafe] = useState(false)
   const [enabledModules, setEnabledModules] = useState<string[]>([])
 
-  const { provider, connected } = useConnection()
-
+  const { provider, connected } = useConnection(connectionId)
   useEffect(() => {
     if (!connected) return
 

src/settings/useConnectionDryRun.tsx

@@ -3,6 +3,7 @@ import WalletConnectEthereumProvider from '@walletconnect/ethereum-provider'
 import { useEffect, useState } from 'react'
 
 import { wrapRequest } from '../providers/WrappingProvider'
+import { Connection } from '../types'
 import { decodeRolesError } from '../utils'
 
 import {
@@ -12,16 +13,13 @@ import {
 import { useConnection } from './connectionHooks'
 
 const useConnectionDryRun = ({
+  id,
   moduleAddress,
   avatarAddress,
   roleId,
-}: {
-  moduleAddress: string
-  avatarAddress: string
-  roleId: string
-}) => {
+}: Connection) => {
   const [error, setError] = useState<string | null>(null)
-  const { provider, connected } = useConnection()
+  const { provider, connected } = useConnection(id)
 
   useEffect(() => {
     if (connected && avatarAddress && moduleAddress && roleId) {