TokenBalance

Display token balances with icons and formatted values for BSV20, BSV21, and other token standards.

🔧

Live preview would be rendered here

Component: TokenBalance

Install component

npm

$npm install bigblocks

import { TokenBalance } from 'bigblocks';

export default function WalletTokens() {
  const tokens = [
    {
      symbol: 'MNEE',
      name: 'MNEE Token',
      balance: { confirmed: '1000', unconfirmed: '0', total: '1000' },
      icon: '🪙',
      price: { bsv: 0.001, usd: 0.05 }
    },
    {
      symbol: 'SHUA',
      name: 'SHUA Token', 
      balance: { confirmed: '500', unconfirmed: '0', total: '500' },
      icon: '💎',
      price: { bsv: 0.002, usd: 0.10 }
    }
  ];

  return (
    <TokenBalance
      tokens={tokens}
      onViewDetails={(token) => {
        router.push(`/tokens/${token.symbol}`);
      }}
      onSendToken={(token) => {
        setShowSendModal(token);
      }}
    />
  );
}