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

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
  1. package/dist/index.d.mts +5 -2
  2. package/dist/index.d.ts +5 -2
  3. package/dist/index.js +265 -76
  4. package/dist/index.js.map +1 -1
  5. package/dist/index.mjs +259 -70
  6. package/dist/index.mjs.map +1 -1
  7. package/package.json +1 -1
package/dist/index.js CHANGED
@@ -30,7 +30,7 @@ var TonIcon = ({ size = 24, className }) => /* @__PURE__ */ _jsxruntime.jsxs.cal
30
30
  {
31
31
  width: size,
32
32
  height: size,
33
- viewBox: "0 0 24 24",
33
+ viewBox: "0 0 24 26",
34
34
  fill: "none",
35
35
  xmlns: "http://www.w3.org/2000/svg",
36
36
  className,
@@ -59,7 +59,7 @@ var TonIcon = ({ size = 24, className }) => /* @__PURE__ */ _jsxruntime.jsxs.cal
59
59
  }
60
60
  )
61
61
  ] }),
62
- /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "defs", { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "clipPath", { id: "ton-icon-clip", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "rect", { width: "24", height: "24", fill: "white" }) }) })
62
+ /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "defs", { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "clipPath", { id: "ton-icon-clip", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "rect", { width: "24", height: "26", fill: "white" }) }) })
63
63
  ]
64
64
  }
65
65
  );
@@ -91,7 +91,7 @@ var TonIconBlue = ({ size = 24, className }) => /* @__PURE__ */ _jsxruntime.jsxs
91
91
  ]
92
92
  }
93
93
  );
94
- var CloseIcon = ({
94
+ var DisconnectIcon = ({
95
95
  size = 24,
96
96
  color = "currentColor",
97
97
  className
@@ -109,26 +109,41 @@ var CloseIcon = ({
109
109
  /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
110
110
  "path",
111
111
  {
112
- d: "M18 6L6 18",
113
- stroke: color,
114
- strokeWidth: "2",
115
- strokeLinecap: "round",
116
- strokeLinejoin: "round"
112
+ 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",
113
+ fill: color
117
114
  }
118
115
  ),
119
116
  /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
120
117
  "path",
121
118
  {
122
- d: "M6 6L18 18",
123
- stroke: color,
124
- strokeWidth: "2",
125
- strokeLinecap: "round",
126
- strokeLinejoin: "round"
119
+ 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",
120
+ fill: color
127
121
  }
128
122
  )
129
123
  ]
130
124
  }
131
125
  );
126
+ var CloseIcon = ({
127
+ size = 24,
128
+ color = "currentColor",
129
+ className
130
+ }) => /* @__PURE__ */ _jsxruntime.jsxs.call(void 0,
131
+ "svg",
132
+ {
133
+ width: size,
134
+ height: size,
135
+ viewBox: "0 0 32 32",
136
+ fill: "none",
137
+ xmlns: "http://www.w3.org/2000/svg",
138
+ className,
139
+ "aria-hidden": true,
140
+ children: [
141
+ /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "rect", { width: "32", height: "32", rx: "8", fill: "#F4F4F4" }),
142
+ /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "path", { d: "M8.99933 22.251L22.2501 9.00026", stroke: "#7A7A7A", strokeWidth: "1.5", strokeLinecap: "round" }),
143
+ /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "path", { d: "M8.99933 9.08296L22.2501 22.3337", stroke: "#7A7A7A", strokeWidth: "1.5", strokeLinecap: "round" })
144
+ ]
145
+ }
146
+ );
132
147
  var BackIcon = ({
133
148
  size = 24,
134
149
  color = "currentColor",
@@ -258,6 +273,51 @@ var ErrorDotIcon = ({
258
273
  ]
259
274
  }
260
275
  );
276
+ var CardIcon = ({
277
+ size = 20,
278
+ className
279
+ }) => /* @__PURE__ */ _jsxruntime.jsxs.call(void 0,
280
+ "svg",
281
+ {
282
+ width: size,
283
+ height: size,
284
+ viewBox: "0 0 20 20",
285
+ fill: "none",
286
+ xmlns: "http://www.w3.org/2000/svg",
287
+ className,
288
+ "aria-hidden": true,
289
+ children: [
290
+ /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "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" }),
291
+ /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "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" })
292
+ ]
293
+ }
294
+ );
295
+ var CryptoIcon = ({
296
+ size = 20,
297
+ className
298
+ }) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
299
+ "svg",
300
+ {
301
+ width: size,
302
+ height: size,
303
+ viewBox: "0 0 20 20",
304
+ fill: "none",
305
+ xmlns: "http://www.w3.org/2000/svg",
306
+ className,
307
+ "aria-hidden": true,
308
+ children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "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" })
309
+ }
310
+ );
311
+ var TonPayLogo = ({ className }) => /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className, style: { display: "flex", alignItems: "center", gap: "4px" }, children: [
312
+ /* @__PURE__ */ _jsxruntime.jsx.call(void 0, TonIconBlue, { size: 26 }),
313
+ /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { style: {
314
+ fontWeight: 600,
315
+ fontSize: "18px",
316
+ lineHeight: "24px",
317
+ color: "#000000",
318
+ letterSpacing: "-0.5px"
319
+ }, children: "Pay" })
320
+ ] });
261
321
 
262
322
  // src/components/notification/Notification.tsx
263
323
 
@@ -831,7 +891,7 @@ var BottomSheet_default = BottomSheet;
831
891
 
832
892
  // src/components/payment-modal/PaymentModal.css
833
893
 
834
- _styleinject2.default.call(void 0, '.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');
894
+ _styleinject2.default.call(void 0, '.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 --pm-actions-border: hsl(0, 0%, 92%);\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(255, 255, 255, 0.05);\n --pm-order-border: rgba(255, 255, 255, 0.1);\n --pm-order-text: #FFFFFF;\n --pm-hover-bg: rgba(255, 255, 255, 0.05);\n --pm-iframe-bg: #111827;\n --pm-spinner-track: #374151;\n --pm-actions-border: rgba(255, 255, 255, 0.1);\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: var(--pm-order-bg, #E9F5FA);\n border-radius: 9px;\n box-sizing: border-box;\n border: 1px solid var(--pm-order-border, rgba(0, 100, 153, 0.03));\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: var(--pm-order-text, #004062);\n flex: none;\n}\n.pm-actions-card {\n width: 100%;\n background: #F9F9F9;\n border-top: 1px solid var(--pm-actions-border, 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 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", 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@media (prefers-color-scheme: dark) {\n .pm-header-left span {\n color: #ffffff !important;\n }\n .pm-close-btn svg rect {\n fill: rgba(255, 255, 255, 0.1) !important;\n }\n .pm-close-btn svg path {\n stroke: #ffffff !important;\n }\n .pm-retry-link {\n color: var(--pm-text-muted, #8C8C8C) !important;\n }\n .pm-btn.processing {\n background: rgba(255, 255, 255, 0.1) !important;\n color: var(--pm-text-muted, #8C8C8C) !important;\n }\n}\n');
835
895
 
836
896
  // src/components/payment-modal/PaymentModal.tsx
837
897
 
@@ -843,12 +903,13 @@ var PaymentModal = ({
843
903
  onPayWithCrypto,
844
904
  amount = "0.1",
845
905
  currency = "TON",
846
- itemTitle = "Pay to Guitar from Demo Store",
906
+ itemTitle,
847
907
  walletAddress,
848
908
  onDisconnect,
849
909
  fetchOnRampLink,
850
910
  onRampAvailable = false,
851
- onPaymentSuccess
911
+ onPaymentSuccess,
912
+ isLoading = false
852
913
  }) => {
853
914
  const [view, setView] = _react.useState.call(void 0, "main");
854
915
  const [isMobile, setIsMobile] = _react.useState.call(void 0, false);
@@ -972,11 +1033,15 @@ var PaymentModal = ({
972
1033
  _react.useEffect.call(void 0, () => {
973
1034
  if (!isMobile || !isOpen) return;
974
1035
  const updateHeight = () => {
1036
+ if (view === "card") {
1037
+ setSheetDetent((prev) => prev[0] === 0.9 ? prev : [0.9]);
1038
+ return;
1039
+ }
975
1040
  if (contentRef.current) {
976
1041
  const height = contentRef.current.scrollHeight;
977
1042
  const windowHeight = window.innerHeight;
978
1043
  const detent = Math.min((height + 40) / windowHeight, 0.95);
979
- setSheetDetent([detent]);
1044
+ setSheetDetent((prev) => Math.abs(prev[0] - detent) < 0.01 ? prev : [detent]);
980
1045
  }
981
1046
  };
982
1047
  setTimeout(updateHeight, 50);
@@ -997,9 +1062,9 @@ var PaymentModal = ({
997
1062
  handlePaymentError("Failed to load payment service. Please try again.");
998
1063
  };
999
1064
  const renderHeader = () => /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "pm-header", children: [
1000
- view !== "main" ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "button", { className: "pm-back-btn", onClick: handleBack, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, BackIcon, {}) }) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { style: { width: 32 } }),
1001
- /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "pm-title", children: "New Purchase" }),
1002
- /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { style: { display: "flex", gap: 8 }, children: [
1065
+ /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "pm-header-left", children: view !== "main" ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "button", { className: "pm-back-btn", onClick: handleBack, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, BackIcon, {}) }) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, TonPayLogo, {}) }),
1066
+ view !== "main" && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "pm-title", children: "New Purchase" }),
1067
+ /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "pm-header-right", children: [
1003
1068
  walletAddress && view === "main" && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { style: { position: "relative" }, children: [
1004
1069
  /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "button", { className: "pm-close-btn", onClick: () => setShowMenu(!showMenu), children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, MenuIcon, {}) }),
1005
1070
  showMenu && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "pm-menu-dropdown", children: [
@@ -1021,29 +1086,57 @@ var PaymentModal = ({
1021
1086
  )
1022
1087
  ] })
1023
1088
  ] }),
1024
- /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "button", { className: "pm-close-btn", onClick: onClose, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, CloseIcon, {}) })
1089
+ /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "button", { className: "pm-close-btn", onClick: onClose, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, CloseIcon, { size: 32 }) })
1025
1090
  ] })
1026
1091
  ] });
1027
1092
  const renderMainView = () => /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "pm-body-main", children: [
1028
- /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "pm-order-info", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "pm-order-text", children: itemTitle }) }),
1029
- /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "pm-amount-container", children: [
1030
- /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "pm-amount-label", children: "Amount" }),
1031
- /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "pm-amount-value", children: [
1032
- amount,
1033
- " ",
1034
- currency,
1035
- " ",
1036
- /* @__PURE__ */ _jsxruntime.jsx.call(void 0, TonIconBlue, {})
1037
- ] })
1038
- ] }),
1039
- /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "pm-actions", children: [
1040
- /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "button", { className: "pm-btn pm-btn-primary", onClick: onPayWithCrypto, children: "Pay with Crypto" }),
1041
- onRampAvailable && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "button", { className: "pm-btn pm-btn-black", onClick: () => setView("card"), children: "Pay with Card" })
1093
+ /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "pm-main-container", children: [
1094
+ /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "h2", { className: "pm-main-title", children: "New Purchase" }),
1095
+ /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "pm-amount-container", children: [
1096
+ /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "pm-amount-label", children: "Amount" }),
1097
+ /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "pm-amount-value", children: [
1098
+ amount,
1099
+ " ",
1100
+ currency,
1101
+ " ",
1102
+ /* @__PURE__ */ _jsxruntime.jsx.call(void 0, TonIconBlue, {})
1103
+ ] })
1104
+ ] }),
1105
+ itemTitle && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "pm-order-info", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "pm-order-text", children: itemTitle }) })
1042
1106
  ] }),
1043
- onRampAvailable && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "pm-footer", children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "span", { className: "pm-footer-text", children: [
1044
- "Processed by ",
1045
- PROVIDER.name
1046
- ] }) })
1107
+ /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "pm-actions-card", children: [
1108
+ /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "pm-actions", children: [
1109
+ /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
1110
+ "button",
1111
+ {
1112
+ className: `pm-btn ${isLoading ? "processing" : "pm-btn-primary"}`,
1113
+ onClick: isLoading ? void 0 : onPayWithCrypto,
1114
+ disabled: isLoading,
1115
+ children: isLoading ? /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { style: { display: "flex", alignItems: "center", gap: "4px" }, children: [
1116
+ /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "pm-btn-spinner" }),
1117
+ /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { children: "Processing" })
1118
+ ] }) : /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { style: { display: "flex", alignItems: "center", gap: "4px" }, children: [
1119
+ /* @__PURE__ */ _jsxruntime.jsx.call(void 0, CryptoIcon, {}),
1120
+ /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { children: "Pay with Crypto" })
1121
+ ] })
1122
+ }
1123
+ ),
1124
+ isLoading && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "pm-retry-link", children: [
1125
+ "Did the wallet fail to open?",
1126
+ " ",
1127
+ /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "pm-retry-action", onClick: onPayWithCrypto, children: "Click here" }),
1128
+ "."
1129
+ ] }),
1130
+ onRampAvailable && !isLoading && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "button", { className: "pm-btn pm-btn-black", onClick: () => setView("card"), children: [
1131
+ /* @__PURE__ */ _jsxruntime.jsx.call(void 0, CardIcon, {}),
1132
+ /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { children: "Pay with Card" })
1133
+ ] })
1134
+ ] }),
1135
+ onRampAvailable && !isLoading && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "pm-footer", children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "span", { className: "pm-footer-text", children: [
1136
+ "Processed by ",
1137
+ PROVIDER.name
1138
+ ] }) })
1139
+ ] })
1047
1140
  ] });
1048
1141
  const renderCardView = () => /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "pm-iframe-container", children: [
1049
1142
  isOnRampLoading && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "pm-loading-container", children: [
@@ -1091,13 +1184,20 @@ var PaymentModal = ({
1091
1184
  /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "button", { className: "pm-btn pm-btn-outline", onClick: onPayWithCrypto, children: "Pay with Crypto Instead" })
1092
1185
  ] })
1093
1186
  ] });
1094
- const renderContent = () => /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "pm-content", children: [
1095
- view !== "success" && view !== "error" && renderHeader(),
1096
- view === "main" && renderMainView(),
1097
- view === "card" && renderCardView(),
1098
- view === "success" && renderSuccessView(),
1099
- view === "error" && renderErrorView()
1100
- ] });
1187
+ const renderContent = () => /* @__PURE__ */ _jsxruntime.jsxs.call(void 0,
1188
+ "div",
1189
+ {
1190
+ className: "pm-content",
1191
+ style: { height: view === "card" ? "100%" : "auto" },
1192
+ children: [
1193
+ view !== "success" && view !== "error" && renderHeader(),
1194
+ view === "main" && renderMainView(),
1195
+ view === "card" && renderCardView(),
1196
+ view === "success" && renderSuccessView(),
1197
+ view === "error" && renderErrorView()
1198
+ ]
1199
+ }
1200
+ );
1101
1201
  if (isMobile) {
1102
1202
  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
1103
1203
  BottomSheet_default,
@@ -1107,7 +1207,14 @@ var PaymentModal = ({
1107
1207
  detents: sheetDetent,
1108
1208
  initialDetent: 0,
1109
1209
  enableSwipeToClose: view === "main",
1110
- children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { ref: contentRef, children: renderContent() })
1210
+ children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
1211
+ "div",
1212
+ {
1213
+ ref: contentRef,
1214
+ style: { height: view === "card" ? "100%" : "auto" },
1215
+ children: renderContent()
1216
+ }
1217
+ )
1111
1218
  }
1112
1219
  );
1113
1220
  }
@@ -1309,11 +1416,15 @@ var buttonStyles = `
1309
1416
  .tp-btn.with-menu{padding-left:calc(10px + (var(--tp-height,44px))/2)}
1310
1417
  .tp-btn.no-menu{border-radius:var(--tp-radius,8px)}
1311
1418
  .tp-btn-content{display:flex;flex-direction:row;align-items:center;padding:0;gap:5px;white-space:nowrap;margin-top:-4px}
1312
- .tp-btn-content svg{margin-top:4px}
1313
1419
  .tp-btn:hover:not(:disabled){filter:brightness(0.92)}
1314
1420
  .tp-btn:active:not(:disabled){filter:brightness(0.85);transform:translateY(1px)}
1315
1421
  .tp-btn:disabled{cursor:not-allowed;opacity:.85}
1316
1422
  .tp-btn.loading{animation:none}
1423
+ .tp-btn.processing{background:#E6E6E6;color:#7A7A7A;cursor:default;opacity:1}
1424
+ .tp-btn.processing .tp-spinner{border-color:rgba(122,122,122,0.3);border-top-color:#7A7A7A}
1425
+
1426
+ .tp-retry-text{font-weight:400;font-size:12px;line-height:15px;text-align:center;color:#004062;margin-top:8px}
1427
+ .tp-retry-link{cursor:pointer;text-decoration:underline;color:#0098EA}
1317
1428
 
1318
1429
  .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}
1319
1430
  .tp-arrow:hover:not(:disabled){filter:brightness(0.92)}
@@ -1375,11 +1486,15 @@ var TonPayButton = ({
1375
1486
  }) => {
1376
1487
  const address = _uireact.useTonAddress.call(void 0, true);
1377
1488
  const [tonConnectUI] = _uireact.useTonConnectUI.call(void 0, );
1489
+ const [showMenu, setShowMenu] = _react.useState.call(void 0, false);
1378
1490
  const [isModalOpen, setIsModalOpen] = _react.useState.call(void 0, false);
1379
1491
  const [onRampAvailable, setOnRampAvailable] = _react.useState.call(void 0, false);
1380
1492
  const [errorMessage, setErrorMessage] = _react.useState.call(void 0, null);
1381
1493
  const [internalLoading, setInternalLoading] = _react.useState.call(void 0, false);
1382
1494
  const [userIp, setUserIp] = _react.useState.call(void 0, "");
1495
+ const [redirectToWallet, setRedirectToWallet] = _react.useState.call(void 0,
1496
+ null
1497
+ );
1383
1498
  const { checkAvailability, fetchOnRampLink } = useMoonPayIframe({
1384
1499
  apiKey,
1385
1500
  chain: "mainnet"
@@ -1419,13 +1534,22 @@ var TonPayButton = ({
1419
1534
  isActive = false;
1420
1535
  };
1421
1536
  }, [apiKey, amount, currency, isOnRampAvailable, checkAvailability, userIp]);
1537
+ _react.useEffect.call(void 0, () => {
1538
+ const handleClickOutside = (event) => {
1539
+ if (showMenu && !event.target.closest(".tp-wrap")) {
1540
+ setShowMenu(false);
1541
+ }
1542
+ };
1543
+ document.addEventListener("mousedown", handleClickOutside);
1544
+ return () => document.removeEventListener("mousedown", handleClickOutside);
1545
+ }, [showMenu]);
1422
1546
  const handleDisconnect = _react.useCallback.call(void 0, () => {
1423
1547
  tonConnectUI.disconnect();
1424
1548
  }, [tonConnectUI]);
1425
1549
  const handlePayWithCrypto = _react.useCallback.call(void 0, async () => {
1426
- setIsModalOpen(false);
1427
1550
  try {
1428
- await handlePay();
1551
+ setRedirectToWallet(null);
1552
+ await handlePay((redirect) => setRedirectToWallet(() => redirect));
1429
1553
  } catch (err) {
1430
1554
  _optionalChain([onError, 'optionalCall', _28 => _28(err)]);
1431
1555
  if (showErrorNotification) {
@@ -1441,6 +1565,9 @@ var TonPayButton = ({
1441
1565
  handlePayWithCrypto();
1442
1566
  }
1443
1567
  }, [onRampAvailable, handlePayWithCrypto]);
1568
+ const handleRetry = _react.useCallback.call(void 0, () => {
1569
+ handlePayWithCrypto();
1570
+ }, [handlePayWithCrypto]);
1444
1571
  const handleFetchOnRampLink = _react.useCallback.call(void 0,
1445
1572
  async (_providerId) => {
1446
1573
  return fetchOnRampLink({
@@ -1465,6 +1592,7 @@ var TonPayButton = ({
1465
1592
  "--tp-height": toCssSize(height)
1466
1593
  };
1467
1594
  const isDisabled = isLoading || disabled || internalLoading;
1595
+ const showDropdown = !onRampAvailable && !!address && !isLoading;
1468
1596
  const renderContent = () => {
1469
1597
  if (text) return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { children: text });
1470
1598
  if (variant === "short") {
@@ -1485,19 +1613,74 @@ var TonPayButton = ({
1485
1613
  style: { ...cssVars, ...style },
1486
1614
  className: classNames("tp-wrap", className),
1487
1615
  children: [
1488
- /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "tp-btn-container", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
1489
- "button",
1490
- {
1491
- type: "button",
1492
- className: classNames("tp-btn", isLoading && "loading", "no-menu"),
1493
- onClick: isDisabled ? void 0 : onPayClick,
1494
- disabled: isDisabled,
1495
- children: isLoading ? /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "tp-btn-content", children: [
1496
- /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "tp-spinner" }),
1497
- /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { children: loadingText })
1498
- ] }) : renderContent()
1499
- }
1500
- ) }),
1616
+ /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "tp-btn-container", children: [
1617
+ /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
1618
+ "button",
1619
+ {
1620
+ type: "button",
1621
+ className: classNames(
1622
+ "tp-btn",
1623
+ isLoading && "processing",
1624
+ isLoading && "loading",
1625
+ showDropdown ? "with-menu" : "no-menu"
1626
+ ),
1627
+ onClick: isDisabled ? void 0 : onPayClick,
1628
+ disabled: isDisabled,
1629
+ children: isLoading ? /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "tp-btn-content", children: [
1630
+ /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "tp-spinner" }),
1631
+ /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { children: loadingText })
1632
+ ] }) : renderContent()
1633
+ }
1634
+ ),
1635
+ showDropdown && /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
1636
+ "button",
1637
+ {
1638
+ type: "button",
1639
+ className: "tp-arrow",
1640
+ onClick: (e) => {
1641
+ e.stopPropagation();
1642
+ setShowMenu(!showMenu);
1643
+ },
1644
+ disabled: isDisabled,
1645
+ children: "\u25BC"
1646
+ }
1647
+ )
1648
+ ] }),
1649
+ isLoading && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "tp-retry-text", children: [
1650
+ "Did the wallet fail to open?",
1651
+ " ",
1652
+ /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
1653
+ "span",
1654
+ {
1655
+ className: "tp-retry-link",
1656
+ onClick: () => redirectToWallet ? redirectToWallet() : handleRetry(),
1657
+ children: "Click here"
1658
+ }
1659
+ ),
1660
+ "."
1661
+ ] }),
1662
+ showMenu && showDropdown && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "tp-menu", children: [
1663
+ /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "tp-menu-arrow" }),
1664
+ /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "tp-menu-address", children: [
1665
+ _optionalChain([address, 'optionalAccess', _31 => _31.slice, 'call', _32 => _32(0, 4)]),
1666
+ "...",
1667
+ _optionalChain([address, 'optionalAccess', _33 => _33.slice, 'call', _34 => _34(-4)])
1668
+ ] }),
1669
+ /* @__PURE__ */ _jsxruntime.jsxs.call(void 0,
1670
+ "button",
1671
+ {
1672
+ className: "tp-menu-item danger",
1673
+ onClick: () => {
1674
+ handleDisconnect();
1675
+ setShowMenu(false);
1676
+ },
1677
+ children: [
1678
+ /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "tp-menu-icon", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, DisconnectIcon, { size: 16 }) }),
1679
+ /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { children: "Disconnect" })
1680
+ ]
1681
+ }
1682
+ )
1683
+ ] }),
1501
1684
  /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
1502
1685
  PaymentModal,
1503
1686
  {
@@ -1511,7 +1694,8 @@ var TonPayButton = ({
1511
1694
  itemTitle,
1512
1695
  fetchOnRampLink: handleFetchOnRampLink,
1513
1696
  onRampAvailable,
1514
- onPaymentSuccess: onCardPaymentSuccess
1697
+ onPaymentSuccess: onCardPaymentSuccess,
1698
+ isLoading
1515
1699
  }
1516
1700
  ),
1517
1701
  errorMessage && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, NotificationRoot, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, ErrorTransactionNotification, { text: errorMessage }) })
@@ -1541,7 +1725,7 @@ function useTonPay() {
1541
1725
  }
1542
1726
  modal.open();
1543
1727
  const unsubscribe = tonConnectUI.onStatusChange((wallet) => {
1544
- if (_optionalChain([wallet, 'optionalAccess', _31 => _31.account])) {
1728
+ if (_optionalChain([wallet, 'optionalAccess', _35 => _35.account])) {
1545
1729
  unsubscribe();
1546
1730
  unsubscribeModal();
1547
1731
  resolve(wallet.account.address);
@@ -1562,15 +1746,20 @@ function useTonPay() {
1562
1746
  });
1563
1747
  }, [address, modal, tonConnectUI]);
1564
1748
  const pay = React8.useCallback(
1565
- async (getMessage) => {
1749
+ async (getMessage, options) => {
1566
1750
  const walletAddress = await waitForWalletConnection();
1567
1751
  const validUntil = Math.floor(Date.now() / 1e3) + TX_VALID_DURATION;
1568
1752
  const messageResult = await getMessage(walletAddress);
1569
- const txResult = await tonConnectUI.sendTransaction({
1570
- messages: [messageResult.message],
1571
- validUntil,
1572
- from: walletAddress
1573
- });
1753
+ const txResult = await tonConnectUI.sendTransaction(
1754
+ {
1755
+ messages: [messageResult.message],
1756
+ validUntil,
1757
+ from: walletAddress
1758
+ },
1759
+ {
1760
+ onRequestSent: _optionalChain([options, 'optionalAccess', _36 => _36.onRequestSent])
1761
+ }
1762
+ );
1574
1763
  return { ...messageResult, txResult };
1575
1764
  },
1576
1765
  [waitForWalletConnection, tonConnectUI]
@@ -1794,8 +1983,8 @@ async function createWebAuthnCredential(walletAddress) {
1794
1983
  const response = credential.response;
1795
1984
  return {
1796
1985
  credentialId: arrayBufferToBase64Url(credential.rawId),
1797
- publicKey: arrayBufferToBase64Url(_nullishCoalesce(_optionalChain([response, 'access', _32 => _32.getPublicKey, 'optionalCall', _33 => _33()]), () => ( new ArrayBuffer(0)))),
1798
- transports: _optionalChain([response, 'access', _34 => _34.getTransports, 'optionalCall', _35 => _35()])
1986
+ publicKey: arrayBufferToBase64Url(_nullishCoalesce(_optionalChain([response, 'access', _37 => _37.getPublicKey, 'optionalCall', _38 => _38()]), () => ( new ArrayBuffer(0)))),
1987
+ transports: _optionalChain([response, 'access', _39 => _39.getTransports, 'optionalCall', _40 => _40()])
1799
1988
  };
1800
1989
  }
1801
1990
  async function getWebAuthnCredential(credentialInfo) {
@@ -1889,7 +2078,7 @@ var SignlessStorage = class {
1889
2078
  const prefix = `${this.storageKey}_`;
1890
2079
  for (let i = 0; i < storage.length; i++) {
1891
2080
  const key = storage.key(i);
1892
- if (_optionalChain([key, 'optionalAccess', _36 => _36.startsWith, 'call', _37 => _37(prefix)])) {
2081
+ if (_optionalChain([key, 'optionalAccess', _41 => _41.startsWith, 'call', _42 => _42(prefix)])) {
1893
2082
  const walletAddress = key.slice(prefix.length);
1894
2083
  wallets.push(walletAddress);
1895
2084
  }
@@ -2643,7 +2832,7 @@ var PinInput = ({
2643
2832
  }
2644
2833
  }, [error]);
2645
2834
  React12.useEffect(() => {
2646
- _optionalChain([inputRef, 'access', _38 => _38.current, 'optionalAccess', _39 => _39.focus, 'call', _40 => _40()]);
2835
+ _optionalChain([inputRef, 'access', _43 => _43.current, 'optionalAccess', _44 => _44.focus, 'call', _45 => _45()]);
2647
2836
  }, []);
2648
2837
  const handleChange = (e) => {
2649
2838
  const value = e.target.value.replace(/\D/g, "").slice(0, length);
@@ -2658,7 +2847,7 @@ var PinInput = ({
2658
2847
  }
2659
2848
  };
2660
2849
  const handleDotClick = () => {
2661
- _optionalChain([inputRef, 'access', _41 => _41.current, 'optionalAccess', _42 => _42.focus, 'call', _43 => _43()]);
2850
+ _optionalChain([inputRef, 'access', _46 => _46.current, 'optionalAccess', _47 => _47.focus, 'call', _48 => _48()]);
2662
2851
  };
2663
2852
  const handleKeyPress = (digit) => {
2664
2853
  if (pin.length >= length || isLoading) return;