Fixed wagmi and walletconnect event issues

apps/wallet-connect/src/app/app.tsx

@@ -1,13 +1,11 @@
 import React, { useEffect, useState } from 'react'
 import '../css/app.css'
 import '@fortawesome/fontawesome-free/css/all.css'
-import { PROJECT_ID } from '../services/constant'
 import { EthereumClient } from '@web3modal/ethereum'
-import { Web3Button, Web3Modal, Web3NetworkSwitch } from '@web3modal/react'
-import { WagmiConfig } from 'wagmi'
 import { RemixClient } from '../services/RemixClient'
+import { WalletConnectUI } from './walletConnectUI'
 
-const p = new RemixClient()
+const remix = new RemixClient()
 
 function App() {
   const [ethereumClient, setEthereumClient] = useState<EthereumClient>(null)
@@ -15,30 +13,17 @@ function App() {
 
   useEffect(() => {
     (async () => {
-      await p.init()
-      const ethereumClient = new EthereumClient(p.wagmiClient, p.chains)
+      await remix.initClient()
+      const ethereumClient = new EthereumClient(remix.wagmiClient, remix.chains)
       
-      setWagmiClient(p.wagmiClient)
+      setWagmiClient(remix.wagmiClient)
       setEthereumClient(ethereumClient)
     })()
   }, [])
 
   return (
     <div className="App">
-          <div style={{ display: 'inline-block' }}>
-            { wagmiClient && <WagmiConfig client={wagmiClient}>
-                <Web3Button label='Connect to a wallet' />
-              </WagmiConfig>
-            }
-          </div>
-          <div style={{ display: 'inline-block', paddingLeft: 30, marginTop: 5 }}>
-            { wagmiClient && 
-              <WagmiConfig client={wagmiClient}>
-                <Web3NetworkSwitch />
-              </WagmiConfig>
-            }
-          </div>
-      { ethereumClient && <Web3Modal projectId={PROJECT_ID} ethereumClient={ethereumClient} themeMode={'dark'} /> }
+      { ethereumClient && wagmiClient && <WalletConnectUI wagmiClient={wagmiClient} ethereumClient={ethereumClient} /> }
     </div>
   )
 }

apps/wallet-connect/src/app/walletConnectUI.tsx

@@ -0,0 +1,17 @@
+import { Web3Button, Web3Modal } from "@web3modal/react"
+import { WagmiConfig } from "wagmi"
+import { PROJECT_ID } from "../services/constant"
+
+export function WalletConnectUI ({ ethereumClient, wagmiClient }) {
+
+    return (
+        <div>
+            <div style={{ display: 'inline-block', marginTop: 25 }}>
+                <WagmiConfig client={wagmiClient}>
+                    <Web3Button label='Connect to a wallet' />
+                </WagmiConfig>
+            </div>
+            <Web3Modal projectId={PROJECT_ID} ethereumClient={ethereumClient} themeMode={'dark'} />
+        </div>
+    )
+}

apps/wallet-connect/src/services/RemixClient.ts

@@ -16,13 +16,21 @@ export class RemixClient extends PluginClient {
         this.onload()
     }
 
-    async init() {
+    onActivation () {
+        this.subscribeToEvents()
+    }
+
+    init () {
+        console.log('initializing walletconnect plugin...')
+    }
+
+    async initClient () {
         try {
             this.chains = [arbitrum, mainnet, polygon, optimism, goerli, sepolia]
-          
             const { provider } = configureChains(this.chains, [w3mProvider({ projectId: PROJECT_ID })])
+            
             this.wagmiClient = wagmiCreateClient({
-              autoConnect: false,
+              autoConnect: true,
               connectors: w3mConnectors({ projectId: PROJECT_ID, version: 1, chains: this.chains }),
               provider
             })
@@ -31,6 +39,18 @@ export class RemixClient extends PluginClient {
         }
     }
 
+    subscribeToEvents () {
+        this.wagmiClient.subscribe((event) => {
+            if (event.status === 'connected') {
+                this.emit('accountsChanged', [event.data.account])
+                this.emit('chainChanged', event.data.chain.id)
+            } else if (event.status === 'disconnected') {
+                this.emit('accountsChanged', [])
+                this.emit('chainChanged', 0)
+            }
+        })
+    }
+
     sendAsync = (data: { method: string, params: string, id: string }) => {
         return new Promise((resolve, reject) => {
             if (this.wagmiClient) {
@@ -53,6 +73,7 @@ export class RemixClient extends PluginClient {
                     })
                 }
             } else {
+                console.error(`Cannot make ${data.method} request. Remix client is not connect to walletconnect client`)
                 resolve({"jsonrpc": "2.0", "result": [], "id": data.id})
             }
         })