solana object is not found on initial load (React)

[adilanchian]

Browser: Chrome 95.0.4638.54

Hi there!

I'm using Phantom Wallet extension in my React App. I am trying to check to see if the user has Phantom installed. If they don't send them a message saying to install it.

Currently I just check the window object directly on component mount like so:

if (window.solana) {
    // Do something with solana object
} else {
    // Tell user to download phantom wallet
}

A few things to note here:

• I have tried checking for the phantom object which is also not there
• If I hard refresh the page, the solana object is in the window object, but a quick refresh seems to not inject it again
• I have added a 300ms timeout before checking for the solana object and it seems to work everytime!

Curious if you have come across this :)? Thanks!

[adilanchian]

Quick update on this!

Since it seemed like this was just taking a bit of time to be injected into the window, I decided to actually do a check for the solana object after the window has loaded (Thanks for the suggestion Francesco 🤘)

This has seemed to do the trick for me (using React.js) -

useEffect(() => {
  window.addEventListener('load', async (event) => {
    if (window.solana) {
      // Do something with solana object
    } else {
      // Tell user to download phantom wallet
    }
  });
}, []);

Hope this helps!