mirror of
https://github.com/luminous-devs/lume.git
synced 2024-09-19 11:43:30 +00:00
display zap in note metadata
This commit is contained in:
parent
b2199e81b8
commit
20d31be7bc
@ -22,6 +22,7 @@
|
|||||||
"dayjs": "^1.11.7",
|
"dayjs": "^1.11.7",
|
||||||
"destr": "^1.2.2",
|
"destr": "^1.2.2",
|
||||||
"jotai": "^2.1.0",
|
"jotai": "^2.1.0",
|
||||||
|
"light-bolt11-decoder": "^3.0.0",
|
||||||
"nostr-relaypool": "^0.6.27",
|
"nostr-relaypool": "^0.6.27",
|
||||||
"nostr-tools": "^1.10.1",
|
"nostr-tools": "^1.10.1",
|
||||||
"react": "^18.2.0",
|
"react": "^18.2.0",
|
||||||
|
@ -28,6 +28,9 @@ dependencies:
|
|||||||
jotai:
|
jotai:
|
||||||
specifier: ^2.1.0
|
specifier: ^2.1.0
|
||||||
version: 2.1.0(react@18.2.0)
|
version: 2.1.0(react@18.2.0)
|
||||||
|
light-bolt11-decoder:
|
||||||
|
specifier: ^3.0.0
|
||||||
|
version: 3.0.0
|
||||||
nostr-relaypool:
|
nostr-relaypool:
|
||||||
specifier: ^0.6.27
|
specifier: ^0.6.27
|
||||||
version: 0.6.27(ws@8.13.0)
|
version: 0.6.27(ws@8.13.0)
|
||||||
@ -1558,6 +1561,12 @@ packages:
|
|||||||
engines: {node: '>=6'}
|
engines: {node: '>=6'}
|
||||||
dev: false
|
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:
|
/lilconfig@2.1.0:
|
||||||
resolution: {integrity: sha512-utWOt/GHzuUxnLKxB6dk81RoOeoNeHgbrXiuGk4yyF5qlRz+iIVWu56E2fqGHFrXz0QNUhLB/8nKqvRH66JKGQ==}
|
resolution: {integrity: sha512-utWOt/GHzuUxnLKxB6dk81RoOeoNeHgbrXiuGk4yyF5qlRz+iIVWu56E2fqGHFrXz0QNUhLB/8nKqvRH66JKGQ==}
|
||||||
engines: {node: '>=10'}
|
engines: {node: '>=10'}
|
||||||
|
@ -3,10 +3,9 @@ import NoteRepost from "@app/note/components/metadata/repost";
|
|||||||
|
|
||||||
import { RelayContext } from "@shared/relayProvider";
|
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 { READONLY_RELAYS } from "@stores/constants";
|
||||||
|
import { decode } from "light-bolt11-decoder";
|
||||||
import { useContext, useState } from "react";
|
import { useContext, useState } from "react";
|
||||||
import useSWRSubscription from "swr/subscription";
|
import useSWRSubscription from "swr/subscription";
|
||||||
|
|
||||||
@ -18,6 +17,7 @@ export default function NoteMetadata({
|
|||||||
|
|
||||||
const [replies, setReplies] = useState(0);
|
const [replies, setReplies] = useState(0);
|
||||||
const [reposts, setReposts] = useState(0);
|
const [reposts, setReposts] = useState(0);
|
||||||
|
const [zaps, setZaps] = useState(0);
|
||||||
|
|
||||||
useSWRSubscription(id ? ["note-metadata", id] : null, ([, key]) => {
|
useSWRSubscription(id ? ["note-metadata", id] : null, ([, key]) => {
|
||||||
const unsubscribe = pool.subscribe(
|
const unsubscribe = pool.subscribe(
|
||||||
@ -25,7 +25,7 @@ export default function NoteMetadata({
|
|||||||
{
|
{
|
||||||
"#e": [key],
|
"#e": [key],
|
||||||
since: 0,
|
since: 0,
|
||||||
kinds: [1, 6],
|
kinds: [1, 6, 9735],
|
||||||
limit: 20,
|
limit: 20,
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
@ -38,6 +38,17 @@ export default function NoteMetadata({
|
|||||||
case 6:
|
case 6:
|
||||||
setReposts((reposts) => reposts + 1);
|
setReposts((reposts) => reposts + 1);
|
||||||
break;
|
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:
|
default:
|
||||||
break;
|
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">
|
<div className="mt-4 flex h-12 items-center gap-16 border-t border-zinc-800/50">
|
||||||
<NoteReply id={id} replies={replies} />
|
<NoteReply id={id} replies={replies} />
|
||||||
<NoteRepost id={id} pubkey={eventPubkey} reposts={reposts} />
|
<NoteRepost id={id} pubkey={eventPubkey} reposts={reposts} />
|
||||||
<button
|
<NoteZap zaps={zaps} />
|
||||||
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>
|
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
@ -53,7 +53,7 @@ export default function NoteLike({
|
|||||||
<button
|
<button
|
||||||
type="button"
|
type="button"
|
||||||
onClick={(e) => submitEvent(e)}
|
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
|
<LikeIcon
|
||||||
width={16}
|
width={16}
|
||||||
|
@ -64,7 +64,7 @@ export default function NoteReply({
|
|||||||
<button
|
<button
|
||||||
type="button"
|
type="button"
|
||||||
onClick={() => openModal()}
|
onClick={() => openModal()}
|
||||||
className="group inline-flex w-min items-center gap-1.5"
|
className="group inline-flex items-center gap-1.5"
|
||||||
>
|
>
|
||||||
<ReplyIcon
|
<ReplyIcon
|
||||||
width={16}
|
width={16}
|
||||||
|
@ -53,7 +53,7 @@ export default function NoteRepost({
|
|||||||
<button
|
<button
|
||||||
type="button"
|
type="button"
|
||||||
onClick={(e) => submitEvent(e)}
|
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
|
<RepostIcon
|
||||||
width={16}
|
width={16}
|
||||||
|
27
src/app/note/components/metadata/zap.tsx
Normal file
27
src/app/note/components/metadata/zap.tsx
Normal file
@ -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>
|
||||||
|
);
|
||||||
|
}
|
@ -5,15 +5,18 @@ export default function ZapIcon(
|
|||||||
) {
|
) {
|
||||||
return (
|
return (
|
||||||
<svg
|
<svg
|
||||||
|
width={24}
|
||||||
|
height={24}
|
||||||
viewBox="0 0 24 24"
|
viewBox="0 0 24 24"
|
||||||
fill="none"
|
fill="none"
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
{...props}
|
{...props}
|
||||||
>
|
>
|
||||||
<path
|
<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"
|
stroke="currentColor"
|
||||||
strokeWidth={1.5}
|
strokeWidth={1.5}
|
||||||
|
strokeLinecap="round"
|
||||||
strokeLinejoin="round"
|
strokeLinejoin="round"
|
||||||
/>
|
/>
|
||||||
</svg>
|
</svg>
|
||||||
|
Loading…
Reference in New Issue
Block a user