Balances - Whop Docs

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.

Web
Swift

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:

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>
  );
}

<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('balance').mount('#wallet-balances-balance');
  balances.create('list').mount('#wallet-balances-list');
</script>

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

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.

Swift

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()
        }
    }
}

Parameters

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.

​Preview

​Options

​Events

​onLoadingChange

​Methods

​update

​destroy

​Parameters

​States

​Good to know

​Elements

BalanceElement

ListElement

Preview

Options

Events

`onLoadingChange`

Methods

`update`

`destroy`

Parameters

States

Good to know

Elements