GitHub

Wallet Balance

PreviousNext

Display wallet balance with loading states and customizable formatting.

Documentation

No wallet connected

Balance
SOL

Installation

pnpm dlx shadcn@latest add @wallet-kit/balance

Usage

import { WalletBalance } from "@/components/wallet/balance";
 
export default function Demo() {
  return <WalletBalance />;
}

API Reference

WalletBalance

Displays the connected wallet's balance. Shows a loading skeleton when no wallet is connected or while fetching balance.

Props

PropTypeDefaultDescription
format(balance: bigint) => string-Custom formatter function for the balance. Receives the balance as bigint.
showSymbolbooleantrueWhether to display the currency symbol (e.g., "SOL").
symbolstring"SOL"The currency symbol to display.
decimalsnumber9Number of decimal places for the balance (default: 9 for Solana).
classNamestring-Additional CSS classes.

Inherits all props from div.

Behavior

  • No Wallet: Displays a loading skeleton
  • With Wallet: Shows the formatted balance with the currency symbol
  • Custom Formatting: Use the format prop to customize how the balance is displayed

Examples

Basic Usage

import { WalletBalance } from "@/components/wallet/balance";
 
export default function BalanceDisplay() {
  return (
    <div className="flex items-center gap-2">
      <WalletBalance />
    </div>
  );
}

Custom Formatting

import { WalletBalance } from "@/components/wallet/balance";
 
export default function CustomBalance() {
  return (
    <WalletBalance
      format={(balance) => {
        const sol = Number(balance) / 1e9;
        return sol.toLocaleString("en-US", {
          minimumFractionDigits: 2,
          maximumFractionDigits: 2,
        });
      }}
    />
  );
}

Without Symbol

import { WalletBalance } from "@/components/wallet/balance";
 
export default function BalanceNoSymbol() {
  return <WalletBalance showSymbol={false} />;
}
  • The component automatically handles loading states with a skeleton
  • Default formatting uses 4 decimal places for readability
  • The balance is stored as bigint to handle large numbers accurately
  • Custom formatters should handle the conversion from bigint to a displayable string
  • Currently displays a placeholder balance; implement blockchain-specific balance fetching in your application

Last updated 11/21/2025

Wallet IconContext