@frak-labs/components
Version:
Frak Wallet components, helping any person to interact with the Frak wallet.
165 lines (161 loc) • 5.35 kB
JavaScript
import { a as registerWebComponent, i as useClientReady, n as buildStyleContent, t as usePlacement } from "./usePlacement-5kbU3BKj.js";
import { t as openEmbeddedWallet } from "./embeddedWallet-By3_p5Xc.js";
import { t as useReward } from "./useReward-ClVShg45.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.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/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 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": "Open wallet",
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 };