Skip to content

Commit 99847b3

Browse files
glitch-txsAniket-Engg
glitch-txs
authored and
Aniket-Engg
committed
upgrade to Web3Modal v4
1 parent f166845 commit 99847b3

File tree

7 files changed

+1686
-705
lines changed

7 files changed

+1686
-705
lines changed

‎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: 49 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
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'
3+
import {defaultWagmiConfig, createWeb3Modal} from '@web3modal/wagmi/react'
54
import {
65
arbitrum,
76
arbitrumGoerli,
@@ -12,15 +11,18 @@ import {
1211
optimismGoerli,
1312
Chain,
1413
goerli,
15-
sepolia
14+
sepolia,
15+
ronin,
16+
saigon
1617
} from 'viem/chains'
17-
import {EthereumClient} from '@web3modal/ethereum'
1818
import EventManager from 'events'
19-
import {PROJECT_ID} from './constant'
19+
import {PROJECT_ID as projectId, METADATA as metadata} from './constant'
20+
import { Config, disconnect, getAccount, watchAccount } from '@wagmi/core'
21+
import { EIP1193Provider, RequestArguments } from '../types'
2022

2123
export class WalletConnectRemixClient extends PluginClient {
22-
wagmiConfig
23-
ethereumClient: EthereumClient
24+
web3modal: ReturnType<typeof createWeb3Modal>
25+
wagmiConfig: Config
2426
chains: Chain[]
2527
currentChain: number
2628
internalEvents: EventManager
@@ -45,9 +47,9 @@ export class WalletConnectRemixClient extends PluginClient {
4547
console.log('initializing walletconnect plugin...')
4648
}
4749

48-
async initClient() {
50+
initClient() {
4951
try {
50-
this.chains = [
52+
const chains = [
5153
mainnet,
5254
arbitrum,
5355
arbitrumGoerli,
@@ -56,62 +58,64 @@ export class WalletConnectRemixClient extends PluginClient {
5658
optimism,
5759
optimismGoerli,
5860
goerli,
59-
sepolia
60-
]
61-
const {publicClient} = configureChains(this.chains, [
62-
w3mProvider({projectId: PROJECT_ID})
63-
], {
64-
pollingInterval: 5000
65-
})
61+
sepolia,
62+
ronin,
63+
saigon
64+
] as [Chain, ...Chain[]]
6665

67-
this.wagmiConfig = createConfig({
68-
autoConnect: false,
69-
connectors: w3mConnectors({projectId: PROJECT_ID, chains: this.chains}),
70-
publicClient
66+
const wagmiConfig = defaultWagmiConfig({
67+
chains,
68+
projectId,
69+
metadata,
70+
//ssr: true
7171
})
72-
this.ethereumClient = new EthereumClient(this.wagmiConfig, this.chains)
72+
73+
this.web3modal = createWeb3Modal({ wagmiConfig, projectId, chains })
74+
this.wagmiConfig = wagmiConfig
75+
this.chains = chains
7376
} catch (e) {
7477
return console.error('Could not get a wallet connection', e)
7578
}
7679
}
7780

7881
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])
84-
}
85-
if (this.currentChain !== event.data.chain.id) {
86-
this.currentChain = event.data.chain.id
87-
this.emit('chainChanged', event.data.chain.id)
82+
watchAccount(this.wagmiConfig, {
83+
onChange(account) {
84+
if(account.isConnected){
85+
if (account.address !== this.currentAcount) {
86+
this.currentAcount = account.address
87+
this.emit('accountsChanged', [account.address])
88+
}
89+
if (this.currentChain !== account.chainId) {
90+
this.currentChain = account.chainId
91+
this.emit('chainChanged', account.chainId)
92+
}
93+
}else{
94+
this.emit('accountsChanged', [])
95+
this.currentAcount = ''
96+
this.emit('chainChanged', 0)
97+
this.currentChain = 0
8898
}
89-
} else if (event.status === 'disconnected') {
90-
this.emit('accountsChanged', [])
91-
this.currentAcount = ''
92-
this.emit('chainChanged', 0)
93-
this.currentChain = 0
94-
}
99+
},
95100
})
96101
this.on('theme', 'themeChanged', (theme: any) => {
97-
this.internalEvents.emit('themeChanged', theme.quality)
102+
this.web3modal.setThemeMode(theme.quality)
98103
})
99104
}
100105

101-
async sendAsync(data: {method: string; params: string; id: string}) {
102-
if (this.wagmiConfig.status === 'connected') {
106+
async sendAsync(data: RequestArguments) {
107+
const account = getAccount(this.wagmiConfig)
108+
if (account.isConnected) {
103109
if (data.method === 'eth_accounts') {
104110
return {
105111
jsonrpc: '2.0',
106-
result: [this.wagmiConfig.data.account],
112+
result: [account.address],
107113
id: data.id
108114
}
109115
} else {
110-
const provider = await this.wagmiConfig.connector.getProvider({
111-
chainId: this.wagmiConfig.data.chain.id
112-
})
116+
const provider = await account.connector.getProvider() as EIP1193Provider
113117

114-
if (provider.isMetaMask) {
118+
if (provider) {
115119
return new Promise((resolve) => {
116120
provider.sendAsync(data, (error, response) => {
117121
if (error) {
@@ -156,6 +160,6 @@ export class WalletConnectRemixClient extends PluginClient {
156160

157161
async deactivate() {
158162
console.log('deactivating walletconnect plugin...')
159-
await this.ethereumClient.disconnect()
163+
await disconnect(this.wagmiConfig)
160164
}
161165
}

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

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,9 @@
11
// @ts-ignore
2-
export const PROJECT_ID = WALLET_CONNECT_PROJECT_ID
2+
export const PROJECT_ID = "bd4997ce3ede37c95770ba10a3804dad"
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+
verifyUrl: ''
9+
}

‎apps/walletconnect/src/types.ts‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
export interface RequestArguments {
2+
readonly method: string
3+
readonly params?: readonly unknown[] | object
4+
readonly id?: string
5+
}
6+
7+
export interface EIP1193Provider {
8+
request: <T>(args: RequestArguments) => Promise<T>
9+
sendAsync: <T>(args: RequestArguments, callback:(error, response)=>void) => Promise<T>
10+
on: (event: string, listener: (event: unknown) => void) => void
11+
removeListener: (event: string, listener: (event: unknown) => void) => void
12+
}

‎package.json‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -152,8 +152,9 @@
152152
"@remixproject/plugin-ws": "0.3.42",
153153
"@ricarso/react-image-magnifiers": "^1.9.0",
154154
"@types/nightwatch": "^2.3.1",
155-
"@web3modal/ethereum": "^2.7.1",
156-
"@web3modal/react": "^2.6.2",
155+
"@wagmi/connectors": "^4.1.4",
156+
"@wagmi/core": "^2.2.1",
157+
"@web3modal/wagmi": "4.0.0-alpha.0",
157158
"@xenova/transformers": "^2.7.0",
158159
"ansi-gray": "^0.1.1",
159160
"assert": "^2.1.0",
@@ -234,8 +235,7 @@
234235
"tree-kill": "^1.2.2",
235236
"ts-loader": "^9.2.6",
236237
"tslib": "^2.3.0",
237-
"viem": "^1.6.0",
238-
"wagmi": "^1.3.10",
238+
"viem": "^2.2.0",
239239
"web3": "^4.1.0",
240240
"winston": "^3.3.3",
241241
"ws": "^7.3.0",

0 commit comments

Comments
 (0)