Balances

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

function Example() {
  return (
    <WhopElements elements={loadWhop()}>
      <Wallet /* options */>
        <Balances>
          <BalanceElement />
          <BreakdownElement />
          <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('breakdown').mount('#wallet-balances-breakdown');
  balances.create('list').mount('#wallet-balances-list');
</script>

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