@frak-labs/components 0.0.26 → 1.0.0-beta.bd7d4823

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 (46) hide show
  1. package/cdn/Banner.Ws9o79lU.js +64 -0
  2. package/cdn/ButtonShare.BDS1fgma.js +1 -0
  3. package/cdn/ButtonWallet.Be1UyRm8.js +40 -0
  4. package/cdn/OpenInAppButton.Diqt07eo.js +1 -0
  5. package/cdn/PostPurchase.DqFhm-Jn.js +52 -0
  6. package/cdn/components.js +1 -1
  7. package/cdn/formatReward.CXxVsWN3.js +1 -0
  8. package/cdn/loader.css +0 -14
  9. package/cdn/loader.js +14 -1
  10. package/cdn/sprinkles.css.ts.vanilla.BtFkD4B3.js +1175 -0
  11. package/cdn/useGlobalComponents.BRe8dKO7.js +1 -0
  12. package/cdn/useLightDomStyles.ZFa154u8.js +1 -0
  13. package/cdn/usePlacement.B7jMsQvP.js +58 -0
  14. package/cdn/useReward.qEKeySJG.js +1 -0
  15. package/cdn/useShareModal.B--64ELG.js +1 -0
  16. package/dist/GiftIcon-4sr9xXyq.js +1501 -0
  17. package/dist/banner.d.ts +116 -0
  18. package/dist/banner.js +431 -0
  19. package/dist/buttonShare.d.ts +8 -6
  20. package/dist/buttonShare.js +63 -101
  21. package/dist/buttonWallet.d.ts +10 -2
  22. package/dist/buttonWallet.js +79 -38
  23. package/dist/formatReward-Bub6Z6eY.js +33 -0
  24. package/dist/openInApp.d.ts +4 -2
  25. package/dist/openInApp.js +23 -27
  26. package/dist/postPurchase.d.ts +122 -0
  27. package/dist/postPurchase.js +1579 -0
  28. package/dist/useGlobalComponents-Cmfszr7v.js +21 -0
  29. package/dist/useLightDomStyles-hgYYZsTy.js +41 -0
  30. package/dist/usePlacement-LqYjZLX_.js +248 -0
  31. package/dist/useReward-DU3_yP8Q.js +65 -0
  32. package/dist/useShareModal-DgEf5WWG.js +53 -0
  33. package/package.json +29 -20
  34. package/cdn/ButtonShare.CqRLxX5u.js +0 -1
  35. package/cdn/ButtonWallet.ToH_g8FC.js +0 -1
  36. package/cdn/OpenInAppButton.BMZnXQLT.js +0 -1
  37. package/cdn/Spinner.DRiAlyyq.js +0 -1
  38. package/cdn/initFrakSdk.CA6zXtGT.js +0 -14
  39. package/cdn/useClientReady.DskSqlAg.js +0 -1
  40. package/dist/Spinner-1CZC_zy6.js +0 -36
  41. package/dist/Spinner-CHZD3tMn.css +0 -1
  42. package/dist/buttonShare.css +0 -1
  43. package/dist/buttonWallet.css +0 -1
  44. package/dist/openInApp.css +0 -1
  45. package/dist/useClientReady-iCtUeDsc.js +0 -197
  46. package/dist/useReward-DAkT-7wT.js +0 -48
@@ -0,0 +1,21 @@
1
+ import { sdkConfigStore } from "@frak-labs/core-sdk";
2
+ import { useEffect, useMemo, useState } from "preact/hooks";
3
+ //#region src/hooks/useGlobalComponents.ts
4
+ /**
5
+ * Subscribe to the global component defaults from the SDK config store.
6
+ * These serve as fallbacks when no placement-level override exists.
7
+ */
8
+ function useGlobalComponents() {
9
+ const [configVersion, setConfigVersion] = useState(0);
10
+ useEffect(() => {
11
+ const onConfig = (_e) => {
12
+ setConfigVersion((v) => v + 1);
13
+ };
14
+ window.addEventListener("frak:config", onConfig);
15
+ setConfigVersion((v) => v + 1);
16
+ return () => window.removeEventListener("frak:config", onConfig);
17
+ }, []);
18
+ return useMemo(() => sdkConfigStore.getConfig().components, [configVersion]);
19
+ }
20
+ //#endregion
21
+ export { useGlobalComponents as t };
@@ -0,0 +1,41 @@
1
+ import { r as lightDomBaseCss } from "./usePlacement-LqYjZLX_.js";
2
+ import { useEffect } from "preact/hooks";
3
+ //#region src/utils/styleManager.ts
4
+ function ensureStyle(id, css) {
5
+ const existing = document.getElementById(id);
6
+ if (existing) {
7
+ if (existing.textContent !== css) existing.textContent = css;
8
+ return;
9
+ }
10
+ const style = document.createElement("style");
11
+ style.id = id;
12
+ style.textContent = css;
13
+ document.head.appendChild(style);
14
+ }
15
+ function injectBase(tag, css) {
16
+ ensureStyle(`frak-base-${tag}`, css);
17
+ }
18
+ function injectPlacement(tag, placementId, scopedCss) {
19
+ ensureStyle(`frak-placement-${tag}-${placementId}`, scopedCss);
20
+ }
21
+ const styleManager = {
22
+ injectBase,
23
+ injectPlacement
24
+ };
25
+ //#endregion
26
+ //#region src/hooks/useLightDomStyles.ts
27
+ function useLightDomStyles(tag, placementId, placementCss, baseCss) {
28
+ useEffect(() => {
29
+ styleManager.injectBase(tag, baseCss ?? lightDomBaseCss);
30
+ }, [tag]);
31
+ useEffect(() => {
32
+ if (!placementId || !placementCss) return;
33
+ styleManager.injectPlacement(tag, placementId, placementCss);
34
+ }, [
35
+ tag,
36
+ placementId,
37
+ placementCss
38
+ ]);
39
+ }
40
+ //#endregion
41
+ export { useLightDomStyles as t };
@@ -0,0 +1,248 @@
1
+ import register from "preact-custom-element";
2
+ import * as coreSdkIndex from "@frak-labs/core-sdk";
3
+ import { sdkConfigStore, setupClient, withCache } from "@frak-labs/core-sdk";
4
+ import * as coreSdkActions from "@frak-labs/core-sdk/actions";
5
+ import { displayEmbeddedWallet } from "@frak-labs/core-sdk/actions";
6
+ import { useEffect, useMemo, useState } from "preact/hooks";
7
+ //#region src/utils/embeddedWallet.ts
8
+ async function openEmbeddedWallet(targetInteraction, placement) {
9
+ if (!window.FrakSetup?.client) {
10
+ console.error("Frak client not found");
11
+ return;
12
+ }
13
+ const modalWalletConfig = window.FrakSetup?.modalWalletConfig ?? {};
14
+ await displayEmbeddedWallet(window.FrakSetup.client, targetInteraction ? {
15
+ ...modalWalletConfig,
16
+ metadata: {
17
+ ...modalWalletConfig.metadata,
18
+ targetInteraction
19
+ }
20
+ } : modalWalletConfig, placement);
21
+ }
22
+ //#endregion
23
+ //#region src/utils/safeVibrate.ts
24
+ /**
25
+ * Attempt to vibrate the device
26
+ */
27
+ function safeVibrate() {
28
+ if ("vibrate" in navigator) navigator.vibrate(10);
29
+ else console.log("Vibration not supported");
30
+ }
31
+ //#endregion
32
+ //#region src/components/ButtonWallet/utils.ts
33
+ function openWalletModal(targetInteraction, placement) {
34
+ safeVibrate();
35
+ openEmbeddedWallet(targetInteraction, placement);
36
+ }
37
+ //#endregion
38
+ //#region src/utils/clientReady.ts
39
+ const CUSTOM_EVENT_NAME = "frak:client";
40
+ /**
41
+ * Dispatch a custom event when the Frak client is ready
42
+ */
43
+ function dispatchClientReadyEvent() {
44
+ const event = new CustomEvent(CUSTOM_EVENT_NAME);
45
+ window.dispatchEvent(event);
46
+ }
47
+ /**
48
+ * Add or remove an event listener for when the Frak client is ready
49
+ * @param action
50
+ * @param callback
51
+ */
52
+ function onClientReady(action, callback) {
53
+ if (window.FrakSetup?.client && action === "add") {
54
+ callback();
55
+ return;
56
+ }
57
+ (action === "add" ? window.addEventListener : window.removeEventListener)(CUSTOM_EVENT_NAME, callback, false);
58
+ }
59
+ //#endregion
60
+ //#region src/utils/initFrakSdk.ts
61
+ /**
62
+ * Initializes the Frak SDK client and sets up necessary configurations.
63
+ * Uses withCache for inflight dedup — concurrent callers share the same promise.
64
+ * Failures are not cached, allowing retry on next call.
65
+ *
66
+ * @returns {Promise<void>}
67
+ */
68
+ function initFrakSdk() {
69
+ window.FrakSetup.core = {
70
+ ...coreSdkIndex,
71
+ ...coreSdkActions
72
+ };
73
+ if (window.FrakSetup?.client) return Promise.resolve();
74
+ return withCache(() => doInit(), {
75
+ cacheKey: "frak-sdk-init",
76
+ cacheTime: Number.POSITIVE_INFINITY
77
+ }).catch(() => {});
78
+ }
79
+ /**
80
+ * Performs the actual SDK initialization.
81
+ * Throws on failure so withCache doesn't cache failed attempts.
82
+ */
83
+ async function doInit() {
84
+ if (!window.FrakSetup?.config) throw new Error("[Frak SDK] Configuration not found. Please ensure window.FrakSetup.config is set.");
85
+ console.log("[Frak SDK] Starting initialization");
86
+ const client = await setupClient({ config: window.FrakSetup.config });
87
+ if (!client) throw new Error("[Frak SDK] Failed to create client");
88
+ window.FrakSetup.client = client;
89
+ console.log("[Frak SDK] Client initialized successfully");
90
+ dispatchClientReadyEvent();
91
+ coreSdkActions.setupReferral(client);
92
+ handleActionQueryParam();
93
+ }
94
+ /**
95
+ * Check the query param contain params for an auto opening of the frak modal
96
+ */
97
+ function handleActionQueryParam() {
98
+ const frakAction = new URLSearchParams(window.location.search).get("frakAction");
99
+ if (!frakAction) return;
100
+ if (frakAction === "share") {
101
+ console.log("[Frak SDK] Auto open query param found");
102
+ openWalletModal();
103
+ }
104
+ }
105
+ //#endregion
106
+ //#region src/utils/onDocumentReady.ts
107
+ /**
108
+ * When the document is ready, run the callback
109
+ * @param callback
110
+ */
111
+ function onDocumentReady(callback) {
112
+ if (document.readyState === "complete" || document.readyState === "interactive") setTimeout(callback, 1);
113
+ else document.addEventListener("DOMContentLoaded", callback);
114
+ }
115
+ //#endregion
116
+ //#region src/utils/registerWebComponent.ts
117
+ /**
118
+ * Registers a Preact component as a custom web component
119
+ *
120
+ * @param component - The Preact component to register
121
+ * @param tagName - The custom element tag name (e.g., "frak-button-wallet")
122
+ * @param observedAttributes - Array of attribute names to observe for changes
123
+ * @param options - Registration options (e.g., { shadow: true })
124
+ */
125
+ function registerWebComponent(component, tagName, observedAttributes = [], options = { shadow: true }) {
126
+ if (typeof window !== "undefined") {
127
+ onDocumentReady(initFrakSdk);
128
+ if (!customElements.get(tagName)) register(component, tagName, observedAttributes, options);
129
+ }
130
+ }
131
+ //#endregion
132
+ //#region src/hooks/useClientReady.ts
133
+ function useClientReady() {
134
+ const [shouldRender, setShouldRender] = useState(() => {
135
+ if (!(window.FrakSetup?.config?.waitForBackendConfig !== false)) return true;
136
+ return sdkConfigStore.isResolved;
137
+ });
138
+ const [isHidden, setIsHidden] = useState(() => sdkConfigStore.getConfig().hidden ?? false);
139
+ const [isClientReady, setIsClientReady] = useState(() => !!window.FrakSetup?.client);
140
+ useEffect(() => {
141
+ const currentConfig = sdkConfigStore.getConfig();
142
+ if (currentConfig.isResolved) {
143
+ setShouldRender(true);
144
+ setIsHidden(currentConfig.hidden ?? false);
145
+ }
146
+ if (window.FrakSetup?.client) setIsClientReady(true);
147
+ const onConfig = (e) => {
148
+ const config = e.detail;
149
+ if (config.isResolved) setShouldRender(true);
150
+ setIsHidden(config.hidden ?? false);
151
+ };
152
+ window.addEventListener("frak:config", onConfig);
153
+ const handleReady = () => setIsClientReady(true);
154
+ onClientReady("add", handleReady);
155
+ return () => {
156
+ window.removeEventListener("frak:config", onConfig);
157
+ onClientReady("remove", handleReady);
158
+ };
159
+ }, []);
160
+ return {
161
+ shouldRender,
162
+ isHidden,
163
+ isClientReady
164
+ };
165
+ }
166
+ //#endregion
167
+ //#region src/utils/sharedCss.ts
168
+ const sharedCss = `
169
+ :host {
170
+ display: contents;
171
+ }
172
+
173
+ :host([hidden]) {
174
+ display: none;
175
+ }
176
+
177
+ .button:disabled {
178
+ opacity: 0.7;
179
+ cursor: default;
180
+ }
181
+
182
+ .button__fadeIn {
183
+ animation: frak-fadeIn 300ms ease-in;
184
+ }
185
+
186
+ @keyframes frak-fadeIn {
187
+ from {
188
+ opacity: 0;
189
+ }
190
+
191
+ to {
192
+ opacity: 1;
193
+ }
194
+ }
195
+ `;
196
+ function buildStyleContent(componentCss, placementCss) {
197
+ return placementCss ? `${sharedCss}\n${componentCss}\n${placementCss}` : `${sharedCss}\n${componentCss}`;
198
+ }
199
+ const lightDomBaseCss = `
200
+ :where(frak-button-share, frak-open-in-app) {
201
+ display: contents;
202
+ }
203
+
204
+ :where(frak-button-share .button, frak-open-in-app .button) {
205
+ display: flex;
206
+ align-items: center;
207
+ justify-content: center;
208
+ gap: 10px;
209
+ }
210
+
211
+ :where(frak-button-share .button:disabled, frak-open-in-app .button:disabled) {
212
+ opacity: 0.7;
213
+ cursor: default;
214
+ }
215
+
216
+ :where(frak-button-share .button__fadeIn, frak-open-in-app .button__fadeIn) {
217
+ animation: frak-fadeIn 300ms ease-in;
218
+ }
219
+
220
+ @keyframes frak-fadeIn {
221
+ from {
222
+ opacity: 0;
223
+ }
224
+
225
+ to {
226
+ opacity: 1;
227
+ }
228
+ }
229
+ `;
230
+ //#endregion
231
+ //#region src/hooks/usePlacement.ts
232
+ function getPlacement(id) {
233
+ return sdkConfigStore.getConfig().placements?.[id];
234
+ }
235
+ function usePlacement(placementId) {
236
+ const [configVersion, setConfigVersion] = useState(0);
237
+ useEffect(() => {
238
+ const onConfig = (_e) => {
239
+ setConfigVersion((v) => v + 1);
240
+ };
241
+ window.addEventListener("frak:config", onConfig);
242
+ setConfigVersion((v) => v + 1);
243
+ return () => window.removeEventListener("frak:config", onConfig);
244
+ }, []);
245
+ return useMemo(() => placementId ? getPlacement(placementId) : void 0, [placementId, configVersion]);
246
+ }
247
+ //#endregion
248
+ export { registerWebComponent as a, useClientReady as i, buildStyleContent as n, openWalletModal as o, lightDomBaseCss as r, openEmbeddedWallet as s, usePlacement as t };
@@ -0,0 +1,65 @@
1
+ import { n as formatEstimatedReward } from "./formatReward-Bub6Z6eY.js";
2
+ import { getCurrencyAmountKey, getSupportedCurrency } from "@frak-labs/core-sdk";
3
+ import { getMerchantInformation } from "@frak-labs/core-sdk/actions";
4
+ import { useEffect, useState } from "preact/hooks";
5
+ //#region src/hooks/useReward.ts
6
+ /**
7
+ * Get the comparable fiat value of a reward for ranking purposes.
8
+ */
9
+ function getRewardValue(reward, key) {
10
+ switch (reward.payoutType) {
11
+ case "fixed": return reward.amount[key];
12
+ case "tiered": return reward.tiers.reduce((acc, tier) => Math.max(acc, tier.amount[key]), 0);
13
+ case "percentage": return 0;
14
+ }
15
+ }
16
+ /**
17
+ * Pick the best referrer reward from merchant info and format it.
18
+ * Returns `undefined` when no displayable reward is found.
19
+ */
20
+ function resolveBestReward({ rewards }, currency, targetInteraction) {
21
+ const referrerRewards = (targetInteraction ? rewards.filter((r) => r.interactionTypeKey === targetInteraction) : rewards).map((r) => r.referrer).filter((r) => r !== void 0);
22
+ if (referrerRewards.length === 0) return void 0;
23
+ const key = getCurrencyAmountKey(getSupportedCurrency(currency));
24
+ let bestReward = referrerRewards[0];
25
+ let bestValue = getRewardValue(bestReward, key);
26
+ for (let i = 1; i < referrerRewards.length; i++) {
27
+ const value = getRewardValue(referrerRewards[i], key);
28
+ if (value > bestValue) {
29
+ bestReward = referrerRewards[i];
30
+ bestValue = value;
31
+ }
32
+ }
33
+ if (bestValue <= 0) {
34
+ const percentageReward = referrerRewards.find((r) => r.payoutType === "percentage");
35
+ if (!percentageReward) return void 0;
36
+ bestReward = percentageReward;
37
+ }
38
+ return formatEstimatedReward(bestReward, currency);
39
+ }
40
+ /**
41
+ * Hook to fetch and format the best referrer reward for a given interaction type.
42
+ *
43
+ * Calls `getMerchantInformation`, picks the highest-value referrer reward
44
+ * across all matching campaigns, and returns it as a formatted string.
45
+ *
46
+ * @param shouldUseReward - Whether to fetch the reward at all
47
+ * @param targetInteraction - Optional filter by interaction type (e.g. "purchase")
48
+ * @returns Object containing the formatted reward string, or undefined if unavailable
49
+ */
50
+ function useReward(shouldUseReward, targetInteraction) {
51
+ const [reward, setReward] = useState(void 0);
52
+ useEffect(() => {
53
+ if (!shouldUseReward) return;
54
+ const client = window.FrakSetup?.client;
55
+ if (!client) return;
56
+ getMerchantInformation(client).then((merchantInfo) => {
57
+ const currency = client.config.metadata?.currency;
58
+ const formatted = resolveBestReward(merchantInfo, currency, targetInteraction);
59
+ if (formatted) setReward(formatted);
60
+ }).catch(() => {});
61
+ }, [shouldUseReward, targetInteraction]);
62
+ return { reward };
63
+ }
64
+ //#endregion
65
+ export { useReward as t };
@@ -0,0 +1,53 @@
1
+ import { DebugInfoGatherer, trackEvent } from "@frak-labs/core-sdk";
2
+ import { modalBuilder } from "@frak-labs/core-sdk/actions";
3
+ import { useCallback, useState } from "preact/hooks";
4
+ import { FrakRpcError, RpcErrorCodes } from "@frak-labs/frame-connector";
5
+ //#region src/components/ButtonShare/hooks/useShareModal.ts
6
+ /**
7
+ * Open the share modal
8
+ *
9
+ * @description
10
+ * This function will open the share modal, lazily creating a modal builder on demand.
11
+ */
12
+ function useShareModal(targetInteraction, placement, sharingLink) {
13
+ const [debugInfo, setDebugInfo] = useState(void 0);
14
+ const [isError, setIsError] = useState(false);
15
+ return {
16
+ handleShare: useCallback(async () => {
17
+ if (!window.FrakSetup?.client) {
18
+ console.error("Frak client not found");
19
+ setDebugInfo(DebugInfoGatherer.empty().formatDebugInfo("Frak client not found"));
20
+ setIsError(true);
21
+ return;
22
+ }
23
+ const builder = modalBuilder(window.FrakSetup.client, {});
24
+ try {
25
+ await builder.sharing(sharingLink ? { link: sharingLink } : {}).display((metadata) => ({
26
+ ...metadata,
27
+ targetInteraction
28
+ }), placement);
29
+ } catch (e) {
30
+ if (e instanceof FrakRpcError && e.code === RpcErrorCodes.clientAborted) {
31
+ console.debug("User aborted the modal");
32
+ return;
33
+ }
34
+ const debugInfo = window.FrakSetup.client.debugInfo.formatDebugInfo(e);
35
+ trackEvent(window.FrakSetup.client, "share_modal_error", {
36
+ error: e instanceof Object && "message" in e ? e.message : "Unknown error",
37
+ debugInfo
38
+ });
39
+ setDebugInfo(debugInfo);
40
+ setIsError(true);
41
+ console.error("Error while opening the modal", e);
42
+ }
43
+ }, [
44
+ targetInteraction,
45
+ placement,
46
+ sharingLink
47
+ ]),
48
+ isError,
49
+ debugInfo
50
+ };
51
+ }
52
+ //#endregion
53
+ export { useShareModal as t };
package/package.json CHANGED
@@ -11,7 +11,7 @@
11
11
  "url": "https://twitter.com/QNivelais"
12
12
  }
13
13
  ],
14
- "version": "0.0.26",
14
+ "version": "1.0.0-beta.bd7d4823",
15
15
  "description": "Frak Wallet components, helping any person to interact with the Frak wallet.",
16
16
  "repository": {
17
17
  "url": "https://github.com/frak-id/wallet",
@@ -56,6 +56,16 @@
56
56
  "import": "./dist/openInApp.js",
57
57
  "types": "./dist/openInApp.d.ts"
58
58
  },
59
+ "./postPurchase": {
60
+ "development": "./src/components/PostPurchase/index.ts",
61
+ "import": "./dist/postPurchase.js",
62
+ "types": "./dist/postPurchase.d.ts"
63
+ },
64
+ "./banner": {
65
+ "development": "./src/components/Banner/index.ts",
66
+ "import": "./dist/banner.js",
67
+ "types": "./dist/banner.d.ts"
68
+ },
59
69
  "./cdn": {
60
70
  "import": "./cdn/components.js"
61
71
  },
@@ -76,32 +86,31 @@
76
86
  "publish": "echo 'Publishing components...'"
77
87
  },
78
88
  "dependencies": {
79
- "@frak-labs/frame-connector": "0.2.0",
80
- "@frak-labs/core-sdk": "0.2.1",
81
- "class-variance-authority": "^0.7.1",
82
- "preact": "^10.28.3",
83
- "preact-custom-element": "^4.6.0"
89
+ "@frak-labs/core-sdk": "1.0.0-beta.bd7d4823",
90
+ "@frak-labs/frame-connector": "0.2.0-beta.bd7d4823",
91
+ "preact": "^10.29.0",
92
+ "preact-custom-element": "^4.6.0",
93
+ "@frak-labs/design-system": "0.0.0"
84
94
  },
85
95
  "devDependencies": {
86
- "@bosh-code/tsdown-plugin-inject-css": "^2.0.0",
87
- "@frak-labs/dev-tooling": "0.0.0",
88
96
  "@frak-labs/test-foundation": "0.1.0",
89
- "@frak-labs/ui": "0.0.0",
90
- "@preact/preset-vite": "^2.10.3",
97
+ "@preact/preset-vite": "^2.10.4",
91
98
  "@rolldown/plugin-node-polyfills": "^1.0.3",
92
99
  "@testing-library/jest-dom": "^6.9.1",
93
100
  "@testing-library/preact": "^3.2.4",
94
101
  "@testing-library/user-event": "^14.6.1",
95
- "@types/jsdom": "^27.0.0",
96
- "@types/node": "^24.10.13",
102
+ "@types/jsdom": "^28.0.0",
103
+ "@types/node": "^25.6.0",
97
104
  "@types/preact-custom-element": "^4.0.4",
98
- "@vitest/coverage-v8": "^4.0.18",
99
- "@vitest/ui": "^4.0.18",
100
- "jsdom": "^28.0.0",
101
- "tsdown": "^0.20.3",
102
- "typescript": "^5",
103
- "unplugin-lightningcss": "^0.4.5",
104
- "vite-tsconfig-paths": "^6.1.0",
105
- "vitest": "^4.0.18"
105
+ "@vanilla-extract/css": "^1.20.1",
106
+ "@vanilla-extract/integration": "^8.0.10",
107
+ "@vanilla-extract/vite-plugin": "^5.2.1",
108
+ "@vanilla-extract/sprinkles": "^1.6.5",
109
+ "@vitest/coverage-v8": "^4.1.0",
110
+ "@vitest/ui": "^4.1.0",
111
+ "jsdom": "^29.0.0",
112
+ "tsdown": "^0.21.8",
113
+ "typescript": "^6.0.2",
114
+ "vitest": "^4.1.4"
106
115
  }
107
116
  }
@@ -1 +0,0 @@
1
- import{S as e,a as t,b as n,c as r,f as i,h as a,l as o,m as s,n as c,o as l,p as u,s as d}from"./initFrakSdk.CA6zXtGT.js";import{t as f}from"./Spinner.DRiAlyyq.js";import{a as p,i as m,n as h,o as g,r as _,t as v}from"./useClientReady.DskSqlAg.js";function y(e,t){return!e||e.payoutType!==`fixed`?0:e.amount[t]}function b(e,t){return e.reduce((e,n)=>Math.max(e,y(n.referrer,t)),0)}async function x({targetInteraction:e}){let n=window.FrakSetup?.client;if(!n){console.warn(`Frak client not ready yet`);return}let{rewards:i}=await t(n),a=r(n.config.metadata?.currency),s=b(e?i.filter(t=>t.interactionTypeKey===e):i,a);if(!(s<=0))return o(Math.round(s),n.config.metadata?.currency)}function S(e,t){let[n,r]=_(void 0);return p(()=>{e&&x({targetInteraction:t}).then(e=>{e&&r(e)})},[e,t]),{reward:n}}const C={buttonShare:`nOB7Uq_buttonShare`};C.buttonShare;function w(e={}){let{successDuration:t=2e3}=e,[n,r]=_(!1);return{copy:m(async e=>{try{if(navigator.clipboard&&window.isSecureContext)await navigator.clipboard.writeText(e),r(!0);else{let t=document.createElement(`textarea`);t.value=e,t.style.position=`fixed`,t.style.opacity=`0`,document.body.appendChild(t),t.focus(),t.select();try{document.execCommand(`copy`),r(!0)}catch(e){return console.error(`Failed to copy text:`,e),!1}finally{t.remove()}}return setTimeout(()=>{r(!1)},t),!0}catch(e){return console.error(`Failed to copy text:`,e),!1}},[t]),copied:n}}const T={errorContainer:{marginTop:`16px`,padding:`16px`,backgroundColor:`#FEE2E2`,border:`1px solid #FCA5A5`,borderRadius:`4px`,color:`#991B1B`},header:{display:`flex`,alignItems:`center`,gap:`8px`,marginBottom:`12px`},title:{margin:0,fontSize:`16px`,fontWeight:500},message:{fontSize:`14px`,lineHeight:`1.5`,margin:`0 0 12px 0`},link:{color:`#991B1B`,textDecoration:`underline`,textUnderlineOffset:`2px`},copyButton:{display:`inline-flex`,alignItems:`center`,gap:`8px`,marginBottom:`10px`,padding:`8px 12px`,backgroundColor:`white`,border:`1px solid #D1D5DB`,borderRadius:`4px`,color:`black`,fontSize:`14px`,fontWeight:500}};function E({debugInfo:e}){let[t,n]=_(!1);return a(`div`,{children:[a(`button`,{type:`button`,style:T.copyButton,onClick:()=>n(!t),children:`Ouvrir les informations`}),t&&a(`textarea`,{style:{display:`block`,width:`100%`,height:`200px`,fontSize:`12px`},children:e})]})}function D({debugInfo:e}){let{copied:t,copy:n}=w();return a(`div`,{style:T.errorContainer,children:[a(`div`,{style:T.header,children:a(`h3`,{style:T.title,children:`Oups ! Nous avons rencontré un petit problème`})}),a(`p`,{style:T.message,children:[`Impossible d'ouvrir le menu de partage pour le moment. Si le problème persiste, copiez les informations ci-dessous et collez-les dans votre mail à`,` `,a(`a`,{href:`mailto:help@frak-labs.com?subject=Debug`,style:T.link,children:`help@frak-labs.com`}),` `,a(`br`,{}),`Merci pour votre retour, nous traitons votre demande dans les plus brefs délais.`]}),a(`button`,{type:`button`,onClick:()=>n(e??``),style:T.copyButton,children:t?`Informations copiées !`:`Copier les informations de débogage`}),a(E,{debugInfo:e})]})}function O(e){let[t,n]=_(void 0),[r,a]=_(!1);return{handleShare:m(async()=>{if(!window.FrakSetup?.client){console.error(`Frak client not found`),n(d.empty().formatDebugInfo(`Frak client not found`)),a(!0);return}let t=c();if(!t)throw Error(`modalBuilderSteps not found`);try{await t.sharing(window.FrakSetup?.modalShareConfig??{}).display(t=>({...t,targetInteraction:e}))}catch(e){if(e instanceof s&&e.code===u.clientAborted){console.debug(`User aborted the modal`);return}let t=window.FrakSetup.client.debugInfo.formatDebugInfo(e);i(window.FrakSetup.client,`share_modal_error`,{error:e instanceof Object&&`message`in e?e.message:`Unknown error`,debugInfo:t}),n(t),a(!0),console.error(`Error while opening the modal`,e)}},[e]),isError:r,debugInfo:t}}async function k(){if(!window.FrakSetup?.client)throw Error(`Frak client not found`);await l(window.FrakSetup.client,window.FrakSetup?.modalWalletConfig??{})}function A({text:t=`Share and earn!`,classname:r=``,useReward:o,noRewardText:s,targetInteraction:c,showWallet:l}){let u=h(()=>o!==void 0,[o]),d=h(()=>l!==void 0,[l]),{isClientReady:p}=v(),{reward:g}=S(u&&p,c),{handleShare:_,isError:y,debugInfo:b}=O(c),x=h(()=>u?g?t.includes(`{REWARD}`)?t.replace(`{REWARD}`,g):`${t} ${g}`:s??t.replace(`{REWARD}`,``):t,[u,t,s,g]),w=m(async()=>{i(window.FrakSetup.client,`share_button_clicked`),d?await k():await _()},[d,_]);return a(n,{children:[a(`button`,{type:`button`,className:e(C.buttonShare,r,`override`),onClick:w,children:[!p&&a(f,{}),` `,x]}),y&&a(D,{debugInfo:b})]})}g(A,`frak-button-share`,[`text`],{shadow:!1});export{A as ButtonShare,S as t};
@@ -1 +0,0 @@
1
- import{S as e,f as t,h as n,i as r}from"./initFrakSdk.CA6zXtGT.js";import{a as i,n as a,o,r as s,t as c}from"./useClientReady.DskSqlAg.js";import{t as l}from"./ButtonShare.CqRLxX5u.js";function u(e){return n(`svg`,{fill:`none`,height:`1em`,viewBox:`0 0 28 28`,width:`1em`,xmlns:`http://www.w3.org/2000/svg`,...e,children:[n(`title`,{children:`Gift icon`}),n(`path`,{d:`m23.1427 13.9999v11.4285h-18.2857v-11.4285m9.1429 11.4285v-17.14282m0 0h-5.1429c-.75776 0-1.48448-.30102-2.0203-.83684s-.83684-1.26255-.83684-2.02031.30102-1.48448.83684-2.0203 1.26254-.83684 2.0203-.83684c4 0 5.1429 5.71429 5.1429 5.71429zm0 0h5.1428c.7578 0 1.4845-.30102 2.0203-.83684s.8369-1.26255.8369-2.02031-.3011-1.48448-.8369-2.0203-1.2625-.83684-2.0203-.83684c-4 0-5.1428 5.71429-5.1428 5.71429zm-11.42861 0h22.85711v5.71432h-22.85711z`,stroke:`#fff`,"stroke-linecap":`round`,"stroke-linejoin":`round`})]})}const d={reward:`Kl62ia_reward`,button:`Kl62ia_button`,button__left:`Kl62ia_button__left`,button__right:`Kl62ia_button__right`};d.reward,d.button,d.button__left,d.button__right;function f({classname:o=``,useReward:f,targetInteraction:p}){let m=a(()=>f!==void 0,[f]),{isClientReady:h}=c(),{reward:g}=l(m&&h,p),[_,v]=s(`right`);return i(()=>{let e=window.FrakSetup?.modalWalletConfig?.metadata?.position;v(e??`right`)},[]),n(`button`,{type:`button`,"aria-label":`Open wallet`,class:e(d.button,_===`left`?d.button__left:d.button__right,o,`override`),disabled:!h,onClick:()=>{t(window.FrakSetup.client,`wallet_button_clicked`),r()},children:[n(u,{}),g&&n(`span`,{className:d.reward,children:g})]})}o(f,`frak-button-wallet`,[],{shadow:!1});export{f as ButtonWallet};
@@ -1 +0,0 @@
1
- import{S as e,d as t,f as n,h as r,u as i}from"./initFrakSdk.CA6zXtGT.js";import{t as a}from"./Spinner.DRiAlyyq.js";import{n as o,o as s,t as c}from"./useClientReady.DskSqlAg.js";function l(){return typeof navigator>`u`?!1:!!(/iPhone|iPad|iPod|Android|webOS|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)||/Macintosh/i.test(navigator.userAgent)&&navigator.maxTouchPoints>1)}function u(){return{isMobile:o(()=>l(),[])}}function d(e=`wallet`){let r=window.FrakSetup?.client;r&&n(r,`open_in_app_clicked`),t(`${i}${e}`,{onFallback:()=>{r&&n(r,`app_not_installed`)}})}const f={button:`XYfqGq_button`};f.button;function p({text:t=`Open in App`,classname:n=``}){let{isClientReady:i}=c(),{isMobile:o}=u();if(!o)return null;let s=()=>{d()};return r(`button`,{type:`button`,"aria-label":`Open in Frak Wallet app`,className:e(f.button,n,`override`),disabled:!i,onClick:s,children:[!i&&r(a,{}),` `,t]})}s(p,`frak-open-in-app`,[`text`],{shadow:!1});export{p as OpenInAppButton};
@@ -1 +0,0 @@
1
- import{S as e,h as t}from"./initFrakSdk.CA6zXtGT.js";const n={spinner:`M4fSKa_spinner`,spinner__leaf:`M4fSKa_spinner__leaf`,"rt-spinner-leaf-fade":`M4fSKa_rt-spinner-leaf-fade`};n.spinner,n.spinner__leaf,n[`rt-spinner-leaf-fade`];const r=({ref:r,className:i,...a})=>t(`span`,{...a,ref:r,className:e(n.spinner),children:[t(`span`,{className:n.spinner__leaf}),t(`span`,{className:n.spinner__leaf}),t(`span`,{className:n.spinner__leaf}),t(`span`,{className:n.spinner__leaf}),t(`span`,{className:n.spinner__leaf}),t(`span`,{className:n.spinner__leaf}),t(`span`,{className:n.spinner__leaf}),t(`span`,{className:n.spinner__leaf})]});r.displayName=`Spinner`;export{r as t};