Merge pull request #3716 from ethereum/fix-wallet-connect

Fix wallet connect

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,12 +3,15 @@ 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[]
+    currentChain: number
     internalEvents: EventManager
 
     constructor() {
@@ -30,11 +33,6 @@ export class RemixClient extends PluginClient {
         console.log('initializing walletconnect plugin...')
     }
 
-    async deactivate(){
-        console.log('deactivating walletconnect plugin...')
-        return true
-    }
-
     async initClient () {
         try {
             this.chains = [arbitrum, arbitrumGoerli, mainnet, polygon, polygonMumbai, optimism, optimismGoerli, goerli, sepolia]
@@ -45,6 +43,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)
         }
@@ -54,10 +53,14 @@ export class RemixClient extends PluginClient {
         this.wagmiClient.subscribe((event) => {
             if (event.status === 'connected') {
                 this.emit('accountsChanged', [event.data.account])
-                this.emit('chainChanged', event.data.chain.id)
+                if (this.currentChain !== event.data.chain.id) {
+                    this.currentChain = event.data.chain.id
+                    this.emit('chainChanged', event.data.chain.id)
+                }
             } else if (event.status === 'disconnected') {
                 this.emit('accountsChanged', [])
                 this.emit('chainChanged', 0)
+                this.currentChain = 0
             }
         })
         this.on('theme', 'themeChanged', (theme: any) => {
@@ -65,7 +68,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) {
@@ -74,11 +77,15 @@ export class RemixClient extends PluginClient {
                         resolve(message)
                     })
                 } else if (this.wagmiClient.data && this.wagmiClient.data.provider && this.wagmiClient.data.provider.jsonRpcFetchFunc) {
-                    this.wagmiClient.data.provider.jsonRpcFetchFunc(data.method, data.params).then((message) => {
+                    if (data.method === 'net_version' || data.method === 'eth_chainId') {
-                        resolve({"jsonrpc": "2.0", "result": message, "id": data.id})
+                        resolve({"jsonrpc": "2.0", "result": this.currentChain, "id": data.id})
-                    }).catch((error) => {
+                    } else {
-                        reject(error)
+                        this.wagmiClient.data.provider.jsonRpcFetchFunc(data.method, data.params).then((message) => {
-                    })
+                            resolve({"jsonrpc": "2.0", "result": message, "id": data.id})
+                        }).catch((error) => {
+                            reject(error)
+                        })
+                    }
                 } else {
                     this.wagmiClient.provider.send(data.method, data.params).then((message) => {
                         resolve({"jsonrpc": "2.0", "result": message, "id": data.id})
@@ -92,4 +99,9 @@ export class RemixClient extends PluginClient {
             }
         })
     }
+
+    async deactivate(){
+        console.log('deactivating walletconnect plugin...')
+        await this.ethereumClient.disconnect()
+    }
 }