Upcoming — generated from the latest merged element source; documents unreleased development. Use the channel picker at the top of the sidebar for the docs of a published release.
Balances sub-controller in the Wallet group. Render <ListElement /> inside <Balances> (React), or mint the sub and mount off it (vanilla): wallet.create('balances', { … }).create('list', { … }) — consumer props and on<Event> callbacks both go in the create options / JSX props.
Preview
A live, interactive demo of this element with sample data:Usage
Props
string
A scoped token for the privileged read — an account needs
company:balance:read; a user’s holdings or owned-account list needs user:balance:read. Mint it on your server with POST /v1/access_tokens. Omitted, the read carries the viewer’s own session, which only answers same-origin.boolean
Lead each row with the currency it is held in (€4.20, 0.00000009 cbBTC) and put the dollar value underneath. Off by default, so every row reads against one unit. Defaults to
false.boolean
Keep the dollar value under a holding shown in its own currency. Only bites alongside
showSourceCurrency. Defaults to true.boolean
For a user’s
user_… account, list their personal balance followed by every owned account the backend returns instead of listing the holdings inside their personal account. Ignored for an account. Defaults to false.boolean
Keep the personal row in
includeOwnedAccounts mode. Turn it off when the host has no personal account to open. Defaults to true.Events
Pass a callback in the create options (or React prop) to receive these.onBalanceSelected
A holding row was clicked outside includeOwnedAccounts mode. key is usd for the aggregated dollar row, otherwise the holding symbol (cbBTC, EUR); kind says which of the three it is, so a host routes without classifying symbols itself. The element never navigates.
Signature: ((payload: { key: string; kind: "usd" | "cash" | "asset"; }) => void)
onAccountSelected
An account row was clicked in includeOwnedAccounts mode. accountId is the personal user_… tag or an owned biz_… tag, and kind lets the host route without inspecting it. The element never navigates.
Signature: ((payload: { accountId: string; kind: "business" | "personal"; }) => void)
onLoaderStart
Fired the moment the element’s own loading skeleton has painted inside its frame — the earliest point a consumer-managed loading state can hand off without ever exposing a blank. Always precedes onReady; most consumers only need onReady.
Signature: (() => void)
onReady
Fired once the element has booted and painted its first complete frame.
Signature: (() => void)
onError
Fired when the element fails to load or crashes; the element shows its own error fallback. message is human-readable; framework refusals also carry code (e.g. HOST_SOURCE_FAILED, with sourceKey naming the failed hostState key) so hosts can switch on codes, never message text.
Signature: ((e: { message: string; code?: string | undefined; sourceKey?: string | undefined; }) => void)
Methods
Call these on the element handle — the return ofcreate (vanilla) or the component ref (React).
mount
Place the element on the page: appends its container to target (a CSS selector or an element) and starts loading. Nothing renders until this is called. React consumers never call it — the component mounts itself.
Signature: (target: string | HTMLElement) => void
destroy
Remove the element from the page and release its frame and subscriptions. Safe to call more than once. React consumers never call it — unmounting the component does it.
Signature: () => void
update
Change this element’s consumer props after mount — it re-renders with the merged props. React consumers never call it — updating the JSX props does the same.
Signature: (options: Partial<ListElementProps>) => void
Styling
Each part below is a stable class name — safe to depend on. Restyle a part by mapping its class to a style declaration object underappearance.classes (properties camelCase or kebab-case, values as strings with units — the same shape as React’s style prop). The element renders in its own frame, so page stylesheets can’t reach it: these declarations are sanitized against a safe-property allowlist and injected inside the frame for you.
appearance prop on <Wallet>; appearance also applies globally at WhopElements({ appearance }).