display zap in note metadata

package.json

@@ -22,6 +22,7 @@
     "dayjs": "^1.11.7",
     "destr": "^1.2.2",
     "jotai": "^2.1.0",
+    "light-bolt11-decoder": "^3.0.0",
     "nostr-relaypool": "^0.6.27",
     "nostr-tools": "^1.10.1",
     "react": "^18.2.0",

pnpm-lock.yaml

@@ -28,6 +28,9 @@ dependencies:
   jotai:
     specifier: ^2.1.0
     version: 2.1.0(react@18.2.0)
+  light-bolt11-decoder:
+    specifier: ^3.0.0
+    version: 3.0.0
   nostr-relaypool:
     specifier: ^0.6.27
     version: 0.6.27(ws@8.13.0)
@@ -1558,6 +1561,12 @@ packages:
     engines: {node: '>=6'}
     dev: false
 
+  /light-bolt11-decoder@3.0.0:
+    resolution: {integrity: sha512-AKvOigD2pmC8ktnn2TIqdJu0K0qk6ukUmTvHwF3JNkm8uWCqt18Ijn33A/a7gaRZ4PghJ59X+8+MXrzLKdBTmQ==}
+    dependencies:
+      '@scure/base': 1.1.1
+    dev: false
+
   /lilconfig@2.1.0:
     resolution: {integrity: sha512-utWOt/GHzuUxnLKxB6dk81RoOeoNeHgbrXiuGk4yyF5qlRz+iIVWu56E2fqGHFrXz0QNUhLB/8nKqvRH66JKGQ==}
     engines: {node: '>=10'}

src/app/note/components/metadata.tsx

@@ -3,10 +3,9 @@ import NoteRepost from "@app/note/components/metadata/repost";
 
 import { RelayContext } from "@shared/relayProvider";
 
-import ZapIcon from "@icons/zap";
-
+import NoteZap from "@app/note/components/metadata/zap";
 import { READONLY_RELAYS } from "@stores/constants";
-
+import { decode } from "light-bolt11-decoder";
 import { useContext, useState } from "react";
 import useSWRSubscription from "swr/subscription";
 
@@ -18,6 +17,7 @@ export default function NoteMetadata({
 
 	const [replies, setReplies] = useState(0);
 	const [reposts, setReposts] = useState(0);
+	const [zaps, setZaps] = useState(0);
 
 	useSWRSubscription(id ? ["note-metadata", id] : null, ([, key]) => {
 		const unsubscribe = pool.subscribe(
@@ -25,7 +25,7 @@ export default function NoteMetadata({
 				{
 					"#e": [key],
 					since: 0,
-					kinds: [1, 6],
+					kinds: [1, 6, 9735],
 					limit: 20,
 				},
 			],
@@ -38,6 +38,17 @@ export default function NoteMetadata({
 					case 6:
 						setReposts((reposts) => reposts + 1);
 						break;
+					case 9735: {
+						const bolt11 = event.tags.find((tag) => tag[0] === "bolt11")[1];
+						if (bolt11) {
+							const decoded = decode(bolt11);
+							const amount = decoded.sections.find(
+								(item) => item.name === "amount",
+							);
+							setZaps(amount.value / 1000);
+						}
+						break;
+					}
 					default:
 						break;
 				}
@@ -53,19 +64,7 @@ export default function NoteMetadata({
 		<div className="mt-4 flex h-12 items-center gap-16 border-t border-zinc-800/50">
 			<NoteReply id={id} replies={replies} />
 			<NoteRepost id={id} pubkey={eventPubkey} reposts={reposts} />
-			<button
-				type="button"
-				className="group inline-flex w-min items-center gap-1.5"
-			>
-				<ZapIcon
-					width={20}
-					height={20}
-					className="text-zinc-400 group-hover:text-orange-400"
-				/>
-				<span className="text-sm leading-none text-zinc-400 group-hover:text-zinc-200">
-					{0}
-				</span>
-			</button>
+			<NoteZap zaps={zaps} />
 		</div>
 	);
 }

src/app/note/components/metadata/like.tsx

@@ -53,7 +53,7 @@ export default function NoteLike({
 		<button
 			type="button"
 			onClick={(e) => submitEvent(e)}
-			className="group inline-flex w-min items-center gap-1.5"
+			className="group inline-flex items-center gap-1.5"
 		>
 			<LikeIcon
 				width={16}

src/app/note/components/metadata/reply.tsx

@@ -64,7 +64,7 @@ export default function NoteReply({
 			<button
 				type="button"
 				onClick={() => openModal()}
-				className="group inline-flex w-min items-center gap-1.5"
+				className="group inline-flex items-center gap-1.5"
 			>
 				<ReplyIcon
 					width={16}

src/app/note/components/metadata/repost.tsx

@@ -53,7 +53,7 @@ export default function NoteRepost({
 		<button
 			type="button"
 			onClick={(e) => submitEvent(e)}
-			className="group inline-flex w-min items-center gap-1.5"
+			className="group inline-flex items-center gap-1.5"
 		>
 			<RepostIcon
 				width={16}

src/app/note/components/metadata/zap.tsx

@@ -0,0 +1,27 @@
+import ZapIcon from "@shared/icons/zap";
+import { useEffect, useMemo, useState } from "react";
+
+export default function NoteZap({ zaps }: { zaps: number }) {
+	const formatter = useMemo(
+		() => Intl.NumberFormat("en", { notation: "compact" }),
+		[],
+	);
+	const [count, setCount] = useState(0);
+
+	useEffect(() => {
+		setCount(zaps);
+	}, [zaps]);
+
+	return (
+		<button type="button" className="group inline-flex items-center gap-1.5">
+			<ZapIcon
+				width={16}
+				height={16}
+				className="text-zinc-400 group-hover:text-orange-400"
+			/>
+			<span className="text-sm leading-none text-zinc-400 group-hover:text-zinc-200">
+				{formatter.format(count)} sats
+			</span>
+		</button>
+	);
+}

src/shared/icons/zap.tsx

@@ -5,15 +5,18 @@ export default function ZapIcon(
 ) {
 	return (
 		<svg
+			width={24}
+			height={24}
 			viewBox="0 0 24 24"
 			fill="none"
 			xmlns="http://www.w3.org/2000/svg"
 			{...props}
 		>
 			<path
-				d="M20.25 8.75H13.25V1.75L3.75 15.0473H10.75V22.25L20.25 8.75Z"
+				d="M3.75 12.75L8.75 2.75H18L15.25 8.25H21.25L6.75 21.25L8.89706 12.75H3.75Z"
 				stroke="currentColor"
 				strokeWidth={1.5}
+				strokeLinecap="round"
 				strokeLinejoin="round"
 			/>
 		</svg>