Implement sendAsync api with newly discovered functions from wagmi codebas

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

@@ -1,106 +1,44 @@
 import React, { useEffect, useState } from 'react'
-import EthereumProvider from '@walletconnect/ethereum-provider'
 import '../css/app.css'
 import '@fortawesome/fontawesome-free/css/all.css'
-import { RemixClient } from '../services/RemixClient'
 import { PROJECT_ID } from '../services/constant'
-import { Web3Modal } from '@web3modal/standalone'
+import { EthereumClient } from '@web3modal/ethereum'
+import { Web3Button, Web3Modal, Web3NetworkSwitch } from '@web3modal/react'
+import { WagmiConfig } from 'wagmi'
+import { RemixClient } from '../services/RemixClient'
 
-const remix = new RemixClient()
-const web3Modal = new Web3Modal({
-  projectId: PROJECT_ID,
-  standaloneChains: ["eip155:1"],
-  walletConnectVersion: 2
-})
+const p = new RemixClient()
 
 function App() {
-  const [isConnected, setIsConnected] = useState<boolean>(false)
-  const [provider, setProvider] = useState<EthereumProvider>()
-  const [accounts, setAccounts] = useState<string[]>([])
+  const [ethereumClient, setEthereumClient] = useState<EthereumClient>(null)
+  const [wagmiClient, setWagmiClient] = useState(null)
 
   useEffect(() => {
-    if (!provider) {
-      createClient()
-    }
-  }, [provider])
-
-  const createClient = async () => {
-    try {
-      const provider = await EthereumProvider.init({
-        projectId: PROJECT_ID,
-        chains: [1],
-        showQrModal: true
-      })
-
-      provider.modal = web3Modal
-      setProvider(provider)
-    } catch (e) {
-      console.log(e)
-    }
-  }
-
-  const handleConnect = async () => {
-    if (!provider) throw Error("Cannot connect. Sign Client is not created")
-    try {
-      subscribeToEvents(provider)
-      await provider.connect()
-      remix.walletConnectClient = provider
-    } catch (e) {
-      console.log(e)
-    }
-  }
-
-  const handleDisconnect = async () => {
-    try {
-      await provider.disconnect()
-      reset()
-    } catch (e) {
-      console.log(e)
-    }
-  }
+    (async () => {
+      await p.init()
+      const ethereumClient = new EthereumClient(p.wagmiClient, p.chains)
       
-  const subscribeToEvents = (provider: EthereumProvider) => {
-    if (!provider) throw Error("Provider does not exist")
-
-    try {
-      provider.on('connect', () => {
-        setIsConnected(true)
-      })
-
-      provider.on('chainChanged', (args) => {
-        remix.emit('chainChanged', args)
-      })
-
-      provider.on('accountsChanged', (args) => {
-        remix.emit('accountsChanged', args)
-      })
-    } catch (e) {
-      console.log(e)
-    }
-  }
-
-  const reset = () => {
-    setAccounts([])
-    setIsConnected(false)
-  }
+      setWagmiClient(p.wagmiClient)
+      setEthereumClient(ethereumClient)
+    })()
+  }, [])
 
   return (
     <div className="App">
-      <div className="btn-group-vertical mt-5 w-25" role="group">
-        { !isConnected && <button id="connectbtn" type="button" onClick={handleConnect} className="btn btn-primary">Connect to a wallet</button> }
-        { isConnected && <button id="disconnectbtn" type="button" onClick={handleDisconnect} className="btn btn-primary mt-2">Disconnect</button> }
-      </div>
-      <div id='accounts-container'>
-        { accounts.length > 0 &&
-          <div>
-            <label><b>Accounts: </b></label><br></br>
-            <ul className="list-group list-group-flush" id="accounts">
-              { accounts.map((account, index) => <li key={index}>{ account }</li>) }
-            </ul>
+          <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>
-        }
-        {/* <div><label><b>Network: </b></label><label className="ml-1" id="chain"> - </label></div> */}
-      </div>
+      { ethereumClient && <Web3Modal projectId={PROJECT_ID} ethereumClient={ethereumClient} themeMode={'dark'} /> }
     </div>
   )
 }

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

@@ -1,9 +1,13 @@
 import { PluginClient } from '@remixproject/plugin'
 import { createClient } from '@remixproject/plugin-webview'
-import EthereumProvider from '@walletconnect/ethereum-provider'
+import { w3mConnectors, w3mProvider } from '@web3modal/ethereum'
+import { configureChains, createClient as wagmiCreateClient } from 'wagmi'
+import { arbitrum, mainnet, polygon, optimism, Chain, goerli, sepolia } from 'wagmi/chains'
+import { PROJECT_ID } from './constant'
 
 export class RemixClient extends PluginClient {
-    #walletConnectClient: EthereumProvider
+    wagmiClient
+    chains: Chain[]
 
     constructor() {
         super()
@@ -12,26 +16,43 @@ export class RemixClient extends PluginClient {
         this.onload()
     }
 
-    init () {
-        console.log('initialzing...')
-    }
+    async init() {
+        try {
+            this.chains = [arbitrum, mainnet, polygon, optimism, goerli, sepolia]
           
-    set walletConnectClient (value: EthereumProvider) {
-        this.#walletConnectClient = value
+            const { provider } = configureChains(this.chains, [w3mProvider({ projectId: PROJECT_ID })])
+            this.wagmiClient = wagmiCreateClient({
+              autoConnect: false,
+              connectors: w3mConnectors({ projectId: PROJECT_ID, version: 1, chains: this.chains }),
+              provider
+            })
+        } catch (e) {
+            return console.error("Could not get a wallet connection", e)
+        }
     }
 
-    sendAsync = (data: { id: string, method: string, params: any[] }) => {
+    sendAsync = (data: { method: string, params: string, id: string }) => {
         return new Promise((resolve, reject) => {
-            if (this.#walletConnectClient) {
-                if (data.method === 'eth_chainId') data.method = 'eth_chainId'
-                this.#walletConnectClient.sendAsync(data, (error, message) => {
-                    console.log('method: ', data.method)
-                    if (error) return reject(error)
-                    console.log('message: ', message)
-                    resolve({"jsonrpc": "2.0", "result": message, "id": data.id})
-                })
+            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) {
+                    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('Remix Client is not connected to WalletConnect Client.')
                 resolve({"jsonrpc": "2.0", "result": [], "id": data.id})
             }
         })