使用RainbowKit时Connect Wallet Modal显示两个Metamask选项问题

问题根源 #

首次启动浏览器时，Metamask/Phantom这类钱包扩展的初始化存在延迟，但你的钱包检测逻辑可能在扩展就绪前后执行了多次，导致同一钱包被重复识别并添加到连接选项列表中。

可行解决方案 #

• 优化检测时机，监听扩展就绪事件
  不要在页面加载完成后立即执行检测，而是等待钱包扩展发出的初始化完成事件，确保只在扩展完全就绪后执行一次检测：

  • Metamask检测：

    function initMetamask() {
      if (window.ethereum?.isMetaMask) {
        // 这里写添加Metamask到选项列表的逻辑
      }
    }
    
    if (window.ethereum) {
      initMetamask();
    } else {
      // 监听初始化事件，且只触发一次
      window.addEventListener('ethereum#initialized', initMetamask, { once: true });
    }
    

  • Phantom检测：

    function initPhantom() {
      if (window.phantom?.solana?.isPhantom) {
        // 这里写添加Phantom到选项列表的逻辑
      }
    }
    
    if (window.phantom?.solana) {
      initPhantom();
    } else {
      window.addEventListener('phantom#initialized', initPhantom, { once: true });
    }
    

• 添加选项去重逻辑
  在将钱包选项加入弹窗列表前，先检查是否已有相同标识的钱包存在，避免重复添加：

  // 用Set存储已添加的钱包标识
  const registeredWallets = new Set();
  
  function addWalletToList(walletInfo) {
    // 用钱包的唯一标识做判断
    const walletKey = walletInfo.isMetaMask ? 'metamask' : walletInfo.isPhantom ? 'phantom' : walletInfo.id;
    
    if (!registeredWallets.has(walletKey)) {
      // 渲染钱包选项到弹窗
      renderWalletOption(walletInfo);
      registeredWallets.add(walletKey);
    }
  }
  

• 确保检测逻辑只执行一次
  如果使用React这类前端框架，检查是否因组件重渲染导致检测函数重复调用。比如用空依赖数组的useEffect确保检测只执行一次：

  useEffect(() => {
    // 执行钱包检测逻辑
    checkAvailableWallets();
  }, []); // 空依赖确保只在组件挂载时执行一次
  

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