@whop/embedded-components-react-js 1.0.0 → 1.2.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.
Files changed (75) hide show
  1. package/CHANGELOG.md +30 -0
  2. package/dist/chat/elements/chat.d.ts +1 -1
  3. package/dist/chat/elements/dms-list.d.ts +1 -1
  4. package/dist/chat/elements/index.d.ts +2 -2
  5. package/dist/chat/elements/search-element.d.ts +1 -1
  6. package/dist/chat/index.d.ts +2 -2
  7. package/dist/chat/with-fallback.d.ts +6 -47
  8. package/dist/chat/with-fallback.js +2 -59
  9. package/dist/chat/with-fallback.js.map +1 -1
  10. package/dist/chat/with-fallback.mjs +2 -54
  11. package/dist/chat/with-fallback.mjs.map +1 -1
  12. package/dist/index.d.ts +4 -2
  13. package/dist/index.js +2 -0
  14. package/dist/index.js.map +1 -1
  15. package/dist/index.mjs +2 -0
  16. package/dist/index.mjs.map +1 -1
  17. package/dist/lib/create-with-fallback.d.ts +51 -0
  18. package/dist/lib/create-with-fallback.js +89 -0
  19. package/dist/lib/create-with-fallback.js.map +1 -0
  20. package/dist/lib/create-with-fallback.mjs +59 -0
  21. package/dist/lib/create-with-fallback.mjs.map +1 -0
  22. package/dist/payouts/elements/add-payout-method.d.ts +1 -1
  23. package/dist/payouts/elements/automatic-withdraw.d.ts +1 -1
  24. package/dist/payouts/elements/available-cash-breakdown.d.ts +1 -1
  25. package/dist/payouts/elements/balance.d.ts +1 -1
  26. package/dist/payouts/elements/balances.d.ts +1 -1
  27. package/dist/payouts/elements/change-account-country.d.ts +1 -1
  28. package/dist/payouts/elements/generate-withdrawal-receipt.d.ts +1 -1
  29. package/dist/payouts/elements/index.d.ts +2 -2
  30. package/dist/payouts/elements/pending-breakdown.d.ts +1 -1
  31. package/dist/payouts/elements/reserve-breakdown.d.ts +1 -1
  32. package/dist/payouts/elements/reset-account.d.ts +1 -1
  33. package/dist/payouts/elements/treasury-breakdown.d.ts +1 -1
  34. package/dist/payouts/elements/verify.d.ts +1 -1
  35. package/dist/payouts/elements/withdraw-button.d.ts +1 -1
  36. package/dist/payouts/elements/withdraw.d.ts +1 -1
  37. package/dist/payouts/elements/withdrawal-breakdown.d.ts +1 -1
  38. package/dist/payouts/elements/withdrawals.d.ts +1 -1
  39. package/dist/payouts/index.d.ts +1 -1
  40. package/dist/payouts/with-fallback.d.ts +6 -47
  41. package/dist/payouts/with-fallback.js +2 -59
  42. package/dist/payouts/with-fallback.js.map +1 -1
  43. package/dist/payouts/with-fallback.mjs +2 -54
  44. package/dist/payouts/with-fallback.mjs.map +1 -1
  45. package/dist/wallet/elements/deposit.d.ts +11 -0
  46. package/dist/wallet/elements/deposit.js +30 -0
  47. package/dist/wallet/elements/deposit.js.map +1 -0
  48. package/dist/wallet/elements/deposit.mjs +8 -0
  49. package/dist/wallet/elements/deposit.mjs.map +1 -0
  50. package/dist/wallet/elements/index.d.ts +4 -0
  51. package/dist/wallet/elements/index.js +25 -0
  52. package/dist/wallet/elements/index.js.map +1 -0
  53. package/dist/wallet/elements/index.mjs +3 -0
  54. package/dist/wallet/elements/index.mjs.map +1 -0
  55. package/dist/wallet/index.d.ts +5 -0
  56. package/dist/wallet/index.js +20 -0
  57. package/dist/wallet/index.js.map +1 -0
  58. package/dist/wallet/index.mjs +2 -0
  59. package/dist/wallet/index.mjs.map +1 -0
  60. package/dist/wallet/session.d.ts +11 -0
  61. package/dist/wallet/session.js +73 -0
  62. package/dist/wallet/session.js.map +1 -0
  63. package/dist/wallet/session.mjs +52 -0
  64. package/dist/wallet/session.mjs.map +1 -0
  65. package/dist/wallet/use-session-ref.d.ts +8 -0
  66. package/dist/wallet/use-session-ref.js +29 -0
  67. package/dist/wallet/use-session-ref.js.map +1 -0
  68. package/dist/wallet/use-session-ref.mjs +7 -0
  69. package/dist/wallet/use-session-ref.mjs.map +1 -0
  70. package/dist/wallet/with-fallback.d.ts +14 -0
  71. package/dist/wallet/with-fallback.js +28 -0
  72. package/dist/wallet/with-fallback.js.map +1 -0
  73. package/dist/wallet/with-fallback.mjs +6 -0
  74. package/dist/wallet/with-fallback.mjs.map +1 -0
  75. package/package.json +2 -2
@@ -1,4 +1,4 @@
1
- import { WithFallbackPropsRequired } from '../with-fallback.js';
1
+ import { WithFallbackPropsRequired } from '../../lib/create-with-fallback.js';
2
2
  import * as _whop_embedded_components_vanilla_js_types from '@whop/embedded-components-vanilla-js/types';
3
3
  import 'react';
4
4
 
@@ -15,6 +15,6 @@ export { WithdrawElement } from './withdraw.js';
15
15
  export { WithdrawButtonElement } from './withdraw-button.js';
16
16
  export { WithdrawalBreakdownElement } from './withdrawal-breakdown.js';
17
17
  export { WithdrawalsElement } from './withdrawals.js';
18
- import '../with-fallback.js';
19
- import '@whop/embedded-components-vanilla-js/types';
18
+ import '../../lib/create-with-fallback.js';
20
19
  import 'react';
20
+ import '@whop/embedded-components-vanilla-js/types';
@@ -1,4 +1,4 @@
1
- import { WithFallbackPropsOptional } from '../with-fallback.js';
1
+ import { WithFallbackPropsOptional } from '../../lib/create-with-fallback.js';
2
2
  import * as _whop_embedded_components_vanilla_js_types from '@whop/embedded-components-vanilla-js/types';
3
3
  import 'react';
4
4
 
@@ -1,4 +1,4 @@
1
- import { WithFallbackPropsOptional } from '../with-fallback.js';
1
+ import { WithFallbackPropsOptional } from '../../lib/create-with-fallback.js';
2
2
  import * as _whop_embedded_components_vanilla_js_types from '@whop/embedded-components-vanilla-js/types';
3
3
  import 'react';
4
4
 
@@ -1,4 +1,4 @@
1
- import { WithFallbackPropsOptional } from '../with-fallback.js';
1
+ import { WithFallbackPropsOptional } from '../../lib/create-with-fallback.js';
2
2
  import * as _whop_embedded_components_vanilla_js_types from '@whop/embedded-components-vanilla-js/types';
3
3
  import 'react';
4
4
 
@@ -1,4 +1,4 @@
1
- import { WithFallbackPropsOptional } from '../with-fallback.js';
1
+ import { WithFallbackPropsOptional } from '../../lib/create-with-fallback.js';
2
2
  import * as _whop_embedded_components_vanilla_js_types from '@whop/embedded-components-vanilla-js/types';
3
3
  import 'react';
4
4
 
@@ -1,4 +1,4 @@
1
- import { WithFallbackPropsOptional } from '../with-fallback.js';
1
+ import { WithFallbackPropsOptional } from '../../lib/create-with-fallback.js';
2
2
  import * as _whop_embedded_components_vanilla_js_types from '@whop/embedded-components-vanilla-js/types';
3
3
  import 'react';
4
4
 
@@ -1,4 +1,4 @@
1
- import { WithFallbackPropsOptional } from '../with-fallback.js';
1
+ import { WithFallbackPropsOptional } from '../../lib/create-with-fallback.js';
2
2
  import * as _whop_embedded_components_vanilla_js_types from '@whop/embedded-components-vanilla-js/types';
3
3
  import 'react';
4
4
 
@@ -1,4 +1,4 @@
1
- import { WithFallbackPropsOptional } from '../with-fallback.js';
1
+ import { WithFallbackPropsOptional } from '../../lib/create-with-fallback.js';
2
2
  import * as _whop_embedded_components_vanilla_js_types from '@whop/embedded-components-vanilla-js/types';
3
3
  import 'react';
4
4
 
@@ -1,4 +1,4 @@
1
- import { WithFallbackPropsRequired } from '../with-fallback.js';
1
+ import { WithFallbackPropsRequired } from '../../lib/create-with-fallback.js';
2
2
  import * as _whop_embedded_components_vanilla_js_types from '@whop/embedded-components-vanilla-js/types';
3
3
  import 'react';
4
4
 
@@ -1,4 +1,4 @@
1
- import { WithFallbackPropsOptional } from '../with-fallback.js';
1
+ import { WithFallbackPropsOptional } from '../../lib/create-with-fallback.js';
2
2
  import * as _whop_embedded_components_vanilla_js_types from '@whop/embedded-components-vanilla-js/types';
3
3
  import 'react';
4
4
 
@@ -18,4 +18,4 @@ export { WithdrawalBreakdownElement } from './elements/withdrawal-breakdown.js';
18
18
  export { WithdrawalsElement } from './elements/withdrawals.js';
19
19
  import '@whop/embedded-components-vanilla-js/types';
20
20
  import 'react';
21
- import './with-fallback.js';
21
+ import '../lib/create-with-fallback.js';
@@ -1,55 +1,14 @@
1
+ import { WithFallbackPropsRequired, WithFallbackPropsOptional } from '../lib/create-with-fallback.js';
1
2
  import { PayoutsSessionElements } from '@whop/embedded-components-vanilla-js/types';
2
- import React__default from 'react';
3
+ import 'react';
3
4
 
4
- /**
5
- * Valid element type strings that can be passed to createElement.
6
- */
7
- type ElementType = keyof PayoutsSessionElements;
8
- /**
9
- * Extract the options type for a given element type using indexed access.
10
- * PayoutsSessionElements maps element types to [Options, Element] tuples.
11
- */
12
- type ElementOptionsFor<T extends ElementType> = PayoutsSessionElements[T][0];
13
- /**
14
- * Component definition with a constrained element type.
15
- * The type must be a valid element type from the SDK.
16
- */
17
- interface ElementComponentDefinition<T extends ElementType = ElementType> {
5
+ declare const withFallback: <const T extends "add-payout-method-element" | "available-cash-breakdown-element" | "balance-element" | "withdraw-button-element" | "withdraw-element" | "automatic-withdraw-element" | "verify-element" | "withdrawals-element" | "withdrawal-breakdown-element" | "change-account-country-element" | "reset-account-element" | "generate-withdrawal-receipt-element" | "status-banner-element" | "balances-element" | "pending-breakdown-element" | "reserve-breakdown-element" | "treasury-breakdown-element", TRequired extends boolean = false>(Component: {
18
6
  displayName: string;
19
7
  type: T;
20
- }
21
- interface WithFallbackPropsBase {
22
- className?: string;
23
- style?: React__default.CSSProperties;
24
- onReady?: () => void;
25
- fallback?: React__default.ReactNode;
26
- }
27
- interface WithFallbackPropsRequired<TOptions> extends WithFallbackPropsBase {
28
- options: TOptions;
29
- }
30
- interface WithFallbackPropsOptional<TOptions> extends WithFallbackPropsBase {
31
- options?: TOptions;
32
- }
33
- type WithFallbackComponent<TOptions, TRequired extends boolean> = {
34
- (props: TRequired extends true ? WithFallbackPropsRequired<TOptions> : WithFallbackPropsOptional<TOptions>): React__default.ReactNode;
8
+ }) => {
9
+ (props: TRequired extends true ? WithFallbackPropsRequired<PayoutsSessionElements[T][0]> : WithFallbackPropsOptional<PayoutsSessionElements[T][0]>): React.ReactNode;
35
10
  displayName: string;
36
11
  type: string;
37
12
  };
38
- /**
39
- * Creates a React component that wraps an embedded element with fallback support.
40
- *
41
- * @example
42
- * ```tsx
43
- * // Type-safe: options type is inferred from the element type
44
- * export const BalanceElement = withFallback({
45
- * displayName: "BalanceElement",
46
- * type: "balance-element",
47
- * } as const);
48
- *
49
- * // Usage - TypeScript knows the correct options type
50
- * <BalanceElement options={{ hidePendingBalance: true }} />
51
- * ```
52
- */
53
- declare function withFallback<const T extends ElementType, TRequired extends boolean = false>(Component: ElementComponentDefinition<T>): WithFallbackComponent<ElementOptionsFor<T>, TRequired>;
54
13
 
55
- export { type WithFallbackPropsOptional, type WithFallbackPropsRequired, withFallback };
14
+ export { WithFallbackPropsOptional, WithFallbackPropsRequired, withFallback };
@@ -1,10 +1,8 @@
1
1
  "use strict";
2
2
  "use client";
3
- var __create = Object.create;
4
3
  var __defProp = Object.defineProperty;
5
4
  var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
6
5
  var __getOwnPropNames = Object.getOwnPropertyNames;
7
- var __getProtoOf = Object.getPrototypeOf;
8
6
  var __hasOwnProp = Object.prototype.hasOwnProperty;
9
7
  var __export = (target, all) => {
10
8
  for (var name in all)
@@ -18,68 +16,13 @@ var __copyProps = (to, from, except, desc) => {
18
16
  }
19
17
  return to;
20
18
  };
21
- var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
22
- // If the importer is in node compatibility mode or this is not an ESM
23
- // file that has been converted to a CommonJS file using a Babel-
24
- // compatible transform (i.e. "__esModule" has not been set), then set
25
- // "default" to the CommonJS "module.exports" for node compatibility.
26
- isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
27
- mod
28
- ));
29
19
  var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
30
20
  var with_fallback_exports = {};
31
21
  __export(with_fallback_exports, {
32
22
  withFallback: () => withFallback
33
23
  });
34
24
  module.exports = __toCommonJS(with_fallback_exports);
35
- var import_react = __toESM(require("react"));
36
- var import_use_element_snapshot = require("../lib/use-element-snapshot");
25
+ var import_create_with_fallback = require("../lib/create-with-fallback");
37
26
  var import_session = require("./session");
38
- function withFallback(Component) {
39
- function WrappedElement({
40
- options,
41
- className,
42
- style,
43
- onReady,
44
- fallback
45
- }) {
46
- const payoutsSession = (0, import_session.usePayoutsSession)();
47
- const ref = (0, import_react.useRef)(null);
48
- const element = (0, import_react.useMemo)(() => {
49
- if (!payoutsSession) return null;
50
- return payoutsSession.createElement(Component, options ?? {});
51
- }, [payoutsSession]);
52
- const elementSnapshot = (0, import_use_element_snapshot.useElementSnapshot)(element);
53
- const isReady = elementSnapshot?.state === "ready";
54
- (0, import_react.useEffect)(() => {
55
- if (!element) return;
56
- element.updateOptions(options ?? {});
57
- }, [options, element]);
58
- (0, import_react.useEffect)(() => {
59
- if (!element || !onReady) return;
60
- element.on("ready", onReady);
61
- return () => {
62
- element.off("ready", onReady);
63
- };
64
- }, [element, onReady]);
65
- (0, import_react.useLayoutEffect)(() => {
66
- if (!element || !ref.current) return;
67
- element.mount(ref.current);
68
- return () => {
69
- element.unmount();
70
- };
71
- }, [element, ref.current]);
72
- return /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, /* @__PURE__ */ import_react.default.createElement(
73
- "div",
74
- {
75
- style: { ...style, visibility: isReady ? void 0 : "hidden" },
76
- className,
77
- ref
78
- }
79
- ), !isReady && (fallback ?? null));
80
- }
81
- WrappedElement.displayName = Component.displayName;
82
- WrappedElement.type = Component.type;
83
- return WrappedElement;
84
- }
27
+ const withFallback = (0, import_create_with_fallback.createWithFallback)(import_session.usePayoutsSession);
85
28
  //# sourceMappingURL=with-fallback.js.map
@@ -1 +1 @@
1
- {"version":3,"sources":["../../src/payouts/with-fallback.tsx"],"sourcesContent":["\"use client\";\n\nimport type {\n\tPayoutsSessionElements,\n\tWhopElement,\n} from \"@whop/embedded-components-vanilla-js/types\";\nimport React, { useEffect, useLayoutEffect, useMemo, useRef } from \"react\";\nimport { useElementSnapshot } from \"../lib/use-element-snapshot\";\nimport { usePayoutsSession } from \"./session\";\n\n/**\n * Valid element type strings that can be passed to createElement.\n */\ntype ElementType = keyof PayoutsSessionElements;\n\n/**\n * Extract the options type for a given element type using indexed access.\n * PayoutsSessionElements maps element types to [Options, Element] tuples.\n */\ntype ElementOptionsFor<T extends ElementType> = PayoutsSessionElements[T][0];\n\n/**\n * Base element type that all created elements conform to.\n * Using WhopElement<any, any, any> gives us access to common methods\n * (mount, unmount, on, off, updateOptions) without union type issues.\n */\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\ntype BaseElement = WhopElement<any, any, any>;\n\n/**\n * Component definition with a constrained element type.\n * The type must be a valid element type from the SDK.\n */\ninterface ElementComponentDefinition<T extends ElementType = ElementType> {\n\tdisplayName: string;\n\ttype: T;\n}\n\ninterface WithFallbackPropsBase {\n\tclassName?: string;\n\tstyle?: React.CSSProperties;\n\tonReady?: () => void;\n\tfallback?: React.ReactNode;\n}\n\nexport interface WithFallbackPropsRequired<\n\tTOptions,\n> extends WithFallbackPropsBase {\n\toptions: TOptions;\n}\n\nexport interface WithFallbackPropsOptional<\n\tTOptions,\n> extends WithFallbackPropsBase {\n\toptions?: TOptions;\n}\n\ntype WithFallbackComponent<TOptions, TRequired extends boolean> = {\n\t(\n\t\tprops: TRequired extends true\n\t\t\t? WithFallbackPropsRequired<TOptions>\n\t\t\t: WithFallbackPropsOptional<TOptions>,\n\t): React.ReactNode;\n\tdisplayName: string;\n\ttype: string;\n};\n\n/**\n * Creates a React component that wraps an embedded element with fallback support.\n *\n * @example\n * ```tsx\n * // Type-safe: options type is inferred from the element type\n * export const BalanceElement = withFallback({\n * displayName: \"BalanceElement\",\n * type: \"balance-element\",\n * } as const);\n *\n * // Usage - TypeScript knows the correct options type\n * <BalanceElement options={{ hidePendingBalance: true }} />\n * ```\n */\nexport function withFallback<\n\tconst T extends ElementType,\n\tTRequired extends boolean = false,\n>(\n\tComponent: ElementComponentDefinition<T>,\n): WithFallbackComponent<ElementOptionsFor<T>, TRequired> {\n\ttype TOptions = ElementOptionsFor<T>;\n\n\tfunction WrappedElement({\n\t\toptions,\n\t\tclassName,\n\t\tstyle,\n\t\tonReady,\n\t\tfallback,\n\t}: WithFallbackPropsOptional<TOptions>) {\n\t\tconst payoutsSession = usePayoutsSession();\n\t\tconst ref = useRef<HTMLDivElement>(null);\n\n\t\tconst element = useMemo((): BaseElement | null => {\n\t\t\tif (!payoutsSession) return null;\n\t\t\t// Safe: T is constrained to valid element types, and options matches T\n\t\t\treturn payoutsSession.createElement(Component, options ?? {});\n\t\t}, [payoutsSession]);\n\n\t\tconst elementSnapshot = useElementSnapshot(element);\n\n\t\tconst isReady = elementSnapshot?.state === \"ready\";\n\n\t\tuseEffect(() => {\n\t\t\tif (!element) return;\n\t\t\telement.updateOptions(options ?? {});\n\t\t}, [options, element]);\n\n\t\tuseEffect(() => {\n\t\t\tif (!element || !onReady) return;\n\t\t\telement.on(\"ready\", onReady);\n\t\t\treturn () => {\n\t\t\t\telement.off(\"ready\", onReady);\n\t\t\t};\n\t\t}, [element, onReady]);\n\n\t\tuseLayoutEffect(() => {\n\t\t\tif (!element || !ref.current) return;\n\t\t\telement.mount(ref.current);\n\t\t\treturn () => {\n\t\t\t\telement.unmount();\n\t\t\t};\n\t\t}, [element, ref.current]);\n\n\t\treturn (\n\t\t\t<>\n\t\t\t\t<div\n\t\t\t\t\tstyle={{ ...style, visibility: isReady ? undefined : \"hidden\" }}\n\t\t\t\t\tclassName={className}\n\t\t\t\t\tref={ref}\n\t\t\t\t/>\n\t\t\t\t{!isReady && (fallback ?? null)}\n\t\t\t</>\n\t\t);\n\t}\n\n\tWrappedElement.displayName = Component.displayName;\n\tWrappedElement.type = Component.type;\n\n\treturn WrappedElement as WithFallbackComponent<TOptions, TRequired>;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAMA,mBAAmE;AACnE,kCAAmC;AACnC,qBAAkC;AA0E3B,SAAS,aAIf,WACyD;AAGzD,WAAS,eAAe;AAAA,IACvB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACD,GAAwC;AACvC,UAAM,qBAAiB,kCAAkB;AACzC,UAAM,UAAM,qBAAuB,IAAI;AAEvC,UAAM,cAAU,sBAAQ,MAA0B;AACjD,UAAI,CAAC,eAAgB,QAAO;AAE5B,aAAO,eAAe,cAAc,WAAW,WAAW,CAAC,CAAC;AAAA,IAC7D,GAAG,CAAC,cAAc,CAAC;AAEnB,UAAM,sBAAkB,gDAAmB,OAAO;AAElD,UAAM,UAAU,iBAAiB,UAAU;AAE3C,gCAAU,MAAM;AACf,UAAI,CAAC,QAAS;AACd,cAAQ,cAAc,WAAW,CAAC,CAAC;AAAA,IACpC,GAAG,CAAC,SAAS,OAAO,CAAC;AAErB,gCAAU,MAAM;AACf,UAAI,CAAC,WAAW,CAAC,QAAS;AAC1B,cAAQ,GAAG,SAAS,OAAO;AAC3B,aAAO,MAAM;AACZ,gBAAQ,IAAI,SAAS,OAAO;AAAA,MAC7B;AAAA,IACD,GAAG,CAAC,SAAS,OAAO,CAAC;AAErB,sCAAgB,MAAM;AACrB,UAAI,CAAC,WAAW,CAAC,IAAI,QAAS;AAC9B,cAAQ,MAAM,IAAI,OAAO;AACzB,aAAO,MAAM;AACZ,gBAAQ,QAAQ;AAAA,MACjB;AAAA,IACD,GAAG,CAAC,SAAS,IAAI,OAAO,CAAC;AAEzB,WACC,6BAAAA,QAAA,2BAAAA,QAAA,gBACC,6BAAAA,QAAA;AAAA,MAAC;AAAA;AAAA,QACA,OAAO,EAAE,GAAG,OAAO,YAAY,UAAU,SAAY,SAAS;AAAA,QAC9D;AAAA,QACA;AAAA;AAAA,IACD,GACC,CAAC,YAAY,YAAY,KAC3B;AAAA,EAEF;AAEA,iBAAe,cAAc,UAAU;AACvC,iBAAe,OAAO,UAAU;AAEhC,SAAO;AACR;","names":["React"]}
1
+ {"version":3,"sources":["../../src/payouts/with-fallback.tsx"],"sourcesContent":["\"use client\";\n\nimport type { PayoutsSessionElements } from \"@whop/embedded-components-vanilla-js/types\";\n\nimport { createWithFallback } from \"../lib/create-with-fallback\";\nimport { usePayoutsSession } from \"./session\";\n\nexport type {\n\tWithFallbackPropsOptional,\n\tWithFallbackPropsRequired,\n} from \"../lib/create-with-fallback\";\n\nexport const withFallback =\n\tcreateWithFallback<PayoutsSessionElements>(usePayoutsSession);\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAIA,kCAAmC;AACnC,qBAAkC;AAO3B,MAAM,mBACZ,gDAA2C,gCAAiB;","names":[]}
@@ -1,58 +1,6 @@
1
1
  "use client";
2
2
  import "../chunk-NSSMTXJJ.mjs";
3
- import React, { useEffect, useLayoutEffect, useMemo, useRef } from "react";
4
- import { useElementSnapshot } from "../lib/use-element-snapshot.mjs";
3
+ import { createWithFallback } from "../lib/create-with-fallback.mjs";
5
4
  import { usePayoutsSession } from "./session.mjs";
6
- function withFallback(Component) {
7
- function WrappedElement({ options, className, style, onReady, fallback }) {
8
- const payoutsSession = usePayoutsSession();
9
- const ref = useRef(null);
10
- const element = useMemo(()=>{
11
- if (!payoutsSession) return null;
12
- return payoutsSession.createElement(Component, options ?? {});
13
- }, [
14
- payoutsSession
15
- ]);
16
- const elementSnapshot = useElementSnapshot(element);
17
- const isReady = elementSnapshot?.state === "ready";
18
- useEffect(()=>{
19
- if (!element) return;
20
- element.updateOptions(options ?? {});
21
- }, [
22
- options,
23
- element
24
- ]);
25
- useEffect(()=>{
26
- if (!element || !onReady) return;
27
- element.on("ready", onReady);
28
- return ()=>{
29
- element.off("ready", onReady);
30
- };
31
- }, [
32
- element,
33
- onReady
34
- ]);
35
- useLayoutEffect(()=>{
36
- if (!element || !ref.current) return;
37
- element.mount(ref.current);
38
- return ()=>{
39
- element.unmount();
40
- };
41
- }, [
42
- element,
43
- ref.current
44
- ]);
45
- return React.createElement(React.Fragment, null, React.createElement("div", {
46
- style: {
47
- ...style,
48
- visibility: isReady ? void 0 : "hidden"
49
- },
50
- className,
51
- ref
52
- }), !isReady && (fallback ?? null));
53
- }
54
- WrappedElement.displayName = Component.displayName;
55
- WrappedElement.type = Component.type;
56
- return WrappedElement;
57
- }
5
+ const withFallback = createWithFallback(usePayoutsSession);
58
6
  export { withFallback };
@@ -1 +1 @@
1
- {"version":3,"sources":["../../src/payouts/with-fallback.tsx"],"sourcesContent":["\"use client\";\n\nimport type {\n\tPayoutsSessionElements,\n\tWhopElement,\n} from \"@whop/embedded-components-vanilla-js/types\";\nimport React, { useEffect, useLayoutEffect, useMemo, useRef } from \"react\";\nimport { useElementSnapshot } from \"../lib/use-element-snapshot\";\nimport { usePayoutsSession } from \"./session\";\n\n/**\n * Valid element type strings that can be passed to createElement.\n */\ntype ElementType = keyof PayoutsSessionElements;\n\n/**\n * Extract the options type for a given element type using indexed access.\n * PayoutsSessionElements maps element types to [Options, Element] tuples.\n */\ntype ElementOptionsFor<T extends ElementType> = PayoutsSessionElements[T][0];\n\n/**\n * Base element type that all created elements conform to.\n * Using WhopElement<any, any, any> gives us access to common methods\n * (mount, unmount, on, off, updateOptions) without union type issues.\n */\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\ntype BaseElement = WhopElement<any, any, any>;\n\n/**\n * Component definition with a constrained element type.\n * The type must be a valid element type from the SDK.\n */\ninterface ElementComponentDefinition<T extends ElementType = ElementType> {\n\tdisplayName: string;\n\ttype: T;\n}\n\ninterface WithFallbackPropsBase {\n\tclassName?: string;\n\tstyle?: React.CSSProperties;\n\tonReady?: () => void;\n\tfallback?: React.ReactNode;\n}\n\nexport interface WithFallbackPropsRequired<\n\tTOptions,\n> extends WithFallbackPropsBase {\n\toptions: TOptions;\n}\n\nexport interface WithFallbackPropsOptional<\n\tTOptions,\n> extends WithFallbackPropsBase {\n\toptions?: TOptions;\n}\n\ntype WithFallbackComponent<TOptions, TRequired extends boolean> = {\n\t(\n\t\tprops: TRequired extends true\n\t\t\t? WithFallbackPropsRequired<TOptions>\n\t\t\t: WithFallbackPropsOptional<TOptions>,\n\t): React.ReactNode;\n\tdisplayName: string;\n\ttype: string;\n};\n\n/**\n * Creates a React component that wraps an embedded element with fallback support.\n *\n * @example\n * ```tsx\n * // Type-safe: options type is inferred from the element type\n * export const BalanceElement = withFallback({\n * displayName: \"BalanceElement\",\n * type: \"balance-element\",\n * } as const);\n *\n * // Usage - TypeScript knows the correct options type\n * <BalanceElement options={{ hidePendingBalance: true }} />\n * ```\n */\nexport function withFallback<\n\tconst T extends ElementType,\n\tTRequired extends boolean = false,\n>(\n\tComponent: ElementComponentDefinition<T>,\n): WithFallbackComponent<ElementOptionsFor<T>, TRequired> {\n\ttype TOptions = ElementOptionsFor<T>;\n\n\tfunction WrappedElement({\n\t\toptions,\n\t\tclassName,\n\t\tstyle,\n\t\tonReady,\n\t\tfallback,\n\t}: WithFallbackPropsOptional<TOptions>) {\n\t\tconst payoutsSession = usePayoutsSession();\n\t\tconst ref = useRef<HTMLDivElement>(null);\n\n\t\tconst element = useMemo((): BaseElement | null => {\n\t\t\tif (!payoutsSession) return null;\n\t\t\t// Safe: T is constrained to valid element types, and options matches T\n\t\t\treturn payoutsSession.createElement(Component, options ?? {});\n\t\t}, [payoutsSession]);\n\n\t\tconst elementSnapshot = useElementSnapshot(element);\n\n\t\tconst isReady = elementSnapshot?.state === \"ready\";\n\n\t\tuseEffect(() => {\n\t\t\tif (!element) return;\n\t\t\telement.updateOptions(options ?? {});\n\t\t}, [options, element]);\n\n\t\tuseEffect(() => {\n\t\t\tif (!element || !onReady) return;\n\t\t\telement.on(\"ready\", onReady);\n\t\t\treturn () => {\n\t\t\t\telement.off(\"ready\", onReady);\n\t\t\t};\n\t\t}, [element, onReady]);\n\n\t\tuseLayoutEffect(() => {\n\t\t\tif (!element || !ref.current) return;\n\t\t\telement.mount(ref.current);\n\t\t\treturn () => {\n\t\t\t\telement.unmount();\n\t\t\t};\n\t\t}, [element, ref.current]);\n\n\t\treturn (\n\t\t\t<>\n\t\t\t\t<div\n\t\t\t\t\tstyle={{ ...style, visibility: isReady ? undefined : \"hidden\" }}\n\t\t\t\t\tclassName={className}\n\t\t\t\t\tref={ref}\n\t\t\t\t/>\n\t\t\t\t{!isReady && (fallback ?? null)}\n\t\t\t</>\n\t\t);\n\t}\n\n\tWrappedElement.displayName = Component.displayName;\n\tWrappedElement.type = Component.type;\n\n\treturn WrappedElement as WithFallbackComponent<TOptions, TRequired>;\n}\n"],"mappings":";;AAMA,OAAO,SAAS,WAAW,iBAAiB,SAAS,cAAc;AACnE,SAAS,0BAA0B;AACnC,SAAS,yBAAyB;AA0E3B,SAAS,aAIf,WACyD;AAGzD,WAAS,eAAe;AAAA,IACvB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACD,GAAwC;AACvC,UAAM,iBAAiB,kBAAkB;AACzC,UAAM,MAAM,OAAuB,IAAI;AAEvC,UAAM,UAAU,QAAQ,MAA0B;AACjD,UAAI,CAAC,eAAgB,QAAO;AAE5B,aAAO,eAAe,cAAc,WAAW,WAAW,CAAC,CAAC;AAAA,IAC7D,GAAG,CAAC,cAAc,CAAC;AAEnB,UAAM,kBAAkB,mBAAmB,OAAO;AAElD,UAAM,UAAU,iBAAiB,UAAU;AAE3C,cAAU,MAAM;AACf,UAAI,CAAC,QAAS;AACd,cAAQ,cAAc,WAAW,CAAC,CAAC;AAAA,IACpC,GAAG,CAAC,SAAS,OAAO,CAAC;AAErB,cAAU,MAAM;AACf,UAAI,CAAC,WAAW,CAAC,QAAS;AAC1B,cAAQ,GAAG,SAAS,OAAO;AAC3B,aAAO,MAAM;AACZ,gBAAQ,IAAI,SAAS,OAAO;AAAA,MAC7B;AAAA,IACD,GAAG,CAAC,SAAS,OAAO,CAAC;AAErB,oBAAgB,MAAM;AACrB,UAAI,CAAC,WAAW,CAAC,IAAI,QAAS;AAC9B,cAAQ,MAAM,IAAI,OAAO;AACzB,aAAO,MAAM;AACZ,gBAAQ,QAAQ;AAAA,MACjB;AAAA,IACD,GAAG,CAAC,SAAS,IAAI,OAAO,CAAC;AAEzB,WACC,0DACC;AAAA,MAAC;AAAA;AAAA,QACA,OAAO,EAAE,GAAG,OAAO,YAAY,UAAU,SAAY,SAAS;AAAA,QAC9D;AAAA,QACA;AAAA;AAAA,IACD,GACC,CAAC,YAAY,YAAY,KAC3B;AAAA,EAEF;AAEA,iBAAe,cAAc,UAAU;AACvC,iBAAe,OAAO,UAAU;AAEhC,SAAO;AACR;","names":[]}
1
+ {"version":3,"sources":["../../src/payouts/with-fallback.tsx"],"sourcesContent":["\"use client\";\n\nimport type { PayoutsSessionElements } from \"@whop/embedded-components-vanilla-js/types\";\n\nimport { createWithFallback } from \"../lib/create-with-fallback\";\nimport { usePayoutsSession } from \"./session\";\n\nexport type {\n\tWithFallbackPropsOptional,\n\tWithFallbackPropsRequired,\n} from \"../lib/create-with-fallback\";\n\nexport const withFallback =\n\tcreateWithFallback<PayoutsSessionElements>(usePayoutsSession);\n"],"mappings":";;AAIA,SAAS,0BAA0B;AACnC,SAAS,yBAAyB;AAO3B,MAAM,eACZ,mBAA2C,iBAAiB;","names":[]}
@@ -0,0 +1,11 @@
1
+ import { WithFallbackPropsOptional } from '../../lib/create-with-fallback.js';
2
+ import * as _whop_embedded_components_vanilla_js_types from '@whop/embedded-components-vanilla-js/types';
3
+ import 'react';
4
+
5
+ declare const DepositElement: {
6
+ (props: WithFallbackPropsOptional<_whop_embedded_components_vanilla_js_types.DepositElementOptions>): React.ReactNode;
7
+ displayName: string;
8
+ type: string;
9
+ };
10
+
11
+ export { DepositElement };
@@ -0,0 +1,30 @@
1
+ "use strict";
2
+ "use client";
3
+ var __defProp = Object.defineProperty;
4
+ var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
5
+ var __getOwnPropNames = Object.getOwnPropertyNames;
6
+ var __hasOwnProp = Object.prototype.hasOwnProperty;
7
+ var __export = (target, all) => {
8
+ for (var name in all)
9
+ __defProp(target, name, { get: all[name], enumerable: true });
10
+ };
11
+ var __copyProps = (to, from, except, desc) => {
12
+ if (from && typeof from === "object" || typeof from === "function") {
13
+ for (let key of __getOwnPropNames(from))
14
+ if (!__hasOwnProp.call(to, key) && key !== except)
15
+ __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
16
+ }
17
+ return to;
18
+ };
19
+ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
20
+ var deposit_exports = {};
21
+ __export(deposit_exports, {
22
+ DepositElement: () => DepositElement
23
+ });
24
+ module.exports = __toCommonJS(deposit_exports);
25
+ var import_with_fallback = require("../with-fallback");
26
+ const DepositElement = (0, import_with_fallback.withFallback)({
27
+ displayName: "DepositElement",
28
+ type: "deposit-element"
29
+ });
30
+ //# sourceMappingURL=deposit.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../../../src/wallet/elements/deposit.tsx"],"sourcesContent":["\"use client\";\n\nimport { withFallback } from \"../with-fallback\";\n\nexport const DepositElement = withFallback({\n\tdisplayName: \"DepositElement\",\n\ttype: \"deposit-element\",\n} as const);\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAEA,2BAA6B;AAEtB,MAAM,qBAAiB,mCAAa;AAAA,EAC1C,aAAa;AAAA,EACb,MAAM;AACP,CAAU;","names":[]}
@@ -0,0 +1,8 @@
1
+ "use client";
2
+ import "../../chunk-NSSMTXJJ.mjs";
3
+ import { withFallback } from "../with-fallback.mjs";
4
+ const DepositElement = withFallback({
5
+ displayName: "DepositElement",
6
+ type: "deposit-element"
7
+ });
8
+ export { DepositElement };
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../../../src/wallet/elements/deposit.tsx"],"sourcesContent":["\"use client\";\n\nimport { withFallback } from \"../with-fallback\";\n\nexport const DepositElement = withFallback({\n\tdisplayName: \"DepositElement\",\n\ttype: \"deposit-element\",\n} as const);\n"],"mappings":";;AAEA,SAAS,oBAAoB;AAEtB,MAAM,iBAAiB,aAAa;AAAA,EAC1C,aAAa;AAAA,EACb,MAAM;AACP,CAAU;","names":[]}
@@ -0,0 +1,4 @@
1
+ export { DepositElement } from './deposit.js';
2
+ import '../../lib/create-with-fallback.js';
3
+ import 'react';
4
+ import '@whop/embedded-components-vanilla-js/types';
@@ -0,0 +1,25 @@
1
+ "use strict";
2
+ var __defProp = Object.defineProperty;
3
+ var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
4
+ var __getOwnPropNames = Object.getOwnPropertyNames;
5
+ var __hasOwnProp = Object.prototype.hasOwnProperty;
6
+ var __export = (target, all) => {
7
+ for (var name in all)
8
+ __defProp(target, name, { get: all[name], enumerable: true });
9
+ };
10
+ var __copyProps = (to, from, except, desc) => {
11
+ if (from && typeof from === "object" || typeof from === "function") {
12
+ for (let key of __getOwnPropNames(from))
13
+ if (!__hasOwnProp.call(to, key) && key !== except)
14
+ __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
15
+ }
16
+ return to;
17
+ };
18
+ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
19
+ var elements_exports = {};
20
+ __export(elements_exports, {
21
+ DepositElement: () => import_deposit.DepositElement
22
+ });
23
+ module.exports = __toCommonJS(elements_exports);
24
+ var import_deposit = require("./deposit");
25
+ //# sourceMappingURL=index.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../../../src/wallet/elements/index.tsx"],"sourcesContent":["export { DepositElement } from \"./deposit\";\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,qBAA+B;","names":[]}
@@ -0,0 +1,3 @@
1
+ import "../../chunk-NSSMTXJJ.mjs";
2
+ import { DepositElement } from "./deposit.mjs";
3
+ export { DepositElement };
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../../../src/wallet/elements/index.tsx"],"sourcesContent":["export { DepositElement } from \"./deposit\";\n"],"mappings":";AAAA,SAAS,sBAAsB;","names":[]}
@@ -0,0 +1,5 @@
1
+ export { DepositElement } from './elements/deposit.js';
2
+ export { WalletSession, useWalletSession } from './session.js';
3
+ import '../lib/create-with-fallback.js';
4
+ import 'react';
5
+ import '@whop/embedded-components-vanilla-js/types';
@@ -0,0 +1,20 @@
1
+ "use strict";
2
+ var __defProp = Object.defineProperty;
3
+ var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
4
+ var __getOwnPropNames = Object.getOwnPropertyNames;
5
+ var __hasOwnProp = Object.prototype.hasOwnProperty;
6
+ var __copyProps = (to, from, except, desc) => {
7
+ if (from && typeof from === "object" || typeof from === "function") {
8
+ for (let key of __getOwnPropNames(from))
9
+ if (!__hasOwnProp.call(to, key) && key !== except)
10
+ __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
11
+ }
12
+ return to;
13
+ };
14
+ var __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "default"), secondTarget && __copyProps(secondTarget, mod, "default"));
15
+ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
16
+ var wallet_exports = {};
17
+ module.exports = __toCommonJS(wallet_exports);
18
+ __reExport(wallet_exports, require("./elements"), module.exports);
19
+ __reExport(wallet_exports, require("./session"), module.exports);
20
+ //# sourceMappingURL=index.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../../src/wallet/index.tsx"],"sourcesContent":["export * from \"./elements\";\nexport * from \"./session\";\n"],"mappings":";;;;;;;;;;;;;;;AAAA;AAAA;AAAA,2BAAc,uBAAd;AACA,2BAAc,sBADd;","names":[]}
@@ -0,0 +1,2 @@
1
+ export * from "./elements/index.mjs";
2
+ export * from "./session.mjs";
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../../src/wallet/index.tsx"],"sourcesContent":["export * from \"./elements\";\nexport * from \"./session\";\n"],"mappings":"AAAA,cAAc;AACd,cAAc;","names":[]}
@@ -0,0 +1,11 @@
1
+ import { WalletSessionOptions, WalletSession as WalletSession$1 } from '@whop/embedded-components-vanilla-js/types';
2
+ import React__default, { PropsWithChildren } from 'react';
3
+
4
+ declare function WalletSession({ children, token, companyId, currency, ref, }: PropsWithChildren<WalletSessionOptions & {
5
+ ref?: React__default.RefObject<{
6
+ walletSession: WalletSession$1 | null;
7
+ } | null>;
8
+ }>): React__default.JSX.Element;
9
+ declare function useWalletSession(): WalletSession$1 | null;
10
+
11
+ export { WalletSession, useWalletSession };
@@ -0,0 +1,73 @@
1
+ "use strict";
2
+ "use client";
3
+ var __create = Object.create;
4
+ var __defProp = Object.defineProperty;
5
+ var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
6
+ var __getOwnPropNames = Object.getOwnPropertyNames;
7
+ var __getProtoOf = Object.getPrototypeOf;
8
+ var __hasOwnProp = Object.prototype.hasOwnProperty;
9
+ var __export = (target, all) => {
10
+ for (var name in all)
11
+ __defProp(target, name, { get: all[name], enumerable: true });
12
+ };
13
+ var __copyProps = (to, from, except, desc) => {
14
+ if (from && typeof from === "object" || typeof from === "function") {
15
+ for (let key of __getOwnPropNames(from))
16
+ if (!__hasOwnProp.call(to, key) && key !== except)
17
+ __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
18
+ }
19
+ return to;
20
+ };
21
+ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
22
+ // If the importer is in node compatibility mode or this is not an ESM
23
+ // file that has been converted to a CommonJS file using a Babel-
24
+ // compatible transform (i.e. "__esModule" has not been set), then set
25
+ // "default" to the CommonJS "module.exports" for node compatibility.
26
+ isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
27
+ mod
28
+ ));
29
+ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
30
+ var session_exports = {};
31
+ __export(session_exports, {
32
+ WalletSession: () => WalletSession,
33
+ useWalletSession: () => useWalletSession
34
+ });
35
+ module.exports = __toCommonJS(session_exports);
36
+ var import_react = __toESM(require("react"));
37
+ var import_provider = require("../provider");
38
+ const WalletSessionContext = (0, import_react.createContext)(null);
39
+ function WalletSession({
40
+ children,
41
+ token,
42
+ companyId,
43
+ currency,
44
+ ref
45
+ }) {
46
+ const elements = (0, import_provider.useElements)();
47
+ const walletSession = (0, import_react.useMemo)(() => {
48
+ if (!elements) return null;
49
+ return elements.createWalletSession({ token, companyId, currency });
50
+ }, [elements]);
51
+ (0, import_react.useEffect)(() => {
52
+ if (!walletSession) return;
53
+ walletSession.updateOptions({ token, companyId, currency });
54
+ }, [walletSession, token, companyId, currency]);
55
+ const value = (0, import_react.useMemo)(
56
+ () => ({
57
+ walletSession
58
+ }),
59
+ [walletSession]
60
+ );
61
+ (0, import_react.useImperativeHandle)(ref, () => ({ walletSession }), [walletSession]);
62
+ return /* @__PURE__ */ import_react.default.createElement(WalletSessionContext.Provider, { value }, children);
63
+ }
64
+ function useWalletSession() {
65
+ const ctx = (0, import_react.useContext)(WalletSessionContext);
66
+ if (!ctx) {
67
+ throw new Error(
68
+ "useWalletSession must be used within a WalletSessionProvider"
69
+ );
70
+ }
71
+ return ctx.walletSession;
72
+ }
73
+ //# sourceMappingURL=session.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../../src/wallet/session.tsx"],"sourcesContent":["\"use client\";\n\nimport type {\n\tWalletSessionOptions,\n\tWalletSession as WalletSessionType,\n} from \"@whop/embedded-components-vanilla-js/types\";\nimport type { PropsWithChildren } from \"react\";\n\nimport React, {\n\tcreateContext,\n\tuseContext,\n\tuseEffect,\n\tuseImperativeHandle,\n\tuseMemo,\n} from \"react\";\nimport { useElements } from \"../provider\";\n\ninterface ContextState {\n\twalletSession: WalletSessionType | null;\n}\n\nconst WalletSessionContext = createContext<ContextState | null>(null);\n\nexport function WalletSession({\n\tchildren,\n\ttoken,\n\tcompanyId,\n\tcurrency,\n\tref,\n}: PropsWithChildren<\n\tWalletSessionOptions & {\n\t\tref?: React.RefObject<{\n\t\t\twalletSession: WalletSessionType | null;\n\t\t} | null>;\n\t}\n>) {\n\tconst elements = useElements();\n\n\tconst walletSession = useMemo(() => {\n\t\tif (!elements) return null;\n\t\treturn elements.createWalletSession({ token, companyId, currency });\n\t\t// eslint-disable-next-line react-hooks/exhaustive-deps -- session created once per elements instance\n\t}, [elements]);\n\n\tuseEffect(() => {\n\t\tif (!walletSession) return;\n\t\twalletSession.updateOptions({ token, companyId, currency });\n\t}, [walletSession, token, companyId, currency]);\n\n\tconst value: ContextState = useMemo(\n\t\t() => ({\n\t\t\twalletSession,\n\t\t}),\n\t\t[walletSession],\n\t);\n\n\tuseImperativeHandle(ref, () => ({ walletSession }), [walletSession]);\n\n\treturn (\n\t\t<WalletSessionContext.Provider value={value}>\n\t\t\t{children}\n\t\t</WalletSessionContext.Provider>\n\t);\n}\n\nexport function useWalletSession() {\n\tconst ctx = useContext(WalletSessionContext);\n\tif (!ctx) {\n\t\tthrow new Error(\n\t\t\t\"useWalletSession must be used within a WalletSessionProvider\",\n\t\t);\n\t}\n\treturn ctx.walletSession;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAQA,mBAMO;AACP,sBAA4B;AAM5B,MAAM,2BAAuB,4BAAmC,IAAI;AAE7D,SAAS,cAAc;AAAA,EAC7B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACD,GAMG;AACF,QAAM,eAAW,6BAAY;AAE7B,QAAM,oBAAgB,sBAAQ,MAAM;AACnC,QAAI,CAAC,SAAU,QAAO;AACtB,WAAO,SAAS,oBAAoB,EAAE,OAAO,WAAW,SAAS,CAAC;AAAA,EAEnE,GAAG,CAAC,QAAQ,CAAC;AAEb,8BAAU,MAAM;AACf,QAAI,CAAC,cAAe;AACpB,kBAAc,cAAc,EAAE,OAAO,WAAW,SAAS,CAAC;AAAA,EAC3D,GAAG,CAAC,eAAe,OAAO,WAAW,QAAQ,CAAC;AAE9C,QAAM,YAAsB;AAAA,IAC3B,OAAO;AAAA,MACN;AAAA,IACD;AAAA,IACA,CAAC,aAAa;AAAA,EACf;AAEA,wCAAoB,KAAK,OAAO,EAAE,cAAc,IAAI,CAAC,aAAa,CAAC;AAEnE,SACC,6BAAAA,QAAA,cAAC,qBAAqB,UAArB,EAA8B,SAC7B,QACF;AAEF;AAEO,SAAS,mBAAmB;AAClC,QAAM,UAAM,yBAAW,oBAAoB;AAC3C,MAAI,CAAC,KAAK;AACT,UAAM,IAAI;AAAA,MACT;AAAA,IACD;AAAA,EACD;AACA,SAAO,IAAI;AACZ;","names":["React"]}
@@ -0,0 +1,52 @@
1
+ "use client";
2
+ import "../chunk-NSSMTXJJ.mjs";
3
+ import React, { createContext, useContext, useEffect, useImperativeHandle, useMemo } from "react";
4
+ import { useElements } from "../provider.mjs";
5
+ const WalletSessionContext = createContext(null);
6
+ function WalletSession({ children, token, companyId, currency, ref }) {
7
+ const elements = useElements();
8
+ const walletSession = useMemo(()=>{
9
+ if (!elements) return null;
10
+ return elements.createWalletSession({
11
+ token,
12
+ companyId,
13
+ currency
14
+ });
15
+ }, [
16
+ elements
17
+ ]);
18
+ useEffect(()=>{
19
+ if (!walletSession) return;
20
+ walletSession.updateOptions({
21
+ token,
22
+ companyId,
23
+ currency
24
+ });
25
+ }, [
26
+ walletSession,
27
+ token,
28
+ companyId,
29
+ currency
30
+ ]);
31
+ const value = useMemo(()=>({
32
+ walletSession
33
+ }), [
34
+ walletSession
35
+ ]);
36
+ useImperativeHandle(ref, ()=>({
37
+ walletSession
38
+ }), [
39
+ walletSession
40
+ ]);
41
+ return React.createElement(WalletSessionContext.Provider, {
42
+ value
43
+ }, children);
44
+ }
45
+ function useWalletSession() {
46
+ const ctx = useContext(WalletSessionContext);
47
+ if (!ctx) {
48
+ throw new Error("useWalletSession must be used within a WalletSessionProvider");
49
+ }
50
+ return ctx.walletSession;
51
+ }
52
+ export { WalletSession, useWalletSession };
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../../src/wallet/session.tsx"],"sourcesContent":["\"use client\";\n\nimport type {\n\tWalletSessionOptions,\n\tWalletSession as WalletSessionType,\n} from \"@whop/embedded-components-vanilla-js/types\";\nimport type { PropsWithChildren } from \"react\";\n\nimport React, {\n\tcreateContext,\n\tuseContext,\n\tuseEffect,\n\tuseImperativeHandle,\n\tuseMemo,\n} from \"react\";\nimport { useElements } from \"../provider\";\n\ninterface ContextState {\n\twalletSession: WalletSessionType | null;\n}\n\nconst WalletSessionContext = createContext<ContextState | null>(null);\n\nexport function WalletSession({\n\tchildren,\n\ttoken,\n\tcompanyId,\n\tcurrency,\n\tref,\n}: PropsWithChildren<\n\tWalletSessionOptions & {\n\t\tref?: React.RefObject<{\n\t\t\twalletSession: WalletSessionType | null;\n\t\t} | null>;\n\t}\n>) {\n\tconst elements = useElements();\n\n\tconst walletSession = useMemo(() => {\n\t\tif (!elements) return null;\n\t\treturn elements.createWalletSession({ token, companyId, currency });\n\t\t// eslint-disable-next-line react-hooks/exhaustive-deps -- session created once per elements instance\n\t}, [elements]);\n\n\tuseEffect(() => {\n\t\tif (!walletSession) return;\n\t\twalletSession.updateOptions({ token, companyId, currency });\n\t}, [walletSession, token, companyId, currency]);\n\n\tconst value: ContextState = useMemo(\n\t\t() => ({\n\t\t\twalletSession,\n\t\t}),\n\t\t[walletSession],\n\t);\n\n\tuseImperativeHandle(ref, () => ({ walletSession }), [walletSession]);\n\n\treturn (\n\t\t<WalletSessionContext.Provider value={value}>\n\t\t\t{children}\n\t\t</WalletSessionContext.Provider>\n\t);\n}\n\nexport function useWalletSession() {\n\tconst ctx = useContext(WalletSessionContext);\n\tif (!ctx) {\n\t\tthrow new Error(\n\t\t\t\"useWalletSession must be used within a WalletSessionProvider\",\n\t\t);\n\t}\n\treturn ctx.walletSession;\n}\n"],"mappings":";;AAQA,OAAO;AAAA,EACN;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACM;AACP,SAAS,mBAAmB;AAM5B,MAAM,uBAAuB,cAAmC,IAAI;AAE7D,SAAS,cAAc;AAAA,EAC7B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACD,GAMG;AACF,QAAM,WAAW,YAAY;AAE7B,QAAM,gBAAgB,QAAQ,MAAM;AACnC,QAAI,CAAC,SAAU,QAAO;AACtB,WAAO,SAAS,oBAAoB,EAAE,OAAO,WAAW,SAAS,CAAC;AAAA,EAEnE,GAAG,CAAC,QAAQ,CAAC;AAEb,YAAU,MAAM;AACf,QAAI,CAAC,cAAe;AACpB,kBAAc,cAAc,EAAE,OAAO,WAAW,SAAS,CAAC;AAAA,EAC3D,GAAG,CAAC,eAAe,OAAO,WAAW,QAAQ,CAAC;AAE9C,QAAM,QAAsB;AAAA,IAC3B,OAAO;AAAA,MACN;AAAA,IACD;AAAA,IACA,CAAC,aAAa;AAAA,EACf;AAEA,sBAAoB,KAAK,OAAO,EAAE,cAAc,IAAI,CAAC,aAAa,CAAC;AAEnE,SACC,oCAAC,qBAAqB,UAArB,EAA8B,SAC7B,QACF;AAEF;AAEO,SAAS,mBAAmB;AAClC,QAAM,MAAM,WAAW,oBAAoB;AAC3C,MAAI,CAAC,KAAK;AACT,UAAM,IAAI;AAAA,MACT;AAAA,IACD;AAAA,EACD;AACA,SAAO,IAAI;AACZ;","names":[]}