This commit is contained in:
2023-12-05 15:31:45 +07:00
parent 7decf264d7
commit 4006c0010e
11 changed files with 138 additions and 100 deletions

View File

@@ -145,6 +145,7 @@ export function ImportAccountScreen() {
</label> </label>
<div className="flex w-full flex-col gap-2"> <div className="flex w-full flex-col gap-2">
<input <input
readOnly={!!pubkey}
name="npub" name="npub"
type="text" type="text"
value={npub} value={npub}
@@ -172,15 +173,14 @@ export function ImportAccountScreen() {
> >
Continue with nsecBunker Continue with nsecBunker
</button> </button>
<div>
<p className="mb-0.5 text-sm font-semibold">Note:</p>
<p className="text-sm text-neutral-600 dark:text-neutral-400">
If you&apos;re using nsecbunker token, keep in mind it only can
redeem one-time, you need to login again in the next launch
</p>
</div>
</div> </div>
) : null} ) : null}
{npub.indexOf('#') > -1 ? (
<p className="text-sm text-neutral-600 dark:text-neutral-400">
You&apos;re using nsecbunker token, keep in mind it only can redeem
one-time, you need to login again in the next launch
</p>
) : null}
</div> </div>
</div> </div>
</div> </div>

View File

@@ -12,14 +12,14 @@ import { useProfile } from '@utils/hooks/useProfile';
import { displayNpub } from '@utils/shortenKey'; import { displayNpub } from '@utils/shortenKey';
export const ChatListItem = memo(function ChatListItem({ event }: { event: NDKEvent }) { export const ChatListItem = memo(function ChatListItem({ event }: { event: NDKEvent }) {
const { status, user } = useProfile(event.pubkey); const { isLoading, user } = useProfile(event.pubkey);
const decryptedContent = useDecryptMessage(event); const decryptedContent = useDecryptMessage(event);
const createdAt = formatCreatedAt(event.created_at, true); const createdAt = formatCreatedAt(event.created_at, true);
const svgURI = const svgURI =
'data:image/svg+xml;utf8,' + encodeURIComponent(minidenticon(event.pubkey, 90, 50)); 'data:image/svg+xml;utf8,' + encodeURIComponent(minidenticon(event.pubkey, 90, 50));
if (status === 'pending') { if (isLoading) {
return ( return (
<div className="flex items-center gap-2.5 rounded-md px-3"> <div className="flex items-center gap-2.5 rounded-md px-3">
<div className="h-10 w-10 shrink-0 animate-pulse rounded-lg bg-neutral-400 dark:bg-neutral-600" /> <div className="h-10 w-10 shrink-0 animate-pulse rounded-lg bg-neutral-400 dark:bg-neutral-600" />

View File

@@ -3,9 +3,9 @@ import { memo } from 'react';
import { useProfile } from '@utils/hooks/useProfile'; import { useProfile } from '@utils/hooks/useProfile';
export const GroupTitle = memo(function GroupTitle({ pubkey }: { pubkey: string }) { export const GroupTitle = memo(function GroupTitle({ pubkey }: { pubkey: string }) {
const { status, user } = useProfile(pubkey); const { isLoading, user } = useProfile(pubkey);
if (status === 'pending') { if (isLoading) {
return <div className="h-3 w-24 animate-pulse rounded bg-white/10" />; return <div className="h-3 w-24 animate-pulse rounded bg-white/10" />;
} }

View File

@@ -23,7 +23,7 @@ export const UserWithDrawer = memo(function UserWithDrawer({
}) { }) {
const { db } = useStorage(); const { db } = useStorage();
const { ndk } = useNDK(); const { ndk } = useNDK();
const { status, user } = useProfile(pubkey); const { isLoading, user } = useProfile(pubkey);
const [followed, setFollowed] = useState(false); const [followed, setFollowed] = useState(false);
@@ -82,7 +82,7 @@ export const UserWithDrawer = memo(function UserWithDrawer({
<Dialog.Portal> <Dialog.Portal>
<Dialog.Content className="fixed right-0 top-0 z-50 flex h-full w-[400px] animate-slideRightAndFade items-center justify-center px-4 pb-4 pt-16 transition-all"> <Dialog.Content className="fixed right-0 top-0 z-50 flex h-full w-[400px] animate-slideRightAndFade items-center justify-center px-4 pb-4 pt-16 transition-all">
<div className="h-full w-full overflow-y-auto rounded-lg border border-neutral-300 bg-neutral-200 py-3 dark:border-neutral-700 dark:bg-neutral-800"> <div className="h-full w-full overflow-y-auto rounded-lg border border-neutral-300 bg-neutral-200 py-3 dark:border-neutral-700 dark:bg-neutral-800">
{status === 'pending' ? ( {isLoading ? (
<div> <div>
<p>Loading...</p> <p>Loading...</p>
</div> </div>

View File

@@ -1,10 +1,18 @@
import * as Avatar from '@radix-ui/react-avatar';
import { minidenticon } from 'minidenticons';
import { useMemo } from 'react';
import { useProfile } from '@utils/hooks/useProfile'; import { useProfile } from '@utils/hooks/useProfile';
import { displayNpub } from '@utils/shortenKey'; import { displayNpub } from '@utils/shortenKey';
export function MentionPopupItem({ pubkey, embed }: { pubkey: string; embed?: string }) { export function MentionPopupItem({ pubkey, embed }: { pubkey: string; embed?: string }) {
const { status, user } = useProfile(pubkey, embed); const { isLoading, user } = useProfile(pubkey, embed);
const svgURI = useMemo(
() => 'data:image/svg+xml;utf8,' + encodeURIComponent(minidenticon(pubkey, 90, 50)),
[pubkey]
);
if (status === 'pending') { if (isLoading) {
return ( return (
<div className="flex items-center gap-2.5 px-2"> <div className="flex items-center gap-2.5 px-2">
<div className="relative h-8 w-8 shrink-0 animate-pulse rounded bg-neutral-400 dark:bg-neutral-600" /> <div className="relative h-8 w-8 shrink-0 animate-pulse rounded bg-neutral-400 dark:bg-neutral-600" />
@@ -18,14 +26,25 @@ export function MentionPopupItem({ pubkey, embed }: { pubkey: string; embed?: st
return ( return (
<div className="flex h-11 items-center justify-start gap-2.5 px-2 hover:bg-neutral-200 dark:bg-neutral-800"> <div className="flex h-11 items-center justify-start gap-2.5 px-2 hover:bg-neutral-200 dark:bg-neutral-800">
<img <Avatar.Root className="shirnk-0 h-8 w-8">
src={user.picture || user.image} <Avatar.Image
alt={pubkey} src={user?.picture || user?.image}
className="shirnk-0 h-8 w-8 rounded-md object-cover" alt={pubkey}
/> loading="lazy"
decoding="async"
className="h-8 w-8 rounded-md object-cover"
/>
<Avatar.Fallback delayMs={300}>
<img
src={svgURI}
alt={pubkey}
className="h-8 w-8 rounded-md bg-black dark:bg-white"
/>
</Avatar.Fallback>
</Avatar.Root>
<div className="flex flex-col items-start gap-px"> <div className="flex flex-col items-start gap-px">
<h5 className="max-w-[10rem] truncate text-sm font-medium leading-none text-neutral-900 dark:text-neutral-100"> <h5 className="max-w-[10rem] truncate text-sm font-medium leading-none text-neutral-900 dark:text-neutral-100">
{user.display_name || user.displayName || user.name} {user?.display_name || user?.displayName || user?.name}
</h5> </h5>
<span className="text-sm leading-none text-neutral-600 dark:text-neutral-400"> <span className="text-sm leading-none text-neutral-600 dark:text-neutral-400">
{displayNpub(pubkey, 16)} {displayNpub(pubkey, 16)}

View File

@@ -11,7 +11,7 @@ import { displayNpub } from '@utils/shortenKey';
export function ProfileCard() { export function ProfileCard() {
const { db } = useStorage(); const { db } = useStorage();
const { status, user } = useProfile(db.account.pubkey); const { isLoading, user } = useProfile(db.account.pubkey);
const svgURI = const svgURI =
'data:image/svg+xml;utf8,' + 'data:image/svg+xml;utf8,' +
@@ -19,7 +19,7 @@ export function ProfileCard() {
return ( return (
<div className="mb-4 h-56 w-full rounded-2xl bg-neutral-100 transition-all duration-150 ease-smooth hover:scale-105 dark:bg-neutral-900"> <div className="mb-4 h-56 w-full rounded-2xl bg-neutral-100 transition-all duration-150 ease-smooth hover:scale-105 dark:bg-neutral-900">
{status === 'pending' ? ( {isLoading ? (
<div className="flex h-full w-full items-center justify-center"> <div className="flex h-full w-full items-center justify-center">
<LoaderIcon className="h-4 w-4 animate-spin" /> <LoaderIcon className="h-4 w-4 animate-spin" />
</div> </div>

View File

@@ -114,7 +114,7 @@ export function UserProfile({ pubkey }: { pubkey: string }) {
<div className="flex flex-col items-center gap-1"> <div className="flex flex-col items-center gap-1">
<div className="inline-flex flex-col items-center"> <div className="inline-flex flex-col items-center">
<h5 className="text-center text-xl font-semibold text-neutral-900 dark:text-neutral-100"> <h5 className="text-center text-xl font-semibold text-neutral-900 dark:text-neutral-100">
{user.name || user.display_name || user.displayName || 'No name'} {user?.name || user?.display_name || user?.displayName || 'No name'}
</h5> </h5>
{user?.nip05 ? ( {user?.nip05 ? (
<NIP05 <NIP05

View File

@@ -17,6 +17,7 @@ import { CancelIcon, ZapIcon } from '@shared/icons';
import { useProfile } from '@utils/hooks/useProfile'; import { useProfile } from '@utils/hooks/useProfile';
import { sendNativeNotification } from '@utils/notification'; import { sendNativeNotification } from '@utils/notification';
import { compactNumber } from '@utils/number'; import { compactNumber } from '@utils/number';
import { displayNpub } from '@utils/shortenKey';
export function NoteZap({ event }: { event: NDKEvent }) { export function NoteZap({ event }: { event: NDKEvent }) {
const nwc = useRef(null); const nwc = useRef(null);
@@ -119,7 +120,8 @@ export function NoteZap({ event }: { event: NDKEvent }) {
<div className="inline-flex w-full shrink-0 items-center justify-between px-5 py-3"> <div className="inline-flex w-full shrink-0 items-center justify-between px-5 py-3">
<div className="w-6" /> <div className="w-6" />
<Dialog.Title className="text-center font-semibold"> <Dialog.Title className="text-center font-semibold">
Send tip to {user?.name || user?.display_name || user?.displayName} Send tip to{' '}
{user?.name || user?.displayName || displayNpub(event.pubkey, 16)}
</Dialog.Title> </Dialog.Title>
<Dialog.Close className="inline-flex h-6 w-6 items-center justify-center rounded-md bg-neutral-100 dark:bg-neutral-900"> <Dialog.Close className="inline-flex h-6 w-6 items-center justify-center rounded-md bg-neutral-100 dark:bg-neutral-900">
<CancelIcon className="h-4 w-4" /> <CancelIcon className="h-4 w-4" />

View File

@@ -20,12 +20,7 @@ export const MentionUser = memo(function MentionUser({ pubkey }: { pubkey: strin
} }
className="break-words text-blue-500 hover:text-blue-600" className="break-words text-blue-500 hover:text-blue-600"
> >
{'@' + {'@' + (user?.name || user?.displayName || user?.username || 'unknown')}
(user?.name ||
user?.display_name ||
user?.displayName ||
user?.username ||
'unknown')}
</button> </button>
); );
}); });

View File

@@ -40,20 +40,33 @@ export const User = memo(function User({
embedProfile?: string; embedProfile?: string;
subtext?: string; subtext?: string;
}) { }) {
const { isFetching, user } = useProfile(pubkey, embedProfile); const { isLoading, user } = useProfile(pubkey, embedProfile);
const createdAt = useMemo(() => formatCreatedAt(time, variant === 'chat'), [pubkey]); const createdAt = useMemo(() => formatCreatedAt(time, variant === 'chat'), [time]);
const svgURI = useMemo( const fallbackName = useMemo(() => displayNpub(pubkey, 16), [pubkey]);
const fallbackAvatar = useMemo(
() => 'data:image/svg+xml;utf8,' + encodeURIComponent(minidenticon(pubkey, 90, 50)), () => 'data:image/svg+xml;utf8,' + encodeURIComponent(minidenticon(pubkey, 90, 50)),
[pubkey] [pubkey]
); );
if (variant === 'mention') { if (variant === 'mention') {
if (isFetching) { if (isLoading) {
return ( return (
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<div className="h-6 w-6 shrink-0 animate-pulse rounded bg-neutral-300 dark:bg-neutral-700" /> <Avatar.Root className="shrink-0">
<div className="h-3.5 w-36 animate-pulse rounded bg-neutral-300 dark:bg-neutral-700" /> <Avatar.Image
src={fallbackAvatar}
alt={pubkey}
className="h-6 w-6 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> </div>
); );
} }
@@ -70,7 +83,7 @@ export const User = memo(function User({
/> />
<Avatar.Fallback delayMs={300}> <Avatar.Fallback delayMs={300}>
<img <img
src={svgURI} src={fallbackAvatar}
alt={pubkey} alt={pubkey}
className="h-6 w-6 rounded-md bg-black dark:bg-white" className="h-6 w-6 rounded-md bg-black dark:bg-white"
/> />
@@ -78,10 +91,7 @@ export const User = memo(function User({
</Avatar.Root> </Avatar.Root>
<div className="flex flex-1 items-baseline gap-2"> <div className="flex flex-1 items-baseline gap-2">
<h5 className="max-w-[10rem] truncate font-semibold text-neutral-900 dark:text-neutral-100"> <h5 className="max-w-[10rem] truncate font-semibold text-neutral-900 dark:text-neutral-100">
{user?.name || {user?.name || user?.display_name || user?.displayName || fallbackName}
user?.display_name ||
user?.displayName ||
displayNpub(pubkey, 16)}
</h5> </h5>
<span className="text-neutral-600 dark:text-neutral-400">·</span> <span className="text-neutral-600 dark:text-neutral-400">·</span>
<span className="text-neutral-600 dark:text-neutral-400">{createdAt}</span> <span className="text-neutral-600 dark:text-neutral-400">{createdAt}</span>
@@ -91,11 +101,19 @@ export const User = memo(function User({
} }
if (variant === 'notify') { if (variant === 'notify') {
if (isFetching) { if (isLoading) {
return ( return (
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<div className="h-8 w-8 shrink-0 animate-pulse rounded bg-neutral-300 dark:bg-neutral-700" /> <Avatar.Root className="h-8 w-8 shrink-0">
<div className="h-3.5 w-36 animate-pulse rounded bg-neutral-300 dark:bg-neutral-700" /> <Avatar.Image
src={fallbackAvatar}
alt={pubkey}
className="h-8 w-8 rounded-md bg-black dark:bg-white"
/>
</Avatar.Root>
<h5 className="max-w-[10rem] truncate font-semibold text-neutral-900 dark:text-neutral-100">
{fallbackName}
</h5>
</div> </div>
); );
} }
@@ -112,24 +130,21 @@ export const User = memo(function User({
/> />
<Avatar.Fallback delayMs={300}> <Avatar.Fallback delayMs={300}>
<img <img
src={svgURI} src={fallbackAvatar}
alt={pubkey} alt={pubkey}
className="h-8 w-8 rounded-md bg-black dark:bg-white" className="h-8 w-8 rounded-md bg-black dark:bg-white"
/> />
</Avatar.Fallback> </Avatar.Fallback>
</Avatar.Root> </Avatar.Root>
<h5 className="max-w-[10rem] truncate font-semibold text-neutral-900 dark:text-neutral-100"> <h5 className="max-w-[10rem] truncate font-semibold text-neutral-900 dark:text-neutral-100">
{user?.name || {user?.name || user?.display_name || user?.displayName || fallbackName}
user?.display_name ||
user?.displayName ||
displayNpub(pubkey, 16)}
</h5> </h5>
</div> </div>
); );
} }
if (variant === 'large') { if (variant === 'large') {
if (isFetching) { if (isLoading) {
return ( return (
<div className="flex items-center gap-2.5"> <div className="flex items-center gap-2.5">
<div className="h-14 w-14 shrink-0 animate-pulse rounded-lg bg-neutral-300 dark:bg-neutral-700" /> <div className="h-14 w-14 shrink-0 animate-pulse rounded-lg bg-neutral-300 dark:bg-neutral-700" />
@@ -153,7 +168,7 @@ export const User = memo(function User({
/> />
<Avatar.Fallback delayMs={300}> <Avatar.Fallback delayMs={300}>
<img <img
src={svgURI} src={fallbackAvatar}
alt={pubkey} alt={pubkey}
className="h-11 w-11 rounded-lg bg-black dark:bg-white" className="h-11 w-11 rounded-lg bg-black dark:bg-white"
/> />
@@ -172,7 +187,7 @@ export const User = memo(function User({
} }
if (variant === 'simple') { if (variant === 'simple') {
if (isFetching) { if (isLoading) {
return ( return (
<div className="flex items-center gap-2.5"> <div className="flex items-center gap-2.5">
<div className="h-10 w-10 shrink-0 animate-pulse rounded-lg bg-neutral-300 dark:bg-neutral-700" /> <div className="h-10 w-10 shrink-0 animate-pulse rounded-lg bg-neutral-300 dark:bg-neutral-700" />
@@ -196,7 +211,7 @@ export const User = memo(function User({
/> />
<Avatar.Fallback delayMs={300}> <Avatar.Fallback delayMs={300}>
<img <img
src={svgURI} src={fallbackAvatar}
alt={pubkey} alt={pubkey}
className="h-10 w-10 rounded-lg bg-black dark:bg-white" className="h-10 w-10 rounded-lg bg-black dark:bg-white"
/> />
@@ -207,7 +222,7 @@ export const User = memo(function User({
{user?.name || user?.display_name || user?.displayName} {user?.name || user?.display_name || user?.displayName}
</h3> </h3>
<p className="max-w-[10rem] truncate text-sm text-neutral-900 dark:text-neutral-100/70"> <p className="max-w-[10rem] truncate text-sm text-neutral-900 dark:text-neutral-100/70">
{user?.nip05 || user?.username || displayNpub(pubkey, 16)} {user?.nip05 || user?.username || fallbackName}
</p> </p>
</div> </div>
</div> </div>
@@ -215,7 +230,7 @@ export const User = memo(function User({
} }
if (variant === 'avatar') { if (variant === 'avatar') {
if (isFetching) { if (isLoading) {
return ( return (
<div className="h-12 w-12 animate-pulse rounded-lg bg-neutral-300 dark:bg-neutral-700" /> <div className="h-12 w-12 animate-pulse rounded-lg bg-neutral-300 dark:bg-neutral-700" />
); );
@@ -232,7 +247,7 @@ export const User = memo(function User({
/> />
<Avatar.Fallback delayMs={300}> <Avatar.Fallback delayMs={300}>
<img <img
src={svgURI} src={fallbackAvatar}
alt={pubkey} alt={pubkey}
className="h-12 w-12 rounded-lg bg-black dark:bg-white" className="h-12 w-12 rounded-lg bg-black dark:bg-white"
/> />
@@ -242,7 +257,7 @@ export const User = memo(function User({
} }
if (variant === 'miniavatar') { if (variant === 'miniavatar') {
if (isFetching) { if (isLoading) {
return ( return (
<div className="h-10 w-10 shrink-0 animate-pulse rounded-lg bg-neutral-300 dark:bg-neutral-700" /> <div className="h-10 w-10 shrink-0 animate-pulse rounded-lg bg-neutral-300 dark:bg-neutral-700" />
); );
@@ -259,7 +274,7 @@ export const User = memo(function User({
/> />
<Avatar.Fallback delayMs={300}> <Avatar.Fallback delayMs={300}>
<img <img
src={svgURI} src={fallbackAvatar}
alt={pubkey} alt={pubkey}
className="h-10 w-10 rounded-lg bg-black dark:bg-white" className="h-10 w-10 rounded-lg bg-black dark:bg-white"
/> />
@@ -269,9 +284,23 @@ export const User = memo(function User({
} }
if (variant === 'childnote') { if (variant === 'childnote') {
if (isFetching) { if (isLoading) {
return ( return (
<div className="h-10 w-10 shrink-0 animate-pulse rounded-lg bg-neutral-300 dark:bg-neutral-700" /> <>
<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>
</>
); );
} }
@@ -287,7 +316,7 @@ export const User = memo(function User({
/> />
<Avatar.Fallback delayMs={300}> <Avatar.Fallback delayMs={300}>
<img <img
src={svgURI} src={fallbackAvatar}
alt={pubkey} alt={pubkey}
className="h-10 w-10 rounded-lg bg-black dark:bg-white" className="h-10 w-10 rounded-lg bg-black dark:bg-white"
/> />
@@ -295,10 +324,7 @@ export const User = memo(function User({
</Avatar.Root> </Avatar.Root>
<div className="absolute left-2 top-2 inline-flex items-center gap-1.5 font-semibold leading-tight"> <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"> <div className="w-full max-w-[10rem] truncate">
{user?.display_name || {user?.display_name || user?.name || user?.displayName || fallbackName}{' '}
user?.name ||
user?.displayName ||
displayNpub(pubkey, 16)}{' '}
</div> </div>
<div className="font-normal text-neutral-700 dark:text-neutral-300"> <div className="font-normal text-neutral-700 dark:text-neutral-300">
{subtext}: {subtext}:
@@ -309,7 +335,7 @@ export const User = memo(function User({
} }
if (variant === 'stacked') { if (variant === 'stacked') {
if (isFetching) { if (isLoading) {
return ( return (
<div className="inline-block h-8 w-8 animate-pulse rounded-full bg-neutral-300 ring-1 ring-neutral-200 dark:bg-neutral-700 dark:ring-neutral-800" /> <div className="inline-block h-8 w-8 animate-pulse rounded-full bg-neutral-300 ring-1 ring-neutral-200 dark:bg-neutral-700 dark:ring-neutral-800" />
); );
@@ -326,7 +352,7 @@ export const User = memo(function User({
/> />
<Avatar.Fallback delayMs={300}> <Avatar.Fallback delayMs={300}>
<img <img
src={svgURI} src={fallbackAvatar}
alt={pubkey} alt={pubkey}
className="inline-block h-8 w-8 rounded-full bg-black ring-1 ring-neutral-200 dark:bg-white dark:ring-neutral-800" className="inline-block h-8 w-8 rounded-full bg-black ring-1 ring-neutral-200 dark:bg-white dark:ring-neutral-800"
/> />
@@ -336,7 +362,7 @@ export const User = memo(function User({
} }
if (variant === 'ministacked') { if (variant === 'ministacked') {
if (isFetching) { if (isLoading) {
return ( return (
<div className="inline-block h-6 w-6 animate-pulse rounded-full bg-neutral-300 ring-1 ring-white dark:ring-black" /> <div className="inline-block h-6 w-6 animate-pulse rounded-full bg-neutral-300 ring-1 ring-white dark:ring-black" />
); );
@@ -353,7 +379,7 @@ export const User = memo(function User({
/> />
<Avatar.Fallback delayMs={300}> <Avatar.Fallback delayMs={300}>
<img <img
src={svgURI} src={fallbackAvatar}
alt={pubkey} alt={pubkey}
className="inline-block h-6 w-6 rounded-full bg-black ring-1 ring-white dark:bg-white dark:ring-black" className="inline-block h-6 w-6 rounded-full bg-black ring-1 ring-white dark:bg-white dark:ring-black"
/> />
@@ -363,7 +389,7 @@ export const User = memo(function User({
} }
if (variant === 'repost') { if (variant === 'repost') {
if (isFetching) { if (isLoading) {
return ( return (
<div className="flex gap-3"> <div className="flex gap-3">
<div className="inline-flex h-10 w-10 items-center justify-center"> <div className="inline-flex h-10 w-10 items-center justify-center">
@@ -393,7 +419,7 @@ export const User = memo(function User({
/> />
<Avatar.Fallback delayMs={300}> <Avatar.Fallback delayMs={300}>
<img <img
src={svgURI} src={fallbackAvatar}
alt={pubkey} alt={pubkey}
className="h-6 w-6 rounded bg-black dark:bg-white" className="h-6 w-6 rounded bg-black dark:bg-white"
/> />
@@ -401,10 +427,7 @@ export const User = memo(function User({
</Avatar.Root> </Avatar.Root>
<div className="inline-flex items-baseline gap-1"> <div className="inline-flex items-baseline gap-1">
<h5 className="max-w-[10rem] truncate font-medium text-neutral-900 dark:text-neutral-100/80"> <h5 className="max-w-[10rem] truncate font-medium text-neutral-900 dark:text-neutral-100/80">
{user?.name || {user?.name || user?.display_name || user?.displayName || fallbackName}
user?.display_name ||
user?.displayName ||
displayNpub(pubkey, 16)}
</h5> </h5>
<span className="text-blue-500">reposted</span> <span className="text-blue-500">reposted</span>
</div> </div>
@@ -414,13 +437,13 @@ export const User = memo(function User({
} }
if (variant === 'thread') { if (variant === 'thread') {
if (isFetching) { if (isLoading) {
return ( return (
<div className="flex items-center gap-3"> <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="h-10 w-10 shrink-0 animate-pulse rounded-lg bg-neutral-300 dark:bg-neutral-700" />
<div className="flex flex-1 flex-col"> <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-4 w-36 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 className="h-3 w-24 animate-pulse rounded bg-neutral-300 dark:bg-neutral-700" />
</div> </div>
</div> </div>
); );
@@ -438,7 +461,7 @@ export const User = memo(function User({
/> />
<Avatar.Fallback delayMs={300}> <Avatar.Fallback delayMs={300}>
<img <img
src={svgURI} src={fallbackAvatar}
alt={pubkey} alt={pubkey}
className="h-10 w-10 rounded-lg bg-black ring-1 ring-neutral-200/50 dark:bg-white dark:ring-neutral-800/50" className="h-10 w-10 rounded-lg bg-black ring-1 ring-neutral-200/50 dark:bg-white dark:ring-neutral-800/50"
/> />
@@ -451,19 +474,27 @@ export const User = memo(function User({
<div className="inline-flex items-center gap-2 text-sm text-neutral-600 dark:text-neutral-400"> <div className="inline-flex items-center gap-2 text-sm text-neutral-600 dark:text-neutral-400">
<span>{createdAt}</span> <span>{createdAt}</span>
<span>·</span> <span>·</span>
<span>{displayNpub(pubkey, 16)}</span> <span>{fallbackName}</span>
</div> </div>
</div> </div>
</div> </div>
); );
} }
if (isFetching) { if (isLoading) {
return ( return (
<div className="flex items-center gap-3 px-3"> <div className="flex items-center gap-3 px-3">
<div className="h-9 w-9 shrink-0 animate-pulse rounded-lg bg-neutral-300 dark:bg-neutral-700" /> <Avatar.Root className="h-9 w-9 shrink-0">
<Avatar.Image
src={fallbackAvatar}
alt={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="h-6 flex-1">
<div className="h-4 w-36 animate-pulse rounded bg-neutral-300 dark:bg-neutral-700" /> <div className="max-w-[15rem] truncate font-semibold text-neutral-950 dark:text-neutral-50">
{fallbackName}
</div>
</div> </div>
</div> </div>
); );
@@ -483,7 +514,7 @@ export const User = memo(function User({
/> />
<Avatar.Fallback delayMs={300}> <Avatar.Fallback delayMs={300}>
<img <img
src={svgURI} src={fallbackAvatar}
alt={pubkey} alt={pubkey}
className="h-9 w-9 rounded-lg bg-black ring-1 ring-neutral-200/50 dark:bg-white dark:ring-neutral-800/50" className="h-9 w-9 rounded-lg bg-black ring-1 ring-neutral-200/50 dark:bg-white dark:ring-neutral-800/50"
/> />
@@ -492,10 +523,7 @@ export const User = memo(function User({
</HoverCard.Trigger> </HoverCard.Trigger>
<div className="flex h-6 flex-1 items-start gap-2"> <div className="flex h-6 flex-1 items-start gap-2">
<div className="max-w-[15rem] truncate font-semibold text-neutral-950 dark:text-neutral-50"> <div className="max-w-[15rem] truncate font-semibold text-neutral-950 dark:text-neutral-50">
{user?.name || {user?.name || user?.display_name || user?.displayName || fallbackName}
user?.display_name ||
user?.displayName ||
displayNpub(pubkey, 16)}
</div> </div>
<div className="ml-auto inline-flex items-center gap-3"> <div className="ml-auto inline-flex items-center gap-3">
<div className="text-neutral-500 dark:text-neutral-400">{createdAt}</div> <div className="text-neutral-500 dark:text-neutral-400">{createdAt}</div>
@@ -519,7 +547,7 @@ export const User = memo(function User({
/> />
<Avatar.Fallback delayMs={300}> <Avatar.Fallback delayMs={300}>
<img <img
src={svgURI} src={fallbackAvatar}
alt={pubkey} alt={pubkey}
className="h-10 w-10 rounded-lg bg-black dark:bg-white" className="h-10 w-10 rounded-lg bg-black dark:bg-white"
/> />
@@ -541,7 +569,7 @@ export const User = memo(function User({
/> />
) : ( ) : (
<span className="max-w-[15rem] truncate text-sm text-neutral-500 dark:text-neutral-300"> <span className="max-w-[15rem] truncate text-sm text-neutral-500 dark:text-neutral-300">
{displayNpub(pubkey, 16)} {fallbackName}
</span> </span>
)} )}
</div> </div>

View File

@@ -7,7 +7,7 @@ import { useNDK } from '@libs/ndk/provider';
export function useProfile(pubkey: string, embed?: string) { export function useProfile(pubkey: string, embed?: string) {
const { ndk } = useNDK(); const { ndk } = useNDK();
const { const {
isFetching, isLoading,
isError, isError,
data: user, data: user,
} = useQuery({ } = useQuery({
@@ -31,12 +31,6 @@ export function useProfile(pubkey: string, embed?: string) {
const user = ndk.getUser({ pubkey: hexstring }); const user = ndk.getUser({ pubkey: hexstring });
const profile = await user.fetchProfile(); const profile = await user.fetchProfile();
if (!profile)
throw new Error(
`Cannot get metadata for ${pubkey}, will be retry after 10 seconds`
);
return profile; return profile;
} catch (e) { } catch (e) {
console.error(e); console.error(e);
@@ -50,5 +44,5 @@ export function useProfile(pubkey: string, embed?: string) {
retry: 2, retry: 2,
}); });
return { isFetching, isError, user }; return { isLoading, isError, user };
} }