> ## 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
> Three views of an account's money. The balance view shows the total, a chart of how it changed, and a picker for the time range. The list view shows the holdings that make up that total, valued in dollars. The breakdown view splits one currency into available, pending, reserve, and negative amounts without money-movement controls. When `openHoldingOnSelect` is on, a list row replaces this unit's canvas — the chart and the list — with that holding's balance page instead of only reporting the click.
This page documents `@whop/elements@1.0.0-beta.3` and `@whop/elements-react@1.0.0-beta.3`.
*Pre-release, not yet part of a stable release.*
Mounts inside [`Wallet`](/elements/beta/wallet/overview). Create it to get a handle, then mount its elements on that handle. Call `destroy()` to remove the sub-controller. Create it again to get a fresh handle.
## Preview
A live, interactive demo of this sub-controller's default arrangement with example data:
Mounts anywhere in your view hierarchy. [`BalanceElement`](/elements/beta/wallet/balances-balance#swift) and [`ListElement`](/elements/beta/wallet/balances-list#swift) are independent, so use one alone or both on one screen. Each takes an `accountId` and loads its own data.
## Preview
Running on an iPhone, in the example app:
```tsx React theme={null}
import { WhopElements, Wallet, Balances, BalanceElement, BreakdownElement, ListElement } from "@whop/elements-react";
import { loadWhop } from "@whop/elements";
function Example() {
return (
);
}
```
```html JavaScript theme={null}
```
```swift Swift theme={null}
import SwiftUI
import WhopElements
// WhopSDK.configure(tokenProvider:) runs once at app launch. See Getting started.
struct WalletScreen: View {
let account = "biz_xxxx"
var body: some View {
ScrollView {
VStack(spacing: 24) {
BalanceElement(accountId: account)
ListElement(accountId: account)
}
.padding()
}
}
}
```
## Options
Pass these to `wallet.create('balances', { … })`, or as props on `` in React. Parent-injected props never appear here.
A scoped token for balance breakdown and settlement reads. An account needs `company:balance:read`. Omitted, the viewer's same-origin session is used.
Show this unit's holding balance page in place of the chart and list when a row is clicked. Off by default so a host that routes on `balanceSelected` is not covered by a second screen. Defaults to `false`.
## Methods
Call these on the sub handle from `wallet.create('balances', { … })`.
### `update`
Merges new props and callbacks into the sub-controller.
**Signature:** `(options: Partial) => void`
### `destroy`
Destroys the sub-controller and its elements, then frees its exclusive slot. A later `create("balances")` starts fresh.
**Signature:** `() => void`
## Parameters
The account whose money the view reads. Use an account ID prefixed `biz_`. A user ID prefixed `user_` reads the viewer's own balance and needs viewer authentication (`WhopSDK.configureWithOAuth`), not an account token.
## States
Each view manages its own states, so neither blocks the other from rendering.
## Good to know
* They share no state and load independently, so you can use one alone or both as below.
* Read the detail on [`BalanceElement`](/elements/beta/wallet/balances-balance#swift) and [`ListElement`](/elements/beta/wallet/balances-list#swift); [`ActivityElement`](/elements/beta/wallet/activity#swift) lists the movements behind them.
Call `WhopSDK.configure(tokenProvider:)` once at launch. Views wait for the token. See [Getting started](/elements/beta/getting-started). Apply a theme with `.whopTheme(_:)`.
## Elements
The elements this sub-controller mounts. Each has its own page:
An account's balance and a chart of how it changed. The total and its change sit at the top, the chart below that, and the time range buttons at the bottom. The viewer can read individual points on the chart and switch the time range themselves.
One currency's total split into available, pending, reserve, and negative balances. Zero-value rows disappear, and the surface deliberately contains no money-movement buttons so the host owns those actions.
The account balance details shown by Whop's dashboard: available funds, pending settlement dates, reserve terms, and any negative balance. It opens as a 550px modal and uses the balances handle's account, currency, and credential.
The holdings behind an account's balance. Every currency and token gets its own row, showing its name and its value in dollars, largest first. Rows can report which one the viewer tapped, so you can open your own screen for it. When `openHoldingOnSelect` is on, a row click shows that holding's balance page in place of this unit's chart and list.