788 lines
26 KiB
TypeScript
788 lines
26 KiB
TypeScript
import { useState, useEffect, useRef, forwardRef, useCallback } from 'react';
|
|
import { Zap, Copy, Check, ExternalLink, Sparkle, Sparkles, Star, Rocket, ArrowLeft, X, Wallet } from 'lucide-react';
|
|
import { Button } from '@/components/ui/button';
|
|
import { cn } from '@/lib/utils';
|
|
import {
|
|
Dialog,
|
|
DialogContent,
|
|
DialogDescription,
|
|
DialogHeader,
|
|
DialogTitle,
|
|
DialogTrigger,
|
|
} from '@/components/ui/dialog';
|
|
import {
|
|
Drawer,
|
|
DrawerContent,
|
|
DrawerDescription,
|
|
DrawerHeader,
|
|
DrawerTitle,
|
|
DrawerTrigger,
|
|
DrawerClose,
|
|
} from '@/components/ui/drawer';
|
|
import { Input } from '@/components/ui/input';
|
|
import { Label } from '@/components/ui/label';
|
|
import { Textarea } from '@/components/ui/textarea';
|
|
import { Card, CardContent } from '@/components/ui/card';
|
|
import { Separator } from '@/components/ui/separator';
|
|
import { ToggleGroup, ToggleGroupItem } from '@/components/ui/toggle-group';
|
|
import { useCurrentUser } from '@/hooks/useCurrentUser';
|
|
import { useAuthor } from '@/hooks/useAuthor';
|
|
import { useToast } from '@/hooks/useToast';
|
|
import { useZaps } from '@/hooks/useZaps';
|
|
import { useWallet } from '@/hooks/useWallet';
|
|
import { useIsMobile } from '@/hooks/useIsMobile';
|
|
import { useCashu } from '@/hooks/wallet/useCashu';
|
|
import { WalletModal } from '@/components/WalletModal';
|
|
import { useTranslation } from '@/contexts/language';
|
|
import type { Event } from 'nostr-tools';
|
|
// qrcode imported lazily in async function to avoid canvas crash at module load
|
|
import type { WebLNProvider } from "@webbtc/webln-types";
|
|
|
|
interface ZapDialogProps {
|
|
target: Event;
|
|
children?: React.ReactNode;
|
|
className?: string;
|
|
/** Controlled open state (used by LazyZapDialog). */
|
|
open?: boolean;
|
|
onOpenChange?: (open: boolean) => void;
|
|
/** Skip the built-in trigger when the caller owns the trigger. */
|
|
hideTrigger?: boolean;
|
|
}
|
|
|
|
const presetAmounts = [
|
|
{ amount: 1, icon: Sparkle },
|
|
{ amount: 50, icon: Sparkles },
|
|
{ amount: 100, icon: Zap },
|
|
{ amount: 250, icon: Star },
|
|
{ amount: 1000, icon: Rocket },
|
|
];
|
|
|
|
interface ZapContentProps {
|
|
invoice: string | null;
|
|
amount: number | string;
|
|
comment: string;
|
|
isZapping: boolean;
|
|
qrCodeUrl: string;
|
|
copied: boolean;
|
|
webln: WebLNProvider | null;
|
|
handleZap: () => void;
|
|
handleCopy: () => void;
|
|
openInWallet: () => void;
|
|
setAmount: (amount: number | string) => void;
|
|
setComment: (comment: string) => void;
|
|
inputRef: React.RefObject<HTMLInputElement>;
|
|
zap: (amount: number, comment: string) => void;
|
|
paymentMethod?: 'lightning' | 'cashu';
|
|
setPaymentMethod?: (method: 'lightning' | 'cashu') => void;
|
|
cashuBalance?: number;
|
|
hasCashu?: boolean;
|
|
}
|
|
|
|
// Wallet Setup Screen - shown when user has no wallet connected
|
|
const WalletSetupContent = forwardRef<HTMLDivElement, {
|
|
onContinue: () => void;
|
|
}>(({ onContinue }, ref) => {
|
|
const { t } = useTranslation();
|
|
return (
|
|
<div className="px-4 py-6 space-y-6" ref={ref}>
|
|
<div className="text-center space-y-3">
|
|
<div className="mx-auto w-16 h-16 rounded-full bg-orange-500/20 flex items-center justify-center">
|
|
<Wallet className="h-8 w-8 text-orange-400" />
|
|
</div>
|
|
<div>
|
|
<h3 className="font-bold text-lg mb-2">{t('walletUi.zap.connectFirst')}</h3>
|
|
<p className="text-sm text-muted-foreground">
|
|
{t('walletUi.zap.connectFirstDesc')}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<Card className="bg-blue-950/30 border-blue-500/50">
|
|
<CardContent className="p-4 space-y-3">
|
|
<div className="flex items-start gap-3">
|
|
<div className="text-2xl">💡</div>
|
|
<div className="flex-1">
|
|
<p className="text-sm font-medium mb-1">{t('walletUi.zap.quickSetup')}</p>
|
|
<p className="text-xs text-muted-foreground">
|
|
{t('walletUi.zap.quickSetupDesc')}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
<div className="space-y-3">
|
|
<WalletModal>
|
|
<Button className="w-full gap-2 bg-orange-500 hover:bg-orange-600" size="lg">
|
|
<Wallet className="h-4 w-4" />
|
|
{t('walletUi.zap.connectNwc')}
|
|
</Button>
|
|
</WalletModal>
|
|
|
|
<a
|
|
href="https://planb.academy/en/tutorials/wallet"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
className="block"
|
|
>
|
|
<Button variant="outline" className="w-full gap-2" size="lg">
|
|
<ExternalLink className="h-4 w-4" />
|
|
{t('walletUi.zap.noWallet')}
|
|
</Button>
|
|
</a>
|
|
|
|
<Button
|
|
variant="ghost"
|
|
onClick={onContinue}
|
|
className="w-full text-muted-foreground hover:text-foreground"
|
|
size="sm"
|
|
>
|
|
{t('walletUi.zap.skip')}
|
|
</Button>
|
|
</div>
|
|
|
|
<Card className="bg-yellow-950/30 border-yellow-500/30">
|
|
<CardContent className="p-3">
|
|
<p className="text-xs text-gray-300">
|
|
<strong className="text-yellow-400">{t('walletUi.zap.note')}</strong> {t('walletUi.zap.noteDesc')}
|
|
</p>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
);
|
|
});
|
|
WalletSetupContent.displayName = 'WalletSetupContent';
|
|
|
|
// Moved ZapContent outside of ZapDialog to prevent re-renders causing focus loss
|
|
const ZapContent = forwardRef<HTMLDivElement, ZapContentProps>(({
|
|
invoice,
|
|
amount,
|
|
comment,
|
|
isZapping,
|
|
qrCodeUrl,
|
|
copied,
|
|
webln,
|
|
handleZap,
|
|
handleCopy,
|
|
openInWallet,
|
|
setAmount,
|
|
setComment,
|
|
inputRef,
|
|
zap,
|
|
paymentMethod,
|
|
setPaymentMethod,
|
|
cashuBalance,
|
|
hasCashu,
|
|
}, ref) => {
|
|
const { t } = useTranslation();
|
|
return (
|
|
<div ref={ref}>
|
|
{invoice ? (
|
|
<div className="flex flex-col h-full min-h-0">
|
|
{/* Payment amount display */}
|
|
<div className="text-center pt-4">
|
|
<div className="text-2xl font-bold">{amount} sats</div>
|
|
</div>
|
|
|
|
<Separator className="my-4" />
|
|
|
|
<div className="flex flex-col justify-center min-h-0 flex-1 px-2">
|
|
{/* QR Code */}
|
|
<div className="flex justify-center">
|
|
<Card className="p-3 [@media(max-height:680px)]:max-w-[65vw] max-w-[95vw] mx-auto">
|
|
<CardContent className="p-0 flex justify-center">
|
|
{qrCodeUrl ? (
|
|
<img
|
|
src={qrCodeUrl}
|
|
alt={t('walletUi.zap.qrAlt')}
|
|
className="w-full h-auto aspect-square max-w-full object-contain"
|
|
/>
|
|
) : (
|
|
<div className="w-full aspect-square bg-muted animate-pulse rounded" />
|
|
)}
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
|
|
{/* Invoice input */}
|
|
<div className="space-y-2 mt-4">
|
|
<Label htmlFor="invoice">{t('walletUi.zap.lightningInvoice')}</Label>
|
|
<div className="flex gap-2 min-w-0">
|
|
<Input
|
|
id="invoice"
|
|
value={invoice}
|
|
readOnly
|
|
className="font-mono text-xs min-w-0 flex-1 overflow-hidden text-ellipsis"
|
|
onClick={(e) => e.currentTarget.select()}
|
|
/>
|
|
<Button
|
|
variant="outline"
|
|
size="icon"
|
|
onClick={handleCopy}
|
|
className="shrink-0"
|
|
>
|
|
{copied ? (
|
|
<Check className="h-4 w-4 text-green-600" />
|
|
) : (
|
|
<Copy className="h-4 w-4" />
|
|
)}
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Payment buttons */}
|
|
<div className="space-y-3 mt-4">
|
|
{webln && (
|
|
<Button
|
|
onClick={() => {
|
|
const finalAmount = typeof amount === 'string' ? parseInt(amount, 10) : amount;
|
|
zap(finalAmount, comment);
|
|
}}
|
|
disabled={isZapping}
|
|
className="w-full"
|
|
size="lg"
|
|
>
|
|
<Zap className="h-4 w-4 mr-2" />
|
|
{isZapping ? t('walletUi.zap.processing') : t('walletUi.zap.payWithWebln')}
|
|
</Button>
|
|
)}
|
|
|
|
<Button
|
|
variant="outline"
|
|
onClick={openInWallet}
|
|
className="w-full"
|
|
size="lg"
|
|
>
|
|
<ExternalLink className="h-4 w-4 mr-2" />
|
|
{t('walletUi.zap.openInWallet')}
|
|
</Button>
|
|
|
|
<div className="text-xs sm:text-[.65rem] text-muted-foreground text-center">
|
|
{t('walletUi.zap.scanHint')}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
) : (
|
|
<>
|
|
<div className="grid gap-3 px-4 py-4 w-full overflow-hidden">
|
|
{/* Cashu Balance Banner - Show prominently if user has Cashu funds */}
|
|
{hasCashu && cashuBalance !== undefined && cashuBalance > 0 && setPaymentMethod && (
|
|
<Card className={cn(
|
|
"border-2 transition-all cursor-pointer",
|
|
paymentMethod === 'cashu'
|
|
? "bg-orange-500/20 border-orange-500/50"
|
|
: "bg-orange-500/10 border-orange-500/30 hover:bg-orange-500/15"
|
|
)}
|
|
onClick={() => setPaymentMethod('cashu')}
|
|
>
|
|
<CardContent className="p-3">
|
|
<div className="flex items-center justify-between">
|
|
<div className="flex items-center gap-3">
|
|
<div className="w-10 h-10 rounded-lg bg-orange-500/20 flex items-center justify-center">
|
|
<span className="text-xl">🥜</span>
|
|
</div>
|
|
<div>
|
|
<p className="text-sm font-bold text-orange-400">{t('walletUi.cashu.title')}</p>
|
|
<p className="text-xs text-muted-foreground">{t('walletUi.zap.cashuInstant')}</p>
|
|
</div>
|
|
</div>
|
|
<div className="text-right">
|
|
<p className="text-lg font-bold text-orange-400">{cashuBalance.toLocaleString()}</p>
|
|
<p className="text-[10px] text-muted-foreground uppercase">{t('walletUi.zap.satsAvailable')}</p>
|
|
</div>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
)}
|
|
|
|
{/* Payment Method Selector - show if user has Cashu but might want Lightning too */}
|
|
{hasCashu && cashuBalance !== undefined && setPaymentMethod && (
|
|
<>
|
|
<div className="flex items-center gap-2">
|
|
<Button
|
|
type="button"
|
|
variant={paymentMethod === 'cashu' ? 'default' : 'ghost'}
|
|
size="sm"
|
|
onClick={() => setPaymentMethod('cashu')}
|
|
className={cn(
|
|
"flex-1 gap-2 h-9",
|
|
paymentMethod === 'cashu' && "bg-orange-500 hover:bg-orange-600"
|
|
)}
|
|
>
|
|
<span>🥜</span>
|
|
<span className="text-xs">Cashu</span>
|
|
</Button>
|
|
<Button
|
|
type="button"
|
|
variant={paymentMethod === 'lightning' ? 'default' : 'ghost'}
|
|
size="sm"
|
|
onClick={() => setPaymentMethod('lightning')}
|
|
className="flex-1 gap-2 h-9"
|
|
>
|
|
<Zap className="h-4 w-4" />
|
|
<span className="text-xs">Lightning</span>
|
|
</Button>
|
|
</div>
|
|
<Separator />
|
|
</>
|
|
)}
|
|
|
|
<ToggleGroup
|
|
type="single"
|
|
value={String(amount)}
|
|
onValueChange={(value) => {
|
|
if (value) {
|
|
setAmount(parseInt(value, 10));
|
|
}
|
|
}}
|
|
className="grid grid-cols-5 gap-1 w-full"
|
|
>
|
|
{presetAmounts.map(({ amount: presetAmount, icon: Icon }) => (
|
|
<ToggleGroupItem
|
|
key={presetAmount}
|
|
value={String(presetAmount)}
|
|
className="flex flex-col h-auto min-w-0 text-xs px-1 py-2"
|
|
>
|
|
<Icon className="h-4 w-4 mb-1" />
|
|
<span className="truncate">{presetAmount}</span>
|
|
</ToggleGroupItem>
|
|
))}
|
|
</ToggleGroup>
|
|
<div className="flex items-center gap-2">
|
|
<div className="h-px flex-1 bg-muted" />
|
|
<span className="text-xs text-muted-foreground">{t('walletUi.zap.or')}</span>
|
|
<div className="h-px flex-1 bg-muted" />
|
|
</div>
|
|
<Input
|
|
ref={inputRef}
|
|
id="custom-amount"
|
|
type="number"
|
|
placeholder={t('walletUi.zap.customAmount')}
|
|
value={amount}
|
|
onChange={(e) => setAmount(e.target.value)}
|
|
className="w-full text-sm"
|
|
/>
|
|
<Textarea
|
|
id="custom-comment"
|
|
placeholder={t('walletUi.zap.addComment')}
|
|
value={comment}
|
|
onChange={(e) => setComment(e.target.value)}
|
|
className="w-full resize-none text-sm"
|
|
rows={2}
|
|
/>
|
|
</div>
|
|
<div className="px-4 pb-4 space-y-2">
|
|
{/* Show insufficient balance warning for Cashu. Coerce amount to a
|
|
number first — the custom-amount input stores it as a string, so a
|
|
plain `typeof === 'number'` check would let an over-balance custom
|
|
amount slip past both this warning and the disabled state. */}
|
|
{(() => {
|
|
const numericAmount =
|
|
typeof amount === 'string' ? parseInt(amount, 10) : amount;
|
|
const overBalance =
|
|
paymentMethod === 'cashu' &&
|
|
cashuBalance !== undefined &&
|
|
Number.isFinite(numericAmount) &&
|
|
numericAmount > cashuBalance;
|
|
return overBalance ? (
|
|
<Card className="bg-yellow-950/30 border-yellow-500/30">
|
|
<CardContent className="p-3">
|
|
<p className="text-xs text-yellow-200">
|
|
{t('walletUi.zap.insufficientBanner', { amount: (numericAmount - cashuBalance).toLocaleString() })}
|
|
</p>
|
|
</CardContent>
|
|
</Card>
|
|
) : null;
|
|
})()}
|
|
|
|
<Button
|
|
onClick={handleZap}
|
|
className="w-full"
|
|
disabled={(() => {
|
|
if (isZapping) return true;
|
|
if (paymentMethod !== 'cashu' || cashuBalance === undefined) return false;
|
|
const numericAmount =
|
|
typeof amount === 'string' ? parseInt(amount, 10) : amount;
|
|
return Number.isFinite(numericAmount) && numericAmount > cashuBalance;
|
|
})()}
|
|
size="default"
|
|
>
|
|
{isZapping ? (
|
|
t('walletUi.zap.creatingInvoice')
|
|
) : (
|
|
<>
|
|
{paymentMethod === 'cashu' ? '🥜' : <Zap className="h-4 w-4 mr-2" />}
|
|
{paymentMethod === 'cashu' ? t('walletUi.zap.zapAmountCashu', { amount }) : t('walletUi.zap.zapAmount', { amount })}
|
|
</>
|
|
)}
|
|
</Button>
|
|
</div>
|
|
</>
|
|
)}
|
|
</div>
|
|
);
|
|
});
|
|
ZapContent.displayName = 'ZapContent';
|
|
|
|
export function ZapDialog({
|
|
target,
|
|
children,
|
|
className,
|
|
open: controlledOpen,
|
|
onOpenChange,
|
|
hideTrigger = false,
|
|
}: ZapDialogProps) {
|
|
const { t } = useTranslation();
|
|
const [internalOpen, setInternalOpen] = useState(false);
|
|
const open = controlledOpen ?? internalOpen;
|
|
const setOpen = useCallback((next: boolean) => {
|
|
if (controlledOpen !== undefined) onOpenChange?.(next);
|
|
else setInternalOpen(next);
|
|
}, [controlledOpen, onOpenChange]);
|
|
const { user } = useCurrentUser();
|
|
const { data: author } = useAuthor(target.pubkey);
|
|
const { toast } = useToast();
|
|
const { webln, activeNWC } = useWallet();
|
|
const { zap, generateZapInvoice, isZapping, setIsZapping, invoice, setInvoice } = useZaps(target, webln, activeNWC, () => setOpen(false));
|
|
const [amount, setAmount] = useState<number | string>(100);
|
|
const [comment, setComment] = useState<string>('');
|
|
const [copied, setCopied] = useState(false);
|
|
const [qrCodeUrl, setQrCodeUrl] = useState<string>('');
|
|
const [showWalletSetup, setShowWalletSetup] = useState(false);
|
|
const [hasShownSetup, setHasShownSetup] = useState(false);
|
|
const [paymentMethod, setPaymentMethod] = useState<'lightning' | 'cashu'>('lightning');
|
|
const inputRef = useRef<HTMLInputElement>(null);
|
|
const isMobile = useIsMobile();
|
|
|
|
// Cashu wallet integration
|
|
const { totalBalance: cashuBalance, isInitialized: hasCashu, coco, mints } = useCashu();
|
|
|
|
// Check if user has any wallet connected
|
|
const hasWallet = !!webln || !!activeNWC;
|
|
const hasAnyCashuBalance = hasCashu && cashuBalance > 0;
|
|
|
|
useEffect(() => {
|
|
if (target) {
|
|
setComment(t('walletUi.zap.defaultComment'));
|
|
}
|
|
}, [target, t]);
|
|
|
|
// Pick the most useful default payment method when the dialog opens: if the
|
|
// user has Cashu funds but no connected Lightning wallet, default to Cashu so
|
|
// the one-click built-in payment is pre-selected instead of the manual-invoice
|
|
// Lightning fallback.
|
|
useEffect(() => {
|
|
if (!open) return;
|
|
if (hasAnyCashuBalance && !hasWallet) {
|
|
setPaymentMethod('cashu');
|
|
} else {
|
|
setPaymentMethod('lightning');
|
|
}
|
|
}, [open, hasAnyCashuBalance, hasWallet]);
|
|
|
|
// Generate QR code
|
|
useEffect(() => {
|
|
let isCancelled = false;
|
|
|
|
const generateQR = async () => {
|
|
if (!invoice) {
|
|
setQrCodeUrl('');
|
|
return;
|
|
}
|
|
|
|
try {
|
|
const { default: QRCode } = await import('qrcode');
|
|
const url = await QRCode.toDataURL(invoice.toUpperCase(), {
|
|
width: 512,
|
|
margin: 2,
|
|
color: {
|
|
dark: '#000000',
|
|
light: '#FFFFFF',
|
|
},
|
|
});
|
|
|
|
if (!isCancelled) {
|
|
setQrCodeUrl(url);
|
|
}
|
|
} catch (err) {
|
|
if (!isCancelled) {
|
|
console.error('Failed to generate QR code:', err);
|
|
}
|
|
}
|
|
};
|
|
|
|
generateQR();
|
|
|
|
return () => {
|
|
isCancelled = true;
|
|
};
|
|
}, [invoice]);
|
|
|
|
const handleCopy = async () => {
|
|
if (invoice) {
|
|
await navigator.clipboard.writeText(invoice);
|
|
setCopied(true);
|
|
toast({
|
|
title: t('walletUi.zap.invoiceCopied'),
|
|
description: t('walletUi.zap.invoiceCopiedDesc'),
|
|
});
|
|
setTimeout(() => setCopied(false), 2000);
|
|
}
|
|
};
|
|
|
|
const openInWallet = () => {
|
|
if (invoice) {
|
|
const lightningUrl = `lightning:${invoice}`;
|
|
window.open(lightningUrl, '_blank');
|
|
}
|
|
};
|
|
|
|
useEffect(() => {
|
|
if (open) {
|
|
setAmount(100);
|
|
setInvoice(null);
|
|
setCopied(false);
|
|
setQrCodeUrl('');
|
|
|
|
// Show wallet setup screen only if the user has NO way to pay yet — no
|
|
// connected Lightning wallet AND no Cashu balance. If they have Cashu
|
|
// funds, they can zap immediately, so skip the "connect a wallet" nag.
|
|
if (!hasWallet && !hasAnyCashuBalance && !hasShownSetup) {
|
|
setShowWalletSetup(true);
|
|
} else {
|
|
setShowWalletSetup(false);
|
|
}
|
|
} else {
|
|
// Clean up state when dialog closes
|
|
setAmount(100);
|
|
setInvoice(null);
|
|
setCopied(false);
|
|
setQrCodeUrl('');
|
|
setShowWalletSetup(false);
|
|
}
|
|
}, [open, setInvoice, hasWallet, hasAnyCashuBalance, hasShownSetup]);
|
|
|
|
const handleZap = async () => {
|
|
const finalAmount = typeof amount === 'string' ? parseInt(amount, 10) : amount;
|
|
if (!Number.isFinite(finalAmount) || finalAmount <= 0) {
|
|
toast({
|
|
variant: 'destructive',
|
|
title: t('walletUi.zap.enterAmount'),
|
|
description: t('walletUi.zap.enterAmountDesc'),
|
|
});
|
|
return;
|
|
}
|
|
|
|
// ── Cashu (built-in wallet) path ──
|
|
// Pay in ONE click: fetch the recipient's zap invoice for exactly this
|
|
// amount, then melt it from the Cashu wallet. Previously this branch only
|
|
// ran when an `invoice` already existed, so the first click silently fell
|
|
// through to the Lightning flow and Cashu funds were never used.
|
|
if (paymentMethod === 'cashu') {
|
|
if (!hasCashu || !coco) {
|
|
toast({
|
|
variant: 'destructive',
|
|
title: t('walletUi.zap.cashuUnavailable'),
|
|
description: t('walletUi.zap.cashuUnavailableDesc'),
|
|
});
|
|
return;
|
|
}
|
|
if (finalAmount > cashuBalance) {
|
|
toast({
|
|
variant: 'destructive',
|
|
title: t('walletUi.zap.insufficientCashu'),
|
|
description: t('walletUi.zap.insufficientCashuDesc', { amount: (finalAmount - cashuBalance).toLocaleString() }),
|
|
});
|
|
return;
|
|
}
|
|
|
|
setIsZapping(true);
|
|
try {
|
|
const activeMint = mints.find((m) => m.url);
|
|
if (!activeMint) throw new Error(t('legacyMiscUi.zapNoActiveMint'));
|
|
|
|
// Same verified invoice the Lightning rail would use (amount-checked).
|
|
const zapInvoice = await generateZapInvoice(finalAmount, comment);
|
|
|
|
const meltQuote = await coco.quotes.createMeltQuote(activeMint.url, zapInvoice);
|
|
await coco.quotes.payMeltQuote(activeMint.url, meltQuote.quote);
|
|
|
|
toast({
|
|
title: t('walletUi.zap.zapSentCashu'),
|
|
description: t('walletUi.zap.zapSentCashuDesc', { amount: finalAmount.toLocaleString() }),
|
|
});
|
|
setInvoice(null);
|
|
setOpen(false);
|
|
} catch (error) {
|
|
console.error('Cashu payment error:', error);
|
|
toast({
|
|
variant: 'destructive',
|
|
title: t('walletUi.zap.cashuFailed'),
|
|
description: error instanceof Error ? error.message : t('walletUi.zap.cashuFailedDesc'),
|
|
});
|
|
} finally {
|
|
setIsZapping(false);
|
|
}
|
|
return;
|
|
}
|
|
|
|
// ── Lightning / NWC / WebLN path ──
|
|
zap(finalAmount, comment);
|
|
};
|
|
|
|
const handleContinueWithoutWallet = () => {
|
|
setShowWalletSetup(false);
|
|
setHasShownSetup(true);
|
|
};
|
|
|
|
const contentProps = {
|
|
invoice,
|
|
amount,
|
|
comment,
|
|
isZapping,
|
|
qrCodeUrl,
|
|
copied,
|
|
webln,
|
|
handleZap,
|
|
handleCopy,
|
|
openInWallet,
|
|
setAmount,
|
|
setComment,
|
|
inputRef,
|
|
zap,
|
|
paymentMethod,
|
|
setPaymentMethod,
|
|
cashuBalance,
|
|
hasCashu,
|
|
};
|
|
|
|
if (!user || user.pubkey === target.pubkey || !author?.metadata?.lud06 && !author?.metadata?.lud16) {
|
|
return null;
|
|
}
|
|
|
|
if (isMobile) {
|
|
// Use drawer for entire mobile flow, make it full-screen when showing invoice
|
|
return (
|
|
<Drawer
|
|
open={open}
|
|
onOpenChange={(newOpen) => {
|
|
// Reset invoice when closing
|
|
if (!newOpen) {
|
|
setInvoice(null);
|
|
setQrCodeUrl('');
|
|
}
|
|
setOpen(newOpen);
|
|
}}
|
|
dismissible={true} // Always allow dismissal via drag
|
|
snapPoints={invoice ? [0.5, 0.75, 0.98] : [0.98]}
|
|
activeSnapPoint={invoice ? 0.98 : 0.98}
|
|
modal={true}
|
|
shouldScaleBackground={false}
|
|
fadeFromIndex={0}
|
|
>
|
|
{!hideTrigger && children != null && (
|
|
<DrawerTrigger asChild>
|
|
<div className={`cursor-pointer ${className || ''}`}>
|
|
{children}
|
|
</div>
|
|
</DrawerTrigger>
|
|
)}
|
|
<DrawerContent
|
|
key={invoice ? 'payment' : 'form'}
|
|
className={cn(
|
|
"transition-all duration-300",
|
|
invoice ? "h-full max-h-screen" : "max-h-[98vh]"
|
|
)}
|
|
data-testid="zap-modal"
|
|
>
|
|
<DrawerHeader className="text-center relative">
|
|
{/* Back button when showing invoice */}
|
|
{invoice && (
|
|
<Button
|
|
variant="ghost"
|
|
size="sm"
|
|
onClick={() => {
|
|
setInvoice(null);
|
|
setQrCodeUrl('');
|
|
}}
|
|
className="absolute left-4 top-4 flex items-center gap-2"
|
|
>
|
|
<ArrowLeft className="h-4 w-4" />
|
|
</Button>
|
|
)}
|
|
|
|
{/* Close button */}
|
|
<DrawerClose asChild>
|
|
<Button
|
|
variant="ghost"
|
|
size="sm"
|
|
className="absolute right-4 top-4"
|
|
>
|
|
<X className="h-4 w-4" />
|
|
<span className="sr-only">{t('common.close')}</span>
|
|
</Button>
|
|
</DrawerClose>
|
|
|
|
<DrawerTitle className="text-lg break-words pt-2">
|
|
{showWalletSetup ? t('walletUi.zap.titleConnect') : invoice ? t('walletUi.zap.titlePayment') : t('walletUi.zap.titleZap')}
|
|
</DrawerTitle>
|
|
<DrawerDescription className="text-sm break-words text-center">
|
|
{showWalletSetup ? (
|
|
t('walletUi.zap.descConnect')
|
|
) : invoice ? (
|
|
t('walletUi.zap.descPayment')
|
|
) : (
|
|
t('walletUi.zap.descZap')
|
|
)}
|
|
</DrawerDescription>
|
|
</DrawerHeader>
|
|
<div className="flex-1 overflow-y-auto px-4 pb-4">
|
|
{showWalletSetup ? (
|
|
<WalletSetupContent onContinue={handleContinueWithoutWallet} />
|
|
) : (
|
|
<ZapContent {...contentProps} />
|
|
)}
|
|
</div>
|
|
</DrawerContent>
|
|
</Drawer>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<Dialog open={open} onOpenChange={setOpen}>
|
|
{!hideTrigger && children != null && (
|
|
<DialogTrigger asChild>
|
|
<div className={`cursor-pointer ${className || ''}`}>
|
|
{children}
|
|
</div>
|
|
</DialogTrigger>
|
|
)}
|
|
<DialogContent className="w-[calc(100%-1rem)] sm:max-w-[425px] max-h-[90vh] max-h-[90dvh] overflow-hidden p-4 sm:p-6" data-testid="zap-modal">
|
|
<DialogHeader>
|
|
<DialogTitle className="text-base sm:text-lg break-words">
|
|
{showWalletSetup ? t('walletUi.zap.titleConnect') : invoice ? t('walletUi.zap.titlePayment') : t('walletUi.zap.titleZap')}
|
|
</DialogTitle>
|
|
<DialogDescription className="text-xs sm:text-sm text-center break-words">
|
|
{showWalletSetup ? (
|
|
t('walletUi.zap.descConnect')
|
|
) : invoice ? (
|
|
t('walletUi.zap.descPayment')
|
|
) : (
|
|
<>
|
|
{t('walletUi.zap.descZapShort')}
|
|
</>
|
|
)}
|
|
</DialogDescription>
|
|
</DialogHeader>
|
|
<div className="overflow-y-auto -mx-4 sm:-mx-6 px-4 sm:px-6">
|
|
{showWalletSetup ? (
|
|
<WalletSetupContent onContinue={handleContinueWithoutWallet} />
|
|
) : (
|
|
<ZapContent {...contentProps} />
|
|
)}
|
|
</div>
|
|
</DialogContent>
|
|
</Dialog>
|
|
);
|
|
}
|