```tsx React theme={null} import { WhopElements, Wallet, ActivityElement } from "@whop/elements-react"; import { loadWhop } from "@whop/elements"; function Example() { return ( console.log(e)} onActivityHovered={(e) => console.log(e)} onDateRangeChanged={(e) => console.log(e)} /> ); } ``` ```html Vanilla theme={null} ```

Example data. [Open the Playground](/elements/beta/wallet/overview#playground).

## Props Only show activity for this currency. Without it, activity from every currency is shown. A scoped token for the read. An account needs `company:balance:read`, and a user needs `user:balance:read`. Mint it on your server with `POST /api/v1/access_tokens`. Without it the read uses the viewer's own session, which only works same-origin. When off, card transaction rows render inert (no click, no hover) instead of firing `activitySelected`. Use it when you know the viewer isn't allowed to see those details. Defaults to `true`. ## Events Pass callbacks in the create options or React props. ### `onActivitySelected` A row was clicked. Open your own detail view or route for it; the element never navigates. **Signature:** `((payload: { activity: LedgerActivity; }) => void)` ### `onActivityHovered` The pointer entered a row, or left one (`null`). Point something of your own at the same moment, like marking the row on a balance chart. **Signature:** `((payload: { activity: LedgerActivity; } | null) => void)` ### `onDateRangeChanged` The viewer changed the date filter through the filter row rather than through `setDateRange`. Clear any range selection of your own, like a chart brush, that no longer matches. **Signature:** `((payload: { dateRange: { start: string; end: string; } | null; }) => void)` ### `onLoaderStart` Runs after the loading skeleton first paints and before `onReady`. **Signature:** `(() => void)` ### `onReady` Runs after the element's first complete paint. **Signature:** `(() => void)` ### `onError` Runs when the element fails to load or crashes. The fallback remains visible. Use `code` for programmatic handling. `sourceKey` identifies a failed host-state source. **Signature:** `((e: { message: string; code?: string | undefined; sourceKey?: string | undefined; }) => void)` ## Methods Call these on the handle returned by `create`, or through a React `ref`. ### `refresh` Re-fetch the account's activity from the first page. Call it after a mutation made elsewhere (a deposit, a send) so the list reflects it without waiting for the cache to expire. **Signature:** `() => Promise` ### `setDateRange` Set the date filter from outside the element, for example wiring a chart brush selection into the list. Pass `null` to clear it. **Signature:** `(input: ActivityDateRangeOverride | null) => Promise` ### `mount` Mounts the element in `target` and starts loading. React components mount themselves. **Signature:** `(target: string | HTMLElement) => void` ### `destroy` Removes the element and releases its frame and subscriptions. You can call it more than once. React removes the element automatically. **Signature:** `() => void` ### `update` Merges new props into the mounted element. In React, change the component props instead. **Signature:** `(options: Partial) => void` ## Styling Style these parts through `appearance.classes`. Use camel case or kebab case for property names and include units. Page stylesheets can't reach the element's frame. The framework validates each declaration before injecting it. | Class | Targets | | ----------------------- | ---------------------------------------------------------------- | | `.whop-ActivityRow` | One ledger activity row — its icon, title, timestamp, and amount | | `.whop-ActivitySurface` | The activity feed — title, filters, and up to every fetched row | ```ts theme={null} const wallet = whop.wallet.create({ appearance: { classes: { 'whop-ActivityRow': { borderRadius: '8px', fontWeight: '600' }, 'whop-ActivitySurface': { borderRadius: '8px', fontWeight: '600' } } } }); wallet.update({ appearance: { classes: { 'whop-ActivityRow': { fontWeight: '700' } } } }); ``` In React, pass `appearance` to ``. Set it globally with `WhopElements({ appearance })`. Mounts anywhere in your view hierarchy. Takes an `accountId` and loads its own data; pass a closure too and you get the row the viewer tapped.

```swift Swift theme={null} import SwiftUI import WhopElements // WhopSDK.configure(tokenProvider:) runs once at app launch. See Getting started. struct ActivityScreen: View { var body: some View { ScrollView { ActivityElement( accountId: "biz_xxxx" ) { activity in print(activity.title, activity.amount) } .padding() } } } ``` ### Parameters Whose ledger to list. Use an account ID prefixed `biz_` or a user ID prefixed `user_`. Both work directly because the feed reads the ID without resolving a ledger first. Shows the built-in "Activity" heading. Defaults to `true`. Turn it off when your screen already has one. Called with the row the viewer tapped. The view never navigates, so route to your own detail screen. ### `WalletActivity` What a selection hands back: * `id: String`: stable per row * `title: String` / `subtitle: String`: the row's two lines * `amount: Decimal`: signed, negative for money out * `currencyCode: String` * `postedAt: Date` * `isIncoming: Bool` ### States Shows a skeleton list while the first page loads, `No activity found` when the ledger has no movements, and the failure message with a `Try again` button when the read fails. If a later page fails, the rows already loaded stay on screen and a `Try again` appears at the bottom. ### Good to know * **Give it a scroll container.** The feed is a `LazyVStack` and pages as its last row appears, so outside a `ScrollView` it renders page one and never loads another. * Takes `biz_…` and `user_…` tags directly, so unlike the other wallet views it never has to resolve a ledger first. Call `WhopSDK.configure(tokenProvider:)` once at launch. Views wait for the token. See [Getting started](/elements/beta/getting-started). Apply a theme with `.whopTheme(_:)`.