WalletConnect with Ethersjs

2.5k Views Asked by At

is anyway to use walletconnect with etherejs ?

the demos are nice but they are with wagmi

i cant port all project from etherjs to wagmi

i need this feature this button connect disconect and possibility to use only few networks/chainids

import { arbitrum, mainnet, polygon } from "wagmi/chains";

enter image description here

https://docs.walletconnect.com/2.0/web3modal/react/installation

i this this exactly but with ETHERSJS

const { provider } = configureChains(chains, [
  walletConnectProvider({ projectId: "<YOUR_PROJECT_ID>" }),
]);
const wagmiClient = createClient({
  autoConnect: true,
  connectors: modalConnectors({ appName: "web3Modal", chains }),
  provider,
});

// Web3Modal Ethereum Client
const ethereumClient = new EthereumClient(wagmiClient, chains);
1

There are 1 best solutions below

0
On

I found official example for WalletConnect v2 integration with Ethers.js

New 2024 solution (**Does not seems to be reliable):

Official example https://github.com/WalletConnect/web-examples/blob/main/dapps/ethereum-provider/src/App.tsx#L25C49-L25C61

  • Note that using Ethers v6 it's required to use BrowserProvider instead of Web3Provider
const provider = await EthereumProvider.init({ ...params });
const ethersProvider = new ethers.BrowserProvider(provider);
// Activate wallet - trigger modal
const signer = await ethersProvider.provider.getSigner();
const address = await signer.getAddress();
// Now you have acceess to provider - cache it until page reload
// + add Disconnect (see example)

Older/Until 2024 solution:

Previous example was here but most likely above is more up to date: https://github.com/WalletConnect/web-examples/blob/2.7.8/dapps/react-dapp-v2-with-ethers/src/contexts/ClientContext.tsx

  • Bad thing is that it's more complex than one with Wagmi. You have to connect lot of WalletConnect events to keep session info up to date, or to reset connection state.
  • Also official example (ClientContext.tsx) is IMO overusing React state which is not ideal. Would be nice to have official Ethers wrapper (not React, or other UI library dependent).
  • But it is definitely useful example to make Ethers integration work.