@whop/elements 0.0.0 → 1.0.0-beta.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/wallet.d.ts ADDED
@@ -0,0 +1,1441 @@
1
+ /**
2
+ * Options for `whop.wallet.create()`: the controller's props plus its `on<Event>` callbacks. In React, these are the `<Wallet>` component's props.
3
+ * @example
4
+ * ```ts
5
+ * import { loadWhop } from "@whop/elements";
6
+ *
7
+ * const whop = (await loadWhop())({ locale: "en" });
8
+ * const wallet = whop.wallet.create({}); // options: props + on<Event> callbacks
9
+ * ```
10
+ * @see https://docs.whop.com/elements/latest/wallet/overview
11
+ */
12
+ export interface WalletOptions {
13
+ /**
14
+ * Three-letter ISO 4217 currency code for amount fields. An unknown code falls back to `usd`.
15
+ * @default "usd"
16
+ */
17
+ currency?: string;
18
+ /**
19
+ * Account or user ID whose money these surfaces read. Account IDs are prefixed `biz_`; user IDs are prefixed `user_` and can read only the viewer's own balance.
20
+ */
21
+ accountId: string;
22
+ /**
23
+ * Runs when the grouped loading state changes. The value is `true` while any mounted element is still loading.
24
+ */
25
+ onLoadingChange?: ((loading: boolean) => void);
26
+ /**
27
+ * Visual customization for this group's elements. Overrides the global `WhopElements({ appearance })`. Change it live with `update({ appearance })`.
28
+ */
29
+ appearance?: import("./_framework.js").Appearance;
30
+ /**
31
+ * Locale for this group's element UI text. Set it to one of the app's built locales to override the global configuration. Any other value falls back to the default locale.
32
+ */
33
+ locale?: import("./_framework.js").WhopElementsLocale;
34
+ }
35
+
36
+ /**
37
+ * Consumer props for the "activity" element. Set at create (or as `<ActivityElement />` JSX props), and updatable live via `update()`.
38
+ * @see https://docs.whop.com/elements/latest/wallet/activity
39
+ */
40
+ export interface ActivityElementProps {
41
+ /**
42
+ * Only show activity for this currency. Without it, activity from every currency is shown.
43
+ */
44
+ currency?: string;
45
+ /**
46
+ * 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.
47
+ */
48
+ accessToken?: string;
49
+ /**
50
+ * 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.
51
+ * @default true
52
+ */
53
+ canOpenCardTransactionDetails?: boolean;
54
+ }
55
+
56
+ /**
57
+ * The live handle for a mounted "activity" element. Returned by `create("activity")`; in React, the component's `ref`.
58
+ * @see https://docs.whop.com/elements/latest/wallet/activity
59
+ */
60
+ export interface ActivityElementHandle {
61
+ /**
62
+ * 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.
63
+ */
64
+ refresh: () => Promise<void>;
65
+ /**
66
+ * Set the date filter from outside the element, for example wiring a chart brush selection into the list. Pass `null` to clear it.
67
+ */
68
+ setDateRange: (input: ActivityDateRangeOverride | null) => Promise<void>;
69
+ /**
70
+ * Mounts the element in `target` and starts loading. React components mount themselves.
71
+ */
72
+ mount: (target: string | HTMLElement) => void;
73
+ /**
74
+ * Removes the element and releases its frame and subscriptions. You can call it more than once. React removes the element automatically.
75
+ */
76
+ destroy: () => void;
77
+ /**
78
+ * Merges new props into the mounted element. In React, change the component props instead.
79
+ */
80
+ update: (options: Partial<ActivityElementProps>) => void;
81
+ }
82
+
83
+ /**
84
+ * Options for `create("activity")`: the consumer props plus event callbacks and lifecycle hooks.
85
+ * @example
86
+ * ```ts
87
+ * const activity = wallet.create("activity", {}); // this interface: props + on<Event> callbacks
88
+ * activity.mount("#wallet-activity");
89
+ * ```
90
+ * @see https://docs.whop.com/elements/latest/wallet/activity
91
+ */
92
+ export interface ActivityElementCreateOptions {
93
+ /**
94
+ * Only show activity for this currency. Without it, activity from every currency is shown.
95
+ */
96
+ currency?: string;
97
+ /**
98
+ * 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.
99
+ */
100
+ accessToken?: string;
101
+ /**
102
+ * 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.
103
+ * @default true
104
+ */
105
+ canOpenCardTransactionDetails?: boolean;
106
+ /**
107
+ * A row was clicked. Open your own detail view or route for it; the element never navigates.
108
+ */
109
+ onActivitySelected?: ((payload: { activity: LedgerActivity; }) => void);
110
+ /**
111
+ * 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.
112
+ */
113
+ onActivityHovered?: ((payload: { activity: LedgerActivity; } | null) => void);
114
+ /**
115
+ * 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.
116
+ */
117
+ onDateRangeChanged?: ((payload: { dateRange: { start: string; end: string; } | null; }) => void);
118
+ /**
119
+ * Runs after the loading skeleton first paints and before `onReady`.
120
+ */
121
+ onLoaderStart?: (() => void);
122
+ /**
123
+ * Runs after the element's first complete paint.
124
+ */
125
+ onReady?: (() => void);
126
+ /**
127
+ * 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.
128
+ */
129
+ onError?: ((e: { message: string; code?: string | undefined; sourceKey?: string | undefined; }) => void);
130
+ }
131
+
132
+ /**
133
+ * Consumer props for the "deposit" element. Set at create (or as `<DepositElement />` JSX props), and updatable live via `update()`.
134
+ * @see https://docs.whop.com/elements/latest/wallet/deposit
135
+ */
136
+ export interface DepositElementProps {
137
+ /**
138
+ * Prefill the amount and make it read-only — for flows that already know what is owed. An amount at or below zero, or above 9,999,999, is ignored.
139
+ * @default ""
140
+ */
141
+ amount?: string;
142
+ /**
143
+ * Offer the crypto rail when the account has a deposit address.
144
+ * @default true
145
+ */
146
+ showCrypto?: boolean;
147
+ /**
148
+ * Offer the bank-transfer rail when the account has wire instructions.
149
+ * @default true
150
+ */
151
+ showBank?: boolean;
152
+ /**
153
+ * Cards you already hold for this payer, rendered as funding rows. Choosing one emits `cardDepositRequested` with the amount — the element never collects a card payment.
154
+ * @default []
155
+ */
156
+ savedCards?: DepositSavedCard[];
157
+ /**
158
+ * Add an "Add card" row that emits `addCardRequested` so you can open your own card-collection flow.
159
+ * @default false
160
+ */
161
+ allowNewCard?: boolean;
162
+ /**
163
+ * Offer a "Platform balance" row that emits `platformBalanceSelected` immediately, with no amount step.
164
+ * @default false
165
+ */
166
+ showPlatformBalance?: boolean;
167
+ /**
168
+ * Processing fees to preview under the amount when a card row is selected. `percentageFee` is in percentage POINTS (`2.9` is 2.9%); `fixedFee` and `radarFee` are major units (`0.3` is $0.30).
169
+ * @default null
170
+ */
171
+ cardFee?: DepositCardFee | null;
172
+ /**
173
+ * Preselect a rail by id (`bank`, `crypto`, `platform_balance`, or a saved card id). Continue stays disabled while that rail is not yet offered, rather than funding through another one.
174
+ * @default ""
175
+ */
176
+ preferredMethodId?: string;
177
+ /**
178
+ * Emit `bankSelected` and stay on the amount screen instead of showing the wire fields — for hosts that run their own step (a verification, an onboarding) first. Because that host owns the rail, the row is then offered even before the account has instructions to show.
179
+ * @default false
180
+ */
181
+ deferBankToHost?: boolean;
182
+ /**
183
+ * Show an "I have deposited my funds" button on the crypto screen that emits `depositConfirmed`, so you can start watching for the transfer.
184
+ * @default false
185
+ */
186
+ confirmCryptoDeposit?: boolean;
187
+ /**
188
+ * Open straight onto a rail instead of the picker. `crypto` and `bank` need no amount; their back button emits `dismissed` because there is no picker behind them.
189
+ * @default "amount"
190
+ */
191
+ initialStep?: "amount" | "bank" | "crypto";
192
+ }
193
+
194
+ /**
195
+ * The live handle for a mounted "deposit" element. Returned by `create("deposit")`; in React, the component's `ref`.
196
+ * @see https://docs.whop.com/elements/latest/wallet/deposit
197
+ */
198
+ export interface DepositElementHandle {
199
+ /**
200
+ * Move the element to a screen. `{ step: "amount" }` is how you hand control back after settling a card or platform-balance deposit on your side.
201
+ */
202
+ showStep: (input: { step: "amount" | "bank" | "crypto"; }) => Promise<void>;
203
+ /**
204
+ * Re-resolve the account's funding rails. Call it after anything on your side changes what the account can offer — finishing bank onboarding, for instance — so the new rail appears without waiting for the cache to expire.
205
+ */
206
+ refresh: () => Promise<void>;
207
+ /**
208
+ * Mounts the element in `target` and starts loading. React components mount themselves.
209
+ */
210
+ mount: (target: string | HTMLElement) => void;
211
+ /**
212
+ * Removes the element and releases its frame and subscriptions. You can call it more than once. React removes the element automatically.
213
+ */
214
+ destroy: () => void;
215
+ /**
216
+ * Merges new props into the mounted element. In React, change the component props instead.
217
+ */
218
+ update: (options: Partial<DepositElementProps>) => void;
219
+ }
220
+
221
+ /**
222
+ * Options for `create("deposit")`: the consumer props plus event callbacks and lifecycle hooks.
223
+ * @example
224
+ * ```ts
225
+ * const deposit = wallet.create("deposit", {}); // this interface: props + on<Event> callbacks
226
+ * deposit.mount("#wallet-deposit");
227
+ * ```
228
+ * @see https://docs.whop.com/elements/latest/wallet/deposit
229
+ */
230
+ export interface DepositElementCreateOptions {
231
+ /**
232
+ * Prefill the amount and make it read-only — for flows that already know what is owed. An amount at or below zero, or above 9,999,999, is ignored.
233
+ * @default ""
234
+ */
235
+ amount?: string;
236
+ /**
237
+ * Offer the crypto rail when the account has a deposit address.
238
+ * @default true
239
+ */
240
+ showCrypto?: boolean;
241
+ /**
242
+ * Offer the bank-transfer rail when the account has wire instructions.
243
+ * @default true
244
+ */
245
+ showBank?: boolean;
246
+ /**
247
+ * Cards you already hold for this payer, rendered as funding rows. Choosing one emits `cardDepositRequested` with the amount — the element never collects a card payment.
248
+ * @default []
249
+ */
250
+ savedCards?: DepositSavedCard[];
251
+ /**
252
+ * Add an "Add card" row that emits `addCardRequested` so you can open your own card-collection flow.
253
+ * @default false
254
+ */
255
+ allowNewCard?: boolean;
256
+ /**
257
+ * Offer a "Platform balance" row that emits `platformBalanceSelected` immediately, with no amount step.
258
+ * @default false
259
+ */
260
+ showPlatformBalance?: boolean;
261
+ /**
262
+ * Processing fees to preview under the amount when a card row is selected. `percentageFee` is in percentage POINTS (`2.9` is 2.9%); `fixedFee` and `radarFee` are major units (`0.3` is $0.30).
263
+ * @default null
264
+ */
265
+ cardFee?: DepositCardFee | null;
266
+ /**
267
+ * Preselect a rail by id (`bank`, `crypto`, `platform_balance`, or a saved card id). Continue stays disabled while that rail is not yet offered, rather than funding through another one.
268
+ * @default ""
269
+ */
270
+ preferredMethodId?: string;
271
+ /**
272
+ * Emit `bankSelected` and stay on the amount screen instead of showing the wire fields — for hosts that run their own step (a verification, an onboarding) first. Because that host owns the rail, the row is then offered even before the account has instructions to show.
273
+ * @default false
274
+ */
275
+ deferBankToHost?: boolean;
276
+ /**
277
+ * Show an "I have deposited my funds" button on the crypto screen that emits `depositConfirmed`, so you can start watching for the transfer.
278
+ * @default false
279
+ */
280
+ confirmCryptoDeposit?: boolean;
281
+ /**
282
+ * Open straight onto a rail instead of the picker. `crypto` and `bank` need no amount; their back button emits `dismissed` because there is no picker behind them.
283
+ * @default "amount"
284
+ */
285
+ initialStep?: "amount" | "bank" | "crypto";
286
+ /**
287
+ * The payer confirmed an amount and a rail. Fires for every rail, before any instructions render — the analytics/funnel hook.
288
+ */
289
+ onDepositInitiated?: ((payload: { method: "card" | "bank" | "crypto" | "platform_balance"; amount: number; currency: string; paymentMethodId?: string | undefined; }) => void);
290
+ /**
291
+ * A saved card was chosen. Collect the payment on your side, then call `showStep({ step: "amount" })` to return the element to the picker.
292
+ */
293
+ onCardDepositRequested?: ((payload: { amount: number; currency: string; paymentMethodId: string; }) => void);
294
+ /**
295
+ * The "Add card" row was picked — open your card-collection flow.
296
+ */
297
+ onAddCardRequested?: ((payload: Record<string, never>) => void);
298
+ /**
299
+ * The bank rail was chosen while `deferBankToHost` is set — run your step, then show the fields yourself or call `showStep({ step: "bank" })`.
300
+ */
301
+ onBankSelected?: ((payload: Record<string, never>) => void);
302
+ /**
303
+ * The platform-balance row was picked. It carries no amount — your own screen collects that.
304
+ */
305
+ onPlatformBalanceSelected?: ((payload: Record<string, never>) => void);
306
+ /**
307
+ * The payer said they sent the crypto. `since` is a unix-seconds floor to start matching incoming transfers from (it looks slightly back in time, so a transfer sent moments before the click still matches).
308
+ */
309
+ onDepositConfirmed?: ((payload: { network: string; token: string; networkLabel: string; since: number; }) => void);
310
+ /**
311
+ * The visible screen changed.
312
+ */
313
+ onStepChanged?: ((payload: { step: "amount" | "bank" | "crypto"; }) => void);
314
+ /**
315
+ * The payer backed out of a rail the element was opened directly onto — close the surface holding it.
316
+ */
317
+ onDismissed?: ((payload: Record<string, never>) => void);
318
+ /**
319
+ * Runs after the loading skeleton first paints and before `onReady`.
320
+ */
321
+ onLoaderStart?: (() => void);
322
+ /**
323
+ * Runs after the element's first complete paint.
324
+ */
325
+ onReady?: (() => void);
326
+ /**
327
+ * 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.
328
+ */
329
+ onError?: ((e: { message: string; code?: string | undefined; sourceKey?: string | undefined; }) => void);
330
+ }
331
+
332
+ /**
333
+ * The overlay handle for "deposit". Returned by `createOverlay("deposit")`; drives the modal presentation imperatively.
334
+ * @see https://docs.whop.com/elements/latest/wallet/deposit
335
+ */
336
+ export interface DepositElementOverlayHandle {
337
+ /**
338
+ * Open the overlay. The first call mounts the element. Later calls reuse it.
339
+ */
340
+ open(): void;
341
+ /**
342
+ * Close the overlay without destroying it. Keep the handle and `open()` again.
343
+ */
344
+ close(): void;
345
+ /**
346
+ * Removes the element and releases its frame and subscriptions. You can call it more than once. React removes the element automatically.
347
+ */
348
+ destroy(): void;
349
+ /**
350
+ * Merges new props into the mounted element. In React, change the component props instead.
351
+ */
352
+ update(options: Partial<DepositElementProps>): void;
353
+ }
354
+
355
+ /**
356
+ * Consumer props for the "withdraw" element. Set at create (or as `<WithdrawElement />` JSX props), and updatable live via `update()`.
357
+ * @see https://docs.whop.com/elements/latest/wallet/withdraw
358
+ */
359
+ export interface WithdrawElementProps {
360
+ /**
361
+ * Saved payout methods with quotes for the current amount.
362
+ * @default []
363
+ */
364
+ methods?: WithdrawalMethod[];
365
+ /**
366
+ * Settled balance available to standard payout methods.
367
+ * @default 0
368
+ */
369
+ availableBalance?: number;
370
+ /**
371
+ * Pending balance that may be available to instant payout methods.
372
+ * @default 0
373
+ */
374
+ pendingBalance?: number;
375
+ /**
376
+ * The payout account's ISO 3166-1 alpha-2 country.
377
+ * @default "US"
378
+ */
379
+ payoutCountry?: string;
380
+ /**
381
+ * Payout methods available to add in the selected country, including required fields.
382
+ * @default []
383
+ */
384
+ supportedMethods?: WithdrawalSupportedMethod[];
385
+ /**
386
+ * Whether supported payout methods are loading for the selected country.
387
+ * @default false
388
+ */
389
+ supportedMethodsLoading?: boolean;
390
+ /**
391
+ * Live standard and instant payout limits.
392
+ * @default {"standard":{"maxAmount":0},"instant":{"maxAmount":0}}
393
+ */
394
+ limits?: WithdrawalLimits;
395
+ /**
396
+ * Whether payout methods and limits are loading.
397
+ * @default false
398
+ */
399
+ loading?: boolean;
400
+ /**
401
+ * Whether the current amount is being repriced.
402
+ * @default false
403
+ */
404
+ quoteLoading?: boolean;
405
+ /**
406
+ * Whether a new payout method is being saved.
407
+ * @default false
408
+ */
409
+ savingMethod?: boolean;
410
+ /**
411
+ * Whether the confirmed payout is being created.
412
+ * @default false
413
+ */
414
+ submitting?: boolean;
415
+ /**
416
+ * A host-side error to show inside the current screen.
417
+ * @default ""
418
+ */
419
+ error?: string;
420
+ /**
421
+ * True when the last payout was refused because the bank could not confirm the account holder name. Shows a fix-or-confirm choice; confirming re-emits withdrawalRequested with acknowledgeBankWarning set. Set this back to false when handling each withdrawalRequested — the choice appears on the change to true, so a flag left true hides every later refusal.
422
+ * @default false
423
+ */
424
+ bankWarning?: boolean;
425
+ /**
426
+ * The most recently created method, selected when it appears in methods.
427
+ * @default ""
428
+ */
429
+ createdMethodId?: string;
430
+ /**
431
+ * Set when the payer backed out of Plaid Link or it failed to open. Unlocks manual entry on a rail that otherwise requires linking.
432
+ * @default false
433
+ */
434
+ plaidUnavailable?: boolean;
435
+ /**
436
+ * Whether a bank link is in progress — the Plaid session is open, or the linked method is being saved.
437
+ * @default false
438
+ */
439
+ linkingBank?: boolean;
440
+ }
441
+
442
+ /**
443
+ * The live handle for a mounted "withdraw" element. Returned by `create("withdraw")`; in React, the component's `ref`.
444
+ * @see https://docs.whop.com/elements/latest/wallet/withdraw
445
+ */
446
+ export interface WithdrawElementHandle {
447
+ /**
448
+ * Mounts the element in `target` and starts loading. React components mount themselves.
449
+ */
450
+ mount: (target: string | HTMLElement) => void;
451
+ /**
452
+ * Removes the element and releases its frame and subscriptions. You can call it more than once. React removes the element automatically.
453
+ */
454
+ destroy: () => void;
455
+ /**
456
+ * Merges new props into the mounted element. In React, change the component props instead.
457
+ */
458
+ update: (options: Partial<WithdrawElementProps>) => void;
459
+ }
460
+
461
+ /**
462
+ * Options for `create("withdraw")`: the consumer props plus event callbacks and lifecycle hooks.
463
+ * @example
464
+ * ```ts
465
+ * const withdraw = wallet.create("withdraw", {}); // this interface: props + on<Event> callbacks
466
+ * withdraw.mount("#wallet-withdraw");
467
+ * ```
468
+ * @see https://docs.whop.com/elements/latest/wallet/withdraw
469
+ */
470
+ export interface WithdrawElementCreateOptions {
471
+ /**
472
+ * Saved payout methods with quotes for the current amount.
473
+ * @default []
474
+ */
475
+ methods?: WithdrawalMethod[];
476
+ /**
477
+ * Settled balance available to standard payout methods.
478
+ * @default 0
479
+ */
480
+ availableBalance?: number;
481
+ /**
482
+ * Pending balance that may be available to instant payout methods.
483
+ * @default 0
484
+ */
485
+ pendingBalance?: number;
486
+ /**
487
+ * The payout account's ISO 3166-1 alpha-2 country.
488
+ * @default "US"
489
+ */
490
+ payoutCountry?: string;
491
+ /**
492
+ * Payout methods available to add in the selected country, including required fields.
493
+ * @default []
494
+ */
495
+ supportedMethods?: WithdrawalSupportedMethod[];
496
+ /**
497
+ * Whether supported payout methods are loading for the selected country.
498
+ * @default false
499
+ */
500
+ supportedMethodsLoading?: boolean;
501
+ /**
502
+ * Live standard and instant payout limits.
503
+ * @default {"standard":{"maxAmount":0},"instant":{"maxAmount":0}}
504
+ */
505
+ limits?: WithdrawalLimits;
506
+ /**
507
+ * Whether payout methods and limits are loading.
508
+ * @default false
509
+ */
510
+ loading?: boolean;
511
+ /**
512
+ * Whether the current amount is being repriced.
513
+ * @default false
514
+ */
515
+ quoteLoading?: boolean;
516
+ /**
517
+ * Whether a new payout method is being saved.
518
+ * @default false
519
+ */
520
+ savingMethod?: boolean;
521
+ /**
522
+ * Whether the confirmed payout is being created.
523
+ * @default false
524
+ */
525
+ submitting?: boolean;
526
+ /**
527
+ * A host-side error to show inside the current screen.
528
+ * @default ""
529
+ */
530
+ error?: string;
531
+ /**
532
+ * True when the last payout was refused because the bank could not confirm the account holder name. Shows a fix-or-confirm choice; confirming re-emits withdrawalRequested with acknowledgeBankWarning set. Set this back to false when handling each withdrawalRequested — the choice appears on the change to true, so a flag left true hides every later refusal.
533
+ * @default false
534
+ */
535
+ bankWarning?: boolean;
536
+ /**
537
+ * The most recently created method, selected when it appears in methods.
538
+ * @default ""
539
+ */
540
+ createdMethodId?: string;
541
+ /**
542
+ * Set when the payer backed out of Plaid Link or it failed to open. Unlocks manual entry on a rail that otherwise requires linking.
543
+ * @default false
544
+ */
545
+ plaidUnavailable?: boolean;
546
+ /**
547
+ * Whether a bank link is in progress — the Plaid session is open, or the linked method is being saved.
548
+ * @default false
549
+ */
550
+ linkingBank?: boolean;
551
+ /**
552
+ * The amount changed and should be repriced.
553
+ */
554
+ onAmountChanged?: ((payload: { amount: number; }) => void);
555
+ /**
556
+ * The add-method country changed and supported methods should be refreshed.
557
+ */
558
+ onCountryChanged?: ((payload: { country: string; }) => void);
559
+ /**
560
+ * A supported payout method was selected and its exact required fields should be loaded.
561
+ */
562
+ onSupportedMethodChanged?: ((payload: { country: string; supportedPayoutMethodId: string; destinationCurrency: string; }) => void);
563
+ /**
564
+ * The payer submitted the dynamic add-payout-method form.
565
+ */
566
+ onAddMethodRequested?: ((payload: WithdrawalCreateMethodInput) => void);
567
+ /**
568
+ * The payer chose to link their bank through Plaid instead of typing details. Open Plaid Link on receipt.
569
+ */
570
+ onPlaidLinkRequested?: ((payload: { country: string; supportedPayoutMethodId: string; destinationCurrency: string; }) => void);
571
+ /**
572
+ * The newly added payout method finished its verification step.
573
+ */
574
+ onMethodVerificationCompleted?: ((payload: Record<string, never>) => void);
575
+ /**
576
+ * The payer requested to rename a saved payout method.
577
+ */
578
+ onRenameMethodRequested?: ((payload: { methodId: string; }) => void);
579
+ /**
580
+ * The payer requested to remove a saved payout method.
581
+ */
582
+ onRemoveMethodRequested?: ((payload: { methodId: string; }) => void);
583
+ /**
584
+ * The payer confirmed the final payout details. Create the payout on receipt.
585
+ */
586
+ onWithdrawalRequested?: ((payload: WithdrawalRequest) => void);
587
+ /**
588
+ * Runs after the loading skeleton first paints and before `onReady`.
589
+ */
590
+ onLoaderStart?: (() => void);
591
+ /**
592
+ * Runs after the element's first complete paint.
593
+ */
594
+ onReady?: (() => void);
595
+ /**
596
+ * 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.
597
+ */
598
+ onError?: ((e: { message: string; code?: string | undefined; sourceKey?: string | undefined; }) => void);
599
+ }
600
+
601
+ /**
602
+ * The overlay handle for "withdraw". Returned by `createOverlay("withdraw")`; drives the modal presentation imperatively.
603
+ * @see https://docs.whop.com/elements/latest/wallet/withdraw
604
+ */
605
+ export interface WithdrawElementOverlayHandle {
606
+ /**
607
+ * Open the overlay. The first call mounts the element. Later calls reuse it.
608
+ */
609
+ open(): void;
610
+ /**
611
+ * Close the overlay without destroying it. Keep the handle and `open()` again.
612
+ */
613
+ close(): void;
614
+ /**
615
+ * Removes the element and releases its frame and subscriptions. You can call it more than once. React removes the element automatically.
616
+ */
617
+ destroy(): void;
618
+ /**
619
+ * Merges new props into the mounted element. In React, change the component props instead.
620
+ */
621
+ update(options: Partial<WithdrawElementProps>): void;
622
+ }
623
+
624
+ /**
625
+ * Consumer props for the "send" element. Set at create (or as `<SendElement />` JSX props), and updatable live via `update()`.
626
+ * @see https://docs.whop.com/elements/latest/wallet/send
627
+ */
628
+ export interface SendElementProps {
629
+ /**
630
+ * A scoped token for the privileged read/write — needs `payout:withdraw_funds` (plus `company:authorized_user:read` and `member:basic:read` for recipient search, `airdrop_link:manage` for claim links). Omitted, the read carries the viewer's own session, which only answers same-origin.
631
+ */
632
+ accessToken?: string;
633
+ /**
634
+ * Off, only the team/other-account list shows — no search box. For a host that knows the viewer lacks `member:basic:read`.
635
+ * @default true
636
+ */
637
+ canSearchRecipients?: boolean;
638
+ /**
639
+ * Off, the "Send via link" row is hidden. For a host that knows the viewer lacks `airdrop_link:manage`.
640
+ * @default true
641
+ */
642
+ canCreateLink?: boolean;
643
+ /**
644
+ * Skip the picker and open straight onto this recipient's amount screen — for a "pay this person" action row. No back button is shown in that case, matching there being no picker behind it.
645
+ * @default null
646
+ */
647
+ initialRecipient?: SendRecipient | null;
648
+ /**
649
+ * Preselect a currency in the amount screen's picker. Falls back to `currency`, then USD.
650
+ * @default ""
651
+ */
652
+ initialCurrency?: string;
653
+ }
654
+
655
+ /**
656
+ * The live handle for a mounted "send" element. Returned by `create("send")`; in React, the component's `ref`.
657
+ * @see https://docs.whop.com/elements/latest/wallet/send
658
+ */
659
+ export interface SendElementHandle {
660
+ /**
661
+ * Re-fetch the account's balances and recipient list. Call it after anything on your side changes what it can offer.
662
+ */
663
+ refresh: () => Promise<void>;
664
+ /**
665
+ * Mounts the element in `target` and starts loading. React components mount themselves.
666
+ */
667
+ mount: (target: string | HTMLElement) => void;
668
+ /**
669
+ * Removes the element and releases its frame and subscriptions. You can call it more than once. React removes the element automatically.
670
+ */
671
+ destroy: () => void;
672
+ /**
673
+ * Merges new props into the mounted element. In React, change the component props instead.
674
+ */
675
+ update: (options: Partial<SendElementProps>) => void;
676
+ }
677
+
678
+ /**
679
+ * Options for `create("send")`: the consumer props plus event callbacks and lifecycle hooks.
680
+ * @example
681
+ * ```ts
682
+ * const send = wallet.create("send", {}); // this interface: props + on<Event> callbacks
683
+ * send.mount("#wallet-send");
684
+ * ```
685
+ * @see https://docs.whop.com/elements/latest/wallet/send
686
+ */
687
+ export interface SendElementCreateOptions {
688
+ /**
689
+ * A scoped token for the privileged read/write — needs `payout:withdraw_funds` (plus `company:authorized_user:read` and `member:basic:read` for recipient search, `airdrop_link:manage` for claim links). Omitted, the read carries the viewer's own session, which only answers same-origin.
690
+ */
691
+ accessToken?: string;
692
+ /**
693
+ * Off, only the team/other-account list shows — no search box. For a host that knows the viewer lacks `member:basic:read`.
694
+ * @default true
695
+ */
696
+ canSearchRecipients?: boolean;
697
+ /**
698
+ * Off, the "Send via link" row is hidden. For a host that knows the viewer lacks `airdrop_link:manage`.
699
+ * @default true
700
+ */
701
+ canCreateLink?: boolean;
702
+ /**
703
+ * Skip the picker and open straight onto this recipient's amount screen — for a "pay this person" action row. No back button is shown in that case, matching there being no picker behind it.
704
+ * @default null
705
+ */
706
+ initialRecipient?: SendRecipient | null;
707
+ /**
708
+ * Preselect a currency in the amount screen's picker. Falls back to `currency`, then USD.
709
+ * @default ""
710
+ */
711
+ initialCurrency?: string;
712
+ /**
713
+ * The visible screen changed.
714
+ */
715
+ onStepChanged?: ((payload: { step: "enter_amount" | "select_recipient" | "create_link" | "link_success" | "success"; }) => void);
716
+ /**
717
+ * A transfer succeeded. Refresh anything on your side reading the account's balance or activity.
718
+ */
719
+ onSendCompleted?: ((payload: { recipient: SendRecipient; amount: number; currency: string; }) => void);
720
+ /**
721
+ * A claim link was created. Refresh anything on your side reading the account's balance.
722
+ */
723
+ onLinkCreated?: ((payload: { claimUrl: string; amount: number; redeemableCount: number; }) => void);
724
+ /**
725
+ * The viewer clicked "Done" on a success screen — close the surface holding it.
726
+ */
727
+ onDone?: ((payload: Record<string, never>) => void);
728
+ /**
729
+ * Runs after the loading skeleton first paints and before `onReady`.
730
+ */
731
+ onLoaderStart?: (() => void);
732
+ /**
733
+ * Runs after the element's first complete paint.
734
+ */
735
+ onReady?: (() => void);
736
+ /**
737
+ * 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.
738
+ */
739
+ onError?: ((e: { message: string; code?: string | undefined; sourceKey?: string | undefined; }) => void);
740
+ }
741
+
742
+ /**
743
+ * The overlay handle for "send". Returned by `createOverlay("send")`; drives the modal presentation imperatively.
744
+ * @see https://docs.whop.com/elements/latest/wallet/send
745
+ */
746
+ export interface SendElementOverlayHandle {
747
+ /**
748
+ * Open the overlay. The first call mounts the element. Later calls reuse it.
749
+ */
750
+ open(): void;
751
+ /**
752
+ * Close the overlay without destroying it. Keep the handle and `open()` again.
753
+ */
754
+ close(): void;
755
+ /**
756
+ * Removes the element and releases its frame and subscriptions. You can call it more than once. React removes the element automatically.
757
+ */
758
+ destroy(): void;
759
+ /**
760
+ * Merges new props into the mounted element. In React, change the component props instead.
761
+ */
762
+ update(options: Partial<SendElementProps>): void;
763
+ }
764
+
765
+ /**
766
+ * Consumer props for the "cards" element. Set at create (or as `<CardsElement />` JSX props), and updatable live via `update()`.
767
+ * @see https://docs.whop.com/elements/latest/wallet/cards
768
+ */
769
+ export interface CardsElementProps {
770
+ /**
771
+ * A scoped token for the privileged read — needs `payout:account:read`. Mint it on your server with `POST /api/v1/access_tokens`. Omitted, the read carries the viewer's own session, which only answers same-origin.
772
+ */
773
+ accessToken?: string;
774
+ /**
775
+ * Off, the element fetches nothing and keeps the title and "+" button visible with an empty body — for a host that only wants to fetch once some precondition (card issuing being active for this account, say) is true.
776
+ * @default true
777
+ */
778
+ enabled?: boolean;
779
+ /**
780
+ * Cap the rows shown, most recently issued first. `null` shows every active card.
781
+ * @default null
782
+ */
783
+ limit?: number | null;
784
+ /**
785
+ * Render the title as plain, unclickable text instead of a click target. Off by default, in which case clicking the title emits `viewAllSelected` for you to route to the full cards list — the element never navigates.
786
+ * @default false
787
+ */
788
+ disableRedirect?: boolean;
789
+ /**
790
+ * Hide the "+" button. Off by default, in which case clicking it emits `addCardRequested`.
791
+ * @default false
792
+ */
793
+ hideAddButton?: boolean;
794
+ }
795
+
796
+ /**
797
+ * The live handle for a mounted "cards" element. Returned by `create("cards")`; in React, the component's `ref`.
798
+ * @see https://docs.whop.com/elements/latest/wallet/cards
799
+ */
800
+ export interface CardsElementHandle {
801
+ /**
802
+ * Re-fetch the account's cards. Call it after a mutation made elsewhere (rename, freeze, cancel, a new card) so the list reflects it without waiting for the cache to expire.
803
+ */
804
+ refresh: () => Promise<void>;
805
+ /**
806
+ * Mounts the element in `target` and starts loading. React components mount themselves.
807
+ */
808
+ mount: (target: string | HTMLElement) => void;
809
+ /**
810
+ * Removes the element and releases its frame and subscriptions. You can call it more than once. React removes the element automatically.
811
+ */
812
+ destroy: () => void;
813
+ /**
814
+ * Merges new props into the mounted element. In React, change the component props instead.
815
+ */
816
+ update: (options: Partial<CardsElementProps>) => void;
817
+ }
818
+
819
+ /**
820
+ * Options for `create("cards")`: the consumer props plus event callbacks and lifecycle hooks.
821
+ * @example
822
+ * ```ts
823
+ * const cards = wallet.create("cards", {}); // this interface: props + on<Event> callbacks
824
+ * cards.mount("#wallet-cards");
825
+ * ```
826
+ * @see https://docs.whop.com/elements/latest/wallet/cards
827
+ */
828
+ export interface CardsElementCreateOptions {
829
+ /**
830
+ * A scoped token for the privileged read — needs `payout:account:read`. Mint it on your server with `POST /api/v1/access_tokens`. Omitted, the read carries the viewer's own session, which only answers same-origin.
831
+ */
832
+ accessToken?: string;
833
+ /**
834
+ * Off, the element fetches nothing and keeps the title and "+" button visible with an empty body — for a host that only wants to fetch once some precondition (card issuing being active for this account, say) is true.
835
+ * @default true
836
+ */
837
+ enabled?: boolean;
838
+ /**
839
+ * Cap the rows shown, most recently issued first. `null` shows every active card.
840
+ * @default null
841
+ */
842
+ limit?: number | null;
843
+ /**
844
+ * Render the title as plain, unclickable text instead of a click target. Off by default, in which case clicking the title emits `viewAllSelected` for you to route to the full cards list — the element never navigates.
845
+ * @default false
846
+ */
847
+ disableRedirect?: boolean;
848
+ /**
849
+ * Hide the "+" button. Off by default, in which case clicking it emits `addCardRequested`.
850
+ * @default false
851
+ */
852
+ hideAddButton?: boolean;
853
+ /**
854
+ * A card row was clicked. Open your own card details for it — the element never navigates.
855
+ */
856
+ onCardSelected?: ((payload: { cardId: string; }) => void);
857
+ /**
858
+ * The title was clicked. Only fires when `disableRedirect` is false.
859
+ */
860
+ onViewAllSelected?: ((payload: Record<string, never>) => void);
861
+ /**
862
+ * The "+" button was clicked. Only fires when `hideAddButton` is false.
863
+ */
864
+ onAddCardRequested?: ((payload: Record<string, never>) => void);
865
+ /**
866
+ * Runs after the loading skeleton first paints and before `onReady`.
867
+ */
868
+ onLoaderStart?: (() => void);
869
+ /**
870
+ * Runs after the element's first complete paint.
871
+ */
872
+ onReady?: (() => void);
873
+ /**
874
+ * 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.
875
+ */
876
+ onError?: ((e: { message: string; code?: string | undefined; sourceKey?: string | undefined; }) => void);
877
+ }
878
+
879
+ /**
880
+ * Consumer props for the "balances" sub-controller: the `create("balances")` options and the minted sub handle's `update()` payload (React: `<Balances>` props). Parent-injected props never appear here.
881
+ * @see https://docs.whop.com/elements/latest/wallet/overview
882
+ */
883
+ export interface BalancesSubOptions {
884
+ /**
885
+ * Runs when the grouped loading state changes. The value is `true` while any mounted element is still loading.
886
+ */
887
+ onLoadingChange?: ((loading: boolean) => void);
888
+ }
889
+
890
+ /**
891
+ * Consumer props for the "balances" sub-controller's "balance" element.
892
+ * @see https://docs.whop.com/elements/latest/wallet/overview
893
+ */
894
+ export interface BalanceElementProps {
895
+ /**
896
+ * A scoped token for the reads. An account needs `company:balance:read` for the total and `stats:read` for the chart; a user's own balance needs `user:balance:read`. Mint it on your server with `POST /api/v1/access_tokens`, and set a fresh one before it expires. Without it the reads use the viewer's own session, which only works same-origin.
897
+ * @default ""
898
+ */
899
+ accessToken?: string;
900
+ /**
901
+ * The time range to open on. The buttons change it from there, or set this prop again to control it yourself.
902
+ * @default "1M"
903
+ */
904
+ range?: "1D" | "1W" | "1M" | "1Y" | "ALL";
905
+ /**
906
+ * When the account was opened, as an ISO 8601 timestamp. `ALL` starts here instead of at its five-year default, so an account older than that keeps its full history.
907
+ * @default ""
908
+ */
909
+ openedAt?: string;
910
+ /**
911
+ * Adds the account name to the label: `Total balance · Acme` normally, and `Acme balance on Jul 9` while the viewer reads a point. Without it the label is just `Total balance`.
912
+ * @default ""
913
+ */
914
+ accountName?: string;
915
+ /**
916
+ * The selected range on the chart, as ISO 8601 timestamps. Set it to control the selection yourself, or `null` to clear the one the viewer made. Echo back what `rangeBrushed` reports, and clearing a filter elsewhere on your page clears the selection here too.
917
+ * @default null
918
+ */
919
+ brush?: { from: string; to: string; } | null;
920
+ /**
921
+ * A moment to mark on the chart, as an ISO 8601 timestamp — the point something else on your page is pointing at, like the row under the pointer in an activity list. It reads like the viewer hovering that point themselves, and is ignored when it falls outside the window on screen or when they are reading the chart.
922
+ * @default ""
923
+ */
924
+ markedAt?: string;
925
+ /**
926
+ * For a user, total their own money plus every account they own instead of their own money alone. Ignored for an account, which is a single account already.
927
+ * @default false
928
+ */
929
+ includeOwnedAccounts?: boolean;
930
+ /**
931
+ * Hide the total and its change, leaving the chart and the range buttons.
932
+ * @default false
933
+ */
934
+ hideTotal?: boolean;
935
+ /**
936
+ * Hide the chart, leaving the total and the range buttons.
937
+ * @default false
938
+ */
939
+ hideChart?: boolean;
940
+ /**
941
+ * How tall the chart is drawn, in pixels.
942
+ * @default 210
943
+ */
944
+ height?: number;
945
+ }
946
+
947
+ /**
948
+ * The live handle for a mounted "balance" element. Returned by the "balances" sub handle's `create("balance")`.
949
+ * @see https://docs.whop.com/elements/latest/wallet/overview
950
+ */
951
+ export interface BalanceElementHandle {
952
+ /**
953
+ * Mounts the element in `target` and starts loading. React components mount themselves.
954
+ */
955
+ mount: (target: string | HTMLElement) => void;
956
+ /**
957
+ * Removes the element and releases its frame and subscriptions. You can call it more than once. React removes the element automatically.
958
+ */
959
+ destroy: () => void;
960
+ /**
961
+ * Merges new props into the mounted element. In React, change the component props instead.
962
+ */
963
+ update: (options: Partial<BalanceElementProps>) => void;
964
+ }
965
+
966
+ /**
967
+ * Options for the "balances" sub handle's `create("balance")`: the consumer props plus event callbacks and lifecycle hooks.
968
+ * @see https://docs.whop.com/elements/latest/wallet/overview
969
+ */
970
+ export interface BalanceElementCreateOptions {
971
+ /**
972
+ * A scoped token for the reads. An account needs `company:balance:read` for the total and `stats:read` for the chart; a user's own balance needs `user:balance:read`. Mint it on your server with `POST /api/v1/access_tokens`, and set a fresh one before it expires. Without it the reads use the viewer's own session, which only works same-origin.
973
+ * @default ""
974
+ */
975
+ accessToken?: string;
976
+ /**
977
+ * The time range to open on. The buttons change it from there, or set this prop again to control it yourself.
978
+ * @default "1M"
979
+ */
980
+ range?: "1D" | "1W" | "1M" | "1Y" | "ALL";
981
+ /**
982
+ * When the account was opened, as an ISO 8601 timestamp. `ALL` starts here instead of at its five-year default, so an account older than that keeps its full history.
983
+ * @default ""
984
+ */
985
+ openedAt?: string;
986
+ /**
987
+ * Adds the account name to the label: `Total balance · Acme` normally, and `Acme balance on Jul 9` while the viewer reads a point. Without it the label is just `Total balance`.
988
+ * @default ""
989
+ */
990
+ accountName?: string;
991
+ /**
992
+ * The selected range on the chart, as ISO 8601 timestamps. Set it to control the selection yourself, or `null` to clear the one the viewer made. Echo back what `rangeBrushed` reports, and clearing a filter elsewhere on your page clears the selection here too.
993
+ * @default null
994
+ */
995
+ brush?: { from: string; to: string; } | null;
996
+ /**
997
+ * A moment to mark on the chart, as an ISO 8601 timestamp — the point something else on your page is pointing at, like the row under the pointer in an activity list. It reads like the viewer hovering that point themselves, and is ignored when it falls outside the window on screen or when they are reading the chart.
998
+ * @default ""
999
+ */
1000
+ markedAt?: string;
1001
+ /**
1002
+ * For a user, total their own money plus every account they own instead of their own money alone. Ignored for an account, which is a single account already.
1003
+ * @default false
1004
+ */
1005
+ includeOwnedAccounts?: boolean;
1006
+ /**
1007
+ * Hide the total and its change, leaving the chart and the range buttons.
1008
+ * @default false
1009
+ */
1010
+ hideTotal?: boolean;
1011
+ /**
1012
+ * Hide the chart, leaving the total and the range buttons.
1013
+ * @default false
1014
+ */
1015
+ hideChart?: boolean;
1016
+ /**
1017
+ * How tall the chart is drawn, in pixels.
1018
+ * @default 210
1019
+ */
1020
+ height?: number;
1021
+ /**
1022
+ * The visible time range changed. Mirror it if something else on your page reads the same period.
1023
+ */
1024
+ onRangeChanged?: ((payload: { range: "1D" | "1W" | "1M" | "1Y" | "ALL"; }) => void);
1025
+ /**
1026
+ * The viewer dragged across the chart to select a range, or cleared the selection (`null`). Gives ISO 8601 timestamps plus the range they were read in, so you can filter your own views, like an activity list or a table, to the same period.
1027
+ */
1028
+ onRangeBrushed?: ((payload: { from: string; to: string; range: "1D" | "1W" | "1M" | "1Y" | "ALL"; } | null) => void);
1029
+ /**
1030
+ * Runs after the loading skeleton first paints and before `onReady`.
1031
+ */
1032
+ onLoaderStart?: (() => void);
1033
+ /**
1034
+ * Runs after the element's first complete paint.
1035
+ */
1036
+ onReady?: (() => void);
1037
+ /**
1038
+ * 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.
1039
+ */
1040
+ onError?: ((e: { message: string; code?: string | undefined; sourceKey?: string | undefined; }) => void);
1041
+ }
1042
+
1043
+ /**
1044
+ * Consumer props for the "balances" sub-controller's "list" element.
1045
+ * @see https://docs.whop.com/elements/latest/wallet/overview
1046
+ */
1047
+ export interface ListElementProps {
1048
+ /**
1049
+ * A scoped token for the read. An account needs `company:balance:read`; a user's holdings or owned-account list 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.
1050
+ */
1051
+ accessToken?: string;
1052
+ /**
1053
+ * For a user's `user_…` account, list their personal balance followed by every owned account the backend returns instead of listing the holdings inside their personal account. Ignored for an account.
1054
+ * @default false
1055
+ */
1056
+ includeOwnedAccounts?: boolean;
1057
+ /**
1058
+ * Show each row in the currency it is held in (€4.20, 0.00000009 cbBTC) and put the dollar value underneath. Off by default, so every row is in dollars.
1059
+ * @default false
1060
+ */
1061
+ showSourceCurrency?: boolean;
1062
+ /**
1063
+ * Keep the dollar value under a holding shown in its own currency. Only applies when `showSourceCurrency` is on.
1064
+ * @default true
1065
+ */
1066
+ showUsdEquivalent?: boolean;
1067
+ /**
1068
+ * Keep the personal row when `includeOwnedAccounts` is on. Turn it off if your app has no personal account to open.
1069
+ * @default true
1070
+ */
1071
+ showPersonalAccount?: boolean;
1072
+ }
1073
+
1074
+ /**
1075
+ * The live handle for a mounted "list" element. Returned by the "balances" sub handle's `create("list")`.
1076
+ * @see https://docs.whop.com/elements/latest/wallet/overview
1077
+ */
1078
+ export interface ListElementHandle {
1079
+ /**
1080
+ * Mounts the element in `target` and starts loading. React components mount themselves.
1081
+ */
1082
+ mount: (target: string | HTMLElement) => void;
1083
+ /**
1084
+ * Removes the element and releases its frame and subscriptions. You can call it more than once. React removes the element automatically.
1085
+ */
1086
+ destroy: () => void;
1087
+ /**
1088
+ * Merges new props into the mounted element. In React, change the component props instead.
1089
+ */
1090
+ update: (options: Partial<ListElementProps>) => void;
1091
+ }
1092
+
1093
+ /**
1094
+ * Options for the "balances" sub handle's `create("list")`: the consumer props plus event callbacks and lifecycle hooks.
1095
+ * @see https://docs.whop.com/elements/latest/wallet/overview
1096
+ */
1097
+ export interface ListElementCreateOptions {
1098
+ /**
1099
+ * A scoped token for the read. An account needs `company:balance:read`; a user's holdings or owned-account list 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.
1100
+ */
1101
+ accessToken?: string;
1102
+ /**
1103
+ * For a user's `user_…` account, list their personal balance followed by every owned account the backend returns instead of listing the holdings inside their personal account. Ignored for an account.
1104
+ * @default false
1105
+ */
1106
+ includeOwnedAccounts?: boolean;
1107
+ /**
1108
+ * Show each row in the currency it is held in (€4.20, 0.00000009 cbBTC) and put the dollar value underneath. Off by default, so every row is in dollars.
1109
+ * @default false
1110
+ */
1111
+ showSourceCurrency?: boolean;
1112
+ /**
1113
+ * Keep the dollar value under a holding shown in its own currency. Only applies when `showSourceCurrency` is on.
1114
+ * @default true
1115
+ */
1116
+ showUsdEquivalent?: boolean;
1117
+ /**
1118
+ * Keep the personal row when `includeOwnedAccounts` is on. Turn it off if your app has no personal account to open.
1119
+ * @default true
1120
+ */
1121
+ showPersonalAccount?: boolean;
1122
+ /**
1123
+ * A holding row was clicked, with `includeOwnedAccounts` off. `key` is `usd` for the combined dollar row, otherwise the holding symbol (`cbBTC`, `EUR`), and `kind` tells you which of the three it is so you can route without classifying symbols yourself. The element never navigates.
1124
+ */
1125
+ onBalanceSelected?: ((payload: { key: string; kind: "usd" | "cash" | "asset"; }) => void);
1126
+ /**
1127
+ * An account row was clicked, with `includeOwnedAccounts` on. `accountId` is the personal `user_…` tag or an owned `biz_…` tag, and `kind` lets you route without inspecting it. The element never navigates.
1128
+ */
1129
+ onAccountSelected?: ((payload: { accountId: string; kind: "personal" | "business"; }) => void);
1130
+ /**
1131
+ * Runs after the loading skeleton first paints and before `onReady`.
1132
+ */
1133
+ onLoaderStart?: (() => void);
1134
+ /**
1135
+ * Runs after the element's first complete paint.
1136
+ */
1137
+ onReady?: (() => void);
1138
+ /**
1139
+ * 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.
1140
+ */
1141
+ onError?: ((e: { message: string; code?: string | undefined; sourceKey?: string | undefined; }) => void);
1142
+ }
1143
+
1144
+ /**
1145
+ * The "balances" sub-handle, minted by `handle.create("balances", …)`. Mounts the sub-controller's elements and carries its actions.
1146
+ * @see https://docs.whop.com/elements/latest/wallet/overview
1147
+ */
1148
+ export interface BalancesSubHandle {
1149
+ /**
1150
+ * 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.
1151
+ */
1152
+ create(name: "balance", options?: BalanceElementCreateOptions): BalanceElementHandle;
1153
+ /**
1154
+ * 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.
1155
+ */
1156
+ create(name: "list", options?: ListElementCreateOptions): ListElementHandle;
1157
+ /**
1158
+ * Merges new props and callbacks into the sub-controller.
1159
+ */
1160
+ update(options: Partial<BalancesSubOptions>): void;
1161
+ /**
1162
+ * Destroys the sub-controller and its elements, then frees its exclusive slot. A later `create("balances")` starts fresh.
1163
+ */
1164
+ destroy(): void;
1165
+ }
1166
+
1167
+ /**
1168
+ * The Wallet handle, returned by `whop.wallet.create()` (React: `useWallet()`). Mounts the elements and carries the controller's actions.
1169
+ * @see https://docs.whop.com/elements/latest/wallet/overview
1170
+ */
1171
+ export interface WalletHandle {
1172
+ /**
1173
+ * An account's ledger activity: every movement of money in or out, newest first. The list pages as the viewer scrolls, and rows report which one was tapped instead of navigating, so you can open your own detail screen.
1174
+ */
1175
+ create(name: "activity", options?: ActivityElementCreateOptions): ActivityElementHandle;
1176
+ /**
1177
+ * Funds a Whop account. Renders an amount field and the account's live funding rails — crypto (a per-network deposit address with its QR) and bank transfer (the wire fields for each settlement currency) — resolved from the account ID with no credentials, so it works on any page. Cards and platform balance are opt-in: pass `savedCards`, `allowNewCard`, or `showPlatformBalance` and the element collects the amount and the choice, then emits `cardDepositRequested` / `addCardRequested` / `platformBalanceSelected` and waits for you to call `showStep({ step: 'amount' })` when your own screen is done.
1178
+ */
1179
+ create(name: "deposit", options?: DepositElementCreateOptions): DepositElementHandle;
1180
+ /**
1181
+ * Funds a Whop account. Renders an amount field and the account's live funding rails — crypto (a per-network deposit address with its QR) and bank transfer (the wire fields for each settlement currency) — resolved from the account ID with no credentials, so it works on any page. Cards and platform balance are opt-in: pass `savedCards`, `allowNewCard`, or `showPlatformBalance` and the element collects the amount and the choice, then emits `cardDepositRequested` / `addCardRequested` / `platformBalanceSelected` and waits for you to call `showStep({ step: 'amount' })` when your own screen is done.
1182
+ */
1183
+ createOverlay(name: "deposit", options?: DepositElementCreateOptions): DepositElementOverlayHandle;
1184
+ /**
1185
+ * Collects a payout amount and saved payout method, groups standard and instant delivery choices with live fees and arrival estimates, collects a new payout method when needed, and presents a confirmation screen before emitting the final payout request.
1186
+ */
1187
+ create(name: "withdraw", options?: WithdrawElementCreateOptions): WithdrawElementHandle;
1188
+ /**
1189
+ * Collects a payout amount and saved payout method, groups standard and instant delivery choices with live fees and arrival estimates, collects a new payout method when needed, and presents a confirmation screen before emitting the final payout request.
1190
+ */
1191
+ createOverlay(name: "withdraw", options?: WithdrawElementCreateOptions): WithdrawElementOverlayHandle;
1192
+ /**
1193
+ * Sends money from an account to a recipient — a user, another account, or a public claim link anyone can redeem. Renders its own recipient search resolved from the account ID with no credentials beyond the account's own token. Needs an `accessToken` scoped to `payout:withdraw_funds`; account recipient search additionally needs `company:authorized_user:read` and `member:basic:read`, and account claim links need `airdrop_link:manage` — a host without one of those scopes should turn off the matching prop rather than leave a row that will 403.
1194
+ */
1195
+ create(name: "send", options?: SendElementCreateOptions): SendElementHandle;
1196
+ /**
1197
+ * Sends money from an account to a recipient — a user, another account, or a public claim link anyone can redeem. Renders its own recipient search resolved from the account ID with no credentials beyond the account's own token. Needs an `accessToken` scoped to `payout:withdraw_funds`; account recipient search additionally needs `company:authorized_user:read` and `member:basic:read`, and account claim links need `airdrop_link:manage` — a host without one of those scopes should turn off the matching prop rather than leave a row that will 403.
1198
+ */
1199
+ createOverlay(name: "send", options?: SendElementCreateOptions): SendElementOverlayHandle;
1200
+ /**
1201
+ * Lists the account's active issued cards, most recently issued first. Needs an `accessToken`. The title and rows are click targets that emit events instead of navigating — a host wires up its own routing and card-detail UI.
1202
+ */
1203
+ create(name: "cards", options?: CardsElementCreateOptions): CardsElementHandle;
1204
+ /**
1205
+ * 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.
1206
+ */
1207
+ create(name: "balances", options?: BalancesSubOptions): BalancesSubHandle;
1208
+ /**
1209
+ * Merges new handle options into every mounted element. In React, change the namespace props instead.
1210
+ */
1211
+ update(options: Partial<WalletOptions>): void;
1212
+ }
1213
+
1214
+ /**
1215
+ * Wallet's static actions, callable with nothing mounted: `whop.wallet.<method>()` (React: `useWhop().wallet.<method>()`).
1216
+ * @see https://docs.whop.com/elements/latest/wallet/overview
1217
+ */
1218
+ export interface WalletStatics {}
1219
+
1220
+ /**
1221
+ * Declared from the app's `ActivityDateRangeOverride`, referenced by a host-capability surface.
1222
+ */
1223
+ export interface ActivityDateRangeOverride {
1224
+ start: string;
1225
+ end: string;
1226
+ includeTime?: boolean | undefined;
1227
+ postedAfter?: string | undefined;
1228
+ postedBefore?: string | undefined;
1229
+ displayPostedAfter?: string | undefined;
1230
+ displayPostedBefore?: string | undefined;
1231
+ }
1232
+
1233
+ /**
1234
+ * Declared from the app's `LedgerActivity`, referenced by a host-capability surface.
1235
+ */
1236
+ export interface LedgerActivity {
1237
+ object: "ledger_activity";
1238
+ /**
1239
+ * Ledger activity ID.
1240
+ */
1241
+ id: string;
1242
+ /**
1243
+ * The ledger line category this activity was posted under.
1244
+ */
1245
+ line_type: "ad_budget_release" | "ad_campaign_budget" | "ad_publisher_payout" | "ad_publisher_payout_received" | "ad_spend_charge" | "affiliate_fee" | "airdrop" | "airdrop_link_created" | "airdrop_link_redeemed" | "airdrop_link_returned" | "airdrop_reversal" | "application_fee" | "application_fee_payout" | "bank_transfer" | "billing_percentage_fee" | "buyer_fee" | "card_spend_authorization" | "card_spend_authorization_void" | "card_spend_refund" | "company_referral" | "cross_border_percentage_fee" | "currency_conversion_incoming" | "currency_conversion_outgoing" | "dispute_alert_fee" | "dispute_hold_adjustment" | "dispute_representment_fee" | "fraud_prevention_fee" | "fx_percentage_fee" | "high_risk_merchant_fee" | "installment_default" | "internal_balance_transfer_incoming" | "internal_balance_transfer_outgoing" | "internal_withdrawal" | "internal_withdrawal_reversal" | "legacy_crypto_payment" | "legacy_payment" | "legacy_payment_refund" | "license_sale" | "license_sale_commission" | "license_sale_revenue" | "misc_purchase" | "misc_refund" | "misc_reversal" | "onchain_deposit" | "onchain_swap_target" | "onchain_wallet_transfer_incoming" | "onchain_wallet_transfer_outgoing" | "orchestration_percentage_fee" | "passthrough_gmv" | "payment_dispute" | "payment_dispute_adjustment" | "payment_dispute_fee" | "payment_dispute_reversal" | "payment_gross" | "payment_gross_reversal" | "payment_processing_fixed_fee" | "payment_processing_percentage_fee" | "payment_referral" | "payment_referral_reversal" | "payment_refund" | "payment_refund_reversal" | "payment_revshare" | "payment_revshare_payout" | "payment_revshare_refund" | "payment_revshare_reversal" | "payout_fee" | "platform_affiliate_payment" | "platform_affiliate_payment_reversal" | "platform_balance_payment" | "platform_balance_payment_refund" | "platform_balance_transfer_incoming" | "platform_balance_transfer_outgoing" | "platform_covered_dispute" | "promo_reversal" | "referral_bonus" | "resolution_center_refund" | "revshare_percentage_fee" | "sales_tax_fee" | "sales_tax_remittance" | "sales_tax_remittance_reversal" | "software_rental_revshare" | "software_rental_transaction" | "stripe_domestic_processing_fee" | "stripe_international_processing_fee" | "three_ds_fixed_fee" | "topup" | "topup_fee" | "topup_reversal" | "treasury_payin" | "whop_processing_fee" | "withdrawal" | "withdrawal_clawback" | "withdrawal_clawback_reversal" | "withdrawal_reclassification" | "withdrawal_reversal";
1246
+ /**
1247
+ * Signed amount in the currency's smallest precision units.
1248
+ */
1249
+ amount: string;
1250
+ /**
1251
+ * Currency for this ledger activity.
1252
+ */
1253
+ currency: { code: string; precision: string; };
1254
+ /**
1255
+ * When the activity posted to the ledger.
1256
+ */
1257
+ posted_at: string;
1258
+ /**
1259
+ * ISO 8601 timestamp these funds became (or are scheduled to become) withdrawable: the posted time for already-settled funds, or 00:00:00 UTC on the scheduled release date for pending funds. Present only on inflows entering the balance (payments, top-ups, incoming transfers/affiliate); null on withdrawals, refunds, disputes and on-chain rows. The available_after/before filters window on its UTC settlement date.
1260
+ */
1261
+ available_at: string | null;
1262
+ /**
1263
+ * When the activity record was created.
1264
+ */
1265
+ created_at: string | null;
1266
+ /**
1267
+ * Resource associated with this ledger activity.
1268
+ */
1269
+ resource: { object: "account"; id: string; title: string | null; route: string | null; logo_url: string | null; } | { object: "user"; id: string; name: string | null; username: string | null; profile_picture_url: string | null; } | { object: "bounty"; id: string; title: string; status: string; } | { object: "ledger_account"; id: string; owner: { object: "account"; id: string; title: string | null; route: string | null; logo_url: string | null; } | { object: "user"; id: string; name: string | null; username: string | null; profile_picture_url: string | null; } | null; } | { object: "payment_method"; id: string; payment_method_type: string | null; gateway_type: string | null; card: { brand: string | null; last4: string | null; exp_month: number | null; exp_year: number | null; } | null; bank: { bank_name: string | null; account_name: string | null; last4: string | null; account_type: string | null; } | null; email_identifier: string | null; } | { object: "payout_method"; id: string; nickname: string | null; institution_name: string | null; account_reference: string | null; provider: string | null; destination_currency_code: string | null; } | { object: "card_transaction"; id: string; card_id: string | null; merchant_name: string | null; merchant_icon_url: string | null; merchant_category: string | null; status: string | null; usd_amount: string | null; local_amount: string | null; local_currency: string | null; cashback_usd: string | null; authorized_at: string | null; posted_at: string | null; declined_reason: string | null; } | null;
1270
+ /**
1271
+ * Source of this ledger activity.
1272
+ */
1273
+ source: { object: string; id: string; status?: string | null | undefined; reason?: string | null | undefined; claim_url?: string | null | undefined; amount_float?: number | null | undefined; created_at?: string | null | undefined; estimated_arrival?: string | null | undefined; payer_name?: string | null | undefined; payout_token_nickname?: string | null | undefined; tx_hash?: string | null | undefined; sender_address?: string | null | undefined; chain?: string | null | undefined; from_amount?: string | null | undefined; from_currency?: string | null | undefined; to_amount?: string | null | undefined; to_currency?: string | null | undefined; payout_destination?: { payer_name?: string | null | undefined; icon_url?: string | null | undefined; } | null | undefined; [key: string]: unknown; } | null;
1274
+ /**
1275
+ * The viewer account that owns this row's ledger. Present only when the response aggregates owned accounts (include_owned_accounts=true); omitted otherwise.
1276
+ */
1277
+ account?: { object: "account"; id: string; title: string | null; route: string | null; logo_url: string | null; } | { object: "user"; id: string; name: string | null; username: string | null; profile_picture_url: string | null; } | undefined;
1278
+ /**
1279
+ * The ledger account (a ldgr_ identifier) this row belongs to. Present only when the response aggregates owned accounts (include_owned_accounts=true); omitted otherwise. Pair it with `account` to scope drawers and dashboard links to the owning business.
1280
+ */
1281
+ ledger_account_id?: string | null | undefined;
1282
+ }
1283
+
1284
+ /**
1285
+ * A card the consumer already holds for this account — the element renders it as a funding row and hands the choice back through `cardDepositRequested`; it never collects a card payment itself.
1286
+ * Declared from the app's `DepositSavedCard`, referenced by a host-capability surface.
1287
+ */
1288
+ export interface DepositSavedCard {
1289
+ /**
1290
+ * Payment-method ID echoed back in `cardDepositRequested`.
1291
+ */
1292
+ id: string;
1293
+ /**
1294
+ * Row label, for example, `Visa •••• 4242`.
1295
+ */
1296
+ label: string;
1297
+ /**
1298
+ * Brand key used to pick the row icon — `visa`, `mastercard`, `amex`, `discover`, `jcb`.
1299
+ */
1300
+ cardBrand?: string | null | undefined;
1301
+ }
1302
+
1303
+ /**
1304
+ * Declared from the app's `DepositCardFee`, referenced by a host-capability surface.
1305
+ */
1306
+ export interface DepositCardFee {
1307
+ /**
1308
+ * Percentage POINTS, not a fraction: `2.9` means 2.9%.
1309
+ */
1310
+ percentageFee: number;
1311
+ /**
1312
+ * Flat fee in major units: `0.3` means $0.30.
1313
+ */
1314
+ fixedFee: number;
1315
+ /**
1316
+ * Fraud-screening fee in major units.
1317
+ */
1318
+ radarFee: number;
1319
+ }
1320
+
1321
+ /**
1322
+ * Declared from the app's `WithdrawalQuoteSpeed`, referenced by a host-capability surface.
1323
+ */
1324
+ export interface WithdrawalQuoteSpeed {
1325
+ estimatedArrival?: string | null | undefined;
1326
+ fee: number;
1327
+ totalReceived: number;
1328
+ currency?: string | undefined;
1329
+ destinationCurrency?: string | undefined;
1330
+ exchangeRate?: number | undefined;
1331
+ minLimit?: number | undefined;
1332
+ maxLimit?: number | null | undefined;
1333
+ }
1334
+
1335
+ /**
1336
+ * Declared from the app's `WithdrawalQuote`, referenced by a host-capability surface.
1337
+ */
1338
+ export interface WithdrawalQuote {
1339
+ amount: number;
1340
+ currency: string;
1341
+ destinationCurrency: string;
1342
+ exchangeRate: number;
1343
+ minLimit: number;
1344
+ maxLimit?: number | null | undefined;
1345
+ standard?: WithdrawalQuoteSpeed | null | undefined;
1346
+ instant?: WithdrawalQuoteSpeed | null | undefined;
1347
+ }
1348
+
1349
+ /**
1350
+ * Declared from the app's `WithdrawalMethod`, referenced by a host-capability surface.
1351
+ */
1352
+ export interface WithdrawalMethod {
1353
+ id: string;
1354
+ nickname?: string | null | undefined;
1355
+ accountReference?: string | null | undefined;
1356
+ payerName?: string | null | undefined;
1357
+ destinationCurrency: string;
1358
+ isDefault: boolean;
1359
+ iconUrl?: string | null | undefined;
1360
+ deliveryType: string;
1361
+ supportsStandard: boolean;
1362
+ supportsInstant: boolean;
1363
+ bankVerificationState?: string | null | undefined;
1364
+ unavailableReason?: string | null | undefined;
1365
+ feeStructure?: { percentage: number; fixedAmount: number; currency: string; } | null | undefined;
1366
+ standardEstimatedArrival?: string | null | undefined;
1367
+ instantEstimatedArrival?: string | null | undefined;
1368
+ quote?: WithdrawalQuote | null | undefined;
1369
+ }
1370
+
1371
+ /**
1372
+ * Declared from the app's `WithdrawalRequiredField`, referenced by a host-capability surface.
1373
+ */
1374
+ export interface WithdrawalRequiredField {
1375
+ id: string;
1376
+ label: string;
1377
+ inputType: string;
1378
+ required: boolean;
1379
+ sensitive: boolean;
1380
+ placeholder?: string | null | undefined;
1381
+ validation?: string | null | undefined;
1382
+ options?: string[] | null | undefined;
1383
+ }
1384
+
1385
+ /**
1386
+ * Declared from the app's `WithdrawalSupportedMethod`, referenced by a host-capability surface.
1387
+ */
1388
+ export interface WithdrawalSupportedMethod {
1389
+ id: string;
1390
+ name?: string | null | undefined;
1391
+ iconUrl?: string | null | undefined;
1392
+ deliveryType: string;
1393
+ supportsStandard: boolean;
1394
+ supportsInstant: boolean;
1395
+ supportsPlaid?: boolean | undefined;
1396
+ quotes: WithdrawalQuote[];
1397
+ requiredFields: WithdrawalRequiredField[];
1398
+ }
1399
+
1400
+ /**
1401
+ * Declared from the app's `WithdrawalLimits`, referenced by a host-capability surface.
1402
+ */
1403
+ export interface WithdrawalLimits {
1404
+ standard: { maxAmount: number; errorMessage?: string | null | undefined; };
1405
+ instant: { maxAmount: number; dailyAmountRemaining?: number | null | undefined; errorMessage?: string | null | undefined; };
1406
+ }
1407
+
1408
+ /**
1409
+ * Declared from the app's `WithdrawalCreateMethodInput`, referenced by a host-capability surface.
1410
+ */
1411
+ export interface WithdrawalCreateMethodInput {
1412
+ country: string;
1413
+ supportedPayoutMethodId: string;
1414
+ destinationCurrency: string;
1415
+ nickname: string;
1416
+ fields: Record<string, string>;
1417
+ }
1418
+
1419
+ /**
1420
+ * Declared from the app's `WithdrawalRequest`, referenced by a host-capability surface.
1421
+ */
1422
+ export interface WithdrawalRequest {
1423
+ amount: number;
1424
+ currency: string;
1425
+ payoutMethodId: string;
1426
+ presentedFee: number;
1427
+ speed: "standard" | "instant";
1428
+ notes?: string | undefined;
1429
+ acknowledgeBankWarning?: boolean | undefined;
1430
+ }
1431
+
1432
+ /**
1433
+ * Declared from the app's `SendRecipient`, referenced by a host-capability surface.
1434
+ */
1435
+ export interface SendRecipient {
1436
+ id: string;
1437
+ name: string | null;
1438
+ username: string | null;
1439
+ profilePicUrl: string | null;
1440
+ kind: "business" | "user" | "email";
1441
+ }