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

package/dist/index.js

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { newObj[key] = obj[key]; } } } newObj.default = obj; return newObj; } } function _nullishCoalesce(lhs, rhsFn) { if (lhs != null) { return lhs; } else { return rhsFn(); } } function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]; let i = 1; while (i < ops.length) { const op = ops[i]; const fn = ops[i + 1]; i += 2; if ((op === 'optionalAccess' || op === 'optionalCall') && value == null) { return undefined; } if (op === 'access' || op === 'optionalAccess') { lastAccessLHS = value; value = fn(value); } else if (op === 'call' || op === 'optionalCall') { value = fn((...args) => value.call(lastAccessLHS, ...args)); lastAccessLHS = undefined; } } return value; }// src/components/ton-pay-button/TonPayButton.tsx
+"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { newObj[key] = obj[key]; } } } newObj.default = obj; return newObj; } } function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } function _nullishCoalesce(lhs, rhsFn) { if (lhs != null) { return lhs; } else { return rhsFn(); } } function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]; let i = 1; while (i < ops.length) { const op = ops[i]; const fn = ops[i + 1]; i += 2; if ((op === 'optionalAccess' || op === 'optionalCall') && value == null) { return undefined; } if (op === 'access' || op === 'optionalAccess') { lastAccessLHS = value; value = fn(value); } else if (op === 'call' || op === 'optionalCall') { value = fn((...args) => value.call(lastAccessLHS, ...args)); lastAccessLHS = undefined; } } return value; }// src/components/ton-pay-button/TonPayButton.tsx
 var _react = require('react'); var React6 = _interopRequireWildcard(_react); var React8 = _interopRequireWildcard(_react); var React9 = _interopRequireWildcard(_react); var React10 = _interopRequireWildcard(_react); var React11 = _interopRequireWildcard(_react); var React12 = _interopRequireWildcard(_react); var React13 = _interopRequireWildcard(_react); var React14 = _interopRequireWildcard(_react);
 
 var _uireact = require('@tonconnect/ui-react');
@@ -332,6 +332,12 @@ var ErrorTransactionNotification = ({ text, className, style }) => {
 
 
 
+// src/components/bottom-sheet/BottomSheet.css
+var _styleinject = require('#style-inject'); var _styleinject2 = _interopRequireDefault(_styleinject);
+_styleinject2.default.call(void 0, ".bottom-sheet-backdrop {\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  background-color: rgba(0, 0, 0, 0.5);\n  backdrop-filter: blur(8px);\n  -webkit-backdrop-filter: blur(8px);\n  z-index: 1000;\n  display: flex;\n  align-items: flex-end;\n  justify-content: center;\n  animation: fadeIn 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n}\n.bottom-sheet-backdrop.closing {\n  animation: fadeOut 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n}\n@keyframes fadeIn {\n  from {\n    opacity: 0;\n    backdrop-filter: blur(0px);\n    -webkit-backdrop-filter: blur(0px);\n  }\n  to {\n    opacity: 1;\n    backdrop-filter: blur(8px);\n    -webkit-backdrop-filter: blur(8px);\n  }\n}\n@keyframes fadeOut {\n  from {\n    opacity: 1;\n    backdrop-filter: blur(8px);\n    -webkit-backdrop-filter: blur(8px);\n  }\n  to {\n    opacity: 0;\n    backdrop-filter: blur(0px);\n    -webkit-backdrop-filter: blur(0px);\n  }\n}\n.bottom-sheet {\n  position: relative;\n  width: 100%;\n  max-width: 100%;\n  background-color: #ffffff;\n  border-radius: 20px 20px 0 0;\n  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.15);\n  display: flex;\n  flex-direction: column;\n  overflow: hidden;\n  touch-action: none;\n  transition: height 0.3s cubic-bezier(0.4, 0, 0.2, 1), transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n  will-change: height, transform;\n  transform: translateY(0);\n}\n.bottom-sheet.dragging {\n  transition: none;\n}\n.bottom-sheet.closing {\n  animation: slideDown 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards;\n  transition: height 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n}\n@keyframes slideDown {\n  from {\n    transform: translateY(0);\n  }\n  to {\n    transform: translateY(100%);\n  }\n}\n.bottom-sheet-handle-container {\n  width: 100%;\n  padding: 12px 0 8px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  flex-shrink: 0;\n  cursor: grab;\n}\n.bottom-sheet-handle-container:active {\n  cursor: grabbing;\n}\n.bottom-sheet-handle {\n  width: 80px;\n  height: 4px;\n  background-color: #d1d5db;\n  border-radius: 2px;\n  cursor: pointer;\n}\n.bottom-sheet-content {\n  flex: 1;\n  overflow-y: auto;\n  overflow-x: hidden;\n  -webkit-overflow-scrolling: touch;\n  overscroll-behavior: contain;\n  padding: 0;\n  min-height: 0;\n}\n.bottom-sheet-content.scrolling {\n  touch-action: pan-y;\n}\n@media (prefers-color-scheme: dark) {\n  .bottom-sheet {\n    background-color: #1C2633;\n    box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.4);\n  }\n  .bottom-sheet-handle {\n    background-color: #4B5563;\n  }\n}\n");
+
+// src/components/bottom-sheet/BottomSheet.tsx
+
 var BottomSheet = ({
   isOpen,
   onClose,
@@ -823,6 +829,10 @@ var BottomSheet = ({
 };
 var BottomSheet_default = BottomSheet;
 
+// src/components/payment-modal/PaymentModal.css
+
+_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');
+
 // src/components/payment-modal/PaymentModal.tsx
 
 var PROVIDER = { id: "moonpay", name: "Moonpay", iconClass: "icon-moonpay" };