reya/lume
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor(ark): add note provider

Browse Source
This commit is contained in:
reya
2023-12-27 10:52:13 +07:00
parent 3956ed622d
commit b4dac2d477
38 changed files with 793 additions and 1140 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
packages/ark/src/components/note/buttons/pin.tsx
View File

@@ -1,9 +1,11 @@
import { PinIcon } from "@lume/icons";
import { WIDGET_KIND } from "@lume/utils";
import * as Tooltip from "@radix-ui/react-tooltip";
import { useNoteContext } from "..";
import { useWidget } from "../../../hooks/useWidget";
export function NotePin({ eventId }: { eventId: string }) {
export function NotePin() {
const event = useNoteContext();
const { addWidget } = useWidget();
return (
@@ -16,19 +18,19 @@ export function NotePin({ eventId }: { eventId: string }) {
addWidget.mutate({
kind: WIDGET_KIND.thread,
title: "Thread",
content: eventId,
content: event.id,
})
}
className="inline-flex h-7 w-max items-center justify-center gap-2 rounded-full bg-neutral-100 px-2 text-sm font-medium dark:bg-neutral-900"
className="inline-flex h-7 w-max items-center justify-center gap-2 rounded-full bg-neutral-100 hover:bg-neutral-200 dark:hover:bg-neutral-800 px-2 text-sm font-medium dark:bg-neutral-900"
>
<PinIcon className="size-4" />
Pin
</button>
</Tooltip.Trigger>
<Tooltip.Portal>
<Tooltip.Content className="-left-10 inline-flex h-7 select-none items-center justify-center rounded-md bg-neutral-200 px-3.5 text-sm text-neutral-900 will-change-[transform,opacity] data-[state=delayed-open]:data-[side=bottom]:animate-slideUpAndFade data-[state=delayed-open]:data-[side=left]:animate-slideRightAndFade data-[state=delayed-open]:data-[side=right]:animate-slideLeftAndFade data-[state=delayed-open]:data-[side=top]:animate-slideDownAndFade dark:bg-neutral-800 dark:text-neutral-100">
<Tooltip.Content className="bg-neutral-950 text-white -left-10 inline-flex h-7 select-none items-center justify-center rounded-md px-3.5 text-sm will-change-[transform,opacity] data-[state=delayed-open]:data-[side=bottom]:animate-slideUpAndFade data-[state=delayed-open]:data-[side=left]:animate-slideRightAndFade data-[state=delayed-open]:data-[side=right]:animate-slideLeftAndFade data-[state=delayed-open]:data-[side=top]:animate-slideDownAndFade">
Pin note
<Tooltip.Arrow className="fill-neutral-200 dark:fill-neutral-800" />
<Tooltip.Arrow className="fill-neutral-950" />
</Tooltip.Content>
</Tooltip.Portal>
</Tooltip.Root>

42
packages/ark/src/components/note/buttons/reaction.tsx
View File

@@ -1,8 +1,8 @@
import { ReactionIcon } from "@lume/icons";
import { NDKEvent } from "@nostr-dev-kit/ndk";
import * as Popover from "@radix-ui/react-popover";
import * as HoverCard from "@radix-ui/react-hover-card";
import { useState } from "react";
import { toast } from "sonner";
import { useNoteContext } from "../provider";
const REACTIONS = [
{
@@ -27,7 +27,9 @@ const REACTIONS = [
},
];
export function NoteReaction({ event }: { event: NDKEvent }) {
export function NoteReaction() {
const event = useNoteContext();
const [open, setOpen] = useState(false);
const [reaction, setReaction] = useState<string | null>(null);
@@ -52,8 +54,8 @@ export function NoteReaction({ event }: { event: NDKEvent }) {
};
return (
<Popover.Root open={open} onOpenChange={setOpen}>
<Popover.Trigger asChild>
<HoverCard.Root open={open} onOpenChange={setOpen}>
<HoverCard.Trigger asChild>
<button
type="button"
className="group inline-flex h-7 w-7 items-center justify-center text-neutral-600 dark:text-neutral-400"
@@ -62,16 +64,16 @@ export function NoteReaction({ event }: { event: NDKEvent }) {
<img
src={getReactionImage(reaction)}
alt={reaction}
className="h-5 w-5"
className="size-5"
/>
) : (
<ReactionIcon className="h-5 w-5 group-hover:text-blue-500" />
<ReactionIcon className="size-5 group-hover:text-blue-500" />
)}
</button>
</Popover.Trigger>
<Popover.Portal>
<Popover.Content
className="select-none rounded-md bg-neutral-200 px-1 py-1 text-sm will-change-[transform,opacity] data-[state=open]:data-[side=bottom]:animate-slideUpAndFade data-[state=open]:data-[side=left]:animate-slideRightAndFade data-[state=open]:data-[side=right]:animate-slideLeftAndFade data-[state=open]:data-[side=top]:animate-slideDownAndFade dark:bg-neutral-800"
</HoverCard.Trigger>
<HoverCard.Portal>
<HoverCard.Content
className="select-none rounded-lg bg-neutral-950 px-1 py-1 text-sm will-change-[transform,opacity] data-[state=open]:data-[side=bottom]:animate-slideUpAndFade data-[state=open]:data-[side=left]:animate-slideRightAndFade data-[state=open]:data-[side=right]:animate-slideLeftAndFade data-[state=open]:data-[side=top]:animate-slideDownAndFade"
sideOffset={0}
side="top"
>
@@ -79,7 +81,7 @@ export function NoteReaction({ event }: { event: NDKEvent }) {
<button
type="button"
onClick={() => react("👏")}
className="inline-flex h-8 w-8 items-center justify-center rounded backdrop-blur-xl hover:bg-white/10"
className="inline-flex h-8 w-8 items-center justify-center rounded-md backdrop-blur-xl hover:bg-white/10"
>
<img
src="/clapping_hands.png"
@@ -90,7 +92,7 @@ export function NoteReaction({ event }: { event: NDKEvent }) {
<button
type="button"
onClick={() => react("🤪")}
className="inline-flex h-7 w-7 items-center justify-center rounded backdrop-blur-xl hover:bg-white/10"
className="inline-flex h-8 w-8 items-center justify-center rounded-md backdrop-blur-xl hover:bg-white/10"
>
<img
src="/face_with_tongue.png"
@@ -101,7 +103,7 @@ export function NoteReaction({ event }: { event: NDKEvent }) {
<button
type="button"
onClick={() => react("😮")}
className="inline-flex h-7 w-7 items-center justify-center rounded backdrop-blur-xl hover:bg-white/10"
className="inline-flex h-8 w-8 items-center justify-center rounded-md backdrop-blur-xl hover:bg-white/10"
>
<img
src="/face_with_open_mouth.png"
@@ -112,7 +114,7 @@ export function NoteReaction({ event }: { event: NDKEvent }) {
<button
type="button"
onClick={() => react("😢")}
className="inline-flex h-7 w-7 items-center justify-center rounded backdrop-blur-xl hover:bg-white/10"
className="inline-flex h-8 w-8 items-center justify-center rounded-md backdrop-blur-xl hover:bg-white/10"
>
<img
src="/crying_face.png"
@@ -123,14 +125,14 @@ export function NoteReaction({ event }: { event: NDKEvent }) {
<button
type="button"
onClick={() => react("🤡")}
className="inline-flex h-7 w-7 items-center justify-center rounded backdrop-blur-xl hover:bg-white/10"
className="inline-flex h-8 w-8 items-center justify-center rounded-md backdrop-blur-xl hover:bg-white/10"
>
<img src="/clown_face.png" alt="Clown Face" className="h-6 w-6" />
</button>
</div>
<Popover.Arrow className="fill-neutral-200 dark:fill-neutral-800" />
</Popover.Content>
</Popover.Portal>
</Popover.Root>
<HoverCard.Arrow className="fill-neutral-950" />
</HoverCard.Content>
</HoverCard.Portal>
</HoverCard.Root>
);
}

10
packages/ark/src/components/note/buttons/reply.tsx
View File

@@ -1,14 +1,14 @@
import { ReplyIcon } from "@lume/icons";
import * as Tooltip from "@radix-ui/react-tooltip";
import { createSearchParams, useNavigate } from "react-router-dom";
import { useNoteContext } from "../provider";
export function NoteReply({
eventId,
rootEventId,
}: {
eventId: string;
rootEventId?: string;
}) {
const event = useNoteContext();
const navigate = useNavigate();
return (
@@ -21,7 +21,7 @@ export function NoteReply({
navigate({
pathname: "/new/",
search: createSearchParams({
replyTo: eventId,
replyTo: event.id,
rootReplyTo: rootEventId,
}).toString(),
})
@@ -32,9 +32,9 @@ export function NoteReply({
</button>
</Tooltip.Trigger>
<Tooltip.Portal>
<Tooltip.Content className="-left-10 inline-flex h-7 select-none items-center justify-center rounded-md bg-neutral-200 px-3.5 text-sm text-neutral-900 will-change-[transform,opacity] data-[state=delayed-open]:data-[side=bottom]:animate-slideUpAndFade data-[state=delayed-open]:data-[side=left]:animate-slideRightAndFade data-[state=delayed-open]:data-[side=right]:animate-slideLeftAndFade data-[state=delayed-open]:data-[side=top]:animate-slideDownAndFade dark:bg-neutral-800 dark:text-neutral-100">
<Tooltip.Content className="inline-flex h-7 select-none items-center justify-center rounded-md bg-neutral-950 px-3.5 text-sm text-white will-change-[transform,opacity] data-[state=delayed-open]:data-[side=bottom]:animate-slideUpAndFade data-[state=delayed-open]:data-[side=left]:animate-slideRightAndFade data-[state=delayed-open]:data-[side=right]:animate-slideLeftAndFade data-[state=delayed-open]:data-[side=top]:animate-slideDownAndFade">
Quick reply
<Tooltip.Arrow className="fill-neutral-200 dark:fill-neutral-800" />
<Tooltip.Arrow className="fill-neutral-950" />
</Tooltip.Content>
</Tooltip.Portal>
</Tooltip.Root>

9
packages/ark/src/components/note/buttons/repost.tsx
View File

@@ -1,11 +1,12 @@
import { RepostIcon } from "@lume/icons";
import { NDKEvent } from "@nostr-dev-kit/ndk";
import * as Tooltip from "@radix-ui/react-tooltip";
import { useState } from "react";
import { toast } from "sonner";
import { twMerge } from "tailwind-merge";
import { useNoteContext } from "../provider";
export function NoteRepost({ event }: { event: NDKEvent }) {
export function NoteRepost() {
const event = useNoteContext();
const [isRepost, setIsRepost] = useState(false);
const submit = async () => {
@@ -39,9 +40,9 @@ export function NoteRepost({ event }: { event: NDKEvent }) {
</button>
</Tooltip.Trigger>
<Tooltip.Portal>
<Tooltip.Content className="-left-10 inline-flex h-7 select-none items-center justify-center rounded-md bg-neutral-200 px-3.5 text-sm text-neutral-900 will-change-[transform,opacity] data-[state=delayed-open]:data-[side=bottom]:animate-slideUpAndFade data-[state=delayed-open]:data-[side=left]:animate-slideRightAndFade data-[state=delayed-open]:data-[side=right]:animate-slideLeftAndFade data-[state=delayed-open]:data-[side=top]:animate-slideDownAndFade dark:bg-neutral-800 dark:text-neutral-100">
<Tooltip.Content className="inline-flex h-7 select-none items-center justify-center rounded-md bg-neutral-950 px-3.5 text-sm text-white will-change-[transform,opacity] data-[state=delayed-open]:data-[side=bottom]:animate-slideUpAndFade data-[state=delayed-open]:data-[side=left]:animate-slideRightAndFade data-[state=delayed-open]:data-[side=right]:animate-slideLeftAndFade data-[state=delayed-open]:data-[side=top]:animate-slideDownAndFade">
Repost
<Tooltip.Arrow className="fill-neutral-200 dark:fill-neutral-800" />
<Tooltip.Arrow className="fill-neutral-950" />
</Tooltip.Content>
</Tooltip.Portal>
</Tooltip.Root>

8
packages/ark/src/components/note/buttons/zap.tsx
View File

@@ -16,8 +16,9 @@ import CurrencyInput from "react-currency-input-field";
import { useNavigate } from "react-router-dom";
import { useProfile } from "../../../hooks/useProfile";
import { useArk, useStorage } from "../../../provider";
import { useNoteContext } from "../provider";
export function NoteZap({ event }: { event: NDKEvent }) {
export function NoteZap() {
const [walletConnectURL, setWalletConnectURL] = useState<string>(null);
const [amount, setAmount] = useState<string>("21");
const [zapMessage, setZapMessage] = useState<string>("");
@@ -26,13 +27,14 @@ export function NoteZap({ event }: { event: NDKEvent }) {
const [isCompleted, setIsCompleted] = useState(false);
const [isLoading, setIsLoading] = useState(false);
const { user } = useProfile(event.pubkey);
const ark = useArk();
const event = useNoteContext();
const storage = useStorage();
const nwc = useRef(null);
const navigate = useNavigate();
const { user } = useProfile(event.pubkey);
const createZapRequest = async () => {
try {
if (!ark.ndk.signer) return navigate("/new/privkey");