solana wallet(phantom) connect after refreshing website using reactjs

user_19577482 0
Viewed 120

I am studying web 3 and now it is Solana's turn.

My problem is disconnected wallet after refreshing site.

I reffer https://docs.phantom.app/integrating/extension-and-in-app-browser-web-apps/establishing-a-connection#eagerly-connecting. It doesnt work.

// 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 return undefined

I test window.ethereum return correct value

web3js solana reactjs
1 Answers

you have to search for 'solana' in window. Try this

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");
}

And good luck with combining metamask and phantom in one app. I am currently also in the process of making everything work and it's a pain.

As for refreshing. The way I managed to make it work is the following:

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

And in you top App.tsx component you call it like so:

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