85 lines
3.1 KiB
TypeScript
85 lines
3.1 KiB
TypeScript
import { useSecondaryPage } from '@/PageManager'
|
|
import { useNoteStatsById } from '@/hooks/useNoteStatsById'
|
|
import { formatAmount } from '@/lib/lightning'
|
|
import { toProfile } from '@/lib/link'
|
|
import { useScreenSize } from '@/providers/ScreenSizeProvider'
|
|
import { Zap } from 'lucide-react'
|
|
import { Event } from 'nostr-tools'
|
|
import { useEffect, useMemo, useRef, useState } from 'react'
|
|
import { useTranslation } from 'react-i18next'
|
|
import Content from '../Content'
|
|
import { FormattedTimestamp } from '../FormattedTimestamp'
|
|
import Nip05 from '../Nip05'
|
|
import UserAvatar from '../UserAvatar'
|
|
import Username from '../Username'
|
|
|
|
const SHOW_COUNT = 20
|
|
|
|
export default function ZapList({ event }: { event: Event }) {
|
|
const { t } = useTranslation()
|
|
const { push } = useSecondaryPage()
|
|
const { isSmallScreen } = useScreenSize()
|
|
const noteStats = useNoteStatsById(event.id)
|
|
const filteredZaps = useMemo(() => {
|
|
return (noteStats?.zaps ?? []).sort((a, b) => b.amount - a.amount)
|
|
}, [noteStats, event.id])
|
|
|
|
const [showCount, setShowCount] = useState(SHOW_COUNT)
|
|
const bottomRef = useRef<HTMLDivElement | null>(null)
|
|
|
|
useEffect(() => {
|
|
if (!bottomRef.current || filteredZaps.length <= showCount) return
|
|
const obs = new IntersectionObserver(
|
|
([entry]) => {
|
|
if (entry.isIntersecting) setShowCount((c) => c + SHOW_COUNT)
|
|
},
|
|
{ rootMargin: '10px', threshold: 0.1 }
|
|
)
|
|
obs.observe(bottomRef.current)
|
|
return () => obs.disconnect()
|
|
}, [filteredZaps.length, showCount])
|
|
|
|
return (
|
|
<div className="min-h-[80vh]">
|
|
{filteredZaps.slice(0, showCount).map((zap) => (
|
|
<div
|
|
key={zap.pr}
|
|
className="px-4 py-3 border-b transition-colors clickable flex gap-2"
|
|
onClick={() => push(toProfile(zap.pubkey))}
|
|
>
|
|
<div className="w-8 flex flex-col items-center mt-0.5">
|
|
<Zap className="text-yellow-400 size-5" />
|
|
<div className="text-sm font-semibold text-yellow-400">{formatAmount(zap.amount)}</div>
|
|
</div>
|
|
|
|
<div className="flex space-x-2 items-start">
|
|
<UserAvatar userId={zap.pubkey} size="medium" className="shrink-0 mt-0.5" />
|
|
<div className="flex-1">
|
|
<Username
|
|
userId={zap.pubkey}
|
|
className="text-sm font-semibold text-muted-foreground hover:text-foreground max-w-fit truncate"
|
|
skeletonClassName="h-3"
|
|
/>
|
|
<div className="flex items-center gap-1 text-sm text-muted-foreground">
|
|
<Nip05 pubkey={zap.pubkey} append="·" />
|
|
<FormattedTimestamp
|
|
timestamp={zap.created_at}
|
|
className="shrink-0"
|
|
short={isSmallScreen}
|
|
/>
|
|
</div>
|
|
<Content className="mt-2" content={zap.comment} />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
))}
|
|
|
|
<div ref={bottomRef} />
|
|
|
|
<div className="text-sm mt-2 text-center text-muted-foreground">
|
|
{filteredZaps.length > 0 ? t('No more zaps') : t('No zaps yet')}
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|