You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
58 lines
2.0 KiB
58 lines
2.0 KiB
import { useFetchEvent } from '@/hooks' |
|
import { extractZapInfoFromReceipt } from '@/lib/event' |
|
import { formatAmount } from '@/lib/lightning' |
|
import { toNote, toProfile } from '@/lib/link' |
|
import { cn } from '@/lib/utils' |
|
import { useSecondaryPage } from '@/PageManager' |
|
import { useNostr } from '@/providers/NostrProvider' |
|
import { Zap } from 'lucide-react' |
|
import { Event } from 'nostr-tools' |
|
import { useMemo } from 'react' |
|
import { useTranslation } from 'react-i18next' |
|
import ContentPreview from '../../ContentPreview' |
|
import { FormattedTimestamp } from '../../FormattedTimestamp' |
|
import UserAvatar from '../../UserAvatar' |
|
|
|
export function ZapNotification({ |
|
notification, |
|
isNew = false |
|
}: { |
|
notification: Event |
|
isNew?: boolean |
|
}) { |
|
const { t } = useTranslation() |
|
const { push } = useSecondaryPage() |
|
const { pubkey } = useNostr() |
|
const { senderPubkey, eventId, amount, comment } = useMemo( |
|
() => extractZapInfoFromReceipt(notification) ?? ({} as any), |
|
[notification] |
|
) |
|
const { event, isFetching } = useFetchEvent(eventId) |
|
|
|
if (!senderPubkey || !amount) return null |
|
|
|
return ( |
|
<div |
|
className="flex items-center justify-between cursor-pointer py-2" |
|
onClick={() => (eventId ? push(toNote(eventId)) : pubkey ? push(toProfile(pubkey)) : null)} |
|
> |
|
<div className="flex gap-2 items-center flex-1 w-0"> |
|
<UserAvatar userId={senderPubkey} size="small" /> |
|
<Zap size={24} className="text-yellow-400 shrink-0" /> |
|
<div className="font-semibold text-yellow-400 shrink-0"> |
|
{formatAmount(amount)} {t('sats')} |
|
</div> |
|
{comment && <div className="text-yellow-400 truncate">{comment}</div>} |
|
{eventId && !isFetching && ( |
|
<ContentPreview |
|
className={cn('truncate flex-1 w-0', isNew ? 'font-semibold' : 'text-muted-foreground')} |
|
event={event} |
|
/> |
|
)} |
|
</div> |
|
<div className="text-muted-foreground shrink-0"> |
|
<FormattedTimestamp timestamp={notification.created_at} short /> |
|
</div> |
|
</div> |
|
) |
|
}
|
|
|