Update walletconnect dependencies and implementation

pull/3906/head
ioedeveloper 1 year ago
parent 4dd6a56e73
commit 9072c7e376
  1. 10
      apps/walletconnect/src/app/app.tsx
  2. 4
      apps/walletconnect/src/app/walletConnectUI.tsx
  3. 54
      apps/walletconnect/src/services/WalletConnectRemixClient.ts
  4. 53
      apps/walletconnect/src/services/provider.ts
  5. 10
      package.json
  6. 814
      yarn.lock

@ -2,14 +2,14 @@ import React, { useEffect, useState } from 'react'
import '../css/app.css'
import '@fortawesome/fontawesome-free/css/all.css'
import type { EthereumClient } from '@web3modal/ethereum'
import { RemixClient } from '../services/RemixClient'
import { WalletConnectRemixClient } from '../services/WalletConnectRemixClient'
import { WalletConnectUI } from './walletConnectUI'
const remix = new RemixClient()
const remix = new WalletConnectRemixClient()
function App() {
const [ethereumClient, setEthereumClient] = useState<EthereumClient>(null)
const [wagmiClient, setWagmiClient] = useState(null)
const [wagmiConfig, setWagmiConfig] = useState(null)
const [theme, setTheme] = useState<string>('dark')
useEffect(() => {
@ -19,7 +19,7 @@ function App() {
setTheme(theme)
})
setWagmiClient(remix.wagmiClient)
setWagmiConfig(remix.wagmiConfig)
setEthereumClient(remix.ethereumClient)
})()
}, [])
@ -27,7 +27,7 @@ function App() {
return (
<div className="App">
<h4 className='mt-1'>WalletConnect</h4>
{ ethereumClient && wagmiClient && <WalletConnectUI wagmiClient={wagmiClient} ethereumClient={ethereumClient} theme={theme} /> }
{ ethereumClient && wagmiConfig && <WalletConnectUI wagmiConfig={wagmiConfig} ethereumClient={ethereumClient} theme={theme} /> }
</div>
)
}

@ -2,12 +2,12 @@ import { Web3Button, Web3Modal } from "@web3modal/react"
import { WagmiConfig } from "wagmi"
import { PROJECT_ID } from "../services/constant"
export function WalletConnectUI ({ ethereumClient, wagmiClient, theme }) {
export function WalletConnectUI ({ ethereumClient, wagmiConfig, theme }) {
return (
<div>
<div style={{ display: 'inline-block' }}>
<WagmiConfig client={wagmiClient}>
<WagmiConfig config={wagmiConfig}>
<Web3Button label='Connect to a wallet' />
</WagmiConfig>
</div>

@ -1,14 +1,14 @@
import { PluginClient } from '@remixproject/plugin'
import { createClient } from '@remixproject/plugin-webview'
import { w3mConnectors, w3mProvider } from '@web3modal/ethereum'
import { configureChains, createClient as wagmiCreateClient } from 'wagmi'
import { arbitrum, arbitrumGoerli, mainnet, polygon, polygonMumbai, optimism, optimismGoerli, Chain, goerli, sepolia } from 'wagmi/chains'
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 EventManager from "events"
import { PROJECT_ID } from './constant'
export class RemixClient extends PluginClient {
wagmiClient
export class WalletConnectRemixClient extends PluginClient {
wagmiConfig
ethereumClient: EthereumClient
chains: Chain[]
currentChain: number
@ -36,21 +36,22 @@ export class RemixClient extends PluginClient {
async initClient () {
try {
this.chains = [arbitrum, arbitrumGoerli, mainnet, polygon, polygonMumbai, optimism, optimismGoerli, goerli, sepolia]
const { provider } = configureChains(this.chains, [w3mProvider({ projectId: PROJECT_ID })])
this.wagmiClient = wagmiCreateClient({
autoConnect: false,
connectors: w3mConnectors({ projectId: PROJECT_ID, version: 2, chains: this.chains }),
provider
const { publicClient } = configureChains(this.chains, [w3mProvider({ projectId: PROJECT_ID })])
this.wagmiConfig = createConfig({
autoConnect: false,
connectors: w3mConnectors({ projectId: PROJECT_ID, chains: this.chains }),
publicClient
})
this.ethereumClient = new EthereumClient(this.wagmiClient, this.chains)
this.ethereumClient = new EthereumClient(this.wagmiConfig, this.chains)
} catch (e) {
return console.error("Could not get a wallet connection", e)
}
}
subscribeToEvents () {
this.wagmiClient.subscribe((event) => {
this.wagmiConfig.subscribe((event) => {
console.log('this.wagmiConfig event subscribed: ', this.wagmiConfig)
if (event.status === 'connected') {
this.emit('accountsChanged', [event.data.account])
if (this.currentChain !== event.data.chain.id) {
@ -70,29 +71,12 @@ export class RemixClient extends PluginClient {
sendAsync (data: { method: string, params: string, id: string }) {
return new Promise((resolve, reject) => {
if (this.wagmiClient) {
if (this.wagmiClient.data && this.wagmiClient.data.provider && this.wagmiClient.data.provider.sendAsync) {
this.wagmiClient.data.provider.sendAsync(data, (error, message) => {
if (error) return reject(error)
resolve(message)
})
} else if (this.wagmiClient.data && this.wagmiClient.data.provider && this.wagmiClient.data.provider.jsonRpcFetchFunc) {
if (data.method === 'net_version' || data.method === 'eth_chainId') {
resolve({"jsonrpc": "2.0", "result": this.currentChain, "id": data.id})
} else {
this.wagmiClient.data.provider.jsonRpcFetchFunc(data.method, data.params).then((message) => {
resolve({"jsonrpc": "2.0", "result": message, "id": data.id})
}).catch((error) => {
reject(error)
})
}
} else {
this.wagmiClient.provider.send(data.method, data.params).then((message) => {
resolve({"jsonrpc": "2.0", "result": message, "id": data.id})
}).catch((error) => {
reject(error)
})
}
if (this.wagmiConfig) {
this.wagmiConfig.publicClient.request(data).then((message) => {
resolve({"jsonrpc": "2.0", "result": message, "id": data.id})
}).catch((error) => {
reject(error)
})
} else {
console.error(`Cannot make ${data.method} request. Remix client is not connect to walletconnect client`)
resolve({"jsonrpc": "2.0", "result": [], "id": data.id})

@ -1,53 +0,0 @@
import { providers } from 'ethers'
import type { Chain } from 'wagmi/chains'
import type { ChainProviderFn } from 'wagmi/'
interface FallbackProviderConfig {
// The Provider
provider: any;
// The priority to favour this Provider; lower values are used first (higher priority)
priority?: number;
// Timeout before also triggering the next provider; this does not stop
// this provider and if its result comes back before a quorum is reached
// it will be incorporated into the vote
// - lower values will cause more network traffic but may result in a
// faster result.
stallTimeout?: number;
// How much this provider contributes to the quorum; sometimes a specific
// provider may be more reliable or trustworthy than others, but usually
// this should be left as the default
weight?: number;
}
export function customProvider<TChain extends Chain = Chain>({
priority,
stallTimeout,
weight,
}: FallbackProviderConfig): ChainProviderFn<
TChain,
providers.Web3Provider,
providers.WebSocketProvider
> {
return function (chain) {
return {
chain: {
...chain,
} as TChain,
provider: () => {
const provider = new providers.Web3Provider(
window.ethereum,
{
chainId: chain.id,
name: chain.network,
ensAddress: chain.contracts?.ensRegistry?.address,
}
)
return Object.assign(provider, { priority, stallTimeout, weight })
}
}
}
}

@ -138,11 +138,8 @@
"@remixproject/plugin-webview": "0.3.33",
"@remixproject/plugin-ws": "0.3.33",
"@types/nightwatch": "^2.3.1",
"@walletconnect/ethereum-provider": "^2.6.2",
"@walletconnect/sign-client": "^2.6.0",
"@web3modal/ethereum": "^2.2.2",
"@web3modal/react": "^2.2.2",
"@web3modal/standalone": "^2.2.2",
"@web3modal/ethereum": "^2.6.2",
"@web3modal/react": "^2.6.2",
"ansi-gray": "^0.1.1",
"async": "^2.6.2",
"axios": "1.1.2",
@ -208,7 +205,8 @@
"tree-kill": "^1.2.2",
"ts-loader": "^9.2.6",
"tslib": "^2.3.0",
"wagmi": "^0.12.7",
"viem": "^1.2.12",
"wagmi": "^1.3.8",
"web3": "^1.8.0",
"winston": "^3.3.3",
"ws": "^7.3.0"

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