polish

2023-12-05 15:31:45 +07:00
parent 7decf264d7
commit 4006c0010e
11 changed files with 138 additions and 100 deletions
--- a/src/app/auth/import.tsx
+++ b/src/app/auth/import.tsx
@@ -145,6 +145,7 @@ export function ImportAccountScreen() {
              </label>
              <div className="flex w-full flex-col gap-2">
                <input
+                  readOnly={!!pubkey}
                  name="npub"
                  type="text"
                  value={npub}
@@ -172,15 +173,14 @@ export function ImportAccountScreen() {
                    >
                      Continue with nsecBunker
                    </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>
                ) : 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>
--- a/src/app/chats/components/chatListItem.tsx
+++ b/src/app/chats/components/chatListItem.tsx
@@ -12,14 +12,14 @@ import { useProfile } from '@utils/hooks/useProfile';
 import { displayNpub } from '@utils/shortenKey';

 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 createdAt = formatCreatedAt(event.created_at, true);
  const svgURI =
    'data:image/svg+xml;utf8,' + encodeURIComponent(minidenticon(event.pubkey, 90, 50));

-  if (status === 'pending') {
+  if (isLoading) {
    return (
      <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" />
--- a/src/app/explore/components/groupTitle.tsx
+++ b/src/app/explore/components/groupTitle.tsx
@@ -3,9 +3,9 @@ import { memo } from 'react';
 import { useProfile } from '@utils/hooks/useProfile';

 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" />;
  }

--- a/src/app/explore/components/userWithDrawer.tsx
+++ b/src/app/explore/components/userWithDrawer.tsx
@@ -23,7 +23,7 @@ export const UserWithDrawer = memo(function UserWithDrawer({
 }) {
  const { db } = useStorage();
  const { ndk } = useNDK();
-  const { status, user } = useProfile(pubkey);
+  const { isLoading, user } = useProfile(pubkey);

  const [followed, setFollowed] = useState(false);

@@ -82,7 +82,7 @@ export const UserWithDrawer = memo(function UserWithDrawer({
      <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">
          <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>
                <p>Loading...</p>
              </div>
--- a/src/app/new/components/mentionPopupItem.tsx
+++ b/src/app/new/components/mentionPopupItem.tsx
@@ -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 { displayNpub } from '@utils/shortenKey';

 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 (
      <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" />
@@ -18,14 +26,25 @@ export function MentionPopupItem({ pubkey, embed }: { pubkey: string; embed?: st

  return (
    <div className="flex h-11 items-center justify-start gap-2.5 px-2 hover:bg-neutral-200 dark:bg-neutral-800">
-      <img
-        src={user.picture || user.image}
-        alt={pubkey}
-        className="shirnk-0 h-8 w-8 rounded-md object-cover"
-      />
+      <Avatar.Root className="shirnk-0 h-8 w-8">
+        <Avatar.Image
+          src={user?.picture || user?.image}
+          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">
        <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>
        <span className="text-sm leading-none text-neutral-600 dark:text-neutral-400">
          {displayNpub(pubkey, 16)}
--- a/src/app/settings/components/profileCard.tsx
+++ b/src/app/settings/components/profileCard.tsx
@@ -11,7 +11,7 @@ import { displayNpub } from '@utils/shortenKey';

 export function ProfileCard() {
  const { db } = useStorage();
-  const { status, user } = useProfile(db.account.pubkey);
+  const { isLoading, user } = useProfile(db.account.pubkey);

  const svgURI =
    'data:image/svg+xml;utf8,' +
@@ -19,7 +19,7 @@ export function ProfileCard() {

  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">
-      {status === 'pending' ? (
+      {isLoading ? (
        <div className="flex h-full w-full items-center justify-center">
          <LoaderIcon className="h-4 w-4 animate-spin" />
        </div>
--- a/src/app/users/components/profile.tsx
+++ b/src/app/users/components/profile.tsx
@@ -114,7 +114,7 @@ export function UserProfile({ pubkey }: { pubkey: string }) {
          <div className="flex flex-col items-center gap-1">
            <div className="inline-flex flex-col items-center">
              <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>
              {user?.nip05 ? (
                <NIP05
--- a/src/shared/notes/actions/zap.tsx
+++ b/src/shared/notes/actions/zap.tsx
@@ -17,6 +17,7 @@ import { CancelIcon, ZapIcon } from '@shared/icons';
 import { useProfile } from '@utils/hooks/useProfile';
 import { sendNativeNotification } from '@utils/notification';
 import { compactNumber } from '@utils/number';
+import { displayNpub } from '@utils/shortenKey';

 export function NoteZap({ event }: { event: NDKEvent }) {
  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="w-6" />
              <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.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" />
--- a/src/shared/notes/mentions/user.tsx
+++ b/src/shared/notes/mentions/user.tsx
@@ -20,12 +20,7 @@ export const MentionUser = memo(function MentionUser({ pubkey }: { pubkey: strin
      }
      className="break-words text-blue-500 hover:text-blue-600"
    >
-      {'@' +
-        (user?.name ||
-          user?.display_name ||
-          user?.displayName ||
-          user?.username ||
-          'unknown')}
+      {'@' + (user?.name || user?.displayName || user?.username || 'unknown')}
    </button>
  );
 });
--- a/src/shared/user.tsx
+++ b/src/shared/user.tsx
@@ -40,20 +40,33 @@ export const User = memo(function User({
  embedProfile?: string;
  subtext?: string;
 }) {
-  const { isFetching, user } = useProfile(pubkey, embedProfile);
+  const { isLoading, user } = useProfile(pubkey, embedProfile);

-  const createdAt = useMemo(() => formatCreatedAt(time, variant === 'chat'), [pubkey]);
-  const svgURI = useMemo(
+  const createdAt = useMemo(() => formatCreatedAt(time, variant === 'chat'), [time]);
+  const fallbackName = useMemo(() => displayNpub(pubkey, 16), [pubkey]);
+  const fallbackAvatar = useMemo(
    () => 'data:image/svg+xml;utf8,' + encodeURIComponent(minidenticon(pubkey, 90, 50)),
    [pubkey]
  );

  if (variant === 'mention') {
-    if (isFetching) {
+    if (isLoading) {
      return (
        <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" />
-          <div className="h-3.5 w-36 animate-pulse rounded bg-neutral-300 dark:bg-neutral-700" />
+          <Avatar.Root className="shrink-0">
+            <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>
      );
    }
@@ -70,7 +83,7 @@ export const User = memo(function User({
          />
          <Avatar.Fallback delayMs={300}>
            <img
-              src={svgURI}
+              src={fallbackAvatar}
              alt={pubkey}
              className="h-6 w-6 rounded-md bg-black dark:bg-white"
            />
@@ -78,10 +91,7 @@ export const User = memo(function User({
        </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 ||
-              displayNpub(pubkey, 16)}
+            {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>
@@ -91,11 +101,19 @@ export const User = memo(function User({
  }

  if (variant === 'notify') {
-    if (isFetching) {
+    if (isLoading) {
      return (
        <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" />
-          <div className="h-3.5 w-36 animate-pulse rounded bg-neutral-300 dark:bg-neutral-700" />
+          <Avatar.Root className="h-8 w-8 shrink-0">
+            <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>
      );
    }
@@ -112,24 +130,21 @@ export const User = memo(function User({
          />
          <Avatar.Fallback delayMs={300}>
            <img
-              src={svgURI}
+              src={fallbackAvatar}
              alt={pubkey}
              className="h-8 w-8 rounded-md bg-black dark:bg-white"
            />
          </Avatar.Fallback>
        </Avatar.Root>
        <h5 className="max-w-[10rem] truncate font-semibold text-neutral-900 dark:text-neutral-100">
-          {user?.name ||
-            user?.display_name ||
-            user?.displayName ||
-            displayNpub(pubkey, 16)}
+          {user?.name || user?.display_name || user?.displayName || fallbackName}
        </h5>
      </div>
    );
  }

  if (variant === 'large') {
-    if (isFetching) {
+    if (isLoading) {
      return (
        <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" />
@@ -153,7 +168,7 @@ export const User = memo(function User({
          />
          <Avatar.Fallback delayMs={300}>
            <img
-              src={svgURI}
+              src={fallbackAvatar}
              alt={pubkey}
              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 (isFetching) {
+    if (isLoading) {
      return (
        <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" />
@@ -196,7 +211,7 @@ export const User = memo(function User({
          />
          <Avatar.Fallback delayMs={300}>
            <img
-              src={svgURI}
+              src={fallbackAvatar}
              alt={pubkey}
              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}
          </h3>
          <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>
        </div>
      </div>
@@ -215,7 +230,7 @@ export const User = memo(function User({
  }

  if (variant === 'avatar') {
-    if (isFetching) {
+    if (isLoading) {
      return (
        <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}>
          <img
-            src={svgURI}
+            src={fallbackAvatar}
            alt={pubkey}
            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 (isFetching) {
+    if (isLoading) {
      return (
        <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}>
          <img
-            src={svgURI}
+            src={fallbackAvatar}
            alt={pubkey}
            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 (isFetching) {
+    if (isLoading) {
      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}>
            <img
-              src={svgURI}
+              src={fallbackAvatar}
              alt={pubkey}
              className="h-10 w-10 rounded-lg bg-black dark:bg-white"
            />
@@ -295,10 +324,7 @@ export const User = memo(function User({
        </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 ||
-              displayNpub(pubkey, 16)}{' '}
+            {user?.display_name || user?.name || user?.displayName || fallbackName}{' '}
          </div>
          <div className="font-normal text-neutral-700 dark:text-neutral-300">
            {subtext}:
@@ -309,7 +335,7 @@ export const User = memo(function User({
  }

  if (variant === 'stacked') {
-    if (isFetching) {
+    if (isLoading) {
      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" />
      );
@@ -326,7 +352,7 @@ export const User = memo(function User({
        />
        <Avatar.Fallback delayMs={300}>
          <img
-            src={svgURI}
+            src={fallbackAvatar}
            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"
          />
@@ -336,7 +362,7 @@ export const User = memo(function User({
  }

  if (variant === 'ministacked') {
-    if (isFetching) {
+    if (isLoading) {
      return (
        <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}>
          <img
-            src={svgURI}
+            src={fallbackAvatar}
            alt={pubkey}
            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 (isFetching) {
+    if (isLoading) {
      return (
        <div className="flex gap-3">
          <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}>
              <img
-                src={svgURI}
+                src={fallbackAvatar}
                alt={pubkey}
                className="h-6 w-6 rounded bg-black dark:bg-white"
              />
@@ -401,10 +427,7 @@ export const User = memo(function User({
          </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 ||
-                displayNpub(pubkey, 16)}
+              {user?.name || user?.display_name || user?.displayName || fallbackName}
            </h5>
            <span className="text-blue-500">reposted</span>
          </div>
@@ -414,13 +437,13 @@ export const User = memo(function User({
  }

  if (variant === 'thread') {
-    if (isFetching) {
+    if (isLoading) {
      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="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-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>
      );
@@ -438,7 +461,7 @@ export const User = memo(function User({
          />
          <Avatar.Fallback delayMs={300}>
            <img
-              src={svgURI}
+              src={fallbackAvatar}
              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"
            />
@@ -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">
            <span>{createdAt}</span>
            <span>·</span>
-            <span>{displayNpub(pubkey, 16)}</span>
+            <span>{fallbackName}</span>
          </div>
        </div>
      </div>
    );
  }

-  if (isFetching) {
+  if (isLoading) {
    return (
      <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-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>
    );
@@ -483,7 +514,7 @@ export const User = memo(function User({
            />
            <Avatar.Fallback delayMs={300}>
              <img
-                src={svgURI}
+                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"
              />
@@ -492,10 +523,7 @@ export const User = memo(function User({
        </HoverCard.Trigger>
        <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">
-            {user?.name ||
-              user?.display_name ||
-              user?.displayName ||
-              displayNpub(pubkey, 16)}
+            {user?.name || user?.display_name || user?.displayName || fallbackName}
          </div>
          <div className="ml-auto inline-flex items-center gap-3">
            <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}>
                <img
-                  src={svgURI}
+                  src={fallbackAvatar}
                  alt={pubkey}
                  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">
-                    {displayNpub(pubkey, 16)}
+                    {fallbackName}
                  </span>
                )}
              </div>
--- a/src/utils/hooks/useProfile.ts
+++ b/src/utils/hooks/useProfile.ts
@@ -7,7 +7,7 @@ import { useNDK } from '@libs/ndk/provider';
 export function useProfile(pubkey: string, embed?: string) {
  const { ndk } = useNDK();
  const {
-    isFetching,
+    isLoading,
    isError,
    data: user,
  } = useQuery({
@@ -31,12 +31,6 @@ export function useProfile(pubkey: string, embed?: string) {

        const user = ndk.getUser({ pubkey: hexstring });
        const profile = await user.fetchProfile();
-
-        if (!profile)
-          throw new Error(
-            `Cannot get metadata for ${pubkey}, will be retry after 10 seconds`
-          );
-
        return profile;
      } catch (e) {
        console.error(e);
@@ -50,5 +44,5 @@ export function useProfile(pubkey: string, embed?: string) {
    retry: 2,
  });

-  return { isFetching, isError, user };
+  return { isLoading, isError, user };
 }