mirror of
https://gitlab.com/soapbox-pub/mkstack.git
synced 2025-08-27 04:59:22 +00:00
more mobile fixes
This commit is contained in:
Chad Curtis
parent
a92f80b6e3
commit
230183bd0c
@ -61,6 +61,8 @@ export function ZapDialog({ target, children, className }: ZapDialogProps) {
|
|||||||
const inputRef = useRef<HTMLInputElement>(null);
|
const inputRef = useRef<HTMLInputElement>(null);
|
||||||
const isMobile = useIsMobile();
|
const isMobile = useIsMobile();
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (target) {
|
if (target) {
|
||||||
setComment('Zapped with MKStack!');
|
setComment('Zapped with MKStack!');
|
||||||
@ -86,7 +88,7 @@ export function ZapDialog({ target, children, className }: ZapDialogProps) {
|
|||||||
|
|
||||||
try {
|
try {
|
||||||
const url = await QRCode.toDataURL(invoice.toUpperCase(), {
|
const url = await QRCode.toDataURL(invoice.toUpperCase(), {
|
||||||
width: 256,
|
width: 512,
|
||||||
margin: 2,
|
margin: 2,
|
||||||
color: {
|
color: {
|
||||||
dark: '#000000',
|
dark: '#000000',
|
||||||
@ -154,86 +156,88 @@ export function ZapDialog({ target, children, className }: ZapDialogProps) {
|
|||||||
const ZapContent = () => (
|
const ZapContent = () => (
|
||||||
<>
|
<>
|
||||||
{invoice ? (
|
{invoice ? (
|
||||||
<div className="space-y-4">
|
<div className="flex flex-col h-full min-h-0">
|
||||||
{/* Payment amount display */}
|
{/* Payment amount display */}
|
||||||
<div className="text-center">
|
<div className="text-center">
|
||||||
<div className="text-2xl font-bold">{amount} sats</div>
|
<div className="text-2xl font-bold">{amount} sats</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<Separator />
|
<Separator className="my-4" />
|
||||||
|
|
||||||
{/* QR Code */}
|
<div className="flex flex-col justify-center min-h-0 flex-1">
|
||||||
<div className="flex justify-center">
|
{/* QR Code */}
|
||||||
<Card className="p-4 max-w-full">
|
<div className="flex justify-center px-2 sm:px-4">
|
||||||
<CardContent className="p-0 flex justify-center">
|
<Card className="p-2 sm:p-4 w-full [@media(max-height:680px)]:max-w-[65vw] max-w-[95vw] sm:max-w-sm">
|
||||||
{qrCodeUrl ? (
|
<CardContent className="p-0 flex justify-center">
|
||||||
<img
|
{qrCodeUrl ? (
|
||||||
src={qrCodeUrl}
|
<img
|
||||||
alt="Lightning Invoice QR Code"
|
src={qrCodeUrl}
|
||||||
className="w-56 h-56 max-w-full max-h-full object-contain"
|
alt="Lightning Invoice QR Code"
|
||||||
/>
|
className="w-full h-auto aspect-square max-w-full object-contain"
|
||||||
) : (
|
/>
|
||||||
<div className="w-56 h-56 max-w-full bg-muted animate-pulse rounded" />
|
) : (
|
||||||
)}
|
<div className="w-full aspect-square bg-muted animate-pulse rounded" />
|
||||||
</CardContent>
|
)}
|
||||||
</Card>
|
</CardContent>
|
||||||
</div>
|
</Card>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Invoice input */}
|
||||||
|
<div className="space-y-2 mt-4">
|
||||||
|
<Label htmlFor="invoice">Lightning Invoice</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">
|
||||||
|
{hasWebLN && (
|
||||||
|
<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 ? "Processing..." : "Pay with WebLN"}
|
||||||
|
</Button>
|
||||||
|
)}
|
||||||
|
|
||||||
{/* Invoice input */}
|
|
||||||
<div className="space-y-2">
|
|
||||||
<Label htmlFor="invoice">Lightning Invoice</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
|
<Button
|
||||||
variant="outline"
|
variant="outline"
|
||||||
size="icon"
|
onClick={openInWallet}
|
||||||
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">
|
|
||||||
{hasWebLN && (
|
|
||||||
<Button
|
|
||||||
onClick={() => {
|
|
||||||
const finalAmount = typeof amount === 'string' ? parseInt(amount, 10) : amount;
|
|
||||||
zap(finalAmount, comment);
|
|
||||||
}}
|
|
||||||
disabled={isZapping}
|
|
||||||
className="w-full"
|
className="w-full"
|
||||||
size="lg"
|
size="lg"
|
||||||
>
|
>
|
||||||
<Zap className="h-4 w-4 mr-2" />
|
<ExternalLink className="h-4 w-4 mr-2" />
|
||||||
{isZapping ? "Processing..." : "Pay with WebLN"}
|
Open in Lightning Wallet
|
||||||
</Button>
|
</Button>
|
||||||
)}
|
|
||||||
|
|
||||||
<Button
|
<div className="text-xs sm:text-[.65rem] text-muted-foreground text-center">
|
||||||
variant="outline"
|
Scan the QR code or copy the invoice to pay with any Lightning wallet.
|
||||||
onClick={openInWallet}
|
</div>
|
||||||
className="w-full"
|
|
||||||
size="lg"
|
|
||||||
>
|
|
||||||
<ExternalLink className="h-4 w-4 mr-2" />
|
|
||||||
Open in Lightning Wallet
|
|
||||||
</Button>
|
|
||||||
|
|
||||||
<div className="text-[.65rem] text-muted-foreground text-center">
|
|
||||||
Scan the QR code or copy the invoice to pay with any Lightning wallet.
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -306,137 +310,38 @@ export function ZapDialog({ target, children, className }: ZapDialogProps) {
|
|||||||
}
|
}
|
||||||
|
|
||||||
if (isMobile) {
|
if (isMobile) {
|
||||||
// Full screen payment view on mobile
|
// Use drawer for entire mobile flow, make it full-screen when showing invoice
|
||||||
if (invoice) {
|
|
||||||
return (
|
|
||||||
<div className="fixed inset-0 z-50 bg-background flex flex-col">
|
|
||||||
{/* Header with back and close buttons */}
|
|
||||||
<div className="flex items-center justify-between p-4 pb-0">
|
|
||||||
<Button
|
|
||||||
variant="ghost"
|
|
||||||
size="sm"
|
|
||||||
onClick={() => {
|
|
||||||
setInvoice(null);
|
|
||||||
setQrCodeUrl('');
|
|
||||||
}}
|
|
||||||
className="flex items-center gap-2"
|
|
||||||
>
|
|
||||||
<ArrowLeft className="h-4 w-4" />
|
|
||||||
</Button>
|
|
||||||
|
|
||||||
<h1 className="text-lg font-semibold">Lightning Payment</h1>
|
|
||||||
|
|
||||||
<Button
|
|
||||||
variant="ghost"
|
|
||||||
size="sm"
|
|
||||||
onClick={() => setOpen(false)}
|
|
||||||
>
|
|
||||||
<X className="h-4 w-4" />
|
|
||||||
<span className="sr-only">Close</span>
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Content */}
|
|
||||||
<div className="flex-1 overflow-y-auto p-4">
|
|
||||||
<div className="space-y-4">
|
|
||||||
{/* Payment amount display */}
|
|
||||||
<div className="text-center">
|
|
||||||
<div className="text-3xl font-bold">{amount} sats</div>
|
|
||||||
<div className="text-sm text-muted-foreground">Lightning Network Payment</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<Separator />
|
|
||||||
|
|
||||||
{/* QR Code */}
|
|
||||||
<div className="flex justify-center">
|
|
||||||
<Card className="p-6 max-w-full">
|
|
||||||
<CardContent className="p-0 flex justify-center">
|
|
||||||
{qrCodeUrl ? (
|
|
||||||
<img
|
|
||||||
src={qrCodeUrl}
|
|
||||||
alt="Lightning Invoice QR Code"
|
|
||||||
className="w-72 h-72 max-w-full max-h-full object-contain"
|
|
||||||
/>
|
|
||||||
) : (
|
|
||||||
<div className="w-72 h-72 max-w-full bg-muted animate-pulse rounded" />
|
|
||||||
)}
|
|
||||||
</CardContent>
|
|
||||||
</Card>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Invoice input */}
|
|
||||||
<div className="space-y-2">
|
|
||||||
<Label htmlFor="invoice">Lightning Invoice</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">
|
|
||||||
{hasWebLN && (
|
|
||||||
<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 ? "Processing..." : "Pay with WebLN"}
|
|
||||||
</Button>
|
|
||||||
)}
|
|
||||||
|
|
||||||
<Button
|
|
||||||
variant="outline"
|
|
||||||
onClick={openInWallet}
|
|
||||||
className="w-full"
|
|
||||||
size="lg"
|
|
||||||
>
|
|
||||||
<ExternalLink className="h-4 w-4 mr-2" />
|
|
||||||
Open in Lightning Wallet
|
|
||||||
</Button>
|
|
||||||
|
|
||||||
<div className="text-xs text-muted-foreground text-center px-2">
|
|
||||||
Scan the QR code or copy the invoice to pay with any Lightning wallet.
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
// Drawer for amount selection on mobile
|
|
||||||
return (
|
return (
|
||||||
<Drawer open={open} onOpenChange={setOpen}>
|
<Drawer
|
||||||
|
open={open}
|
||||||
|
onOpenChange={setOpen}
|
||||||
|
dismissible={true}
|
||||||
|
>
|
||||||
<DrawerTrigger asChild>
|
<DrawerTrigger asChild>
|
||||||
<div className={`cursor-pointer ${className || ''}`}>
|
<div className={`cursor-pointer ${className || ''}`}>
|
||||||
{children}
|
{children}
|
||||||
</div>
|
</div>
|
||||||
</DrawerTrigger>
|
</DrawerTrigger>
|
||||||
<DrawerContent className="max-h-[95vh]" data-testid="zap-modal">
|
<DrawerContent
|
||||||
|
className={invoice ? "h-[100vh] rounded-none" : "max-h-[95vh]"}
|
||||||
|
data-testid="zap-modal"
|
||||||
|
>
|
||||||
<DrawerHeader className="text-center relative">
|
<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 */}
|
{/* Close button */}
|
||||||
<DrawerClose asChild>
|
<DrawerClose asChild>
|
||||||
<Button
|
<Button
|
||||||
@ -450,13 +355,17 @@ export function ZapDialog({ target, children, className }: ZapDialogProps) {
|
|||||||
</DrawerClose>
|
</DrawerClose>
|
||||||
|
|
||||||
<DrawerTitle className="text-lg break-words pt-2">
|
<DrawerTitle className="text-lg break-words pt-2">
|
||||||
Send a Zap
|
{invoice ? 'Lightning Payment' : 'Send a Zap'}
|
||||||
</DrawerTitle>
|
</DrawerTitle>
|
||||||
<DrawerDescription className="text-sm break-words text-center">
|
<DrawerDescription className="text-sm break-words text-center">
|
||||||
Zaps are small Bitcoin payments that support the creator of this item. If you enjoyed this, consider sending a zap!
|
{invoice ? (
|
||||||
|
'Pay with Bitcoin Lightning Network'
|
||||||
|
) : (
|
||||||
|
'Zaps are small Bitcoin payments that support the creator of this item. If you enjoyed this, consider sending a zap!'
|
||||||
|
)}
|
||||||
</DrawerDescription>
|
</DrawerDescription>
|
||||||
</DrawerHeader>
|
</DrawerHeader>
|
||||||
<div className="overflow-y-auto">
|
<div className={invoice ? "flex-1 overflow-y-auto px-2 pb-4" : "overflow-y-auto"}>
|
||||||
<ZapContent />
|
<ZapContent />
|
||||||
</div>
|
</div>
|
||||||
</DrawerContent>
|
</DrawerContent>
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user