如何在浏览器端监听Phantom钱包的账户切换事件

实现方案 #

Phantom钱包遵循Solana钱包标准协议，账户切换的回调事件名为accountChanged，直接对window.solana对象绑定该事件即可监听到账户切换动作，适配Next.js+React的实现代码如下：

基础手动绑定实现 #

import { useEffect, useState } from 'react';

export default function WalletPage() {
  // 存储当前连接的钱包地址
  const [walletAddress, setWalletAddress] = useState<string | null>(null);

  useEffect(() => {
    // 规避Next.js服务端渲染场景下window不存在的报错
    if (typeof window === 'undefined' || !window.solana?.isPhantom) return;

    // 账户切换回调函数
    const onAccountChange = (newAccount: { publicKey?: { toString: () => string } } | null) => {
      if (newAccount?.publicKey) {
        const newAddress = newAccount.publicKey.toString();
        setWalletAddress(newAddress);
        // 此处可追加切换账户后的业务逻辑，比如刷新用户链上资产、重置登录状态等
      } else {
        // 处理用户锁定钱包/移除授权的场景
        setWalletAddress(null);
      }
    };

    // 绑定事件监听
    window.solana.on('accountChanged', onAccountChange);

    // 组件卸载时移除监听，避免内存泄漏
    return () => {
      window.solana.removeListener('accountChanged', onAccountChange);
    };
  }, []);

  return <div>当前连接地址：{walletAddress || '未连接钱包'}</div>;
}

注意事项 #

• 如果你项目中使用了@solana/wallet-adapter-react官方钱包适配器库，不需要手动绑定事件，直接调用useWallet()钩子获取publicKey状态即可，库内部已经封装了切换事件的监听，账户切换时publicKey会自动更新。
• 所有涉及window操作的钱包逻辑都需要放在客户端执行，除了写在useEffect中，也可以通过Next.js动态导入关闭组件SSR的方式实现。

内容的提问来源于stack exchange，提问作者Sergiu Tonț