Skip to main content
The account components provide UI and hooks for displaying wallet balances, token holdings, and performing SOL transfers and airdrops.

​
Display components

​
AccountFeature

Complete account overview screen with balance, token accounts, and action buttons. 
import { AccountFeature } from "@/components/account/account-feature";

export default function AccountScreen() {
  return <AccountFeature />;
}
AccountFeature automatically handles wallet connection state and displays WalletUiButtonConnect when no wallet is connected.
  • Pull-to-refresh for updating balances
  • SOL balance display
  • Wallet address with ellipsification
  • Token accounts list
  • Quick action buttons (Airdrop, Send, Receive)

​
AccountUiBalance

Displays SOL balance for a given address.
​
address
PublicKey
required
Wallet public key to fetch balance for.
import { AccountUiBalance } from "@/components/account/account-ui-balance";
import { useWalletUi } from "@/components/solana/use-wallet-ui";

export function BalanceDisplay() {
  const { account } = useWalletUi();

  if (!account) return null;

  return <AccountUiBalance address={account.publicKey} />;
}
Balance is automatically converted from lamports to SOL and displays a loading indicator during fetch.

​
AccountUiTokenAccounts

Displays a table of all SPL token accounts owned by an address.
​
address
PublicKey
required
Wallet public key to fetch token accounts for.
import { AccountUiTokenAccounts } from "@/components/account/account-ui-token-accounts";
import { useWalletUi } from "@/components/solana/use-wallet-ui";

export function TokenList() {
  const { account } = useWalletUi();

  if (!account) return null;

  return <AccountUiTokenAccounts address={account.publicKey} />;
}
Fetches both Token Program and Token-2022 Program accounts. Shows “No token accounts found” when list is empty.

​
AccountUiTokenBalance

Displays balance for a specific token account.
​
address
PublicKey
required
Token account public key (not the mint address).
import { AccountUiTokenBalance } from "@/components/account/account-ui-token-balance";

<AccountUiTokenBalance address={tokenAccountPubkey} />
Uses getTokenAccountBalance RPC method and displays the uiAmount value with proper decimals.

​
AccountUiButtons

Row of quick action buttons for airdrop, send, and receive flows. 
import { AccountUiButtons } from "@/components/account/account-ui-buttons";

export function QuickActions() {
  return (
    <View style={{ marginTop: 16 }}>
      <AccountUiButtons />
    </View>
  );
}
Buttons navigate to /(tabs)/account/airdrop, /(tabs)/account/send, and /(tabs)/account/receive routes.

​
Feature components

​
AccountFeatureSend

Form for sending SOL to another address.
​
address
PublicKey
required
Sender’s wallet public key.
import { AccountFeatureSend } from "@/components/account/account-feature-send";
import { useWalletUi } from "@/components/solana/use-wallet-ui";

export function SendScreen() {
  const { account } = useWalletUi();

  if (!account) return null;

  return <AccountFeatureSend address={account.publicKey} />;
}
  • Amount: Numeric input for SOL amount to send
  • Destination Address: Text input for recipient public key
  • Send SOL: Submit button that triggers transaction
Uses useTransferSol hook for transaction handling and shows loading state during submission.

​
AccountFeatureAirdrop

Form for requesting devnet/testnet airdrops.
​
address
PublicKey
required
Recipient wallet public key.
import { AccountFeatureAirdrop } from "@/components/account/account-feature-airdrop";
import { useWalletUi } from "@/components/solana/use-wallet-ui";

export function AirdropScreen() {
  const { account } = useWalletUi();

  if (!account) return null;

  return <AccountFeatureAirdrop address={account.publicKey} />;
}
Airdrops only work on devnet and testnet. Mainnet-beta does not support requestAirdrop.

​
AccountFeatureReceive

Displays wallet QR code and address for receiving funds.
​
address
PublicKey
required
Wallet public key to display.
import { AccountFeatureReceive } from "@/components/account/account-feature-receive";
import { useWalletUi } from "@/components/solana/use-wallet-ui";

export function ReceiveScreen() {
  const { account } = useWalletUi();

  if (!account) return null;

  return <AccountFeatureReceive address={account.publicKey} />;
}

​
Hooks

​
useGetBalance

Fetches SOL balance for an address.
​
address
PublicKey
required
Wallet public key to query.
​
data
number
Balance in lamports. Use lamportsToSol() utility to convert.
​
isLoading
boolean
True while fetching balance.
​
isError
boolean
True if query failed.
​
error
Error
Error object if query failed.
import { useGetBalance } from "@/components/account/use-get-balance";
import { useWalletUi } from "@/components/solana/use-wallet-ui";
import { lamportsToSol } from "@/utils/lamports-to-sol";

export function BalanceChecker() {
  const { account } = useWalletUi();
  const { data, isLoading } = useGetBalance({
    address: account?.publicKey
  });

  if (isLoading) return <Text>Loading...</Text>;

  return <Text>{lamportsToSol(data)} SOL</Text>;
}

​
useGetBalanceInvalidate

Returns a function to invalidate balance query cache.
​
address
PublicKey
required
Wallet public key.
import { useGetBalanceInvalidate } from "@/components/account/use-get-balance";

const invalidateBalance = useGetBalanceInvalidate({ address });

// After transaction:
await invalidateBalance();

​
useGetTokenAccounts

Fetches all SPL token accounts for an address.
​
address
PublicKey
required
Wallet public key to query.
​
data
TokenAccount[]
Array of token account objects with pubkey, account, and mint information.
​
isLoading
boolean
True while fetching accounts.
​
isSuccess
boolean
True when query completed successfully.
​
isError
boolean
True if query failed.
import { useGetTokenAccounts } from "@/components/account/use-get-token-accounts";
import { useWalletUi } from "@/components/solana/use-wallet-ui";

export function TokenAccountList() {
  const { account } = useWalletUi();
  const { data, isLoading } = useGetTokenAccounts({
    address: account?.publicKey
  });

  if (isLoading) return <Text>Loading tokens...</Text>;

  return (
    <View>
      {data?.map((token) => (
        <Text key={token.pubkey.toString()}>
          Mint: {token.account.data.parsed.info.mint}
        </Text>
      ))}
    </View>
  );
}

​
useGetTokenAccountBalance

Fetches balance for a specific token account.
​
address
PublicKey
required
Token account public key.
​
data
TokenAmount
Object with value.amount, value.decimals, and value.uiAmount.
import { useGetTokenAccountBalance } from "@/components/account/use-get-token-account-balance";

const { data } = useGetTokenAccountBalance({ address: tokenAccountPubkey });

console.log(data?.value.uiAmount); // Human-readable balance

​
useTransferSol

Mutation hook for sending SOL transfers.
​
address
PublicKey
required
Sender’s wallet public key.
​
mutateAsync
function
Async function to execute transfer. Signature: (input: { destination: PublicKey; amount: number }) => Promise<string>
​
isPending
boolean
True while transaction is being sent.
​
isError
boolean
True if transaction failed.
​
error
Error
Error object if transaction failed.
import { useTransferSol } from "@/components/account/use-transfer-sol";
import { useWalletUi } from "@/components/solana/use-wallet-ui";
import { PublicKey } from "@solana/web3.js";

export function SendButton() {
  const { account } = useWalletUi();
  const transfer = useTransferSol({ address: account?.publicKey });

  const handleSend = async () => {
    try {
      const signature = await transfer.mutateAsync({
        destination: new PublicKey("7xKXtg2CW87d97TXJSDpbD5jBkheTqA83TZRuJosgAsU"),
        amount: 0.1 // SOL
      });
      console.log("Transaction:", signature);
    } catch (error) {
      console.error("Failed:", error);
    }
  };

  return (
    <Button
      onPress={handleSend}
      disabled={transfer.isPending}
    >
      {transfer.isPending ? "Sending..." : "Send 0.1 SOL"}
    </Button>
  );
}
Automatically invalidates balance cache on success using useGetBalanceInvalidate.

​
useRequestAirdrop

Mutation hook for requesting testnet/devnet airdrops.
​
address
PublicKey
required
Recipient wallet public key.
​
mutateAsync
function
Async function to request airdrop. Signature: (amount?: number) => Promise<string>. Amount defaults to 1 SOL.
​
isPending
boolean
True while airdrop is processing.
​
isError
boolean
True if airdrop failed.
import { useRequestAirdrop } from "@/components/account/use-request-airdrop";
import { useWalletUi } from "@/components/solana/use-wallet-ui";

export function AirdropButton() {
  const { account } = useWalletUi();
  const airdrop = useRequestAirdrop({ address: account?.publicKey });

  const handleAirdrop = async () => {
    try {
      const signature = await airdrop.mutateAsync(2); // 2 SOL
      console.log("Airdrop:", signature);
    } catch (error) {
      console.error("Airdrop failed:", error);
    }
  };

  return (
    <Button onPress={handleAirdrop} disabled={airdrop.isPending}>
      {airdrop.isPending ? "Requesting..." : "Get 2 SOL"}
    </Button>
  );
}
Airdrop requests are rate-limited on devnet. If you encounter errors, wait a few minutes before retrying.

​
Utility functions

​
createTransaction

Creates a SOL transfer transaction with proper recent blockhash and fee payer.
​
publicKey
PublicKey
required
Sender’s public key.
​
destination
PublicKey
required
Recipient’s public key.
​
amount
number
required
Amount of SOL to transfer.
​
connection
Connection
required
Solana connection instance.
import { createTransaction } from "@/components/account/create-transaction";
import { useConnection } from "@/components/solana/solana-provider";

const connection = useConnection();

const { transaction, latestBlockhash, minContextSlot } = await createTransaction({
  publicKey: senderPubkey,
  destination: recipientPubkey,
  amount: 0.5,
  connection
});

​
Type definitions

interface TokenAccount {
  pubkey: PublicKey;
  account: {
    data: {
      parsed: {
        info: {
          mint: string;
          owner: string;
          tokenAmount: {
            amount: string;
            decimals: number;
            uiAmount: number;
          };
        };
      };
    };
  };
}

​
Complete example

import { AccountFeature } from "@/components/account/account-feature";
import { AppPage } from "@/components/app-page";

export default function AccountScreen() {
  return (
    <AppPage>
      <AccountFeature />
    </AppPage>
  );
}

Wallet components

Connection and wallet UI components

Solana provider

Connection context and hooks

Build docs developers (and LLMs) love

Get started for freeTalk to us