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

Update walletconnect dependencies and implementation

apps/walletconnect/src/app/app.tsx

@@ -2,14 +2,14 @@ import React, { useEffect, useState } from 'react'
 import '../css/app.css'
 import '@fortawesome/fontawesome-free/css/all.css'
 import type { EthereumClient } from '@web3modal/ethereum'
-import { RemixClient } from '../services/RemixClient'
+import { WalletConnectRemixClient } from '../services/WalletConnectRemixClient'
 import { WalletConnectUI } from './walletConnectUI'
 
-const remix = new RemixClient()
+const remix = new WalletConnectRemixClient()
 
 function App() {
   const [ethereumClient, setEthereumClient] = useState<EthereumClient>(null)
-  const [wagmiClient, setWagmiClient] = useState(null)
+  const [wagmiConfig, setWagmiConfig] = useState(null)
   const [theme, setTheme] = useState<string>('dark')
 
   useEffect(() => {
@@ -19,7 +19,7 @@ function App() {
         setTheme(theme)
       })
       
-      setWagmiClient(remix.wagmiClient)
+      setWagmiConfig(remix.wagmiConfig)
       setEthereumClient(remix.ethereumClient)
     })()
   }, [])
@@ -27,7 +27,7 @@ function App() {
   return (
     <div className="App">
       <h4 className='mt-1'>WalletConnect</h4>
-      { ethereumClient && wagmiClient && <WalletConnectUI wagmiClient={wagmiClient} ethereumClient={ethereumClient} theme={theme} /> }
+      { ethereumClient && wagmiConfig && <WalletConnectUI wagmiConfig={wagmiConfig} ethereumClient={ethereumClient} theme={theme} /> }
     </div>
   )
 }

apps/walletconnect/src/app/walletConnectUI.tsx

@@ -2,12 +2,12 @@ import { Web3Button, Web3Modal } from "@web3modal/react"
 import { WagmiConfig } from "wagmi"
 import { PROJECT_ID } from "../services/constant"
 
-export function WalletConnectUI ({ ethereumClient, wagmiClient, theme }) {
+export function WalletConnectUI ({ ethereumClient, wagmiConfig, theme }) {
 
     return (
         <div>
             <div style={{ display: 'inline-block' }}>
-                <WagmiConfig client={wagmiClient}>
+                <WagmiConfig config={wagmiConfig}>
                     <Web3Button label='Connect to a wallet' />
                 </WagmiConfig>
             </div>

apps/walletconnect/src/services/WalletConnectRemixClient.ts

@@ -1,14 +1,14 @@
 import { PluginClient } from '@remixproject/plugin'
 import { createClient } from '@remixproject/plugin-webview'
 import { w3mConnectors, w3mProvider } from '@web3modal/ethereum'
-import { configureChains, createClient as wagmiCreateClient } from 'wagmi'
+import { createConfig, configureChains } from 'wagmi'
-import { arbitrum, arbitrumGoerli, mainnet, polygon, polygonMumbai, optimism, optimismGoerli, Chain, goerli, sepolia } from 'wagmi/chains'
+import { arbitrum, arbitrumGoerli, mainnet, polygon, polygonMumbai, optimism, optimismGoerli, Chain, goerli, sepolia } from 'viem/chains'
 import { EthereumClient } from '@web3modal/ethereum'
 import EventManager from "events"
 import { PROJECT_ID } from './constant'
 
-export class RemixClient extends PluginClient {
+export class WalletConnectRemixClient extends PluginClient {
-    wagmiClient
+    wagmiConfig
     ethereumClient: EthereumClient
     chains: Chain[]
     currentChain: number
@@ -36,21 +36,21 @@ export class RemixClient extends PluginClient {
     async initClient () {
         try {
             this.chains = [arbitrum, arbitrumGoerli, mainnet, polygon, polygonMumbai, optimism, optimismGoerli, goerli, sepolia]
-            const { provider } = configureChains(this.chains, [w3mProvider({ projectId: PROJECT_ID })])
+            const { publicClient } = configureChains(this.chains, [w3mProvider({ projectId: PROJECT_ID })])
-            
+
-            this.wagmiClient = wagmiCreateClient({
+            this.wagmiConfig = createConfig({
-              autoConnect: false,
+                autoConnect: false,
-              connectors: w3mConnectors({ projectId: PROJECT_ID, version: 2, chains: this.chains }),
+                connectors: w3mConnectors({ projectId: PROJECT_ID, chains: this.chains }),
-              provider
+                publicClient
             })
-            this.ethereumClient = new EthereumClient(this.wagmiClient, this.chains)
+            this.ethereumClient = new EthereumClient(this.wagmiConfig, this.chains)
         } catch (e) {
             return console.error("Could not get a wallet connection", e)
         }
     }
 
     subscribeToEvents () {
-        this.wagmiClient.subscribe((event) => {
+        this.wagmiConfig.subscribe((event) => {
             if (event.status === 'connected') {
                 this.emit('accountsChanged', [event.data.account])
                 if (this.currentChain !== event.data.chain.id) {
@@ -70,29 +70,12 @@ export class RemixClient extends PluginClient {
 
     sendAsync (data: { method: string, params: string, id: string }) {
         return new Promise((resolve, reject) => {
-            if (this.wagmiClient) {
+            if (this.wagmiConfig) {
-                if (this.wagmiClient.data && this.wagmiClient.data.provider && this.wagmiClient.data.provider.sendAsync) {
+                this.wagmiConfig.publicClient.request(data).then((message) => {
-                    this.wagmiClient.data.provider.sendAsync(data, (error, message) => {
+                    resolve({"jsonrpc": "2.0", "result": message, "id": data.id})
-                        if (error) return reject(error)
+                }).catch((error) => {
-                        resolve(message)
+                    reject(error)
-                    })
+                })
-                } else if (this.wagmiClient.data && this.wagmiClient.data.provider && this.wagmiClient.data.provider.jsonRpcFetchFunc) {
-                    if (data.method === 'net_version' || data.method === 'eth_chainId') {
-                        resolve({"jsonrpc": "2.0", "result": this.currentChain, "id": data.id})
-                    } else {
-                        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})
-                    }).catch((error) => {
-                        reject(error)
-                    })
-                }
             } else {
                 console.error(`Cannot make ${data.method} request. Remix client is not connect to walletconnect client`)
                 resolve({"jsonrpc": "2.0", "result": [], "id": data.id})

apps/walletconnect/src/services/provider.ts

@@ -1,53 +0,0 @@
-import { providers } from 'ethers'
-
-import type { Chain } from 'wagmi/chains'
-import type { ChainProviderFn } from 'wagmi/'
-
-interface FallbackProviderConfig {
-  // The Provider
-  provider: any;
-
-  // The priority to favour this Provider; lower values are used first (higher priority)
-  priority?: number;
-
-  // Timeout before also triggering the next provider; this does not stop
-  // this provider and if its result comes back before a quorum is reached
-  // it will be incorporated into the vote
-  // - lower values will cause more network traffic but may result in a
-  //   faster result.
-  stallTimeout?: number;
-
-  // How much this provider contributes to the quorum; sometimes a specific
-  // provider may be more reliable or trustworthy than others, but usually
-  // this should be left as the default
-  weight?: number;
-}
-
-export function customProvider<TChain extends Chain = Chain>({
-  priority,
-  stallTimeout,
-  weight,
-}: FallbackProviderConfig): ChainProviderFn<
-  TChain,
-  providers.Web3Provider,
-  providers.WebSocketProvider
-> {
-  return function (chain) {
-    return {
-      chain: {
-        ...chain,
-      } as TChain,
-      provider: () => {
-        const provider = new providers.Web3Provider(
-          window.ethereum,
-          {
-            chainId: chain.id,
-            name: chain.network,
-            ensAddress: chain.contracts?.ensRegistry?.address,
-          }
-        )
-        return Object.assign(provider, { priority, stallTimeout, weight })
-      }
-    }
-  }
-}

package.json

@@ -138,11 +138,8 @@
     "@remixproject/plugin-webview": "0.3.33",
     "@remixproject/plugin-ws": "0.3.33",
     "@types/nightwatch": "^2.3.1",
-    "@walletconnect/ethereum-provider": "^2.6.2",
+    "@web3modal/ethereum": "^2.6.2",
-    "@walletconnect/sign-client": "^2.6.0",
+    "@web3modal/react": "^2.6.2",
-    "@web3modal/ethereum": "^2.2.2",
-    "@web3modal/react": "^2.2.2",
-    "@web3modal/standalone": "^2.2.2",
     "ansi-gray": "^0.1.1",
     "async": "^2.6.2",
     "axios": "1.1.2",
@@ -208,7 +205,8 @@
     "tree-kill": "^1.2.2",
     "ts-loader": "^9.2.6",
     "tslib": "^2.3.0",
-    "wagmi": "^0.12.7",
+    "viem": "^1.2.12",
+    "wagmi": "^1.3.8",
     "web3": "^1.8.0",
     "winston": "^3.3.3",
     "ws": "^7.3.0"