如何从@web3modal/react中获取provider及web3实例？

在使用@web3modal/react时，你可以通过useWeb3Modal Hook提供的内置方法来获取连接后的钱包相关实例，以下是具体实现方式：

修改后的代码示例 #

import { useWeb3Modal } from "@web3modal/react";
import { Web3 } from "web3"; // 如需Web3.js实例，需先执行 npm install web3

const Foo = () => {
  // 从useWeb3Modal中解构出所需方法
  const { open, close, getAccount, getProvider, getWalletClient } = useWeb3Modal();

  async function connect_wallet() {
    try {
      await open();

      // 1. 获取当前连接的账户信息
      const account = getAccount();
      if (account) {
        console.log("已连接账户地址:", account.address);
      }

      // 2. 获取EIP-1193标准Provider
      const provider = await getProvider();
      if (provider) {
        console.log("EIP-1193 Provider:", provider);
        
        // 基于Provider初始化Web3.js实例
        const web3 = new Web3(provider);
        console.log("Web3实例:", web3);
        
        // 示例：调用Web3方法获取当前链ID
        const chainId = await web3.eth.getChainId();
        console.log("当前链ID:", chainId);
      }

      // 3. 获取Viem钱包客户端（Web3Modal默认集成Viem）
      const walletClient = await getWalletClient();
      if (walletClient) {
        console.log("Viem钱包客户端:", walletClient);
      }

    } catch (error) {
      console.error("连接钱包出错:", error);
    }
  }

  return (
    <div>
      <button onClick={connect_wallet}>连接钱包</button>
    </div>
  );
};

export default Foo;

关键方法说明 #

• getAccount()：同步返回当前连接的账户对象，包含address、chainId等核心信息
• getProvider()：异步返回符合EIP-1193标准的Provider，可用于初始化Web3.js或Ethers.js等库的实例
• getWalletClient()：异步返回Viem的Wallet Client，Web3Modal底层默认使用Viem，可直接用它执行链上交互操作

内容的提问来源于stack exchange，提问作者a4illusionist