Skip to content

Commit 2759cd9

Browse files
ioedeveloperioedeveloper
authored
Merge pull request #4487 from glitch-txs/master
Update WalletConnect's Web3Modal SDK to the latest version
2 parents 607ff9f + 248db9a commit 2759cd9

File tree

10 files changed

+2497
-890
lines changed

10 files changed

+2497
-890
lines changed

‎apps/remix-ide/src/assets/list.json‎

Lines changed: 1190 additions & 0 deletions
Large diffs are not rendered by default.

‎apps/walletconnect/src/app/app.tsx‎

Lines changed: 2 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,33 +1,16 @@
1-
import React, {useEffect, useState} from 'react'
21
import '../css/app.css'
32
import '@fortawesome/fontawesome-free/css/all.css'
4-
import type {EthereumClient} from '@web3modal/ethereum'
53
import {WalletConnectRemixClient} from '../services/WalletConnectRemixClient'
64
import {WalletConnectUI} from './walletConnectUI'
75

86
const remix = new WalletConnectRemixClient()
7+
remix.initClient()
98

109
function App() {
11-
const [ethereumClient, setEthereumClient] = useState<EthereumClient>(null)
12-
const [wagmiConfig, setWagmiConfig] = useState(null)
13-
const [theme, setTheme] = useState<string>('dark')
14-
15-
useEffect(() => {
16-
;(async () => {
17-
await remix.initClient()
18-
remix.internalEvents.on('themeChanged', (theme: string) => {
19-
setTheme(theme)
20-
})
21-
22-
setWagmiConfig(remix.wagmiConfig)
23-
setEthereumClient(remix.ethereumClient)
24-
})()
25-
}, [])
26-
2710
return (
2811
<div className="App">
2912
<h4 className="mt-1">WalletConnect</h4>
30-
{ethereumClient && wagmiConfig && <WalletConnectUI wagmiConfig={wagmiConfig} ethereumClient={ethereumClient} theme={theme} />}
13+
<WalletConnectUI />
3114
</div>
3215
)
3316
}

‎apps/walletconnect/src/app/walletConnectUI.tsx‎

Lines changed: 3 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,7 @@
1-
import {Web3Button, Web3Modal} from '@web3modal/react'
2-
import {WagmiConfig} from 'wagmi'
3-
import {PROJECT_ID} from '../services/constant'
4-
5-
export function WalletConnectUI({ethereumClient, wagmiConfig, theme}) {
1+
export function WalletConnectUI() {
62
return (
7-
<div>
8-
<div style={{display: 'inline-block'}}>
9-
<WagmiConfig config={wagmiConfig}>
10-
<Web3Button label="Connect to a wallet" />
11-
</WagmiConfig>
12-
</div>
13-
<Web3Modal projectId={PROJECT_ID} ethereumClient={ethereumClient} themeMode={theme} />
3+
<div style={{display: 'inline-block'}}>
4+
<w3m-button />
145
</div>
156
)
167
}

‎apps/walletconnect/src/services/WalletConnectRemixClient.ts‎

Lines changed: 36 additions & 63 deletions
Original file line numberDiff line numberDiff line change
@@ -1,30 +1,18 @@
11
import {PluginClient} from '@remixproject/plugin'
22
import {createClient} from '@remixproject/plugin-webview'
3-
import {w3mConnectors, w3mProvider} from '@web3modal/ethereum'
4-
import {createConfig, configureChains} from 'wagmi'
5-
import {
6-
arbitrum,
7-
arbitrumGoerli,
8-
mainnet,
9-
polygon,
10-
polygonMumbai,
11-
optimism,
12-
optimismGoerli,
13-
Chain,
14-
goerli,
15-
sepolia
16-
} from 'viem/chains'
17-
import {EthereumClient} from '@web3modal/ethereum'
3+
import { createWeb3Modal, defaultConfig } from '@web3modal/ethers5/react'
4+
import { constants } from '../utils/constants'
185
import EventManager from 'events'
19-
import {PROJECT_ID} from './constant'
6+
import {PROJECT_ID as projectId, METADATA as metadata} from './constant'
7+
import { Chain, RequestArguments } from '../types'
208

219
export class WalletConnectRemixClient extends PluginClient {
22-
wagmiConfig
23-
ethereumClient: EthereumClient
10+
web3modal: ReturnType<typeof createWeb3Modal>
11+
ethersConfig: ReturnType<typeof defaultConfig>
2412
chains: Chain[]
2513
currentChain: number
2614
internalEvents: EventManager
27-
currentAcount: string
15+
currentAccount: string
2816

2917
constructor() {
3018
super()
@@ -45,74 +33,59 @@ export class WalletConnectRemixClient extends PluginClient {
4533
console.log('initializing walletconnect plugin...')
4634
}
4735

48-
async initClient() {
36+
initClient() {
4937
try {
50-
this.chains = [
51-
mainnet,
52-
arbitrum,
53-
arbitrumGoerli,
54-
polygon,
55-
polygonMumbai,
56-
optimism,
57-
optimismGoerli,
58-
goerli,
59-
sepolia
60-
]
61-
const {publicClient} = configureChains(this.chains, [
62-
w3mProvider({projectId: PROJECT_ID})
63-
], {
64-
pollingInterval: 5000
38+
const ethersConfig = defaultConfig({
39+
metadata,
40+
rpcUrl: 'https://cloudflare-eth.com'
6541
})
66-
67-
this.wagmiConfig = createConfig({
68-
autoConnect: false,
69-
connectors: w3mConnectors({projectId: PROJECT_ID, chains: this.chains}),
70-
publicClient
71-
})
72-
this.ethereumClient = new EthereumClient(this.wagmiConfig, this.chains)
42+
43+
this.web3modal = createWeb3Modal({ projectId, chains: constants.chains, metadata, ethersConfig })
44+
this.ethersConfig = ethersConfig
45+
this.chains = constants.chains
7346
} catch (e) {
7447
return console.error('Could not get a wallet connection', e)
7548
}
7649
}
7750

7851
subscribeToEvents() {
79-
this.wagmiConfig.subscribe((event) => {
80-
if (event.status === 'connected') {
81-
if (event.data.account !== this.currentAcount) {
82-
this.currentAcount = event.data.account
83-
this.emit('accountsChanged', [event.data.account])
52+
this.web3modal.subscribeProvider(({ address, isConnected, chainId })=>{
53+
if(isConnected){
54+
if (address !== this.currentAccount) {
55+
this.currentAccount = address
56+
this.emit('accountsChanged', [address])
8457
}
85-
if (this.currentChain !== event.data.chain.id) {
86-
this.currentChain = event.data.chain.id
87-
this.emit('chainChanged', event.data.chain.id)
58+
if (this.currentChain !== chainId) {
59+
this.currentChain = chainId
60+
this.emit('chainChanged', chainId)
8861
}
89-
} else if (event.status === 'disconnected') {
62+
}else{
9063
this.emit('accountsChanged', [])
91-
this.currentAcount = ''
64+
this.currentAccount = ''
9265
this.emit('chainChanged', 0)
9366
this.currentChain = 0
9467
}
95-
})
68+
},)
9669
this.on('theme', 'themeChanged', (theme: any) => {
97-
this.internalEvents.emit('themeChanged', theme.quality)
70+
this.web3modal.setThemeMode(theme.quality)
9871
})
9972
}
10073

101-
async sendAsync(data: {method: string; params: string; id: string}) {
102-
if (this.wagmiConfig.status === 'connected') {
74+
async sendAsync(data: RequestArguments) {
75+
const address = this.web3modal.getAddress()
76+
const provider = this.web3modal.getWalletProvider()
77+
if (address && provider) {
10378
if (data.method === 'eth_accounts') {
10479
return {
10580
jsonrpc: '2.0',
106-
result: [this.wagmiConfig.data.account],
81+
result: [address],
10782
id: data.id
10883
}
10984
} else {
110-
const provider = await this.wagmiConfig.connector.getProvider({
111-
chainId: this.wagmiConfig.data.chain.id
112-
})
113-
114-
if (provider.isMetaMask) {
85+
//@ts-expect-error this flag does not correspond to EIP-1193 but was introduced by MetaMask
86+
if (provider.isMetamask && provider.sendAsync) {
11587
return new Promise((resolve) => {
88+
//@ts-expect-error sendAsync is a legacy function we know MetaMask supports it
11689
provider.sendAsync(data, (error, response) => {
11790
if (error) {
11891
if (error.data && error.data.originalError && error.data.originalError.data) {
@@ -156,6 +129,6 @@ export class WalletConnectRemixClient extends PluginClient {
156129

157130
async deactivate() {
158131
console.log('deactivating walletconnect plugin...')
159-
await this.ethereumClient.disconnect()
132+
await this.web3modal.disconnect()
160133
}
161134
}

‎apps/walletconnect/src/services/constant.ts‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,8 @@
11
// @ts-ignore
2-
export const PROJECT_ID = WALLET_CONNECT_PROJECT_ID
2+
export const PROJECT_ID = WALLET_CONNECT_PROJECT_ID
3+
export const METADATA = {
4+
name: 'Remix IDE',
5+
description: 'The Native IDE for Web3 Development.',
6+
url: 'https://remix.ethereum.org/',
7+
icons: ['https://remix.ethereum.org/favicon.ico'],
8+
}

‎apps/walletconnect/src/types.ts‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
export interface RequestArguments {
2+
readonly method: string
3+
readonly params?: readonly unknown[] | object
4+
readonly id?: string
5+
}
6+
7+
export type Chain = {
8+
chainId: number
9+
name: string
10+
currency: string
11+
explorerUrl: string
12+
rpcUrl: string
13+
}

‎apps/walletconnect/src/utils/chains.ts‎

Lines changed: 151 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,151 @@
1+
export const mainnet = {
2+
chainId: 1,
3+
name: 'Ethereum',
4+
currency: 'ETH',
5+
explorerUrl: 'https://etherscan.io',
6+
rpcUrl: 'https://cloudflare-eth.com'
7+
}
8+
9+
export const sepolia = {
10+
chainId: 11155111,
11+
name: 'Sepolia',
12+
currency: 'ETH',
13+
explorerUrl: 'https://sepolia.etherscan.io',
14+
rpcUrl: 'https://rpc.sepolia.org'
15+
}
16+
17+
export const goerli = {
18+
chainId: 5,
19+
name: 'Goerli',
20+
currency: 'ETH',
21+
explorerUrl: 'https://goerli.etherscan.io',
22+
rpcUrl: 'https://rpc.ankr.com/eth_goerli'
23+
}
24+
25+
export const arbitrum = {
26+
chainId: 42161,
27+
name: 'Arbitrum',
28+
currency: 'ETH',
29+
explorerUrl: 'https://arbiscan.io',
30+
rpcUrl: 'https://arb1.arbitrum.io/rpc'
31+
}
32+
33+
export const arbitrumGoerli = {
34+
chainId: 421613,
35+
name: 'Arbitrum Goerli',
36+
currency: 'ETH',
37+
explorerUrl: 'https://goerli.arbiscan.io',
38+
rpcUrl: 'https://goerli-rollup.arbitrum.io/rpc'
39+
}
40+
41+
export const avalanche = {
42+
chainId: 43114,
43+
name: 'Avalanche',
44+
currency: 'AVAX',
45+
explorerUrl: 'https://snowtrace.io',
46+
rpcUrl: 'https://api.avax.network/ext/bc/C/rpc'
47+
}
48+
49+
export const bsc = {
50+
chainId: 56,
51+
name: 'Binance Smart Chain',
52+
currency: 'BNB',
53+
explorerUrl: 'https://bscscan.com',
54+
rpcUrl: 'https://rpc.ankr.com/bsc'
55+
}
56+
57+
export const optimism = {
58+
chainId: 10,
59+
name: 'Optimism',
60+
currency: 'ETH',
61+
explorerUrl: 'https://optimistic.etherscan.io',
62+
rpcUrl: 'https://mainnet.optimism.io'
63+
}
64+
65+
export const optimismGoerli = {
66+
chainId: 420,
67+
name: 'Optimism Goerli',
68+
currency: 'ETH',
69+
explorerUrl: 'https://goerli-optimism.etherscan.io',
70+
rpcUrl: 'https://goerli.optimism.io'
71+
}
72+
73+
export const polygon = {
74+
chainId: 137,
75+
name: 'Polygon',
76+
currency: 'MATIC',
77+
explorerUrl: 'https://polygonscan.com',
78+
rpcUrl: 'https://polygon-rpc.com'
79+
}
80+
81+
export const polygonMumbai = {
82+
chainId: 80001,
83+
name: 'Polygon Mumbai',
84+
currency: 'MATIC',
85+
explorerUrl: 'https://mumbai.polygonscan.com',
86+
rpcUrl: 'https://rpc.ankr.com/polygon_mumbai'
87+
}
88+
89+
export const gnosis = {
90+
chainId: 100,
91+
name: 'Gnosis',
92+
currency: 'xDAI',
93+
explorerUrl: 'https://gnosis.blockscout.com',
94+
rpcUrl: 'https://rpc.gnosischain.com'
95+
}
96+
97+
export const zkSync = {
98+
chainId: 324,
99+
name: 'ZkSync',
100+
currency: 'ETH',
101+
explorerUrl: 'https://explorer.zksync.io',
102+
rpcUrl: 'https://mainnet.era.zksync.io'
103+
}
104+
105+
export const zora = {
106+
chainId: 7777777,
107+
name: 'Zora',
108+
currency: 'ETH',
109+
explorerUrl: 'https://explorer.zora.energy',
110+
rpcUrl: 'https://rpc.zora.energy'
111+
}
112+
113+
export const celo = {
114+
chainId: 42220,
115+
name: 'Celo',
116+
currency: 'CELO',
117+
explorerUrl: 'https://explorer.celo.org/mainnet',
118+
rpcUrl: 'https://forno.celo.org'
119+
}
120+
121+
export const base = {
122+
chainId: 8453,
123+
name: 'Base',
124+
currency: 'BASE',
125+
explorerUrl: 'https://basescan.org',
126+
rpcUrl: 'https://mainnet.base.org'
127+
}
128+
129+
export const aurora = {
130+
chainId: 1313161554,
131+
name: 'Aurora',
132+
currency: 'ETH',
133+
explorerUrl: 'https://explorer.aurora.dev',
134+
rpcUrl: 'https://mainnet.aurora.dev'
135+
}
136+
137+
export const ronin = {
138+
chainId: 2020,
139+
name: 'Ronin',
140+
currency: 'RON',
141+
explorerUrl: 'https://app.roninchain.com',
142+
rpcUrl: 'https://api.roninchain.com/rpc'
143+
}
144+
145+
export const saigon = {
146+
chainId: 2021,
147+
name: 'Saigon Testnet',
148+
currency: 'RON',
149+
explorerUrl: 'https://saigon-explorer.roninchain.com',
150+
rpcUrl: 'https://saigon-testnet.roninchain.com/rpc'
151+
}

0 commit comments

Comments
 (0)