npm - @ton-pay/ui-react - Versions diffs - 0.1.1 → 0.1.2 - Mend

@ton-pay/ui-react 0.1.1 → 0.1.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (7) hide show

package/dist/index.d.mts CHANGED Viewed

@@ -6,6 +6,8 @@ type TonPayButtonProps = {
     isLoading?: boolean;
     variant?: "long" | "short";
     preset?: TonPayPreset;
+    onError?: (error: unknown) => void;
+    showErrorNotification?: boolean;
     bgColor?: string;
     textColor?: string;
     borderRadius?: number | string;
@@ -19,7 +21,7 @@ type TonPayButtonProps = {
     showMenu?: boolean;
     disabled?: boolean;
 };
-declare const TonPayButton: ({ handlePay, isLoading, variant, preset, bgColor, textColor, borderRadius, fontFamily, width, height, text, loadingText, style, className, showMenu, disabled, }: TonPayButtonProps) => JSX.Element;
+declare const TonPayButton: ({ handlePay, isLoading, variant, preset, bgColor, textColor, borderRadius, fontFamily, width, height, text, loadingText, style, className, showMenu, disabled, onError, showErrorNotification, }: TonPayButtonProps) => JSX.Element;
 type NotificationProps = {
     title: string;

package/dist/index.d.ts CHANGED Viewed

@@ -6,6 +6,8 @@ type TonPayButtonProps = {
     isLoading?: boolean;
     variant?: "long" | "short";
     preset?: TonPayPreset;
+    onError?: (error: unknown) => void;
+    showErrorNotification?: boolean;
     bgColor?: string;
     textColor?: string;
     borderRadius?: number | string;
@@ -19,7 +21,7 @@ type TonPayButtonProps = {
     showMenu?: boolean;
     disabled?: boolean;
 };
-declare const TonPayButton: ({ handlePay, isLoading, variant, preset, bgColor, textColor, borderRadius, fontFamily, width, height, text, loadingText, style, className, showMenu, disabled, }: TonPayButtonProps) => JSX.Element;
+declare const TonPayButton: ({ handlePay, isLoading, variant, preset, bgColor, textColor, borderRadius, fontFamily, width, height, text, loadingText, style, className, showMenu, disabled, onError, showErrorNotification, }: TonPayButtonProps) => JSX.Element;
 type NotificationProps = {
     title: string;

package/dist/index.js CHANGED Viewed

@@ -2,7 +2,68 @@
 var _uireact = require('@tonconnect/ui-react');
 var _ui = require('@tonconnect/ui');
 var _react = require('react'); var _react2 = _interopRequireDefault(_react);
+// src/components/notification/Notification.tsx
 var _jsxruntime = require('react/jsx-runtime');
+var notificationStyles = `
+  .tp-noti-root{position:fixed;top:16px;right:16px;z-index:10000;display:flex;flex-direction:column;gap:10px}
+  .tp-noti-card{width:256px;padding:12px 16px;display:flex;gap:9px;align-items:flex-start;background:#ffffff;color:#111827;border-radius:16px;box-shadow:0 4px 24px rgba(0,0,0,.16);animation:tp-fade-in .2s ease}
+  .tp-noti-content{flex:1;min-width:0}
+  .tp-noti-title{font-size:15px;font-weight:700;line-height:20px;margin:0}
+  .tp-noti-text{margin-top:4px;color:#6b7280;font-size:13px;line-height:18px;word-break:break-word}
+  .tp-noti-icon{width:24px;height:24px;margin-top:2px;flex:0 0 auto}
+`;
+if (typeof document !== "undefined") {
+  const id = "tp-notification-styles";
+  if (!document.getElementById(id)) {
+    const style = document.createElement("style");
+    style.id = id;
+    style.textContent = notificationStyles;
+    document.head.appendChild(style);
+  }
+}
+var NotificationCard = ({
+  title,
+  text,
+  icon,
+  className,
+  style
+}) => {
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: ["tp-noti-card", className].filter(Boolean).join(" "), style, children: [
+    /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "tp-noti-content", children: [
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "h3", { className: "tp-noti-title", children: title }),
+      text ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "tp-noti-text", children: text }) : null
+    ] }),
+    icon ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "tp-noti-icon", children: icon }) : null
+  ] });
+};
+var NotificationRoot = ({ children }) => {
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "tp-noti-root", children });
+};
+var ErrorDotIcon = ({ color = "#FF5252" }) => /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": true, children: [
+  /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "circle", { cx: "12", cy: "12", r: "11", fill: color }),
+  /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "path", { d: "M7.864 9.136A1.5 1.5 0 0 1 9.136 7.864L12 10.727 14.864 7.864A1.5 1.5 0 0 1 16.136 9.136L13.273 12 16.136 14.864a1.5 1.5 0 0 1-2.272 2.272L12 13.273 9.136 17.136A1.5 1.5 0 1 1 7.864 14.864L10.727 12 7.864 9.136Z", fill: "#fff" })
+] });
+// src/components/notification/ErrorTransactionNotification.tsx
+var ErrorTransactionNotification = ({ text, className, style }) => {
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
+    NotificationCard,
+    {
+      title: "Transaction cancelled",
+      text,
+      icon: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, ErrorDotIcon, {}),
+      className,
+      style
+    }
+  );
+};
+// src/components/ton-pay-btn.tsx
 var PRESETS = {
   default: {
     bgColor: "#0098EA",
@@ -22,7 +83,8 @@ var stylesAndAnimations = `
   .tp-btn{display:flex;flex-direction:column;justify-content:center;align-items:center;padding:13px 10px;gap:10px;flex:1;min-height:var(--tp-height,44px);background:var(--tp-bg,#0098EA);color:var(--tp-text,#fff);border:none;border-radius:var(--tp-radius,8px) 0 0 var(--tp-radius,8px);cursor:pointer;transition:filter .12s ease, transform .12s ease;font-family:var(--tp-font,inherit);font-style:normal;font-weight:500;font-size:20px;line-height:25px;text-align:center;position:relative}
   .tp-btn.with-menu{padding-left:calc(10px + (var(--tp-height,44px))/2)}
   .tp-btn.no-menu{border-radius:var(--tp-radius,8px)}
-  .tp-btn-content{display:flex;flex-direction:row;align-items:center;padding:0;gap:5px;white-space:nowrap}
+  .tp-btn-content{display:flex;flex-direction:row;align-items:center;padding:0;gap:5px;white-space:nowrap;margin-top:-4px}
+  .tp-btn-content svg{margin-top:4px}
   .tp-btn:hover:not(:disabled){filter:brightness(0.92)}
   .tp-btn:active:not(:disabled){filter:brightness(0.85);transform:translateY(1px)}
   .tp-btn:disabled{cursor:not-allowed;opacity:.85}
@@ -108,7 +170,9 @@ var TonPayButton = ({
   style,
   className,
   showMenu = true,
-  disabled = false
+  disabled = false,
+  onError,
+  showErrorNotification = true
 }) => {
   const address = _uireact.useTonAddress.call(void 0, true);
   const modal = _uireact.useTonConnectModal.call(void 0, );
@@ -117,6 +181,7 @@ var TonPayButton = ({
   const disconnect = tonConnectUI.disconnect.bind(tonConnectUI);
   const [showContextMenu, setShowContextMenu] = _react.useState.call(void 0, false);
   const [isCopiedShown, setIsCopiedShown] = _react.useState.call(void 0, false);
+  const [errorMessage, setErrorMessage] = _react.useState.call(void 0, null);
   _react.useEffect.call(void 0, () => {
     const handleClickOutside = () => {
       if (showContextMenu) setShowContextMenu(false);
@@ -131,6 +196,11 @@ var TonPayButton = ({
       setIsCopiedShown(false);
     }
   }, [showContextMenu, isCopiedShown]);
+  _react.useEffect.call(void 0, () => {
+    if (!errorMessage) return;
+    const timerId = setTimeout(() => setErrorMessage(null), 3e3);
+    return () => clearTimeout(timerId);
+  }, [errorMessage]);
   const handleDropdownToggle = (e) => {
     e.preventDefault();
     e.stopPropagation();
@@ -159,20 +229,35 @@ var TonPayButton = ({
     modal.open();
     setShowContextMenu(false);
   };
+  const onPayClick = async () => {
+    try {
+      await handlePay();
+    } catch (err) {
+      try {
+        _optionalChain([onError, 'optionalCall', _5 => _5(err)]);
+      } catch (e3) {
+      }
+      if (showErrorNotification) {
+        const raw = typeof err === "object" && err && "message" in err ? String(err.message) : String(_nullishCoalesce(err, () => ( "")));
+        const msg = raw || "Wallet connection modal closed";
+        setErrorMessage(msg);
+      }
+    }
+  };
   const presetConfig = preset ? PRESETS[preset] : null;
-  const finalBgColor = _nullishCoalesce(_nullishCoalesce(bgColor, () => ( _optionalChain([presetConfig, 'optionalAccess', _5 => _5.bgColor]))), () => ( PRESETS.default.bgColor));
-  const finalTextColor = _nullishCoalesce(_nullishCoalesce(textColor, () => ( _optionalChain([presetConfig, 'optionalAccess', _6 => _6.textColor]))), () => ( PRESETS.default.textColor));
+  const finalBgColor = _nullishCoalesce(_nullishCoalesce(bgColor, () => ( _optionalChain([presetConfig, 'optionalAccess', _6 => _6.bgColor]))), () => ( PRESETS.default.bgColor));
+  const finalTextColor = _nullishCoalesce(_nullishCoalesce(textColor, () => ( _optionalChain([presetConfig, 'optionalAccess', _7 => _7.textColor]))), () => ( PRESETS.default.textColor));
   const vars = {
-    ["--tp-bg"]: finalBgColor,
-    ["--tp-text"]: finalTextColor,
-    ["--tp-radius"]: typeof borderRadius === "number" ? `${borderRadius}px` : borderRadius,
-    ["--tp-font"]: fontFamily,
-    ["--tp-width"]: toCssSize(width),
-    ["--tp-height"]: toCssSize(height),
-    ["--tp-menu-bg"]: "#ffffff",
-    ["--tp-menu-text"]: "#111827",
-    ["--tp-menu-muted"]: "#6b7280",
-    ["--tp-menu-hover"]: "rgba(0,0,0,.06)"
+    "--tp-bg": finalBgColor,
+    "--tp-text": finalTextColor,
+    "--tp-radius": typeof borderRadius === "number" ? `${borderRadius}px` : borderRadius,
+    "--tp-font": fontFamily,
+    "--tp-width": toCssSize(width),
+    "--tp-height": toCssSize(height),
+    "--tp-menu-bg": "#ffffff",
+    "--tp-menu-text": "#111827",
+    "--tp-menu-muted": "#6b7280",
+    "--tp-menu-hover": "rgba(0,0,0,.06)"
   };
   const isDisabled = isLoading || disabled;
   const hasMenu = showMenu && !!address;
@@ -191,7 +276,7 @@ var TonPayButton = ({
         {
           type: "button",
           className: ["tp-btn", isLoading ? "loading" : "", !hasMenu ? "no-menu" : "with-menu"].filter(Boolean).join(" "),
-          onClick: isDisabled ? void 0 : handlePay,
+          onClick: isDisabled ? void 0 : onPayClick,
           disabled: isDisabled,
           children: isLoading ? /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "tp-btn-content", children: [
             /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "tp-spinner" }),
@@ -223,68 +308,10 @@ var TonPayButton = ({
           /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { children: "Disconnect" })
         ] })
       ] })
-    ] })
-  ] });
-};
-// src/components/notification/Notification.tsx
-var notificationStyles = `
-  .tp-noti-root{position:fixed;top:16px;right:16px;z-index:10000;display:flex;flex-direction:column;gap:10px}
-  .tp-noti-card{width:256px;padding:12px 16px;display:flex;gap:9px;align-items:flex-start;background:#ffffff;color:#111827;border-radius:16px;box-shadow:0 4px 24px rgba(0,0,0,.16);animation:tp-fade-in .2s ease}
-  .tp-noti-content{flex:1;min-width:0}
-  .tp-noti-title{font-size:15px;font-weight:700;line-height:20px;margin:0}
-  .tp-noti-text{margin-top:4px;color:#6b7280;font-size:13px;line-height:18px;word-break:break-word}
-  .tp-noti-icon{width:24px;height:24px;margin-top:2px;flex:0 0 auto}
-`;
-if (typeof document !== "undefined") {
-  const id = "tp-notification-styles";
-  if (!document.getElementById(id)) {
-    const style = document.createElement("style");
-    style.id = id;
-    style.textContent = notificationStyles;
-    document.head.appendChild(style);
-  }
-}
-var NotificationCard = ({
-  title,
-  text,
-  icon,
-  className,
-  style
-}) => {
-  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: ["tp-noti-card", className].filter(Boolean).join(" "), style, children: [
-    /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "tp-noti-content", children: [
-      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "h3", { className: "tp-noti-title", children: title }),
-      text ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "tp-noti-text", children: text }) : null
     ] }),
-    icon ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "tp-noti-icon", children: icon }) : null
+    errorMessage && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, NotificationRoot, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, ErrorTransactionNotification, { text: errorMessage }) })
   ] });
 };
-var NotificationRoot = ({ children }) => {
-  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "tp-noti-root", children });
-};
-var ErrorDotIcon = ({ color = "#FF5252" }) => /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": true, children: [
-  /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "circle", { cx: "12", cy: "12", r: "11", fill: color }),
-  /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "path", { d: "M7.864 9.136A1.5 1.5 0 0 1 9.136 7.864L12 10.727 14.864 7.864A1.5 1.5 0 0 1 16.136 9.136L13.273 12 16.136 14.864a1.5 1.5 0 0 1-2.272 2.272L12 13.273 9.136 17.136A1.5 1.5 0 1 1 7.864 14.864L10.727 12 7.864 9.136Z", fill: "#fff" })
-] });
-// src/components/notification/ErrorTransactionNotification.tsx
-var ErrorTransactionNotification = ({ text, className, style }) => {
-  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
-    NotificationCard,
-    {
-      title: "Transaction cancelled",
-      text,
-      icon: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, ErrorDotIcon, {}),
-      className,
-      style
-    }
-  );
-};
 // src/hooks/useTonPay.ts

package/dist/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["/Users/ilya/work/tpn/ton-pay/packages/ui-react/dist/index.js","../src/components/ton-pay-btn.tsx","../src/components/notification/Notification.tsx","../src/components/notification/ErrorTransactionNotification.tsx","../src/hooks/useTonPay.ts"],"names":["React","useEffect"],"mappings":"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","file":"/Users/ilya/work/tpn/ton-pay/packages/ui-react/dist/index.js","sourcesContent":[null,"import { useTonAddress, useTonConnectModal, useTonConnectUI, useTonWallet } from \"@tonconnect/ui-react\";\nimport { CHAIN, toUserFriendlyAddress } from \"@tonconnect/ui\";\nimport { useEffect, useState } from \"react\";\n\ntype TonPayPreset = \"default\" \| \"gradient\";\n\ntype TonPayButtonProps = {\n handlePay: () => Promise<void>,\n isLoading?: boolean,\n variant?: \"long\" \| \"short\",\n preset?: TonPayPreset,\n bgColor?: string,\n textColor?: string,\n borderRadius?: number \| string,\n fontFamily?: string,\n width?: number \| string,\n height?: number \| string,\n text?: string,\n loadingText?: string,\n style?: Record<string, any>,\n className?: string,\n showMenu?: boolean,\n disabled?: boolean,\n}\n\nconst PRESETS: Record<TonPayPreset, { bgColor: string, textColor: string }> = {\n default: {\n bgColor: \"#0098EA\",\n textColor: \"#FFFFFF\",\n },\n gradient: {\n bgColor: \"linear-gradient(91.69deg, #2A82EB 8.9%, #0355CF 158.29%)\",\n textColor: \"#FFFFFF\",\n },\n};\n\nconst stylesAndAnimations = `\n @keyframes tp-pulse { 0%{opacity:1;transform:scale(1)} 50%{opacity:.5;transform:scale(1.02)} 100%{opacity:1;transform:scale(1)} }\n @keyframes tp-fade-in { from{opacity:0;transform:translateY(-4px) scale(.98)} to{opacity:1;transform:translateY(0) scale(1)} }\n @keyframes tp-spin { to{transform:rotate(360deg)} }\n .tp-wrap{display:inline-flex;flex-direction:column;position:relative;width:var(--tp-width,300px);max-width:100%}\n .tp-btn-container{display:flex;flex-direction:row;width:100%}\n .tp-btn{display:flex;flex-direction:column;justify-content:center;align-items:center;padding:13px 10px;gap:10px;flex:1;min-height:var(--tp-height,44px);background:var(--tp-bg,#0098EA);color:var(--tp-text,#fff);border:none;border-radius:var(--tp-radius,8px) 0 0 var(--tp-radius,8px);cursor:pointer;transition:filter .12s ease, transform .12s ease;font-family:var(--tp-font,inherit);font-style:normal;font-weight:500;font-size:20px;line-height:25px;text-align:center;position:relative}\n .tp-btn.with-menu{padding-left:calc(10px + (var(--tp-height,44px))/2)}\n .tp-btn.no-menu{border-radius:var(--tp-radius,8px)}\n .tp-btn-content{display:flex;flex-direction:row;align-items:center;padding:0;gap:5px;white-space:nowrap}\n .tp-btn:hover:not(:disabled){filter:brightness(0.92)}\n .tp-btn:active:not(:disabled){filter:brightness(0.85);transform:translateY(1px)}\n .tp-btn:disabled{cursor:not-allowed;opacity:.85}\n .tp-btn.loading{animation:none}\n .tp-arrow{display:flex;align-items:center;justify-content:center;padding:13px 10px;min-width:calc(var(--tp-height,44px));min-height:var(--tp-height,44px);background:var(--tp-bg,#0098EA);color:var(--tp-text,#fff);border:none;border-left:1px solid rgba(255,255,255,.2);border-radius:0 var(--tp-radius,8px) var(--tp-radius,8px) 0;cursor:pointer;transition:filter .12s ease, transform .12s ease;font-size:14px}\n .tp-arrow:hover:not(:disabled){filter:brightness(0.92)}\n .tp-arrow:active:not(:disabled){filter:brightness(0.85);transform:translateY(1px)}\n .tp-arrow:disabled{cursor:not-allowed;opacity:.85;transition:none;filter:none;transform:none}\n .tp-menu{position:absolute;right:0;top:calc(100% + 8px);width:256px;background:var(--tp-menu-bg,#ffffff);color:var(--tp-menu-text,#111827);border:1px solid rgba(0,0,0,.08);border-radius:var(--tp-menu-radius,16px);padding:8px;box-shadow:0 8px 24px rgba(0,0,0,.12);z-index:1000;animation:tp-fade-in .15s ease}\n .tp-menu-arrow{position:absolute;top:-8px;right:20px;width:0;height:0;border-style:solid;border-width:0 8px 8px 8px;border-color:transparent transparent var(--tp-menu-bg,#ffffff) transparent;filter:drop-shadow(0 -1px 1px rgba(0,0,0,.08))}\n .tp-menu-address{padding:.5rem .75rem;font-size:.85rem;color:var(--tp-menu-muted,#6b7280);cursor:default;user-select:text}\n .tp-menu-item{display:flex;align-items:center;gap:8px;width:100%;height:40px;padding-left:12px;padding-right:12px;border:none;background:transparent;text-align:left;cursor:pointer;font-size:15px;font-weight:590;color:var(--tp-menu-text,#111827);transition:background-color .15s ease, transform .1s ease-in-out;border-radius:8px;margin:2px}\n .tp-menu-item:hover:not(:disabled){background:var(--tp-menu-hover,rgba(0,0,0,.06))}\n .tp-menu-item:active{transform:scale(0.96)}\n .tp-menu-item.danger{color:#e74c3c}\n .tp-menu-item.danger:hover:not(:disabled){background:rgba(231,76,60,.12);color:#c0392b}\n .tp-menu-item:disabled{cursor:default;opacity:1;color:var(--tp-menu-muted,#6b7280)}\n .tp-menu-item:disabled:hover{background:transparent}\n .tp-menu-icon{width:24px;height:24px;display:flex;align-items:center;justify-content:center;color:currentColor}\n .tp-menu-item:disabled .tp-menu-icon{opacity:.5}\n .tp-spinner{border:2px solid rgba(255,255,255,.35);border-top-color:var(--tp-text,#fff);border-radius:50%;width:18px;height:18px;animation:tp-spin .6s linear infinite}\n`;\n\nif (typeof document !== 'undefined') {\n const style = document.createElement('style');\n style.textContent = stylesAndAnimations;\n document.head.appendChild(style);\n}\n\nconst TonGlyph = () => (\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" aria-hidden>\n <g clipPath=\"url(#clip0_144_4719)\">\n <path d=\"M12 24C18.6274 24 24 18.6274 24 12C24 5.37257 18.6274 0 12 0C5.37257 0 0 5.37257 0 12C0 18.6274 5.37257 24 12 24Z\" fill=\"#0098EA\"/>\n <path d=\"M12 24C18.6274 24 24 18.6274 24 12C24 5.37257 18.6274 0 12 0C5.37257 0 0 5.37257 0 12C0 18.6274 5.37257 24 12 24Z\" fill=\"white\"/>\n <path d=\"M16.0972 6.69763H7.9022C6.39543 6.69763 5.4404 8.32299 6.19846 9.63695L11.2561 18.4033C11.5862 18.9757 12.4133 18.9757 12.7433 18.4033L17.802 9.63695C18.559 8.32509 17.604 6.69763 16.0982 6.69763H16.0972ZM11.252 15.7744L10.1505 13.6426L7.49278 8.88922C7.31746 8.58497 7.53401 8.1951 7.90117 8.1951H11.251V15.7754L11.252 15.7744ZM16.5046 8.88819L13.8479 13.6437L12.7464 15.7744V8.19407H16.0962C16.4633 8.19407 16.6799 8.58395 16.5046 8.88819Z\" fill=\"#0098EA\"/>\n </g>\n <defs>\n <clipPath id=\"clip0_144_4719\">\n <rect width=\"24\" height=\"24\" fill=\"white\"/>\n </clipPath>\n </defs>\n </svg>\n);\n\nconst CopyGlyph = () => (\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" aria-hidden>\n <path\n fillRule=\"evenodd\"\n clipRule=\"evenodd\"\n d=\"M7.76228 2.09998H10.2378C11.0458 2.09997 11.7067 2.09996 12.2438 2.14384C12.7997 2.18926 13.3017 2.28614 13.7706 2.52505C14.5045 2.89896 15.1011 3.49558 15.475 4.22941C15.7139 4.6983 15.8108 5.20038 15.8562 5.75629C15.9001 6.29337 15.9001 6.95422 15.9001 7.76227V8.1H16.2377C17.0457 8.09999 17.7066 8.09998 18.2437 8.14386C18.7996 8.18928 19.3017 8.28616 19.7705 8.52507C20.5044 8.89898 21.101 9.4956 21.4749 10.2294C21.7138 10.6983 21.8107 11.2004 21.8561 11.7563C21.9 12.2934 21.9 12.9542 21.9 13.7623V16.2377C21.9 17.0458 21.9 17.7066 21.8561 18.2437C21.8107 18.7996 21.7138 19.3017 21.4749 19.7706C21.101 20.5044 20.5044 21.101 19.7705 21.4749C19.3017 21.7138 18.7996 21.8107 18.2437 21.8561C17.7066 21.9 17.0458 21.9 16.2378 21.9H13.7623C12.9543 21.9 12.2934 21.9 11.7563 21.8561C11.2004 21.8107 10.6983 21.7138 10.2294 21.4749C9.49561 21.101 8.89898 20.5044 8.52508 19.7706C8.28616 19.3017 8.18928 18.7996 8.14386 18.2437C8.09998 17.7066 8.09999 17.0458 8.1 16.2377V15.9H7.76227C6.95426 15.9 6.29335 15.9 5.75629 15.8561C5.20038 15.8107 4.6983 15.7138 4.22941 15.4749C3.49558 15.101 2.89896 14.5044 2.52505 13.7705C2.28614 13.3017 2.18926 12.7996 2.14384 12.2437C2.09996 11.7066 2.09997 11.0458 2.09998 10.2377V7.76228C2.09997 6.95424 2.09996 6.29336 2.14384 5.75629C2.18926 5.20038 2.28614 4.6983 2.52505 4.22941C2.89896 3.49558 3.49558 2.89896 4.22941 2.52505C4.6983 2.28614 5.20038 2.18926 5.75629 2.14384C6.29336 2.09996 6.95425 2.09997 7.76228 2.09998ZM8.1 14.1V13.7623C8.09999 12.9542 8.09998 12.2934 8.14386 11.7563C8.18928 11.2004 8.28616 10.6983 8.52508 10.2294C8.89898 9.4956 9.49561 8.89898 10.2294 8.52507C10.6983 8.28616 11.2004 8.18928 11.7563 8.14386C12.2934 8.09998 12.9542 8.09999 13.7623 8.1H14.1001V7.79998C14.1001 6.94505 14.0994 6.35798 14.0622 5.90287C14.0259 5.45827 13.9593 5.21944 13.8712 5.0466C13.6699 4.65146 13.3486 4.3302 12.9535 4.12886C12.7806 4.04079 12.5418 3.97419 12.0972 3.93786C11.6421 3.90068 11.055 3.89998 10.2001 3.89998H7.79998C6.94505 3.89998 6.35798 3.90068 5.90287 3.93786C5.45827 3.97419 5.21944 4.04079 5.0466 4.12886C4.65146 4.3302 4.3302 4.65146 4.12886 5.0466C4.04079 5.21944 3.97419 5.45827 3.93786 5.90287C3.90068 6.35798 3.89998 6.94505 3.89998 7.79998V10.2C3.89998 11.0549 3.90068 11.642 3.93786 12.0971C3.97419 12.5417 4.04079 12.7805 4.12886 12.9534C4.3302 13.3485 4.65146 13.6698 5.0466 13.8711C5.21944 13.9592 5.45827 14.0258 5.90287 14.0621C6.35798 14.0993 6.94505 14.1 7.79998 14.1H8.1ZM11.0466 10.1289C11.2195 10.0408 11.4583 9.97421 11.9029 9.93788C12.358 9.9007 12.9451 9.9 13.8 9.9H16.2C17.0549 9.9 17.642 9.9007 18.0971 9.93788C18.5417 9.97421 18.7805 10.0408 18.9534 10.1289C19.3485 10.3302 19.6698 10.6515 19.8711 11.0466C19.9592 11.2195 20.0258 11.4583 20.0621 11.9029C20.0993 12.358 20.1 12.9451 20.1 13.8V16.2C20.1 17.0549 20.0993 17.642 20.0621 18.0971C20.0258 18.5417 19.9592 18.7805 19.8711 18.9534C19.6698 19.3485 19.3485 19.6698 18.9534 19.8711C18.7805 19.9592 18.5417 20.0258 18.0971 20.0621C17.642 20.0993 17.0549 20.1 16.2 20.1H13.8C12.9451 20.1 12.358 20.0993 11.9029 20.0621C11.4583 20.0258 11.2195 19.9592 11.0466 19.8711C10.6515 19.6698 10.3302 19.3485 10.1289 18.9534C10.0408 18.7805 9.97421 18.5417 9.93788 18.0971C9.9007 17.642 9.9 17.0549 9.9 16.2V13.8C9.9 12.9451 9.9007 12.358 9.93788 11.9029C9.97421 11.4583 10.0408 11.2195 10.1289 11.0466C10.3302 10.6515 10.6515 10.3302 11.0466 10.1289Z\"\n fill=\"currentColor\"\n />\n </svg>\n);\n\nconst DisconnectGlyph = () => (\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" aria-hidden>\n <path\n d=\"M8.7624 3.10001C7.95435 3.1 7.29349 3.09999 6.75642 3.14387C6.2005 3.18929 5.69842 3.28617 5.22954 3.52508C4.4957 3.89899 3.89908 4.49561 3.52517 5.22944C3.28626 5.69833 3.18938 6.20041 3.14396 6.75632C3.10008 7.2934 3.10009 7.95424 3.1001 8.76229V15.2377C3.10009 16.0458 3.10008 16.7066 3.14396 17.2437C3.18938 17.7996 3.28626 18.3017 3.52517 18.7706C3.89908 19.5044 4.4957 20.101 5.22954 20.4749C5.69842 20.7138 6.2005 20.8107 6.75642 20.8561C7.29349 20.9 7.95434 20.9 8.76239 20.9H12.0001C12.4972 20.9 12.9001 20.4971 12.9001 20C12.9001 19.503 12.4972 19.1 12.0001 19.1H8.8001C7.94517 19.1 7.3581 19.0993 6.90299 19.0621C6.45839 19.0258 6.21956 18.9592 6.04672 18.8711C5.65158 18.6698 5.33032 18.3485 5.12898 17.9534C5.04092 17.7805 4.97431 17.5417 4.93798 17.0971C4.9008 16.642 4.9001 16.0549 4.9001 15.2V8.80001C4.9001 7.94508 4.9008 7.35801 4.93798 6.9029C4.97431 6.4583 5.04092 6.21947 5.12898 6.04663C5.33032 5.65149 5.65158 5.33023 6.04672 5.12889C6.21956 5.04082 6.45839 4.97422 6.90299 4.93789C7.3581 4.90071 7.94517 4.90001 8.8001 4.90001H12.0001C12.4972 4.90001 12.9001 4.49706 12.9001 4.00001C12.9001 3.50295 12.4972 3.10001 12.0001 3.10001H8.7624Z\"\n fill=\"currentColor\"\n />\n <path\n d=\"M17.6364 7.3636C17.2849 7.01212 16.7151 7.01212 16.3636 7.3636C16.0121 7.71507 16.0121 8.28492 16.3636 8.63639L18.8272 11.1H9.00001C8.50295 11.1 8.10001 11.5029 8.10001 12C8.10001 12.497 8.50295 12.9 9.00001 12.9H18.8272L16.3636 15.3636C16.0121 15.7151 16.0121 16.2849 16.3636 16.6364C16.7151 16.9879 17.2849 16.9879 17.6364 16.6364L21.6364 12.6364C21.9879 12.2849 21.9879 11.7151 21.6364 11.3636L17.6364 7.3636Z\"\n fill=\"currentColor\"\n />\n </svg>\n);\n\nfunction shortenAddress(addr: string \| null \| undefined, head: number = 4, tail: number = 4) {\n if (!addr \|\| typeof addr !== \"string\") return \"\";\n if (addr.length <= head + tail + 3) return addr;\n return `${addr.slice(0, head)}...${addr.slice(-tail)}`;\n}\n\nfunction toCssSize(v?: number \| string) {\n if (v === undefined) return undefined;\n return typeof v === \"number\" ? `${v}px` : v;\n}\n\nfunction isGradient(value: string) {\n return value.includes(\"gradient(\");\n}\n\nfunction getMenuBg(bg: string) {\n if (isGradient(bg)) {\n return \"#0098EA\";\n }\n return bg;\n}\n\nexport const TonPayButton = ({\n handlePay,\n isLoading = false,\n variant = \"long\",\n preset,\n bgColor,\n textColor,\n borderRadius = 8,\n fontFamily = \"inherit\",\n width = 300,\n height = 44,\n text,\n loadingText = \"Processing...\",\n style,\n className,\n showMenu = true,\n disabled = false,\n}: TonPayButtonProps) => {\n const address = useTonAddress(true);\n const modal = useTonConnectModal();\n const [tonConnectUI] = useTonConnectUI();\n const wallet = useTonWallet();\n const disconnect = tonConnectUI.disconnect.bind(tonConnectUI);\n\n const [showContextMenu, setShowContextMenu] = useState(false);\n const [isCopiedShown, setIsCopiedShown] = useState(false);\n\n useEffect(() => {\n const handleClickOutside = () => {\n if (showContextMenu) setShowContextMenu(false);\n };\n if (showContextMenu) {\n document.addEventListener('click', handleClickOutside);\n return () => document.removeEventListener('click', handleClickOutside);\n }\n }, [showContextMenu]);\n\n useEffect(() => {\n if (!showContextMenu && isCopiedShown) {\n setIsCopiedShown(false);\n }\n }, [showContextMenu, isCopiedShown]);\n\n const handleDropdownToggle = (e: any) => {\n e.preventDefault();\n e.stopPropagation();\n if (isLoading \|\| disabled \|\| !address) return;\n setShowContextMenu(!showContextMenu);\n };\n\n const handleDisconnect = () => {\n disconnect();\n setShowContextMenu(false);\n setIsCopiedShown(false);\n };\n\n const handleCopyAddress = async () => {\n const rawAddress = wallet?.account?.address;\n const chain = wallet?.account?.chain;\n const toCopy = rawAddress\n ? toUserFriendlyAddress(rawAddress, chain === CHAIN.TESTNET)\n : address;\n if (toCopy) {\n try {\n await navigator.clipboard.writeText(toCopy);\n setIsCopiedShown(true);\n setTimeout(() => setIsCopiedShown(false), 1000);\n } catch {}\n }\n };\n\n const handleConnect = () => {\n modal.open();\n setShowContextMenu(false);\n };\n\n const presetConfig = preset ? PRESETS[preset] : null;\n const finalBgColor = bgColor ?? presetConfig?.bgColor ?? PRESETS.default.bgColor;\n const finalTextColor = textColor ?? presetConfig?.textColor ?? PRESETS.default.textColor;\n \n const vars: Record<string, string \| number \| undefined> = {\n [\"--tp-bg\" as any]: finalBgColor,\n [\"--tp-text\" as any]: finalTextColor,\n [\"--tp-radius\" as any]: typeof borderRadius === \"number\" ? `${borderRadius}px` : borderRadius,\n [\"--tp-font\" as any]: fontFamily,\n [\"--tp-width\" as any]: toCssSize(width),\n [\"--tp-height\" as any]: toCssSize(height),\n [\"--tp-menu-bg\" as any]: \"#ffffff\",\n [\"--tp-menu-text\" as any]: \"#111827\",\n [\"--tp-menu-muted\" as any]: \"#6b7280\",\n [\"--tp-menu-hover\" as any]: \"rgba(0,0,0,.06)\",\n };\n\n const isDisabled = isLoading \|\| disabled;\n const hasMenu = showMenu && !!address;\n\n const content = text ? (\n <span>{text}</span>\n ) : variant === \"short\" ? (\n <div className=\"tp-btn-content\">\n <TonGlyph />\n <span>Pay</span>\n </div>\n ) : (\n <div className=\"tp-btn-content\">\n <span>Pay with</span>\n <TonGlyph />\n <span>Pay</span>\n </div>\n );\n\n return (\n <div style={{ ...vars, ...style }} className={[\"tp-wrap\", className].filter(Boolean).join(\" \")}> \n <div className=\"tp-btn-container\">\n <button\n type=\"button\"\n className={[\"tp-btn\", isLoading ? \"loading\" : \"\", !hasMenu ? \"no-menu\" : \"with-menu\"].filter(Boolean).join(\" \")}\n onClick={isDisabled ? undefined : handlePay}\n disabled={isDisabled}\n >\n {isLoading ? (\n <div className=\"tp-btn-content\">\n <span className=\"tp-spinner\" />\n <span>{loadingText}</span>\n </div>\n ) : (\n content\n )}\n </button>\n {hasMenu && (\n <button\n type=\"button\"\n className=\"tp-arrow\"\n onClick={handleDropdownToggle}\n disabled={isDisabled}\n >\n ▼\n </button>\n )}\n </div>\n {hasMenu && showContextMenu && (\n <div className=\"tp-menu\" onClick={(e: any) => e.stopPropagation()}>\n <div className=\"tp-menu-arrow\" />\n {address && (\n <>\n <div className=\"tp-menu-address\">{shortenAddress(address)}</div>\n <button onClick={handleCopyAddress} className=\"tp-menu-item\" disabled={isCopiedShown}>\n <span className=\"tp-menu-icon\"><CopyGlyph /></span>\n <span>{isCopiedShown ? \"Address copied!\" : \"Copy address\"}</span>\n </button>\n <button onClick={handleDisconnect} className=\"tp-menu-item danger\">\n <span className=\"tp-menu-icon\"><DisconnectGlyph /></span>\n <span>Disconnect</span>\n </button>\n </>\n )}\n </div>\n )}\n </div>\n );\n}","import React from 'react'\nconst notificationStyles = `\n .tp-noti-root{position:fixed;top:16px;right:16px;z-index:10000;display:flex;flex-direction:column;gap:10px}\n .tp-noti-card{width:256px;padding:12px 16px;display:flex;gap:9px;align-items:flex-start;background:#ffffff;color:#111827;border-radius:16px;box-shadow:0 4px 24px rgba(0,0,0,.16);animation:tp-fade-in .2s ease}\n .tp-noti-content{flex:1;min-width:0}\n .tp-noti-title{font-size:15px;font-weight:700;line-height:20px;margin:0}\n .tp-noti-text{margin-top:4px;color:#6b7280;font-size:13px;line-height:18px;word-break:break-word}\n .tp-noti-icon{width:24px;height:24px;margin-top:2px;flex:0 0 auto}\n`;\n\nif (typeof document !== \"undefined\") {\n const id = \"tp-notification-styles\";\n if (!document.getElementById(id)) {\n const style = document.createElement(\"style\");\n style.id = id;\n style.textContent = notificationStyles;\n document.head.appendChild(style);\n }\n}\n\nexport type NotificationProps = {\n title: string;\n text?: string;\n icon?: React.ReactNode;\n className?: string;\n style?: React.CSSProperties;\n};\n\nexport const NotificationCard: React.FC<NotificationProps> = ({ \n title, \n text, \n icon, \n className, \n style \n}: NotificationProps) => {\n return (\n <div className={[\"tp-noti-card\", className].filter(Boolean).join(\" \")} style={style}>\n <div className=\"tp-noti-content\">\n <h3 className=\"tp-noti-title\">{title}</h3>\n {text ? <div className=\"tp-noti-text\">{text}</div> : null}\n </div>\n {icon ? <div className=\"tp-noti-icon\">{icon}</div> : null}\n </div>\n );\n};\n\nexport const NotificationRoot: React.FC<{ children?: React.ReactNode }> = ({ children }: { children?: React.ReactNode }) => {\n return <div className=\"tp-noti-root\">{children}</div>;\n};\n\nexport const ErrorDotIcon: React.FC<{ color?: string }> = ({ color = \"#FF5252\" }) => (\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" aria-hidden>\n <circle cx=\"12\" cy=\"12\" r=\"11\" fill={color} />\n <path d=\"M7.864 9.136A1.5 1.5 0 0 1 9.136 7.864L12 10.727 14.864 7.864A1.5 1.5 0 0 1 16.136 9.136L13.273 12 16.136 14.864a1.5 1.5 0 0 1-2.272 2.272L12 13.273 9.136 17.136A1.5 1.5 0 1 1 7.864 14.864L10.727 12 7.864 9.136Z\" fill=\"#fff\" />\n </svg>\n);\n\n\n","import React from \"react\";\nimport { ErrorDotIcon, NotificationCard } from \"./Notification\";\n\nexport const ErrorTransactionNotification: React.FC<{ text?: string; className?: string; style?: React.CSSProperties }>\n = ({ text, className, style }) => {\n return (\n <NotificationCard\n title=\"Transaction cancelled\"\n text={text}\n icon={<ErrorDotIcon />}\n className={className}\n style={style}\n />\n );\n };\n\n\n","import React, { useEffect } from 'react';\nimport {\n useTonAddress,\n useTonConnectModal,\n useTonConnectUI\n} from \"@tonconnect/ui-react\";\n\nimport {type SendTransactionRequest, type SendTransactionResponse} from \"@tonconnect/sdk\";\n\nexport type TonPayMessage = SendTransactionRequest[\"messages\"][number] & {\n payload: string;\n};\n\nexport type GetMessageFn<T extends object = object> = (\n senderAddr: string\n) => Promise<{ message: TonPayMessage } & T>;\n\nexport type PayInfo<T extends object = object> = {\n message: TonPayMessage;\n txResult: SendTransactionResponse;\n} & T;\n\nexport const useTonPay = () => {\n const address = useTonAddress(true);\n const modal = useTonConnectModal();\n const [tonConnectUI] = useTonConnectUI();\n\n useEffect(() => {\n if (address) {\n console.log(address);\n }\n }, [address]);\n\n const waitForWalletConnection = React.useCallback((): Promise<string> => {\n return new Promise((resolve, reject) => {\n if (address) {\n resolve(address);\n return;\n }\n\n modal.open();\n\n const unsubscribe = tonConnectUI.onStatusChange((wallet: any) => {\n if (wallet && wallet.account) {\n unsubscribe();\n unsubscribeModal();\n resolve(wallet.account.address);\n }\n });\n\n const unsubscribeModal = tonConnectUI.onModalStateChange((state: any) => {\n if (state.status === \"closed\") {\n unsubscribe();\n unsubscribeModal();\n reject(new Error(\"Wallet connection modal closed\"));\n }\n });\n\n setTimeout(() => {\n unsubscribe();\n unsubscribeModal();\n reject(new Error(\"Wallet connection timeout\"));\n }, 5 * 60 * 1000);\n });\n }, [address, modal, tonConnectUI]);\n\n const pay = React.useCallback(\n async <T extends object = object>(\n getMessage: GetMessageFn<T>\n ): Promise<PayInfo<T>> => {\n try {\n const walletAddress = await waitForWalletConnection();\n\n const validUntil = Math.floor(Date.now() / 1e3) + 5 * 60; // 5 minutes\n const messageResult = await getMessage(walletAddress);\n\n const txResult = await tonConnectUI.sendTransaction({\n messages: [messageResult.message],\n validUntil,\n from: walletAddress,\n });\n\n return { ...messageResult, txResult };\n } catch (error) {\n console.error(\"Payment failed:\", error);\n throw error;\n }\n },\n [waitForWalletConnection, tonConnectUI]\n );\n\n return { pay, address };\n};\n"]}
1	+ {"version":3,"sources":["/Users/ilya/work/tonpay/ton-pay/packages/ui-react/dist/index.js","../src/components/ton-pay-btn.tsx","../src/components/notification/Notification.tsx","../src/components/notification/ErrorTransactionNotification.tsx","../src/hooks/useTonPay.ts"],"names":["jsx","jsxs","React","useEffect"],"mappings":"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","file":"/Users/ilya/work/tonpay/ton-pay/packages/ui-react/dist/index.js","sourcesContent":[null,"import { useTonAddress, useTonConnectModal, useTonConnectUI, useTonWallet } from \"@tonconnect/ui-react\";\nimport { CHAIN, toUserFriendlyAddress } from \"@tonconnect/ui\";\nimport { useEffect, useState } from \"react\";\nimport { NotificationRoot } from \"./notification/Notification\";\nimport { ErrorTransactionNotification } from \"./notification/ErrorTransactionNotification\";\n\ntype TonPayPreset = \"default\" \| \"gradient\";\n\ntype TonPayButtonProps = {\n handlePay: () => Promise<void>,\n isLoading?: boolean,\n variant?: \"long\" \| \"short\",\n preset?: TonPayPreset,\n onError?: (error: unknown) => void,\n showErrorNotification?: boolean,\n bgColor?: string,\n textColor?: string,\n borderRadius?: number \| string,\n fontFamily?: string,\n width?: number \| string,\n height?: number \| string,\n text?: string,\n loadingText?: string,\n style?: Record<string, any>,\n className?: string,\n showMenu?: boolean,\n disabled?: boolean,\n}\n\nconst PRESETS: Record<TonPayPreset, { bgColor: string, textColor: string }> = {\n default: {\n bgColor: \"#0098EA\",\n textColor: \"#FFFFFF\",\n },\n gradient: {\n bgColor: \"linear-gradient(91.69deg, #2A82EB 8.9%, #0355CF 158.29%)\",\n textColor: \"#FFFFFF\",\n },\n};\n\nconst stylesAndAnimations = `\n @keyframes tp-pulse { 0%{opacity:1;transform:scale(1)} 50%{opacity:.5;transform:scale(1.02)} 100%{opacity:1;transform:scale(1)} }\n @keyframes tp-fade-in { from{opacity:0;transform:translateY(-4px) scale(.98)} to{opacity:1;transform:translateY(0) scale(1)} }\n @keyframes tp-spin { to{transform:rotate(360deg)} }\n .tp-wrap{display:inline-flex;flex-direction:column;position:relative;width:var(--tp-width,300px);max-width:100%}\n .tp-btn-container{display:flex;flex-direction:row;width:100%}\n .tp-btn{display:flex;flex-direction:column;justify-content:center;align-items:center;padding:13px 10px;gap:10px;flex:1;min-height:var(--tp-height,44px);background:var(--tp-bg,#0098EA);color:var(--tp-text,#fff);border:none;border-radius:var(--tp-radius,8px) 0 0 var(--tp-radius,8px);cursor:pointer;transition:filter .12s ease, transform .12s ease;font-family:var(--tp-font,inherit);font-style:normal;font-weight:500;font-size:20px;line-height:25px;text-align:center;position:relative}\n .tp-btn.with-menu{padding-left:calc(10px + (var(--tp-height,44px))/2)}\n .tp-btn.no-menu{border-radius:var(--tp-radius,8px)}\n .tp-btn-content{display:flex;flex-direction:row;align-items:center;padding:0;gap:5px;white-space:nowrap;margin-top:-4px}\n .tp-btn-content svg{margin-top:4px}\n .tp-btn:hover:not(:disabled){filter:brightness(0.92)}\n .tp-btn:active:not(:disabled){filter:brightness(0.85);transform:translateY(1px)}\n .tp-btn:disabled{cursor:not-allowed;opacity:.85}\n .tp-btn.loading{animation:none}\n .tp-arrow{display:flex;align-items:center;justify-content:center;padding:13px 10px;min-width:calc(var(--tp-height,44px));min-height:var(--tp-height,44px);background:var(--tp-bg,#0098EA);color:var(--tp-text,#fff);border:none;border-left:1px solid rgba(255,255,255,.2);border-radius:0 var(--tp-radius,8px) var(--tp-radius,8px) 0;cursor:pointer;transition:filter .12s ease, transform .12s ease;font-size:14px}\n .tp-arrow:hover:not(:disabled){filter:brightness(0.92)}\n .tp-arrow:active:not(:disabled){filter:brightness(0.85);transform:translateY(1px)}\n .tp-arrow:disabled{cursor:not-allowed;opacity:.85;transition:none;filter:none;transform:none}\n .tp-menu{position:absolute;right:0;top:calc(100% + 8px);width:256px;background:var(--tp-menu-bg,#ffffff);color:var(--tp-menu-text,#111827);border:1px solid rgba(0,0,0,.08);border-radius:var(--tp-menu-radius,16px);padding:8px;box-shadow:0 8px 24px rgba(0,0,0,.12);z-index:1000;animation:tp-fade-in .15s ease}\n .tp-menu-arrow{position:absolute;top:-8px;right:20px;width:0;height:0;border-style:solid;border-width:0 8px 8px 8px;border-color:transparent transparent var(--tp-menu-bg,#ffffff) transparent;filter:drop-shadow(0 -1px 1px rgba(0,0,0,.08))}\n .tp-menu-address{padding:.5rem .75rem;font-size:.85rem;color:var(--tp-menu-muted,#6b7280);cursor:default;user-select:text}\n .tp-menu-item{display:flex;align-items:center;gap:8px;width:100%;height:40px;padding-left:12px;padding-right:12px;border:none;background:transparent;text-align:left;cursor:pointer;font-size:15px;font-weight:590;color:var(--tp-menu-text,#111827);transition:background-color .15s ease, transform .1s ease-in-out;border-radius:8px;margin:2px}\n .tp-menu-item:hover:not(:disabled){background:var(--tp-menu-hover,rgba(0,0,0,.06))}\n .tp-menu-item:active{transform:scale(0.96)}\n .tp-menu-item.danger{color:#e74c3c}\n .tp-menu-item.danger:hover:not(:disabled){background:rgba(231,76,60,.12);color:#c0392b}\n .tp-menu-item:disabled{cursor:default;opacity:1;color:var(--tp-menu-muted,#6b7280)}\n .tp-menu-item:disabled:hover{background:transparent}\n .tp-menu-icon{width:24px;height:24px;display:flex;align-items:center;justify-content:center;color:currentColor}\n .tp-menu-item:disabled .tp-menu-icon{opacity:.5}\n .tp-spinner{border:2px solid rgba(255,255,255,.35);border-top-color:var(--tp-text,#fff);border-radius:50%;width:18px;height:18px;animation:tp-spin .6s linear infinite}\n`;\n\nif (typeof document !== 'undefined') {\n const style = document.createElement('style');\n style.textContent = stylesAndAnimations;\n document.head.appendChild(style);\n}\n\nconst TonGlyph = () => (\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" aria-hidden>\n <g clipPath=\"url(#clip0_144_4719)\">\n <path d=\"M12 24C18.6274 24 24 18.6274 24 12C24 5.37257 18.6274 0 12 0C5.37257 0 0 5.37257 0 12C0 18.6274 5.37257 24 12 24Z\" fill=\"#0098EA\"/>\n <path d=\"M12 24C18.6274 24 24 18.6274 24 12C24 5.37257 18.6274 0 12 0C5.37257 0 0 5.37257 0 12C0 18.6274 5.37257 24 12 24Z\" fill=\"white\"/>\n <path d=\"M16.0972 6.69763H7.9022C6.39543 6.69763 5.4404 8.32299 6.19846 9.63695L11.2561 18.4033C11.5862 18.9757 12.4133 18.9757 12.7433 18.4033L17.802 9.63695C18.559 8.32509 17.604 6.69763 16.0982 6.69763H16.0972ZM11.252 15.7744L10.1505 13.6426L7.49278 8.88922C7.31746 8.58497 7.53401 8.1951 7.90117 8.1951H11.251V15.7754L11.252 15.7744ZM16.5046 8.88819L13.8479 13.6437L12.7464 15.7744V8.19407H16.0962C16.4633 8.19407 16.6799 8.58395 16.5046 8.88819Z\" fill=\"#0098EA\"/>\n </g>\n <defs>\n <clipPath id=\"clip0_144_4719\">\n <rect width=\"24\" height=\"24\" fill=\"white\"/>\n </clipPath>\n </defs>\n </svg>\n);\n\nconst CopyGlyph = () => (\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" aria-hidden>\n <path\n fillRule=\"evenodd\"\n clipRule=\"evenodd\"\n d=\"M7.76228 2.09998H10.2378C11.0458 2.09997 11.7067 2.09996 12.2438 2.14384C12.7997 2.18926 13.3017 2.28614 13.7706 2.52505C14.5045 2.89896 15.1011 3.49558 15.475 4.22941C15.7139 4.6983 15.8108 5.20038 15.8562 5.75629C15.9001 6.29337 15.9001 6.95422 15.9001 7.76227V8.1H16.2377C17.0457 8.09999 17.7066 8.09998 18.2437 8.14386C18.7996 8.18928 19.3017 8.28616 19.7705 8.52507C20.5044 8.89898 21.101 9.4956 21.4749 10.2294C21.7138 10.6983 21.8107 11.2004 21.8561 11.7563C21.9 12.2934 21.9 12.9542 21.9 13.7623V16.2377C21.9 17.0458 21.9 17.7066 21.8561 18.2437C21.8107 18.7996 21.7138 19.3017 21.4749 19.7706C21.101 20.5044 20.5044 21.101 19.7705 21.4749C19.3017 21.7138 18.7996 21.8107 18.2437 21.8561C17.7066 21.9 17.0458 21.9 16.2378 21.9H13.7623C12.9543 21.9 12.2934 21.9 11.7563 21.8561C11.2004 21.8107 10.6983 21.7138 10.2294 21.4749C9.49561 21.101 8.89898 20.5044 8.52508 19.7706C8.28616 19.3017 8.18928 18.7996 8.14386 18.2437C8.09998 17.7066 8.09999 17.0458 8.1 16.2377V15.9H7.76227C6.95426 15.9 6.29335 15.9 5.75629 15.8561C5.20038 15.8107 4.6983 15.7138 4.22941 15.4749C3.49558 15.101 2.89896 14.5044 2.52505 13.7705C2.28614 13.3017 2.18926 12.7996 2.14384 12.2437C2.09996 11.7066 2.09997 11.0458 2.09998 10.2377V7.76228C2.09997 6.95424 2.09996 6.29336 2.14384 5.75629C2.18926 5.20038 2.28614 4.6983 2.52505 4.22941C2.89896 3.49558 3.49558 2.89896 4.22941 2.52505C4.6983 2.28614 5.20038 2.18926 5.75629 2.14384C6.29336 2.09996 6.95425 2.09997 7.76228 2.09998ZM8.1 14.1V13.7623C8.09999 12.9542 8.09998 12.2934 8.14386 11.7563C8.18928 11.2004 8.28616 10.6983 8.52508 10.2294C8.89898 9.4956 9.49561 8.89898 10.2294 8.52507C10.6983 8.28616 11.2004 8.18928 11.7563 8.14386C12.2934 8.09998 12.9542 8.09999 13.7623 8.1H14.1001V7.79998C14.1001 6.94505 14.0994 6.35798 14.0622 5.90287C14.0259 5.45827 13.9593 5.21944 13.8712 5.0466C13.6699 4.65146 13.3486 4.3302 12.9535 4.12886C12.7806 4.04079 12.5418 3.97419 12.0972 3.93786C11.6421 3.90068 11.055 3.89998 10.2001 3.89998H7.79998C6.94505 3.89998 6.35798 3.90068 5.90287 3.93786C5.45827 3.97419 5.21944 4.04079 5.0466 4.12886C4.65146 4.3302 4.3302 4.65146 4.12886 5.0466C4.04079 5.21944 3.97419 5.45827 3.93786 5.90287C3.90068 6.35798 3.89998 6.94505 3.89998 7.79998V10.2C3.89998 11.0549 3.90068 11.642 3.93786 12.0971C3.97419 12.5417 4.04079 12.7805 4.12886 12.9534C4.3302 13.3485 4.65146 13.6698 5.0466 13.8711C5.21944 13.9592 5.45827 14.0258 5.90287 14.0621C6.35798 14.0993 6.94505 14.1 7.79998 14.1H8.1ZM11.0466 10.1289C11.2195 10.0408 11.4583 9.97421 11.9029 9.93788C12.358 9.9007 12.9451 9.9 13.8 9.9H16.2C17.0549 9.9 17.642 9.9007 18.0971 9.93788C18.5417 9.97421 18.7805 10.0408 18.9534 10.1289C19.3485 10.3302 19.6698 10.6515 19.8711 11.0466C19.9592 11.2195 20.0258 11.4583 20.0621 11.9029C20.0993 12.358 20.1 12.9451 20.1 13.8V16.2C20.1 17.0549 20.0993 17.642 20.0621 18.0971C20.0258 18.5417 19.9592 18.7805 19.8711 18.9534C19.6698 19.3485 19.3485 19.6698 18.9534 19.8711C18.7805 19.9592 18.5417 20.0258 18.0971 20.0621C17.642 20.0993 17.0549 20.1 16.2 20.1H13.8C12.9451 20.1 12.358 20.0993 11.9029 20.0621C11.4583 20.0258 11.2195 19.9592 11.0466 19.8711C10.6515 19.6698 10.3302 19.3485 10.1289 18.9534C10.0408 18.7805 9.97421 18.5417 9.93788 18.0971C9.9007 17.642 9.9 17.0549 9.9 16.2V13.8C9.9 12.9451 9.9007 12.358 9.93788 11.9029C9.97421 11.4583 10.0408 11.2195 10.1289 11.0466C10.3302 10.6515 10.6515 10.3302 11.0466 10.1289Z\"\n fill=\"currentColor\"\n />\n </svg>\n);\n\nconst DisconnectGlyph = () => (\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" aria-hidden>\n <path\n d=\"M8.7624 3.10001C7.95435 3.1 7.29349 3.09999 6.75642 3.14387C6.2005 3.18929 5.69842 3.28617 5.22954 3.52508C4.4957 3.89899 3.89908 4.49561 3.52517 5.22944C3.28626 5.69833 3.18938 6.20041 3.14396 6.75632C3.10008 7.2934 3.10009 7.95424 3.1001 8.76229V15.2377C3.10009 16.0458 3.10008 16.7066 3.14396 17.2437C3.18938 17.7996 3.28626 18.3017 3.52517 18.7706C3.89908 19.5044 4.4957 20.101 5.22954 20.4749C5.69842 20.7138 6.2005 20.8107 6.75642 20.8561C7.29349 20.9 7.95434 20.9 8.76239 20.9H12.0001C12.4972 20.9 12.9001 20.4971 12.9001 20C12.9001 19.503 12.4972 19.1 12.0001 19.1H8.8001C7.94517 19.1 7.3581 19.0993 6.90299 19.0621C6.45839 19.0258 6.21956 18.9592 6.04672 18.8711C5.65158 18.6698 5.33032 18.3485 5.12898 17.9534C5.04092 17.7805 4.97431 17.5417 4.93798 17.0971C4.9008 16.642 4.9001 16.0549 4.9001 15.2V8.80001C4.9001 7.94508 4.9008 7.35801 4.93798 6.9029C4.97431 6.4583 5.04092 6.21947 5.12898 6.04663C5.33032 5.65149 5.65158 5.33023 6.04672 5.12889C6.21956 5.04082 6.45839 4.97422 6.90299 4.93789C7.3581 4.90071 7.94517 4.90001 8.8001 4.90001H12.0001C12.4972 4.90001 12.9001 4.49706 12.9001 4.00001C12.9001 3.50295 12.4972 3.10001 12.0001 3.10001H8.7624Z\"\n fill=\"currentColor\"\n />\n <path\n d=\"M17.6364 7.3636C17.2849 7.01212 16.7151 7.01212 16.3636 7.3636C16.0121 7.71507 16.0121 8.28492 16.3636 8.63639L18.8272 11.1H9.00001C8.50295 11.1 8.10001 11.5029 8.10001 12C8.10001 12.497 8.50295 12.9 9.00001 12.9H18.8272L16.3636 15.3636C16.0121 15.7151 16.0121 16.2849 16.3636 16.6364C16.7151 16.9879 17.2849 16.9879 17.6364 16.6364L21.6364 12.6364C21.9879 12.2849 21.9879 11.7151 21.6364 11.3636L17.6364 7.3636Z\"\n fill=\"currentColor\"\n />\n </svg>\n);\n\nfunction shortenAddress(addr: string \| null \| undefined, head: number = 4, tail: number = 4) {\n if (!addr \|\| typeof addr !== \"string\") return \"\";\n if (addr.length <= head + tail + 3) return addr;\n return `${addr.slice(0, head)}...${addr.slice(-tail)}`;\n}\n\nfunction toCssSize(v?: number \| string) {\n if (v === undefined) return undefined;\n return typeof v === \"number\" ? `${v}px` : v;\n}\n\nfunction isGradient(value: string) {\n return value.includes(\"gradient(\");\n}\n\nfunction getMenuBg(bg: string) {\n if (isGradient(bg)) {\n return \"#0098EA\";\n }\n return bg;\n}\n\nexport const TonPayButton = ({\n handlePay,\n isLoading = false,\n variant = \"long\",\n preset,\n bgColor,\n textColor,\n borderRadius = 8,\n fontFamily = \"inherit\",\n width = 300,\n height = 44,\n text,\n loadingText = \"Processing...\",\n style,\n className,\n showMenu = true,\n disabled = false,\n onError,\n showErrorNotification = true,\n}: TonPayButtonProps) => {\n const address = useTonAddress(true);\n const modal = useTonConnectModal();\n const [tonConnectUI] = useTonConnectUI();\n const wallet = useTonWallet();\n const disconnect = tonConnectUI.disconnect.bind(tonConnectUI);\n\n const [showContextMenu, setShowContextMenu] = useState(false);\n const [isCopiedShown, setIsCopiedShown] = useState(false);\n const [errorMessage, setErrorMessage] = useState(null as string \| null);\n\n useEffect(() => {\n const handleClickOutside = () => {\n if (showContextMenu) setShowContextMenu(false);\n };\n if (showContextMenu) {\n document.addEventListener('click', handleClickOutside);\n return () => document.removeEventListener('click', handleClickOutside);\n }\n }, [showContextMenu]);\n\n useEffect(() => {\n if (!showContextMenu && isCopiedShown) {\n setIsCopiedShown(false);\n }\n }, [showContextMenu, isCopiedShown]);\n\n useEffect(() => {\n if (!errorMessage) return;\n const timerId = setTimeout(() => setErrorMessage(null), 3000);\n return () => clearTimeout(timerId);\n }, [errorMessage]);\n\n const handleDropdownToggle = (e: any) => {\n e.preventDefault();\n e.stopPropagation();\n if (isLoading \|\| disabled \|\| !address) return;\n setShowContextMenu(!showContextMenu);\n };\n\n const handleDisconnect = () => {\n disconnect();\n setShowContextMenu(false);\n setIsCopiedShown(false);\n };\n\n const handleCopyAddress = async () => {\n const rawAddress = wallet?.account?.address;\n const chain = wallet?.account?.chain;\n const toCopy = rawAddress\n ? toUserFriendlyAddress(rawAddress, chain === CHAIN.TESTNET)\n : address;\n if (toCopy) {\n try {\n await navigator.clipboard.writeText(toCopy);\n setIsCopiedShown(true);\n setTimeout(() => setIsCopiedShown(false), 1000);\n } catch {}\n }\n };\n\n const handleConnect = () => {\n modal.open();\n setShowContextMenu(false);\n };\n\n const onPayClick = async () => {\n try {\n await handlePay();\n } catch (err) {\n try {\n onError?.(err);\n } catch {}\n if (showErrorNotification) {\n const raw = typeof err === \"object\" && err && \"message\" in (err as any)\n ? String((err as any).message)\n : String(err ?? \"\");\n const msg = raw \|\| \"Wallet connection modal closed\";\n setErrorMessage(msg);\n }\n }\n };\n\n const presetConfig = preset ? PRESETS[preset] : null;\n const finalBgColor = bgColor ?? presetConfig?.bgColor ?? PRESETS.default.bgColor;\n const finalTextColor = textColor ?? presetConfig?.textColor ?? PRESETS.default.textColor;\n \n const vars: Record<string, string \| number \| undefined> = {\n \"--tp-bg\": finalBgColor,\n \"--tp-text\": finalTextColor,\n \"--tp-radius\": typeof borderRadius === \"number\" ? `${borderRadius}px` : borderRadius,\n \"--tp-font\": fontFamily,\n \"--tp-width\": toCssSize(width),\n \"--tp-height\": toCssSize(height),\n \"--tp-menu-bg\": \"#ffffff\",\n \"--tp-menu-text\": \"#111827\",\n \"--tp-menu-muted\": \"#6b7280\",\n \"--tp-menu-hover\": \"rgba(0,0,0,.06)\",\n };\n\n const isDisabled = isLoading \|\| disabled;\n const hasMenu = showMenu && !!address;\n\n const content = text ? (\n <span>{text}</span>\n ) : variant === \"short\" ? (\n <div className=\"tp-btn-content\">\n <TonGlyph />\n <span>Pay</span>\n </div>\n ) : (\n <div className=\"tp-btn-content\">\n <span>Pay with</span>\n <TonGlyph />\n <span>Pay</span>\n </div>\n );\n\n return (\n <div style={{ ...vars, ...style }} className={[\"tp-wrap\", className].filter(Boolean).join(\" \")}> \n <div className=\"tp-btn-container\">\n <button\n type=\"button\"\n className={[\"tp-btn\", isLoading ? \"loading\" : \"\", !hasMenu ? \"no-menu\" : \"with-menu\"].filter(Boolean).join(\" \")}\n onClick={isDisabled ? undefined : onPayClick}\n disabled={isDisabled}\n >\n {isLoading ? (\n <div className=\"tp-btn-content\">\n <span className=\"tp-spinner\" />\n <span>{loadingText}</span>\n </div>\n ) : (\n content\n )}\n </button>\n {hasMenu && (\n <button\n type=\"button\"\n className=\"tp-arrow\"\n onClick={handleDropdownToggle}\n disabled={isDisabled}\n >\n ▼\n </button>\n )}\n </div>\n {hasMenu && showContextMenu && (\n <div className=\"tp-menu\" onClick={(e: any) => e.stopPropagation()}>\n <div className=\"tp-menu-arrow\" />\n {address && (\n <>\n <div className=\"tp-menu-address\">{shortenAddress(address)}</div>\n <button onClick={handleCopyAddress} className=\"tp-menu-item\" disabled={isCopiedShown}>\n <span className=\"tp-menu-icon\"><CopyGlyph /></span>\n <span>{isCopiedShown ? \"Address copied!\" : \"Copy address\"}</span>\n </button>\n <button onClick={handleDisconnect} className=\"tp-menu-item danger\">\n <span className=\"tp-menu-icon\"><DisconnectGlyph /></span>\n <span>Disconnect</span>\n </button>\n </>\n )}\n </div>\n )}\n {errorMessage && (\n <NotificationRoot>\n <ErrorTransactionNotification text={errorMessage} />\n </NotificationRoot>\n )}\n </div>\n );\n}","import React from 'react'\nconst notificationStyles = `\n .tp-noti-root{position:fixed;top:16px;right:16px;z-index:10000;display:flex;flex-direction:column;gap:10px}\n .tp-noti-card{width:256px;padding:12px 16px;display:flex;gap:9px;align-items:flex-start;background:#ffffff;color:#111827;border-radius:16px;box-shadow:0 4px 24px rgba(0,0,0,.16);animation:tp-fade-in .2s ease}\n .tp-noti-content{flex:1;min-width:0}\n .tp-noti-title{font-size:15px;font-weight:700;line-height:20px;margin:0}\n .tp-noti-text{margin-top:4px;color:#6b7280;font-size:13px;line-height:18px;word-break:break-word}\n .tp-noti-icon{width:24px;height:24px;margin-top:2px;flex:0 0 auto}\n`;\n\nif (typeof document !== \"undefined\") {\n const id = \"tp-notification-styles\";\n if (!document.getElementById(id)) {\n const style = document.createElement(\"style\");\n style.id = id;\n style.textContent = notificationStyles;\n document.head.appendChild(style);\n }\n}\n\nexport type NotificationProps = {\n title: string;\n text?: string;\n icon?: React.ReactNode;\n className?: string;\n style?: React.CSSProperties;\n};\n\nexport const NotificationCard: React.FC<NotificationProps> = ({ \n title, \n text, \n icon, \n className, \n style \n}: NotificationProps) => {\n return (\n <div className={[\"tp-noti-card\", className].filter(Boolean).join(\" \")} style={style}>\n <div className=\"tp-noti-content\">\n <h3 className=\"tp-noti-title\">{title}</h3>\n {text ? <div className=\"tp-noti-text\">{text}</div> : null}\n </div>\n {icon ? <div className=\"tp-noti-icon\">{icon}</div> : null}\n </div>\n );\n};\n\nexport const NotificationRoot: React.FC<{ children?: React.ReactNode }> = ({ children }: { children?: React.ReactNode }) => {\n return <div className=\"tp-noti-root\">{children}</div>;\n};\n\nexport const ErrorDotIcon: React.FC<{ color?: string }> = ({ color = \"#FF5252\" }) => (\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" aria-hidden>\n <circle cx=\"12\" cy=\"12\" r=\"11\" fill={color} />\n <path d=\"M7.864 9.136A1.5 1.5 0 0 1 9.136 7.864L12 10.727 14.864 7.864A1.5 1.5 0 0 1 16.136 9.136L13.273 12 16.136 14.864a1.5 1.5 0 0 1-2.272 2.272L12 13.273 9.136 17.136A1.5 1.5 0 1 1 7.864 14.864L10.727 12 7.864 9.136Z\" fill=\"#fff\" />\n </svg>\n);\n\n\n","import React from \"react\";\nimport { ErrorDotIcon, NotificationCard } from \"./Notification\";\n\nexport const ErrorTransactionNotification: React.FC<{ text?: string; className?: string; style?: React.CSSProperties }>\n = ({ text, className, style }) => {\n return (\n <NotificationCard\n title=\"Transaction cancelled\"\n text={text}\n icon={<ErrorDotIcon />}\n className={className}\n style={style}\n />\n );\n };\n\n\n","import React, { useEffect } from 'react';\nimport {\n useTonAddress,\n useTonConnectModal,\n useTonConnectUI\n} from \"@tonconnect/ui-react\";\n\nimport {type SendTransactionRequest, type SendTransactionResponse} from \"@tonconnect/sdk\";\n\nexport type TonPayMessage = SendTransactionRequest[\"messages\"][number] & {\n payload: string;\n};\n\nexport type GetMessageFn<T extends object = object> = (\n senderAddr: string\n) => Promise<{ message: TonPayMessage } & T>;\n\nexport type PayInfo<T extends object = object> = {\n message: TonPayMessage;\n txResult: SendTransactionResponse;\n} & T;\n\nexport const useTonPay = () => {\n const address = useTonAddress(true);\n const modal = useTonConnectModal();\n const [tonConnectUI] = useTonConnectUI();\n\n useEffect(() => {\n if (address) {\n console.log(address);\n }\n }, [address]);\n\n const waitForWalletConnection = React.useCallback((): Promise<string> => {\n return new Promise((resolve, reject) => {\n if (address) {\n resolve(address);\n return;\n }\n\n modal.open();\n\n const unsubscribe = tonConnectUI.onStatusChange((wallet: any) => {\n if (wallet && wallet.account) {\n unsubscribe();\n unsubscribeModal();\n resolve(wallet.account.address);\n }\n });\n\n const unsubscribeModal = tonConnectUI.onModalStateChange((state: any) => {\n if (state.status === \"closed\") {\n unsubscribe();\n unsubscribeModal();\n reject(new Error(\"Wallet connection modal closed\"));\n }\n });\n\n setTimeout(() => {\n unsubscribe();\n unsubscribeModal();\n reject(new Error(\"Wallet connection timeout\"));\n }, 5 * 60 * 1000);\n });\n }, [address, modal, tonConnectUI]);\n\n const pay = React.useCallback(\n async <T extends object = object>(\n getMessage: GetMessageFn<T>\n ): Promise<PayInfo<T>> => {\n try {\n const walletAddress = await waitForWalletConnection();\n\n const validUntil = Math.floor(Date.now() / 1e3) + 5 * 60; // 5 minutes\n const messageResult = await getMessage(walletAddress);\n\n const txResult = await tonConnectUI.sendTransaction({\n messages: [messageResult.message],\n validUntil,\n from: walletAddress,\n });\n\n return { ...messageResult, txResult };\n } catch (error) {\n console.error(\"Payment failed:\", error);\n throw error;\n }\n },\n [waitForWalletConnection, tonConnectUI]\n );\n\n return { pay, address };\n};\n"]}

package/dist/index.mjs CHANGED Viewed

@@ -2,7 +2,68 @@
 import { useTonAddress, useTonConnectModal, useTonConnectUI, useTonWallet } from "@tonconnect/ui-react";
 import { CHAIN, toUserFriendlyAddress } from "@tonconnect/ui";
 import { useEffect, useState } from "react";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+// src/components/notification/Notification.tsx
+import "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var notificationStyles = `
+  .tp-noti-root{position:fixed;top:16px;right:16px;z-index:10000;display:flex;flex-direction:column;gap:10px}
+  .tp-noti-card{width:256px;padding:12px 16px;display:flex;gap:9px;align-items:flex-start;background:#ffffff;color:#111827;border-radius:16px;box-shadow:0 4px 24px rgba(0,0,0,.16);animation:tp-fade-in .2s ease}
+  .tp-noti-content{flex:1;min-width:0}
+  .tp-noti-title{font-size:15px;font-weight:700;line-height:20px;margin:0}
+  .tp-noti-text{margin-top:4px;color:#6b7280;font-size:13px;line-height:18px;word-break:break-word}
+  .tp-noti-icon{width:24px;height:24px;margin-top:2px;flex:0 0 auto}
+`;
+if (typeof document !== "undefined") {
+  const id = "tp-notification-styles";
+  if (!document.getElementById(id)) {
+    const style = document.createElement("style");
+    style.id = id;
+    style.textContent = notificationStyles;
+    document.head.appendChild(style);
+  }
+}
+var NotificationCard = ({
+  title,
+  text,
+  icon,
+  className,
+  style
+}) => {
+  return /* @__PURE__ */ jsxs("div", { className: ["tp-noti-card", className].filter(Boolean).join(" "), style, children: [
+    /* @__PURE__ */ jsxs("div", { className: "tp-noti-content", children: [
+      /* @__PURE__ */ jsx("h3", { className: "tp-noti-title", children: title }),
+      text ? /* @__PURE__ */ jsx("div", { className: "tp-noti-text", children: text }) : null
+    ] }),
+    icon ? /* @__PURE__ */ jsx("div", { className: "tp-noti-icon", children: icon }) : null
+  ] });
+};
+var NotificationRoot = ({ children }) => {
+  return /* @__PURE__ */ jsx("div", { className: "tp-noti-root", children });
+};
+var ErrorDotIcon = ({ color = "#FF5252" }) => /* @__PURE__ */ jsxs("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": true, children: [
+  /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "11", fill: color }),
+  /* @__PURE__ */ jsx("path", { d: "M7.864 9.136A1.5 1.5 0 0 1 9.136 7.864L12 10.727 14.864 7.864A1.5 1.5 0 0 1 16.136 9.136L13.273 12 16.136 14.864a1.5 1.5 0 0 1-2.272 2.272L12 13.273 9.136 17.136A1.5 1.5 0 1 1 7.864 14.864L10.727 12 7.864 9.136Z", fill: "#fff" })
+] });
+// src/components/notification/ErrorTransactionNotification.tsx
+import "react";
+import { jsx as jsx2 } from "react/jsx-runtime";
+var ErrorTransactionNotification = ({ text, className, style }) => {
+  return /* @__PURE__ */ jsx2(
+    NotificationCard,
+    {
+      title: "Transaction cancelled",
+      text,
+      icon: /* @__PURE__ */ jsx2(ErrorDotIcon, {}),
+      className,
+      style
+    }
+  );
+};
+// src/components/ton-pay-btn.tsx
+import { Fragment, jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
 var PRESETS = {
   default: {
     bgColor: "#0098EA",
@@ -22,7 +83,8 @@ var stylesAndAnimations = `
   .tp-btn{display:flex;flex-direction:column;justify-content:center;align-items:center;padding:13px 10px;gap:10px;flex:1;min-height:var(--tp-height,44px);background:var(--tp-bg,#0098EA);color:var(--tp-text,#fff);border:none;border-radius:var(--tp-radius,8px) 0 0 var(--tp-radius,8px);cursor:pointer;transition:filter .12s ease, transform .12s ease;font-family:var(--tp-font,inherit);font-style:normal;font-weight:500;font-size:20px;line-height:25px;text-align:center;position:relative}
   .tp-btn.with-menu{padding-left:calc(10px + (var(--tp-height,44px))/2)}
   .tp-btn.no-menu{border-radius:var(--tp-radius,8px)}
-  .tp-btn-content{display:flex;flex-direction:row;align-items:center;padding:0;gap:5px;white-space:nowrap}
+  .tp-btn-content{display:flex;flex-direction:row;align-items:center;padding:0;gap:5px;white-space:nowrap;margin-top:-4px}
+  .tp-btn-content svg{margin-top:4px}
   .tp-btn:hover:not(:disabled){filter:brightness(0.92)}
   .tp-btn:active:not(:disabled){filter:brightness(0.85);transform:translateY(1px)}
   .tp-btn:disabled{cursor:not-allowed;opacity:.85}
@@ -50,15 +112,15 @@ if (typeof document !== "undefined") {
   style.textContent = stylesAndAnimations;
   document.head.appendChild(style);
 }
-var TonGlyph = () => /* @__PURE__ */ jsxs("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": true, children: [
-  /* @__PURE__ */ jsxs("g", { clipPath: "url(#clip0_144_4719)", children: [
-    /* @__PURE__ */ jsx("path", { d: "M12 24C18.6274 24 24 18.6274 24 12C24 5.37257 18.6274 0 12 0C5.37257 0 0 5.37257 0 12C0 18.6274 5.37257 24 12 24Z", fill: "#0098EA" }),
-    /* @__PURE__ */ jsx("path", { d: "M12 24C18.6274 24 24 18.6274 24 12C24 5.37257 18.6274 0 12 0C5.37257 0 0 5.37257 0 12C0 18.6274 5.37257 24 12 24Z", fill: "white" }),
-    /* @__PURE__ */ jsx("path", { d: "M16.0972 6.69763H7.9022C6.39543 6.69763 5.4404 8.32299 6.19846 9.63695L11.2561 18.4033C11.5862 18.9757 12.4133 18.9757 12.7433 18.4033L17.802 9.63695C18.559 8.32509 17.604 6.69763 16.0982 6.69763H16.0972ZM11.252 15.7744L10.1505 13.6426L7.49278 8.88922C7.31746 8.58497 7.53401 8.1951 7.90117 8.1951H11.251V15.7754L11.252 15.7744ZM16.5046 8.88819L13.8479 13.6437L12.7464 15.7744V8.19407H16.0962C16.4633 8.19407 16.6799 8.58395 16.5046 8.88819Z", fill: "#0098EA" })
+var TonGlyph = () => /* @__PURE__ */ jsxs2("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": true, children: [
+  /* @__PURE__ */ jsxs2("g", { clipPath: "url(#clip0_144_4719)", children: [
+    /* @__PURE__ */ jsx3("path", { d: "M12 24C18.6274 24 24 18.6274 24 12C24 5.37257 18.6274 0 12 0C5.37257 0 0 5.37257 0 12C0 18.6274 5.37257 24 12 24Z", fill: "#0098EA" }),
+    /* @__PURE__ */ jsx3("path", { d: "M12 24C18.6274 24 24 18.6274 24 12C24 5.37257 18.6274 0 12 0C5.37257 0 0 5.37257 0 12C0 18.6274 5.37257 24 12 24Z", fill: "white" }),
+    /* @__PURE__ */ jsx3("path", { d: "M16.0972 6.69763H7.9022C6.39543 6.69763 5.4404 8.32299 6.19846 9.63695L11.2561 18.4033C11.5862 18.9757 12.4133 18.9757 12.7433 18.4033L17.802 9.63695C18.559 8.32509 17.604 6.69763 16.0982 6.69763H16.0972ZM11.252 15.7744L10.1505 13.6426L7.49278 8.88922C7.31746 8.58497 7.53401 8.1951 7.90117 8.1951H11.251V15.7754L11.252 15.7744ZM16.5046 8.88819L13.8479 13.6437L12.7464 15.7744V8.19407H16.0962C16.4633 8.19407 16.6799 8.58395 16.5046 8.88819Z", fill: "#0098EA" })
   ] }),
-  /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsx("clipPath", { id: "clip0_144_4719", children: /* @__PURE__ */ jsx("rect", { width: "24", height: "24", fill: "white" }) }) })
+  /* @__PURE__ */ jsx3("defs", { children: /* @__PURE__ */ jsx3("clipPath", { id: "clip0_144_4719", children: /* @__PURE__ */ jsx3("rect", { width: "24", height: "24", fill: "white" }) }) })
 ] });
-var CopyGlyph = () => /* @__PURE__ */ jsx("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": true, children: /* @__PURE__ */ jsx(
+var CopyGlyph = () => /* @__PURE__ */ jsx3("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": true, children: /* @__PURE__ */ jsx3(
   "path",
   {
     fillRule: "evenodd",
@@ -67,15 +129,15 @@ var CopyGlyph = () => /* @__PURE__ */ jsx("svg", { width: "24", height: "24", vi
     fill: "currentColor"
   }
 ) });
-var DisconnectGlyph = () => /* @__PURE__ */ jsxs("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": true, children: [
-  /* @__PURE__ */ jsx(
+var DisconnectGlyph = () => /* @__PURE__ */ jsxs2("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": true, children: [
+  /* @__PURE__ */ jsx3(
     "path",
     {
       d: "M8.7624 3.10001C7.95435 3.1 7.29349 3.09999 6.75642 3.14387C6.2005 3.18929 5.69842 3.28617 5.22954 3.52508C4.4957 3.89899 3.89908 4.49561 3.52517 5.22944C3.28626 5.69833 3.18938 6.20041 3.14396 6.75632C3.10008 7.2934 3.10009 7.95424 3.1001 8.76229V15.2377C3.10009 16.0458 3.10008 16.7066 3.14396 17.2437C3.18938 17.7996 3.28626 18.3017 3.52517 18.7706C3.89908 19.5044 4.4957 20.101 5.22954 20.4749C5.69842 20.7138 6.2005 20.8107 6.75642 20.8561C7.29349 20.9 7.95434 20.9 8.76239 20.9H12.0001C12.4972 20.9 12.9001 20.4971 12.9001 20C12.9001 19.503 12.4972 19.1 12.0001 19.1H8.8001C7.94517 19.1 7.3581 19.0993 6.90299 19.0621C6.45839 19.0258 6.21956 18.9592 6.04672 18.8711C5.65158 18.6698 5.33032 18.3485 5.12898 17.9534C5.04092 17.7805 4.97431 17.5417 4.93798 17.0971C4.9008 16.642 4.9001 16.0549 4.9001 15.2V8.80001C4.9001 7.94508 4.9008 7.35801 4.93798 6.9029C4.97431 6.4583 5.04092 6.21947 5.12898 6.04663C5.33032 5.65149 5.65158 5.33023 6.04672 5.12889C6.21956 5.04082 6.45839 4.97422 6.90299 4.93789C7.3581 4.90071 7.94517 4.90001 8.8001 4.90001H12.0001C12.4972 4.90001 12.9001 4.49706 12.9001 4.00001C12.9001 3.50295 12.4972 3.10001 12.0001 3.10001H8.7624Z",
       fill: "currentColor"
     }
   ),
-  /* @__PURE__ */ jsx(
+  /* @__PURE__ */ jsx3(
     "path",
     {
       d: "M17.6364 7.3636C17.2849 7.01212 16.7151 7.01212 16.3636 7.3636C16.0121 7.71507 16.0121 8.28492 16.3636 8.63639L18.8272 11.1H9.00001C8.50295 11.1 8.10001 11.5029 8.10001 12C8.10001 12.497 8.50295 12.9 9.00001 12.9H18.8272L16.3636 15.3636C16.0121 15.7151 16.0121 16.2849 16.3636 16.6364C16.7151 16.9879 17.2849 16.9879 17.6364 16.6364L21.6364 12.6364C21.9879 12.2849 21.9879 11.7151 21.6364 11.3636L17.6364 7.3636Z",
@@ -108,7 +170,9 @@ var TonPayButton = ({
   style,
   className,
   showMenu = true,
-  disabled = false
+  disabled = false,
+  onError,
+  showErrorNotification = true
 }) => {
   const address = useTonAddress(true);
   const modal = useTonConnectModal();
@@ -117,6 +181,7 @@ var TonPayButton = ({
   const disconnect = tonConnectUI.disconnect.bind(tonConnectUI);
   const [showContextMenu, setShowContextMenu] = useState(false);
   const [isCopiedShown, setIsCopiedShown] = useState(false);
+  const [errorMessage, setErrorMessage] = useState(null);
   useEffect(() => {
     const handleClickOutside = () => {
       if (showContextMenu) setShowContextMenu(false);
@@ -131,6 +196,11 @@ var TonPayButton = ({
       setIsCopiedShown(false);
     }
   }, [showContextMenu, isCopiedShown]);
+  useEffect(() => {
+    if (!errorMessage) return;
+    const timerId = setTimeout(() => setErrorMessage(null), 3e3);
+    return () => clearTimeout(timerId);
+  }, [errorMessage]);
   const handleDropdownToggle = (e) => {
     e.preventDefault();
     e.stopPropagation();
@@ -159,47 +229,62 @@ var TonPayButton = ({
     modal.open();
     setShowContextMenu(false);
   };
+  const onPayClick = async () => {
+    try {
+      await handlePay();
+    } catch (err) {
+      try {
+        onError?.(err);
+      } catch {
+      }
+      if (showErrorNotification) {
+        const raw = typeof err === "object" && err && "message" in err ? String(err.message) : String(err ?? "");
+        const msg = raw || "Wallet connection modal closed";
+        setErrorMessage(msg);
+      }
+    }
+  };
   const presetConfig = preset ? PRESETS[preset] : null;
   const finalBgColor = bgColor ?? presetConfig?.bgColor ?? PRESETS.default.bgColor;
   const finalTextColor = textColor ?? presetConfig?.textColor ?? PRESETS.default.textColor;
   const vars = {
-    ["--tp-bg"]: finalBgColor,
-    ["--tp-text"]: finalTextColor,
-    ["--tp-radius"]: typeof borderRadius === "number" ? `${borderRadius}px` : borderRadius,
-    ["--tp-font"]: fontFamily,
-    ["--tp-width"]: toCssSize(width),
-    ["--tp-height"]: toCssSize(height),
-    ["--tp-menu-bg"]: "#ffffff",
-    ["--tp-menu-text"]: "#111827",
-    ["--tp-menu-muted"]: "#6b7280",
-    ["--tp-menu-hover"]: "rgba(0,0,0,.06)"
+    "--tp-bg": finalBgColor,
+    "--tp-text": finalTextColor,
+    "--tp-radius": typeof borderRadius === "number" ? `${borderRadius}px` : borderRadius,
+    "--tp-font": fontFamily,
+    "--tp-width": toCssSize(width),
+    "--tp-height": toCssSize(height),
+    "--tp-menu-bg": "#ffffff",
+    "--tp-menu-text": "#111827",
+    "--tp-menu-muted": "#6b7280",
+    "--tp-menu-hover": "rgba(0,0,0,.06)"
   };
   const isDisabled = isLoading || disabled;
   const hasMenu = showMenu && !!address;
-  const content = text ? /* @__PURE__ */ jsx("span", { children: text }) : variant === "short" ? /* @__PURE__ */ jsxs("div", { className: "tp-btn-content", children: [
-    /* @__PURE__ */ jsx(TonGlyph, {}),
-    /* @__PURE__ */ jsx("span", { children: "Pay" })
-  ] }) : /* @__PURE__ */ jsxs("div", { className: "tp-btn-content", children: [
-    /* @__PURE__ */ jsx("span", { children: "Pay with" }),
-    /* @__PURE__ */ jsx(TonGlyph, {}),
-    /* @__PURE__ */ jsx("span", { children: "Pay" })
+  const content = text ? /* @__PURE__ */ jsx3("span", { children: text }) : variant === "short" ? /* @__PURE__ */ jsxs2("div", { className: "tp-btn-content", children: [
+    /* @__PURE__ */ jsx3(TonGlyph, {}),
+    /* @__PURE__ */ jsx3("span", { children: "Pay" })
+  ] }) : /* @__PURE__ */ jsxs2("div", { className: "tp-btn-content", children: [
+    /* @__PURE__ */ jsx3("span", { children: "Pay with" }),
+    /* @__PURE__ */ jsx3(TonGlyph, {}),
+    /* @__PURE__ */ jsx3("span", { children: "Pay" })
   ] });
-  return /* @__PURE__ */ jsxs("div", { style: { ...vars, ...style }, className: ["tp-wrap", className].filter(Boolean).join(" "), children: [
-    /* @__PURE__ */ jsxs("div", { className: "tp-btn-container", children: [
-      /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsxs2("div", { style: { ...vars, ...style }, className: ["tp-wrap", className].filter(Boolean).join(" "), children: [
+    /* @__PURE__ */ jsxs2("div", { className: "tp-btn-container", children: [
+      /* @__PURE__ */ jsx3(
         "button",
         {
           type: "button",
           className: ["tp-btn", isLoading ? "loading" : "", !hasMenu ? "no-menu" : "with-menu"].filter(Boolean).join(" "),
-          onClick: isDisabled ? void 0 : handlePay,
+          onClick: isDisabled ? void 0 : onPayClick,
           disabled: isDisabled,
-          children: isLoading ? /* @__PURE__ */ jsxs("div", { className: "tp-btn-content", children: [
-            /* @__PURE__ */ jsx("span", { className: "tp-spinner" }),
-            /* @__PURE__ */ jsx("span", { children: loadingText })
+          children: isLoading ? /* @__PURE__ */ jsxs2("div", { className: "tp-btn-content", children: [
+            /* @__PURE__ */ jsx3("span", { className: "tp-spinner" }),
+            /* @__PURE__ */ jsx3("span", { children: loadingText })
           ] }) : content
         }
       ),
-      hasMenu && /* @__PURE__ */ jsx(
+      hasMenu && /* @__PURE__ */ jsx3(
         "button",
         {
           type: "button",
@@ -210,81 +295,23 @@ var TonPayButton = ({
         }
       )
     ] }),
-    hasMenu && showContextMenu && /* @__PURE__ */ jsxs("div", { className: "tp-menu", onClick: (e) => e.stopPropagation(), children: [
-      /* @__PURE__ */ jsx("div", { className: "tp-menu-arrow" }),
-      address && /* @__PURE__ */ jsxs(Fragment, { children: [
-        /* @__PURE__ */ jsx("div", { className: "tp-menu-address", children: shortenAddress(address) }),
-        /* @__PURE__ */ jsxs("button", { onClick: handleCopyAddress, className: "tp-menu-item", disabled: isCopiedShown, children: [
-          /* @__PURE__ */ jsx("span", { className: "tp-menu-icon", children: /* @__PURE__ */ jsx(CopyGlyph, {}) }),
-          /* @__PURE__ */ jsx("span", { children: isCopiedShown ? "Address copied!" : "Copy address" })
+    hasMenu && showContextMenu && /* @__PURE__ */ jsxs2("div", { className: "tp-menu", onClick: (e) => e.stopPropagation(), children: [
+      /* @__PURE__ */ jsx3("div", { className: "tp-menu-arrow" }),
+      address && /* @__PURE__ */ jsxs2(Fragment, { children: [
+        /* @__PURE__ */ jsx3("div", { className: "tp-menu-address", children: shortenAddress(address) }),
+        /* @__PURE__ */ jsxs2("button", { onClick: handleCopyAddress, className: "tp-menu-item", disabled: isCopiedShown, children: [
+          /* @__PURE__ */ jsx3("span", { className: "tp-menu-icon", children: /* @__PURE__ */ jsx3(CopyGlyph, {}) }),
+          /* @__PURE__ */ jsx3("span", { children: isCopiedShown ? "Address copied!" : "Copy address" })
         ] }),
-        /* @__PURE__ */ jsxs("button", { onClick: handleDisconnect, className: "tp-menu-item danger", children: [
-          /* @__PURE__ */ jsx("span", { className: "tp-menu-icon", children: /* @__PURE__ */ jsx(DisconnectGlyph, {}) }),
-          /* @__PURE__ */ jsx("span", { children: "Disconnect" })
+        /* @__PURE__ */ jsxs2("button", { onClick: handleDisconnect, className: "tp-menu-item danger", children: [
+          /* @__PURE__ */ jsx3("span", { className: "tp-menu-icon", children: /* @__PURE__ */ jsx3(DisconnectGlyph, {}) }),
+          /* @__PURE__ */ jsx3("span", { children: "Disconnect" })
         ] })
       ] })
-    ] })
-  ] });
-};
-// src/components/notification/Notification.tsx
-import "react";
-import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
-var notificationStyles = `
-  .tp-noti-root{position:fixed;top:16px;right:16px;z-index:10000;display:flex;flex-direction:column;gap:10px}
-  .tp-noti-card{width:256px;padding:12px 16px;display:flex;gap:9px;align-items:flex-start;background:#ffffff;color:#111827;border-radius:16px;box-shadow:0 4px 24px rgba(0,0,0,.16);animation:tp-fade-in .2s ease}
-  .tp-noti-content{flex:1;min-width:0}
-  .tp-noti-title{font-size:15px;font-weight:700;line-height:20px;margin:0}
-  .tp-noti-text{margin-top:4px;color:#6b7280;font-size:13px;line-height:18px;word-break:break-word}
-  .tp-noti-icon{width:24px;height:24px;margin-top:2px;flex:0 0 auto}
-`;
-if (typeof document !== "undefined") {
-  const id = "tp-notification-styles";
-  if (!document.getElementById(id)) {
-    const style = document.createElement("style");
-    style.id = id;
-    style.textContent = notificationStyles;
-    document.head.appendChild(style);
-  }
-}
-var NotificationCard = ({
-  title,
-  text,
-  icon,
-  className,
-  style
-}) => {
-  return /* @__PURE__ */ jsxs2("div", { className: ["tp-noti-card", className].filter(Boolean).join(" "), style, children: [
-    /* @__PURE__ */ jsxs2("div", { className: "tp-noti-content", children: [
-      /* @__PURE__ */ jsx2("h3", { className: "tp-noti-title", children: title }),
-      text ? /* @__PURE__ */ jsx2("div", { className: "tp-noti-text", children: text }) : null
     ] }),
-    icon ? /* @__PURE__ */ jsx2("div", { className: "tp-noti-icon", children: icon }) : null
+    errorMessage && /* @__PURE__ */ jsx3(NotificationRoot, { children: /* @__PURE__ */ jsx3(ErrorTransactionNotification, { text: errorMessage }) })
   ] });
 };
-var NotificationRoot = ({ children }) => {
-  return /* @__PURE__ */ jsx2("div", { className: "tp-noti-root", children });
-};
-var ErrorDotIcon = ({ color = "#FF5252" }) => /* @__PURE__ */ jsxs2("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": true, children: [
-  /* @__PURE__ */ jsx2("circle", { cx: "12", cy: "12", r: "11", fill: color }),
-  /* @__PURE__ */ jsx2("path", { d: "M7.864 9.136A1.5 1.5 0 0 1 9.136 7.864L12 10.727 14.864 7.864A1.5 1.5 0 0 1 16.136 9.136L13.273 12 16.136 14.864a1.5 1.5 0 0 1-2.272 2.272L12 13.273 9.136 17.136A1.5 1.5 0 1 1 7.864 14.864L10.727 12 7.864 9.136Z", fill: "#fff" })
-] });
-// src/components/notification/ErrorTransactionNotification.tsx
-import "react";
-import { jsx as jsx3 } from "react/jsx-runtime";
-var ErrorTransactionNotification = ({ text, className, style }) => {
-  return /* @__PURE__ */ jsx3(
-    NotificationCard,
-    {
-      title: "Transaction cancelled",
-      text,
-      icon: /* @__PURE__ */ jsx3(ErrorDotIcon, {}),
-      className,
-      style
-    }
-  );
-};
 // src/hooks/useTonPay.ts
 import React3, { useEffect as useEffect2 } from "react";

package/dist/index.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../src/components/ton-pay-btn.tsx","../src/components/notification/Notification.tsx","../src/components/notification/ErrorTransactionNotification.tsx","../src/hooks/useTonPay.ts"],"sourcesContent":["import { useTonAddress, useTonConnectModal, useTonConnectUI, useTonWallet } from \"@tonconnect/ui-react\";\nimport { CHAIN, toUserFriendlyAddress } from \"@tonconnect/ui\";\nimport { useEffect, useState } from \"react\";\n\ntype TonPayPreset = \"default\" \| \"gradient\";\n\ntype TonPayButtonProps = {\n handlePay: () => Promise<void>,\n isLoading?: boolean,\n variant?: \"long\" \| \"short\",\n preset?: TonPayPreset,\n bgColor?: string,\n textColor?: string,\n borderRadius?: number \| string,\n fontFamily?: string,\n width?: number \| string,\n height?: number \| string,\n text?: string,\n loadingText?: string,\n style?: Record<string, any>,\n className?: string,\n showMenu?: boolean,\n disabled?: boolean,\n}\n\nconst PRESETS: Record<TonPayPreset, { bgColor: string, textColor: string }> = {\n default: {\n bgColor: \"#0098EA\",\n textColor: \"#FFFFFF\",\n },\n gradient: {\n bgColor: \"linear-gradient(91.69deg, #2A82EB 8.9%, #0355CF 158.29%)\",\n textColor: \"#FFFFFF\",\n },\n};\n\nconst stylesAndAnimations = `\n @keyframes tp-pulse { 0%{opacity:1;transform:scale(1)} 50%{opacity:.5;transform:scale(1.02)} 100%{opacity:1;transform:scale(1)} }\n @keyframes tp-fade-in { from{opacity:0;transform:translateY(-4px) scale(.98)} to{opacity:1;transform:translateY(0) scale(1)} }\n @keyframes tp-spin { to{transform:rotate(360deg)} }\n .tp-wrap{display:inline-flex;flex-direction:column;position:relative;width:var(--tp-width,300px);max-width:100%}\n .tp-btn-container{display:flex;flex-direction:row;width:100%}\n .tp-btn{display:flex;flex-direction:column;justify-content:center;align-items:center;padding:13px 10px;gap:10px;flex:1;min-height:var(--tp-height,44px);background:var(--tp-bg,#0098EA);color:var(--tp-text,#fff);border:none;border-radius:var(--tp-radius,8px) 0 0 var(--tp-radius,8px);cursor:pointer;transition:filter .12s ease, transform .12s ease;font-family:var(--tp-font,inherit);font-style:normal;font-weight:500;font-size:20px;line-height:25px;text-align:center;position:relative}\n .tp-btn.with-menu{padding-left:calc(10px + (var(--tp-height,44px))/2)}\n .tp-btn.no-menu{border-radius:var(--tp-radius,8px)}\n .tp-btn-content{display:flex;flex-direction:row;align-items:center;padding:0;gap:5px;white-space:nowrap}\n .tp-btn:hover:not(:disabled){filter:brightness(0.92)}\n .tp-btn:active:not(:disabled){filter:brightness(0.85);transform:translateY(1px)}\n .tp-btn:disabled{cursor:not-allowed;opacity:.85}\n .tp-btn.loading{animation:none}\n .tp-arrow{display:flex;align-items:center;justify-content:center;padding:13px 10px;min-width:calc(var(--tp-height,44px));min-height:var(--tp-height,44px);background:var(--tp-bg,#0098EA);color:var(--tp-text,#fff);border:none;border-left:1px solid rgba(255,255,255,.2);border-radius:0 var(--tp-radius,8px) var(--tp-radius,8px) 0;cursor:pointer;transition:filter .12s ease, transform .12s ease;font-size:14px}\n .tp-arrow:hover:not(:disabled){filter:brightness(0.92)}\n .tp-arrow:active:not(:disabled){filter:brightness(0.85);transform:translateY(1px)}\n .tp-arrow:disabled{cursor:not-allowed;opacity:.85;transition:none;filter:none;transform:none}\n .tp-menu{position:absolute;right:0;top:calc(100% + 8px);width:256px;background:var(--tp-menu-bg,#ffffff);color:var(--tp-menu-text,#111827);border:1px solid rgba(0,0,0,.08);border-radius:var(--tp-menu-radius,16px);padding:8px;box-shadow:0 8px 24px rgba(0,0,0,.12);z-index:1000;animation:tp-fade-in .15s ease}\n .tp-menu-arrow{position:absolute;top:-8px;right:20px;width:0;height:0;border-style:solid;border-width:0 8px 8px 8px;border-color:transparent transparent var(--tp-menu-bg,#ffffff) transparent;filter:drop-shadow(0 -1px 1px rgba(0,0,0,.08))}\n .tp-menu-address{padding:.5rem .75rem;font-size:.85rem;color:var(--tp-menu-muted,#6b7280);cursor:default;user-select:text}\n .tp-menu-item{display:flex;align-items:center;gap:8px;width:100%;height:40px;padding-left:12px;padding-right:12px;border:none;background:transparent;text-align:left;cursor:pointer;font-size:15px;font-weight:590;color:var(--tp-menu-text,#111827);transition:background-color .15s ease, transform .1s ease-in-out;border-radius:8px;margin:2px}\n .tp-menu-item:hover:not(:disabled){background:var(--tp-menu-hover,rgba(0,0,0,.06))}\n .tp-menu-item:active{transform:scale(0.96)}\n .tp-menu-item.danger{color:#e74c3c}\n .tp-menu-item.danger:hover:not(:disabled){background:rgba(231,76,60,.12);color:#c0392b}\n .tp-menu-item:disabled{cursor:default;opacity:1;color:var(--tp-menu-muted,#6b7280)}\n .tp-menu-item:disabled:hover{background:transparent}\n .tp-menu-icon{width:24px;height:24px;display:flex;align-items:center;justify-content:center;color:currentColor}\n .tp-menu-item:disabled .tp-menu-icon{opacity:.5}\n .tp-spinner{border:2px solid rgba(255,255,255,.35);border-top-color:var(--tp-text,#fff);border-radius:50%;width:18px;height:18px;animation:tp-spin .6s linear infinite}\n`;\n\nif (typeof document !== 'undefined') {\n const style = document.createElement('style');\n style.textContent = stylesAndAnimations;\n document.head.appendChild(style);\n}\n\nconst TonGlyph = () => (\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" aria-hidden>\n <g clipPath=\"url(#clip0_144_4719)\">\n <path d=\"M12 24C18.6274 24 24 18.6274 24 12C24 5.37257 18.6274 0 12 0C5.37257 0 0 5.37257 0 12C0 18.6274 5.37257 24 12 24Z\" fill=\"#0098EA\"/>\n <path d=\"M12 24C18.6274 24 24 18.6274 24 12C24 5.37257 18.6274 0 12 0C5.37257 0 0 5.37257 0 12C0 18.6274 5.37257 24 12 24Z\" fill=\"white\"/>\n <path d=\"M16.0972 6.69763H7.9022C6.39543 6.69763 5.4404 8.32299 6.19846 9.63695L11.2561 18.4033C11.5862 18.9757 12.4133 18.9757 12.7433 18.4033L17.802 9.63695C18.559 8.32509 17.604 6.69763 16.0982 6.69763H16.0972ZM11.252 15.7744L10.1505 13.6426L7.49278 8.88922C7.31746 8.58497 7.53401 8.1951 7.90117 8.1951H11.251V15.7754L11.252 15.7744ZM16.5046 8.88819L13.8479 13.6437L12.7464 15.7744V8.19407H16.0962C16.4633 8.19407 16.6799 8.58395 16.5046 8.88819Z\" fill=\"#0098EA\"/>\n </g>\n <defs>\n <clipPath id=\"clip0_144_4719\">\n <rect width=\"24\" height=\"24\" fill=\"white\"/>\n </clipPath>\n </defs>\n </svg>\n);\n\nconst CopyGlyph = () => (\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" aria-hidden>\n <path\n fillRule=\"evenodd\"\n clipRule=\"evenodd\"\n d=\"M7.76228 2.09998H10.2378C11.0458 2.09997 11.7067 2.09996 12.2438 2.14384C12.7997 2.18926 13.3017 2.28614 13.7706 2.52505C14.5045 2.89896 15.1011 3.49558 15.475 4.22941C15.7139 4.6983 15.8108 5.20038 15.8562 5.75629C15.9001 6.29337 15.9001 6.95422 15.9001 7.76227V8.1H16.2377C17.0457 8.09999 17.7066 8.09998 18.2437 8.14386C18.7996 8.18928 19.3017 8.28616 19.7705 8.52507C20.5044 8.89898 21.101 9.4956 21.4749 10.2294C21.7138 10.6983 21.8107 11.2004 21.8561 11.7563C21.9 12.2934 21.9 12.9542 21.9 13.7623V16.2377C21.9 17.0458 21.9 17.7066 21.8561 18.2437C21.8107 18.7996 21.7138 19.3017 21.4749 19.7706C21.101 20.5044 20.5044 21.101 19.7705 21.4749C19.3017 21.7138 18.7996 21.8107 18.2437 21.8561C17.7066 21.9 17.0458 21.9 16.2378 21.9H13.7623C12.9543 21.9 12.2934 21.9 11.7563 21.8561C11.2004 21.8107 10.6983 21.7138 10.2294 21.4749C9.49561 21.101 8.89898 20.5044 8.52508 19.7706C8.28616 19.3017 8.18928 18.7996 8.14386 18.2437C8.09998 17.7066 8.09999 17.0458 8.1 16.2377V15.9H7.76227C6.95426 15.9 6.29335 15.9 5.75629 15.8561C5.20038 15.8107 4.6983 15.7138 4.22941 15.4749C3.49558 15.101 2.89896 14.5044 2.52505 13.7705C2.28614 13.3017 2.18926 12.7996 2.14384 12.2437C2.09996 11.7066 2.09997 11.0458 2.09998 10.2377V7.76228C2.09997 6.95424 2.09996 6.29336 2.14384 5.75629C2.18926 5.20038 2.28614 4.6983 2.52505 4.22941C2.89896 3.49558 3.49558 2.89896 4.22941 2.52505C4.6983 2.28614 5.20038 2.18926 5.75629 2.14384C6.29336 2.09996 6.95425 2.09997 7.76228 2.09998ZM8.1 14.1V13.7623C8.09999 12.9542 8.09998 12.2934 8.14386 11.7563C8.18928 11.2004 8.28616 10.6983 8.52508 10.2294C8.89898 9.4956 9.49561 8.89898 10.2294 8.52507C10.6983 8.28616 11.2004 8.18928 11.7563 8.14386C12.2934 8.09998 12.9542 8.09999 13.7623 8.1H14.1001V7.79998C14.1001 6.94505 14.0994 6.35798 14.0622 5.90287C14.0259 5.45827 13.9593 5.21944 13.8712 5.0466C13.6699 4.65146 13.3486 4.3302 12.9535 4.12886C12.7806 4.04079 12.5418 3.97419 12.0972 3.93786C11.6421 3.90068 11.055 3.89998 10.2001 3.89998H7.79998C6.94505 3.89998 6.35798 3.90068 5.90287 3.93786C5.45827 3.97419 5.21944 4.04079 5.0466 4.12886C4.65146 4.3302 4.3302 4.65146 4.12886 5.0466C4.04079 5.21944 3.97419 5.45827 3.93786 5.90287C3.90068 6.35798 3.89998 6.94505 3.89998 7.79998V10.2C3.89998 11.0549 3.90068 11.642 3.93786 12.0971C3.97419 12.5417 4.04079 12.7805 4.12886 12.9534C4.3302 13.3485 4.65146 13.6698 5.0466 13.8711C5.21944 13.9592 5.45827 14.0258 5.90287 14.0621C6.35798 14.0993 6.94505 14.1 7.79998 14.1H8.1ZM11.0466 10.1289C11.2195 10.0408 11.4583 9.97421 11.9029 9.93788C12.358 9.9007 12.9451 9.9 13.8 9.9H16.2C17.0549 9.9 17.642 9.9007 18.0971 9.93788C18.5417 9.97421 18.7805 10.0408 18.9534 10.1289C19.3485 10.3302 19.6698 10.6515 19.8711 11.0466C19.9592 11.2195 20.0258 11.4583 20.0621 11.9029C20.0993 12.358 20.1 12.9451 20.1 13.8V16.2C20.1 17.0549 20.0993 17.642 20.0621 18.0971C20.0258 18.5417 19.9592 18.7805 19.8711 18.9534C19.6698 19.3485 19.3485 19.6698 18.9534 19.8711C18.7805 19.9592 18.5417 20.0258 18.0971 20.0621C17.642 20.0993 17.0549 20.1 16.2 20.1H13.8C12.9451 20.1 12.358 20.0993 11.9029 20.0621C11.4583 20.0258 11.2195 19.9592 11.0466 19.8711C10.6515 19.6698 10.3302 19.3485 10.1289 18.9534C10.0408 18.7805 9.97421 18.5417 9.93788 18.0971C9.9007 17.642 9.9 17.0549 9.9 16.2V13.8C9.9 12.9451 9.9007 12.358 9.93788 11.9029C9.97421 11.4583 10.0408 11.2195 10.1289 11.0466C10.3302 10.6515 10.6515 10.3302 11.0466 10.1289Z\"\n fill=\"currentColor\"\n />\n </svg>\n);\n\nconst DisconnectGlyph = () => (\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" aria-hidden>\n <path\n d=\"M8.7624 3.10001C7.95435 3.1 7.29349 3.09999 6.75642 3.14387C6.2005 3.18929 5.69842 3.28617 5.22954 3.52508C4.4957 3.89899 3.89908 4.49561 3.52517 5.22944C3.28626 5.69833 3.18938 6.20041 3.14396 6.75632C3.10008 7.2934 3.10009 7.95424 3.1001 8.76229V15.2377C3.10009 16.0458 3.10008 16.7066 3.14396 17.2437C3.18938 17.7996 3.28626 18.3017 3.52517 18.7706C3.89908 19.5044 4.4957 20.101 5.22954 20.4749C5.69842 20.7138 6.2005 20.8107 6.75642 20.8561C7.29349 20.9 7.95434 20.9 8.76239 20.9H12.0001C12.4972 20.9 12.9001 20.4971 12.9001 20C12.9001 19.503 12.4972 19.1 12.0001 19.1H8.8001C7.94517 19.1 7.3581 19.0993 6.90299 19.0621C6.45839 19.0258 6.21956 18.9592 6.04672 18.8711C5.65158 18.6698 5.33032 18.3485 5.12898 17.9534C5.04092 17.7805 4.97431 17.5417 4.93798 17.0971C4.9008 16.642 4.9001 16.0549 4.9001 15.2V8.80001C4.9001 7.94508 4.9008 7.35801 4.93798 6.9029C4.97431 6.4583 5.04092 6.21947 5.12898 6.04663C5.33032 5.65149 5.65158 5.33023 6.04672 5.12889C6.21956 5.04082 6.45839 4.97422 6.90299 4.93789C7.3581 4.90071 7.94517 4.90001 8.8001 4.90001H12.0001C12.4972 4.90001 12.9001 4.49706 12.9001 4.00001C12.9001 3.50295 12.4972 3.10001 12.0001 3.10001H8.7624Z\"\n fill=\"currentColor\"\n />\n <path\n d=\"M17.6364 7.3636C17.2849 7.01212 16.7151 7.01212 16.3636 7.3636C16.0121 7.71507 16.0121 8.28492 16.3636 8.63639L18.8272 11.1H9.00001C8.50295 11.1 8.10001 11.5029 8.10001 12C8.10001 12.497 8.50295 12.9 9.00001 12.9H18.8272L16.3636 15.3636C16.0121 15.7151 16.0121 16.2849 16.3636 16.6364C16.7151 16.9879 17.2849 16.9879 17.6364 16.6364L21.6364 12.6364C21.9879 12.2849 21.9879 11.7151 21.6364 11.3636L17.6364 7.3636Z\"\n fill=\"currentColor\"\n />\n </svg>\n);\n\nfunction shortenAddress(addr: string \| null \| undefined, head: number = 4, tail: number = 4) {\n if (!addr \|\| typeof addr !== \"string\") return \"\";\n if (addr.length <= head + tail + 3) return addr;\n return `${addr.slice(0, head)}...${addr.slice(-tail)}`;\n}\n\nfunction toCssSize(v?: number \| string) {\n if (v === undefined) return undefined;\n return typeof v === \"number\" ? `${v}px` : v;\n}\n\nfunction isGradient(value: string) {\n return value.includes(\"gradient(\");\n}\n\nfunction getMenuBg(bg: string) {\n if (isGradient(bg)) {\n return \"#0098EA\";\n }\n return bg;\n}\n\nexport const TonPayButton = ({\n handlePay,\n isLoading = false,\n variant = \"long\",\n preset,\n bgColor,\n textColor,\n borderRadius = 8,\n fontFamily = \"inherit\",\n width = 300,\n height = 44,\n text,\n loadingText = \"Processing...\",\n style,\n className,\n showMenu = true,\n disabled = false,\n}: TonPayButtonProps) => {\n const address = useTonAddress(true);\n const modal = useTonConnectModal();\n const [tonConnectUI] = useTonConnectUI();\n const wallet = useTonWallet();\n const disconnect = tonConnectUI.disconnect.bind(tonConnectUI);\n\n const [showContextMenu, setShowContextMenu] = useState(false);\n const [isCopiedShown, setIsCopiedShown] = useState(false);\n\n useEffect(() => {\n const handleClickOutside = () => {\n if (showContextMenu) setShowContextMenu(false);\n };\n if (showContextMenu) {\n document.addEventListener('click', handleClickOutside);\n return () => document.removeEventListener('click', handleClickOutside);\n }\n }, [showContextMenu]);\n\n useEffect(() => {\n if (!showContextMenu && isCopiedShown) {\n setIsCopiedShown(false);\n }\n }, [showContextMenu, isCopiedShown]);\n\n const handleDropdownToggle = (e: any) => {\n e.preventDefault();\n e.stopPropagation();\n if (isLoading \|\| disabled \|\| !address) return;\n setShowContextMenu(!showContextMenu);\n };\n\n const handleDisconnect = () => {\n disconnect();\n setShowContextMenu(false);\n setIsCopiedShown(false);\n };\n\n const handleCopyAddress = async () => {\n const rawAddress = wallet?.account?.address;\n const chain = wallet?.account?.chain;\n const toCopy = rawAddress\n ? toUserFriendlyAddress(rawAddress, chain === CHAIN.TESTNET)\n : address;\n if (toCopy) {\n try {\n await navigator.clipboard.writeText(toCopy);\n setIsCopiedShown(true);\n setTimeout(() => setIsCopiedShown(false), 1000);\n } catch {}\n }\n };\n\n const handleConnect = () => {\n modal.open();\n setShowContextMenu(false);\n };\n\n const presetConfig = preset ? PRESETS[preset] : null;\n const finalBgColor = bgColor ?? presetConfig?.bgColor ?? PRESETS.default.bgColor;\n const finalTextColor = textColor ?? presetConfig?.textColor ?? PRESETS.default.textColor;\n \n const vars: Record<string, string \| number \| undefined> = {\n [\"--tp-bg\" as any]: finalBgColor,\n [\"--tp-text\" as any]: finalTextColor,\n [\"--tp-radius\" as any]: typeof borderRadius === \"number\" ? `${borderRadius}px` : borderRadius,\n [\"--tp-font\" as any]: fontFamily,\n [\"--tp-width\" as any]: toCssSize(width),\n [\"--tp-height\" as any]: toCssSize(height),\n [\"--tp-menu-bg\" as any]: \"#ffffff\",\n [\"--tp-menu-text\" as any]: \"#111827\",\n [\"--tp-menu-muted\" as any]: \"#6b7280\",\n [\"--tp-menu-hover\" as any]: \"rgba(0,0,0,.06)\",\n };\n\n const isDisabled = isLoading \|\| disabled;\n const hasMenu = showMenu && !!address;\n\n const content = text ? (\n <span>{text}</span>\n ) : variant === \"short\" ? (\n <div className=\"tp-btn-content\">\n <TonGlyph />\n <span>Pay</span>\n </div>\n ) : (\n <div className=\"tp-btn-content\">\n <span>Pay with</span>\n <TonGlyph />\n <span>Pay</span>\n </div>\n );\n\n return (\n <div style={{ ...vars, ...style }} className={[\"tp-wrap\", className].filter(Boolean).join(\" \")}> \n <div className=\"tp-btn-container\">\n <button\n type=\"button\"\n className={[\"tp-btn\", isLoading ? \"loading\" : \"\", !hasMenu ? \"no-menu\" : \"with-menu\"].filter(Boolean).join(\" \")}\n onClick={isDisabled ? undefined : handlePay}\n disabled={isDisabled}\n >\n {isLoading ? (\n <div className=\"tp-btn-content\">\n <span className=\"tp-spinner\" />\n <span>{loadingText}</span>\n </div>\n ) : (\n content\n )}\n </button>\n {hasMenu && (\n <button\n type=\"button\"\n className=\"tp-arrow\"\n onClick={handleDropdownToggle}\n disabled={isDisabled}\n >\n ▼\n </button>\n )}\n </div>\n {hasMenu && showContextMenu && (\n <div className=\"tp-menu\" onClick={(e: any) => e.stopPropagation()}>\n <div className=\"tp-menu-arrow\" />\n {address && (\n <>\n <div className=\"tp-menu-address\">{shortenAddress(address)}</div>\n <button onClick={handleCopyAddress} className=\"tp-menu-item\" disabled={isCopiedShown}>\n <span className=\"tp-menu-icon\"><CopyGlyph /></span>\n <span>{isCopiedShown ? \"Address copied!\" : \"Copy address\"}</span>\n </button>\n <button onClick={handleDisconnect} className=\"tp-menu-item danger\">\n <span className=\"tp-menu-icon\"><DisconnectGlyph /></span>\n <span>Disconnect</span>\n </button>\n </>\n )}\n </div>\n )}\n </div>\n );\n}","import React from 'react'\nconst notificationStyles = `\n .tp-noti-root{position:fixed;top:16px;right:16px;z-index:10000;display:flex;flex-direction:column;gap:10px}\n .tp-noti-card{width:256px;padding:12px 16px;display:flex;gap:9px;align-items:flex-start;background:#ffffff;color:#111827;border-radius:16px;box-shadow:0 4px 24px rgba(0,0,0,.16);animation:tp-fade-in .2s ease}\n .tp-noti-content{flex:1;min-width:0}\n .tp-noti-title{font-size:15px;font-weight:700;line-height:20px;margin:0}\n .tp-noti-text{margin-top:4px;color:#6b7280;font-size:13px;line-height:18px;word-break:break-word}\n .tp-noti-icon{width:24px;height:24px;margin-top:2px;flex:0 0 auto}\n`;\n\nif (typeof document !== \"undefined\") {\n const id = \"tp-notification-styles\";\n if (!document.getElementById(id)) {\n const style = document.createElement(\"style\");\n style.id = id;\n style.textContent = notificationStyles;\n document.head.appendChild(style);\n }\n}\n\nexport type NotificationProps = {\n title: string;\n text?: string;\n icon?: React.ReactNode;\n className?: string;\n style?: React.CSSProperties;\n};\n\nexport const NotificationCard: React.FC<NotificationProps> = ({ \n title, \n text, \n icon, \n className, \n style \n}: NotificationProps) => {\n return (\n <div className={[\"tp-noti-card\", className].filter(Boolean).join(\" \")} style={style}>\n <div className=\"tp-noti-content\">\n <h3 className=\"tp-noti-title\">{title}</h3>\n {text ? <div className=\"tp-noti-text\">{text}</div> : null}\n </div>\n {icon ? <div className=\"tp-noti-icon\">{icon}</div> : null}\n </div>\n );\n};\n\nexport const NotificationRoot: React.FC<{ children?: React.ReactNode }> = ({ children }: { children?: React.ReactNode }) => {\n return <div className=\"tp-noti-root\">{children}</div>;\n};\n\nexport const ErrorDotIcon: React.FC<{ color?: string }> = ({ color = \"#FF5252\" }) => (\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" aria-hidden>\n <circle cx=\"12\" cy=\"12\" r=\"11\" fill={color} />\n <path d=\"M7.864 9.136A1.5 1.5 0 0 1 9.136 7.864L12 10.727 14.864 7.864A1.5 1.5 0 0 1 16.136 9.136L13.273 12 16.136 14.864a1.5 1.5 0 0 1-2.272 2.272L12 13.273 9.136 17.136A1.5 1.5 0 1 1 7.864 14.864L10.727 12 7.864 9.136Z\" fill=\"#fff\" />\n </svg>\n);\n\n\n","import React from \"react\";\nimport { ErrorDotIcon, NotificationCard } from \"./Notification\";\n\nexport const ErrorTransactionNotification: React.FC<{ text?: string; className?: string; style?: React.CSSProperties }>\n = ({ text, className, style }) => {\n return (\n <NotificationCard\n title=\"Transaction cancelled\"\n text={text}\n icon={<ErrorDotIcon />}\n className={className}\n style={style}\n />\n );\n };\n\n\n","import React, { useEffect } from 'react';\nimport {\n useTonAddress,\n useTonConnectModal,\n useTonConnectUI\n} from \"@tonconnect/ui-react\";\n\nimport {type SendTransactionRequest, type SendTransactionResponse} from \"@tonconnect/sdk\";\n\nexport type TonPayMessage = SendTransactionRequest[\"messages\"][number] & {\n payload: string;\n};\n\nexport type GetMessageFn<T extends object = object> = (\n senderAddr: string\n) => Promise<{ message: TonPayMessage } & T>;\n\nexport type PayInfo<T extends object = object> = {\n message: TonPayMessage;\n txResult: SendTransactionResponse;\n} & T;\n\nexport const useTonPay = () => {\n const address = useTonAddress(true);\n const modal = useTonConnectModal();\n const [tonConnectUI] = useTonConnectUI();\n\n useEffect(() => {\n if (address) {\n console.log(address);\n }\n }, [address]);\n\n const waitForWalletConnection = React.useCallback((): Promise<string> => {\n return new Promise((resolve, reject) => {\n if (address) {\n resolve(address);\n return;\n }\n\n modal.open();\n\n const unsubscribe = tonConnectUI.onStatusChange((wallet: any) => {\n if (wallet && wallet.account) {\n unsubscribe();\n unsubscribeModal();\n resolve(wallet.account.address);\n }\n });\n\n const unsubscribeModal = tonConnectUI.onModalStateChange((state: any) => {\n if (state.status === \"closed\") {\n unsubscribe();\n unsubscribeModal();\n reject(new Error(\"Wallet connection modal closed\"));\n }\n });\n\n setTimeout(() => {\n unsubscribe();\n unsubscribeModal();\n reject(new Error(\"Wallet connection timeout\"));\n }, 5 * 60 * 1000);\n });\n }, [address, modal, tonConnectUI]);\n\n const pay = React.useCallback(\n async <T extends object = object>(\n getMessage: GetMessageFn<T>\n ): Promise<PayInfo<T>> => {\n try {\n const walletAddress = await waitForWalletConnection();\n\n const validUntil = Math.floor(Date.now() / 1e3) + 5 * 60; // 5 minutes\n const messageResult = await getMessage(walletAddress);\n\n const txResult = await tonConnectUI.sendTransaction({\n messages: [messageResult.message],\n validUntil,\n from: walletAddress,\n });\n\n return { ...messageResult, txResult };\n } catch (error) {\n console.error(\"Payment failed:\", error);\n throw error;\n }\n },\n [waitForWalletConnection, tonConnectUI]\n );\n\n return { pay, address };\n};\n"],"mappings":"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","names":["jsx","jsxs","jsx","React","useEffect","useTonAddress","useTonConnectModal","useTonConnectUI"]}
1	+ {"version":3,"sources":["../src/components/ton-pay-btn.tsx","../src/components/notification/Notification.tsx","../src/components/notification/ErrorTransactionNotification.tsx","../src/hooks/useTonPay.ts"],"sourcesContent":["import { useTonAddress, useTonConnectModal, useTonConnectUI, useTonWallet } from \"@tonconnect/ui-react\";\nimport { CHAIN, toUserFriendlyAddress } from \"@tonconnect/ui\";\nimport { useEffect, useState } from \"react\";\nimport { NotificationRoot } from \"./notification/Notification\";\nimport { ErrorTransactionNotification } from \"./notification/ErrorTransactionNotification\";\n\ntype TonPayPreset = \"default\" \| \"gradient\";\n\ntype TonPayButtonProps = {\n handlePay: () => Promise<void>,\n isLoading?: boolean,\n variant?: \"long\" \| \"short\",\n preset?: TonPayPreset,\n onError?: (error: unknown) => void,\n showErrorNotification?: boolean,\n bgColor?: string,\n textColor?: string,\n borderRadius?: number \| string,\n fontFamily?: string,\n width?: number \| string,\n height?: number \| string,\n text?: string,\n loadingText?: string,\n style?: Record<string, any>,\n className?: string,\n showMenu?: boolean,\n disabled?: boolean,\n}\n\nconst PRESETS: Record<TonPayPreset, { bgColor: string, textColor: string }> = {\n default: {\n bgColor: \"#0098EA\",\n textColor: \"#FFFFFF\",\n },\n gradient: {\n bgColor: \"linear-gradient(91.69deg, #2A82EB 8.9%, #0355CF 158.29%)\",\n textColor: \"#FFFFFF\",\n },\n};\n\nconst stylesAndAnimations = `\n @keyframes tp-pulse { 0%{opacity:1;transform:scale(1)} 50%{opacity:.5;transform:scale(1.02)} 100%{opacity:1;transform:scale(1)} }\n @keyframes tp-fade-in { from{opacity:0;transform:translateY(-4px) scale(.98)} to{opacity:1;transform:translateY(0) scale(1)} }\n @keyframes tp-spin { to{transform:rotate(360deg)} }\n .tp-wrap{display:inline-flex;flex-direction:column;position:relative;width:var(--tp-width,300px);max-width:100%}\n .tp-btn-container{display:flex;flex-direction:row;width:100%}\n .tp-btn{display:flex;flex-direction:column;justify-content:center;align-items:center;padding:13px 10px;gap:10px;flex:1;min-height:var(--tp-height,44px);background:var(--tp-bg,#0098EA);color:var(--tp-text,#fff);border:none;border-radius:var(--tp-radius,8px) 0 0 var(--tp-radius,8px);cursor:pointer;transition:filter .12s ease, transform .12s ease;font-family:var(--tp-font,inherit);font-style:normal;font-weight:500;font-size:20px;line-height:25px;text-align:center;position:relative}\n .tp-btn.with-menu{padding-left:calc(10px + (var(--tp-height,44px))/2)}\n .tp-btn.no-menu{border-radius:var(--tp-radius,8px)}\n .tp-btn-content{display:flex;flex-direction:row;align-items:center;padding:0;gap:5px;white-space:nowrap;margin-top:-4px}\n .tp-btn-content svg{margin-top:4px}\n .tp-btn:hover:not(:disabled){filter:brightness(0.92)}\n .tp-btn:active:not(:disabled){filter:brightness(0.85);transform:translateY(1px)}\n .tp-btn:disabled{cursor:not-allowed;opacity:.85}\n .tp-btn.loading{animation:none}\n .tp-arrow{display:flex;align-items:center;justify-content:center;padding:13px 10px;min-width:calc(var(--tp-height,44px));min-height:var(--tp-height,44px);background:var(--tp-bg,#0098EA);color:var(--tp-text,#fff);border:none;border-left:1px solid rgba(255,255,255,.2);border-radius:0 var(--tp-radius,8px) var(--tp-radius,8px) 0;cursor:pointer;transition:filter .12s ease, transform .12s ease;font-size:14px}\n .tp-arrow:hover:not(:disabled){filter:brightness(0.92)}\n .tp-arrow:active:not(:disabled){filter:brightness(0.85);transform:translateY(1px)}\n .tp-arrow:disabled{cursor:not-allowed;opacity:.85;transition:none;filter:none;transform:none}\n .tp-menu{position:absolute;right:0;top:calc(100% + 8px);width:256px;background:var(--tp-menu-bg,#ffffff);color:var(--tp-menu-text,#111827);border:1px solid rgba(0,0,0,.08);border-radius:var(--tp-menu-radius,16px);padding:8px;box-shadow:0 8px 24px rgba(0,0,0,.12);z-index:1000;animation:tp-fade-in .15s ease}\n .tp-menu-arrow{position:absolute;top:-8px;right:20px;width:0;height:0;border-style:solid;border-width:0 8px 8px 8px;border-color:transparent transparent var(--tp-menu-bg,#ffffff) transparent;filter:drop-shadow(0 -1px 1px rgba(0,0,0,.08))}\n .tp-menu-address{padding:.5rem .75rem;font-size:.85rem;color:var(--tp-menu-muted,#6b7280);cursor:default;user-select:text}\n .tp-menu-item{display:flex;align-items:center;gap:8px;width:100%;height:40px;padding-left:12px;padding-right:12px;border:none;background:transparent;text-align:left;cursor:pointer;font-size:15px;font-weight:590;color:var(--tp-menu-text,#111827);transition:background-color .15s ease, transform .1s ease-in-out;border-radius:8px;margin:2px}\n .tp-menu-item:hover:not(:disabled){background:var(--tp-menu-hover,rgba(0,0,0,.06))}\n .tp-menu-item:active{transform:scale(0.96)}\n .tp-menu-item.danger{color:#e74c3c}\n .tp-menu-item.danger:hover:not(:disabled){background:rgba(231,76,60,.12);color:#c0392b}\n .tp-menu-item:disabled{cursor:default;opacity:1;color:var(--tp-menu-muted,#6b7280)}\n .tp-menu-item:disabled:hover{background:transparent}\n .tp-menu-icon{width:24px;height:24px;display:flex;align-items:center;justify-content:center;color:currentColor}\n .tp-menu-item:disabled .tp-menu-icon{opacity:.5}\n .tp-spinner{border:2px solid rgba(255,255,255,.35);border-top-color:var(--tp-text,#fff);border-radius:50%;width:18px;height:18px;animation:tp-spin .6s linear infinite}\n`;\n\nif (typeof document !== 'undefined') {\n const style = document.createElement('style');\n style.textContent = stylesAndAnimations;\n document.head.appendChild(style);\n}\n\nconst TonGlyph = () => (\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" aria-hidden>\n <g clipPath=\"url(#clip0_144_4719)\">\n <path d=\"M12 24C18.6274 24 24 18.6274 24 12C24 5.37257 18.6274 0 12 0C5.37257 0 0 5.37257 0 12C0 18.6274 5.37257 24 12 24Z\" fill=\"#0098EA\"/>\n <path d=\"M12 24C18.6274 24 24 18.6274 24 12C24 5.37257 18.6274 0 12 0C5.37257 0 0 5.37257 0 12C0 18.6274 5.37257 24 12 24Z\" fill=\"white\"/>\n <path d=\"M16.0972 6.69763H7.9022C6.39543 6.69763 5.4404 8.32299 6.19846 9.63695L11.2561 18.4033C11.5862 18.9757 12.4133 18.9757 12.7433 18.4033L17.802 9.63695C18.559 8.32509 17.604 6.69763 16.0982 6.69763H16.0972ZM11.252 15.7744L10.1505 13.6426L7.49278 8.88922C7.31746 8.58497 7.53401 8.1951 7.90117 8.1951H11.251V15.7754L11.252 15.7744ZM16.5046 8.88819L13.8479 13.6437L12.7464 15.7744V8.19407H16.0962C16.4633 8.19407 16.6799 8.58395 16.5046 8.88819Z\" fill=\"#0098EA\"/>\n </g>\n <defs>\n <clipPath id=\"clip0_144_4719\">\n <rect width=\"24\" height=\"24\" fill=\"white\"/>\n </clipPath>\n </defs>\n </svg>\n);\n\nconst CopyGlyph = () => (\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" aria-hidden>\n <path\n fillRule=\"evenodd\"\n clipRule=\"evenodd\"\n d=\"M7.76228 2.09998H10.2378C11.0458 2.09997 11.7067 2.09996 12.2438 2.14384C12.7997 2.18926 13.3017 2.28614 13.7706 2.52505C14.5045 2.89896 15.1011 3.49558 15.475 4.22941C15.7139 4.6983 15.8108 5.20038 15.8562 5.75629C15.9001 6.29337 15.9001 6.95422 15.9001 7.76227V8.1H16.2377C17.0457 8.09999 17.7066 8.09998 18.2437 8.14386C18.7996 8.18928 19.3017 8.28616 19.7705 8.52507C20.5044 8.89898 21.101 9.4956 21.4749 10.2294C21.7138 10.6983 21.8107 11.2004 21.8561 11.7563C21.9 12.2934 21.9 12.9542 21.9 13.7623V16.2377C21.9 17.0458 21.9 17.7066 21.8561 18.2437C21.8107 18.7996 21.7138 19.3017 21.4749 19.7706C21.101 20.5044 20.5044 21.101 19.7705 21.4749C19.3017 21.7138 18.7996 21.8107 18.2437 21.8561C17.7066 21.9 17.0458 21.9 16.2378 21.9H13.7623C12.9543 21.9 12.2934 21.9 11.7563 21.8561C11.2004 21.8107 10.6983 21.7138 10.2294 21.4749C9.49561 21.101 8.89898 20.5044 8.52508 19.7706C8.28616 19.3017 8.18928 18.7996 8.14386 18.2437C8.09998 17.7066 8.09999 17.0458 8.1 16.2377V15.9H7.76227C6.95426 15.9 6.29335 15.9 5.75629 15.8561C5.20038 15.8107 4.6983 15.7138 4.22941 15.4749C3.49558 15.101 2.89896 14.5044 2.52505 13.7705C2.28614 13.3017 2.18926 12.7996 2.14384 12.2437C2.09996 11.7066 2.09997 11.0458 2.09998 10.2377V7.76228C2.09997 6.95424 2.09996 6.29336 2.14384 5.75629C2.18926 5.20038 2.28614 4.6983 2.52505 4.22941C2.89896 3.49558 3.49558 2.89896 4.22941 2.52505C4.6983 2.28614 5.20038 2.18926 5.75629 2.14384C6.29336 2.09996 6.95425 2.09997 7.76228 2.09998ZM8.1 14.1V13.7623C8.09999 12.9542 8.09998 12.2934 8.14386 11.7563C8.18928 11.2004 8.28616 10.6983 8.52508 10.2294C8.89898 9.4956 9.49561 8.89898 10.2294 8.52507C10.6983 8.28616 11.2004 8.18928 11.7563 8.14386C12.2934 8.09998 12.9542 8.09999 13.7623 8.1H14.1001V7.79998C14.1001 6.94505 14.0994 6.35798 14.0622 5.90287C14.0259 5.45827 13.9593 5.21944 13.8712 5.0466C13.6699 4.65146 13.3486 4.3302 12.9535 4.12886C12.7806 4.04079 12.5418 3.97419 12.0972 3.93786C11.6421 3.90068 11.055 3.89998 10.2001 3.89998H7.79998C6.94505 3.89998 6.35798 3.90068 5.90287 3.93786C5.45827 3.97419 5.21944 4.04079 5.0466 4.12886C4.65146 4.3302 4.3302 4.65146 4.12886 5.0466C4.04079 5.21944 3.97419 5.45827 3.93786 5.90287C3.90068 6.35798 3.89998 6.94505 3.89998 7.79998V10.2C3.89998 11.0549 3.90068 11.642 3.93786 12.0971C3.97419 12.5417 4.04079 12.7805 4.12886 12.9534C4.3302 13.3485 4.65146 13.6698 5.0466 13.8711C5.21944 13.9592 5.45827 14.0258 5.90287 14.0621C6.35798 14.0993 6.94505 14.1 7.79998 14.1H8.1ZM11.0466 10.1289C11.2195 10.0408 11.4583 9.97421 11.9029 9.93788C12.358 9.9007 12.9451 9.9 13.8 9.9H16.2C17.0549 9.9 17.642 9.9007 18.0971 9.93788C18.5417 9.97421 18.7805 10.0408 18.9534 10.1289C19.3485 10.3302 19.6698 10.6515 19.8711 11.0466C19.9592 11.2195 20.0258 11.4583 20.0621 11.9029C20.0993 12.358 20.1 12.9451 20.1 13.8V16.2C20.1 17.0549 20.0993 17.642 20.0621 18.0971C20.0258 18.5417 19.9592 18.7805 19.8711 18.9534C19.6698 19.3485 19.3485 19.6698 18.9534 19.8711C18.7805 19.9592 18.5417 20.0258 18.0971 20.0621C17.642 20.0993 17.0549 20.1 16.2 20.1H13.8C12.9451 20.1 12.358 20.0993 11.9029 20.0621C11.4583 20.0258 11.2195 19.9592 11.0466 19.8711C10.6515 19.6698 10.3302 19.3485 10.1289 18.9534C10.0408 18.7805 9.97421 18.5417 9.93788 18.0971C9.9007 17.642 9.9 17.0549 9.9 16.2V13.8C9.9 12.9451 9.9007 12.358 9.93788 11.9029C9.97421 11.4583 10.0408 11.2195 10.1289 11.0466C10.3302 10.6515 10.6515 10.3302 11.0466 10.1289Z\"\n fill=\"currentColor\"\n />\n </svg>\n);\n\nconst DisconnectGlyph = () => (\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" aria-hidden>\n <path\n d=\"M8.7624 3.10001C7.95435 3.1 7.29349 3.09999 6.75642 3.14387C6.2005 3.18929 5.69842 3.28617 5.22954 3.52508C4.4957 3.89899 3.89908 4.49561 3.52517 5.22944C3.28626 5.69833 3.18938 6.20041 3.14396 6.75632C3.10008 7.2934 3.10009 7.95424 3.1001 8.76229V15.2377C3.10009 16.0458 3.10008 16.7066 3.14396 17.2437C3.18938 17.7996 3.28626 18.3017 3.52517 18.7706C3.89908 19.5044 4.4957 20.101 5.22954 20.4749C5.69842 20.7138 6.2005 20.8107 6.75642 20.8561C7.29349 20.9 7.95434 20.9 8.76239 20.9H12.0001C12.4972 20.9 12.9001 20.4971 12.9001 20C12.9001 19.503 12.4972 19.1 12.0001 19.1H8.8001C7.94517 19.1 7.3581 19.0993 6.90299 19.0621C6.45839 19.0258 6.21956 18.9592 6.04672 18.8711C5.65158 18.6698 5.33032 18.3485 5.12898 17.9534C5.04092 17.7805 4.97431 17.5417 4.93798 17.0971C4.9008 16.642 4.9001 16.0549 4.9001 15.2V8.80001C4.9001 7.94508 4.9008 7.35801 4.93798 6.9029C4.97431 6.4583 5.04092 6.21947 5.12898 6.04663C5.33032 5.65149 5.65158 5.33023 6.04672 5.12889C6.21956 5.04082 6.45839 4.97422 6.90299 4.93789C7.3581 4.90071 7.94517 4.90001 8.8001 4.90001H12.0001C12.4972 4.90001 12.9001 4.49706 12.9001 4.00001C12.9001 3.50295 12.4972 3.10001 12.0001 3.10001H8.7624Z\"\n fill=\"currentColor\"\n />\n <path\n d=\"M17.6364 7.3636C17.2849 7.01212 16.7151 7.01212 16.3636 7.3636C16.0121 7.71507 16.0121 8.28492 16.3636 8.63639L18.8272 11.1H9.00001C8.50295 11.1 8.10001 11.5029 8.10001 12C8.10001 12.497 8.50295 12.9 9.00001 12.9H18.8272L16.3636 15.3636C16.0121 15.7151 16.0121 16.2849 16.3636 16.6364C16.7151 16.9879 17.2849 16.9879 17.6364 16.6364L21.6364 12.6364C21.9879 12.2849 21.9879 11.7151 21.6364 11.3636L17.6364 7.3636Z\"\n fill=\"currentColor\"\n />\n </svg>\n);\n\nfunction shortenAddress(addr: string \| null \| undefined, head: number = 4, tail: number = 4) {\n if (!addr \|\| typeof addr !== \"string\") return \"\";\n if (addr.length <= head + tail + 3) return addr;\n return `${addr.slice(0, head)}...${addr.slice(-tail)}`;\n}\n\nfunction toCssSize(v?: number \| string) {\n if (v === undefined) return undefined;\n return typeof v === \"number\" ? `${v}px` : v;\n}\n\nfunction isGradient(value: string) {\n return value.includes(\"gradient(\");\n}\n\nfunction getMenuBg(bg: string) {\n if (isGradient(bg)) {\n return \"#0098EA\";\n }\n return bg;\n}\n\nexport const TonPayButton = ({\n handlePay,\n isLoading = false,\n variant = \"long\",\n preset,\n bgColor,\n textColor,\n borderRadius = 8,\n fontFamily = \"inherit\",\n width = 300,\n height = 44,\n text,\n loadingText = \"Processing...\",\n style,\n className,\n showMenu = true,\n disabled = false,\n onError,\n showErrorNotification = true,\n}: TonPayButtonProps) => {\n const address = useTonAddress(true);\n const modal = useTonConnectModal();\n const [tonConnectUI] = useTonConnectUI();\n const wallet = useTonWallet();\n const disconnect = tonConnectUI.disconnect.bind(tonConnectUI);\n\n const [showContextMenu, setShowContextMenu] = useState(false);\n const [isCopiedShown, setIsCopiedShown] = useState(false);\n const [errorMessage, setErrorMessage] = useState(null as string \| null);\n\n useEffect(() => {\n const handleClickOutside = () => {\n if (showContextMenu) setShowContextMenu(false);\n };\n if (showContextMenu) {\n document.addEventListener('click', handleClickOutside);\n return () => document.removeEventListener('click', handleClickOutside);\n }\n }, [showContextMenu]);\n\n useEffect(() => {\n if (!showContextMenu && isCopiedShown) {\n setIsCopiedShown(false);\n }\n }, [showContextMenu, isCopiedShown]);\n\n useEffect(() => {\n if (!errorMessage) return;\n const timerId = setTimeout(() => setErrorMessage(null), 3000);\n return () => clearTimeout(timerId);\n }, [errorMessage]);\n\n const handleDropdownToggle = (e: any) => {\n e.preventDefault();\n e.stopPropagation();\n if (isLoading \|\| disabled \|\| !address) return;\n setShowContextMenu(!showContextMenu);\n };\n\n const handleDisconnect = () => {\n disconnect();\n setShowContextMenu(false);\n setIsCopiedShown(false);\n };\n\n const handleCopyAddress = async () => {\n const rawAddress = wallet?.account?.address;\n const chain = wallet?.account?.chain;\n const toCopy = rawAddress\n ? toUserFriendlyAddress(rawAddress, chain === CHAIN.TESTNET)\n : address;\n if (toCopy) {\n try {\n await navigator.clipboard.writeText(toCopy);\n setIsCopiedShown(true);\n setTimeout(() => setIsCopiedShown(false), 1000);\n } catch {}\n }\n };\n\n const handleConnect = () => {\n modal.open();\n setShowContextMenu(false);\n };\n\n const onPayClick = async () => {\n try {\n await handlePay();\n } catch (err) {\n try {\n onError?.(err);\n } catch {}\n if (showErrorNotification) {\n const raw = typeof err === \"object\" && err && \"message\" in (err as any)\n ? String((err as any).message)\n : String(err ?? \"\");\n const msg = raw \|\| \"Wallet connection modal closed\";\n setErrorMessage(msg);\n }\n }\n };\n\n const presetConfig = preset ? PRESETS[preset] : null;\n const finalBgColor = bgColor ?? presetConfig?.bgColor ?? PRESETS.default.bgColor;\n const finalTextColor = textColor ?? presetConfig?.textColor ?? PRESETS.default.textColor;\n \n const vars: Record<string, string \| number \| undefined> = {\n \"--tp-bg\": finalBgColor,\n \"--tp-text\": finalTextColor,\n \"--tp-radius\": typeof borderRadius === \"number\" ? `${borderRadius}px` : borderRadius,\n \"--tp-font\": fontFamily,\n \"--tp-width\": toCssSize(width),\n \"--tp-height\": toCssSize(height),\n \"--tp-menu-bg\": \"#ffffff\",\n \"--tp-menu-text\": \"#111827\",\n \"--tp-menu-muted\": \"#6b7280\",\n \"--tp-menu-hover\": \"rgba(0,0,0,.06)\",\n };\n\n const isDisabled = isLoading \|\| disabled;\n const hasMenu = showMenu && !!address;\n\n const content = text ? (\n <span>{text}</span>\n ) : variant === \"short\" ? (\n <div className=\"tp-btn-content\">\n <TonGlyph />\n <span>Pay</span>\n </div>\n ) : (\n <div className=\"tp-btn-content\">\n <span>Pay with</span>\n <TonGlyph />\n <span>Pay</span>\n </div>\n );\n\n return (\n <div style={{ ...vars, ...style }} className={[\"tp-wrap\", className].filter(Boolean).join(\" \")}> \n <div className=\"tp-btn-container\">\n <button\n type=\"button\"\n className={[\"tp-btn\", isLoading ? \"loading\" : \"\", !hasMenu ? \"no-menu\" : \"with-menu\"].filter(Boolean).join(\" \")}\n onClick={isDisabled ? undefined : onPayClick}\n disabled={isDisabled}\n >\n {isLoading ? (\n <div className=\"tp-btn-content\">\n <span className=\"tp-spinner\" />\n <span>{loadingText}</span>\n </div>\n ) : (\n content\n )}\n </button>\n {hasMenu && (\n <button\n type=\"button\"\n className=\"tp-arrow\"\n onClick={handleDropdownToggle}\n disabled={isDisabled}\n >\n ▼\n </button>\n )}\n </div>\n {hasMenu && showContextMenu && (\n <div className=\"tp-menu\" onClick={(e: any) => e.stopPropagation()}>\n <div className=\"tp-menu-arrow\" />\n {address && (\n <>\n <div className=\"tp-menu-address\">{shortenAddress(address)}</div>\n <button onClick={handleCopyAddress} className=\"tp-menu-item\" disabled={isCopiedShown}>\n <span className=\"tp-menu-icon\"><CopyGlyph /></span>\n <span>{isCopiedShown ? \"Address copied!\" : \"Copy address\"}</span>\n </button>\n <button onClick={handleDisconnect} className=\"tp-menu-item danger\">\n <span className=\"tp-menu-icon\"><DisconnectGlyph /></span>\n <span>Disconnect</span>\n </button>\n </>\n )}\n </div>\n )}\n {errorMessage && (\n <NotificationRoot>\n <ErrorTransactionNotification text={errorMessage} />\n </NotificationRoot>\n )}\n </div>\n );\n}","import React from 'react'\nconst notificationStyles = `\n .tp-noti-root{position:fixed;top:16px;right:16px;z-index:10000;display:flex;flex-direction:column;gap:10px}\n .tp-noti-card{width:256px;padding:12px 16px;display:flex;gap:9px;align-items:flex-start;background:#ffffff;color:#111827;border-radius:16px;box-shadow:0 4px 24px rgba(0,0,0,.16);animation:tp-fade-in .2s ease}\n .tp-noti-content{flex:1;min-width:0}\n .tp-noti-title{font-size:15px;font-weight:700;line-height:20px;margin:0}\n .tp-noti-text{margin-top:4px;color:#6b7280;font-size:13px;line-height:18px;word-break:break-word}\n .tp-noti-icon{width:24px;height:24px;margin-top:2px;flex:0 0 auto}\n`;\n\nif (typeof document !== \"undefined\") {\n const id = \"tp-notification-styles\";\n if (!document.getElementById(id)) {\n const style = document.createElement(\"style\");\n style.id = id;\n style.textContent = notificationStyles;\n document.head.appendChild(style);\n }\n}\n\nexport type NotificationProps = {\n title: string;\n text?: string;\n icon?: React.ReactNode;\n className?: string;\n style?: React.CSSProperties;\n};\n\nexport const NotificationCard: React.FC<NotificationProps> = ({ \n title, \n text, \n icon, \n className, \n style \n}: NotificationProps) => {\n return (\n <div className={[\"tp-noti-card\", className].filter(Boolean).join(\" \")} style={style}>\n <div className=\"tp-noti-content\">\n <h3 className=\"tp-noti-title\">{title}</h3>\n {text ? <div className=\"tp-noti-text\">{text}</div> : null}\n </div>\n {icon ? <div className=\"tp-noti-icon\">{icon}</div> : null}\n </div>\n );\n};\n\nexport const NotificationRoot: React.FC<{ children?: React.ReactNode }> = ({ children }: { children?: React.ReactNode }) => {\n return <div className=\"tp-noti-root\">{children}</div>;\n};\n\nexport const ErrorDotIcon: React.FC<{ color?: string }> = ({ color = \"#FF5252\" }) => (\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" aria-hidden>\n <circle cx=\"12\" cy=\"12\" r=\"11\" fill={color} />\n <path d=\"M7.864 9.136A1.5 1.5 0 0 1 9.136 7.864L12 10.727 14.864 7.864A1.5 1.5 0 0 1 16.136 9.136L13.273 12 16.136 14.864a1.5 1.5 0 0 1-2.272 2.272L12 13.273 9.136 17.136A1.5 1.5 0 1 1 7.864 14.864L10.727 12 7.864 9.136Z\" fill=\"#fff\" />\n </svg>\n);\n\n\n","import React from \"react\";\nimport { ErrorDotIcon, NotificationCard } from \"./Notification\";\n\nexport const ErrorTransactionNotification: React.FC<{ text?: string; className?: string; style?: React.CSSProperties }>\n = ({ text, className, style }) => {\n return (\n <NotificationCard\n title=\"Transaction cancelled\"\n text={text}\n icon={<ErrorDotIcon />}\n className={className}\n style={style}\n />\n );\n };\n\n\n","import React, { useEffect } from 'react';\nimport {\n useTonAddress,\n useTonConnectModal,\n useTonConnectUI\n} from \"@tonconnect/ui-react\";\n\nimport {type SendTransactionRequest, type SendTransactionResponse} from \"@tonconnect/sdk\";\n\nexport type TonPayMessage = SendTransactionRequest[\"messages\"][number] & {\n payload: string;\n};\n\nexport type GetMessageFn<T extends object = object> = (\n senderAddr: string\n) => Promise<{ message: TonPayMessage } & T>;\n\nexport type PayInfo<T extends object = object> = {\n message: TonPayMessage;\n txResult: SendTransactionResponse;\n} & T;\n\nexport const useTonPay = () => {\n const address = useTonAddress(true);\n const modal = useTonConnectModal();\n const [tonConnectUI] = useTonConnectUI();\n\n useEffect(() => {\n if (address) {\n console.log(address);\n }\n }, [address]);\n\n const waitForWalletConnection = React.useCallback((): Promise<string> => {\n return new Promise((resolve, reject) => {\n if (address) {\n resolve(address);\n return;\n }\n\n modal.open();\n\n const unsubscribe = tonConnectUI.onStatusChange((wallet: any) => {\n if (wallet && wallet.account) {\n unsubscribe();\n unsubscribeModal();\n resolve(wallet.account.address);\n }\n });\n\n const unsubscribeModal = tonConnectUI.onModalStateChange((state: any) => {\n if (state.status === \"closed\") {\n unsubscribe();\n unsubscribeModal();\n reject(new Error(\"Wallet connection modal closed\"));\n }\n });\n\n setTimeout(() => {\n unsubscribe();\n unsubscribeModal();\n reject(new Error(\"Wallet connection timeout\"));\n }, 5 * 60 * 1000);\n });\n }, [address, modal, tonConnectUI]);\n\n const pay = React.useCallback(\n async <T extends object = object>(\n getMessage: GetMessageFn<T>\n ): Promise<PayInfo<T>> => {\n try {\n const walletAddress = await waitForWalletConnection();\n\n const validUntil = Math.floor(Date.now() / 1e3) + 5 * 60; // 5 minutes\n const messageResult = await getMessage(walletAddress);\n\n const txResult = await tonConnectUI.sendTransaction({\n messages: [messageResult.message],\n validUntil,\n from: walletAddress,\n });\n\n return { ...messageResult, txResult };\n } catch (error) {\n console.error(\"Payment failed:\", error);\n throw error;\n }\n },\n [waitForWalletConnection, tonConnectUI]\n );\n\n return { pay, address };\n};\n"],"mappings":"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","names":["jsx","jsx","jsxs","jsx","jsxs","React","useEffect","useTonAddress","useTonConnectModal","useTonConnectUI"]}

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@ton-pay/ui-react",
-  "version": "0.1.1",
+  "version": "0.1.2",
   "description": "React components and hooks for TON Pay SDK",
   "main": "dist/index.js",
   "module": "dist/index.mjs",