如何脱离Wagmi，将RainbowKit与ethers.js配合使用？

核心思路 #

RainbowKit虽基于wagmi构建，但我们可以绕开wagmi的合约调用限制，直接从RainbowKit连接的钱包中提取底层provider，适配成ethers.js可用的实例——既保留RainbowKit的UI优势，又能享受ethers.js的灵活调用体验。

具体实现步骤 #

1. 获取已连接钱包的底层Provider

通过wagmi的钩子拿到当前连接的钱包连接器，再从中提取原生provider：

import { useAccount, useConnector } from 'wagmi';
import { ethers } from 'ethers';

function YourComponent() {
  const { isConnected } = useAccount();
  const { connector } = useConnector();

  async function getEthersSigner() {
    if (!isConnected || !connector) return null;
    // 获取钱包原生provider
    const provider = await connector.getProvider();
    // 包装成ethers.js的Provider
    const ethersProvider = new ethers.providers.Web3Provider(provider);
    // 获取当前账户的signer
    const signer = ethersProvider.getSigner();
    return signer;
  }

  // 后续可直接用该signer调用ethers.js的合约方法
}

2. 解决wagmi hooks与ethers.js的兼容问题

你之前遇到的useSigner/useProvider不兼容，是因为wagmi默认返回viem生态的实例，而非ethers.js的。可以封装自定义hooks自动转换：

import { useState, useEffect } from 'react';
import { useAccount, useConnector } from 'wagmi';
import { ethers } from 'ethers';

export function useEthersSigner() {
  const { isConnected } = useAccount();
  const { connector } = useConnector();
  const [signer, setSigner] = useState(null);

  useEffect(() => {
    async function initSigner() {
      if (!isConnected || !connector) return;
      const provider = await connector.getProvider();
      const ethersProvider = new ethers.providers.Web3Provider(provider);
      setSigner(ethersProvider.getSigner());
    }
    initSigner();
  }, [isConnected, connector]);

  return signer;
}

export function useEthersProvider() {
  const { isConnected } = useAccount();
  const { connector } = useConnector();
  const [provider, setProvider] = useState(null);

  useEffect(() => {
    async function initProvider() {
      if (!isConnected || !connector) return;
      const rawProvider = await connector.getProvider();
      setProvider(new ethers.providers.Web3Provider(rawProvider));
    }
    initProvider();
  }, [isConnected, connector]);

  return provider;
}

之后在组件里直接用const signer = useEthersSigner()就能拿到ethers兼容的签名器。

3. 合约调用示例

拿到signer后，即可正常用ethers.js调用合约，完全避开wagmi的局限：

import { useEthersSigner } from './your-hooks';
import { ethers } from 'ethers';

const CONTRACT_ABI = [...]; // 你的合约ABI
const CONTRACT_ADDRESS = '0x...';

function ContractCallComponent() {
  const signer = useEthersSigner();

  async function callContractMethod() {
    if (!signer) return;
    const contract = new ethers.Contract(CONTRACT_ADDRESS, CONTRACT_ABI, signer);
    // 调用有返回值的方法，遵循ethers.js逻辑
    const result = await contract.yourMethod();
    console.log('返回结果:', result);
  }

  return <button onClick={callContractMethod}>调用合约</button>;
}

内容的提问来源于stack exchange，提问作者Tame.nation