Skip to main content
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.
In development — not yet part of a stable release. A sub-controller in the Wallet group: mint it with wallet.create('balances', { … }) (vanilla) or render <Balances> inside <Wallet> (React — mount mints, unmount destroys), then mount its elements off the minted handle. destroy() tears it down — a later create('balances') boots fresh.

​
Preview

A live, interactive demo of this sub-controller’s default arrangement with sample data:

​
Usage

​
Options

Pass these to wallet.create('balances', { … }) — or as props on <Balances> in React. Parent-injected props never appear here. Balances takes no options.

​
Events

Pass a callback in the create options / React props.

​
onLoadingChange

Fired when the grouped loading state changes — true while any mounted element is still loading. Signature: ((loading: boolean) => void)

​
Methods

Call these on the minted sub handle — the return of wallet.create('balances', { … }).

​
update

Live-update the sub-controller’s consumer props and on<Event> callbacks. Signature: (options: Partial<BalancesSubOptions>) => void

​
destroy

Tear the sub-controller down: its mounted elements are destroyed, its runtime state is discarded, and its exclusive slot is freed — a later create("balances") boots fresh. Signature: () => void

​
Elements

The elements this sub-controller mounts — each has its own page:

ListElement

Lists what an account holds, valued in dollars, richest first — or, for a user with includeOwnedAccounts, their personal balance followed by each owned account the backend returns. Needs the handle’s accessToken. Rows emit balanceSelected in holdings mode and accountSelected in owned-account mode.

BalanceElement

What an account is worth, how far that has moved over the window, and the line it moved along — one read, drawn as one block: the figure on top, the line under it, the window picker under that. Read the line by hovering it, or drag across it to measure a stretch. Hide either half with hideTotal / hideChart.