Skip to main content

useSolanaWallet

Hook to retrieve and manage Solana wallet, accounts, and connection from Web3Auth.

Import​

import { useSolanaWallet } from "@web3auth/modal/react";

Usage​

import { useSolanaWallet } from "@web3auth/modal/react";

function SolanaWalletInfo() {
  const { solanaWallet, accounts, connection } = useSolanaWallet();

  return (
    <div>
      <div>Accounts: {accounts ? accounts.join(", ") : "No accounts"}</div>
      <div>SolanaWallet: {solanaWallet ? "Available" : "Not available"}</div>
      <div>Connection: {connection ? "Connected" : "Not connected"}</div>
    </div>
  );
}

Return Type​

import { type IUseSolanaWallet } from "@web3auth/modal/react";

accounts​

string[] | null

The list of Solana account addresses, or null if not available.

solanaWallet​

SolanaWallet | null

The SolanaWallet instance for interacting with the Solana blockchain, or null if not available.

connection​

Connection | null

The Solana Connection instance for making RPC calls, or null if not available.

Example: Fetching SOL Balance​

getBalance.tsx
import { useSolanaWallet } from "@web3auth/modal/react/solana";
import { LAMPORTS_PER_SOL, PublicKey } from "@solana/web3.js";
import { useEffect, useState } from "react";

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

  const fetchBalance = async () => {
    if (connection && accounts && accounts.length > 0) {
      try {
        setIsLoading(true);
        setError(null);
        const publicKey = new PublicKey(accounts[0]);
        const balance = await connection.getBalance(publicKey);
        setBalance(balance);
      } catch (err) {
        setError(err instanceof Error ? err.message : "Unknown error");
      } finally {
        setIsLoading(false);
      }
    }
  };

  useEffect(() => {
    fetchBalance();
  }, [connection, accounts]);

  return (
    <div>
      <h2>Balance</h2>
      <div>{balance !== null && `${balance / LAMPORTS_PER_SOL} SOL`}</div>
      {isLoading && <span className="loading">Loading...</span>}
      {error && <span className="error">Error: {error}</span>}
      <button onClick={fetchBalance} type="submit" className="card">
        Fetch Balance
      </button>
    </div>
  );
}