使用WalletConnect与Wagmi时刷新页面会话丢失问题求助

我尝试在我的dApp中添加“Connect Wallet”按钮，采用WalletConnect的Web3Modal与Wagmi实现，但刷新页面后会话会断开，需要重新登录。查看Web3Modal官方示例时，钱包在刷新后仍能保持连接。以下是我的代码：

import { configureChains, createClient, connect } from '@wagmi/core'
import { mainnet, polygon } from '@wagmi/core/chains'
import { EthereumClient, modalConnectors, walletConnectProvider } from '@web3modal/ethereum'
import { Web3Modal } from '@web3modal/html'

const projectId = '*69c...426*'
const chains = [mainnet, polygon]

const { provider } = configureChains(chains, [walletConnectProvider({ projectId })])
const wagmiClient = createClient({
  autoConnect: true,
  connectors: modalConnectors({ appName: "web3Modal", chains: chains, version: "2", projectId: projectId }),
  provider
})
const ethereumClient = new EthereumClient(wagmiClient, chains)
const web3Modal = new Web3Modal({ projectId }, ethereumClient);

请问我遗漏了什么配置？

问题核心是会话未被持久化存储，虽然设置了autoConnect: true，但Wagmi默认没有配置存储适配器保存连接状态，导致刷新后丢失会话。以下是修复步骤：

• 添加Wagmi存储适配器
  Wagmi需要存储机制（比如localStorage）来保存连接会话，从@wagmi/core导入createStorage并配置到客户端：

import { configureChains, createClient, createStorage } from '@wagmi/core'
// ... 其他导入代码

// 创建本地存储适配器
const storage = createStorage({
  storage: window.localStorage,
})

const wagmiClient = createClient({
  autoConnect: true,
  connectors: modalConnectors({ appName: "web3Modal", chains, version: "2", projectId }),
  provider,
  storage // 新增存储配置
})

• 开启Web3Modal会话缓存
  初始化Web3Modal时显式开启缓存，确保WalletConnect会话持久化：

const web3Modal = new Web3Modal({
  projectId,
  cacheProvider: true // 开启缓存，默认可能为false
}, ethereumClient);

• 验证基础配置完整性
  确认modalConnectors的chains、projectId参数传递无误，同时替换示例中的*69c...426*为真实有效的WalletConnect Project ID。

完成以上配置后，刷新页面时Wagmi会自动从localStorage读取连接状态，Web3Modal也会恢复WalletConnect会话，无需重新登录。

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