> ## Documentation Index
> Fetch the complete documentation index at: https://docs.whop.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Balances

> An account's money as two faces: the holdings list, and the balance block — the figure, the line it moved along, and the window picker. Mount either or both; the wallet handle's account reaches both, and each takes its own token (or the viewer's session same-origin).

<Info>**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.</Info>

*In development — not yet part of a stable release.*

A **sub-controller** in the [`Wallet`](/elements/upcoming/wallet/overview) 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:

<div data-whop-demo-shell style={{ position: "relative", minHeight: "480px", transition: "min-height 200ms ease" }}>
  <div data-whop-demo-skeleton style={{ position: "absolute", inset: "0", borderRadius: "12px", background: "rgba(140, 140, 140, 0.12)", pointerEvents: "none", transition: "opacity 200ms ease" }} />

  <div data-whop-demo-native="unit:balances" data-whop-elements-version="" style={{ position: "relative" }} />
</div>

## Usage

<div data-whop-usage="wallet/balances">
  <CodeGroup>
    ```tsx React theme={null}
    import { WhopElements, Wallet, Balances, ListElement, BalanceElement } from "@whop/elements-react";
    import { loadWhop } from "@whop/elements";

    function Example() {
      return (
        <WhopElements elements={loadWhop()}>
          <Wallet /* options */>
            <Balances>
              <ListElement />
              <BalanceElement />
            </Balances>
          </Wallet>
        </WhopElements>
      );
    }
    ```

    ```html Vanilla theme={null}
    <script src="https://js.whop.cloud/elements/amber/elements.js" data-whop-elements></script>
    <script type="module">
      const wallet = window.WhopElements().wallet.create({ /* options */ });
      const balances = wallet.create('balances', { /* options */ });
      balances.create('list').mount('#wallet-balances-list');
      balances.create('balance').mount('#wallet-balances-balance');
    </script>
    ```
  </CodeGroup>
</div>

## 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:

<CardGroup cols={2}>
  <Card title="ListElement" href="/elements/upcoming/wallet/balances-list">
    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.
  </Card>

  <Card title="BalanceElement" href="/elements/upcoming/wallet/balances-balance">
    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`.
  </Card>
</CardGroup>