Rainbow Kit钱包连接异常：断开后重连失败，openConnectModal返回undefined

问题描述 #

首次登录账户后钱包可正常连接；但断开钱包后再次点击「连接钱包」按钮时功能失效，openConnectModal返回undefined。刷新页面后再次点击「连接钱包」，功能恢复正常。

问题复现步骤 #

• 登录账户
• 点击连接钱包
• 连接成功后断开MetaMask钱包
• 再次点击连接钱包，出现无法连接的问题

补充测试场景 #

• 登录账户
• 连接MetaMask钱包
• 断开MetaMask钱包
• 再次点击连接钱包，MetaMask钱包可成功连接（部分场景下的异常表现）

解决方案 #

1. 规范钱包断开逻辑，主动重置wagmi状态 #

仅通过MetaMask端断开钱包，可能导致wagmi内部状态未同步更新。建议在前端断开按钮中主动调用wagmi的disconnect方法：

import { useDisconnect } from 'wagmi';

const { disconnect } = useDisconnect();

const handleDisconnect = () => {
  // 先触发wagmi的断开逻辑，同步内部状态
  disconnect();
  // 若有本地存储的钱包连接状态，一并清除
  localStorage.removeItem('wagmi.connected');
};

2. 确保openConnectModal实例有效 #

RainbowKit的连接模态框实例可能因状态残留失效，每次点击连接时重新获取实例：

import { useConnectModal } from '@rainbow-me/rainbowkit';

const handleConnectWallet = () => {
  const { openConnectModal } = useConnectModal();
  if (openConnectModal) {
    openConnectModal();
  } else {
    // 极端情况强制刷新页面恢复状态
    window.location.reload();
  }
};

3. 检查wagmi客户端配置 #

确认wagmi客户端配置中autoConnect已启用，保证钱包状态与页面同步：

import { createClient } from 'wagmi';
import { getDefaultWallets } from '@rainbow-me/rainbowkit';
import { configureChains, mainnet } from 'wagmi';
import { publicProvider } from 'wagmi/providers/public';

const { chains, provider } = configureChains(
  [mainnet],
  [publicProvider()]
);

const { connectors } = getDefaultWallets({
  appName: '你的应用名称',
  chains,
});

const wagmiClient = createClient({
  autoConnect: true, // 启用自动连接，同步钱包状态
  connectors,
  provider,
});

4. 隔离登录状态与钱包连接状态 #

避免登录状态的存储逻辑干扰钱包连接状态，使用独立的状态管理方案（如Zustand、Redux）分别维护两种状态，防止状态污染。

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