Merge pull request #4487 from glitch-txs/master

Update WalletConnect's Web3Modal SDK to the latest version

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

apps/walletconnect/src/services/WalletConnectRemixClient.ts

@@ -1,30 +1,18 @@
 import {PluginClient} from '@remixproject/plugin'
 import {createClient} from '@remixproject/plugin-webview'
-import {w3mConnectors, w3mProvider} from '@web3modal/ethereum'
+import { createWeb3Modal, defaultConfig } from '@web3modal/ethers5/react'
-import {createConfig, configureChains} from 'wagmi'
+import { constants } from '../utils/constants'
-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 {PROJECT_ID as projectId, METADATA as metadata} from './constant'
+import { Chain, RequestArguments } from '../types'
 
 export class WalletConnectRemixClient extends PluginClient {
-  wagmiConfig
+  web3modal: ReturnType<typeof createWeb3Modal>
-  ethereumClient: EthereumClient
+  ethersConfig: ReturnType<typeof defaultConfig>
   chains: Chain[]
   currentChain: number
   internalEvents: EventManager
-  currentAcount: string
+  currentAccount: string
 
   constructor() {
     super()
@@ -45,74 +33,59 @@ export class WalletConnectRemixClient extends PluginClient {
     console.log('initializing walletconnect plugin...')
   }
 
-  async initClient() {
+  initClient() {
     try {
-      this.chains = [
+      const ethersConfig = defaultConfig({
-        mainnet,
+        metadata,
-        arbitrum,
+        rpcUrl: 'https://cloudflare-eth.com'
-        arbitrumGoerli,
-        polygon,
-        polygonMumbai,
-        optimism,
-        optimismGoerli,
-        goerli,
-        sepolia
-      ]
-      const {publicClient} = configureChains(this.chains, [
-        w3mProvider({projectId: PROJECT_ID})
-      ], {
-        pollingInterval: 5000
       })
       
-      this.wagmiConfig = createConfig({
+      this.web3modal = createWeb3Modal({ projectId, chains: constants.chains, metadata, ethersConfig })
-        autoConnect: false,
+      this.ethersConfig = ethersConfig
-        connectors: w3mConnectors({projectId: PROJECT_ID, chains: this.chains}),
+      this.chains = constants.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) => {
+    this.web3modal.subscribeProvider(({ address, isConnected, chainId })=>{
-      if (event.status === 'connected') {
+      if(isConnected){
-        if (event.data.account !== this.currentAcount) {
+        if (address !== this.currentAccount) {
-          this.currentAcount = event.data.account
+          this.currentAccount = address
-          this.emit('accountsChanged', [event.data.account])          
+          this.emit('accountsChanged', [address])          
         }
-        if (this.currentChain !== event.data.chain.id) {
+        if (this.currentChain !== chainId) {
-          this.currentChain = event.data.chain.id
+          this.currentChain = chainId
-          this.emit('chainChanged', event.data.chain.id)
+          this.emit('chainChanged', chainId)
         }
-      } else if (event.status === 'disconnected') {
+      }else{
         this.emit('accountsChanged', [])
-        this.currentAcount = ''
+        this.currentAccount = ''
         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}) {
+  async sendAsync(data: RequestArguments) {
-    if (this.wagmiConfig.status === 'connected') {
+    const address = this.web3modal.getAddress()
+    const provider = this.web3modal.getWalletProvider()
+    if (address && provider) {
       if (data.method === 'eth_accounts') {
         return {
           jsonrpc: '2.0',
-          result: [this.wagmiConfig.data.account],
+          result: [address],
           id: data.id
         }
       } else {
-        const provider = await this.wagmiConfig.connector.getProvider({
+        //@ts-expect-error this flag does not correspond to EIP-1193 but was introduced by MetaMask
-          chainId: this.wagmiConfig.data.chain.id
+        if (provider.isMetamask && provider.sendAsync) {
-        })
-
-        if (provider.isMetaMask) {
           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) {
@@ -156,6 +129,6 @@ export class WalletConnectRemixClient extends PluginClient {
 
   async deactivate() {
     console.log('deactivating walletconnect plugin...')
-    await this.ethereumClient.disconnect()
+    await this.web3modal.disconnect()
   }
 }

apps/walletconnect/src/services/constant.ts

@@ -1,2 +1,8 @@
 // @ts-ignore
 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'],
+}

apps/walletconnect/src/types.ts

@@ -0,0 +1,13 @@
+export interface RequestArguments {
+	readonly method: string
+	readonly params?: readonly unknown[] | object
+  readonly id?: string
+}
+
+export type Chain = {
+  chainId: number
+  name: string
+  currency: string
+  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,8 +152,7 @@
     "@remixproject/plugin-ws": "0.3.42",
     "@ricarso/react-image-magnifiers": "^1.9.0",
     "@types/nightwatch": "^2.3.1",
-    "@web3modal/ethereum": "^2.7.1",
+    "@web3modal/ethers5": "^4.0.1",
-    "@web3modal/react": "^2.6.2",
     "@xenova/transformers": "^2.7.0",
     "ansi-gray": "^0.1.1",
     "assert": "^2.1.0",
@@ -234,8 +233,6 @@
     "tree-kill": "^1.2.2",
     "ts-loader": "^9.2.6",
     "tslib": "^2.3.0",
-    "viem": "^1.6.0",
-    "wagmi": "^1.3.10",
     "web3": "^4.1.0",
     "winston": "^3.3.3",
     "ws": "^7.3.0",