remove wagmi v2 add ethers v5 because of compat issues

apps/walletconnect/src/services/WalletConnectRemixClient.ts

@@ -1,32 +1,18 @@
 import {PluginClient} from '@remixproject/plugin'
 import {createClient} from '@remixproject/plugin-webview'
-import {defaultWagmiConfig, createWeb3Modal} from '@web3modal/wagmi/react'
+import { createWeb3Modal, defaultConfig } from '@web3modal/ethers5/react'
-import {
+import { constants } from '../utils/constants'
-  arbitrum,
-  arbitrumGoerli,
-  mainnet,
-  polygon,
-  polygonMumbai,
-  optimism,
-  optimismGoerli,
-  Chain,
-  goerli,
-  sepolia,
-  ronin,
-  saigon
-} from 'viem/chains'
 import EventManager from 'events'
 import {PROJECT_ID as projectId, METADATA as metadata} from './constant'
-import { Config, disconnect, getAccount, watchAccount } from '@wagmi/core'
+import { Chain, RequestArguments } from '../types'
-import { EIP1193Provider, RequestArguments } from '../types'
 
 export class WalletConnectRemixClient extends PluginClient {
   web3modal: ReturnType<typeof createWeb3Modal>
-  wagmiConfig: Config
+  ethersConfig: ReturnType<typeof defaultConfig>
   chains: Chain[]
   currentChain: number
   internalEvents: EventManager
-  currentAcount: string
+  currentAccount: string
 
   constructor() {
     super()
@@ -49,74 +35,57 @@ export class WalletConnectRemixClient extends PluginClient {
 
   initClient() {
     try {
-      const chains = [
+      const ethersConfig = defaultConfig({
-        mainnet,
-        arbitrum,
-        arbitrumGoerli,
-        polygon,
-        polygonMumbai,
-        optimism,
-        optimismGoerli,
-        goerli,
-        sepolia,
-        ronin,
-        saigon
-      ] as [Chain, ...Chain[]]
-
-      const wagmiConfig = defaultWagmiConfig({
-        chains,
-        projectId,
         metadata,
-        //ssr: true
+        rpcUrl: 'https://cloudflare-eth.com'
       })
       
-      this.web3modal = createWeb3Modal({ wagmiConfig, projectId, chains })
+      this.web3modal = createWeb3Modal({ projectId, chains: constants.chains, metadata, ethersConfig })
-      this.wagmiConfig = wagmiConfig
+      this.ethersConfig = ethersConfig
-      this.chains = chains
+      this.chains = constants.chains
     } catch (e) {
       return console.error('Could not get a wallet connection', e)
     }
   }
 
   subscribeToEvents() {
-    watchAccount(this.wagmiConfig, {
+    this.web3modal.subscribeProvider(({ address, isConnected, chainId })=>{
-      onChange(account) {
+      if(isConnected){
-        if(account.isConnected){
+        if (address !== this.currentAccount) {
-          if (account.address !== this.currentAcount) {
+          this.currentAccount = address
-            this.currentAcount = account.address
+          this.emit('accountsChanged', [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
         }
-      },
+        if (this.currentChain !== chainId) {
-    })
+          this.currentChain = chainId
+          this.emit('chainChanged', chainId)
+        }
+      }else{
+        this.emit('accountsChanged', [])
+        this.currentAccount = ''
+        this.emit('chainChanged', 0)
+        this.currentChain = 0
+      }
+    },)
     this.on('theme', 'themeChanged', (theme: any) => {
       this.web3modal.setThemeMode(theme.quality)
     })
   }
 
   async sendAsync(data: RequestArguments) {
-    const account = getAccount(this.wagmiConfig)
+    const address = this.web3modal.getAddress()
-    if (account.isConnected) {
+    const provider = this.web3modal.getWalletProvider()
+    if (address && provider) {
       if (data.method === 'eth_accounts') {
         return {
           jsonrpc: '2.0',
-          result: [account.address],
+          result: [address],
           id: data.id
         }
       } else {
-        const provider = await account.connector.getProvider() as EIP1193Provider
+        //@ts-expect-error this flag does not correspond to EIP-1193 but was introduced by MetaMask
-
+        if (provider.isMetamask && provider.sendAsync) {
-        if (provider) {
           return new Promise((resolve) => {
+            //@ts-expect-error sendAsync is a legacy function we know MetaMask supports it
             provider.sendAsync(data, (error, response) => {
               if (error) {
                 if (error.data && error.data.originalError && error.data.originalError.data) {
@@ -160,6 +129,6 @@ export class WalletConnectRemixClient extends PluginClient {
 
   async deactivate() {
     console.log('deactivating walletconnect plugin...')
-    await disconnect(this.wagmiConfig)
+    await this.web3modal.disconnect()
   }
 }

apps/walletconnect/src/services/constant.ts

@@ -1,9 +1,8 @@
 // @ts-ignore
-export const PROJECT_ID = "bd4997ce3ede37c95770ba10a3804dad"
+export const PROJECT_ID = WALLET_CONNECT_PROJECT_ID
 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

@@ -4,9 +4,10 @@ export interface RequestArguments {
   readonly id?: string
 }
 
-export interface EIP1193Provider {
+export type Chain = {
-	request: <T>(args: RequestArguments) => Promise<T>
+  chainId: number
-  sendAsync: <T>(args: RequestArguments, callback:(error, response)=>void) => Promise<T>
+  name: string
-	on: (event: string, listener: (event: unknown) => void) => void
+  currency: string
-	removeListener: (event: string, listener: (event: unknown) => void) => void
+  explorerUrl: string
+  rpcUrl: string
 }

apps/walletconnect/src/utils/chains.ts

@@ -0,0 +1,151 @@
+export const mainnet = {
+  chainId: 1,
+  name: 'Ethereum',
+  currency: 'ETH',
+  explorerUrl: 'https://etherscan.io',
+  rpcUrl: 'https://cloudflare-eth.com'
+}
+
+export const sepolia = {
+  chainId: 11155111,
+  name: 'Sepolia',
+  currency: 'ETH',
+  explorerUrl: 'https://sepolia.etherscan.io',
+  rpcUrl: 'https://rpc.sepolia.org'
+}
+
+export const goerli = {
+  chainId: 5,
+  name: 'Goerli',
+  currency: 'ETH',
+  explorerUrl: 'https://goerli.etherscan.io',
+  rpcUrl: 'https://rpc.ankr.com/eth_goerli'
+}
+
+export const arbitrum = {
+  chainId: 42161,
+  name: 'Arbitrum',
+  currency: 'ETH',
+  explorerUrl: 'https://arbiscan.io',
+  rpcUrl: 'https://arb1.arbitrum.io/rpc'
+}
+
+export const arbitrumGoerli = {
+  chainId: 421613,
+  name: 'Arbitrum Goerli',
+  currency: 'ETH',
+  explorerUrl: 'https://goerli.arbiscan.io',
+  rpcUrl: 'https://goerli-rollup.arbitrum.io/rpc'
+}
+
+export const avalanche = {
+  chainId: 43114,
+  name: 'Avalanche',
+  currency: 'AVAX',
+  explorerUrl: 'https://snowtrace.io',
+  rpcUrl: 'https://api.avax.network/ext/bc/C/rpc'
+}
+
+export const bsc = {
+  chainId: 56,
+  name: 'Binance Smart Chain',
+  currency: 'BNB',
+  explorerUrl: 'https://bscscan.com',
+  rpcUrl: 'https://rpc.ankr.com/bsc'
+}
+
+export const optimism = {
+  chainId: 10,
+  name: 'Optimism',
+  currency: 'ETH',
+  explorerUrl: 'https://optimistic.etherscan.io',
+  rpcUrl: 'https://mainnet.optimism.io'
+}
+
+export const optimismGoerli = {
+  chainId: 420,
+  name: 'Optimism Goerli',
+  currency: 'ETH',
+  explorerUrl: 'https://goerli-optimism.etherscan.io',
+  rpcUrl: 'https://goerli.optimism.io'
+}
+
+export const polygon = {
+  chainId: 137,
+  name: 'Polygon',
+  currency: 'MATIC',
+  explorerUrl: 'https://polygonscan.com',
+  rpcUrl: 'https://polygon-rpc.com'
+}
+
+export const polygonMumbai = {
+  chainId: 80001,
+  name: 'Polygon Mumbai',
+  currency: 'MATIC',
+  explorerUrl: 'https://mumbai.polygonscan.com',
+  rpcUrl: 'https://rpc.ankr.com/polygon_mumbai'
+}
+
+export const gnosis = {
+  chainId: 100,
+  name: 'Gnosis',
+  currency: 'xDAI',
+  explorerUrl: 'https://gnosis.blockscout.com',
+  rpcUrl: 'https://rpc.gnosischain.com'
+}
+
+export const zkSync = {
+  chainId: 324,
+  name: 'ZkSync',
+  currency: 'ETH',
+  explorerUrl: 'https://explorer.zksync.io',
+  rpcUrl: 'https://mainnet.era.zksync.io'
+}
+
+export const zora = {
+  chainId: 7777777,
+  name: 'Zora',
+  currency: 'ETH',
+  explorerUrl: 'https://explorer.zora.energy',
+  rpcUrl: 'https://rpc.zora.energy'
+}
+
+export const celo = {
+  chainId: 42220,
+  name: 'Celo',
+  currency: 'CELO',
+  explorerUrl: 'https://explorer.celo.org/mainnet',
+  rpcUrl: 'https://forno.celo.org'
+}
+
+export const base = {
+  chainId: 8453,
+  name: 'Base',
+  currency: 'BASE',
+  explorerUrl: 'https://basescan.org',
+  rpcUrl: 'https://mainnet.base.org'
+}
+
+export const aurora = {
+  chainId: 1313161554,
+  name: 'Aurora',
+  currency: 'ETH',
+  explorerUrl: 'https://explorer.aurora.dev',
+  rpcUrl: 'https://mainnet.aurora.dev'
+}
+
+export const ronin = {
+  chainId: 2020,
+  name: 'Ronin',
+  currency: 'RON',
+  explorerUrl: 'https://app.roninchain.com',
+  rpcUrl: 'https://api.roninchain.com/rpc'
+}
+
+export const saigon = {
+  chainId: 2021,
+  name: 'Saigon Testnet',
+  currency: 'RON',
+  explorerUrl: 'https://saigon-explorer.roninchain.com',
+  rpcUrl: 'https://saigon-testnet.roninchain.com/rpc'
+}

apps/walletconnect/src/utils/constants.ts

@@ -0,0 +1,45 @@
+import {
+  arbitrum,
+  arbitrumGoerli,
+  mainnet,
+  polygon,
+  polygonMumbai,
+  optimism,
+  optimismGoerli,
+  goerli,
+  sepolia,
+  ronin,
+  saigon,
+  aurora,
+  avalanche,
+  base,
+  bsc,
+  celo,
+  gnosis,
+  zkSync,
+  zora,
+} from './chains'
+
+export const constants = {
+  chains: [
+    arbitrum,
+    arbitrumGoerli,
+    mainnet,
+    polygon,
+    polygonMumbai,
+    optimism,
+    optimismGoerli,
+    goerli,
+    sepolia,
+    ronin,
+    saigon,
+    aurora,
+    avalanche,
+    base,
+    bsc,
+    celo,
+    gnosis,
+    zkSync,
+    zora,
+  ]
+}

package.json

@@ -152,9 +152,7 @@
     "@remixproject/plugin-ws": "0.3.42",
     "@ricarso/react-image-magnifiers": "^1.9.0",
     "@types/nightwatch": "^2.3.1",
-    "@wagmi/connectors": "^4.1.4",
+    "@web3modal/ethers5": "^3.5.7",
-    "@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",
@@ -235,7 +233,6 @@
     "tree-kill": "^1.2.2",
     "ts-loader": "^9.2.6",
     "tslib": "^2.3.0",
-    "viem": "^2.2.0",
     "web3": "^4.1.0",
     "winston": "^3.3.3",
     "ws": "^7.3.0",