diff --git a/apps/wallet-connect/src/app/app.tsx b/apps/wallet-connect/src/app/app.tsx index 6c89a2467f..824382e3c6 100644 --- a/apps/wallet-connect/src/app/app.tsx +++ b/apps/wallet-connect/src/app/app.tsx @@ -1,13 +1,11 @@ import React, { useEffect, useState } from 'react' import '../css/app.css' import '@fortawesome/fontawesome-free/css/all.css' -import { PROJECT_ID } from '../services/constant' import { EthereumClient } from '@web3modal/ethereum' -import { Web3Button, Web3Modal, Web3NetworkSwitch } from '@web3modal/react' -import { WagmiConfig } from 'wagmi' import { RemixClient } from '../services/RemixClient' +import { WalletConnectUI } from './walletConnectUI' -const p = new RemixClient() +const remix = new RemixClient() function App() { const [ethereumClient, setEthereumClient] = useState(null) @@ -15,30 +13,17 @@ function App() { useEffect(() => { (async () => { - await p.init() - const ethereumClient = new EthereumClient(p.wagmiClient, p.chains) + await remix.initClient() + const ethereumClient = new EthereumClient(remix.wagmiClient, remix.chains) - setWagmiClient(p.wagmiClient) + setWagmiClient(remix.wagmiClient) setEthereumClient(ethereumClient) })() }, []) return (
-
- { wagmiClient && - - - } -
-
- { wagmiClient && - - - - } -
- { ethereumClient && } + { ethereumClient && wagmiClient && }
) } diff --git a/apps/wallet-connect/src/app/walletConnectUI.tsx b/apps/wallet-connect/src/app/walletConnectUI.tsx new file mode 100644 index 0000000000..35f289438a --- /dev/null +++ b/apps/wallet-connect/src/app/walletConnectUI.tsx @@ -0,0 +1,17 @@ +import { Web3Button, Web3Modal } from "@web3modal/react" +import { WagmiConfig } from "wagmi" +import { PROJECT_ID } from "../services/constant" + +export function WalletConnectUI ({ ethereumClient, wagmiClient }) { + + return ( +
+
+ + + +
+ +
+ ) +} \ No newline at end of file diff --git a/apps/wallet-connect/src/services/RemixClient.ts b/apps/wallet-connect/src/services/RemixClient.ts index 0884a57064..3cab5832a6 100644 --- a/apps/wallet-connect/src/services/RemixClient.ts +++ b/apps/wallet-connect/src/services/RemixClient.ts @@ -16,13 +16,21 @@ export class RemixClient extends PluginClient { this.onload() } - async init() { + onActivation () { + this.subscribeToEvents() + } + + init () { + console.log('initializing walletconnect plugin...') + } + + async initClient () { try { this.chains = [arbitrum, mainnet, polygon, optimism, goerli, sepolia] - const { provider } = configureChains(this.chains, [w3mProvider({ projectId: PROJECT_ID })]) + this.wagmiClient = wagmiCreateClient({ - autoConnect: false, + autoConnect: true, connectors: w3mConnectors({ projectId: PROJECT_ID, version: 1, chains: this.chains }), provider }) @@ -31,6 +39,18 @@ export class RemixClient extends PluginClient { } } + subscribeToEvents () { + this.wagmiClient.subscribe((event) => { + if (event.status === 'connected') { + this.emit('accountsChanged', [event.data.account]) + this.emit('chainChanged', event.data.chain.id) + } else if (event.status === 'disconnected') { + this.emit('accountsChanged', []) + this.emit('chainChanged', 0) + } + }) + } + sendAsync = (data: { method: string, params: string, id: string }) => { return new Promise((resolve, reject) => { if (this.wagmiClient) { @@ -53,6 +73,7 @@ export class RemixClient extends PluginClient { }) } } else { + console.error(`Cannot make ${data.method} request. Remix client is not connect to walletconnect client`) resolve({"jsonrpc": "2.0", "result": [], "id": data.id}) } })