使用@metamask/sdk-react-ui，中断应用商店下载后连接按钮失效求助

问题原因 #

未安装MetaMask的用户点击按钮触发下载流程后，MetaMask SDK的内部状态被卡住，ready状态虽然保持为true，但SDK已不再响应后续的连接触发请求，导致按钮无交互能力。

解决方案 #

方案1：利用SDK内置的reset方法重置状态 #

从useSDK中获取reset方法，在按钮点击时主动重置SDK内部状态，确保每次点击都能重新触发MetaMask检测流程：

import { useSDK } from '@metamask/sdk-react-ui';
import Button from '你的Button组件路径';

export default function ConnectWallet() {
  const { ready, connected, account, reset } = useSDK();

  return (
    <>
      {ready ? (
        <MetaMaskButton
          text="Connect Metamask"
          removeDefaultStyles
          icon="no-icon"
          textStyle={{ color: "black" }}
          onClick={() => {
            // 未连接时重置状态，避免流程中断后状态卡住
            if (!connected) reset();
          }}
        />
      ) : (
        <Button radius={2} onClick={() => reset()}>
          Connect Metamask
        </Button>
      )}
    </>
  );
}

方案2：自定义连接逻辑（更灵活） #

放弃使用MetaMaskButton的内置逻辑，手动封装连接流程，完全控制状态重置和连接触发：

import { useSDK } from '@metamask/sdk-react-ui';
import Button from '你的Button组件路径';

export default function ConnectWallet() {
  const { connected, account, reset, connect } = useSDK();

  const handleConnect = async () => {
    if (connected) return;
    
    // 先重置状态，确保检测流程从头开始
    reset();
    try {
      await connect();
    } catch (error) {
      console.error('连接流程中断:', error);
      // 失败后再次重置状态，保证按钮可再次点击
      reset();
    }
  };

  return (
    <Button 
      radius={2} 
      onClick={handleConnect}
      disabled={connected}
    >
      {connected ? `Connected: ${account?.slice(0, 6)}...` : "Connect Metamask"}
    </Button>
  );
}

方案3：监听页面焦点自动重置 #

添加页面焦点监听，当用户从应用商店标签页返回时，自动重置SDK状态：

import { useSDK } from '@metamask/sdk-react-ui';
import { useEffect } from 'react';
import Button from '你的Button组件路径';

export default function ConnectWallet() {
  const { ready, connected, account, reset } = useSDK();

  useEffect(() => {
    const handlePageFocus = () => {
      // 未连接时重置状态
      if (!connected) reset();
    };

    window.addEventListener('focus', handlePageFocus);
    return () => window.removeEventListener('focus', handlePageFocus);
  }, [connected, reset]);

  return (
    <>
      {ready ? (
        <MetaMaskButton
          text="Connect Metamask"
          removeDefaultStyles
          icon="no-icon"
          textStyle={{ color: "black" }}
        />
      ) : (
        <Button radius={2}>Connect Metamask</Button>
      )}
    </>
  );
}

额外注意事项 #

• 确保使用最新版本的@metamask/sdk-react-ui，旧版本可能存在状态管理的bug；
• reset方法是MetaMask SDK提供的官方API，用于重置SDK内部的检测状态和连接状态。

内容的提问来源于stack exchange，提问作者Rostislav Martinyuk