remove wagmi v2 add ethers v5 because of compat issues

10 months ago · 11cb56e92e
parent 99847b3af5
commit 11cb56e92e
7 changed files with 698 additions and 1172 deletions
--- a/apps/walletconnect/src/services/WalletConnectRemixClient.ts
+++ b/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 {
-  arbitrum,
-  arbitrumGoerli,
-  mainnet,
-  polygon,
-  polygonMumbai,
-  optimism,
-  optimismGoerli,
-  Chain,
-  goerli,
-  sepolia,
-  ronin,
-  saigon
-} from 'viem/chains'
+import { createWeb3Modal, defaultConfig } from '@web3modal/ethers5/react'
+import { constants } from '../utils/constants'
 import EventManager from 'events'
 import {PROJECT_ID as projectId, METADATA as metadata} from './constant'
-import { Config, disconnect, getAccount, watchAccount } from '@wagmi/core'
-import { EIP1193Provider, RequestArguments } from '../types'
+import { Chain, 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 = [
-        mainnet,
-        arbitrum,
-        arbitrumGoerli,
-        polygon,
-        polygonMumbai,
-        optimism,
-        optimismGoerli,
-        goerli,
-        sepolia,
-        ronin,
-        saigon
-      ] as [Chain, ...Chain[]]
-
-      const wagmiConfig = defaultWagmiConfig({
-        chains,
-        projectId,
+      const ethersConfig = defaultConfig({
        metadata,
-        //ssr: true
+        rpcUrl: 'https://cloudflare-eth.com'
      })
-
-      this.web3modal = createWeb3Modal({ wagmiConfig, projectId, chains })
-      this.wagmiConfig = wagmiConfig
-      this.chains = chains
+      
+      this.web3modal = createWeb3Modal({ projectId, chains: constants.chains, metadata, ethersConfig })
+      this.ethersConfig = ethersConfig
+      this.chains = constants.chains
    } catch (e) {
      return console.error('Could not get a wallet connection', e)
    }
  }

  subscribeToEvents() {
-    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
+    this.web3modal.subscribeProvider(({ address, isConnected, chainId })=>{
+      if(isConnected){
+        if (address !== this.currentAccount) {
+          this.currentAccount = address
+          this.emit('accountsChanged', [address])          
        }
-      },
-    })
+        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)
-    if (account.isConnected) {
+    const address = this.web3modal.getAddress()
+    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
-
-        if (provider) {
+        //@ts-expect-error this flag does not correspond to EIP-1193 but was introduced by MetaMask
+        if (provider.isMetamask && provider.sendAsync) {
          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()
  }
 }
--- a/apps/walletconnect/src/services/constant.ts
+++ b/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: ''
 }
--- a/apps/walletconnect/src/types.ts
+++ b/apps/walletconnect/src/types.ts
@ -4,9 +4,10 @@ export interface RequestArguments {
  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
+export type Chain = {
+  chainId: number
+  name: string
+  currency: string
+  explorerUrl: string
+  rpcUrl: string
 }
--- a/apps/walletconnect/src/utils/chains.ts
+++ b/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'
+}
--- a/apps/walletconnect/src/utils/constants.ts
+++ b/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,
+  ]
+}
--- a/package.json
+++ b/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",
-    "@wagmi/core": "^2.2.1",
-    "@web3modal/wagmi": "4.0.0-alpha.0",
+    "@web3modal/ethers5": "^3.5.7",
    "@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",
--- a/yarn.lock
+++ b/yarn.lock