Disconnect session onDeactivation

apps/walletconnect/src/app/app.tsx

@@ -1,7 +1,7 @@
 import React, { useEffect, useState } from 'react'
 import '../css/app.css'
 import '@fortawesome/fontawesome-free/css/all.css'
-import { EthereumClient } from '@web3modal/ethereum'
+import type { EthereumClient } from '@web3modal/ethereum'
 import { RemixClient } from '../services/RemixClient'
 import { WalletConnectUI } from './walletConnectUI'
 
@@ -18,10 +18,9 @@ function App() {
       remix.internalEvents.on('themeChanged', (theme: string) => {
         setTheme(theme)
       })
-      const ethereumClient = new EthereumClient(remix.wagmiClient, remix.chains)
       
       setWagmiClient(remix.wagmiClient)
-      setEthereumClient(ethereumClient)
+      setEthereumClient(remix.ethereumClient)
     })()
   }, [])
 

apps/walletconnect/src/app/walletConnectUI.tsx

@@ -14,4 +14,4 @@ export function WalletConnectUI ({ ethereumClient, wagmiClient, theme }) {
             <Web3Modal projectId={PROJECT_ID} ethereumClient={ethereumClient} themeMode={theme} />
         </div>
     )
-}
+}

apps/walletconnect/src/services/RemixClient.ts

@@ -3,11 +3,13 @@ import { createClient } from '@remixproject/plugin-webview'
 import { w3mConnectors, w3mProvider } from '@web3modal/ethereum'
 import { configureChains, createClient as wagmiCreateClient } from 'wagmi'
 import { arbitrum, arbitrumGoerli, mainnet, polygon, polygonMumbai, optimism, optimismGoerli, Chain, goerli, sepolia } from 'wagmi/chains'
+import { EthereumClient } from '@web3modal/ethereum'
 import EventManager from "events"
 import { PROJECT_ID } from './constant'
 
 export class RemixClient extends PluginClient {
     wagmiClient
+    ethereumClient: EthereumClient
     chains: Chain[]
     internalEvents: EventManager
 
@@ -45,6 +47,7 @@ export class RemixClient extends PluginClient {
               connectors: w3mConnectors({ projectId: PROJECT_ID, version: 1, chains: this.chains }),
               provider
             })
+            this.ethereumClient = new EthereumClient(this.wagmiClient, this.chains)
         } catch (e) {
             return console.error("Could not get a wallet connection", e)
         }
@@ -55,6 +58,7 @@ export class RemixClient extends PluginClient {
             if (event.status === 'connected') {
                 this.emit('accountsChanged', [event.data.account])
                 this.emit('chainChanged', event.data.chain.id)
+                console.log('this.wagmiClient: ', this.wagmiClient)
             } else if (event.status === 'disconnected') {
                 this.emit('accountsChanged', [])
                 this.emit('chainChanged', 0)
@@ -65,7 +69,7 @@ export class RemixClient extends PluginClient {
         })
     }
 
-    sendAsync = (data: { method: string, params: string, id: string }) => {
+    sendAsync (data: { method: string, params: string, id: string }) {
         return new Promise((resolve, reject) => {
             if (this.wagmiClient) {
                 if (this.wagmiClient.data && this.wagmiClient.data.provider && this.wagmiClient.data.provider.sendAsync) {
@@ -92,4 +96,9 @@ export class RemixClient extends PluginClient {
             }
         })
     }
+
+    onDeactivation () {
+        console.log('deactivating walletconnect plugin...')
+        this.ethereumClient.disconnect()
+    }
 }