移动端Metamask连接网站时签名弹窗不显示问题求助

可能的原因及对应修复方案 #

1. 校验深度链接配置 #

Metamask移动端依赖正确的Universal Links/App Links配置来恢复会话，若配置失效会导致签名请求丢失。

• 确认网站根目录已部署assetlinks.json（Android）和apple-app-site-association（iOS）文件，配置符合Metamask要求。
• 显式配置钱包连接器的深度链接参数，确保跳转逻辑正常：

import { connectorsForWallets } from '@rainbow-me/rainbowkit';
import { metaMaskWallet } from '@rainbow-me/rainbowkit/wallets';
import { configureChains, createConfig } from 'wagmi';
import { mainnet } from 'wagmi/chains';
import { publicProvider } from 'wagmi/providers/public';

const { chains, publicClient, webSocketPublicClient } = configureChains(
  [mainnet],
  [publicProvider()]
);

const connectors = connectorsForWallets([
  {
    groupName: 'Popular',
    wallets: [
      metaMaskWallet({ 
        chains,
        appName: '你的应用名称',
        projectId: '你的WalletConnect Project ID' // 必填，否则移动端会话易丢失
      }),
    ],
  },
]);

const wagmiConfig = createConfig({
  autoConnect: true, // 开启自动连接，恢复跳转后的会话
  connectors,
  publicClient,
  webSocketPublicClient,
});

2. 调整签名请求时机 #

若签名请求在页面跳转后立即触发，可能因会话未完全恢复导致请求丢失。

• 将签名逻辑绑定到钱包连接状态的回调中，确保连接完成后再发起请求：

import { useAccount, useSignMessage } from 'wagmi';
import { useEffect } from 'react';

function AuthComponent() {
  const { address, isConnected } = useAccount();
  const { signMessage } = useSignMessage();

  useEffect(() => {
    if (isConnected && address) {
      // 延迟发起签名，确保会话完全恢复
      setTimeout(async () => {
        try {
          const signature = await signMessage({
            message: '请签名以验证钱包身份',
          });
          // 处理签名结果
          console.log('签名成功:', signature);
        } catch (error) {
          console.error('签名失败:', error);
        }
      }, 1000); // 可根据实际情况调整延迟时间
    }
  }, [isConnected, address, signMessage]);

  return <div>连接状态：{isConnected ? '已连接' : '未连接'}</div>;
}

3. 禁用页面缓存，强化会话恢复 #

移动端浏览器的页面缓存可能导致跳转返回后会话状态丢失。

• 在页面头部添加禁用缓存的meta标签：

<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="0" />

• 确保wagmiConfig中开启autoConnect: true，页面加载时自动恢复钱包连接会话。

4. 检查WalletConnect依赖兼容性 #

即使RainbowKit本身未更新，其依赖的WalletConnect底层版本可能发生变更，导致兼容性问题。

• 查看package.json中@walletconnect/*系列依赖版本，确保与RainbowKit官方推荐版本一致。可尝试重新安装依赖：

rm -rf node_modules package-lock.json
npm install

5. 重置Metamask会话权限 #

用户可能在Metamask中取消了网站的会话权限，导致签名请求被静默拒绝。

• 引导用户进入Metamask应用「设置」→「已连接的网站」，删除你的网站记录后重新连接测试。

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