WalletConnect Web3Modal 中的 Swap 交易网络切换问题解析

问题背景

在 WalletConnect Web3Modal 项目中，开发者在使用 Swap 功能时遇到了一个典型的网络切换问题。当用户尝试批准交易时，系统抛出了一个网络变更错误，显示底层网络从预期的 Polygon 主网变为了未知网络。

技术细节分析

该问题主要涉及以下几个技术层面：

1. 网络切换机制：Web3Modal 提供了自动网络切换功能(enforceNetwork 和 autoSwitchNetwork)，但在 Swap 交易批准过程中，网络状态出现了不一致。

2. 错误信息解读：错误信息显示检测到的网络是 Polygon 主网(chainId:137)，但当前网络状态却变成了未知(null)。这种不一致导致交易批准失败。

3. Ethers.js 版本影响：项目使用的是 ethers.js 5.7.2 版本，该版本在网络状态管理方面有一些已知问题。

问题根源

经过分析，这个问题可能由以下几个因素导致：

1. 网络状态同步延迟：在交易批准过程中，钱包连接状态发生变化，但应用没有及时获取最新网络状态。

2. Ethers.js 提供者问题：特定版本的 ethers.js 在网络状态管理上存在缺陷，可能导致网络状态丢失。

3. Swap 流程设计：Swap 功能的交易批准流程可能没有充分考虑网络切换的中间状态。

解决方案

开发团队已经确认该问题并在 1.7.2 版本中修复。对于遇到类似问题的开发者，可以采取以下临时解决方案：

1. 明确设置网络：在发起交易前，确保网络状态正确并稳定。

2. 添加网络状态监听：实现网络状态变化的监听机制，在状态变化时重新获取网络信息。

3. 使用最新版本：升级到修复后的版本(1.7.2 或更高)。

最佳实践建议

1. 网络状态管理：在涉及交易的场景中，始终验证当前网络是否符合预期。

2. 错误处理：完善错误处理逻辑，特别是针对网络切换场景。

3. 版本控制：保持依赖库的最新版本，特别是像 ethers.js 这样的核心库。

总结

这个问题展示了在去中心化应用中处理网络状态的重要性。通过这次问题的分析和解决，开发者可以更好地理解 Web3Modal 在网络管理方面的工作机制，并在自己的项目中实现更健壮的网络状态处理逻辑。