lightning-auth-and-payment/dist/components/PaymentModal.js

Lightning Network authentication and payment processing library for modern web applications

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.PaymentModal = PaymentModal;
const jsx_runtime_1 = require("react/jsx-runtime");
const lucide_react_1 = require("lucide-react");
function PaymentModal({ isOpen, onClose, amount, description, status, timeLeft, bolt11, onCopyBolt11, copied, onDownload, successData, className = '', }) {
    if (!isOpen)
        return null;
    const formatPrice = (sats) => {
        if (sats >= 100000) {
            return `${(sats / 100000).toFixed(3)} BTC`;
        }
        return `${sats.toLocaleString()} sats`;
    };
    const getStatusColor = () => {
        switch (status) {
            case 'waiting':
                return 'text-yellow-500';
            case 'settled':
                return 'text-green-500';
            case 'expired':
                return 'text-red-500';
            default:
                return 'text-slate-400';
        }
    };
    const getStatusIcon = () => {
        switch (status) {
            case 'waiting':
                return (0, jsx_runtime_1.jsx)(lucide_react_1.Clock, { className: "w-5 h-5 animate-pulse" });
            case 'settled':
                return (0, jsx_runtime_1.jsx)(lucide_react_1.Check, { className: "w-5 h-5" });
            case 'expired':
                return (0, jsx_runtime_1.jsx)(lucide_react_1.X, { className: "w-5 h-5" });
            default:
                return (0, jsx_runtime_1.jsx)(lucide_react_1.Zap, { className: "w-5 h-5" });
        }
    };
    const getStatusMessage = () => {
        switch (status) {
            case 'waiting':
                return 'Waiting for payment...';
            case 'settled':
                return 'Payment successful!';
            case 'expired':
                return 'Payment expired. Please try again.';
            default:
                return 'Creating payment...';
        }
    };
    return ((0, jsx_runtime_1.jsx)("div", { className: `fixed inset-0 bg-black/50 backdrop-blur-sm flex items-center justify-center z-50 p-4 ${className}`, children: (0, jsx_runtime_1.jsxs)("div", { className: "bg-slate-800/90 backdrop-blur-md rounded-2xl border border-slate-700/50 max-w-md w-full max-h-[90vh] overflow-y-auto", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-between p-6 border-b border-slate-700/50", children: [(0, jsx_runtime_1.jsx)("h2", { className: "text-xl font-bold text-white", children: "Payment" }), (0, jsx_runtime_1.jsx)("button", { onClick: onClose, className: "text-slate-400 hover:text-white transition-colors", children: (0, jsx_runtime_1.jsx)(lucide_react_1.X, { className: "w-5 h-5" }) })] }), (0, jsx_runtime_1.jsx)("div", { className: "p-6 border-b border-slate-700/50", children: (0, jsx_runtime_1.jsxs)("div", { className: "mb-4", children: [(0, jsx_runtime_1.jsx)("h3", { className: "font-bold text-white text-lg mb-1", children: description }), (0, jsx_runtime_1.jsx)("div", { className: "flex items-center space-x-2 text-sm text-slate-300", children: (0, jsx_runtime_1.jsx)("span", { children: "Lightning Network" }) })] }) }), (0, jsx_runtime_1.jsxs)("div", { className: "p-6", children: [(0, jsx_runtime_1.jsxs)("div", { className: "text-center mb-6", children: [(0, jsx_runtime_1.jsxs)("div", { className: `flex items-center justify-center space-x-2 mb-3 ${getStatusColor()}`, children: [getStatusIcon(), (0, jsx_runtime_1.jsx)("span", { className: "font-medium", children: getStatusMessage() })] }), status === 'waiting' && ((0, jsx_runtime_1.jsx)("div", { className: "text-3xl font-bold text-orange-500 mb-2", children: formatPrice(amount) })), status === 'waiting' && timeLeft > 0 && ((0, jsx_runtime_1.jsxs)("div", { className: "text-sm text-slate-400 mb-4", children: ["Payment expires in ", timeLeft, "s"] }))] }), status === 'waiting' && bolt11 && ((0, jsx_runtime_1.jsxs)("div", { className: "space-y-4", children: [(0, jsx_runtime_1.jsxs)("div", { className: "bg-slate-900/50 rounded-lg p-4", children: [(0, jsx_runtime_1.jsx)("h4", { className: "font-medium text-white mb-2", children: "Payment Instructions:" }), (0, jsx_runtime_1.jsxs)("ol", { className: "text-sm text-slate-300 space-y-1", children: [(0, jsx_runtime_1.jsx)("li", { children: "1. Scan the QR code with your Lightning wallet" }), (0, jsx_runtime_1.jsx)("li", { children: "2. Or copy the payment request below" }), (0, jsx_runtime_1.jsx)("li", { children: "3. Confirm the payment in your wallet" }), (0, jsx_runtime_1.jsx)("li", { children: "4. You'll receive instant confirmation" })] })] }), (0, jsx_runtime_1.jsx)("div", { className: "bg-white p-4 rounded-lg flex items-center justify-center", children: (0, jsx_runtime_1.jsxs)("div", { className: "text-slate-400 text-center", children: [(0, jsx_runtime_1.jsx)("div", { className: "w-32 h-32 bg-slate-200 rounded flex items-center justify-center mb-2", children: (0, jsx_runtime_1.jsx)("span", { className: "text-slate-500", children: "QR Code" }) }), (0, jsx_runtime_1.jsx)("p", { className: "text-xs", children: "Scan with Lightning wallet" })] }) }), (0, jsx_runtime_1.jsx)("button", { onClick: onCopyBolt11, className: "w-full flex items-center justify-center space-x-2 py-3 bg-slate-700 hover:bg-slate-600 text-white rounded-lg transition-colors", children: copied ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Check, { className: "w-4 h-4" }), (0, jsx_runtime_1.jsx)("span", { children: "Copied!" })] })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Copy, { className: "w-4 h-4" }), (0, jsx_runtime_1.jsx)("span", { children: "Copy Payment Request" })] })) })] })), status === 'settled' && ((0, jsx_runtime_1.jsxs)("div", { className: "text-center space-y-4", children: [(0, jsx_runtime_1.jsx)("div", { className: "w-16 h-16 bg-green-500/20 rounded-full flex items-center justify-center mx-auto", children: (0, jsx_runtime_1.jsx)(lucide_react_1.Check, { className: "w-8 h-8 text-green-500" }) }), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("h3", { className: "font-bold text-white text-lg mb-2", children: "Payment Successful!" }), (0, jsx_runtime_1.jsx)("p", { className: "text-slate-300 mb-4", children: "Your payment has been confirmed" })] }), onDownload && ((0, jsx_runtime_1.jsxs)("button", { onClick: onDownload, className: "w-full flex items-center justify-center space-x-2 py-3 bg-gradient-to-r from-green-500 to-green-600 hover:from-green-600 hover:to-green-700 text-white rounded-lg transition-all duration-300", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Download, { className: "w-4 h-4" }), (0, jsx_runtime_1.jsx)("span", { children: "Download" })] }))] })), status === 'expired' && ((0, jsx_runtime_1.jsxs)("div", { className: "text-center space-y-4", children: [(0, jsx_runtime_1.jsx)("div", { className: "w-16 h-16 bg-red-500/20 rounded-full flex items-center justify-center mx-auto", children: (0, jsx_runtime_1.jsx)(lucide_react_1.X, { className: "w-8 h-8 text-red-500" }) }), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("h3", { className: "font-bold text-white text-lg mb-2", children: "Payment Expired" }), (0, jsx_runtime_1.jsx)("p", { className: "text-slate-300 mb-4", children: "The payment request has expired. Please try again." })] }), (0, jsx_runtime_1.jsx)("button", { onClick: onClose, className: "w-full py-3 bg-slate-700 hover:bg-slate-600 text-white rounded-lg transition-colors", children: "Close" })] }))] })] }) }));
}
//# sourceMappingURL=PaymentModal.js.map