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

feat(ark): add user component

Browse Source
This commit is contained in:
reya
2024-01-13 08:21:49 +07:00
parent 0487b8a801
commit 1822eac488
18 changed files with 324 additions and 317 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
packages/ark/src/ark.ts
View File

@@ -198,13 +198,13 @@ export class Ark {
} }
} }
public async createContact({ pubkey }: { pubkey: string }) { public async createContact(pubkey: string) {
const user = this.ndk.getUser({ pubkey: this.account.pubkey }); const user = this.ndk.getUser({ pubkey: this.account.pubkey });
const contacts = await user.follows(); const contacts = await user.follows();
return await user.follow(new NDKUser({ pubkey: pubkey }), contacts); return await user.follow(new NDKUser({ pubkey: pubkey }), contacts);
} }
public async deleteContact({ pubkey }: { pubkey: string }) { public async deleteContact(pubkey: string) {
const user = this.ndk.getUser({ pubkey: this.account.pubkey }); const user = this.ndk.getUser({ pubkey: this.account.pubkey });
const contacts = await user.follows(); const contacts = await user.follows();
contacts.delete(new NDKUser({ pubkey: pubkey })); contacts.delete(new NDKUser({ pubkey: pubkey }));
@@ -549,17 +549,12 @@ export class Ark {
signal, signal,
}); });
if (!res.ok) { if (!res.ok) throw new Error(`Failed to fetch NIP-05 service: ${nip05}`);
console.log(res);
throw new Error(`Failed to fetch NIP-05 service: ${nip05}`);
}
const data: NIP05 = await res.json(); const data: NIP05 = await res.json();
if (!data.names) return false; if (!data.names) return false;
if (data.names[localPath.toLowerCase()] === pubkey) return true; if (data.names[localPath.toLowerCase()] === pubkey) return true;
if (data.names[localPath] === pubkey) return true; if (data.names[localPath] === pubkey) return true;
return false; return false;
} }

17
packages/ark/src/components/note/child.tsx
View File

@@ -4,7 +4,7 @@ import { ReactNode, useMemo } from "react";
import { Link } from "react-router-dom"; import { Link } from "react-router-dom";
import reactStringReplace from "react-string-replace"; import reactStringReplace from "react-string-replace";
import { useEvent } from "../../hooks/useEvent"; import { useEvent } from "../../hooks/useEvent";
import { NoteChildUser } from "./childUser"; import { User } from "../user";
import { Hashtag } from "./mentions/hashtag"; import { Hashtag } from "./mentions/hashtag";
import { MentionUser } from "./mentions/user"; import { MentionUser } from "./mentions/user";
@@ -120,10 +120,17 @@ export function NoteChild({
{richContent} {richContent}
</div> </div>
</div> </div>
<NoteChildUser <User.Provider pubkey={data.pubkey}>
pubkey={data.pubkey} <User.Root>
subtext={isRoot ? "posted" : "replied"} <User.Avatar className="size-10 shrink-0 rounded-lg object-cover" />
/> <div className="absolute left-2 top-2 inline-flex items-center gap-1.5 font-semibold leading-tight">
<User.Name />
<div className="font-normal text-neutral-700 dark:text-neutral-300">
{isRoot ? "posted:" : "replied:"}
</div>
</div>
</User.Root>
</User.Provider>
</div> </div>
); );
} }

64
packages/ark/src/components/note/childUser.tsx
View File

@@ -1,64 +0,0 @@
import { displayNpub } from '@lume/utils';
import * as Avatar from '@radix-ui/react-avatar';
import { minidenticon } from 'minidenticons';
import { useMemo } from 'react';
import { useProfile } from '../../hooks/useProfile';
export function NoteChildUser({ pubkey, subtext }: { pubkey: string; subtext: string }) {
const fallbackName = useMemo(() => displayNpub(pubkey, 16), [pubkey]);
const fallbackAvatar = useMemo(
() => `data:image/svg+xml;utf8,${encodeURIComponent(minidenticon(pubkey, 90, 50))}`,
[pubkey]
);
const { isLoading, user } = useProfile(pubkey);
if (isLoading) {
return (
<>
<Avatar.Root className="h-10 w-10 shrink-0">
<Avatar.Image
src={fallbackAvatar}
alt={pubkey}
className="h-10 w-10 rounded-lg bg-black object-cover dark:bg-white"
/>
</Avatar.Root>
<div className="absolute left-2 top-2 inline-flex items-center gap-1.5 font-semibold leading-tight">
<div className="w-full max-w-[10rem] truncate">{fallbackName} </div>
<div className="font-normal text-neutral-700 dark:text-neutral-300">
{subtext}:
</div>
</div>
</>
);
}
return (
<>
<Avatar.Root className="h-10 w-10 shrink-0">
<Avatar.Image
src={user?.picture || user?.image}
alt={pubkey}
loading="lazy"
decoding="async"
className="h-10 w-10 rounded-lg object-cover"
/>
<Avatar.Fallback delayMs={300}>
<img
src={fallbackAvatar}
alt={pubkey}
className="h-10 w-10 rounded-lg bg-black dark:bg-white"
/>
</Avatar.Fallback>
</Avatar.Root>
<div className="absolute left-2 top-2 inline-flex items-center gap-1.5 font-semibold leading-tight">
<div className="w-full max-w-[10rem] truncate">
{user?.display_name || user?.name || user?.displayName || fallbackName}{' '}
</div>
<div className="font-normal text-neutral-700 dark:text-neutral-300">
{subtext}:
</div>
</div>
</>
);
}

19
packages/ark/src/components/note/mentions/note.tsx
View File

@@ -1,7 +1,8 @@
import { memo } from "react"; import { memo } from "react";
import { Link } from "react-router-dom"; import { Link } from "react-router-dom";
import { Note } from ".."; import { Note } from "../";
import { useEvent } from "../../../hooks/useEvent"; import { useEvent } from "../../../hooks/useEvent";
import { User } from "../../user";
export const MentionNote = memo(function MentionNote({ export const MentionNote = memo(function MentionNote({
eventId, eventId,
@@ -34,9 +35,19 @@ export const MentionNote = memo(function MentionNote({
return ( return (
<Note.Provider event={data}> <Note.Provider event={data}>
<Note.Root className="flex flex-col w-full gap-1 my-1 rounded-lg cursor-default bg-neutral-100 dark:bg-neutral-900"> <Note.Root className="flex flex-col w-full gap-1 my-1 rounded-lg cursor-default bg-neutral-100 dark:bg-neutral-900">
<div className="px-3 mt-3"> <User.Provider pubkey={data.pubkey}>
<Note.User variant="mention" /> <User.Root className="px-3 mt-3 flex h-6 items-center gap-2">
</div> <User.Avatar className="size-6 shrink-0 rounded-md object-cover" />
<div className="flex flex-1 items-baseline gap-2">
<User.Name className="font-semibold text-neutral-900 dark:text-neutral-100" />
<span className="text-neutral-600 dark:text-neutral-400">·</span>
<User.Time
time={data.created_at}
className="text-neutral-600 dark:text-neutral-400"
/>
</div>
</User.Root>
</User.Provider>
<div className="px-3 pb-3 mt-1"> <div className="px-3 pb-3 mt-1">
<Note.Content /> <Note.Content />
{openable ? ( {openable ? (

36
packages/ark/src/components/note/primitives/repost.tsx
View File

@@ -1,7 +1,9 @@
import { RepostIcon } from "@lume/icons";
import { NDKEvent, NostrEvent } from "@nostr-dev-kit/ndk"; import { NDKEvent, NostrEvent } from "@nostr-dev-kit/ndk";
import { useQuery } from "@tanstack/react-query"; import { useQuery } from "@tanstack/react-query";
import { Note } from ".."; import { Note } from "..";
import { useArk } from "../../../hooks/useArk"; import { useArk } from "../../../hooks/useArk";
import { User } from "../../user";
export function RepostNote({ export function RepostNote({
event, event,
@@ -39,9 +41,20 @@ export function RepostNote({
if (isError || !repostEvent) { if (isError || !repostEvent) {
return ( return (
<Note.Root className={className}> <Note.Root className={className}>
<Note.Provider event={event}> <User.Provider pubkey={event.pubkey}>
<Note.User variant="repost" className="h-14" /> <User.Root className="flex gap-2 px-3 h-14">
</Note.Provider> <div className="inline-flex shrink-0 w-10 items-center justify-center">
<RepostIcon className="h-5 w-5 text-blue-500" />
</div>
<div className="inline-flex items-center gap-2">
<User.Avatar className="size-6 shrink-0 rounded object-cover" />
<div className="inline-flex items-baseline gap-1">
<User.Name className="font-medium text-neutral-900 dark:text-neutral-100" />
<span className="text-blue-500">reposted</span>
</div>
</div>
</User.Root>
</User.Provider>
<div className="px-3 mb-3 select-text"> <div className="px-3 mb-3 select-text">
<div className="flex flex-col items-start justify-start px-3 py-3 bg-red-100 rounded-lg dark:bg-red-900"> <div className="flex flex-col items-start justify-start px-3 py-3 bg-red-100 rounded-lg dark:bg-red-900">
<p className="text-red-500">Failed to get event</p> <p className="text-red-500">Failed to get event</p>
@@ -57,9 +70,20 @@ export function RepostNote({
return ( return (
<Note.Root className={className}> <Note.Root className={className}>
<Note.Provider event={event}> <User.Provider pubkey={event.pubkey}>
<Note.User variant="repost" className="h-14" /> <User.Root className="flex gap-2 px-3 h-14">
</Note.Provider> <div className="inline-flex shrink-0 w-10 items-center justify-center">
<RepostIcon className="h-5 w-5 text-blue-500" />
</div>
<div className="inline-flex items-center gap-2">
<User.Avatar className="size-6 shrink-0 rounded object-cover" />
<div className="inline-flex items-baseline gap-1">
<User.Name className="font-medium text-neutral-900 dark:text-neutral-100" />
<span className="text-blue-500">reposted</span>
</div>
</div>
</User.Root>
</User.Provider>
<Note.Provider event={repostEvent}> <Note.Provider event={repostEvent}>
<div className="relative flex flex-col gap-2 px-3"> <div className="relative flex flex-col gap-2 px-3">
<div className="flex items-center justify-between"> <div className="flex items-center justify-between">

14
packages/ark/src/components/note/primitives/thread.tsx
View File

@@ -1,5 +1,6 @@
import { Note } from ".."; import { Note } from "..";
import { useEvent } from "../../../hooks/useEvent"; import { useEvent } from "../../../hooks/useEvent";
import { User } from "../../user";
export function ThreadNote({ eventId }: { eventId: string }) { export function ThreadNote({ eventId }: { eventId: string }) {
const { isLoading, data } = useEvent(eventId); const { isLoading, data } = useEvent(eventId);
@@ -13,6 +14,19 @@ export function ThreadNote({ eventId }: { eventId: string }) {
<Note.Root> <Note.Root>
<div className="flex items-center justify-between px-3 h-14"> <div className="flex items-center justify-between px-3 h-14">
<Note.User className="flex-1 pr-1" /> <Note.User className="flex-1 pr-1" />
<User.Provider pubkey={data.pubkey}>
<User.Root className="flex h-16 items-center gap-3 px-3 flex-1">
<User.Avatar className="size-10 shrink-0 rounded-lg object-cover ring-1 ring-neutral-200/50 dark:ring-neutral-800/50" />
<div className="flex flex-1 flex-col">
<User.Name className="font-semibold text-neutral-900 dark:text-neutral-100" />
<div className="inline-flex items-center gap-2 text-sm text-neutral-600 dark:text-neutral-400">
<User.Time time={data.created_at} />
<span>·</span>
<User.NIP05 />
</div>
</div>
</User.Root>
</User.Provider>
<Note.Menu /> <Note.Menu />
</div> </div>
<Note.Thread className="mb-2" /> <Note.Thread className="mb-2" />

4
packages/ark/src/components/note/thread.tsx
View File

@@ -3,7 +3,9 @@ import { COL_TYPES } from "@lume/utils";
import { Link } from "react-router-dom"; import { Link } from "react-router-dom";
import { twMerge } from "tailwind-merge"; import { twMerge } from "tailwind-merge";
import { Note } from "."; import { Note } from ".";
import { useArk, useColumnContext, useNoteContext } from "../.."; import { useArk } from "../../hooks/useArk";
import { useColumnContext } from "../column/provider";
import { useNoteContext } from "./provider";
export function NoteThread({ export function NoteThread({
className, className,

238
packages/ark/src/components/note/user.tsx
View File

@@ -1,240 +1,26 @@
import { RepostIcon } from "@lume/icons"; import { cn } from "@lume/utils";
import { displayNpub, formatCreatedAt } from "@lume/utils"; import { User } from "../user";
import * as Avatar from "@radix-ui/react-avatar";
import { minidenticon } from "minidenticons";
import { useMemo } from "react";
import { twMerge } from "tailwind-merge";
import { useProfile } from "../../hooks/useProfile";
import { useNoteContext } from "./provider"; import { useNoteContext } from "./provider";
export function NoteUser({ export function NoteUser({
variant = "text",
className, className,
}: { }: {
variant?: "text" | "repost" | "mention" | "thread";
className?: string; className?: string;
}) { }) {
const event = useNoteContext(); const event = useNoteContext();
const createdAt = useMemo(
() => formatCreatedAt(event.created_at),
[event.created_at],
);
const fallbackName = useMemo(
() => displayNpub(event.pubkey, 16),
[event.pubkey],
);
const fallbackAvatar = useMemo(
() =>
`data:image/svg+xml;utf8,${encodeURIComponent(
minidenticon(event.pubkey, 90, 50),
)}`,
[event.pubkey],
);
const { isLoading, user } = useProfile(event.pubkey);
if (variant === "mention") {
if (isLoading) {
return (
<div className="flex items-center gap-2">
<Avatar.Root className="shrink-0">
<Avatar.Image
src={fallbackAvatar}
alt={event.pubkey}
className="h-6 w-6 shrink-0 object-cover rounded-md bg-black dark:bg-white"
/>
</Avatar.Root>
<div className="flex flex-1 items-baseline gap-2">
<h5 className="max-w-[10rem] truncate font-semibold text-neutral-900 dark:text-neutral-100">
{fallbackName}
</h5>
<span className="text-neutral-600 dark:text-neutral-400">·</span>
<span className="text-neutral-600 dark:text-neutral-400">
{createdAt}
</span>
</div>
</div>
);
}
return (
<div className="flex h-6 items-center gap-2">
<Avatar.Root className="shrink-0">
<Avatar.Image
src={user?.picture || user?.image}
alt={event.pubkey}
loading="eager"
decoding="async"
className="h-6 w-6 shrink-0 object-cover rounded-md"
/>
<Avatar.Fallback delayMs={150}>
<img
src={fallbackAvatar}
alt={event.pubkey}
className="h-6 w-6 rounded-md bg-black dark:bg-white"
/>
</Avatar.Fallback>
</Avatar.Root>
<div className="flex flex-1 items-baseline gap-2">
<h5 className="max-w-[10rem] truncate font-semibold text-neutral-900 dark:text-neutral-100">
{user?.name ||
user?.display_name ||
user?.displayName ||
fallbackName}
</h5>
<span className="text-neutral-600 dark:text-neutral-400">·</span>
<span className="text-neutral-600 dark:text-neutral-400">
{createdAt}
</span>
</div>
</div>
);
}
if (variant === "repost") {
if (isLoading) {
return (
<div className={twMerge("flex gap-2 px-3", className)}>
<div className="inline-flex shrink-0 w-10 items-center justify-center">
<RepostIcon className="h-5 w-5 text-blue-500" />
</div>
<div className="inline-flex items-center gap-2">
<div className="h-6 w-6 shrink-0 animate-pulse rounded bg-neutral-300 dark:bg-neutral-700" />
<div className="h-4 w-24 animate-pulse rounded bg-neutral-300 dark:bg-neutral-700" />
</div>
</div>
);
}
return (
<div className={twMerge("flex gap-2 px-3", className)}>
<div className="inline-flex shrink-0 w-10 items-center justify-center">
<RepostIcon className="h-5 w-5 text-blue-500" />
</div>
<div className="inline-flex items-center gap-2">
<Avatar.Root className="shrink-0">
<Avatar.Image
src={user?.picture || user?.image}
alt={event.pubkey}
loading="eager"
decoding="async"
className="h-6 w-6 rounded object-cover"
/>
<Avatar.Fallback delayMs={150}>
<img
src={fallbackAvatar}
alt={event.pubkey}
className="h-6 w-6 rounded bg-black dark:bg-white"
/>
</Avatar.Fallback>
</Avatar.Root>
<div className="inline-flex items-baseline gap-1">
<h5 className="max-w-[10rem] truncate font-medium text-neutral-900 dark:text-neutral-100/80">
{user?.name ||
user?.display_name ||
user?.displayName ||
fallbackName}
</h5>
<span className="text-blue-500">reposted</span>
</div>
</div>
</div>
);
}
if (variant === "thread") {
if (isLoading) {
return (
<div className="flex h-16 items-center gap-3 px-3">
<div className="h-10 w-10 shrink-0 animate-pulse rounded-lg bg-neutral-300 dark:bg-neutral-700" />
<div className="flex flex-1 flex-col gap-1">
<div className="h-4 w-36 animate-pulse rounded bg-neutral-300 dark:bg-neutral-700" />
<div className="h-3 w-24 animate-pulse rounded bg-neutral-300 dark:bg-neutral-700" />
</div>
</div>
);
}
return (
<div className="flex h-16 items-center gap-3 px-3">
<Avatar.Root className="h-10 w-10 shrink-0">
<Avatar.Image
src={user?.picture || user?.image}
alt={event.pubkey}
loading="eager"
decoding="async"
className="h-10 w-10 rounded-lg object-cover ring-1 ring-neutral-200/50 dark:ring-neutral-800/50"
/>
<Avatar.Fallback delayMs={150}>
<img
src={fallbackAvatar}
alt={event.pubkey}
className="h-10 w-10 rounded-lg bg-black ring-1 ring-neutral-200/50 dark:bg-white dark:ring-neutral-800/50"
/>
</Avatar.Fallback>
</Avatar.Root>
<div className="flex flex-1 flex-col">
<h5 className="max-w-[15rem] truncate font-semibold text-neutral-900 dark:text-neutral-100">
{user?.name || user?.display_name || user?.displayName || "Anon"}
</h5>
<div className="inline-flex items-center gap-2 text-sm text-neutral-600 dark:text-neutral-400">
<span>{createdAt}</span>
<span>·</span>
<span>{fallbackName}</span>
</div>
</div>
</div>
);
}
if (isLoading) {
return (
<div className={twMerge("flex items-center gap-3", className)}>
<Avatar.Root className="h-9 w-9 shrink-0">
<Avatar.Image
src={fallbackAvatar}
alt={event.pubkey}
className="h-9 w-9 rounded-lg bg-black ring-1 ring-neutral-200/50 dark:bg-white dark:ring-neutral-800/50"
/>
</Avatar.Root>
<div className="h-6 flex-1">
<div className="max-w-[15rem] truncate font-semibold text-neutral-950 dark:text-neutral-50">
{fallbackName}
</div>
</div>
</div>
);
}
return ( return (
<div className={twMerge("flex items-center gap-3", className)}> <User.Provider pubkey={event.pubkey}>
<Avatar.Root className="h-9 w-9 shrink-0"> <User.Root className={cn("flex items-center gap-3", className)}>
<Avatar.Image <User.Avatar className="size-9 shrink-0 rounded-lg bg-white object-cover ring-1 ring-neutral-200/50 dark:ring-neutral-800/50" />
src={user?.picture || user?.image} <div className="flex h-6 flex-1 items-start justify-between gap-2">
alt={event.pubkey} <User.Name className="font-semibold text-neutral-950 dark:text-neutral-50" />
loading="eager" <User.Time
decoding="async" time={event.created_at}
className="h-9 w-9 rounded-lg bg-white object-cover ring-1 ring-neutral-200/50 dark:ring-neutral-800/50" className="text-neutral-500 dark:text-neutral-400"
/>
<Avatar.Fallback delayMs={150}>
<img
src={fallbackAvatar}
alt={event.pubkey}
className="h-9 w-9 rounded-lg bg-black ring-1 ring-neutral-200/50 dark:bg-white dark:ring-neutral-800/50"
/> />
</Avatar.Fallback>
</Avatar.Root>
<div className="flex h-6 flex-1 items-start justify-between gap-2">
<div className="max-w-[15rem] truncate font-semibold text-neutral-950 dark:text-neutral-50">
{user?.name ||
user?.display_name ||
user?.displayName ||
fallbackName}
</div> </div>
<div className="text-neutral-500 dark:text-neutral-400"> </User.Root>
{createdAt} </User.Provider>
</div>
</div>
</div>
); );
} }

48
packages/ark/src/components/user/avatar.tsx Normal file
View File

@@ -0,0 +1,48 @@
import { cn } from "@lume/utils";
import * as Avatar from "@radix-ui/react-avatar";
import { minidenticon } from "minidenticons";
import { useMemo } from "react";
import { useUserContext } from "./provider";
export function UserAvatar({ className }: { className?: string }) {
const user = useUserContext();
const fallbackAvatar = useMemo(
() =>
`data:image/svg+xml;utf8,${encodeURIComponent(
minidenticon(user?.pubkey, 90, 50),
)}`,
[user],
);
if (!user) {
return (
<div className="shrink-0">
<div
className={cn(
"bg-black/20 dark:bg-white/20 animate-pulse",
className,
)}
/>
</div>
);
}
return (
<Avatar.Root className="shrink-0">
<Avatar.Image
src={user.image}
alt={user.pubkey}
loading="eager"
decoding="async"
className={className}
/>
<Avatar.Fallback delayMs={120}>
<img
src={fallbackAvatar}
alt={user.pubkey}
className={cn("bg-black dark:bg-white", className)}
/>
</Avatar.Fallback>
</Avatar.Root>
);
}

35
packages/ark/src/components/user/followButton.tsx Normal file
View File

@@ -0,0 +1,35 @@
import { cn } from "@lume/utils";
import { useEffect, useState } from "react";
import { useArk } from "../../hooks/useArk";
export function UserFollowButton({
target,
className,
}: { target: string; className?: string }) {
const ark = useArk();
const [followed, setFollowed] = useState(false);
const toggleFollow = async () => {
if (!followed) {
const add = await ark.createContact(target);
if (add) setFollowed(true);
} else {
const remove = await ark.deleteContact(target);
if (remove) setFollowed(false);
}
};
useEffect(() => {
async function status() {
const contacts = await ark.getUserContacts();
if (contacts?.includes(target)) setFollowed(true);
}
status();
}, []);
return (
<button type="button" onClick={toggleFollow} className={cn("", className)}>
{followed ? "Unfollow" : "Follow"}
</button>
);
}

17
packages/ark/src/components/user/index.ts Normal file
View File

@@ -0,0 +1,17 @@
import { UserAvatar } from "./avatar";
import { UserFollowButton } from "./followButton";
import { UserName } from "./name";
import { UserNip05 } from "./nip05";
import { UserProvider } from "./provider";
import { UserRoot } from "./root";
import { UserTime } from "./time";
export const User = {
Provider: UserProvider,
Root: UserRoot,
Avatar: UserAvatar,
Name: UserName,
NIP05: UserNip05,
Time: UserTime,
Button: UserFollowButton,
};

23
packages/ark/src/components/user/name.tsx Normal file
View File

@@ -0,0 +1,23 @@
import { cn } from "@lume/utils";
import { useUserContext } from "./provider";
export function UserName({ className }: { className?: string }) {
const user = useUserContext();
if (!user) {
return (
<div
className={cn(
"h-4 w-20 bg-black/20 dark:bg-white/20 animate-pulse",
className,
)}
/>
);
}
return (
<div className={cn("w-full max-w-[15rem] truncate", className)}>
{user.displayName || user.name || "Anon"}
</div>
);
}

47
packages/ark/src/components/user/nip05.tsx Normal file
View File

@@ -0,0 +1,47 @@
import { UnverifiedIcon, VerifiedIcon } from "@lume/icons";
import { cn } from "@lume/utils";
import { useQuery } from "@tanstack/react-query";
import { useArk } from "../../hooks/useArk";
import { useUserContext } from "./provider";
export function UserNip05({ className }: { className?: string }) {
const ark = useArk();
const user = useUserContext();
const { isLoading, data: verified } = useQuery({
queryKey: ["nip05", user?.nip05],
queryFn: async ({ signal }: { signal: AbortSignal }) => {
return ark.validateNIP05({
pubkey: user?.pubkey,
nip05: user?.nip05,
signal,
});
},
});
if (!user) {
return (
<div
className={cn(
"h-4 w-20 bg-black/20 dark:bg-white/20 animate-pulse",
className,
)}
/>
);
}
return (
<div className="inline-flex items-center gap-1">
<p className={cn("text-sm font-medium", className)}>
{user.nip05.startsWith("_@")
? user.nip05.replace("_@", "")
: user.nip05}
</p>
{!isLoading && verified ? (
<VerifiedIcon className="size-5 text-teal-500" />
) : (
<UnverifiedIcon className="size-5 text-red-500" />
)}
</div>
);
}

36
packages/ark/src/components/user/provider.tsx Normal file
View File

@@ -0,0 +1,36 @@
import { NDKUserProfile } from "@nostr-dev-kit/ndk";
import { useQuery } from "@tanstack/react-query";
import { ReactNode, createContext, useContext } from "react";
import { useArk } from "../../hooks/useArk";
const UserContext = createContext<NDKUserProfile>(null);
export function UserProvider({
pubkey,
children,
}: { pubkey: string; children: ReactNode }) {
const ark = useArk();
const { data: user } = useQuery({
queryKey: ["user", pubkey],
queryFn: async () => {
const profile = await ark.getUserProfile(pubkey);
if (!profile)
throw new Error(
`Cannot get metadata for ${pubkey}, will be retry after 10 seconds`,
);
return profile;
},
refetchOnMount: false,
refetchOnWindowFocus: false,
refetchOnReconnect: false,
staleTime: Infinity,
retry: 2,
});
return <UserContext.Provider value={user}>{children}</UserContext.Provider>;
}
export function useUserContext() {
const context = useContext(UserContext);
return context;
}

12
packages/ark/src/components/user/root.tsx Normal file
View File

@@ -0,0 +1,12 @@
import { cn } from "@lume/utils";
import { ReactNode } from "react";
export function UserRoot({
children,
className,
}: {
children: ReactNode;
className?: string;
}) {
return <div className={cn(className)}>{children}</div>;
}

11
packages/ark/src/components/user/time.tsx Normal file
View File

@@ -0,0 +1,11 @@
import { cn, formatCreatedAt } from "@lume/utils";
import { useMemo } from "react";
export function UserTime({
time,
className,
}: { time: number; className?: string }) {
const createdAt = useMemo(() => formatCreatedAt(time), [time]);
return <div className={cn("", className)}>{createdAt}</div>;
}

4
packages/ark/src/index.ts
View File

@@ -5,10 +5,10 @@ export * from "./hooks/useEvent";
export * from "./hooks/useArk"; export * from "./hooks/useArk";
export * from "./hooks/useProfile"; export * from "./hooks/useProfile";
export * from "./hooks/useRelay"; export * from "./hooks/useRelay";
export * from "./components/column/provider"; export * from "./components/user";
export * from "./components/column"; export * from "./components/column";
export * from "./components/column/provider";
export * from "./components/note"; export * from "./components/note";
export * from "./components/note/provider";
export * from "./components/note/primitives/text"; export * from "./components/note/primitives/text";
export * from "./components/note/primitives/repost"; export * from "./components/note/primitives/repost";
export * from "./components/note/primitives/skeleton"; export * from "./components/note/primitives/skeleton";

5
packages/ui/src/activity/reply.tsx
View File

@@ -4,7 +4,10 @@ import { ActivityRootNote } from "./rootNote";
export function ReplyActivity({ event }: { event: NDKEvent }) { export function ReplyActivity({ event }: { event: NDKEvent }) {
const ark = useArk(); const ark = useArk();
const thread = ark.getEventThread({ tags: event.tags }); const thread = ark.getEventThread({
content: event.content,
tags: event.tags,
});
return ( return (
<div className="h-full pb-3 flex flex-col justify-between"> <div className="h-full pb-3 flex flex-col justify-between">