upgrade to Web3Modal v4

apps/walletconnect/src/app/app.tsx

@@ -1,33 +1,16 @@
-import React, {useEffect, useState} from 'react'
 import '../css/app.css'
 import '@fortawesome/fontawesome-free/css/all.css'
-import type {EthereumClient} from '@web3modal/ethereum'
 import {WalletConnectRemixClient} from '../services/WalletConnectRemixClient'
 import {WalletConnectUI} from './walletConnectUI'
 
 const remix = new WalletConnectRemixClient()
+remix.initClient()
 
 function App() {
-  const [ethereumClient, setEthereumClient] = useState<EthereumClient>(null)
-  const [wagmiConfig, setWagmiConfig] = useState(null)
-  const [theme, setTheme] = useState<string>('dark')
-
-  useEffect(() => {
-    ;(async () => {
-      await remix.initClient()
-      remix.internalEvents.on('themeChanged', (theme: string) => {
-        setTheme(theme)
-      })
-
-      setWagmiConfig(remix.wagmiConfig)
-      setEthereumClient(remix.ethereumClient)
-    })()
-  }, [])
-
   return (
     <div className="App">
       <h4 className="mt-1">WalletConnect</h4>
-      {ethereumClient && wagmiConfig && <WalletConnectUI wagmiConfig={wagmiConfig} ethereumClient={ethereumClient} theme={theme} />}
+      <WalletConnectUI />
     </div>
   )
 }

apps/walletconnect/src/app/walletConnectUI.tsx

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

apps/walletconnect/src/services/WalletConnectRemixClient.ts

@@ -1,7 +1,6 @@
 import {PluginClient} from '@remixproject/plugin'
 import {createClient} from '@remixproject/plugin-webview'
-import {w3mConnectors, w3mProvider} from '@web3modal/ethereum'
-import {createConfig, configureChains} from 'wagmi'
+import {defaultWagmiConfig, createWeb3Modal} from '@web3modal/wagmi/react'
 import {
   arbitrum,
   arbitrumGoerli,
@@ -12,15 +11,18 @@ import {
   optimismGoerli,
   Chain,
   goerli,
-  sepolia
+  sepolia,
+  ronin,
+  saigon
 } from 'viem/chains'
-import {EthereumClient} from '@web3modal/ethereum'
 import EventManager from 'events'
-import {PROJECT_ID} from './constant'
+import {PROJECT_ID as projectId, METADATA as metadata} from './constant'
+import { Config, disconnect, getAccount, watchAccount } from '@wagmi/core'
+import { EIP1193Provider, RequestArguments } from '../types'
 
 export class WalletConnectRemixClient extends PluginClient {
-  wagmiConfig
-  ethereumClient: EthereumClient
+  web3modal: ReturnType<typeof createWeb3Modal>
+  wagmiConfig: Config
   chains: Chain[]
   currentChain: number
   internalEvents: EventManager
@@ -45,9 +47,9 @@ export class WalletConnectRemixClient extends PluginClient {
     console.log('initializing walletconnect plugin...')
   }
 
-  async initClient() {
+  initClient() {
     try {
-      this.chains = [
+      const chains = [
         mainnet,
         arbitrum,
         arbitrumGoerli,
@@ -56,62 +58,64 @@ export class WalletConnectRemixClient extends PluginClient {
         optimism,
         optimismGoerli,
         goerli,
-        sepolia
-      ]
-      const {publicClient} = configureChains(this.chains, [
-        w3mProvider({projectId: PROJECT_ID})
-      ], {
-        pollingInterval: 5000
-      })
+        sepolia,
+        ronin,
+        saigon
+      ] as [Chain, ...Chain[]]
 
-      this.wagmiConfig = createConfig({
-        autoConnect: false,
-        connectors: w3mConnectors({projectId: PROJECT_ID, chains: this.chains}),
-        publicClient
+      const wagmiConfig = defaultWagmiConfig({
+        chains,
+        projectId,
+        metadata,
+        //ssr: true
       })
-      this.ethereumClient = new EthereumClient(this.wagmiConfig, this.chains)
+
+      this.web3modal = createWeb3Modal({ wagmiConfig, projectId, chains })
+      this.wagmiConfig = wagmiConfig
+      this.chains = chains
     } catch (e) {
       return console.error('Could not get a wallet connection', e)
     }
   }
 
   subscribeToEvents() {
-    this.wagmiConfig.subscribe((event) => {
-      if (event.status === 'connected') {
-        if (event.data.account !== this.currentAcount) {
-          this.currentAcount = event.data.account
-          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)
+    watchAccount(this.wagmiConfig, {
+      onChange(account) {
+        if(account.isConnected){
+          if (account.address !== this.currentAcount) {
+            this.currentAcount = account.address
+            this.emit('accountsChanged', [account.address])          
+          }
+          if (this.currentChain !== account.chainId) {
+            this.currentChain = account.chainId
+            this.emit('chainChanged', account.chainId)
+          }
+        }else{
+          this.emit('accountsChanged', [])
+          this.currentAcount = ''
+          this.emit('chainChanged', 0)
+          this.currentChain = 0
         }
-      } else if (event.status === 'disconnected') {
-        this.emit('accountsChanged', [])
-        this.currentAcount = ''
-        this.emit('chainChanged', 0)
-        this.currentChain = 0
-      }
+      },
     })
     this.on('theme', 'themeChanged', (theme: any) => {
-      this.internalEvents.emit('themeChanged', theme.quality)
+      this.web3modal.setThemeMode(theme.quality)
     })
   }
 
-  async sendAsync(data: {method: string; params: string; id: string}) {
-    if (this.wagmiConfig.status === 'connected') {
+  async sendAsync(data: RequestArguments) {
+    const account = getAccount(this.wagmiConfig)
+    if (account.isConnected) {
       if (data.method === 'eth_accounts') {
         return {
           jsonrpc: '2.0',
-          result: [this.wagmiConfig.data.account],
+          result: [account.address],
           id: data.id
         }
       } else {
-        const provider = await this.wagmiConfig.connector.getProvider({
-          chainId: this.wagmiConfig.data.chain.id
-        })
+        const provider = await account.connector.getProvider() as EIP1193Provider
 
-        if (provider.isMetaMask) {
+        if (provider) {
           return new Promise((resolve) => {
             provider.sendAsync(data, (error, response) => {
               if (error) {
@@ -156,6 +160,6 @@ export class WalletConnectRemixClient extends PluginClient {
 
   async deactivate() {
     console.log('deactivating walletconnect plugin...')
-    await this.ethereumClient.disconnect()
+    await disconnect(this.wagmiConfig)
   }
 }

apps/walletconnect/src/services/constant.ts

@@ -1,2 +1,9 @@
 // @ts-ignore
-export const PROJECT_ID = WALLET_CONNECT_PROJECT_ID
+export const PROJECT_ID = "bd4997ce3ede37c95770ba10a3804dad"
+export const METADATA = {
+  name: 'Remix IDE',
+  description: 'The Native IDE for Web3 Development.',
+  url: 'https://remix.ethereum.org/',
+  icons: ['https://remix.ethereum.org/favicon.ico'],
+  verifyUrl: ''
+}

apps/walletconnect/src/types.ts

@@ -0,0 +1,12 @@
+export interface RequestArguments {
+	readonly method: string
+	readonly params?: readonly unknown[] | object
+  readonly id?: string
+}
+
+export interface EIP1193Provider {
+	request: <T>(args: RequestArguments) => Promise<T>
+  sendAsync: <T>(args: RequestArguments, callback:(error, response)=>void) => Promise<T>
+	on: (event: string, listener: (event: unknown) => void) => void
+	removeListener: (event: string, listener: (event: unknown) => void) => void
+}

package.json

@@ -152,8 +152,9 @@
     "@remixproject/plugin-ws": "0.3.42",
     "@ricarso/react-image-magnifiers": "^1.9.0",
     "@types/nightwatch": "^2.3.1",
-    "@web3modal/ethereum": "^2.7.1",
-    "@web3modal/react": "^2.6.2",
+    "@wagmi/connectors": "^4.1.4",
+    "@wagmi/core": "^2.2.1",
+    "@web3modal/wagmi": "4.0.0-alpha.0",
     "@xenova/transformers": "^2.7.0",
     "ansi-gray": "^0.1.1",
     "assert": "^2.1.0",
@@ -234,8 +235,7 @@
     "tree-kill": "^1.2.2",
     "ts-loader": "^9.2.6",
     "tslib": "^2.3.0",
-    "viem": "^1.6.0",
-    "wagmi": "^1.3.10",
+    "viem": "^2.2.0",
     "web3": "^4.1.0",
     "winston": "^3.3.3",
     "ws": "^7.3.0",