Skip to content

Wallet Card

The wallet home's centerpiece, rebuilt in the ColdHarbor frame language. HarborWalletCard fills whatever rail it's given — no max-width — and wears the same .ch-frame + tick marks as its sibling panels. The account switcher unfolds as a listbox, the search icon reveals an inline query field over the header, and the balance rides AmountDisplay so the eye toggle masks it with the shared privacy idiom.

Full width

w-full with no cap: the card takes the container's width, framed by .ch-frame with .ch-frame-ticks corner marks. Built-in actions are the house Buttons — Send primary, Receive secondary, Swap outline — each flex-1 so the row always fills the frame.

Default — live switcher, search, hide toggle
Balance
$177.42K1.5262BTC
+$2,838.71· 24h
<HarborWalletCard accounts={accounts} amount="1.52618916" symbol="BTC" fiat="$177,419.49" mode="fiat" change={{ value: "+$2,838.71", direction: "up" }} hasNotifications />
  • --ch-surface
  • --ch-border-strong
  • --ch-accent
  • --ch-primary
  • --ch-success

All data from the wallet fixtures. Click the account row to unfold the switcher; the eye masks the balance and the change pill together.

Privacy + narrow rail

defaultBalanceHidden starts the card masked — AmountDisplay blurs both values to dots and the change pill collapses to bullets, so nothing leaks. In a 340px rail (the portfolio layout) the card fills edge to edge instead of floating at 320px like the vendored original.

Balance hidden
Balance
Amount hidden
<HarborWalletCard … defaultBalanceHidden onBalanceHiddenChange={(hidden) => track(hidden)} />
  • --ch-fg-muted
  • --ch-fg-faint

The eye toggle flips the mask live; state can also be controlled via balanceHidden.

340px rail
Balance
$177.42K1.5262BTC
+$2,838.71· 24h
<div className="w-[340px]"><HarborWalletCard … /></div>
  • --ch-surface
  • --ch-border

Same width as the portfolio surface's left column — full bleed to the frame.

Custom actions slot

actions replaces the built-in row wholesale — any ReactNode, here a two-button treasury pairing.

actions slot
Balance
$177.42K1.5262BTC
+$2,838.71· 24h
<HarborWalletCard … actions={<><Button variant="primary" size="sm">Disburse</Button><Button variant="outline" size="sm">Reconcile</Button></>} />
  • --ch-primary
  • --ch-border-strong

The frame, balance, and header stay; only the action row is swapped.

Across themes

The card under dark, light, and Harbor Mode — the frame line, tick marks, and gold primaries re-map with the theme.

Balance
$177.42K1.5262BTC
+$2,838.71· 24h
<HarborWalletCard accounts={accounts} amount={btcTotal} symbol="BTC" fiat={fiatTotal} change={change} hasNotifications />
  • --ch-surface
  • --ch-accent
  • --ch-primary-muted
  • --ch-success