@frak-labs/components
Version:
Frak Wallet components, helping any person to interact with the Frak wallet.
167 lines (163 loc) • 5.35 kB
JavaScript
import { i as useLang, n as buildStyleContent, o as useClientReady, s as registerWebComponent, t as usePlacement } from "./usePlacement-Bpo25qjA.js";
import { t as openEmbeddedWallet } from "./embeddedWallet-CxgyuwtP.js";
import { t as useReward } from "./useReward-Cg2wk8XI.js";
import { componentDefaults } from "./i18n/defaults.js";
import { useEffect, useMemo, useState } from "preact/hooks";
import { Fragment, 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.14 14v11.43h-18.29v-11.43m9.14 11.43v-17.14m0 0h-5.14c-0.76 0-1.48-0.3-2.02-0.84s-0.84-1.26-0.84-2.020.3-1.480.84-2.02 1.26-0.84 2.02-0.84c4 0 5.14 5.71 5.14 5.71zm0 0h5.14c0.76 0 1.48-0.3 2.02-0.84s0.84-1.260.84-2.02-0.3-1.48-0.84-2.02-1.26-0.84-2.02-0.84c-4 0-5.14 5.71-5.14 5.71zm-11.43 0h22.86v5.71h-22.86z",
stroke: "#fff",
"stroke-linecap": "round",
"stroke-linejoin": "round"
})]
});
}
//#endregion
//#region src/utils/browser/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
function openWalletModal(targetInteraction, placement) {
safeVibrate();
openEmbeddedWallet(targetInteraction, placement);
}
//#endregion
//#region src/components/ButtonWallet/ButtonWallet.tsx
const componentCss = `
.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;
}
`;
/**
* 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>
* ```
*
* @example
* Using placement:
* ```html
* <frak-button-wallet placement="hero-wallet"></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({ placement: placementId, classname = "", useReward: rawUseReward, targetInteraction }) {
const lang = useLang();
const placement = usePlacement(placementId);
const resolvedTargetInteraction = useMemo(() => placement?.targetInteraction !== void 0 ? placement.targetInteraction : targetInteraction, [placement?.targetInteraction, targetInteraction]);
const shouldUseReward = useMemo(() => rawUseReward === true, [rawUseReward]);
const { shouldRender, isHidden, isClientReady } = useClientReady();
const { reward } = useReward(shouldUseReward && isClientReady, resolvedTargetInteraction);
const [position, setPosition] = useState("right");
useEffect(() => {
const placementPosition = placement?.components?.buttonWallet?.position;
const configPosition = window.FrakSetup?.modalWalletConfig?.metadata?.position;
setPosition(placementPosition ?? configPosition ?? "right");
}, [placement?.components?.buttonWallet?.position]);
if (!shouldRender || isHidden) return null;
const buttonClass = [
"button",
"button__fadeIn",
position === "left" ? "button__left" : "button__right",
classname
].filter(Boolean).join(" ");
return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("style", { children: buildStyleContent(componentCss, placement?.components?.buttonWallet?.css) }), /* @__PURE__ */ jsxs("button", {
type: "button",
"aria-label": componentDefaults[lang].buttonWallet.ariaLabel,
part: "button",
disabled: !isClientReady,
class: buttonClass,
onClick: () => {
openWalletModal(resolvedTargetInteraction, placementId);
},
children: [/* @__PURE__ */ jsx(GiftIcon, {}), reward && /* @__PURE__ */ jsx("span", {
class: "reward",
children: reward
})]
})] });
}
//#endregion
//#region src/components/ButtonWallet/index.ts
registerWebComponent(ButtonWallet, "frak-button-wallet", [
"placement",
"classname",
"useReward",
"targetInteraction"
], { shadow: true });
//#endregion
export { ButtonWallet };