i have cloned the solana dapp-scaffold repo and i am trying to display the pubkey of the user connected with an alternative way, using web3js. When i try to do it the pubkey is initially set to null and then changed to the pubkey of the user however the change isn't displayed in the frontend

// Next, React
import { FC, useEffect, useState } from 'react';
import Link from 'next/link';

// Wallet
import { useWallet, useConnection } from '@solana/wallet-adapter-react';

// Components
import { RequestAirdrop } from '../../components/RequestAirdrop';
import pkg from '../../../package.json';

// Store
import useUserSOLBalanceStore from '../../stores/useUserSOLBalanceStore';

import * as solanaWeb3 from '@solana/web3.js';

export const HomeView: FC = ({ }) => {

  const wallet = useWallet();
  const { connection } = useConnection();
  console.log("solanaweb3: ",solanaWeb3)

  const balance = useUserSOLBalanceStore((s) => s.balance)
  const { getUserSOLBalance } = useUserSOLBalanceStore()

  let pub;

  useEffect(() => {
    if (wallet.publicKey) {
      getUserSOLBalance(wallet.publicKey, connection)
      pub = new solanaWeb3.PublicKey(wallet.publicKey).toString()
  }, [wallet.publicKey, connection, getUserSOLBalance])

  return (

    <div className="md:hero mx-auto p-4">
      <div className="md:hero-content flex flex-col">
        <h1 className="text-center text-5xl md:pl-12 font-bold text-transparent bg-clip-text bg-gradient-to-tr from-[#9945FF] to-[#14F195]">
          Scaffold Lite <span className='text-sm font-normal align-top text-slate-700'>v{pkg.version}</span>
        <h4 className="md:w-full text-center text-slate-300 my-2">
          <p>Simply the fastest way to get started.</p>
          Next.js, tailwind, wallet, web3.js, and more.
        <div className="max-w-md mx-auto mockup-code bg-primary p-6 my-2">
          <pre data-prefix=">">
            <code className="truncate">Start building on Solana  </code>

        <h4 className="md:w-full text-center text-slate-300 my-2">
          {pub && (<h1>pubKey: {pub}</h1>)}
          {pub ? (<h1>{pub}</h1>) : (<h1>null</h1>)}
          <div className="text-center">
          <RequestAirdrop />
          {/* {wallet.publicKey && <p>Public Key: {wallet.publicKey.toBase58()}</p>} */}
          {wallet && <p>SOL Balance: {(balance || 0).toLocaleString()}</p>}

my problem is that pub is always null

1 Answer 1


Since pub is a local variable with a default value undefined, even if it's value is changed by

pub = new solanaWeb3.PublicKey(wallet.publicKey).toString(); 

React is not able to track it's value changes and avoid a rerender. Without a rerender it's value is undefined in React context and because of that you see the null

{pub ? (<h1>{pub}</h1>) : (<h1>null</h1>)} // pub is always undefined in React context 

To fix this, change it to a state.

const [pub, setPub] = useState(); 
and later
setPub(new solanaWeb3.PublicKey(wallet.publicKey).toString()); 

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.