🔑 关键词:钱包连接异常用户提示优化网络不匹配地址变更连接失败断连重连Toast反馈自动恢复连接


连接钱包 ≠ 一劳永逸

现实中,钱包连接会频繁遇到各种异常情况,包括但不限于:

这些问题如果处理不好,会严重影响 DApp 的用户留存与信任。

ChatGPT Image 2025年6月29日 16_13_25.png


wagmi 中连接生命周期回顾

wagmi v2 中,连接状态可以通过以下 Hook 组合获取与处理:

import { useConnect, useDisconnect, useAccount, useNetwork } from 'wagmi'

const { connect, connectors, error, isPending } = useConnect()
const { disconnect } = useDisconnect()
const { isConnected, address } = useAccount()
const { chain } = useNetwork()

高频异常与解决方案

异常场景 解决策略
未安装钱包 提示安装链接,如 MetaMask Chrome 插件或手机钱包
用户拒绝连接 捕捉错误 UserRejectedRequestError → toast 提示
钱包已连接但 UI 没响应 使用 watchAccount() / useAccount() 自动响应
钱包切换账户未刷新地址 监听 accountsChanged → 更新状态 / 重新拉取数据
钱包连接但链 ID 不匹配 调用 switchChain({ chainId }) 自动切换
页面刷新后状态丢失 使用 autoConnect: true + Zustand 持久化
WalletConnect 刷新丢连接 结合本地缓存 connector 名称,自动重连

统一封装错误提示函数(Toast)