Wagmi配置中Base主网与测试网ChainID冲突问题解析

问题背景

在使用Wagmi框架配置区块链连接时，开发者遇到了一个关于Base链网络识别的异常现象。当仅配置Base主网(base)时，系统却错误地识别为Base测试网(baseSepolia)的ChainID。这个问题在配置Coinbase钱包连接时尤为明显。

问题复现

开发者最初尝试了以下配置方式：

import { createConfig, http } from 'wagmi';
import { base } from 'wagmi/chains';
import { coinbaseWallet } from 'wagmi/connectors';

export function createWagmiConfig(rpcUrl: string) {
  const baseUrl = rpcUrl.replace(/\/v1\/(.+?)\//, '/v1/base/');

  return createConfig({
    chains: [base],
    connectors: [
      coinbaseWallet({
        appName: 'MyApp',
        preference: 'all',
      }),
    ],
    ssr: true,
    transports: {
      [base.id]: http(baseUrl),
    },
  });
}

尽管配置中明确只包含了Base主网，但实际运行时系统却返回了测试网的ChainID。

解决方案

经过排查，发现需要同时配置Base主网和测试网才能正确识别主网ChainID。修正后的配置如下：

import { createConfig, http } from 'wagmi';
import { base, baseSepolia } from 'wagmi/chains';
import { coinbaseWallet } from 'wagmi/connectors';

export function createWagmiConfig(rpcUrl: string) {
  const baseUrl = rpcUrl.replace(/\/v1\/(.+?)\//, '/v1/base/');
  const baseSepoliaUrl = rpcUrl.replace(/\/v1\/(.+?)\//, '/v1/base-sepolia/');

  return createConfig({
    chains: [base, baseSepolia],
    connectors: [
      coinbaseWallet({
        appName: 'MyApp',
        preference: 'all',
      }),
    ],
    ssr: true,
    transports: {
      [base.id]: http(baseUrl),
      [baseSepolia.id]: http(baseSepoliaUrl),
    },
  });
}

技术分析

这个问题的根源可能在于Wagmi内部对链ID的处理逻辑。当只配置主网时，系统可能默认回退到测试网设置，这可能是出于开发便利的考虑，但在生产环境中会造成混淆。

值得注意的是，Coinbase钱包连接器的preference: 'all'设置允许显示QR码供Coinbase钱包扫描，这在移动端用户体验上是一个重要配置。

最佳实践建议

1. 明确网络配置：即使只使用主网，也建议同时配置测试网以避免意外行为
2. RPC端点处理：注意正确处理不同网络的RPC端点URL，如示例中的正则替换
3. 环境区分：考虑根据环境变量动态选择配置的网络，避免生产环境使用测试网
4. 类型安全：利用TypeScript确保网络配置的类型正确性

总结

Wagmi框架在简化区块链连接方面提供了强大功能，但在特定网络配置上需要注意一些细节行为。Base网络的这种特殊处理方式提醒开发者，在实际项目中应该充分测试网络切换和识别逻辑，确保应用在不同环境下都能正确运行。