6dc619ee91
ZapButton already fetched zap receipts for every visitor but returned null
unless you were logged in, so visitors saw no social proof. Now it renders a
read-only '⚡ <total>' whenever there are zaps (with a zap-count tooltip) and
only requires login to OPEN the zap dialog. No extra network cost — the query
already ran unconditionally.
81 lines
No EOL
2.5 KiB
TypeScript
81 lines
No EOL
2.5 KiB
TypeScript
import { ZapDialog } from '@/components/ZapDialog';
|
|
import { useZaps } from '@/hooks/useZaps';
|
|
import { useWallet } from '@/hooks/useWallet';
|
|
import { useCurrentUser } from '@/hooks/useCurrentUser';
|
|
import { useAuthor } from '@/hooks/useAuthor';
|
|
import { Zap } from 'lucide-react';
|
|
import type { Event } from 'nostr-tools';
|
|
|
|
interface ZapButtonProps {
|
|
target: Event;
|
|
className?: string;
|
|
showCount?: boolean;
|
|
zapData?: { count: number; totalSats: number; isLoading?: boolean };
|
|
}
|
|
|
|
export function ZapButton({
|
|
target,
|
|
className = "text-xs ml-1",
|
|
showCount = true,
|
|
zapData: externalZapData
|
|
}: ZapButtonProps) {
|
|
const { user } = useCurrentUser();
|
|
const { data: author } = useAuthor(target?.pubkey || '');
|
|
const { webln, activeNWC } = useWallet();
|
|
|
|
// Only fetch data if not provided externally
|
|
const { totalSats: fetchedTotalSats, zapCount: fetchedZapCount, isLoading } = useZaps(
|
|
externalZapData ? [] : target ?? [], // Empty array prevents fetching if external data provided
|
|
webln,
|
|
activeNWC
|
|
);
|
|
|
|
if (!target) {
|
|
return null;
|
|
}
|
|
|
|
// Use external data if provided, otherwise use fetched data
|
|
const totalSats = externalZapData?.totalSats ?? fetchedTotalSats;
|
|
const zapCount = externalZapData?.count ?? fetchedZapCount;
|
|
const showLoading = externalZapData?.isLoading || isLoading;
|
|
|
|
const hasLightning = !!(author?.metadata?.lud16 || author?.metadata?.lud06);
|
|
const canZap = !!user && user.pubkey !== target.pubkey && hasLightning;
|
|
|
|
/**
|
|
* Read-only total. Zaps are social proof, so the count is shown to EVERYONE —
|
|
* logged-out visitors included — not just to people who can zap. This costs
|
|
* no extra network work: `useZaps` already runs above regardless of login.
|
|
*/
|
|
if (!canZap) {
|
|
if (!showCount || showLoading || totalSats <= 0) {
|
|
return null;
|
|
}
|
|
return (
|
|
<span
|
|
className={`flex items-center gap-1 ${className}`}
|
|
title={`${zapCount.toLocaleString()} zap${zapCount === 1 ? '' : 's'}`}
|
|
>
|
|
<Zap className="h-4 w-4" />
|
|
<span className="text-xs">{totalSats.toLocaleString()}</span>
|
|
</span>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<ZapDialog target={target}>
|
|
<div className={`flex items-center gap-1 ${className}`}>
|
|
<Zap className="h-4 w-4" />
|
|
<span className="text-xs">
|
|
{showLoading ? (
|
|
'...'
|
|
) : showCount && totalSats > 0 ? (
|
|
`${totalSats.toLocaleString()}`
|
|
) : (
|
|
'Zap'
|
|
)}
|
|
</span>
|
|
</div>
|
|
</ZapDialog>
|
|
);
|
|
} |