Dear smart contract front-end developers,

As you know, AppKit is the new verion of Web3Modal. I am using it in a web javascript program to show a dialog to connect the web page to the desired wallet. Then I want to use Web3.js to interact with some smart contracts.

So I use this program:

import { createAppKit, ReownAppKitModal } from '@reown/appkit';
import { bsc } from '@reown/appkit/networks';
import { WagmiAdapter } from '@reown/appkit-adapter-wagmi';
import { reconnect } from '@wagmi/core';
import { Web3 } from 'web3';

const projectId = '...';
const networkList = [ bsc];
const wagmiAdapter = new WagmiAdapter({
    projectId,
    networks: networkList
});
const metadata = {
    name: '...',
    description: '...',
    url: 'https://...',
    icons: ['...'],
};
const modal = createAppKit({
    adapters: [wagmiAdapter],
    networks: networkList,
    projectId,
    metadata: metadata,
    themeMode: 'light'
});
reconnect(wagmiAdapter.wagmiConfig);
const web3 = new Web3(xxx);

Now I want to use a Web3 provider instead of xxx in the last line of the above program.

For example if I use window.ethereum it works only if I use Metamask wallet.

What can I use instead of Web3 provider so it connects to the wallet that selected in AppKit modal dialog?

I will appreciate you, even if you give a solution in Web3Modal.

Dear smart contract front-end developers,

As you know, AppKit is the new verion of Web3Modal. I am using it in a web javascript program to show a dialog to connect the web page to the desired wallet. Then I want to use Web3.js to interact with some smart contracts.

So I use this program:

import { createAppKit, ReownAppKitModal } from '@reown/appkit';
import { bsc } from '@reown/appkit/networks';
import { WagmiAdapter } from '@reown/appkit-adapter-wagmi';
import { reconnect } from '@wagmi/core';
import { Web3 } from 'web3';

const projectId = '...';
const networkList = [ bsc];
const wagmiAdapter = new WagmiAdapter({
    projectId,
    networks: networkList
});
const metadata = {
    name: '...',
    description: '...',
    url: 'https://...',
    icons: ['...'],
};
const modal = createAppKit({
    adapters: [wagmiAdapter],
    networks: networkList,
    projectId,
    metadata: metadata,
    themeMode: 'light'
});
reconnect(wagmiAdapter.wagmiConfig);
const web3 = new Web3(xxx);

Now I want to use a Web3 provider instead of xxx in the last line of the above program.

For example if I use window.ethereum it works only if I use Metamask wallet.

What can I use instead of Web3 provider so it connects to the wallet that selected in AppKit modal dialog?

I will appreciate you, even if you give a solution in Web3Modal.

• javascript
• web3js
• wallet-connect
• web3modal

• For what is worth, I've put a bounty because I'm trying to build a vanilla js version and the reown documentation really missing a lot. github/bitcoin4cashqc/VanillaReown – btc4cash Commented Dec 21, 2024 at 4:24

2 Answers 2

When using Web3Modal or similar wallet connection libraries, you should get the provider from the connection result. Below are two approaches:

Using Web3Modal:

import Web3Modal from 'web3modal';
import Web3 from 'web3';

const web3Modal = new Web3Modal({
  network: "binance", // or your desired network
  cacheProvider: true,
  providerOptions: {} // Define your provider options here
});

// Connect and get provider
const provider = await web3Modal.connect();
const web3 = new Web3(provider);

Using WalletConnect:

import Web3 from 'web3';
import { EthereumProvider } from '@walletconnect/ethereum-provider';

const provider = await EthereumProvider.init({
  projectId: 'YOUR_PROJECT_ID',
  chains: [56], // BSC chain ID
  showQrModal: true
});

await provider.enable();
const web3 = new Web3(provider);

You should be able to get the provider by using the WagmiAdapter with your code. Try something like this:

// After connection is established through your modal
const provider = await wagmiAdapter.getProvider();
const web3 = new Web3(provider);

Or you might need to get it from the connection result:

modal.on('connected', (provider) => {
    const web3 = new Web3(provider);
    // Your web3 code here
});

The point here is to use the provider that comes from your connection process rather than hardcoding window.ethereum or another particular provider. It should work this way with whatever wallet the user selects in your connection modal. I hope this helps.

That's how I did it with WalletConnectv2 thanks to Su Squares:

window.process = { env: { NODE_ENV: "development" } };
import {
    EthereumClient,
    w3mConnectors,
    w3mProvider,
    WagmiCore, // same as from @wagmi/core
    //WagmiCoreChains, // same as from @wagmi/core/chains
} from 'https://unpkg/@web3modal/[email protected]'
import { Web3Modal } from 'https://unpkg/@web3modal/[email protected]'
const { configureChains, createConfig, useWalletClient } = WagmiCore;

import { providers } from 'https://cdn.jsdelivr/npm/[email protected]/dist/ethers.esm.js';
[...]


const { publicClient } = configureChains(chains, [w3mProvider({ projectId: walletConnectProjectId })]);
const wagmiConfig = createConfig({
    autoConnect: true,
    connectors: w3mConnectors({ projectId: walletConnectProjectId, chains }),
    publicClient
});
const ethereumClient = new EthereumClient(wagmiConfig, chains);
const web3modal = new Web3Modal({ projectId: walletConnectProjectId }, ethereumClient);

// Utility to get Web3.js Provider
async function getWeb3Provider() {
    // Find WalletConnect connector
    const walletConnectConnector = wagmiConfig.connectors.find(
        (connector) => connector.id === "walletConnect"
    );

    if (!walletConnectConnector) {
        throw new Error("WalletConnect connector not found.");
    }

    // Connect and get raw provider
    await walletConnectConnector.connect();
    const rawProvider = await walletConnectConnector.getProvider();

    // Initialize Web3.js with raw provider
    return rawProvider;
}

// Usage within your ethereumClient.watchAccount handler
ethereumClient.watchAccount(async (wagmiaccount) => {

    if (wagmiaccount.address && wagmiaccount.isConnected) {
        selectedWallet = "WalletConnect";
        localStorage.setItem("selectedWallet", selectedWallet);
        account = wagmiaccount.address;

        // Convert to Ethers provider
        const ethersProvider = await getWeb3Provider();
       
        // Initialize Web3.js with the Ethers provider
        web3 = new Web3(ethersProvider);
        }
});