solana钱包(幻影)使用reactjs刷新网站后连接

Question

我正在学习web 3，现在轮到索拉纳了。

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

我参考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.solanareturn undefined

I测试window.ethereum返回正确值

Answer 1

您必须在window中搜索'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");
}

祝你在一个应用程序中结合元面具和幻影。我目前也在使一切工作的过程中，这是一个痛苦。

关于刷新。我设法使它工作的方法如下:

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])
}

在top app。tsx组件中你可以这样命名它:

const App: React.FC = () => {
useEagerConnect()

return (
<Router history={history}>
<ResetCSS />
<GlobalStyle />

Answer 2

InsideuseEffectregisterloadevent:

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);
};
}, []);