How to use WalletConnect Ethereum Provider?

[orangeqq]

Hello,

Docs here shows WalletConnectConnector wraps the WalletConnect Ethereum Provider.

But I have no idea how to use it. I want to get a provider and send it to web3.js.
Could anyone help me, please?

[olegshilov]

https://wagmi.sh/react/hooks/useWalletClient

[olegshilov]

Sorry for the misunderstanding, now I see that you are not using React.
Could you please provide a little more information about what you are trying to achieve, and we can figure it out together)

btw. after you connected you can get provider with this method https://wagmi.sh/core/actions/getWalletClient
Docs about WalletClient is here

[orangeqq]

Thanks. I checked the doc about walletClient, but yet not sure if it is the right thing.
I have a thread in wallet connect discussion here.
I think a Ethereum Provider wrapped with web3modal is necessary for me. But I haven't found how to use it in Vanilla JS.

[orangeqq]

Here is my code. It can connect to a MetaMask wallet.
Further more, I want to use web3.js methods to make transactions etc.
Thus, the provider must be sent to Web3 like this: const web3 = new Web3(provider);

import {
  EthereumClient,
  w3mConnectors,
  w3mProvider,
  WagmiCore,
  WagmiCoreChains,
  WagmiCoreConnectors,
} from "https://unpkg.com/@web3modal/ethereum@2.6.2";

import { Web3Modal } from "https://unpkg.com/@web3modal/html@2.6.2";

const { configureChains, createConfig } = WagmiCore;
const { mainnet } = WagmiCoreChains;

const chains = [mainnet];
const projectId = "xxx";

const connector = w3mConnectors({ chains, version: 2, projectId, isNewChainsStale: false });
const w3mprovider = w3mProvider({ projectId });

const { publicClient } = configureChains(chains, [w3mprovider]);
const wagmiConfig = createConfig({
  autoConnect: true,
  connectors: [
    ...connector
  ],
  publicClient,
});

const ethereumClient = new EthereumClient(wagmiConfig, chains);

let web3modal;
const web3 = await getMobileWeb3Instance();
const accounts = web3.eth.getAccounts(); //Since not sending the right provider, I can't use methods of web3.js here

async function getMobileWeb3Instance() {
    try {
      web3modal = new Web3Modal(
        {
          projectId,
          explorerRecommendedWalletIds: [
            'c57ca95b47569778a828d19178114f4db188b89b763c899ba0be274e97267d96',
          ],
          enableExplorer: false,
        },
        ethereumClient
      );
    } catch(e) {
      console.log("Could not get a wallet connection", e);
    }
    const web3 = new Web3(provider); // Here, I want to send a provider to Web3, but have no idea how to get it.
    return web3;
}

[saintmaxi]

You may need to downgrade to a previous version of web3modal to accomplish this. The latest versions use viem under the hood (with the publicClient convention) rather than ethers which uses provider.

[orangeqq]

Thank you, that's a very helpful suggestion!
In the end, I used the session obtained through WalletConnectModal (with Sign API), which can be directly used to send JSON-RPC requests. And that's exactly what I needed.