如何在Ethers.js中使用WalletConnect？无需迁移至Wagmi

完全可以直接通过WalletConnect核心库结合Ethers.js实现需求，无需迁移到Wagmi。以下是具体实现步骤：

1. 安装依赖 #

npm install @walletconnect/ethereum-provider ethers @web3modal/ethereum @web3modal/html

2. 定义支持的链 #

对应你需要的Arbitrum、以太坊主网、Polygon，配置链ID和基础信息：

const SUPPORTED_CHAINS = [
  {
    chainId: 1, // 以太坊主网
    name: "Ethereum Mainnet",
    rpcUrls: ["https://mainnet.infura.io/v3/你的Infura项目ID"],
    nativeCurrency: { name: "ETH", symbol: "ETH", decimals: 18 }
  },
  {
    chainId: 137, // Polygon主网
    name: "Polygon Mainnet",
    rpcUrls: ["https://polygon-rpc.com"],
    nativeCurrency: { name: "MATIC", symbol: "MATIC", decimals: 18 }
  },
  {
    chainId: 42161, // Arbitrum One
    name: "Arbitrum One",
    rpcUrls: ["https://arb1.arbitrum.io/rpc"],
    nativeCurrency: { name: "ETH", symbol: "ETH", decimals: 18 }
  }
];

3. 初始化WalletConnect Provider和Web3Modal #

import { EthereumProvider } from "@walletconnect/ethereum-provider";
import { Web3Modal } from "@web3modal/html";
import { ethers } from "ethers";

// 初始化WalletConnect Provider
const provider = await EthereumProvider.init({
  projectId: "你的WalletConnect项目ID", // 需在WalletConnect控制台申请
  chains: SUPPORTED_CHAINS.map(chain => chain.chainId),
  showQrModal: false, // 禁用内置模态框，使用Web3Modal的UI
  methods: ["eth_sendTransaction", "personal_sign"],
  events: ["chainChanged", "accountsChanged"]
});

// 配置Web3Modal（匹配你提供的示例UI）
const web3Modal = new Web3Modal({
  projectId: "你的WalletConnect项目ID",
  ethereumClient: provider
});

4. 实现连接/断开逻辑 #

// 连接钱包
async function connectWallet() {
  try {
    await web3Modal.openModal();
    // 转换为Ethers.js可用的Provider
    const ethersProvider = new ethers.BrowserProvider(provider);
    // 获取已连接账户
    const accounts = await ethersProvider.listAccounts();
    console.log("已连接账户:", accounts);

    // 监听链切换，限制仅支持指定链
    provider.on("chainChanged", (chainId) => {
      const parsedChainId = parseInt(chainId, 16);
      const isSupported = SUPPORTED_CHAINS.some(chain => chain.chainId === parsedChainId);
      if (!isSupported) {
        alert("当前网络不支持，请切换到指定链");
        disconnectWallet();
      }
    });

    // 根据连接状态切换按钮显示
    document.querySelector("button[onclick='connectWallet()']").style.display = "none";
    document.querySelector("button[onclick='disconnectWallet()']").style.display = "inline-block";
  } catch (err) {
    console.error("连接失败:", err);
  }
}

// 断开钱包
async function disconnectWallet() {
  try {
    await provider.disconnect();
    await web3Modal.closeModal();
    console.log("已断开连接");

    // 恢复按钮显示
    document.querySelector("button[onclick='connectWallet()']").style.display = "inline-block";
    document.querySelector("button[onclick='disconnectWallet()']").style.display = "none";
  } catch (err) {
    console.error("断开失败:", err);
  }
}

5. UI按钮实现（匹配示例图） #

<button onclick="connectWallet()">连接钱包</button>
<button onclick="disconnectWallet()" style="display: none;">断开连接</button>

注意事项 #

• 需在WalletConnect控制台申请项目ID，替换代码中的占位符
• 链的RPC URL可替换为自己的节点服务（如Infura、Alchemy）以提升稳定性
• 链切换监听逻辑可根据需求调整提示方式，比如替换alert为自定义弹窗

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