Loading page…
Loading page…
The wallet home's centerpiece. HarborWalletCard fills whatever rail it is given and reads as a raised surface above the canvas. The account switcher unfolds as a listbox, search reveals inline, and AmountDisplay shares the global privacy behavior.
w-full with no cap: the card takes the container width. bg-surface-raised plus shadow-raise separates it from the canvas without decorative artwork. Built-in actions are Send primary, Receive secondary, and Swap outline.
<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-successAll data from the wallet fixtures. Click the account row to unfold the switcher; the eye masks the balance and the change pill together.
Account data, amount, address, movement, utilities, and actions are independent. Sparse cards do not reserve blank rows.
<HarborWalletCard accounts={[account]} showActions={false} showUtilities={false} />
<HarborWalletCard amount={amount} symbol="BTC" showActions={false} />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.
<HarborWalletCard … defaultBalanceHidden onBalanceHiddenChange={(hidden) => track(hidden)} />--ch-fg-muted--ch-fg-faintThe eye toggle flips the mask live; state can also be controlled via balanceHidden.
<div className="w-[340px]"><HarborWalletCard … /></div>--ch-surface--ch-borderSame width as the portfolio surface's left column — full bleed to the frame.
actions replaces the built-in row wholesale — any ReactNode, here a two-button treasury pairing.
<HarborWalletCard … actions={<><Button variant="primary" size="sm">Disburse</Button><Button variant="outline" size="sm">Reconcile</Button></>} />--ch-primary--ch-border-strongThe frame, balance, and header stay; only the action row is swapped.
The card under dark, light, and Harbor Mode — raised surface, content, and semantic actions remap with inherited tokens.
<HarborWalletCard accounts={accounts} amount={btcTotal} symbol="BTC" fiat={fiatTotal} change={change} hasNotifications />--ch-surface--ch-accent--ch-primary-muted--ch-success