RainbowKit的PhantomWallet连接器在移动端无法正常显示

问题根源 #

iOS版Chrome受Apple WebKit沙盒机制限制，无法与Phantom这类原生钱包App完成交互，RainbowKit会自动隐藏当前环境不支持的钱包连接器，所以你看不到Phantom选项。

解决步骤 #

1. 强制显示Phantom钱包选项（需搭配提示） #

你可以手动修改Phantom连接器的环境检测逻辑，让它在iOS Chrome中显示，但要注意用户点击后无法直接跳转App，必须配合提示引导用户换浏览器。修改代码如下：

import { connectorsForWallets } from '@rainbow-me/rainbowkit';
import { phantomWallet } from '@rainbow-me/rainbowkit/wallets';
import { createConfig, http } from '@wagmi/core';
import { arbitrumSepolia } from 'viem/chains';
import { fallback } from 'viem';

// 自定义Phantom连接器，强制在iOS Chrome环境下显示
const customPhantomWallet = {
  ...phantomWallet,
  isAvailable: () => {
    const isIOS = /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream;
    const isChromeIOS = /CriOS/.test(navigator.userAgent);
    // 优先检测iOS Chrome，其他环境沿用原检测逻辑
    return isIOS && isChromeIOS ? true : phantomWallet.isAvailable();
  },
};

const connectors = connectorsForWallets(
  [
    {
      groupName: 'Recommended',
      wallets: [customPhantomWallet], // 使用自定义的连接器
    },
  ],
  {
    appName: '你的应用名称', // 替换成你的实际appName
    projectId: '你的WalletConnect ProjectID', // 替换成你的实际projectId
  }
);

const wagmiConfig = createConfig({
  connectors,
  ssr: false,
  chains: [arbitrumSepolia],
  transports: {
    [arbitrumSepolia.id]: fallback([
      http('https://sepolia-rollup.arbitrum.io/rpc'),
    ]),
  },
});

2. 添加环境提示 #

在连接按钮附近或弹窗中添加明确提示：

提示：iOS用户请使用Safari浏览器或Phantom内置浏览器打开应用，以正常连接Phantom钱包

3. 最优方案：引导用户使用兼容浏览器 #

iOS上只有以下方式能正常连接Phantom钱包：

• 直接使用Phantom App内置的浏览器打开你的应用
• 使用Safari浏览器访问应用

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