@frak-labs/components 0.0.26 → 1.0.0-beta.10dada3f

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.UBeCtoRQ.js +162 -0
  2. package/cdn/ButtonShare.COa5uY94.js +1 -0
  3. package/cdn/ButtonWallet.BUzysl1S.js +40 -0
  4. package/cdn/OpenInAppButton.Bmzm2fL9.js +1 -0
  5. package/cdn/PostPurchase._st1hB42.js +52 -0
  6. package/cdn/components.js +1 -1
  7. package/cdn/formatReward.B0iBskOJ.js +1 -0
  8. package/cdn/loader.css +0 -14
  9. package/cdn/loader.js +14 -1
  10. package/cdn/sprinkles.css.ts.vanilla.Ct795MMK.js +1175 -0
  11. package/cdn/useGlobalComponents.CLH7id-Y.js +1 -0
  12. package/cdn/useLightDomStyles.DqYouFn3.js +1 -0
  13. package/cdn/usePlacement.Di6eZ4ty.js +58 -0
  14. package/cdn/useReward.DJwgphI1.js +1 -0
  15. package/cdn/useShareModal.UYsKX7L2.js +1 -0
  16. package/dist/GiftIcon-4sr9xXyq.js +1501 -0
  17. package/dist/banner.d.ts +116 -0
  18. package/dist/banner.js +464 -0
  19. package/dist/buttonShare.d.ts +16 -6
  20. package/dist/buttonShare.js +78 -103
  21. package/dist/buttonWallet.d.ts +10 -2
  22. package/dist/buttonWallet.js +79 -40
  23. package/dist/formatReward-Bub6Z6eY.js +33 -0
  24. package/dist/openInApp.d.ts +4 -2
  25. package/dist/openInApp.js +33 -33
  26. package/dist/postPurchase.d.ts +136 -0
  27. package/dist/postPurchase.js +1618 -0
  28. package/dist/useGlobalComponents-Cmfszr7v.js +21 -0
  29. package/dist/useLightDomStyles-C3lcOwY2.js +41 -0
  30. package/dist/usePlacement-V7NrKoub.js +253 -0
  31. package/dist/useReward-DU3_yP8Q.js +65 -0
  32. package/dist/useShareModal-BEVkLrBP.js +54 -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-V7NrKoub.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,253 @@
1
+ import register from "preact-custom-element";
2
+ import * as coreSdkIndex from "@frak-labs/core-sdk";
3
+ import { sdkConfigStore, setupClient, trackEvent, 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((err) => {
78
+ trackEvent(window.FrakSetup?.client, "sdk_init_failed", {
79
+ reason: err instanceof Error ? err.message : typeof err === "string" ? err : "unknown",
80
+ config_missing: !window.FrakSetup?.config
81
+ });
82
+ });
83
+ }
84
+ /**
85
+ * Performs the actual SDK initialization.
86
+ * Throws on failure so withCache doesn't cache failed attempts.
87
+ */
88
+ async function doInit() {
89
+ if (!window.FrakSetup?.config) throw new Error("[Frak SDK] Configuration not found. Please ensure window.FrakSetup.config is set.");
90
+ console.log("[Frak SDK] Starting initialization");
91
+ const client = await setupClient({ config: window.FrakSetup.config });
92
+ if (!client) throw new Error("[Frak SDK] Failed to create client");
93
+ window.FrakSetup.client = client;
94
+ console.log("[Frak SDK] Client initialized successfully");
95
+ dispatchClientReadyEvent();
96
+ coreSdkActions.setupReferral(client);
97
+ handleActionQueryParam();
98
+ }
99
+ /**
100
+ * Check the query param contain params for an auto opening of the frak modal
101
+ */
102
+ function handleActionQueryParam() {
103
+ const frakAction = new URLSearchParams(window.location.search).get("frakAction");
104
+ if (!frakAction) return;
105
+ if (frakAction === "share") {
106
+ console.log("[Frak SDK] Auto open query param found");
107
+ openWalletModal();
108
+ }
109
+ }
110
+ //#endregion
111
+ //#region src/utils/onDocumentReady.ts
112
+ /**
113
+ * When the document is ready, run the callback
114
+ * @param callback
115
+ */
116
+ function onDocumentReady(callback) {
117
+ if (document.readyState === "complete" || document.readyState === "interactive") setTimeout(callback, 1);
118
+ else document.addEventListener("DOMContentLoaded", callback);
119
+ }
120
+ //#endregion
121
+ //#region src/utils/registerWebComponent.ts
122
+ /**
123
+ * Registers a Preact component as a custom web component
124
+ *
125
+ * @param component - The Preact component to register
126
+ * @param tagName - The custom element tag name (e.g., "frak-button-wallet")
127
+ * @param observedAttributes - Array of attribute names to observe for changes
128
+ * @param options - Registration options (e.g., { shadow: true })
129
+ */
130
+ function registerWebComponent(component, tagName, observedAttributes = [], options = { shadow: true }) {
131
+ if (typeof window !== "undefined") {
132
+ onDocumentReady(initFrakSdk);
133
+ if (!customElements.get(tagName)) register(component, tagName, observedAttributes, options);
134
+ }
135
+ }
136
+ //#endregion
137
+ //#region src/hooks/useClientReady.ts
138
+ function useClientReady() {
139
+ const [shouldRender, setShouldRender] = useState(() => {
140
+ if (!(window.FrakSetup?.config?.waitForBackendConfig !== false)) return true;
141
+ return sdkConfigStore.isResolved;
142
+ });
143
+ const [isHidden, setIsHidden] = useState(() => sdkConfigStore.getConfig().hidden ?? false);
144
+ const [isClientReady, setIsClientReady] = useState(() => !!window.FrakSetup?.client);
145
+ useEffect(() => {
146
+ const currentConfig = sdkConfigStore.getConfig();
147
+ if (currentConfig.isResolved) {
148
+ setShouldRender(true);
149
+ setIsHidden(currentConfig.hidden ?? false);
150
+ }
151
+ if (window.FrakSetup?.client) setIsClientReady(true);
152
+ const onConfig = (e) => {
153
+ const config = e.detail;
154
+ if (config.isResolved) setShouldRender(true);
155
+ setIsHidden(config.hidden ?? false);
156
+ };
157
+ window.addEventListener("frak:config", onConfig);
158
+ const handleReady = () => setIsClientReady(true);
159
+ onClientReady("add", handleReady);
160
+ return () => {
161
+ window.removeEventListener("frak:config", onConfig);
162
+ onClientReady("remove", handleReady);
163
+ };
164
+ }, []);
165
+ return {
166
+ shouldRender,
167
+ isHidden,
168
+ isClientReady
169
+ };
170
+ }
171
+ //#endregion
172
+ //#region src/utils/sharedCss.ts
173
+ const sharedCss = `
174
+ :host {
175
+ display: contents;
176
+ }
177
+
178
+ :host([hidden]) {
179
+ display: none;
180
+ }
181
+
182
+ .button:disabled {
183
+ opacity: 0.7;
184
+ cursor: default;
185
+ }
186
+
187
+ .button__fadeIn {
188
+ animation: frak-fadeIn 300ms ease-in;
189
+ }
190
+
191
+ @keyframes frak-fadeIn {
192
+ from {
193
+ opacity: 0;
194
+ }
195
+
196
+ to {
197
+ opacity: 1;
198
+ }
199
+ }
200
+ `;
201
+ function buildStyleContent(componentCss, placementCss) {
202
+ return placementCss ? `${sharedCss}\n${componentCss}\n${placementCss}` : `${sharedCss}\n${componentCss}`;
203
+ }
204
+ const lightDomBaseCss = `
205
+ :where(frak-button-share, frak-open-in-app) {
206
+ display: contents;
207
+ }
208
+
209
+ :where(frak-button-share .button, frak-open-in-app .button) {
210
+ display: flex;
211
+ align-items: center;
212
+ justify-content: center;
213
+ gap: 10px;
214
+ }
215
+
216
+ :where(frak-button-share .button:disabled, frak-open-in-app .button:disabled) {
217
+ opacity: 0.7;
218
+ cursor: default;
219
+ }
220
+
221
+ :where(frak-button-share .button__fadeIn, frak-open-in-app .button__fadeIn) {
222
+ animation: frak-fadeIn 300ms ease-in;
223
+ }
224
+
225
+ @keyframes frak-fadeIn {
226
+ from {
227
+ opacity: 0;
228
+ }
229
+
230
+ to {
231
+ opacity: 1;
232
+ }
233
+ }
234
+ `;
235
+ //#endregion
236
+ //#region src/hooks/usePlacement.ts
237
+ function getPlacement(id) {
238
+ return sdkConfigStore.getConfig().placements?.[id];
239
+ }
240
+ function usePlacement(placementId) {
241
+ const [configVersion, setConfigVersion] = useState(0);
242
+ useEffect(() => {
243
+ const onConfig = (_e) => {
244
+ setConfigVersion((v) => v + 1);
245
+ };
246
+ window.addEventListener("frak:config", onConfig);
247
+ setConfigVersion((v) => v + 1);
248
+ return () => window.removeEventListener("frak:config", onConfig);
249
+ }, []);
250
+ return useMemo(() => placementId ? getPlacement(placementId) : void 0, [placementId, configVersion]);
251
+ }
252
+ //#endregion
253
+ 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,54 @@
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
+ placement,
37
+ target_interaction: targetInteraction,
38
+ error: e instanceof Object && "message" in e ? e.message : "Unknown error"
39
+ });
40
+ setDebugInfo(debugInfo);
41
+ setIsError(true);
42
+ console.error("Error while opening the modal", e);
43
+ }
44
+ }, [
45
+ targetInteraction,
46
+ placement,
47
+ sharingLink
48
+ ]),
49
+ isError,
50
+ debugInfo
51
+ };
52
+ }
53
+ //#endregion
54
+ 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.10dada3f",
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.10dada3f",
90
+ "@frak-labs/frame-connector": "0.2.0-beta.10dada3f",
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};