@frak-labs/components 0.0.26-beta.b38eef2e → 0.0.26-beta.c7fe645d
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/cdn/Banner.BMHoJgnV.js +1 -0
- package/cdn/ButtonShare.C9bOZeuc.js +1 -0
- package/cdn/ButtonWallet.CABXtQ4V.js +40 -0
- package/cdn/OpenInAppButton.BmF8AXhC.js +1 -0
- package/cdn/PostPurchase.DRJyOBDO.js +2362 -0
- package/cdn/components.js +1 -1
- package/cdn/formatReward.DXMr8a-D.js +1 -0
- package/cdn/jsxRuntime.module.C6YjWAqO.js +138 -0
- package/cdn/loader.css +0 -14
- package/cdn/loader.js +66 -1
- package/cdn/useLightDomStyles.bAfmSfzH.js +1 -0
- package/cdn/useReward.DDCWUZkL.js +1 -0
- package/cdn/useShareModal.CeIpyobm.js +1 -0
- package/dist/banner.d.ts +115 -0
- package/dist/banner.js +195 -0
- package/dist/buttonShare.d.ts +8 -6
- package/dist/buttonShare.js +60 -101
- package/dist/buttonWallet.d.ts +10 -2
- package/dist/buttonWallet.js +79 -38
- package/dist/formatReward-_UYA3aHE.js +26 -0
- package/dist/openInApp.d.ts +4 -2
- package/dist/openInApp.js +23 -27
- package/dist/postPurchase.d.ts +122 -0
- package/dist/postPurchase.js +2995 -0
- package/dist/useLightDomStyles-utGwQ5Gs.js +41 -0
- package/dist/usePlacement-BKWDIvXP.js +329 -0
- package/dist/useReward-XF2hB_C_.js +65 -0
- package/dist/useShareModal-Bmlk3eBJ.js +53 -0
- package/package.json +27 -17
- package/cdn/ButtonShare.CSPl5Bi5.js +0 -1
- package/cdn/ButtonWallet.3Hp62hGr.js +0 -1
- package/cdn/OpenInAppButton.BTvukMkp.js +0 -1
- package/cdn/Spinner.DQogVqic.js +0 -1
- package/cdn/initFrakSdk.CMgrZQwQ.js +0 -14
- package/cdn/useClientReady.CKKC4IMk.js +0 -1
- package/dist/Spinner-Btnwk01x.js +0 -36
- package/dist/Spinner-CHZD3tMn.css +0 -1
- package/dist/buttonShare.css +0 -1
- package/dist/buttonWallet.css +0 -1
- package/dist/openInApp.css +0 -1
- package/dist/useClientReady-0vKBG0-p.js +0 -197
- package/dist/useReward-DAkT-7wT.js +0 -48
|
@@ -0,0 +1,41 @@
|
|
|
1
|
+
import { i as lightDomBaseCss } from "./usePlacement-BKWDIvXP.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,329 @@
|
|
|
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
|
+
const bannerBaseCss = `
|
|
231
|
+
:where(frak-banner) {
|
|
232
|
+
display: block;
|
|
233
|
+
}
|
|
234
|
+
|
|
235
|
+
:where(frak-banner .frak-banner) {
|
|
236
|
+
display: flex;
|
|
237
|
+
align-items: center;
|
|
238
|
+
gap: 12px;
|
|
239
|
+
padding: 12px 16px;
|
|
240
|
+
border-top: 2px solid #3b82f6;
|
|
241
|
+
border-bottom: 2px solid #3b82f6;
|
|
242
|
+
font-family: inherit;
|
|
243
|
+
line-height: 1.4;
|
|
244
|
+
}
|
|
245
|
+
|
|
246
|
+
:where(frak-banner .frak-banner__fadeIn) {
|
|
247
|
+
animation: frak-fadeIn 300ms ease-in;
|
|
248
|
+
}
|
|
249
|
+
|
|
250
|
+
@keyframes frak-fadeIn {
|
|
251
|
+
from {
|
|
252
|
+
opacity: 0;
|
|
253
|
+
}
|
|
254
|
+
|
|
255
|
+
to {
|
|
256
|
+
opacity: 1;
|
|
257
|
+
}
|
|
258
|
+
}
|
|
259
|
+
|
|
260
|
+
:where(frak-banner .frak-banner__icon) {
|
|
261
|
+
flex-shrink: 0;
|
|
262
|
+
display: flex;
|
|
263
|
+
align-items: center;
|
|
264
|
+
justify-content: center;
|
|
265
|
+
width: 32px;
|
|
266
|
+
height: 32px;
|
|
267
|
+
color: #3b82f6;
|
|
268
|
+
}
|
|
269
|
+
|
|
270
|
+
:where(frak-banner .frak-banner__icon svg) {
|
|
271
|
+
width: 100%;
|
|
272
|
+
height: 100%;
|
|
273
|
+
}
|
|
274
|
+
|
|
275
|
+
:where(frak-banner .frak-banner__content) {
|
|
276
|
+
flex: 1;
|
|
277
|
+
min-width: 0;
|
|
278
|
+
}
|
|
279
|
+
|
|
280
|
+
:where(frak-banner .frak-banner__title) {
|
|
281
|
+
font-weight: 700;
|
|
282
|
+
font-size: 0.875rem;
|
|
283
|
+
margin: 0 0 2px;
|
|
284
|
+
}
|
|
285
|
+
|
|
286
|
+
:where(frak-banner .frak-banner__description) {
|
|
287
|
+
font-size: 0.75rem;
|
|
288
|
+
margin: 0;
|
|
289
|
+
opacity: 0.7;
|
|
290
|
+
}
|
|
291
|
+
|
|
292
|
+
:where(frak-banner .frak-banner__cta) {
|
|
293
|
+
flex-shrink: 0;
|
|
294
|
+
padding: 8px 16px;
|
|
295
|
+
font-weight: 700;
|
|
296
|
+
font-size: 0.75rem;
|
|
297
|
+
text-transform: uppercase;
|
|
298
|
+
letter-spacing: 0.05em;
|
|
299
|
+
border: 2px solid #eab308;
|
|
300
|
+
border-radius: 0;
|
|
301
|
+
background: #eab308;
|
|
302
|
+
color: #1e293b;
|
|
303
|
+
cursor: pointer;
|
|
304
|
+
white-space: nowrap;
|
|
305
|
+
}
|
|
306
|
+
|
|
307
|
+
:where(frak-banner .frak-banner__cta:hover) {
|
|
308
|
+
opacity: 0.9;
|
|
309
|
+
}
|
|
310
|
+
`;
|
|
311
|
+
//#endregion
|
|
312
|
+
//#region src/hooks/usePlacement.ts
|
|
313
|
+
function getPlacement(id) {
|
|
314
|
+
return sdkConfigStore.getConfig().placements?.[id];
|
|
315
|
+
}
|
|
316
|
+
function usePlacement(placementId) {
|
|
317
|
+
const [configVersion, setConfigVersion] = useState(0);
|
|
318
|
+
useEffect(() => {
|
|
319
|
+
const onConfig = (_e) => {
|
|
320
|
+
setConfigVersion((v) => v + 1);
|
|
321
|
+
};
|
|
322
|
+
window.addEventListener("frak:config", onConfig);
|
|
323
|
+
setConfigVersion((v) => v + 1);
|
|
324
|
+
return () => window.removeEventListener("frak:config", onConfig);
|
|
325
|
+
}, []);
|
|
326
|
+
return useMemo(() => placementId ? getPlacement(placementId) : void 0, [placementId, configVersion]);
|
|
327
|
+
}
|
|
328
|
+
//#endregion
|
|
329
|
+
export { useClientReady as a, openEmbeddedWallet as c, lightDomBaseCss as i, bannerBaseCss as n, registerWebComponent as o, buildStyleContent as r, openWalletModal as s, usePlacement as t };
|
|
@@ -0,0 +1,65 @@
|
|
|
1
|
+
import { t as formatEstimatedReward } from "./formatReward-_UYA3aHE.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-beta.
|
|
14
|
+
"version": "0.0.26-beta.c7fe645d",
|
|
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,31 +86,31 @@
|
|
|
76
86
|
"publish": "echo 'Publishing components...'"
|
|
77
87
|
},
|
|
78
88
|
"dependencies": {
|
|
79
|
-
"@frak-labs/
|
|
80
|
-
"@frak-labs/
|
|
81
|
-
"
|
|
82
|
-
"preact": "^
|
|
83
|
-
"
|
|
89
|
+
"@frak-labs/core-sdk": "0.2.1-beta.c7fe645d",
|
|
90
|
+
"@frak-labs/frame-connector": "0.2.0-beta.c7fe645d",
|
|
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
96
|
"@frak-labs/dev-tooling": "0.0.0",
|
|
88
97
|
"@frak-labs/test-foundation": "0.1.0",
|
|
89
|
-
"@
|
|
90
|
-
"@preact/preset-vite": "^2.10.3",
|
|
98
|
+
"@preact/preset-vite": "^2.10.4",
|
|
91
99
|
"@rolldown/plugin-node-polyfills": "^1.0.3",
|
|
92
100
|
"@testing-library/jest-dom": "^6.9.1",
|
|
93
101
|
"@testing-library/preact": "^3.2.4",
|
|
94
102
|
"@testing-library/user-event": "^14.6.1",
|
|
95
|
-
"@types/jsdom": "^
|
|
103
|
+
"@types/jsdom": "^28.0.0",
|
|
96
104
|
"@types/node": "^24.10.13",
|
|
97
105
|
"@types/preact-custom-element": "^4.0.4",
|
|
98
|
-
"@
|
|
99
|
-
"@
|
|
100
|
-
"
|
|
101
|
-
"
|
|
102
|
-
"
|
|
103
|
-
"
|
|
104
|
-
"
|
|
106
|
+
"@vanilla-extract/css": "^1.20.1",
|
|
107
|
+
"@vanilla-extract/integration": "^8.0.10",
|
|
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.7",
|
|
113
|
+
"typescript": "^5.9.3",
|
|
114
|
+
"vitest": "^4.1.0"
|
|
105
115
|
}
|
|
106
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.CMgrZQwQ.js";import{t as f}from"./Spinner.DQogVqic.js";import{a as p,i as m,n as h,o as g,r as _,t as v}from"./useClientReady.CKKC4IMk.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.CMgrZQwQ.js";import{a as i,n as a,o,r as s,t as c}from"./useClientReady.CKKC4IMk.js";import{t as l}from"./ButtonShare.CSPl5Bi5.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={button:`Kl62ia_button`,reward:`Kl62ia_reward`,button__left:`Kl62ia_button__left`,button__right:`Kl62ia_button__right`};d.button,d.reward,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.CMgrZQwQ.js";import{t as a}from"./Spinner.DQogVqic.js";import{n as o,o as s,t as c}from"./useClientReady.CKKC4IMk.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};
|
package/cdn/Spinner.DQogVqic.js
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
import{S as e,h as t}from"./initFrakSdk.CMgrZQwQ.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};
|