How to properly transfer Solana SOL using web3js via Phantom

Question

Am working with Solana Blockchain. Am trying to transfer Solana SOL via Phantom. To this effect I used the code below which was found on Stack Overflow: source link

I already have Phantom installed in Chrome. When I run the code, it displays error:

Uncaught (in promise) TypeError: Cannot read properties of null (reading 'toString')

I think its this line of code that is causing the error above

console.log("Public key of the emitter: ",provider.publicKey.toString());

Here is the Code

import * as web3 from '@solana/web3.js';
  import * as splToken from '@solana/spl-token';
  
  const getProvider = async () => {
    if ("solana" in window) {
      const provider = window.solana;
      if (provider.isPhantom) {
        console.log("Is Phantom installed?  ", provider.isPhantom);
        return provider;
      }
    } else {
      window.open("https://www.phantom.app/", "_blank");
    }
  };


  async function transferSOL() {
    // Detecing and storing the phantom wallet of the user (creator in this case)
    var provider = await getProvider();
    console.log("Public key of the emitter: ",provider.publicKey.toString());

    // Establishing connection
    var connection = new web3.Connection(
      web3.clusterApiUrl('devnet'),
    );

    // I have hardcoded my secondary wallet address here. You can take this address either from user input or your DB or wherever
    var recieverWallet = new web3.PublicKey("CkiKLEa9eSEoG6CoTSuaahsF2WqNgArnvoCSbNZjJ7BQ");

    // Airdrop some SOL to the sender's wallet, so that it can handle the txn fee
    var airdropSignature = await connection.requestAirdrop(
      provider.publicKey,
      web3.LAMPORTS_PER_SOL,
    );

    // Confirming that the airdrop went through
    await connection.confirmTransaction(airdropSignature);
    console.log("Airdropped");

    var transaction = new web3.Transaction().add(
      web3.SystemProgram.transfer({
        fromPubkey: provider.publicKey,
        toPubkey: recieverWallet,
        lamports: web3.LAMPORTS_PER_SOL //Investing 1 SOL. Remember 1 Lamport = 10^-9 SOL.
      }),
    );

    // Setting the variables for the transaction
    transaction.feePayer = await provider.publicKey;
    let blockhashObj = await connection.getRecentBlockhash();
    transaction.recentBlockhash = await blockhashObj.blockhash;

    // Transaction constructor initialized successfully
    if(transaction) {
      console.log("Txn created successfully");
    }
    
    // Request creator to sign the transaction (allow the transaction)
    let signed = await provider.signTransaction(transaction);
    // The signature is generated
    let signature = await connection.sendRawTransaction(signed.serialize());
    // Confirm whether the transaction went through or not
    await connection.confirmTransaction(signature);

    //Signature chhap diya idhar
    console.log("Signature: ", signature);
  }

Unfortunately, that example won't cover connecting to an external wallet, such as Phantom. I would recommend looking at the solana wallet adapter library to connect easily to all sorts of wallets. It contains some examples you can follow as you integrate your app: https://github.com/solana-labs/wallet-adapter/ — Jon C, Oct 13 '21 at 22:17

score 4 · Answer 1 · answered Oct 21 '21 at 06:43

You need to connect to the wallet. That part is missing

  const getProvider = async () => {
    if ("solana" in window) {

      // opens wallet to connect to
      await window.solana.connect(); 

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

score 2 · Answer 2 · edited Oct 17 '22 at 20:57

I'm not sure if this is the best solution going ahead, but yours is a problem of the persistence of the phantom wallet after the user signs in. You'll have to go for front-end heavy solution for this. One of which is:

Assuming you are using React, use context APIs to persist the data about the wallet. Here is a rough guideline on how to do that by creating a file under the context folder in your project root:

import React, { createContext, useState} from "react";

export const WalletDataContext=createContext();

export const WalletDataContextProvider=(props)=>{
    const [publicKey,setPublicKey]=useState(null);
    const [wallet,setWallet]=useState(null);
    
    return (
        <WalletDataContext.Provider
            value={{publicKey,setPublicKey,wallet,setWallet}}
        >
            {props.children}            
        </WalletDataContext.Provider>
    )
}

Create a connectWallet function, something like this:

  //import {WalletDataContext}
  //import other stuff:
  const {setPublicKey,setWallet}=useContext(WalletDataContext)
  const connectWallet = async() {
  const provider = await getProvider();
  if(provider) {
    await provider.connect();
    let publicKey = "";
    provider.on("connect", async () => {
      setWallet(provider);
      publicKey = provider.pubicKey.toString();
      setPublicKey(publicKey);
      /*
        // more things that you would like to do here
      */
    });
  }
}

Make the following changes in your transferSOL function:

async function transferSOL() {
    //Changes are only here, in the beginning
    const phantomProvider = wallet;
    if(!phantomProvider){
      //Urge the user to sign in(connect) again
    }
    const pubKey = await phantomProvider.publicKey;
    console.log("Public Key: ", pubKey); 

    // Establishing connection
    var connection = new web3.Connection(
      web3.clusterApiUrl('devnet'),
    );

    // I have hardcoded my secondary wallet address here. You can take this address either from user input or your DB or wherever
    var recieverWallet = new web3.PublicKey("CkiKLEa9eSEoG6CoTSuaahsF2WqNgArnvoCSbNZjJ7BQ");

    // Airdrop some SOL to the sender's wallet, so that it can handle the txn fee
    var airdropSignature = await connection.requestAirdrop(
      provider.publicKey,
      web3.LAMPORTS_PER_SOL,
    );

    // Confirming that the airdrop went through
    await connection.confirmTransaction(airdropSignature);
    console.log("Airdropped");

    var transaction = new web3.Transaction().add(
      web3.SystemProgram.transfer({
        fromPubkey: provider.publicKey,
        toPubkey: recieverWallet,
        lamports: web3.LAMPORTS_PER_SOL //Investing 1 SOL. Remember 1 Lamport = 10^-9 SOL.
      }),
    );

    // Setting the variables for the transaction
    transaction.feePayer = await provider.publicKey;
    let blockhashObj = await connection.getRecentBlockhash();
    transaction.recentBlockhash = await blockhashObj.blockhash;

    // Transaction constructor initialized successfully
    if(transaction) {
      console.log("Txn created successfully");
    }
    
    // Request creator to sign the transaction (allow the transaction)
    let signed = await provider.signTransaction(transaction);
    // The signature is generated
    let signature = await connection.sendRawTransaction(signed.serialize());
    // Confirm whether the transaction went through or not
    await connection.confirmTransaction(signature);

    //Signature or the txn hash
    console.log("Signature: ", signature);
  }

score 1 · Answer 3 · answered Dec 23 '22 at 13:55

I think you problem is here:

    // Request creator to sign the transaction (allow the transaction)
    let signed = await provider.signTransaction(transaction);
    // The signature is generated
    let signature = await connection.sendRawTransaction(signed.serialize());
    // Confirm whether the transaction went through or not
    await connection.confirmTransaction(signature);

You sign using provider, but you send using connection, try change this:

    const { signature } = await provider?.signAndSendTransaction(
      transaction
    );

    await connection.getSignatureStatus(signature);
    return signature;

How to properly transfer Solana SOL using web3js via Phantom

3 Answers3

Linked