RainbowKit 钱包连接状态丢失问题分析与解决方案

问题背景

在使用 RainbowKit 2.0.1 和 wagmi 2.5.7 构建的 DApp 中，开发者遇到了一个钱包连接状态丢失的问题。当 WagmiProvider 的配置(config)发生变化时，已连接的钱包会自动断开连接，这影响了用户体验。

问题现象

具体表现为：

1. 当用户已连接钱包后，如果切换"活跃"链(active chain)，钱包会自动断开连接
2. 当选择特定链(如 Optimism 或 Base)作为活跃链时，点击"连接"按钮后，期望 MetaMask 能自动提示切换到对应链，但实际行为不符合预期

根本原因分析

经过技术分析，发现问题的根源在于：

1. 配置对象引用变化：每次活跃状态变化时，都会生成一个全新的配置对象引用
2. wagmi 的状态重置机制：当 wagmi 检测到新的配置引用时，会重置所有状态，包括连接状态
3. 动态链加载问题：当链数据从后端动态加载时，初始渲染时没有链数据，导致页面刷新后钱包断开连接

解决方案

方案一：避免配置对象重新创建

核心思路是将配置对象移出组件渲染范围，避免每次渲染都创建新对象：

// 在组件外部定义常量链和配置
const CHAINS = [mainnet, optimism, base];
const config = getDefaultConfig({
  appName: "My App",
  projectId: "YOUR_PROJECT_ID",
  chains: CHAINS
});

function App() {
  // 在组件内部处理活跃链状态
  const [active, setActive] = useState(mainnet.id);
  
  return (
    <WagmiProvider config={config}>
      {/* 其他组件 */}
    </WagmiProvider>
  )
}

方案二：使用 initialChain 属性

对于需要在连接钱包时自动切换到特定链的需求，可以使用 RainbowKitProvider 的 initialChain 属性：

<RainbowKitProvider initialChain={optimism}>

这样用户在连接钱包时，系统会自动提示切换到指定的初始链。

方案三：处理动态加载链的场景

对于需要从后端动态加载链数据的场景，建议采用以下模式：

1. 初始渲染时显示加载状态
2. 从后端获取链数据后，再渲染完整应用
3. 确保配置对象只在链数据加载完成后创建一次

function App() {
  const [chains, setChains] = useState([]);
  const [isLoading, setIsLoading] = useState(true);

  useEffect(() => {
    fetchChainsFromBackend().then((backendChains) => {
      setChains(backendChains);
      setIsLoading(false);
    });
  }, []);

  if (isLoading) return <LoadingScreen />;

  const config = getDefaultConfig({
    appName: "My App",
    projectId: "YOUR_PROJECT_ID",
    chains: chains
  });

  return (
    <WagmiProvider config={config}>
      {/* 应用内容 */}
    </WagmiProvider>
  )
}

最佳实践建议

1. 配置对象稳定性：确保 Wagmi 配置对象尽可能稳定，避免不必要的重新创建
2. 链管理策略：考虑预定义所有可能的链，而不是动态筛选，只在UI层面做过滤
3. 用户体验优化：对于链切换场景，考虑使用钱包的链切换API而不是重建整个配置
4. 错误处理：为动态加载场景添加适当的错误处理和加载状态

总结

RainbowKit 和 wagmi 的组合提供了强大的钱包连接功能，但在配置管理和状态保持方面需要开发者特别注意。通过理解框架的内部机制和采用稳定的配置管理策略，可以有效避免钱包连接状态丢失的问题，提供更流畅的用户体验。对于需要动态加载链数据的场景，合理的加载状态管理和错误处理是关键。