useSolanaWallet

Hook to retrieve Solana accounts, RPC client, and wallet from Web3Auth.

Import

import { useSolanaWallet } from '@web3auth/modal/react/solana'

Usage

import { useSolanaWallet } from '@web3auth/modal/react/solana'

function SolanaWalletInfo() {
  const { accounts, rpc, solanaWallet, getPrivateKey } = useSolanaWallet()

  return (
    <div>
      <div>Accounts: {accounts ? accounts.join(', ') : 'No accounts'}</div>
      <div>Solana wallet: {solanaWallet ? 'Available' : 'Not available'}</div>
      <div>RPC: {rpc ? 'Available' : 'Not available'}</div>
    </div>
  )
}

Return type

import { type IUseSolanaWallet } from '@web3auth/modal/react/solana'

accounts

string[] | null

Base58 Solana account addresses, or null if not available.

solanaWallet

Wallet | null

The wallet-standard Solana wallet instance, or null if not available.

rpc

Rpc<SolanaRpcApi> | null

The @solana/kit RPC client for making Solana RPC calls, or null if not available.

getPrivateKey

() => Promise<string>

Returns the user's private key when available (in-app adapters only).

Example: Fetching SOL balance

getBalance.tsx

import { address, createSolanaRpc } from '@solana/kit'
import { useState } from 'react'
import { useWeb3Auth } from '@web3auth/modal/react'
import { useSolanaWallet } from '@web3auth/modal/react/solana'

export function Balance() {
  const { web3Auth } = useWeb3Auth()
  const { accounts } = useSolanaWallet()
  const [balance, setBalance] = useState<string | null>(null)
  const [isLoading, setIsLoading] = useState(false)
  const [error, setError] = useState<string | null>(null)

  async function fetchBalance() {
    const rpcTarget = web3Auth?.currentChain?.rpcTarget
    if (!rpcTarget || !accounts?.length) return

    setIsLoading(true)
    setError(null)
    try {
      const rpc = createSolanaRpc(rpcTarget)
      const { value } = await rpc.getBalance(address(accounts[0])).send()
      setBalance(`${Number(value) / 1e9} SOL`)
    } catch (err) {
      setError(err instanceof Error ? err.message : 'Failed to fetch balance.')
    } finally {
      setIsLoading(false)
    }
  }

  return (
    <div>
      <h2>Balance</h2>
      {balance && <div>{balance}</div>}
      <button
        onClick={() => void fetchBalance()}
        type="button"
        className="card"
        disabled={isLoading}>
        {isLoading ? 'Fetching...' : 'Fetch Balance'}
      </button>
      {error && <div className="error">Error: {error}</div>}
    </div>
  )
}