@ton-pay/ui-react 0.2.0 → 0.2.1

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 (11) hide show
  1. package/dist/index.js +57 -65
  2. package/dist/index.js.map +1 -1
  3. package/dist/index.mjs +57 -65
  4. package/dist/index.mjs.map +1 -1
  5. package/dist/style-inject.d.mts +7 -0
  6. package/dist/style-inject.d.ts +7 -0
  7. package/dist/style-inject.js +30 -0
  8. package/dist/style-inject.js.map +1 -0
  9. package/dist/style-inject.mjs +30 -0
  10. package/dist/style-inject.mjs.map +1 -0
  11. package/package.json +11 -3
package/dist/index.mjs CHANGED
@@ -25,7 +25,12 @@ async function getUserIp() {
25
25
  // src/components/icons/index.tsx
26
26
  import "react";
27
27
  import { jsx, jsxs } from "react/jsx-runtime";
28
- var TonIcon = ({ size = 24, className }) => /* @__PURE__ */ jsxs(
28
+ var TonIcon = ({
29
+ size = 24,
30
+ bgColor = "#0098EA",
31
+ textColor = "white",
32
+ className
33
+ }) => /* @__PURE__ */ jsxs(
29
34
  "svg",
30
35
  {
31
36
  width: size,
@@ -41,21 +46,14 @@ var TonIcon = ({ size = 24, className }) => /* @__PURE__ */ jsxs(
41
46
  "path",
42
47
  {
43
48
  d: "M12 24C18.6274 24 24 18.6274 24 12C24 5.37257 18.6274 0 12 0C5.37257 0 0 5.37257 0 12C0 18.6274 5.37257 24 12 24Z",
44
- fill: "#0098EA"
45
- }
46
- ),
47
- /* @__PURE__ */ jsx(
48
- "path",
49
- {
50
- d: "M12 24C18.6274 24 24 18.6274 24 12C24 5.37257 18.6274 0 12 0C5.37257 0 0 5.37257 0 12C0 18.6274 5.37257 24 12 24Z",
51
- fill: "white"
49
+ fill: bgColor
52
50
  }
53
51
  ),
54
52
  /* @__PURE__ */ jsx(
55
53
  "path",
56
54
  {
57
55
  d: "M16.0972 6.69763H7.9022C6.39543 6.69763 5.4404 8.32299 6.19846 9.63695L11.2561 18.4033C11.5862 18.9757 12.4133 18.9757 12.7433 18.4033L17.802 9.63695C18.559 8.32509 17.604 6.69763 16.0982 6.69763H16.0972ZM11.252 15.7744L10.1505 13.6426L7.49278 8.88922C7.31746 8.58497 7.53401 8.1951 7.90117 8.1951H11.251V15.7754L11.252 15.7744ZM16.5046 8.88819L13.8479 13.6437L12.7464 15.7744V8.19407H16.0962C16.4633 8.19407 16.6799 8.58395 16.5046 8.88819Z",
58
- fill: "#0098EA"
56
+ fill: textColor
59
57
  }
60
58
  )
61
59
  ] }),
@@ -955,7 +953,7 @@ var BottomSheet_default = BottomSheet;
955
953
 
956
954
  // src/components/payment-modal/PaymentModal.css
957
955
  import styleInject2 from "#style-inject";
958
- styleInject2(':where(.pm-content, .pm-desktop-modal) {\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.pm-content {\n display: flex;\n flex-direction: column;\n align-items: center;\n width: 100%;\n font-family: "Inter", sans-serif;\n}\n@media (prefers-color-scheme: dark) {\n :where(.pm-content, .pm-desktop-modal) {\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');
956
+ styleInject2(':where(.pm-content, .pm-desktop-modal) {\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.pm-content {\n display: flex;\n flex-direction: column;\n align-items: center;\n width: 100%;\n font-family: "Inter", sans-serif;\n}\n@media (prefers-color-scheme: dark) {\n :where(.pm-content, .pm-desktop-modal) {\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: 47px;\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');
959
957
 
960
958
  // src/components/payment-modal/PaymentModal.tsx
961
959
  import { Fragment, jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
@@ -1184,58 +1182,52 @@ var PaymentModal = ({
1184
1182
  ] }),
1185
1183
  itemTitle && /* @__PURE__ */ jsx5("div", { className: "pm-order-info", children: /* @__PURE__ */ jsx5("span", { className: "pm-order-text", children: itemTitle }) })
1186
1184
  ] }),
1187
- /* @__PURE__ */ jsxs4("div", { className: "pm-actions-card", children: [
1188
- /* @__PURE__ */ jsxs4("div", { className: "pm-actions", children: [
1189
- /* @__PURE__ */ jsx5(
1190
- "button",
1191
- {
1192
- className: `pm-btn ${isLoading ? "processing" : "pm-btn-primary"}`,
1193
- onClick: isLoading ? void 0 : onPayWithCrypto,
1194
- disabled: isLoading,
1195
- children: isLoading ? /* @__PURE__ */ jsxs4(
1196
- "div",
1197
- {
1198
- style: { display: "flex", alignItems: "center", gap: "4px" },
1199
- children: [
1200
- /* @__PURE__ */ jsx5("div", { className: "pm-btn-spinner" }),
1201
- /* @__PURE__ */ jsx5("span", { children: "Processing" })
1202
- ]
1203
- }
1204
- ) : /* @__PURE__ */ jsxs4(
1205
- "div",
1206
- {
1207
- style: { display: "flex", alignItems: "center", gap: "4px" },
1208
- children: [
1209
- /* @__PURE__ */ jsx5(CryptoIcon, {}),
1210
- /* @__PURE__ */ jsx5("span", { children: "Pay with Crypto" })
1211
- ]
1212
- }
1213
- )
1214
- }
1215
- ),
1216
- isLoading && /* @__PURE__ */ jsxs4("div", { className: "pm-retry-link", children: [
1217
- "Did the wallet fail to open?",
1218
- " ",
1219
- /* @__PURE__ */ jsx5("span", { className: "pm-retry-action", onClick: onPayWithCrypto, children: "Click here" }),
1220
- "."
1221
- ] }),
1222
- onRampAvailable && !isLoading && /* @__PURE__ */ jsxs4(
1223
- "button",
1224
- {
1225
- className: "pm-btn pm-btn-black",
1226
- onClick: () => setView("card"),
1227
- children: [
1228
- /* @__PURE__ */ jsx5(CardIcon, {}),
1229
- /* @__PURE__ */ jsx5("span", { children: "Pay with Card" })
1230
- ]
1231
- }
1232
- )
1185
+ /* @__PURE__ */ jsx5("div", { className: "pm-actions-card", children: /* @__PURE__ */ jsxs4("div", { className: "pm-actions", children: [
1186
+ /* @__PURE__ */ jsx5(
1187
+ "button",
1188
+ {
1189
+ className: `pm-btn ${isLoading ? "processing" : "pm-btn-primary"}`,
1190
+ onClick: isLoading ? void 0 : onPayWithCrypto,
1191
+ disabled: isLoading,
1192
+ children: isLoading ? /* @__PURE__ */ jsxs4(
1193
+ "div",
1194
+ {
1195
+ style: { display: "flex", alignItems: "center", gap: "4px" },
1196
+ children: [
1197
+ /* @__PURE__ */ jsx5("div", { className: "pm-btn-spinner" }),
1198
+ /* @__PURE__ */ jsx5("span", { children: "Processing" })
1199
+ ]
1200
+ }
1201
+ ) : /* @__PURE__ */ jsxs4(
1202
+ "div",
1203
+ {
1204
+ style: { display: "flex", alignItems: "center", gap: "4px" },
1205
+ children: [
1206
+ /* @__PURE__ */ jsx5(CryptoIcon, {}),
1207
+ /* @__PURE__ */ jsx5("span", { children: "Pay with Crypto" })
1208
+ ]
1209
+ }
1210
+ )
1211
+ }
1212
+ ),
1213
+ isLoading && /* @__PURE__ */ jsxs4("div", { className: "pm-retry-link", children: [
1214
+ "Did the wallet fail to open?",
1215
+ " ",
1216
+ /* @__PURE__ */ jsx5("span", { className: "pm-retry-action", onClick: onPayWithCrypto, children: "Click here" }),
1217
+ "."
1233
1218
  ] }),
1234
- onRampAvailable && !isLoading && /* @__PURE__ */ jsx5("div", { className: "pm-footer", children: /* @__PURE__ */ jsxs4("span", { className: "pm-footer-text", children: [
1235
- "Processed by ",
1236
- PROVIDER.name
1237
- ] }) })
1238
- ] })
1219
+ onRampAvailable && !isLoading && /* @__PURE__ */ jsxs4(
1220
+ "button",
1221
+ {
1222
+ className: "pm-btn pm-btn-black",
1223
+ onClick: () => setView("card"),
1224
+ children: [
1225
+ /* @__PURE__ */ jsx5(CardIcon, {}),
1226
+ /* @__PURE__ */ jsx5("span", { children: "Pay with Card" })
1227
+ ]
1228
+ }
1229
+ )
1230
+ ] }) })
1239
1231
  ] });
1240
1232
  const renderCardView = () => /* @__PURE__ */ jsxs4("div", { className: "pm-iframe-container", children: [
1241
1233
  isOnRampLoading && /* @__PURE__ */ jsxs4("div", { className: "pm-loading-container", children: [
@@ -1326,7 +1318,7 @@ import * as React6 from "react";
1326
1318
 
1327
1319
  // ../api/src/common/const.ts
1328
1320
  var BASE_URL = "https://pay.ton.org";
1329
- var TESTNET_BASE_URL = "https://testnet.pay.ton.org";
1321
+ var TESTNET_BASE_URL = "https://dev.pay.ton.org";
1330
1322
 
1331
1323
  // ../api/src/common/get-base-url.ts
1332
1324
  var getBaseUrl = (chain) => {
@@ -1672,13 +1664,13 @@ var TonPayButton = ({
1672
1664
  if (text) return /* @__PURE__ */ jsx6("span", { children: text });
1673
1665
  if (variant === "short") {
1674
1666
  return /* @__PURE__ */ jsxs5("div", { className: "tp-btn-content", children: [
1675
- /* @__PURE__ */ jsx6(TonIcon, {}),
1667
+ /* @__PURE__ */ jsx6(TonIcon, { bgColor: finalBgColor, textColor: finalTextColor }),
1676
1668
  /* @__PURE__ */ jsx6("span", { children: "Pay" })
1677
1669
  ] });
1678
1670
  }
1679
1671
  return /* @__PURE__ */ jsxs5("div", { className: "tp-btn-content", children: [
1680
1672
  /* @__PURE__ */ jsx6("span", { children: "Pay with" }),
1681
- /* @__PURE__ */ jsx6(TonIcon, {}),
1673
+ /* @__PURE__ */ jsx6(TonIcon, { bgColor: finalBgColor, textColor: finalTextColor }),
1682
1674
  /* @__PURE__ */ jsx6("span", { children: "Pay" })
1683
1675
  ] });
1684
1676
  };