Use walletconnect new provider api

ethereum · Aug 21, 2023 · 7ee8ce7 · 7ee8ce7
1 parent 922a5f2
commit 7ee8ce7
Show file tree

Hide file tree

Showing 3 changed files with 273 additions and 167 deletions.
diff --git a/apps/walletconnect/src/services/WalletConnectRemixClient.ts b/apps/walletconnect/src/services/WalletConnectRemixClient.ts
@@ -1,90 +1,135 @@
-import { PluginClient } from '@remixproject/plugin'
-import { createClient } from '@remixproject/plugin-webview'
-import { w3mConnectors, w3mProvider } from '@web3modal/ethereum'
-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'
+import {PluginClient} from '@remixproject/plugin'
+import {createClient} from '@remixproject/plugin-webview'
+import {w3mConnectors, w3mProvider} from '@web3modal/ethereum'
+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 WalletConnectRemixClient extends PluginClient {
-    wagmiConfig
-    ethereumClient: EthereumClient
-    chains: Chain[]
-    currentChain: number
-    internalEvents: EventManager
+  wagmiConfig
+  ethereumClient: EthereumClient
+  chains: Chain[]
+  currentChain: number
+  internalEvents: EventManager
 
-    constructor() {
-        super()
-        createClient(this)
-        this.internalEvents = new EventManager()
-        this.methods = ["sendAsync", "init", "deactivate"]
-        this.onload()
-    }
+  constructor() {
+    super()
+    createClient(this)
+    this.internalEvents = new EventManager()
+    this.methods = ['sendAsync', 'init', 'deactivate']
+    this.onload()
+  }
 
-    onActivation () {
-        this.subscribeToEvents()
-        this.call('theme', 'currentTheme').then((theme: any) => {
-            this.internalEvents.emit('themeChanged', theme.quality.toLowerCase())
-        })
-    }
+  onActivation() {
+    this.subscribeToEvents()
+    this.call('theme', 'currentTheme').then((theme: any) => {
+      this.internalEvents.emit('themeChanged', theme.quality.toLowerCase())
+    })
+  }
 
-    init () {
-        console.log('initializing walletconnect plugin...')
-    }
+  init() {
+    console.log('initializing walletconnect plugin...')
+  }
 
-    async initClient () {
-        try {
-            this.chains = [arbitrum, arbitrumGoerli, mainnet, polygon, polygonMumbai, optimism, optimismGoerli, goerli, sepolia]
-            const { publicClient } = configureChains(this.chains, [w3mProvider({ projectId: PROJECT_ID })])
+  async initClient() {
+    try {
+      this.chains = [
+        arbitrum,
+        arbitrumGoerli,
+        mainnet,
+        polygon,
+        polygonMumbai,
+        optimism,
+        optimismGoerli,
+        goerli,
+        sepolia
+      ]
+      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.wagmiConfig, this.chains)
-        } catch (e) {
-            return console.error("Could not get a wallet connection", e)
-        }
+      this.wagmiConfig = createConfig({
+        autoConnect: false,
+        connectors: w3mConnectors({projectId: PROJECT_ID, chains: this.chains}),
+        publicClient
+      })
+      this.ethereumClient = new EthereumClient(this.wagmiConfig, this.chains)
+    } catch (e) {
+      return console.error('Could not get a wallet connection', e)
     }
+  }
 
-    subscribeToEvents () {
-        this.wagmiConfig.subscribe((event) => {
-            if (event.status === 'connected') {
-                this.emit('accountsChanged', [event.data.account])
-                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) => {
-            this.internalEvents.emit('themeChanged', theme.quality)
-        })
-    }
+  subscribeToEvents() {
+    this.wagmiConfig.subscribe((event) => {
+      if (event.status === 'connected') {
+        this.emit('accountsChanged', [event.data.account])
+        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) => {
+      this.internalEvents.emit('themeChanged', theme.quality)
+    })
+  }
 
-    sendAsync (data: { method: string, params: string, id: string }) {
-        return new Promise((resolve, reject) => {
-            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})
-            }
+  async sendAsync(data: {method: string; params: string; id: string}) {
+    if (this.wagmiConfig.status === 'connected') {
+      if (data.method === 'eth_accounts') {
+        return {
+          jsonrpc: '2.0',
+          result: [this.wagmiConfig.data.account],
+          id: data.id
+        }
+      } else {
+        const provider = await this.wagmiConfig.connector.getProvider({
+          chainId: this.wagmiConfig.data.chain.id
         })
-    }
 
-    async deactivate(){
-        console.log('deactivating walletconnect plugin...')
-        await this.ethereumClient.disconnect()
+        if (provider.isMetaMask) {
+          return new Promise((resolve) => {
+            provider.sendAsync(data, (err, response) => {
+              if (err) {
+                console.error(err)
+                return resolve({jsonrpc: '2.0', result: [], id: data.id})
+              }
+              return resolve(response)
+            })
+          })
+        } else {
+          const message = await provider.request(data)
+
+          return {jsonrpc: '2.0', result: message, id: data.id}
+        }
+      }
+    } else {
+      console.error(
+        `Cannot make ${data.method} request. Remix client is not connected to walletconnect client`
+      )
+      return {jsonrpc: '2.0', result: [], id: data.id}
     }
-}
+  }
+
+  async deactivate() {
+    console.log('deactivating walletconnect plugin...')
+    await this.ethereumClient.disconnect()
+  }
+}
diff --git a/package.json b/package.json
@@ -139,7 +139,7 @@
     "@remixproject/plugin-webview": "0.3.33",
     "@remixproject/plugin-ws": "0.3.33",
     "@types/nightwatch": "^2.3.1",
-    "@web3modal/ethereum": "^2.6.2",
+    "@web3modal/ethereum": "^2.7.1",
     "@web3modal/react": "^2.6.2",
     "ansi-gray": "^0.1.1",
     "async": "^2.6.2",
@@ -206,8 +206,8 @@
     "tree-kill": "^1.2.2",
     "ts-loader": "^9.2.6",
     "tslib": "^2.3.0",
-    "viem": "^1.2.12",
-    "wagmi": "^1.3.8",
+    "viem": "^1.6.0",
+    "wagmi": "^1.3.10",
     "web3": "^1.8.0",
     "winston": "^3.3.3",
     "ws": "^7.3.0"