@frak-labs/components 0.0.23 → 0.0.24-beta.2c88e0f4

package/dist/buttonWallet.d.ts

@@ -1,64 +1,79 @@
-import type { FullInteractionTypesKey } from '@frak-labs/core-sdk';
-import { JSX } from 'preact';
-
-/**
- * Button to open wallet modal
- *
- * @param args
- * @returns The wallet button with `<button>` tag
- *
- * @group components
- *
- * @example
- * Basic usage:
- * ```html
- * <frak-button-wallet></frak-button-wallet>
- * ```
- *
- * @example
- * Using a custom class:
- * ```html
- * <frak-button-wallet classname="button button-primary"></frak-button-wallet>
- * ```
- *
- * @example
- * Using reward information:
- * ```html
- * <frak-button-wallet use-reward></frak-button-wallet>
- * ```
- *
- * @example
- * Using reward information for specific reward:
- * ```html
- * <frak-button-wallet use-reward target-interaction="retail.customerMeeting"></frak-button-wallet>
- * ```
- *
- * @see {@link @frak-labs/core-sdk!actions.modalBuilder | `modalBuilder()`} for more info about the modal display
- * @see {@link @frak-labs/core-sdk!actions.getProductInformation | `getProductInformation()`} for more info about the estimated reward fetching
- */
-export declare function ButtonWallet({ classname, useReward: rawUseReward, targetInteraction, }: ButtonWalletProps): JSX.Element;
-
-export declare interface ButtonWalletElement extends HTMLElement, ButtonWalletProps {
-}
-
-/**
- * The props type for {@link ButtonWallet}.
- * @inline
- */
-declare type ButtonWalletProps = {
-    /**
-     * Classname to apply to the button
-     */
-    classname?: string;
-    /**
-     * Do we display the reward on the button?
-     * @defaultValue `false`
-     */
-    useReward?: boolean;
-    /**
-     * Target interaction behind this sharing action (will be used to get the right reward to display)
-     */
-    targetInteraction?: FullInteractionTypesKey;
-};
-
-export { }
+import { InteractionTypeKey } from "@frak-labs/core-sdk";
+import * as preact from "preact";
+
+//#region src/components/ButtonWallet/types.d.ts
+/**
+ * The props type for {@link ButtonWallet}.
+ * @inline
+ */
+type ButtonWalletProps = {
+  /**
+   * Classname to apply to the button
+   */
+  classname?: string;
+  /**
+   * Do we display the reward on the button?
+   * @defaultValue `false`
+   */
+  useReward?: boolean;
+  /**
+   * Target interaction behind this sharing action (will be used to get the right reward to display)
+   */
+  targetInteraction?: InteractionTypeKey;
+};
+//#endregion
+//#region src/components/ButtonWallet/ButtonWallet.d.ts
+/**
+ * Button to open wallet modal
+ *
+ * @param args
+ * @returns The wallet button with `<button>` tag
+ *
+ * @group components
+ *
+ * @example
+ * Basic usage:
+ * ```html
+ * <frak-button-wallet></frak-button-wallet>
+ * ```
+ *
+ * @example
+ * Using a custom class:
+ * ```html
+ * <frak-button-wallet classname="button button-primary"></frak-button-wallet>
+ * ```
+ *
+ * @example
+ * Using reward information:
+ * ```html
+ * <frak-button-wallet use-reward></frak-button-wallet>
+ * ```
+ *
+ * @example
+ * Using reward information for specific reward:
+ * ```html
+ * <frak-button-wallet use-reward target-interaction="custom.customerMeeting"></frak-button-wallet>
+ * ```
+ *
+ * @see {@link @frak-labs/core-sdk!actions.modalBuilder | `modalBuilder()`} for more info about the modal display
+ * @see {@link @frak-labs/core-sdk!actions.getMerchantInformation | `getMerchantInformation()`} for more info about the estimated reward fetching
+ */
+declare function ButtonWallet({
+  classname,
+  useReward: rawUseReward,
+  targetInteraction
+}: ButtonWalletProps): preact.JSX.Element;
+//#endregion
+//#region src/components/ButtonWallet/index.d.ts
+/**
+ * Custom element interface for `<frak-button-wallet>`.
+ * Combines standard {@link HTMLElement} with {@link ButtonWalletProps}.
+ */
+interface ButtonWalletElement extends HTMLElement, ButtonWalletProps {}
+declare global {
+  interface HTMLElementTagNameMap {
+    "frak-button-wallet": ButtonWalletElement;
+  }
+}
+//#endregion
+export { ButtonWallet, ButtonWalletElement };

package/dist/buttonWallet.js

@@ -1 +1,109 @@
-import e from"preact-custom-element";import{formatAmount as t,getCurrencyAmountKey as n,setupClient as o,trackEvent as r}from"@frak-labs/core-sdk";import{displayEmbeddedWallet as i,getProductInformation as a,modalBuilder as l,referralInteraction as u}from"@frak-labs/core-sdk/actions";import{jsx as c,jsxs as _}from"preact/jsx-runtime";import{useCallback as s,useEffect as f,useMemo as d,useState as p}from"preact/hooks";import{cx as v}from"class-variance-authority";import{Component as m,Fragment as h,createElement as w,options as k,toChildArray as y}from"preact";import*as g from"@frak-labs/core-sdk/bundle";function b(){if(!window.FrakSetup?.client)return void console.error("Frak client not found");"vibrate"in navigator?navigator.vibrate(10):console.log("Vibration not supported"),i(window.FrakSetup.client,window.FrakSetup?.modalWalletConfig??{})}let S="frakClientReady";function F(e,t){if(window.FrakSetup?.client&&"add"===e)return void t();("add"===e?window.addEventListener:window.removeEventListener)(S,t,!1)}async function C(e){console.log("referral",await u(e,{modalConfig:window.FrakSetup?.modalWalletConfig}))}async function P(){if(window.FrakSetup.core=g,!(window.frakSetupInProgress?(console.log("[Frak SDK] Initialization already in progress"),!1):window.FrakSetup?.client?(console.log("[Frak SDK] Client already initialized"),!1):!!window.FrakSetup?.config||(console.error("[Frak SDK] Configuration not found. Please ensure window.FrakSetup.config is set."),!1)))return;if(console.log("[Frak SDK] Starting initialization"),window.frakSetupInProgress=!0,!window.FrakSetup.config){console.error("[Frak SDK] Configuration not found"),window.frakSetupInProgress=!1;return}let e=await o({config:window.FrakSetup.config});if(!e){console.error("[Frak SDK] Failed to create client"),window.frakSetupInProgress=!1;return}window.FrakSetup.client=e,console.log("[Frak SDK] Client initialized successfully");let t=new CustomEvent(S);window.dispatchEvent(t),window.modalBuilderSteps=l(e,window.FrakSetup?.modalConfig??{}),C(e),window.frakSetupInProgress=!1,function(){let e=new URLSearchParams(window.location.search).get("frakAction");e&&"share"===e&&(console.log("[Frak SDK] Auto open query param found"),b())}()}async function E({targetInteraction:e}){let o=window.FrakSetup?.client;if(!o)return void console.warn("Frak client not ready yet");let{maxReferrer:r,rewards:i}=await a(o);if(!r)return;let l=n(o.config.metadata?.currency),u=Math.round(r[l]);if(e){let t=i.filter(t=>t.interactionTypeKey===e).map(e=>e.referrer[l]).reduce((e,t)=>t>e?t:e,0);t>0&&(u=Math.round(t))}return t(u,o.config.metadata?.currency)}let O={button:"button-aPZnsb",button__left:"button__left-fQJUnK",button__right:"button__right-TkFFFK",reward:"reward-w5dm3K"};function x(e,t){for(var n in e)if("__source"!==n&&!(n in t))return!0;for(var o in t)if("__source"!==o&&e[o]!==t[o])return!0;return!1}function D(e,t){this.props=e,this.context=t}(D.prototype=new m).isPureReactComponent=!0,D.prototype.shouldComponentUpdate=function(e,t){return x(this.props,e)||x(this.state,t)};var K=k.__b;k.__b=function(e){e.type&&e.type.__f&&e.ref&&(e.props.ref=e.ref,e.ref=null),K&&K(e)},"undefined"!=typeof Symbol&&Symbol.for&&Symbol.for("react.forward_ref");var R=k.__e;k.__e=function(e,t,n,o){if(e.then){for(var r,i=t;i=i.__;)if((r=i.__c)&&r.__c)return null==t.__e&&(t.__e=n.__e,t.__k=n.__k),r.__c(e,t)}R(e,t,n,o)};var L=k.unmount;function U(){this.__u=0,this.o=null,this.__b=null}function N(e){var t=e.__.__c;return t&&t.__a&&t.__a(e)}function V(){this.i=null,this.l=null}k.unmount=function(e){var t=e.__c;t&&t.__R&&t.__R(),t&&32&e.__u&&(e.type=null),L&&L(e)},(U.prototype=new m).__c=function(e,t){var n=t.__c,o=this;null==o.o&&(o.o=[]),o.o.push(n);var r=N(o.__v),i=!1,a=function(){i||(i=!0,n.__R=null,r?r(l):l())};n.__R=a;var l=function(){if(!--o.__u){if(o.state.__a){var e,t=o.state.__a;o.__v.__k[0]=function e(t,n,o){return t&&o&&(t.__v=null,t.__k=t.__k&&t.__k.map(function(t){return e(t,n,o)}),t.__c&&t.__c.__P===n&&(t.__e&&o.appendChild(t.__e),t.__c.__e=!0,t.__c.__P=o)),t}(t,t.__c.__P,t.__c.__O)}for(o.setState({__a:o.__b=null});e=o.o.pop();)e.forceUpdate()}};o.__u++||32&t.__u||o.setState({__a:o.__b=o.__v.__k[0]}),e.then(a,a)},U.prototype.componentWillUnmount=function(){this.o=[]},U.prototype.render=function(e,t){if(this.__b){if(this.__v.__k){var n=document.createElement("div"),o=this.__v.__k[0].__c;this.__v.__k[0]=function e(t,n,o){return t&&(t.__c&&t.__c.__H&&(t.__c.__H.__.forEach(function(e){"function"==typeof e.__c&&e.__c()}),t.__c.__H=null),null!=(t=function(e,t){for(var n in t)e[n]=t[n];return e}({},t)).__c&&(t.__c.__P===o&&(t.__c.__P=n),t.__c.__e=!0,t.__c=null),t.__k=t.__k&&t.__k.map(function(t){return e(t,n,o)})),t}(this.__b,n,o.__O=o.__P)}this.__b=null}var r=t.__a&&w(h,null,e.fallback);return r&&(r.__u&=-33),[w(h,null,t.__a?null:e.children),r]};var W=function(e,t,n){if(++n[1]===n[0]&&e.l.delete(t),e.props.revealOrder&&("t"!==e.props.revealOrder[0]||!e.l.size))for(n=e.i;n;){for(;n.length>3;)n.pop()();if(n[1]<n[0])break;e.i=n=n[2]}};(V.prototype=new m).__a=function(e){var t=this,n=N(t.__v),o=t.l.get(e);return o[0]++,function(r){var i=function(){t.props.revealOrder?(o.push(r),W(t,e,o)):r()};n?n(i):i()}},V.prototype.render=function(e){this.i=null,this.l=new Map;var t=y(e.children);e.revealOrder&&"b"===e.revealOrder[0]&&t.reverse();for(var n=t.length;n--;)this.l.set(t[n],this.i=[1,0,this.i]);return e.children},V.prototype.componentDidUpdate=V.prototype.componentDidMount=function(){var e=this;this.l.forEach(function(t,n){W(e,n,t)})};var A="undefined"!=typeof Symbol&&Symbol.for&&Symbol.for("react.element")||60103,M=/^(?:accent|alignment|arabic|baseline|cap|clip(?!PathU)|color|dominant|fill|flood|font|glyph(?!R)|horiz|image(!S)|letter|lighting|marker(?!H|W|U)|overline|paint|pointer|shape|stop|strikethrough|stroke|text(?!L)|transform|underline|unicode|units|v|vector|vert|word|writing|x(?!C))[A-Z]/,z=/^on(Ani|Tra|Tou|BeforeInp|Compo)/,H=/[A-Z0-9]/g,I="undefined"!=typeof document;m.prototype.isReactComponent={},["componentWillMount","componentWillReceiveProps","componentWillUpdate"].forEach(function(e){Object.defineProperty(m.prototype,e,{configurable:!0,get:function(){return this["UNSAFE_"+e]},set:function(t){Object.defineProperty(this,e,{configurable:!0,writable:!0,value:t})}})});var j=k.event;function B(){}function T(){return this.cancelBubble}function Z(){return this.defaultPrevented}k.event=function(e){return j&&(e=j(e)),e.persist=B,e.isPropagationStopped=T,e.isDefaultPrevented=Z,e.nativeEvent=e};var $={enumerable:!1,configurable:!0,get:function(){return this.class}},q=k.vnode;k.vnode=function(e){"string"==typeof e.type&&function(e){var t=e.props,n=e.type,o={},r=-1===n.indexOf("-");for(var i in t){var a=t[i];if(!("value"===i&&"defaultValue"in t&&null==a||I&&"children"===i&&"noscript"===n||"class"===i||"className"===i)){var l,u=i.toLowerCase();"defaultValue"===i&&"value"in t&&null==t.value?i="value":"download"===i&&!0===a?a="":"translate"===u&&"no"===a?a=!1:"o"===u[0]&&"n"===u[1]?"ondoubleclick"===u?i="ondblclick":"onchange"!==u||"input"!==n&&"textarea"!==n||(l=t.type,("undefined"!=typeof Symbol&&"symbol"==typeof Symbol()?/fil|che|rad/:/fil|che|ra/).test(l))?"onfocus"===u?i="onfocusin":"onblur"===u?i="onfocusout":z.test(i)&&(i=u):u=i="oninput":r&&M.test(i)?i=i.replace(H,"-$&").toLowerCase():null===a&&(a=void 0),"oninput"===u&&o[i=u]&&(i="oninputCapture"),o[i]=a}}"select"==n&&o.multiple&&Array.isArray(o.value)&&(o.value=y(t.children).forEach(function(e){e.props.selected=-1!=o.value.indexOf(e.props.value)})),"select"==n&&null!=o.defaultValue&&(o.value=y(t.children).forEach(function(e){e.props.selected=o.multiple?-1!=o.defaultValue.indexOf(e.props.value):o.defaultValue==e.props.value})),t.class&&!t.className?(o.class=t.class,Object.defineProperty(o,"className",$)):(t.className&&!t.class||t.class&&t.className)&&(o.class=o.className=t.className),e.props=o}(e),e.$$typeof=A,q&&q(e)};var J=k.__r;k.__r=function(e){J&&J(e),e.__c};var Q=k.diffed;k.diffed=function(e){Q&&Q(e);var t=e.props,n=e.__e;null!=n&&"textarea"===e.type&&"value"in t&&t.value!==n.value&&(n.value=null==t.value?"":t.value)};let G=e=>c("svg",{xmlns:"http://www.w3.org/2000/svg",width:"1em",height:"1em",fill:"none",viewBox:"0 0 28 28",...e,children:c("path",{stroke:"#fff",strokeLinecap:"round",strokeLinejoin:"round",d:"M23.143 14v11.428H4.857V14M14 25.428V8.286m0 0H8.857a2.857 2.857 0 0 1 0-5.715c4 0 5.143 5.715 5.143 5.715m0 0h5.143a2.857 2.857 0 1 0 0-5.715c-4 0-5.143 5.715-5.143 5.715m-11.429 0h22.857V14H2.571z"})});function X({classname:e="",useReward:t,targetInteraction:n}){let o=d(()=>void 0!==t,[t]),{isClientReady:i}=function(){let[e,t]=p(!0),n=s(()=>{t(!1)},[]);return f(()=>(F("add",n),()=>F("remove",n)),[n]),{isClientReady:!e}}(),{reward:a}=function(e,t){let[n,o]=p(void 0);return f(()=>{e&&E({targetInteraction:t}).then(e=>{e&&o(e)})},[e,t]),{reward:n}}(o&&i,n),[l,u]=p("right");return f(()=>{u(window.FrakSetup?.modalWalletConfig?.metadata?.position??"right")},[]),_("button",{type:"button","aria-label":"Open wallet",class:v(O.button,"left"===l?O.button__left:O.button__right,e,"override"),disabled:!i,onClick:()=>{r(window.FrakSetup.client,"wallet_button_clicked"),b()},children:[c(G,{}),a&&c("span",{className:O.reward,children:a})]})}!function(t,n,o=[],r={shadow:!1}){"undefined"!=typeof window&&("complete"===document.readyState||"interactive"===document.readyState?setTimeout(P,1):document.addEventListener?document.addEventListener("DOMContentLoaded",P):document.attachEvent("onreadystatechange",()=>{"complete"===document.readyState&&P()}),customElements.get(n)||e(t,n,o,r))}(X,"frak-button-wallet",[],{shadow:!1});export{X as ButtonWallet};
+import { i as openWalletModal, n as registerWebComponent, t as useClientReady } from "./useClientReady-iCtUeDsc.js";
+import { t as useReward } from "./useReward-DAkT-7wT.js";
+import { trackEvent } from "@frak-labs/core-sdk";
+import { cx } from "class-variance-authority";
+import { useEffect, useMemo, useState } from "preact/hooks";
+import { jsx, jsxs } from "preact/jsx-runtime";
+
+//#region src/components/ButtonWallet/assets/GiftIcon.tsx
+function GiftIcon(props) {
+	return /* @__PURE__ */ jsxs("svg", {
+		fill: "none",
+		height: "1em",
+		viewBox: "0 0 28 28",
+		width: "1em",
+		xmlns: "http://www.w3.org/2000/svg",
+		...props,
+		children: [/* @__PURE__ */ jsx("title", { children: "Gift icon" }), /* @__PURE__ */ jsx("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"
+		})]
+	});
+}
+
+//#endregion
+//#region src/components/ButtonWallet/ButtonWallet.module.css?css_module
+const classes = {
+	"button__right": "Kl62ia_button__right",
+	"button__left": "Kl62ia_button__left",
+	"button": "Kl62ia_button",
+	"reward": "Kl62ia_reward"
+};
+const _button__right0 = classes["button__right"];
+const _button__left0 = classes["button__left"];
+const _button0 = classes["button"];
+const _reward0 = classes["reward"];
+
+//#endregion
+//#region src/components/ButtonWallet/ButtonWallet.tsx
+/**
+* Button to open wallet modal
+*
+* @param args
+* @returns The wallet button with `<button>` tag
+*
+* @group components
+*
+* @example
+* Basic usage:
+* ```html
+* <frak-button-wallet></frak-button-wallet>
+* ```
+*
+* @example
+* Using a custom class:
+* ```html
+* <frak-button-wallet classname="button button-primary"></frak-button-wallet>
+* ```
+*
+* @example
+* Using reward information:
+* ```html
+* <frak-button-wallet use-reward></frak-button-wallet>
+* ```
+*
+* @example
+* Using reward information for specific reward:
+* ```html
+* <frak-button-wallet use-reward target-interaction="custom.customerMeeting"></frak-button-wallet>
+* ```
+*
+* @see {@link @frak-labs/core-sdk!actions.modalBuilder | `modalBuilder()`} for more info about the modal display
+* @see {@link @frak-labs/core-sdk!actions.getMerchantInformation | `getMerchantInformation()`} for more info about the estimated reward fetching
+*/
+function ButtonWallet({ classname = "", useReward: rawUseReward, targetInteraction }) {
+	const shouldUseReward = useMemo(() => rawUseReward !== void 0, [rawUseReward]);
+	const { isClientReady } = useClientReady();
+	const { reward } = useReward(shouldUseReward && isClientReady, targetInteraction);
+	const [position, setPosition] = useState("right");
+	/**
+	* Setup the position of the button
+	*/
+	useEffect(() => {
+		const position = window.FrakSetup?.modalWalletConfig?.metadata?.position;
+		setPosition(position ?? "right");
+	}, []);
+	return /* @__PURE__ */ jsxs("button", {
+		type: "button",
+		"aria-label": "Open wallet",
+		class: cx(classes.button, position === "left" ? classes.button__left : classes.button__right, classname, "override"),
+		disabled: !isClientReady,
+		onClick: () => {
+			trackEvent(window.FrakSetup.client, "wallet_button_clicked");
+			openWalletModal();
+		},
+		children: [/* @__PURE__ */ jsx(GiftIcon, {}), reward && /* @__PURE__ */ jsx("span", {
+			className: classes.reward,
+			children: reward
+		})]
+	});
+}
+
+//#endregion
+//#region src/components/ButtonWallet/index.ts
+registerWebComponent(ButtonWallet, "frak-button-wallet", [], { shadow: false });
+
+//#endregion
+export { ButtonWallet };

package/dist/openInApp.css

@@ -0,0 +1 @@
+.XYfqGq_button{justify-content:center;align-items:center;gap:10px;display:flex}

package/dist/openInApp.d.ts

@@ -0,0 +1,64 @@
+import * as preact from "preact";
+
+//#region src/components/OpenInAppButton/types.d.ts
+/**
+ * The props type for {@link OpenInAppButton}.
+ * @inline
+ */
+type OpenInAppButtonProps = {
+  /**
+   * Text to display on the button
+   * @defaultValue `"Open in App"`
+   */
+  text?: string;
+  /**
+   * Classname to apply to the button
+   */
+  classname?: string;
+};
+//#endregion
+//#region src/components/OpenInAppButton/OpenInAppButton.d.ts
+/**
+ * Button to open the Frak Wallet mobile app via deep link
+ *
+ * @param args
+ * @returns The open in app button with `<button>` tag (only renders on mobile devices)
+ *
+ * @group components
+ *
+ * @example
+ * Basic usage:
+ * ```html
+ * <frak-open-in-app></frak-open-in-app>
+ * ```
+ *
+ * @example
+ * Using a custom text:
+ * ```html
+ * <frak-open-in-app text="Get the App"></frak-open-in-app>
+ * ```
+ *
+ * @example
+ * With login action:
+ * ```html
+ * <frak-open-in-app classname="button button-primary"></frak-open-in-app>
+ * ```
+ */
+declare function OpenInAppButton({
+  text,
+  classname
+}: OpenInAppButtonProps): preact.JSX.Element | null;
+//#endregion
+//#region src/components/OpenInAppButton/index.d.ts
+/**
+ * Custom element interface for `<frak-open-in-app>`.
+ * Combines standard {@link HTMLElement} with {@link OpenInAppButtonProps}.
+ */
+interface OpenInAppButtonElement extends HTMLElement, OpenInAppButtonProps {}
+declare global {
+  interface HTMLElementTagNameMap {
+    "frak-open-in-app": OpenInAppButtonElement;
+  }
+}
+//#endregion
+export { OpenInAppButton, OpenInAppButtonElement };

package/dist/openInApp.js

@@ -0,0 +1,110 @@
+import { n as registerWebComponent, t as useClientReady } from "./useClientReady-iCtUeDsc.js";
+import { t as Spinner } from "./Spinner-ByXrz_8L.js";
+import { DEEP_LINK_SCHEME, trackEvent, triggerDeepLinkWithFallback } from "@frak-labs/core-sdk";
+import { cx } from "class-variance-authority";
+import { useMemo } from "preact/hooks";
+import { jsx, jsxs } from "preact/jsx-runtime";
+
+//#region src/utils/isMobile.ts
+/**
+* Check if the current device is a mobile device
+* Uses UA regex + iPad desktop mode heuristic (maxTouchPoints)
+*
+* iPadOS 13+ sends a Macintosh UA in desktop mode, so the regex alone
+* misses it. The maxTouchPoints check catches iPads reporting as Mac.
+*
+* @returns True if the device is mobile (iOS, Android, iPadOS, etc.)
+*/
+function isMobile() {
+	if (typeof navigator === "undefined") return false;
+	if (/iPhone|iPad|iPod|Android|webOS|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) return true;
+	if (/Macintosh/i.test(navigator.userAgent) && navigator.maxTouchPoints > 1) return true;
+	return false;
+}
+
+//#endregion
+//#region src/hooks/useIsMobile.ts
+function useIsMobile() {
+	return { isMobile: useMemo(() => isMobile(), []) };
+}
+
+//#endregion
+//#region src/utils/openInApp.ts
+const DEFAULT_PATH = "wallet";
+/**
+* Open the Frak Wallet mobile app via deep link with fallback detection.
+*
+* Uses visibility-based detection to determine if the app opened.
+* If the app is not installed (page stays visible after 2.5s),
+* tracks an "app_not_installed" event.
+*
+* @param path - Path to open in the app (default: "wallet")
+*/
+function openFrakWalletApp(path = DEFAULT_PATH) {
+	const client = window.FrakSetup?.client;
+	if (client) trackEvent(client, "open_in_app_clicked");
+	triggerDeepLinkWithFallback(`${DEEP_LINK_SCHEME}${path}`, { onFallback: () => {
+		if (client) trackEvent(client, "app_not_installed");
+	} });
+}
+
+//#endregion
+//#region src/components/OpenInAppButton/OpenInAppButton.module.css?css_module
+const classes = { "button": "XYfqGq_button" };
+const _button0 = classes["button"];
+
+//#endregion
+//#region src/components/OpenInAppButton/OpenInAppButton.tsx
+/**
+* Button to open the Frak Wallet mobile app via deep link
+*
+* @param args
+* @returns The open in app button with `<button>` tag (only renders on mobile devices)
+*
+* @group components
+*
+* @example
+* Basic usage:
+* ```html
+* <frak-open-in-app></frak-open-in-app>
+* ```
+*
+* @example
+* Using a custom text:
+* ```html
+* <frak-open-in-app text="Get the App"></frak-open-in-app>
+* ```
+*
+* @example
+* With login action:
+* ```html
+* <frak-open-in-app classname="button button-primary"></frak-open-in-app>
+* ```
+*/
+function OpenInAppButton({ text = "Open in App", classname = "" }) {
+	const { isClientReady } = useClientReady();
+	const { isMobile } = useIsMobile();
+	if (!isMobile) return null;
+	const handleClick = () => {
+		openFrakWalletApp();
+	};
+	return /* @__PURE__ */ jsxs("button", {
+		type: "button",
+		"aria-label": "Open in Frak Wallet app",
+		className: cx(classes.button, classname, "override"),
+		disabled: !isClientReady,
+		onClick: handleClick,
+		children: [
+			!isClientReady && /* @__PURE__ */ jsx(Spinner, {}),
+			" ",
+			text
+		]
+	});
+}
+
+//#endregion
+//#region src/components/OpenInAppButton/index.ts
+registerWebComponent(OpenInAppButton, "frak-open-in-app", ["text"], { shadow: false });
+
+//#endregion
+export { OpenInAppButton };

package/dist/useClientReady-iCtUeDsc.js

@@ -0,0 +1,197 @@
+import register from "preact-custom-element";
+import { setupClient } from "@frak-labs/core-sdk";
+import * as coreSdk from "@frak-labs/core-sdk/bundle";
+import { displayEmbeddedWallet, modalBuilder, referralInteraction } from "@frak-labs/core-sdk/actions";
+import { useCallback, useEffect, useState } from "preact/hooks";
+
+//#region ../../packages/ui/utils/onDocumentReady.ts
+/**
+* When the document is ready, run the callback
+* @param callback
+*/
+function onDocumentReady(callback) {
+	if (document.readyState === "complete" || document.readyState === "interactive") setTimeout(callback, 1);
+	else if (document.addEventListener) document.addEventListener("DOMContentLoaded", callback);
+	else document.attachEvent("onreadystatechange", () => {
+		if (document.readyState === "complete") callback();
+	});
+}
+
+//#endregion
+//#region src/utils/safeVibrate.ts
+/**
+* Attempt to vibrate the device
+*/
+function safeVibrate() {
+	if ("vibrate" in navigator) navigator.vibrate(10);
+	else console.log("Vibration not supported");
+}
+
+//#endregion
+//#region src/components/ButtonWallet/utils.ts
+/**
+* Open the wallet modal
+*
+* @description
+* This function will open the wallet modal with the configuration provided in the `window.FrakSetup.modalWalletConfig` object.
+*/
+function openWalletModal() {
+	if (!window.FrakSetup?.client) {
+		console.error("Frak client not found");
+		return;
+	}
+	safeVibrate();
+	displayEmbeddedWallet(window.FrakSetup.client, window.FrakSetup?.modalWalletConfig ?? {});
+}
+
+//#endregion
+//#region src/utils/clientReady.ts
+const CUSTOM_EVENT_NAME = "frakClientReady";
+/**
+* Dispatch a custom event when the Frak client is ready
+*/
+function dispatchClientReadyEvent() {
+	const event = new CustomEvent(CUSTOM_EVENT_NAME);
+	window.dispatchEvent(event);
+}
+/**
+* Add or remove an event listener for when the Frak client is ready
+* @param action
+* @param callback
+*/
+function onClientReady(action, callback) {
+	if (window.FrakSetup?.client && action === "add") {
+		callback();
+		return;
+	}
+	(action === "add" ? window.addEventListener : window.removeEventListener)(CUSTOM_EVENT_NAME, callback, false);
+}
+
+//#endregion
+//#region src/utils/setup.ts
+/**
+* Setup the modal config
+* @param client
+*/
+function setupModalConfig(client) {
+	window.modalBuilderSteps = modalBuilder(client, window.FrakSetup?.modalConfig ?? {});
+}
+/**
+* Setup the referral
+* @param client
+*/
+async function setupReferral(client) {
+	const referral = await referralInteraction(client, { modalConfig: window.FrakSetup?.modalWalletConfig });
+	console.log("referral", referral);
+}
+/**
+* Return the modal builder steps
+*/
+function getModalBuilderSteps() {
+	if (!window.modalBuilderSteps) throw new Error("modalBuilderSteps not found");
+	return window.modalBuilderSteps;
+}
+
+//#endregion
+//#region src/utils/initFrakSdk.ts
+/**
+* Initializes the Frak SDK client and sets up necessary configurations.
+* This function handles the one-time setup of the Frak client and related features.
+*
+* @returns {Promise<void>}
+*/
+async function initFrakSdk() {
+	window.FrakSetup.core = coreSdk;
+	if (!preChecks()) return;
+	console.log("[Frak SDK] Starting initialization");
+	if (!window.FrakSetup.config) {
+		console.error("[Frak SDK] Configuration not found");
+		window.frakSetupInProgress = false;
+		return;
+	}
+	const client = await setupClient({ config: window.FrakSetup.config });
+	if (!client) {
+		console.error("[Frak SDK] Failed to create client");
+		window.frakSetupInProgress = false;
+		return;
+	}
+	window.FrakSetup.client = client;
+	console.log("[Frak SDK] Client initialized successfully");
+	dispatchClientReadyEvent();
+	setupModalConfig(client);
+	setupReferral(client);
+	window.frakSetupInProgress = false;
+	handleActionQueryParam();
+}
+/**
+* Pre-checks for the Frak SDK initialization
+* Sets frakSetupInProgress flag atomically to prevent race conditions
+*/
+function preChecks() {
+	if (window.frakSetupInProgress) {
+		console.log("[Frak SDK] Initialization already in progress");
+		return false;
+	}
+	window.frakSetupInProgress = true;
+	if (window.FrakSetup?.client) {
+		console.log("[Frak SDK] Client already initialized");
+		window.frakSetupInProgress = false;
+		return false;
+	}
+	if (!window.FrakSetup?.config) {
+		console.error("[Frak SDK] Configuration not found. Please ensure window.FrakSetup.config is set.");
+		window.frakSetupInProgress = false;
+		return false;
+	}
+	return true;
+}
+/**
+* Check the query param contain params for an auto opening of the frak modal
+*/
+function handleActionQueryParam() {
+	const frakAction = new URLSearchParams(window.location.search).get("frakAction");
+	if (!frakAction) return;
+	if (frakAction === "share") {
+		console.log("[Frak SDK] Auto open query param found");
+		openWalletModal();
+	}
+}
+
+//#endregion
+//#region src/utils/registerWebComponent.ts
+/**
+* Registers a Preact component as a custom web component
+*
+* @param component - The Preact component to register
+* @param tagName - The custom element tag name (e.g., "frak-button-wallet")
+* @param observedAttributes - Array of attribute names to observe for changes
+* @param options - Registration options (e.g., { shadow: false })
+*/
+function registerWebComponent(component, tagName, observedAttributes = [], options = { shadow: false }) {
+	if (typeof window !== "undefined") {
+		onDocumentReady(initFrakSdk);
+		if (!customElements.get(tagName)) register(component, tagName, observedAttributes, options);
+	}
+}
+
+//#endregion
+//#region src/hooks/useClientReady.ts
+/**
+* Hook to manage client readiness state for the wallet button
+* Handles subscription to client ready events and manages readiness state
+* @returns Object containing the readiness state of the client
+*/
+function useClientReady() {
+	const [disabled, setDisabled] = useState(true);
+	const handleClientReady = useCallback(() => {
+		setDisabled(false);
+	}, []);
+	useEffect(() => {
+		onClientReady("add", handleClientReady);
+		return () => onClientReady("remove", handleClientReady);
+	}, [handleClientReady]);
+	return { isClientReady: !disabled };
+}
+
+//#endregion
+export { openWalletModal as i, registerWebComponent as n, getModalBuilderSteps as r, useClientReady as t };