window.solana not found in web3js

Question

I want to connect a Solana wallet (phantom or any other) to a web application through the web3js library. I've read docs for most wallets and it seems like it's just as simple as await window.solana.request({ method: "connect" }); but window.solana is undefined in my case.

When I do console.log(window) I can see the Solana value with all its corresponding keys and values.

How can I do this?

Please provide enough code so others can better understand or reproduce the problem. — Community, Jan 12 '22 at 10:47

score 1 · Answer 1 · answered Aug 03 '22 at 09:01

1

Is your website https enabled? If not then it won't work

answered Aug 03 '22 at 09:01

user2179059

326
1
9

score 0 · Answer 2 · edited Jan 02 '22 at 16:57

I've found a working code that solved my issue. I am not sure what was the issue as I'm not very experienced with js, but the following code lets me connect to phantom. I found this on StackOverflow on a similar thread, although I belive the original answer is missing some brackets. Solana : Adding Sollet / Phantom Wallet Connect to my website - Steps?

const getProvider = async () => {
    if ("solana" in window) {
      await window.solana.connect(); // opens wallet to connect to

      const provider = window.solana;
      if (provider.isPhantom) {
        console.log("Is Phantom installed?  ", provider.isPhantom);
        return provider;
      }
    } else {
      document.write('Install https://www.phantom.app/');
    }
};

window.onload = () => {

    getProvider().then(provider => {
        console.log('key', provider.publicKey.toString())
    })
    .catch(function(error){
        console.log(error)
    });

}

score 0 · Answer 3 · answered Apr 25 '22 at 23:44

With your current implementation, everytime you refresh the app, you will get pop up to connect to the wallet. Instead you add {onlyIfTrusted:true} option to connect.

const getProvider = async () => { if ("solana" in window) { await window.solana.connect({onlyIfTrusted:true}); // opens wallet to connect to

  const provider = window.solana;
  if (provider.isPhantom) {
    console.log("Is Phantom installed?  ", provider.isPhantom);
    return provider;
  }
} else {
  document.write('Install https://www.phantom.app/');
}
};

then instead of getting pop up when you reload the app, write a connection function to handle the connection when a user clicks on the button

const connectToWallet=async ()=>{
    const {solana}=window
    if(solana){
      const response=await solana.connect()
      console.log('address',response.publicKey.toString())
      
    }
  }


<button onClick={connectToWallet}  >
    Connect to Wallet
    </button>

Now once user is connected, when you reload the app, it you wont get pop up to connect to the wallet

window.solana not found in web3js

3 Answers3