Update walletconnect dependencies and implementation

Author: ioedeveloper

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,15 +19,15 @@ function App() {
         setTheme(theme)
       })
 
-      setWagmiClient(remix.wagmiClient)
+      setWagmiConfig(remix.wagmiConfig)
       setEthereumClient(remix.ethereumClient)
     })()
   }, [])
 
   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>

…alletconnect/src/services/RemixClient.ts …src/services/WalletConnectRemixClient.tsapps/walletconnect/src/services/RemixClient.ts renamed to apps/walletconnect/src/services/WalletConnectRemixClient.ts apps/walletconnect/src/services/RemixClient.ts renamed to 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 { arbitrum, arbitrumGoerli, mainnet, polygon, polygonMumbai, optimism, optimismGoerli, Chain, goerli, sepolia } from 'wagmi/chains'
+import { createConfig, configureChains } from 'wagmi'
+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 {
-    wagmiClient
+export class WalletConnectRemixClient extends PluginClient {
+    wagmiConfig
     ethereumClient: EthereumClient
     chains: Chain[]
     currentChain: number
@@ -36,21 +36,22 @@ 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 })])
-            
-            this.wagmiClient = wagmiCreateClient({
-              autoConnect: false,
-              connectors: w3mConnectors({ projectId: PROJECT_ID, version: 2, chains: this.chains }),
-              provider
+            const { publicClient } = configureChains(this.chains, [w3mProvider({ projectId: PROJECT_ID })])
+
+            this.wagmiConfig = createConfig({
+                autoConnect: false,
+                connectors: w3mConnectors({ projectId: PROJECT_ID, chains: this.chains }),
+                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) => {
+            console.log('this.wagmiConfig event subscribed: ', this.wagmiConfig)
             if (event.status === 'connected') {
                 this.emit('accountsChanged', [event.data.account])
                 if (this.currentChain !== event.data.chain.id) {
@@ -70,29 +71,12 @@ export class RemixClient extends PluginClient {
 
     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) {
-                    this.wagmiClient.data.provider.sendAsync(data, (error, message) => {
-                        if (error) return reject(error)
-                        resolve(message)
-                    })
-                } 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)
-                    })
-                }
+            if (this.wagmiConfig) {
+                this.wagmiConfig.publicClient.request(data).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

@@ -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",
-    "@walletconnect/sign-client": "^2.6.0",
-    "@web3modal/ethereum": "^2.2.2",
-    "@web3modal/react": "^2.2.2",
-    "@web3modal/standalone": "^2.2.2",
+    "@web3modal/ethereum": "^2.6.2",
+    "@web3modal/react": "^2.6.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"