solana wallet(phantom) 在使用 reactjs 刷新网站后连接答案

【问题标题】：solana wallet(phantom) connect after refreshing website using reactjssolana wallet(phantom) 在使用 reactjs 刷新网站后连接
【发布时间】：2023-01-10 09:31:04
【问题描述】：

我正在研究 web 3，现在轮到 Solana 了。

我的问题是刷新网站后钱包断开连接。

我指的是https://docs.phantom.app/integrating/extension-and-in-app-browser-web-apps/establishing-a-connection#eagerly-connecting。它不起作用。

// getProvider
export const getProvider = () => {
  if('phantom' in window) {
    const provider = window.phantom.solana;
    if(provider?.isPhantom) return provider;
  }
}

// useEffect
  useEffect(() => {
    const connectToWallet = async () =>{
      const provider = getProvider();
      provider?.connect({onlyIfTrusted: true})
      .then( res => {
        console.log(res);
      })
      .catch( err => {
        return err;
      });
    }
    connectToWallet();
  },[]);

window.phantom.solana返回未定义

我测试window.ethereum返回正确值

【问题讨论】：

标签： reactjs web3js solana

【解决方案1】：

您必须在窗口中搜索“solana”。尝试这个

export const getSolanaProvider = (): PhantomProvider | undefined => {
  if ('solana' in window) {
    const anyWindow: any = window
    const provider = anyWindow.solana
    if (provider.isPhantom) {
      return provider
    }
  }
  return undefined
  // window.open("https://phantom.app/", "_blank");
}

祝你在一个应用程序中结合 metamask 和 phantom 好运。我目前也在努力让一切正常进行，这很痛苦。

至于提神。我设法使其工作的方式如下：

const useEagerConnect = () => {
// for metamask or walletConnect login
  const { login } = useAuth()
// get solana's Provider
  const provider = getSolanaProvider()

  useEffect( () => {

      //Handle Phantom eager login. Will either automatically connect to Phantom, or do nothing.
      if  (provider) {
        provider.connect({ onlyIfTrusted: true }).then( ({ publicKey }) => {
          // Handle successful eager connection
        }).catch(() => {
          // Handle connection failure as usual
        });
      }

 // handle MetaMask or WalletConnect eager login flow
      login(connectorId)
    }
  }, [login, provider])
}

在您的顶级 App.tsx 组件中，您可以这样称呼它：

const App: React.FC = () => {
  useEagerConnect()
  
  return (
    <Router history={history}>
      <ResetCSS />
      <GlobalStyle />

【讨论】：

【解决方案2】：

在useEffect 内注册load 事件：

useEffect(() => {
    const connectToWallet = async () => {
      const provider = getProvider();
      provider
        ?.connect({ onlyIfTrusted: true })
        .then((res) => {
          console.log(res);
        })
        .catch((err) => {
          return err;
        });
    };
    window.addEventListener("load", connectToWallet);
    return () => {
      window.removeEventListener("load", connectToWallet);
};
}, []);

【讨论】：