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 && (