无法配置WalletConnect v2.0升级，寻求以太坊Web应用适配指导

问题背景 #

我正在开发一款与以太坊区块链交互的Web应用，当前使用Web3.js、Web3Modal及WalletConnect v1.0实现钱包连接功能。由于WalletConnect v1.0已停止服务，需要升级至v2.0，但不清楚新版本的整合方式，现有代码适配困难，希望实现应用与Trust Wallet等钱包通过WalletConnect连接。当前使用的库CDN链接如下：

一、替换依赖CDN #

Web3Modal v1.x不兼容WalletConnect v2，需同步升级Web3Modal到v2.x，并替换WalletConnect Provider为v2版本：

<!-- 保留Web3.js v4.x -->
<script src="https://unpkg.com/web3@4.0.2/dist/web3.min.js"></script>
<!-- 升级Web3Modal到v2.x -->
<script src="https://unpkg.com/web3modal@2.7.1/dist/index.umd.js"></script>
<!-- 引入WalletConnect v2 Ethereum Provider -->
<script src="https://unpkg.com/@walletconnect/ethereum-provider@2.10.1/dist/umd/index.min.js"></script>

二、初始化WalletConnect v2 Provider #

WalletConnect v2强制要求项目ID（可在WalletConnect开发者后台免费创建），配置Provider参数：

const providerOptions = {
  walletconnect: {
    package: window.WalletConnectEthereumProvider,
    options: {
      projectId: "你的WalletConnect项目ID", // 替换为实际项目ID
      chains: [1], // 以太坊主网链ID，测试网可替换为5（Goerli）等
      showQrModal: true,
      metadata: {
        name: "你的应用名称",
        description: "你的应用功能描述",
        url: window.location.origin,
        icons: ["你的应用图标URL"]
      }
    }
  }
};

三、实现钱包连接/断开逻辑 #

基于Web3Modal v2重构连接流程：

// 初始化Web3Modal
const web3Modal = new window.Web3Modal.default({
  providerOptions,
  cacheProvider: true // 可选，缓存已连接的钱包
});

// 连接钱包函数
async function connectWallet() {
  try {
    const provider = await web3Modal.connect();
    const web3 = new Web3(provider);
    
    // 监听账户切换事件
    provider.on("accountsChanged", (accounts) => {
      console.log("当前账户:", accounts[0]);
      // 更新应用内账户状态
    });
    
    // 监听链切换事件
    provider.on("chainChanged", (chainId) => {
      const decimalChainId = parseInt(chainId);
      console.log("当前链ID:", decimalChainId);
      // 更新应用内链状态
    });
    
    // 获取初始账户和链信息
    const accounts = await web3.eth.getAccounts();
    const chainId = await web3.eth.getChainId();
    
    console.log("已连接账户:", accounts[0]);
    console.log("当前链ID:", chainId);
    // 执行后续业务逻辑
  } catch (error) {
    console.error("连接失败:", error);
  }
}

// 断开钱包函数
async function disconnectWallet() {
  await web3Modal.clearCachedProvider();
  window.location.reload(); // 刷新页面重置状态
}

四、Trust Wallet适配说明 #

Trust Wallet原生支持WalletConnect v2，无需额外配置。用户点击连接按钮后选择WalletConnect选项，Trust Wallet会自动识别并弹出授权请求，确认后即可完成连接。

关键注意事项 #

• 必须申请项目ID：WalletConnect v2强制要求，无项目ID无法建立连接。
• Web3Modal API变化：v2版本API完全重构，与v1.x不兼容，需替换所有旧的Web3Modal调用逻辑。
• 链ID格式：Provider返回的chainId为十六进制字符串，需转换为十进制使用。

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