Balances

Two 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.

This page documents @whop/elements@1.0.0-beta.0 and @whop/elements-react@1.0.0-beta.0.

Pre-release, not yet part of a stable release.

Mounts inside Wallet. 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 and ListElement 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:

React

import { WhopElements, Wallet, Balances, BalanceElement, ListElement } from "@whop/elements-react";
import { loadWhop } from "@whop/elements";

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

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 callbacks in the create options or React props.

onLoadingChange

Runs when the grouped loading state changes. The value is true while any mounted element is still loading.

Signature: ((loading: boolean) => void)

Methods

Call these on the sub handle from wallet.create('balances', { … }).

update

Merges new props and callbacks into the sub-controller.

Signature: (options: Partial<BalancesSubOptions>) => void

destroy

Destroys the sub-controller and its elements, then frees its exclusive slot. A later create("balances") starts fresh.

Signature: () => void

Parameters

accountId · String · required

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 and ListElement; ActivityElement lists the movements behind them.

Call WhopSDK.configure(tokenProvider:) once at launch. Views wait for the token. See Getting started. Apply a theme with .whopTheme(_:).

Elements

The elements this sub-controller mounts. Each has its own page:

BalanceElement

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.

ListElement

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.