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 <BalancesBalanceElement /> inside <Balances> (React), or mint the sub and mount off it (vanilla): wallet.create('balances', { … }).create('balance', { … }) — 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
When the account opened, as an ISO timestamp.
ALL opens on this instead of on its five-year default, so an account older than that keeps its history. Defaults to "".string
Names the account in the label —
Total balance · Acme at rest, Acme balance on Jul 9 while a point is read. Unset, the label is just Total balance. Defaults to "".{ from: string; to: string; } | null
The stretch marked on the line, as ISO timestamps — set it to drive the selection yourself, or to
null to drop the one the viewer made. Echo back what rangeBrushed reports and a filter cleared elsewhere on your page clears the mark here too. Defaults to null.boolean
Drop the figure and its move, leaving the line and the picker. Defaults to
false.boolean
Drop the line, leaving the figure and the picker. Defaults to
false.number
How tall the line is drawn, in pixels. Defaults to
210.Events
Pass a callback in the create options (or React prop) to receive these.onRangeChanged
The window in view moved. Mirror it if another surface of yours reads the same period.
Signature: ((payload: { range: "1D" | "1W" | "1M" | "1Y" | "ALL"; }) => void)
onRangeBrushed
The viewer dragged across the line to select a stretch of it, or cleared the selection (null). ISO timestamps plus the window they were read in — filter your own surfaces (an activity list, a table) to the same stretch, at the same granularity.
Signature: ((payload: { from: string; to: string; range: "1D" | "1W" | "1M" | "1Y" | "ALL"; } | null) => 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<BalancesBalanceElementProps>) => 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 }).