如何通过@web3modal/react结合ethers.js获取Provider、签名者并发起交易

1. 先完成Web3Modal全局配置 #

@web3modal/react 依赖全局的 Web3ModalProvider 管理状态，先在项目入口文件（如main.jsx或_app.js）中完成基础配置：

import { Web3ModalProvider } from '@web3modal/react'
import { EthereumClient, w3mConnectors, w3mProvider } from '@web3modal/ethereum'
import { configureChains, createConfig, WagmiConfig } from 'wagmi'
import { mainnet, sepolia } from 'wagmi/chains'

// 配置目标链
const chains = [mainnet, sepolia]
const { publicClient } = configureChains(chains, [w3mProvider({ projectId: '你的W3M Project ID' })])
const wagmiConfig = createConfig({
  autoConnect: false, // 关闭自动连接，实现手动触发
  connectors: w3mConnectors({ projectId: '你的W3M Project ID', chains }),
  publicClient
})
const ethereumClient = new EthereumClient(wagmiConfig, chains)

// 包裹应用根组件
function App({ children }) {
  return (
    <WagmiConfig config={wagmiConfig}>
      <Web3ModalProvider ethereumClient={ethereumClient}>
        {children}
      </Web3ModalProvider>
    </WagmiConfig>
  )
}

export default App

2. 手动触发连接并获取Provider/Signer #

在业务组件中，通过 useWeb3Modal 和 wagmi 内置hook实现手动连接，并转换为ethers可用的Provider与Signer：

import { useWeb3Modal } from '@web3modal/react'
import { useAccount, useConnectorClient } from 'wagmi'
import { ethers } from 'ethers'

function WalletConnectBtn() {
  const { open } = useWeb3Modal()
  const { isConnected } = useAccount()
  const { data: client } = useConnectorClient()

  // 手动唤起钱包连接弹窗
  const handleConnect = async () => {
    await open()
  }

  // 转换wagmi客户端为ethers的Provider和Signer
  const getEthersSigner = () => {
    if (!client) return null
    const provider = new ethers.providers.Web3Provider(client)
    const signer = provider.getSigner()
    return { provider, signer }
  }

  // 示例：调用合约交易
  const sendTx = async () => {
    const { signer } = getEthersSigner()
    if (!signer) return

    // 替换为你的合约地址和ABI
    const contract = new ethers.Contract('合约地址', ['function mint() public'], signer)
    try {
      const tx = await contract.mint()
      await tx.wait()
      console.log('交易成功：', tx.hash)
    } catch (err) {
      console.error('交易失败：', err)
    }
  }

  return (
    <div>
      {!isConnected ? (
        <button onClick={handleConnect}>连接钱包</button>
      ) : (
        <button onClick={sendTx}>发起交易</button>
      )}
    </div>
  )
}

export default WalletConnectBtn

核心要点 #

• autoConnect: false 确保不会自动弹出连接窗口，完全由手动按钮控制触发时机
• useWeb3Modal 的 open() 方法是唤起连接弹窗的核心
• 通过 useConnectorClient 获取的 client 需要用ethers.providers.Web3Provider转换，再调用getSigner()获取签名者
• 连接状态可通过 useAccount 的 isConnected 属性判断

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