This page documents
@whop/elements@1.0.0-beta.3 and @whop/elements-react@1.0.0-beta.3.Mounts inside
Wallet. accountId and accessToken come from there. Pass props and callbacks through the create options or React props. Keep the created handle, or React ref, to call refresh() and setDateRange().Example data. Open the Playground.
Props
string
Only show activity for this currency. Without it, activity from every currency is shown.
string
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.number
Show at most this many rows and stop paging, for a preview of recent activity. The list gains a See all activity control that reports
seeAllRequested instead of navigating.boolean
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.("platform_balance_transfer_outgoing" | "payment_gross" | "withdrawal" | "topup" | "payment_dispute" | "payment_revshare" | "card_spend_authorization" | "airdrop" | "onchain_swap_target" | "payment_gross_reversal" | "payment_refund" | "payment_refund_reversal" | "payment_dispute_reversal" | "payment_dispute_adjustment" | "dispute_hold_adjustment" | "topup_reversal" | "platform_balance_payment" | "platform_balance_payment_refund" | "platform_balance_transfer_incoming" | "internal_balance_transfer_incoming" | "internal_balance_transfer_outgoing" | "onchain_wallet_transfer_incoming" | "onchain_wallet_transfer_outgoing" | "withdrawal_reversal" | "withdrawal_clawback" | "withdrawal_clawback_reversal" | "payment_revshare_refund" | "payment_revshare_reversal" | "payment_referral" | "payment_referral_reversal" | "application_fee_payout" | "airdrop_reversal" | "airdrop_link_created" | "airdrop_link_returned" | "card_spend_authorization_void" | "card_spend_refund" | "onchain_deposit" | "bank_transfer" | "currency_conversion_outgoing" | "currency_conversion_incoming" | "airdrop_link_redeemed" | "resolution_center_refund" | "withdrawal_reclassification" | "payment_revshare_payout" | "platform_affiliate_payment" | "platform_affiliate_payment_reversal" | "onboarding_reward" | "platform_covered_dispute" | "treasury_payin" | "passthrough_gmv" | "promo_reversal" | "misc_reversal" | "ad_spend_charge" | "ad_campaign_budget" | "ad_budget_release" | "ad_publisher_payout" | "ad_publisher_payout_received" | "affiliate_fee" | "application_fee" | "billing_percentage_fee" | "buyer_fee" | "cross_border_percentage_fee" | "dispute_alert_fee" | "fraud_prevention_fee" | "fx_percentage_fee" | "high_risk_merchant_fee" | "orchestration_percentage_fee" | "payment_dispute_fee" | "payment_processing_fixed_fee" | "payment_processing_percentage_fee" | "payout_fee" | "revshare_percentage_fee" | "sales_tax_fee" | "sales_tax_remittance" | "sales_tax_remittance_reversal" | "stripe_domestic_processing_fee" | "stripe_international_processing_fee" | "three_ds_fixed_fee" | "whop_processing_fee")[]
Activity types selected when the element mounts or its account changes. The viewer can change them with the built-in filters. Defaults to
[].boolean
Hide the filter chips, for a compact list that the viewer does not filter. Defaults to
false.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)onSeeAllRequested
The viewer pressed See all activity on a maxItems list. Open your own full activity screen; the element never navigates.Signature: ((payload: Record<string, never>) => void)onDateRangeChanged
The viewer changed the date filter through the filter chips 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 bycreate, 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<void>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<void>mount
Mounts the element in target and starts loading. React components mount themselves.Signature: (target: string | HTMLElement) => voiddestroy
Removes the element and releases its frame and subscriptions. You can call it more than once. React removes the element automatically.Signature: () => voidupdate
Merges new props into the mounted element. In React, change the component props instead.Signature: (options: Partial<ActivityElementProps>) => voidStyling
Style these parts throughappearance.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.appearance to <Wallet>. Set it globally with WhopElements({ appearance }).