diff --git a/src/Element/Zap.tsx b/src/Element/Zap.tsx index 36bbc162..e0ca66f5 100644 --- a/src/Element/Zap.tsx +++ b/src/Element/Zap.tsx @@ -1,4 +1,5 @@ import "./Zap.css"; +import { useMemo } from "react"; import { useSelector } from "react-redux"; // @ts-expect-error import { decode as invoiceDecode } from "light-bolt11-decoder"; @@ -79,7 +80,7 @@ const Zap = ({ zap, showZapped = true }: { zap: ParsedZap, showZapped?: boolean return valid ? (
- {zapper && } + {zapper ? :
Anon 
} {p !== pubKey && showZapped && }
{formatShort(amount)} sats @@ -87,7 +88,7 @@ const Zap = ({ zap, showZapped = true }: { zap: ParsedZap, showZapped?: boolean
{ - const topZap = zaps.length > 0 && zaps.reduce((acc, z) => { - return z.amount > acc.amount ? z : acc - }) - const restZaps = zaps.filter(z => topZap && z.id !== topZap.id) + const sortedZaps = useMemo(() => { + const pub = [...zaps.filter(z => z.zapper)] + const priv = [...zaps.filter(z => !z.zapper)] + pub.sort((a, b) => b.amount - a.amount) + return pub.concat(priv) + }, [zaps]) + + if (zaps.length === 0) { + return null + } + + const [topZap, ...restZaps] = sortedZaps const restZapsTotal = restZaps.reduce((acc, z) => acc + z.amount, 0) - const { zapper, amount, content, valid } = topZap || {} + const { zapper, amount, content, valid } = topZap return (
- {amount && valid && zapper && ( + {amount && (
- + {zapper ? :
Anon 
}
zapped {formatShort(amount)} sats
@@ -120,7 +129,7 @@ export const ZapsSummary = ({ zaps }: ZapsSummaryProps) => {
{content && (