mirror of
https://gitlab.com/soapbox-pub/mkstack.git
synced 2025-08-27 13:09:22 +00:00
fix state issue which resulted in text edits causing repeated focus loss
This commit is contained in:
Chad Curtis
parent
230183bd0c
commit
0484b10a96
@ -1,4 +1,4 @@
|
|||||||
import { useState, useEffect, useRef } from 'react';
|
import { useState, useEffect, useRef, forwardRef } from 'react';
|
||||||
import { Zap, Copy, Check, ExternalLink, Sparkle, Sparkles, Star, Rocket, ArrowLeft, X } from 'lucide-react';
|
import { Zap, Copy, Check, ExternalLink, Sparkle, Sparkles, Star, Rocket, ArrowLeft, X } from 'lucide-react';
|
||||||
import { Button } from '@/components/ui/button';
|
import { Button } from '@/components/ui/button';
|
||||||
import {
|
import {
|
||||||
@ -47,6 +47,193 @@ const presetAmounts = [
|
|||||||
{ amount: 1000, icon: Rocket },
|
{ amount: 1000, icon: Rocket },
|
||||||
];
|
];
|
||||||
|
|
||||||
|
interface ZapContentProps {
|
||||||
|
invoice: string | null;
|
||||||
|
amount: number | string;
|
||||||
|
comment: string;
|
||||||
|
isZapping: boolean;
|
||||||
|
qrCodeUrl: string;
|
||||||
|
copied: boolean;
|
||||||
|
hasWebLN: boolean;
|
||||||
|
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;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Moved ZapContent outside of ZapDialog to prevent re-renders causing focus loss
|
||||||
|
const ZapContent = forwardRef<HTMLDivElement, ZapContentProps>(({
|
||||||
|
invoice,
|
||||||
|
amount,
|
||||||
|
comment,
|
||||||
|
isZapping,
|
||||||
|
qrCodeUrl,
|
||||||
|
copied,
|
||||||
|
hasWebLN,
|
||||||
|
handleZap,
|
||||||
|
handleCopy,
|
||||||
|
openInWallet,
|
||||||
|
setAmount,
|
||||||
|
setComment,
|
||||||
|
inputRef,
|
||||||
|
zap,
|
||||||
|
}, ref) => (
|
||||||
|
<div ref={ref}>
|
||||||
|
{invoice ? (
|
||||||
|
<div className="flex flex-col h-full min-h-0">
|
||||||
|
{/* Payment amount display */}
|
||||||
|
<div className="text-center">
|
||||||
|
<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">
|
||||||
|
{/* QR Code */}
|
||||||
|
<div className="flex justify-center px-2 sm:px-4">
|
||||||
|
<Card className="p-2 sm:p-4 w-full [@media(max-height:680px)]:max-w-[65vw] max-w-[95vw] sm:max-w-sm">
|
||||||
|
<CardContent className="p-0 flex justify-center">
|
||||||
|
{qrCodeUrl ? (
|
||||||
|
<img
|
||||||
|
src={qrCodeUrl}
|
||||||
|
alt="Lightning Invoice QR Code"
|
||||||
|
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">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>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<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 sm: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 className="grid gap-4 px-4 py-4 w-full overflow-hidden">
|
||||||
|
<ToggleGroup
|
||||||
|
type="single"
|
||||||
|
value={String(amount)}
|
||||||
|
onValueChange={(value) => {
|
||||||
|
if (value) {
|
||||||
|
setAmount(parseInt(value, 10));
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
className="grid grid-cols-5 gap-2 w-full"
|
||||||
|
>
|
||||||
|
{presetAmounts.map(({ amount: presetAmount, icon: Icon }) => (
|
||||||
|
<ToggleGroupItem
|
||||||
|
key={presetAmount}
|
||||||
|
value={String(presetAmount)}
|
||||||
|
className="flex flex-col h-auto min-w-0 text-sm px-2 py-3"
|
||||||
|
>
|
||||||
|
<Icon className="h-5 w-5 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">OR</span>
|
||||||
|
<div className="h-px flex-1 bg-muted" />
|
||||||
|
</div>
|
||||||
|
<Input
|
||||||
|
ref={inputRef}
|
||||||
|
id="custom-amount"
|
||||||
|
type="number"
|
||||||
|
placeholder="Custom amount"
|
||||||
|
value={amount}
|
||||||
|
onChange={(e) => setAmount(e.target.value)}
|
||||||
|
className="w-full"
|
||||||
|
/>
|
||||||
|
<Textarea
|
||||||
|
id="custom-comment"
|
||||||
|
placeholder="Custom comment"
|
||||||
|
value={comment}
|
||||||
|
onChange={(e) => setComment(e.target.value)}
|
||||||
|
className="w-full resize-none"
|
||||||
|
rows={3}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className="px-4 pb-4">
|
||||||
|
<Button onClick={handleZap} className="w-full" disabled={isZapping} size="lg">
|
||||||
|
{isZapping ? (
|
||||||
|
'Creating invoice...'
|
||||||
|
) : (
|
||||||
|
<>
|
||||||
|
<Zap className="h-4 w-4 mr-2" />
|
||||||
|
Zap {amount} sats
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
));
|
||||||
|
ZapContent.displayName = 'ZapContent';
|
||||||
|
|
||||||
|
|
||||||
export function ZapDialog({ target, children, className }: ZapDialogProps) {
|
export function ZapDialog({ target, children, className }: ZapDialogProps) {
|
||||||
const [open, setOpen] = useState(false);
|
const [open, setOpen] = useState(false);
|
||||||
const { user } = useCurrentUser();
|
const { user } = useCurrentUser();
|
||||||
@ -152,158 +339,22 @@ export function ZapDialog({ target, children, className }: ZapDialogProps) {
|
|||||||
zap(finalAmount, comment);
|
zap(finalAmount, comment);
|
||||||
};
|
};
|
||||||
|
|
||||||
// Shared content component
|
const contentProps = {
|
||||||
const ZapContent = () => (
|
invoice,
|
||||||
<>
|
amount,
|
||||||
{invoice ? (
|
comment,
|
||||||
<div className="flex flex-col h-full min-h-0">
|
isZapping,
|
||||||
{/* Payment amount display */}
|
qrCodeUrl,
|
||||||
<div className="text-center">
|
copied,
|
||||||
<div className="text-2xl font-bold">{amount} sats</div>
|
hasWebLN,
|
||||||
</div>
|
handleZap,
|
||||||
|
handleCopy,
|
||||||
<Separator className="my-4" />
|
openInWallet,
|
||||||
|
setAmount,
|
||||||
<div className="flex flex-col justify-center min-h-0 flex-1">
|
setComment,
|
||||||
{/* QR Code */}
|
inputRef,
|
||||||
<div className="flex justify-center px-2 sm:px-4">
|
zap,
|
||||||
<Card className="p-2 sm:p-4 w-full [@media(max-height:680px)]:max-w-[65vw] max-w-[95vw] sm:max-w-sm">
|
};
|
||||||
<CardContent className="p-0 flex justify-center">
|
|
||||||
{qrCodeUrl ? (
|
|
||||||
<img
|
|
||||||
src={qrCodeUrl}
|
|
||||||
alt="Lightning Invoice QR Code"
|
|
||||||
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">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>
|
|
||||||
)}
|
|
||||||
|
|
||||||
<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 sm: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 className="grid gap-4 px-4 py-4 w-full overflow-hidden">
|
|
||||||
<ToggleGroup
|
|
||||||
type="single"
|
|
||||||
value={String(amount)}
|
|
||||||
onValueChange={(value) => {
|
|
||||||
if (value) {
|
|
||||||
setAmount(parseInt(value, 10));
|
|
||||||
}
|
|
||||||
}}
|
|
||||||
className="grid grid-cols-5 gap-2 w-full"
|
|
||||||
>
|
|
||||||
{presetAmounts.map(({ amount: presetAmount, icon: Icon }) => (
|
|
||||||
<ToggleGroupItem
|
|
||||||
key={presetAmount}
|
|
||||||
value={String(presetAmount)}
|
|
||||||
className="flex flex-col h-auto min-w-0 text-sm px-2 py-3"
|
|
||||||
>
|
|
||||||
<Icon className="h-5 w-5 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">OR</span>
|
|
||||||
<div className="h-px flex-1 bg-muted" />
|
|
||||||
</div>
|
|
||||||
<Input
|
|
||||||
ref={inputRef}
|
|
||||||
id="custom-amount"
|
|
||||||
type="number"
|
|
||||||
placeholder="Custom amount"
|
|
||||||
value={amount}
|
|
||||||
onChange={(e) => setAmount(e.target.value)}
|
|
||||||
className="w-full"
|
|
||||||
/>
|
|
||||||
<Textarea
|
|
||||||
id="custom-comment"
|
|
||||||
placeholder="Custom comment"
|
|
||||||
value={comment}
|
|
||||||
onChange={(e) => setComment(e.target.value)}
|
|
||||||
className="w-full resize-none"
|
|
||||||
rows={3}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div className="px-4 pb-4">
|
|
||||||
<Button onClick={handleZap} className="w-full" disabled={isZapping} size="lg">
|
|
||||||
{isZapping ? (
|
|
||||||
'Creating invoice...'
|
|
||||||
) : (
|
|
||||||
<>
|
|
||||||
<Zap className="h-4 w-4 mr-2" />
|
|
||||||
Zap {amount} sats
|
|
||||||
</>
|
|
||||||
)}
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
</>
|
|
||||||
)}
|
|
||||||
</>
|
|
||||||
);
|
|
||||||
|
|
||||||
if (!user || user.pubkey === target.pubkey || !author?.metadata?.lud06 && !author?.metadata?.lud16) {
|
if (!user || user.pubkey === target.pubkey || !author?.metadata?.lud06 && !author?.metadata?.lud16) {
|
||||||
return null;
|
return null;
|
||||||
@ -366,7 +417,7 @@ export function ZapDialog({ target, children, className }: ZapDialogProps) {
|
|||||||
</DrawerDescription>
|
</DrawerDescription>
|
||||||
</DrawerHeader>
|
</DrawerHeader>
|
||||||
<div className={invoice ? "flex-1 overflow-y-auto px-2 pb-4" : "overflow-y-auto"}>
|
<div className={invoice ? "flex-1 overflow-y-auto px-2 pb-4" : "overflow-y-auto"}>
|
||||||
<ZapContent />
|
<ZapContent {...contentProps} />
|
||||||
</div>
|
</div>
|
||||||
</DrawerContent>
|
</DrawerContent>
|
||||||
</Drawer>
|
</Drawer>
|
||||||
@ -396,7 +447,7 @@ export function ZapDialog({ target, children, className }: ZapDialogProps) {
|
|||||||
</DialogDescription>
|
</DialogDescription>
|
||||||
</DialogHeader>
|
</DialogHeader>
|
||||||
<div className="overflow-y-auto">
|
<div className="overflow-y-auto">
|
||||||
<ZapContent />
|
<ZapContent {...contentProps} />
|
||||||
</div>
|
</div>
|
||||||
</DialogContent>
|
</DialogContent>
|
||||||
</Dialog>
|
</Dialog>
|
||||||
|
|||||||
@ -1,4 +1,4 @@
|
|||||||
import { useState, useMemo, useEffect } from 'react';
|
import { useState, useMemo, useEffect, useCallback } from 'react';
|
||||||
import { useCurrentUser } from '@/hooks/useCurrentUser';
|
import { useCurrentUser } from '@/hooks/useCurrentUser';
|
||||||
import { useAuthor } from '@/hooks/useAuthor';
|
import { useAuthor } from '@/hooks/useAuthor';
|
||||||
import { useAppContext } from '@/hooks/useAppContext';
|
import { useAppContext } from '@/hooks/useAppContext';
|
||||||
@ -303,6 +303,10 @@ export function useZaps(
|
|||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
|
const resetInvoice = useCallback(() => {
|
||||||
|
setInvoice(null);
|
||||||
|
}, []);
|
||||||
|
|
||||||
return {
|
return {
|
||||||
zaps,
|
zaps,
|
||||||
zapCount,
|
zapCount,
|
||||||
@ -312,5 +316,6 @@ export function useZaps(
|
|||||||
isZapping,
|
isZapping,
|
||||||
invoice,
|
invoice,
|
||||||
setInvoice,
|
setInvoice,
|
||||||
|
resetInvoice,
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user