如何为web3.js设置AppKit（Web3Modal）提供程序？

Question

亲爱的智能合约前端开发者，

如您所知，

AppKit

是

Web3Modal

的新版本。我在网络

javascript

程序中使用它来显示一个对话框，将网页连接到所需的钱包。然后我想用

Web3.js

与一些智能合约进行交互。

所以我使用这个程序：

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);

现在我想使用 Web3 提供程序而不是上述程序最后一行中的

xxx

。

例如，如果我使用

window.ethereum

，则仅当我使用 Metamask 钱包时才有效。

我可以使用什么来代替 Web3 提供程序，以便它连接到在 AppKit 模式对话框中选择的钱包？

即使您在

Web3Modal

中给出解决方案，我也会感激您。

Answer 1

当使用Web3Modal或类似的钱包连接库时，您应该从连接结果中获取提供者。以下是两种方法：

使用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);

使用 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);

您应该能够通过在代码中使用 WagmiAdapter 来获取提供程序。尝试这样的事情：

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

或者您可能需要从连接结果中获取：

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

这里的要点是使用来自连接过程的提供程序，而不是硬编码

window.ethereum

或其他特定提供程序。无论用户在连接模式中选择什么钱包，它都应该以这种方式工作。我希望这有帮助。