@ton-pay/ui-react 0.2.0-beta.2 → 0.2.0-beta.3

package/dist/index.mjs

@@ -30,7 +30,7 @@ var TonIcon = ({ size = 24, className }) => /* @__PURE__ */ jsxs(
   {
     width: size,
     height: size,
-    viewBox: "0 0 24 24",
+    viewBox: "0 0 24 26",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
     className,
@@ -59,7 +59,7 @@ var TonIcon = ({ size = 24, className }) => /* @__PURE__ */ jsxs(
           }
         )
       ] }),
-      /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsx("clipPath", { id: "ton-icon-clip", children: /* @__PURE__ */ jsx("rect", { width: "24", height: "24", fill: "white" }) }) })
+      /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsx("clipPath", { id: "ton-icon-clip", children: /* @__PURE__ */ jsx("rect", { width: "24", height: "26", fill: "white" }) }) })
     ]
   }
 );
@@ -91,7 +91,7 @@ var TonIconBlue = ({ size = 24, className }) => /* @__PURE__ */ jsxs(
     ]
   }
 );
-var CloseIcon = ({
+var DisconnectIcon = ({
   size = 24,
   color = "currentColor",
   className
@@ -109,26 +109,41 @@ var CloseIcon = ({
       /* @__PURE__ */ jsx(
         "path",
         {
-          d: "M18 6L6 18",
-          stroke: color,
-          strokeWidth: "2",
-          strokeLinecap: "round",
-          strokeLinejoin: "round"
+          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: color
         }
       ),
       /* @__PURE__ */ jsx(
         "path",
         {
-          d: "M6 6L18 18",
-          stroke: color,
-          strokeWidth: "2",
-          strokeLinecap: "round",
-          strokeLinejoin: "round"
+          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",
+          fill: color
         }
       )
     ]
   }
 );
+var CloseIcon = ({
+  size = 24,
+  color = "currentColor",
+  className
+}) => /* @__PURE__ */ jsxs(
+  "svg",
+  {
+    width: size,
+    height: size,
+    viewBox: "0 0 32 32",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    className,
+    "aria-hidden": true,
+    children: [
+      /* @__PURE__ */ jsx("rect", { width: "32", height: "32", rx: "8", fill: "#F4F4F4" }),
+      /* @__PURE__ */ jsx("path", { d: "M8.99933 22.251L22.2501 9.00026", stroke: "#7A7A7A", strokeWidth: "1.5", strokeLinecap: "round" }),
+      /* @__PURE__ */ jsx("path", { d: "M8.99933 9.08296L22.2501 22.3337", stroke: "#7A7A7A", strokeWidth: "1.5", strokeLinecap: "round" })
+    ]
+  }
+);
 var BackIcon = ({
   size = 24,
   color = "currentColor",
@@ -258,6 +273,72 @@ var ErrorDotIcon = ({
     ]
   }
 );
+var CardIcon = ({
+  size = 20,
+  className
+}) => /* @__PURE__ */ jsxs(
+  "svg",
+  {
+    width: size,
+    height: size,
+    viewBox: "0 0 20 20",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    className,
+    "aria-hidden": true,
+    children: [
+      /* @__PURE__ */ jsx("path", { d: "M15.4688 5H4.53125C3.68693 5 3 5.71369 3 6.59091V13.4091C3 14.2863 3.68693 15 4.53125 15H15.4688C16.3131 15 17 14.2863 17 13.4091V6.59091C17 5.71369 16.3131 5 15.4688 5ZM4.53125 5.90909H15.4688C15.8306 5.90909 16.125 6.21497 16.125 6.59091V7.5H3.875V6.59091C3.875 6.21497 4.16941 5.90909 4.53125 5.90909ZM15.4688 14.0909H4.53125C4.16941 14.0909 3.875 13.785 3.875 13.4091V8.40909H16.125V13.4091C16.125 13.785 15.8306 14.0909 15.4688 14.0909Z", fill: "white" }),
+      /* @__PURE__ */ jsx("path", { d: "M6.33333 13H5.66667C5.2985 13 5 12.7015 5 12.3333V11.6667C5 11.2985 5.2985 11 5.66667 11H6.33333C6.7015 11 7 11.2985 7 11.6667V12.3333C7 12.7015 6.7015 13 6.33333 13Z", fill: "white" })
+    ]
+  }
+);
+var CryptoIcon = ({
+  size = 20,
+  className
+}) => /* @__PURE__ */ jsx(
+  "svg",
+  {
+    width: size,
+    height: size,
+    viewBox: "0 0 20 20",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    className,
+    "aria-hidden": true,
+    children: /* @__PURE__ */ jsx("path", { d: "M14.3896 3.5H5.61006C3.99582 3.5 2.97267 5.24122 3.7848 6.64885L9.20318 16.0401C9.55683 16.6533 10.4429 16.6533 10.7965 16.0401L16.216 6.64885C17.027 5.24347 16.0028 3.5 14.3896 3.5ZM9.19879 13.2238L8.01872 10.9401L5.17144 5.84782C4.98361 5.52189 5.21561 5.10422 5.60896 5.10422H9.19772V13.225L9.19879 13.2238ZM14.826 5.84671L11.9798 10.9412L10.7998 13.2238V5.10312H14.3885C14.7818 5.10312 15.0138 5.52078 14.826 5.84671Z", fill: "white" })
+  }
+);
+var InfoIcon = ({
+  size = 24,
+  color = "currentColor",
+  className
+}) => /* @__PURE__ */ jsxs(
+  "svg",
+  {
+    width: size,
+    height: size,
+    viewBox: "0 0 24 24",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    className,
+    "aria-hidden": true,
+    children: [
+      /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "10", stroke: color, strokeWidth: "2" }),
+      /* @__PURE__ */ jsx("path", { d: "M12 16V12", stroke: color, strokeWidth: "2", strokeLinecap: "round" }),
+      /* @__PURE__ */ jsx("circle", { cx: "12", cy: "8", r: "1", fill: color })
+    ]
+  }
+);
+var TonPayLogo = ({ className }) => /* @__PURE__ */ jsxs("div", { className, style: { display: "flex", alignItems: "center", gap: "4px" }, children: [
+  /* @__PURE__ */ jsx(TonIconBlue, { size: 26 }),
+  /* @__PURE__ */ jsx("span", { style: {
+    fontWeight: 600,
+    fontSize: "18px",
+    lineHeight: "24px",
+    color: "#000000",
+    letterSpacing: "-0.5px"
+  }, children: "Pay" })
+] });
 
 // src/components/notification/Notification.tsx
 import "react";
@@ -831,7 +912,7 @@ var BottomSheet_default = BottomSheet;
 
 // src/components/payment-modal/PaymentModal.css
 import styleInject2 from "#style-inject";
-styleInject2('.pm-content {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  width: 100%;\n  font-family: "Inter", sans-serif;\n  color: #000000;\n  --pm-bg: #FFFFFF;\n  --pm-text: #000000;\n  --pm-text-secondary: #666666;\n  --pm-text-muted: #8C8C8C;\n  --pm-border: rgba(0, 0, 0, 0.1);\n  --pm-order-bg: #E9F5FA;\n  --pm-order-border: rgba(0, 100, 153, 0.03);\n  --pm-order-text: #004062;\n  --pm-hover-bg: #F9F9F9;\n  --pm-iframe-bg: #f9f9f9;\n  --pm-spinner-track: #E5E7EB;\n}\n@media (prefers-color-scheme: dark) {\n  .pm-content {\n    color: #FFFFFF;\n    --pm-bg: #1f2937;\n    --pm-text: #FFFFFF;\n    --pm-text-secondary: #9CA3AF;\n    --pm-text-muted: #6B7280;\n    --pm-border: rgba(255, 255, 255, 0.1);\n    --pm-order-bg: rgba(0, 152, 234, 0.15);\n    --pm-order-border: rgba(0, 152, 234, 0.2);\n    --pm-order-text: #7DD3FC;\n    --pm-hover-bg: rgba(255, 255, 255, 0.05);\n    --pm-iframe-bg: #111827;\n    --pm-spinner-track: #374151;\n  }\n}\n.pm-header {\n  display: flex;\n  flex-direction: row;\n  justify-content: space-between;\n  align-items: center;\n  width: 100%;\n  padding: 16px;\n  box-sizing: border-box;\n  position: relative;\n}\n.pm-title {\n  font-weight: 600;\n  font-size: 18px;\n  line-height: 22px;\n  text-align: center;\n  flex: 1;\n}\n.pm-close-btn,\n.pm-back-btn {\n  background: none;\n  border: none;\n  cursor: pointer;\n  padding: 4px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: var(--pm-text, #000000);\n  opacity: 0.6;\n}\n.pm-close-btn:hover,\n.pm-back-btn:hover {\n  opacity: 1;\n}\n.pm-body-main {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  width: 100%;\n  padding: 0 16px 24px;\n  gap: 20px;\n  box-sizing: border-box;\n}\n.pm-order-info {\n  display: flex;\n  flex-direction: row;\n  justify-content: center;\n  align-items: center;\n  padding: 8px 13px;\n  gap: 10px;\n  background: var(--pm-order-bg, #E9F5FA);\n  border: 1px solid var(--pm-order-border, rgba(0, 100, 153, 0.03));\n  border-radius: 9px;\n  margin-bottom: 10px;\n}\n.pm-order-text {\n  font-size: 13px;\n  line-height: 16px;\n  color: var(--pm-order-text, #004062);\n  text-align: center;\n}\n.pm-amount-container {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: 10px;\n  margin-bottom: 10px;\n}\n.pm-amount-label {\n  font-weight: 500;\n  font-size: 12px;\n  line-height: 15px;\n  color: var(--pm-text-muted, #8C8C8C);\n}\n.pm-amount-value {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  font-weight: 500;\n  font-size: 20px;\n  line-height: 24px;\n  color: var(--pm-text, #000000);\n}\n.pm-actions {\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n  width: 100%;\n}\n.pm-btn {\n  display: flex;\n  flex-direction: row;\n  justify-content: center;\n  align-items: center;\n  padding: 13px 10px;\n  gap: 10px;\n  width: 100%;\n  height: 44px;\n  border-radius: 8px;\n  border: none;\n  cursor: pointer;\n  font-weight: 500;\n  font-size: 16px;\n  line-height: 19px;\n  transition: opacity 0.2s;\n}\n.pm-btn:hover {\n  opacity: 0.9;\n}\n.pm-btn-primary {\n  background: #0098EA;\n  color: #FFFFFF;\n}\n.pm-btn-black {\n  background: #000000;\n  color: #FFFFFF;\n}\n.pm-footer {\n  display: flex;\n  flex-direction: row;\n  justify-content: center;\n  align-items: center;\n  gap: 8px;\n  margin-top: 10px;\n  font-size: 14px;\n  line-height: 17px;\n}\n.pm-footer-text {\n  color: var(--pm-text-muted, #808080);\n}\n.pm-footer-link {\n  color: #0098EA;\n  cursor: pointer;\n  text-decoration: none;\n}\n.pm-footer-link:hover {\n  text-decoration: underline;\n}\n.pm-providers-list {\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  padding: 0;\n}\n.pm-provider-item {\n  display: flex;\n  flex-direction: row;\n  justify-content: space-between;\n  align-items: center;\n  padding: 13px 16px 13px 32px;\n  width: 100%;\n  height: 52px;\n  background: var(--pm-bg, #FFFFFF);\n  border: none;\n  border-bottom: 1px solid var(--pm-border, rgba(0, 0, 0, 0.1));\n  cursor: pointer;\n  box-sizing: border-box;\n  position: relative;\n}\n.pm-provider-item:hover {\n  background-color: var(--pm-hover-bg, #F9F9F9);\n}\n.pm-provider-item.selected {\n  background: var(--pm-hover-bg, #F9F9F9);\n}\n.pm-provider-left {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n}\n.pm-provider-icon {\n  width: 32px;\n  height: 32px;\n  border-radius: 8px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  overflow: hidden;\n}\n.pm-provider-name {\n  font-size: 16px;\n  color: var(--pm-text, #000000);\n}\n.pm-check-icon {\n  color: #0098EA;\n  opacity: 0;\n}\n.pm-provider-item.selected .pm-check-icon {\n  opacity: 1;\n}\n.pm-desktop-overlay {\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  background: rgba(0, 0, 0, 0.44);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  z-index: 1000;\n  animation: fadeIn 0.2s ease-out;\n}\n.pm-desktop-modal {\n  width: 100%;\n  max-width: 414px;\n  margin: 16px;\n  background: var(--pm-bg, #FFFFFF);\n  border-radius: 16px;\n  box-shadow: 0px 4px 24px rgba(0, 0, 0, 0.25);\n  overflow: hidden;\n  position: relative;\n  animation: scaleIn 0.2s ease-out;\n}\n@media (prefers-color-scheme: dark) {\n  .pm-desktop-modal {\n    box-shadow: 0px 4px 32px rgba(0, 0, 0, 0.5);\n  }\n}\n@keyframes scaleIn {\n  from {\n    transform: scale(0.95);\n    opacity: 0;\n  }\n  to {\n    transform: scale(1);\n    opacity: 1;\n  }\n}\n.pm-iframe-container {\n  width: 100%;\n  height: 100%;\n  min-height: 400px;\n  display: flex;\n  flex-direction: column;\n  background: var(--pm-iframe-bg, #f9f9f9);\n  position: relative;\n}\n.pm-iframe-container iframe {\n  flex: 1;\n  width: 100%;\n  height: 100%;\n  border: none;\n  display: block;\n}\n.pm-menu-dropdown {\n  position: absolute;\n  top: 100%;\n  right: 0;\n  background: var(--pm-bg, #FFFFFF);\n  border: 1px solid var(--pm-border, rgba(0, 0, 0, 0.1));\n  border-radius: 8px;\n  box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.15);\n  z-index: 1001;\n  min-width: 150px;\n  overflow: hidden;\n}\n@media (prefers-color-scheme: dark) {\n  .pm-menu-dropdown {\n    box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.4);\n  }\n}\n.pm-menu-item {\n  padding: 10px 16px;\n  font-size: 14px;\n  cursor: pointer;\n  color: var(--pm-text, #000000);\n}\n.pm-menu-item:hover {\n  background: var(--pm-hover-bg, #F9F9F9);\n}\n.pm-menu-item.danger {\n  color: #E74C3C;\n}\n.pm-menu-item.disabled {\n  cursor: default;\n  color: var(--pm-text-muted, #8C8C8C);\n}\n.pm-menu-item.disabled:hover {\n  background: transparent;\n}\n.icon-moonpay {\n  background: #7D00FF;\n  color: white;\n}\n.icon-onramper {\n  background: #000000;\n  color: white;\n}\n.icon-transak {\n  background:\n    linear-gradient(\n      120deg,\n      #348BED 22.91%,\n      #2B80E8 36.09%,\n      #1461DB 60.25%,\n      #0E57D7 66.11%);\n  color: white;\n}\n.icon-mercurio {\n  background: #000000;\n  color: white;\n}\n.pm-success-container {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  padding: 60px 24px;\n  text-align: center;\n}\n.pm-success-icon {\n  width: 64px;\n  height: 64px;\n  background: #0098EA;\n  border-radius: 50%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  margin-bottom: 20px;\n  color: white;\n}\n.pm-success-icon svg {\n  width: 32px;\n  height: 32px;\n}\n.pm-success-title {\n  font-size: 24px;\n  font-weight: 600;\n  color: var(--pm-text, #000000);\n  margin: 0 0 8px;\n}\n.pm-success-text {\n  font-size: 16px;\n  color: var(--pm-text-secondary, #666666);\n  margin: 0;\n}\n.pm-error-container {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  padding: 60px 24px;\n  text-align: center;\n}\n.pm-error-icon {\n  width: 64px;\n  height: 64px;\n  background: #E74C3C;\n  border-radius: 50%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  margin-bottom: 20px;\n  color: white;\n}\n.pm-error-icon svg {\n  width: 32px;\n  height: 32px;\n}\n.pm-error-title {\n  font-size: 24px;\n  font-weight: 600;\n  color: var(--pm-text, #000000);\n  margin: 0 0 8px;\n}\n.pm-error-text {\n  font-size: 16px;\n  color: var(--pm-text-secondary, #666666);\n  margin: 0 0 24px;\n  max-width: 300px;\n}\n.pm-error-actions {\n  display: flex;\n  flex-direction: column;\n  gap: 12px;\n  width: 100%;\n  max-width: 280px;\n}\n.pm-error-inline {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  height: 100%;\n  padding: 40px 20px;\n  text-align: center;\n  color: #E74C3C;\n}\n.pm-error-inline svg {\n  width: 48px;\n  height: 48px;\n  margin-bottom: 16px;\n}\n.pm-error-inline p {\n  margin: 0 0 20px;\n  color: var(--pm-text-secondary, #666666);\n  font-size: 14px;\n}\n.pm-btn-outline {\n  background: transparent;\n  color: #0098EA;\n  border: 1px solid #0098EA;\n}\n.pm-btn-outline:hover {\n  background: rgba(0, 152, 234, 0.08);\n}\n.pm-loading-container {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  height: 100%;\n  color: var(--pm-text-muted, #6b7280);\n}\n.pm-loading-container p {\n  margin: 16px 0 0;\n  font-size: 14px;\n}\n.pm-loading-overlay {\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background: var(--pm-iframe-bg, #f9f9f9);\n  z-index: 1;\n}\n.pm-spinner {\n  width: 32px;\n  height: 32px;\n  border: 3px solid var(--pm-spinner-track, #E5E7EB);\n  border-top-color: #0098EA;\n  border-radius: 50%;\n  animation: pm-spin 0.8s linear infinite;\n}\n@keyframes pm-spin {\n  to {\n    transform: rotate(360deg);\n  }\n}\n');
+styleInject2('.pm-content {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  width: 100%;\n  font-family: "Inter", sans-serif;\n  color: #000000;\n  --pm-bg: #FFFFFF;\n  --pm-text: #000000;\n  --pm-text-secondary: #666666;\n  --pm-text-muted: #8C8C8C;\n  --pm-border: rgba(0, 0, 0, 0.1);\n  --pm-order-bg: #E9F5FA;\n  --pm-order-border: rgba(0, 100, 153, 0.03);\n  --pm-order-text: #004062;\n  --pm-hover-bg: #F9F9F9;\n  --pm-iframe-bg: #f9f9f9;\n  --pm-spinner-track: #E5E7EB;\n}\n@media (prefers-color-scheme: dark) {\n  .pm-content {\n    color: #FFFFFF;\n    --pm-bg: #1f2937;\n    --pm-text: #FFFFFF;\n    --pm-text-secondary: #9CA3AF;\n    --pm-text-muted: #6B7280;\n    --pm-border: rgba(255, 255, 255, 0.1);\n    --pm-order-bg: rgba(0, 152, 234, 0.15);\n    --pm-order-border: rgba(0, 152, 234, 0.2);\n    --pm-order-text: #7DD3FC;\n    --pm-hover-bg: rgba(255, 255, 255, 0.05);\n    --pm-iframe-bg: #111827;\n    --pm-spinner-track: #374151;\n  }\n}\n.pm-header {\n  display: flex;\n  flex-direction: row;\n  justify-content: space-between;\n  align-items: center;\n  width: 100%;\n  padding: 16px;\n  box-sizing: border-box;\n  position: relative;\n}\n.bottom-sheet .pm-header {\n  padding: 0 16px;\n}\n.pm-header-left,\n.pm-header-right {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  min-width: 40px;\n}\n.pm-header-right {\n  justify-content: flex-end;\n}\n.pm-title {\n  font-weight: 600;\n  font-size: 18px;\n  line-height: 22px;\n  text-align: center;\n  flex: 1;\n}\n.pm-close-btn,\n.pm-back-btn {\n  background: none;\n  border: none;\n  cursor: pointer;\n  padding: 4px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: var(--pm-text, #000000);\n  opacity: 0.6;\n}\n.pm-close-btn:hover,\n.pm-back-btn:hover {\n  opacity: 1;\n}\n.pm-body-main {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  width: 100%;\n  padding: 0;\n  gap: 0;\n  box-sizing: border-box;\n}\n.pm-main-container {\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n  width: 100%;\n  padding: 0 16px;\n}\n.pm-main-title {\n  font-size: 18px;\n  font-weight: 600;\n  line-height: 20px;\n  text-align: center;\n  margin: 0 0 8px;\n  color: var(--pm-text, #000000);\n}\n.pm-amount-container {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: 4px;\n  margin-bottom: 16px;\n}\n.pm-amount-label {\n  font-weight: 500;\n  font-size: 12px;\n  line-height: 15px;\n  color: var(--pm-text-muted, #8C8C8C);\n}\n.pm-amount-value {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  font-weight: 600;\n  font-size: 24px;\n  line-height: 29px;\n  color: var(--pm-text, #000000);\n}\n.pm-order-info {\n  display: flex;\n  flex-direction: row;\n  justify-content: center;\n  align-items: center;\n  width: 100%;\n  height: 36px;\n  padding: 8px 16px;\n  margin-bottom: 24px;\n  gap: 4px;\n  background: #E9F5FA;\n  border-radius: 9px;\n  box-sizing: border-box;\n  border: none;\n}\n.pm-order-text {\n  font-family: "Inter", sans-serif;\n  font-style: normal;\n  font-weight: 400;\n  font-size: 12px;\n  line-height: 15px;\n  text-align: center;\n  color: #004062;\n  flex: none;\n}\n.pm-info-icon {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 20px;\n  height: 20px;\n  cursor: help;\n  opacity: 1;\n}\n.pm-info-icon:hover {\n  opacity: 1;\n}\n.pm-actions-card {\n  width: 100%;\n  background: #F9F9F9;\n  border-top: 1px solid hsl(0, 0%, 92%);\n  padding: 16px;\n  box-sizing: border-box;\n}\n@media (prefers-color-scheme: dark) {\n  .pm-actions-card {\n    background: var(--pm-hover-bg, rgba(255, 255, 255, 0.05));\n  }\n}\n.pm-actions {\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n  width: 100%;\n}\n.pm-btn {\n  display: flex;\n  flex-direction: row;\n  justify-content: center;\n  align-items: center;\n  padding: 13px 10px;\n  gap: 4px;\n  width: 100%;\n  height: 44px;\n  border-radius: 8px;\n  border: none;\n  cursor: pointer;\n  font-weight: 500;\n  font-size: 14px;\n  line-height: 19px;\n  transition: opacity 0.2s;\n}\n.pm-btn:hover {\n  opacity: 0.9;\n}\n.pm-btn-primary {\n  background: #0098EA;\n  color: #FFFFFF;\n}\n.pm-btn-black {\n  background: #000000;\n  color: #FFFFFF;\n}\n.pm-btn.processing {\n  background: #E6E6E6;\n  color: #7A7A7A;\n  cursor: default;\n}\n.pm-btn.processing:hover {\n  opacity: 1;\n}\n.pm-footer {\n  display: flex;\n  flex-direction: row;\n  justify-content: center;\n  align-items: center;\n  gap: 8px;\n  margin-top: 12px;\n  font-size: 12px;\n  line-height: 15px;\n}\n.pm-footer-text {\n  color: var(--pm-text-muted, #808080);\n}\n.pm-footer-link {\n  color: #0098EA;\n  cursor: pointer;\n  text-decoration: none;\n}\n.pm-footer-link:hover {\n  text-decoration: underline;\n}\n.pm-desktop-overlay {\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  background: rgba(0, 0, 0, 0.44);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  z-index: 1000;\n  animation: fadeIn 0.2s ease-out;\n}\n.pm-desktop-modal {\n  width: 100%;\n  max-width: 414px;\n  margin: 16px;\n  background: var(--pm-bg, #FFFFFF);\n  border-radius: 32px;\n  box-shadow: 0px 4px 24px rgba(0, 0, 0, 0.25);\n  overflow: hidden;\n  position: relative;\n  animation: scaleIn 0.2s ease-out;\n}\n@media (prefers-color-scheme: dark) {\n  .pm-desktop-modal {\n    box-shadow: 0px 4px 32px rgba(0, 0, 0, 0.5);\n  }\n}\n@keyframes scaleIn {\n  from {\n    transform: scale(0.95);\n    opacity: 0;\n  }\n  to {\n    transform: scale(1);\n    opacity: 1;\n  }\n}\n.pm-iframe-container {\n  width: 100%;\n  height: 100%;\n  min-height: 400px;\n  display: flex;\n  flex-direction: column;\n  background: var(--pm-iframe-bg, #f9f9f9);\n  position: relative;\n}\n.pm-iframe-container iframe {\n  flex: 1;\n  width: 100%;\n  height: 100%;\n  border: none;\n  display: block;\n}\n.pm-menu-dropdown {\n  position: absolute;\n  top: 100%;\n  right: 0;\n  background: var(--pm-bg, #FFFFFF);\n  border: 1px solid var(--pm-border, rgba(0, 0, 0, 0.1));\n  border-radius: 8px;\n  box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.15);\n  z-index: 1001;\n  min-width: 150px;\n  overflow: hidden;\n}\n@media (prefers-color-scheme: dark) {\n  .pm-menu-dropdown {\n    box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.4);\n  }\n}\n.pm-menu-item {\n  padding: 10px 16px;\n  font-size: 14px;\n  cursor: pointer;\n  color: var(--pm-text, #000000);\n}\n.pm-menu-item:hover {\n  background: var(--pm-hover-bg, #F9F9F9);\n}\n.pm-menu-item.danger {\n  color: #E74C3C;\n}\n.pm-menu-item.disabled {\n  cursor: default;\n  color: var(--pm-text-muted, #8C8C8C);\n}\n.pm-menu-item.disabled:hover {\n  background: transparent;\n}\n.icon-moonpay {\n  background: #7D00FF;\n  color: white;\n}\n.icon-onramper {\n  background: #000000;\n  color: white;\n}\n.icon-transak {\n  background:\n    linear-gradient(\n      120deg,\n      #348BED 22.91%,\n      #2B80E8 36.09%,\n      #1461DB 60.25%,\n      #0E57D7 66.11%);\n  color: white;\n}\n.icon-mercurio {\n  background: #000000;\n  color: white;\n}\n.pm-success-container {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  padding: 60px 24px;\n  text-align: center;\n}\n.pm-success-icon {\n  width: 64px;\n  height: 64px;\n  background: #0098EA;\n  border-radius: 50%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  margin-bottom: 20px;\n  color: white;\n}\n.pm-success-icon svg {\n  width: 32px;\n  height: 32px;\n}\n.pm-success-title {\n  font-size: 24px;\n  font-weight: 600;\n  color: var(--pm-text, #000000);\n  margin: 0 0 8px;\n}\n.pm-success-text {\n  font-size: 16px;\n  color: var(--pm-text-secondary, #666666);\n  margin: 0;\n}\n.pm-error-container {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  padding: 60px 24px;\n  text-align: center;\n}\n.pm-error-icon {\n  width: 64px;\n  height: 64px;\n  background: #E74C3C;\n  border-radius: 50%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  margin-bottom: 20px;\n  color: white;\n}\n.pm-error-icon svg {\n  width: 32px;\n  height: 32px;\n}\n.pm-error-title {\n  font-size: 24px;\n  font-weight: 600;\n  color: var(--pm-text, #000000);\n  margin: 0 0 8px;\n}\n.pm-error-text {\n  font-size: 16px;\n  color: var(--pm-text-secondary, #666666);\n  margin: 0 0 24px;\n  max-width: 300px;\n}\n.pm-error-actions {\n  display: flex;\n  flex-direction: column;\n  gap: 12px;\n  width: 100%;\n  max-width: 280px;\n}\n.pm-error-inline {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  height: 100%;\n  padding: 40px 20px;\n  text-align: center;\n  color: #E74C3C;\n}\n.pm-error-inline svg {\n  width: 48px;\n  height: 48px;\n  margin-bottom: 16px;\n}\n.pm-error-inline p {\n  margin: 0 0 20px;\n  color: var(--pm-text-secondary, #666666);\n  font-size: 14px;\n}\n.pm-btn-outline {\n  background: transparent;\n  color: #0098EA;\n  border: 1px solid #0098EA;\n}\n.pm-btn-outline:hover {\n  background: rgba(0, 152, 234, 0.08);\n}\n.pm-loading-container {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  height: 100%;\n  color: var(--pm-text-muted, #6b7280);\n}\n.pm-loading-container p {\n  margin: 16px 0 0;\n  font-size: 14px;\n}\n.pm-loading-overlay {\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background: var(--pm-iframe-bg, #f9f9f9);\n  z-index: 1;\n}\n.pm-spinner {\n  width: 32px;\n  height: 32px;\n  border: 3px solid var(--pm-spinner-track, #E5E7EB);\n  border-top-color: #0098EA;\n  border-radius: 50%;\n  animation: pm-spin 0.8s linear infinite;\n}\n.pm-btn-spinner {\n  width: 16px;\n  height: 16px;\n  border: 2px solid rgba(122, 122, 122, 0.3);\n  border-top-color: #7A7A7A;\n  border-radius: 50%;\n  animation: pm-spin 0.8s linear infinite;\n}\n@keyframes pm-spin {\n  to {\n    transform: rotate(360deg);\n  }\n}\n.pm-retry-link {\n  font-family: "Inter Variable", sans-serif;\n  font-style: normal;\n  font-weight: 400;\n  font-size: 12px;\n  line-height: 15px;\n  text-align: center;\n  color: #004062;\n  margin-top: 0px;\n}\n.pm-retry-action {\n  cursor: pointer;\n  text-decoration: underline;\n  color: #0098EA;\n}\n');
 
 // src/components/payment-modal/PaymentModal.tsx
 import { Fragment, jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
@@ -843,12 +924,13 @@ var PaymentModal = ({
   onPayWithCrypto,
   amount = "0.1",
   currency = "TON",
-  itemTitle = "Pay to Guitar from Demo Store",
+  itemTitle = "Item",
   walletAddress,
   onDisconnect,
   fetchOnRampLink,
   onRampAvailable = false,
-  onPaymentSuccess
+  onPaymentSuccess,
+  isLoading = false
 }) => {
   const [view, setView] = useState2("main");
   const [isMobile, setIsMobile] = useState2(false);
@@ -972,6 +1054,10 @@ var PaymentModal = ({
   useEffect2(() => {
     if (!isMobile || !isOpen) return;
     const updateHeight = () => {
+      if (view === "card") {
+        setSheetDetent([0.9]);
+        return;
+      }
       if (contentRef.current) {
         const height = contentRef.current.scrollHeight;
         const windowHeight = window.innerHeight;
@@ -997,9 +1083,9 @@ var PaymentModal = ({
     handlePaymentError("Failed to load payment service. Please try again.");
   };
   const renderHeader = () => /* @__PURE__ */ jsxs4("div", { className: "pm-header", children: [
-    view !== "main" ? /* @__PURE__ */ jsx5("button", { className: "pm-back-btn", onClick: handleBack, children: /* @__PURE__ */ jsx5(BackIcon, {}) }) : /* @__PURE__ */ jsx5("div", { style: { width: 32 } }),
-    /* @__PURE__ */ jsx5("div", { className: "pm-title", children: "New Purchase" }),
-    /* @__PURE__ */ jsxs4("div", { style: { display: "flex", gap: 8 }, children: [
+    /* @__PURE__ */ jsx5("div", { className: "pm-header-left", children: view !== "main" ? /* @__PURE__ */ jsx5("button", { className: "pm-back-btn", onClick: handleBack, children: /* @__PURE__ */ jsx5(BackIcon, {}) }) : /* @__PURE__ */ jsx5(TonPayLogo, {}) }),
+    view !== "main" && /* @__PURE__ */ jsx5("div", { className: "pm-title", children: "New Purchase" }),
+    /* @__PURE__ */ jsxs4("div", { className: "pm-header-right", children: [
       walletAddress && view === "main" && /* @__PURE__ */ jsxs4("div", { style: { position: "relative" }, children: [
         /* @__PURE__ */ jsx5("button", { className: "pm-close-btn", onClick: () => setShowMenu(!showMenu), children: /* @__PURE__ */ jsx5(MenuIcon, {}) }),
         showMenu && /* @__PURE__ */ jsxs4("div", { className: "pm-menu-dropdown", children: [
@@ -1021,29 +1107,60 @@ var PaymentModal = ({
           )
         ] })
       ] }),
-      /* @__PURE__ */ jsx5("button", { className: "pm-close-btn", onClick: onClose, children: /* @__PURE__ */ jsx5(CloseIcon, {}) })
+      /* @__PURE__ */ jsx5("button", { className: "pm-close-btn", onClick: onClose, children: /* @__PURE__ */ jsx5(CloseIcon, { size: 32 }) })
     ] })
   ] });
   const renderMainView = () => /* @__PURE__ */ jsxs4("div", { className: "pm-body-main", children: [
-    /* @__PURE__ */ jsx5("div", { className: "pm-order-info", children: /* @__PURE__ */ jsx5("span", { className: "pm-order-text", children: itemTitle }) }),
-    /* @__PURE__ */ jsxs4("div", { className: "pm-amount-container", children: [
-      /* @__PURE__ */ jsx5("span", { className: "pm-amount-label", children: "Amount" }),
-      /* @__PURE__ */ jsxs4("div", { className: "pm-amount-value", children: [
-        amount,
-        " ",
-        currency,
-        " ",
-        /* @__PURE__ */ jsx5(TonIconBlue, {})
+    /* @__PURE__ */ jsxs4("div", { className: "pm-main-container", children: [
+      /* @__PURE__ */ jsx5("h2", { className: "pm-main-title", children: "New Purchase" }),
+      /* @__PURE__ */ jsxs4("div", { className: "pm-amount-container", children: [
+        /* @__PURE__ */ jsx5("span", { className: "pm-amount-label", children: "Amount" }),
+        /* @__PURE__ */ jsxs4("div", { className: "pm-amount-value", children: [
+          amount,
+          " ",
+          currency,
+          " ",
+          /* @__PURE__ */ jsx5(TonIconBlue, {})
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs4("div", { className: "pm-order-info", children: [
+        /* @__PURE__ */ jsx5("span", { className: "pm-order-text", children: itemTitle }),
+        /* @__PURE__ */ jsx5("div", { className: "pm-info-icon", children: /* @__PURE__ */ jsx5(InfoIcon, { size: 14, color: "#004062" }) })
       ] })
     ] }),
-    /* @__PURE__ */ jsxs4("div", { className: "pm-actions", children: [
-      /* @__PURE__ */ jsx5("button", { className: "pm-btn pm-btn-primary", onClick: onPayWithCrypto, children: "Pay with Crypto" }),
-      onRampAvailable && /* @__PURE__ */ jsx5("button", { className: "pm-btn pm-btn-black", onClick: () => setView("card"), children: "Pay with Card" })
-    ] }),
-    onRampAvailable && /* @__PURE__ */ jsx5("div", { className: "pm-footer", children: /* @__PURE__ */ jsxs4("span", { className: "pm-footer-text", children: [
-      "Processed by ",
-      PROVIDER.name
-    ] }) })
+    /* @__PURE__ */ jsxs4("div", { className: "pm-actions-card", children: [
+      /* @__PURE__ */ jsxs4("div", { className: "pm-actions", children: [
+        /* @__PURE__ */ jsx5(
+          "button",
+          {
+            className: `pm-btn ${isLoading ? "processing" : "pm-btn-primary"}`,
+            onClick: isLoading ? void 0 : onPayWithCrypto,
+            disabled: isLoading,
+            children: isLoading ? /* @__PURE__ */ jsxs4("div", { style: { display: "flex", alignItems: "center", gap: "4px" }, children: [
+              /* @__PURE__ */ jsx5("div", { className: "pm-btn-spinner" }),
+              /* @__PURE__ */ jsx5("span", { children: "Processing" })
+            ] }) : /* @__PURE__ */ jsxs4("div", { style: { display: "flex", alignItems: "center", gap: "4px" }, children: [
+              /* @__PURE__ */ jsx5(CryptoIcon, {}),
+              /* @__PURE__ */ jsx5("span", { children: "Pay with Crypto" })
+            ] })
+          }
+        ),
+        isLoading && /* @__PURE__ */ jsxs4("div", { className: "pm-retry-link", children: [
+          "Did the wallet fail to open?",
+          " ",
+          /* @__PURE__ */ jsx5("span", { className: "pm-retry-action", onClick: onPayWithCrypto, children: "Click here" }),
+          "."
+        ] }),
+        onRampAvailable && !isLoading && /* @__PURE__ */ jsxs4("button", { className: "pm-btn pm-btn-black", onClick: () => setView("card"), children: [
+          /* @__PURE__ */ jsx5(CardIcon, {}),
+          /* @__PURE__ */ jsx5("span", { children: "Pay with Card" })
+        ] })
+      ] }),
+      onRampAvailable && !isLoading && /* @__PURE__ */ jsx5("div", { className: "pm-footer", children: /* @__PURE__ */ jsxs4("span", { className: "pm-footer-text", children: [
+        "Processed by ",
+        PROVIDER.name
+      ] }) })
+    ] })
   ] });
   const renderCardView = () => /* @__PURE__ */ jsxs4("div", { className: "pm-iframe-container", children: [
     isOnRampLoading && /* @__PURE__ */ jsxs4("div", { className: "pm-loading-container", children: [
@@ -1091,13 +1208,20 @@ var PaymentModal = ({
       /* @__PURE__ */ jsx5("button", { className: "pm-btn pm-btn-outline", onClick: onPayWithCrypto, children: "Pay with Crypto Instead" })
     ] })
   ] });
-  const renderContent = () => /* @__PURE__ */ jsxs4("div", { className: "pm-content", children: [
-    view !== "success" && view !== "error" && renderHeader(),
-    view === "main" && renderMainView(),
-    view === "card" && renderCardView(),
-    view === "success" && renderSuccessView(),
-    view === "error" && renderErrorView()
-  ] });
+  const renderContent = () => /* @__PURE__ */ jsxs4(
+    "div",
+    {
+      className: "pm-content",
+      style: { height: view === "card" ? "100%" : "auto" },
+      children: [
+        view !== "success" && view !== "error" && renderHeader(),
+        view === "main" && renderMainView(),
+        view === "card" && renderCardView(),
+        view === "success" && renderSuccessView(),
+        view === "error" && renderErrorView()
+      ]
+    }
+  );
   if (isMobile) {
     return /* @__PURE__ */ jsx5(
       BottomSheet_default,
@@ -1107,7 +1231,14 @@ var PaymentModal = ({
         detents: sheetDetent,
         initialDetent: 0,
         enableSwipeToClose: view === "main",
-        children: /* @__PURE__ */ jsx5("div", { ref: contentRef, children: renderContent() })
+        children: /* @__PURE__ */ jsx5(
+          "div",
+          {
+            ref: contentRef,
+            style: { height: view === "card" ? "100%" : "auto" },
+            children: renderContent()
+          }
+        )
       }
     );
   }
@@ -1309,11 +1440,15 @@ var buttonStyles = `
 .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;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}
 .tp-btn.loading{animation:none}
+.tp-btn.processing{background:#E6E6E6;color:#7A7A7A;cursor:default;opacity:1}
+.tp-btn.processing .tp-spinner{border-color:rgba(122,122,122,0.3);border-top-color:#7A7A7A}
+
+.tp-retry-text{font-weight:400;font-size:12px;line-height:15px;text-align:center;color:#004062;margin-top:8px}
+.tp-retry-link{cursor:pointer;text-decoration:underline;color:#0098EA}
 
 .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}
 .tp-arrow:hover:not(:disabled){filter:brightness(0.92)}
@@ -1375,11 +1510,15 @@ var TonPayButton = ({
 }) => {
   const address = useTonAddress(true);
   const [tonConnectUI] = useTonConnectUI();
+  const [showMenu, setShowMenu] = useState4(false);
   const [isModalOpen, setIsModalOpen] = useState4(false);
   const [onRampAvailable, setOnRampAvailable] = useState4(false);
   const [errorMessage, setErrorMessage] = useState4(null);
   const [internalLoading, setInternalLoading] = useState4(false);
   const [userIp, setUserIp] = useState4("");
+  const [redirectToWallet, setRedirectToWallet] = useState4(
+    null
+  );
   const { checkAvailability, fetchOnRampLink } = useMoonPayIframe({
     apiKey,
     chain: "mainnet"
@@ -1419,13 +1558,22 @@ var TonPayButton = ({
       isActive = false;
     };
   }, [apiKey, amount, currency, isOnRampAvailable, checkAvailability, userIp]);
+  useEffect3(() => {
+    const handleClickOutside = (event) => {
+      if (showMenu && !event.target.closest(".tp-wrap")) {
+        setShowMenu(false);
+      }
+    };
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => document.removeEventListener("mousedown", handleClickOutside);
+  }, [showMenu]);
   const handleDisconnect = useCallback4(() => {
     tonConnectUI.disconnect();
   }, [tonConnectUI]);
   const handlePayWithCrypto = useCallback4(async () => {
-    setIsModalOpen(false);
     try {
-      await handlePay();
+      setRedirectToWallet(null);
+      await handlePay((redirect) => setRedirectToWallet(() => redirect));
     } catch (err) {
       onError?.(err);
       if (showErrorNotification) {
@@ -1441,6 +1589,9 @@ var TonPayButton = ({
       handlePayWithCrypto();
     }
   }, [onRampAvailable, handlePayWithCrypto]);
+  const handleRetry = useCallback4(() => {
+    handlePayWithCrypto();
+  }, [handlePayWithCrypto]);
   const handleFetchOnRampLink = useCallback4(
     async (_providerId) => {
       return fetchOnRampLink({
@@ -1465,6 +1616,7 @@ var TonPayButton = ({
     "--tp-height": toCssSize(height)
   };
   const isDisabled = isLoading || disabled || internalLoading;
+  const showDropdown = !onRampAvailable && !!address && !isLoading;
   const renderContent = () => {
     if (text) return /* @__PURE__ */ jsx6("span", { children: text });
     if (variant === "short") {
@@ -1485,19 +1637,74 @@ var TonPayButton = ({
       style: { ...cssVars, ...style },
       className: classNames("tp-wrap", className),
       children: [
-        /* @__PURE__ */ jsx6("div", { className: "tp-btn-container", children: /* @__PURE__ */ jsx6(
-          "button",
-          {
-            type: "button",
-            className: classNames("tp-btn", isLoading && "loading", "no-menu"),
-            onClick: isDisabled ? void 0 : onPayClick,
-            disabled: isDisabled,
-            children: isLoading ? /* @__PURE__ */ jsxs5("div", { className: "tp-btn-content", children: [
-              /* @__PURE__ */ jsx6("span", { className: "tp-spinner" }),
-              /* @__PURE__ */ jsx6("span", { children: loadingText })
-            ] }) : renderContent()
-          }
-        ) }),
+        /* @__PURE__ */ jsxs5("div", { className: "tp-btn-container", children: [
+          /* @__PURE__ */ jsx6(
+            "button",
+            {
+              type: "button",
+              className: classNames(
+                "tp-btn",
+                isLoading && "processing",
+                isLoading && "loading",
+                showDropdown ? "with-menu" : "no-menu"
+              ),
+              onClick: isDisabled ? void 0 : onPayClick,
+              disabled: isDisabled,
+              children: isLoading ? /* @__PURE__ */ jsxs5("div", { className: "tp-btn-content", children: [
+                /* @__PURE__ */ jsx6("span", { className: "tp-spinner" }),
+                /* @__PURE__ */ jsx6("span", { children: loadingText })
+              ] }) : renderContent()
+            }
+          ),
+          showDropdown && /* @__PURE__ */ jsx6(
+            "button",
+            {
+              type: "button",
+              className: "tp-arrow",
+              onClick: (e) => {
+                e.stopPropagation();
+                setShowMenu(!showMenu);
+              },
+              disabled: isDisabled,
+              children: "\u25BC"
+            }
+          )
+        ] }),
+        isLoading && /* @__PURE__ */ jsxs5("div", { className: "tp-retry-text", children: [
+          "Did the wallet fail to open?",
+          " ",
+          /* @__PURE__ */ jsx6(
+            "span",
+            {
+              className: "tp-retry-link",
+              onClick: () => redirectToWallet ? redirectToWallet() : handleRetry(),
+              children: "Click here"
+            }
+          ),
+          "."
+        ] }),
+        showMenu && showDropdown && /* @__PURE__ */ jsxs5("div", { className: "tp-menu", children: [
+          /* @__PURE__ */ jsx6("div", { className: "tp-menu-arrow" }),
+          /* @__PURE__ */ jsxs5("div", { className: "tp-menu-address", children: [
+            address?.slice(0, 4),
+            "...",
+            address?.slice(-4)
+          ] }),
+          /* @__PURE__ */ jsxs5(
+            "button",
+            {
+              className: "tp-menu-item danger",
+              onClick: () => {
+                handleDisconnect();
+                setShowMenu(false);
+              },
+              children: [
+                /* @__PURE__ */ jsx6("div", { className: "tp-menu-icon", children: /* @__PURE__ */ jsx6(DisconnectIcon, { size: 16 }) }),
+                /* @__PURE__ */ jsx6("span", { children: "Disconnect" })
+              ]
+            }
+          )
+        ] }),
         /* @__PURE__ */ jsx6(
           PaymentModal,
           {
@@ -1511,7 +1718,8 @@ var TonPayButton = ({
             itemTitle,
             fetchOnRampLink: handleFetchOnRampLink,
             onRampAvailable,
-            onPaymentSuccess: onCardPaymentSuccess
+            onPaymentSuccess: onCardPaymentSuccess,
+            isLoading
           }
         ),
         errorMessage && /* @__PURE__ */ jsx6(NotificationRoot, { children: /* @__PURE__ */ jsx6(ErrorTransactionNotification, { text: errorMessage }) })
@@ -1562,15 +1770,20 @@ function useTonPay() {
     });
   }, [address, modal, tonConnectUI]);
   const pay = React8.useCallback(
-    async (getMessage) => {
+    async (getMessage, options) => {
       const walletAddress = await waitForWalletConnection();
       const validUntil = Math.floor(Date.now() / 1e3) + TX_VALID_DURATION;
       const messageResult = await getMessage(walletAddress);
-      const txResult = await tonConnectUI.sendTransaction({
-        messages: [messageResult.message],
-        validUntil,
-        from: walletAddress
-      });
+      const txResult = await tonConnectUI.sendTransaction(
+        {
+          messages: [messageResult.message],
+          validUntil,
+          from: walletAddress
+        },
+        {
+          onRequestSent: options?.onRequestSent
+        }
+      );
       return { ...messageResult, txResult };
     },
     [waitForWalletConnection, tonConnectUI]