Honeycomb
npmGitHub

BalanceCard

Display Hive account balances including HIVE, HBD, and Hive Power.

Self-contained

Fetches account balances automatically via useHiveAccount hook. Shows HIVE (liquid), HBD (stablecoin), and HP (staked HIVE).

Usage

import { BalanceCard } from "@hiveio/honeycomb-react";

function WalletPage() {
  return <BalanceCard username="barddev" />;
}

Preview

Compact

1,234.567 HIVE·456.789 HBD·10,000.000 HP

Default

@barddev Wallet

HIVE1,234.567
HBD456.789
Hive Power10,000.000

Expanded

@barddev Wallet

HIVE1,234.567
HBD456.789
Hive Power
Own HP8,500.000
+ Received2,000.000
- Delegated500.000
Effective10,000.000
Savings
HIVE100.000
HBD50.000

Props

PropTypeDefault
usernamestringrequired
variant"compact" | "default" | "expanded""default"
className / classstring-

Examples

Variants

// Compact
<BalanceCard username="barddev" variant="compact" />

// Default
<BalanceCard username="barddev" />

// Expanded (with delegations and savings)
<BalanceCard username="barddev" variant="expanded" />

Custom styling

<BalanceCard
  username="barddev"
  className="max-w-md border-hive-red/50"
/>
User CardManabar