Merge pull request #4487 from glitch-txs/master

Update WalletConnect's Web3Modal SDK to the latest version
pull/4522/head
David Disu 10 months ago committed by GitHub
commit 2759cd91b4
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
  1. 1190
      apps/remix-ide/src/assets/list.json
  2. 21
      apps/walletconnect/src/app/app.tsx
  3. 15
      apps/walletconnect/src/app/walletConnectUI.tsx
  4. 97
      apps/walletconnect/src/services/WalletConnectRemixClient.ts
  5. 6
      apps/walletconnect/src/services/constant.ts
  6. 13
      apps/walletconnect/src/types.ts
  7. 151
      apps/walletconnect/src/utils/chains.ts
  8. 45
      apps/walletconnect/src/utils/constants.ts
  9. 5
      package.json
  10. 1840
      yarn.lock

File diff suppressed because it is too large Load Diff

@ -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>
)
}

@ -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>
)
}

@ -1,30 +1,18 @@
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 { createWeb3Modal, defaultConfig } from '@web3modal/ethers5/react'
import { constants } from '../utils/constants'
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
ethereumClient: EthereumClient
web3modal: ReturnType<typeof createWeb3Modal>
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 = [
mainnet,
arbitrum,
arbitrumGoerli,
polygon,
polygonMumbai,
optimism,
optimismGoerli,
goerli,
sepolia
]
const {publicClient} = configureChains(this.chains, [
w3mProvider({projectId: PROJECT_ID})
], {
pollingInterval: 5000
const ethersConfig = defaultConfig({
metadata,
rpcUrl: 'https://cloudflare-eth.com'
})
this.wagmiConfig = createConfig({
autoConnect: false,
connectors: w3mConnectors({projectId: PROJECT_ID, chains: this.chains}),
publicClient
})
this.ethereumClient = new EthereumClient(this.wagmiConfig, this.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() {
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])
this.web3modal.subscribeProvider(({ address, isConnected, chainId })=>{
if(isConnected){
if (address !== this.currentAccount) {
this.currentAccount = address
this.emit('accountsChanged', [address])
}
if (this.currentChain !== event.data.chain.id) {
this.currentChain = event.data.chain.id
this.emit('chainChanged', event.data.chain.id)
if (this.currentChain !== chainId) {
this.currentChain = chainId
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}) {
if (this.wagmiConfig.status === 'connected') {
async sendAsync(data: RequestArguments) {
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({
chainId: this.wagmiConfig.data.chain.id
})
if (provider.isMetaMask) {
//@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) {
@ -156,6 +129,6 @@ export class WalletConnectRemixClient extends PluginClient {
async deactivate() {
console.log('deactivating walletconnect plugin...')
await this.ethereumClient.disconnect()
await this.web3modal.disconnect()
}
}

@ -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'],
}

@ -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
}

@ -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'
}

@ -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,
]
}

@ -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/react": "^2.6.2",
"@web3modal/ethers5": "^4.0.1",
"@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",

File diff suppressed because it is too large Load Diff
Loading…
Cancel
Save