@frak-labs/components 0.0.26-beta.53dfa7b2 → 0.0.26-beta.5989fbc3

package/dist/useGlobalComponents-Cmfszr7v.js

@@ -0,0 +1,21 @@
+import { sdkConfigStore } from "@frak-labs/core-sdk";
+import { useEffect, useMemo, useState } from "preact/hooks";
+//#region src/hooks/useGlobalComponents.ts
+/**
+* Subscribe to the global component defaults from the SDK config store.
+* These serve as fallbacks when no placement-level override exists.
+*/
+function useGlobalComponents() {
+	const [configVersion, setConfigVersion] = useState(0);
+	useEffect(() => {
+		const onConfig = (_e) => {
+			setConfigVersion((v) => v + 1);
+		};
+		window.addEventListener("frak:config", onConfig);
+		setConfigVersion((v) => v + 1);
+		return () => window.removeEventListener("frak:config", onConfig);
+	}, []);
+	return useMemo(() => sdkConfigStore.getConfig().components, [configVersion]);
+}
+//#endregion
+export { useGlobalComponents as t };

package/dist/{useLightDomStyles-B5Y_fH4K.js → useLightDomStyles-hgYYZsTy.js}

@@ -1,4 +1,4 @@
-import { i as lightDomBaseCss } from "./usePlacement-CHEgrdvN.js";
+import { r as lightDomBaseCss } from "./usePlacement-LqYjZLX_.js";
 import { useEffect } from "preact/hooks";
 //#region src/utils/styleManager.ts
 function ensureStyle(id, css) {

package/dist/{usePlacement-CHEgrdvN.js → usePlacement-LqYjZLX_.js}

@@ -227,87 +227,6 @@ const lightDomBaseCss = `
     }
 }
 `;
-const bannerBaseCss = `
-:where(frak-banner) {
-    display: block;
-}
-
-:where(frak-banner .banner) {
-    display: flex;
-    align-items: center;
-    gap: 12px;
-    padding: 12px 16px;
-    border-top: 2px solid #3b82f6;
-    border-bottom: 2px solid #3b82f6;
-    font-family: inherit;
-    line-height: 1.4;
-}
-
-:where(frak-banner .banner__fadeIn) {
-    animation: frak-fadeIn 300ms ease-in;
-}
-
-@keyframes frak-fadeIn {
-    from {
-        opacity: 0;
-    }
-
-    to {
-        opacity: 1;
-    }
-}
-
-:where(frak-banner .banner__icon) {
-    flex-shrink: 0;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 32px;
-    height: 32px;
-    color: #3b82f6;
-}
-
-:where(frak-banner .banner__icon svg) {
-    width: 100%;
-    height: 100%;
-}
-
-:where(frak-banner .banner__content) {
-    flex: 1;
-    min-width: 0;
-}
-
-:where(frak-banner .banner__title) {
-    font-weight: 700;
-    font-size: 0.875rem;
-    margin: 0 0 2px;
-}
-
-:where(frak-banner .banner__description) {
-    font-size: 0.75rem;
-    margin: 0;
-    opacity: 0.7;
-}
-
-:where(frak-banner .banner__cta) {
-    flex-shrink: 0;
-    padding: 8px 16px;
-    font-weight: 700;
-    font-size: 0.75rem;
-    text-transform: uppercase;
-    letter-spacing: 0.05em;
-    border: 2px solid #eab308;
-    border-radius: 0;
-    background: #eab308;
-    color: #1e293b;
-    cursor: pointer;
-    white-space: nowrap;
-}
-
-:where(frak-banner .banner__cta:hover) {
-    opacity: 0.9;
-}
-`;
 //#endregion
 //#region src/hooks/usePlacement.ts
 function getPlacement(id) {
@@ -326,4 +245,4 @@ function usePlacement(placementId) {
 	return useMemo(() => placementId ? getPlacement(placementId) : void 0, [placementId, configVersion]);
 }
 //#endregion
-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 };
+export { registerWebComponent as a, useClientReady as i, buildStyleContent as n, openWalletModal as o, lightDomBaseCss as r, openEmbeddedWallet as s, usePlacement as t };

package/dist/{useReward-XF2hB_C_.js → useReward-DU3_yP8Q.js}

@@ -1,4 +1,4 @@
-import { t as formatEstimatedReward } from "./formatReward-_UYA3aHE.js";
+import { n as formatEstimatedReward } from "./formatReward-Bub6Z6eY.js";
 import { getCurrencyAmountKey, getSupportedCurrency } from "@frak-labs/core-sdk";
 import { getMerchantInformation } from "@frak-labs/core-sdk/actions";
 import { useEffect, useState } from "preact/hooks";

package/package.json

@@ -11,7 +11,7 @@
       "url": "https://twitter.com/QNivelais"
     }
   ],
-  "version": "0.0.26-beta.53dfa7b2",
+  "version": "0.0.26-beta.5989fbc3",
   "description": "Frak Wallet components, helping any person to interact with the Frak wallet.",
   "repository": {
     "url": "https://github.com/frak-id/wallet",
@@ -86,14 +86,13 @@
     "publish": "echo 'Publishing components...'"
   },
   "dependencies": {
-    "@frak-labs/core-sdk": "0.2.1-beta.53dfa7b2",
-    "@frak-labs/frame-connector": "0.2.0-beta.53dfa7b2",
+    "@frak-labs/core-sdk": "0.2.1-beta.5989fbc3",
+    "@frak-labs/frame-connector": "0.2.0-beta.5989fbc3",
     "preact": "^10.29.0",
     "preact-custom-element": "^4.6.0",
     "@frak-labs/design-system": "0.0.0"
   },
   "devDependencies": {
-    "@frak-labs/dev-tooling": "0.0.0",
     "@frak-labs/test-foundation": "0.1.0",
     "@preact/preset-vite": "^2.10.4",
     "@rolldown/plugin-node-polyfills": "^1.0.3",
@@ -101,16 +100,17 @@
     "@testing-library/preact": "^3.2.4",
     "@testing-library/user-event": "^14.6.1",
     "@types/jsdom": "^28.0.0",
-    "@types/node": "^24.10.13",
+    "@types/node": "^25.6.0",
     "@types/preact-custom-element": "^4.0.4",
     "@vanilla-extract/css": "^1.20.1",
     "@vanilla-extract/integration": "^8.0.10",
+    "@vanilla-extract/vite-plugin": "^5.2.1",
     "@vanilla-extract/sprinkles": "^1.6.5",
     "@vitest/coverage-v8": "^4.1.0",
     "@vitest/ui": "^4.1.0",
     "jsdom": "^29.0.0",
-    "tsdown": "^0.21.7",
-    "typescript": "^5.9.3",
-    "vitest": "^4.1.0"
+    "tsdown": "^0.21.8",
+    "typescript": "^6.0.2",
+    "vitest": "^4.1.4"
   }
 }

package/cdn/Banner.BrITmwhY.js

@@ -1 +0,0 @@
-import{f as e,m as t,p as n}from"./loader.js";import{c as r,d as i,l as a,n as o,o as s,r as c,s as l,t as u,u as d}from"./jsxRuntime.module.GTd8MQxp.js";import{t as f}from"./useLightDomStyles.B33IA3q5.js";import{t as p}from"./useReward.CvZWCurW.js";function m(){return u(`svg`,{viewBox:`0 0 24 24`,fill:`none`,stroke:`currentColor`,"stroke-width":`1.5`,"stroke-linecap":`round`,"stroke-linejoin":`round`,"aria-hidden":`true`,children:[u(`rect`,{x:`3`,y:`11`,width:`18`,height:`11`,rx:`1`}),u(`path`,{d:`M12 11v11`}),u(`rect`,{x:`5`,y:`7`,width:`14`,height:`4`,rx:`1`}),u(`path`,{d:`M12 7c0 0-1.5-4-4.5-4S5 5 7.5 7`}),u(`path`,{d:`M12 7c0 0 1.5-4 4.5-4S19 5 16.5 7`})]})}function h(){return u(`svg`,{viewBox:`0 0 24 24`,fill:`none`,stroke:`currentColor`,"stroke-width":`1.5`,"stroke-linecap":`round`,"stroke-linejoin":`round`,"aria-hidden":`true`,children:[u(`path`,{d:`M18 13v6a2 2 0 01-2 2H5a2 2 0 01-2-2V8a2 2 0 012-2h6`}),u(`polyline`,{points:`15 3 21 3 21 9`}),u(`line`,{x1:`10`,y1:`14`,x2:`21`,y2:`3`})]})}function g({placement:i,classname:g=``,interaction:_,referralTitle:v,referralDescription:y,referralCta:b,inappTitle:x,inappDescription:S,inappCta:C,preview:w,previewMode:T}){let E=!!w,D=T===`inapp`?`inapp`:`referral`,O=o(i),{shouldRender:k,isHidden:A,isClientReady:j}=s();f(`frak-banner`,i,O?.components?.banner?.css,c);let[M,N]=r(!1),[P,F]=r(()=>E?D:t?`inapp`:null);d(()=>{E&&F(D)},[E,D]);let{reward:I}=p(P===`referral`&&j,_);d(()=>{if(E||P===`inapp`)return;let t=()=>F(`referral`);return window.addEventListener(e,t),()=>window.removeEventListener(e,t)},[E,P]);let L=a(()=>{E||(P===`referral`?N(!0):n(window.location.href))},[E,P]),R=O?.components?.banner,z=l(()=>{if(P===`referral`){let e=I?`Earn ${I} on purchases on this site`:`You've been referred!`;return{title:v??R?.referralTitle??e,description:y??R?.referralDescription??`Earn rewards after your purchase via the Frak partner app.`,cta:b??R?.referralCta??`Got it`}}return{title:x??R?.inappTitle??`Open in your browser`,description:S??R?.inappDescription??`For a better experience and to earn your rewards, open this page in your default browser.`,cta:C??R?.inappCta??`Open browser`}},[P,I,R,v,y,b,x,S,C]);return!E&&(!k||A||M||!P)?null:u(`div`,{class:[`banner`,`banner__fadeIn`,g].filter(Boolean).join(` `),role:`alert`,children:[u(`div`,{class:`banner__icon`,children:u(P===`referral`?m:h,{})}),u(`div`,{class:`banner__content`,children:[u(`p`,{class:`banner__title`,children:z.title}),u(`p`,{class:`banner__description`,children:z.description})]}),u(`button`,{type:`button`,class:`banner__cta`,onClick:L,children:z.cta})]})}i(g,`frak-banner`,[`placement`,`classname`,`interaction`,`referralTitle`,`referralDescription`,`referralCta`,`inappTitle`,`inappDescription`,`inappCta`,`preview`,`previewMode`],{shadow:!1});export{g as Banner};

package/cdn/ButtonShare.Byvhu5Tc.js

@@ -1 +0,0 @@
-import{S as e,d as t,o as n}from"./loader.js";import{c as r,d as i,l as a,m as o,n as s,o as c,s as l,t as u}from"./jsxRuntime.module.GTd8MQxp.js";import{t as d}from"./useLightDomStyles.B33IA3q5.js";import{t as f}from"./useReward.CvZWCurW.js";import{t as p}from"./useShareModal.BJBvkHbY.js";async function m(e,n){if(!window.FrakSetup?.client){console.error(`Frak client not found`);return}await t(window.FrakSetup.client,{metadata:{...e&&{targetInteraction:e}}},n)}function h(e={}){let{successDuration:t=2e3}=e,[n,i]=r(!1);return{copy:a(async e=>{try{if(navigator.clipboard&&window.isSecureContext)await navigator.clipboard.writeText(e),i(!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`),i(!0)}catch(e){return console.error(`Failed to copy text:`,e),!1}finally{t.remove()}}return setTimeout(()=>{i(!1)},t),!0}catch(e){return console.error(`Failed to copy text:`,e),!1}},[t]),copied:n}}const g={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 _({debugInfo:e}){let[t,n]=r(!1);return u(`div`,{children:[u(`button`,{type:`button`,style:g.copyButton,onClick:()=>n(!t),children:`Ouvrir les informations`}),t&&u(`textarea`,{style:{display:`block`,width:`100%`,height:`200px`,fontSize:`12px`},children:e})]})}function v({debugInfo:e}){let{copied:t,copy:n}=h();return u(`div`,{style:g.errorContainer,children:[u(`div`,{style:g.header,children:u(`h3`,{style:g.title,children:`Oups ! Nous avons rencontré un petit problème`})}),u(`p`,{style:g.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 à`,` `,u(`a`,{href:`mailto:help@frak-labs.com?subject=Debug`,style:g.link,children:`help@frak-labs.com`}),` `,u(`br`,{}),`Merci pour votre retour, nous traitons votre demande dans les plus brefs délais.`]}),u(`button`,{type:`button`,onClick:()=>n(e??``),style:g.copyButton,children:t?`Informations copiées !`:`Copier les informations de débogage`}),u(_,{debugInfo:e})]})}function y({placement:t,text:r=`Share and earn!`,classname:i=``,useReward:h,noRewardText:g,targetInteraction:_,clickAction:y}){let b=s(t),x=b?.components?.buttonShare;d(`frak-button-share`,t,x?.css);let S=l(()=>b?.targetInteraction===void 0?_:b.targetInteraction,[b?.targetInteraction,_]),C=x?.text??r,w=x?.noRewardText??g,T=l(()=>x?.useReward??h===!0,[x?.useReward,h]),E=l(()=>x?.clickAction??y??`sharing-page`,[x?.clickAction,y]),{shouldRender:D,isHidden:O,isClientReady:k}=c(),{reward:A}=f(T&&k,S),{handleShare:j,isError:M,debugInfo:N}=p(S,t),P=l(()=>T?A?C.includes(`{REWARD}`)?C.replace(`{REWARD}`,A):`${C} ${A}`:w??C.replace(`{REWARD}`,``):C,[T,C,w,A]),F=a(async()=>{e(window.FrakSetup.client,`share_button_clicked`),E===`embedded-wallet`?n(S,t):E===`share-modal`?await j():m(S,t)},[E,j,S,t]);if(!D||O)return null;let I=[`button`,`button__fadeIn`,i].filter(Boolean).join(` `);return u(o,{children:[u(`button`,{type:`button`,disabled:!k,class:I,onClick:F,children:P}),M&&u(v,{debugInfo:N})]})}i(y,`frak-button-share`,[`text`,`placement`,`classname`,`clickAction`,`useReward`,`noRewardText`,`targetInteraction`],{shadow:!1});export{y as ButtonShare};

package/cdn/ButtonWallet.C_GtjZpW.js

@@ -1,40 +0,0 @@
-import{S as e,a as t}from"./loader.js";import{c as n,d as r,i,m as a,n as o,o as s,s as c,t as l,u}from"./jsxRuntime.module.GTd8MQxp.js";import{t as d}from"./useReward.CvZWCurW.js";function f(e){return l(`svg`,{fill:`none`,height:`1em`,viewBox:`0 0 28 28`,width:`1em`,xmlns:`http://www.w3.org/2000/svg`,...e,children:[l(`title`,{children:`Gift icon`}),l(`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`})]})}function p({placement:r,classname:p=``,useReward:m,targetInteraction:h}){let g=o(r),_=c(()=>g?.targetInteraction===void 0?h:g.targetInteraction,[g?.targetInteraction,h]),v=c(()=>m===!0,[m]),{shouldRender:y,isHidden:b,isClientReady:x}=s(),{reward:S}=d(v&&x,_),[C,w]=n(`right`);if(u(()=>{let e=g?.components?.buttonWallet?.position,t=window.FrakSetup?.modalWalletConfig?.metadata?.position;w(e??t??`right`)},[g?.components?.buttonWallet?.position]),!y||b)return null;let T=[`button`,`button__fadeIn`,C===`left`?`button__left`:`button__right`,p].filter(Boolean).join(` `);return l(a,{children:[l(`style`,{children:i(`
-.button {
-    all: unset;
-    position: fixed;
-    bottom: 20px;
-    z-index: 2000000;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    background-color: #3e557e;
-    width: 45px;
-    height: 45px;
-    border-radius: 50%;
-    cursor: pointer;
-    text-align: center;
-    font-size: 24px;
-}
-
-.button__left {
-    left: 20px;
-}
-
-.button__right {
-    right: 20px;
-}
-
-.reward {
-    position: absolute;
-    top: -4px;
-    right: 27px;
-    padding: 2px 3px;
-    border-radius: 5px;
-    background: #ff3f3f;
-    font-size: 9px;
-    color: #fff;
-    font-weight: 600;
-    white-space: nowrap;
-    line-height: 9px;
-}
-`,g?.components?.buttonWallet?.css)}),l(`button`,{type:`button`,"aria-label":`Open wallet`,part:`button`,disabled:!x,class:T,onClick:()=>{e(window.FrakSetup.client,`wallet_button_clicked`),t(_,r)},children:[l(f,{}),S&&l(`span`,{class:`reward`,children:S})]})]})}r(p,`frak-button-wallet`,[`placement`,`classname`,`useReward`,`targetInteraction`],{shadow:!0});export{p as ButtonWallet};

package/cdn/OpenInAppButton.CZBmQT_a.js

@@ -1 +0,0 @@
-import{S as e,g as t,y as n}from"./loader.js";import{d as r,n as i,o as a,s as o,t as s}from"./jsxRuntime.module.GTd8MQxp.js";import{t as c}from"./useLightDomStyles.B33IA3q5.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(r=`wallet`){let i=window.FrakSetup?.client;i&&e(i,`open_in_app_clicked`),t(`${n}${r}`,{onFallback:()=>{i&&e(i,`app_not_installed`)}})}function f({placement:e,text:t=`Open in App`,classname:n=``}){let r=i(e),{shouldRender:o,isHidden:l,isClientReady:f}=a(),{isMobile:p}=u();c(`frak-open-in-app`,e,r?.components?.openInApp?.css);let m=r?.components?.openInApp?.text??t;if(!p||!o||l)return null;let h=()=>{d()},g=[`button`,`button__fadeIn`,n].filter(Boolean).join(` `);return s(`button`,{type:`button`,"aria-label":`Open in Frak Wallet app`,disabled:!f,class:g,onClick:h,children:m})}r(f,`frak-open-in-app`,[`text`,`placement`,`classname`],{shadow:!1});export{f as OpenInAppButton};