Display SOL Balance

Fetch and display the connected wallet's SOL balance, with a refresh button.

Code

Balance.tsx

import { useWallet, useSolBalance } from '@wankmi/wankmi'
 
export function Balance() {
  const { publicKey, connected } = useWallet()
  const { data: balance, isLoading, isFetching, refetch } = useSolBalance({
    address: publicKey,
  })
 
  if (!connected) return <p>Connect your wallet to see your balance.</p>
 
  return (
    <div>
      <p>
        {isLoading
          ? 'Loading...'
          : `${balance?.toFixed(4) ?? '—'} SOL`}
      </p>
      <button onClick={() => refetch()} disabled={isFetching}>
        {isFetching ? 'Refreshing...' : 'Refresh'}
      </button>
    </div>
  )
}

Notes

useSolBalance is disabled when address is null, so it won't fire before the wallet is connected.
balance is in SOL — use .toFixed(4) or similar for clean display.
isFetching is true on background refetches, while isLoading is only true on the initial fetch. Use isFetching to show a loading indicator on refresh.

Connect a Wallet Display Token List