@frak-labs/components/dist/openInApp.js

Frak Wallet components, helping any person to interact with the Frak wallet.

import { a as registerWebComponent, i as useClientReady, t as usePlacement } from "./usePlacement-5kbU3BKj.js";
import { t as useLightDomStyles } from "./useLightDomStyles-C8giLInY.js";
import { DEEP_LINK_SCHEME, isMobile, trackEvent, triggerDeepLinkWithFallback } from "@frak-labs/core-sdk";
import { useMemo } from "preact/hooks";
import { jsx } from "preact/jsx-runtime";
//#region src/actions/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.
*/
function openFrakWalletApp(path = DEFAULT_PATH, placement) {
	const client = window.FrakSetup?.client;
	if (client) trackEvent(client, "open_in_app_clicked", {
		path,
		placement
	});
	triggerDeepLinkWithFallback(`${DEEP_LINK_SCHEME}${path}`, { onFallback: () => {
		if (client) trackEvent(client, "app_not_installed", {
			path,
			placement
		});
	} });
}
//#endregion
//#region src/hooks/useIsMobile.ts
function useIsMobile() {
	return { isMobile: useMemo(() => isMobile(), []) };
}
//#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({ placement: placementId, text = "Open in App", classname = "" }) {
	const placement = usePlacement(placementId);
	const { shouldRender, isHidden, isClientReady } = useClientReady();
	const { isMobile } = useIsMobile();
	useLightDomStyles("frak-open-in-app", placementId, placement?.components?.openInApp?.css);
	const resolvedText = placement?.components?.openInApp?.text ?? text;
	if (!isMobile || !shouldRender || isHidden) return null;
	const handleClick = () => {
		openFrakWalletApp(void 0, placementId);
	};
	const buttonClass = [
		"button",
		"button__fadeIn",
		classname
	].filter(Boolean).join(" ");
	return /* @__PURE__ */ jsx("button", {
		type: "button",
		"aria-label": "Open in Frak Wallet app",
		disabled: !isClientReady,
		class: buttonClass,
		onClick: handleClick,
		children: resolvedText
	});
}
//#endregion
//#region src/components/OpenInAppButton/index.ts
registerWebComponent(OpenInAppButton, "frak-open-in-app", [
	"text",
	"placement",
	"classname"
], { shadow: false });
//#endregion
export { OpenInAppButton };