Merge pull request #127 from luminous-devs/hotfix/2.2.1

v2.2.1
2023-12-06 08:09:44 +07:00
parent e5e4109e79 24c2ed4eb2
commit 740b7588bc
37 changed files with 845 additions and 722 deletions
--- a/.prettierrc
+++ b/.prettierrc
@@ -11,7 +11,6 @@
    "^@app/(.*)$",
    "^@libs/(.*)$",
    "^@shared/(.*)$",
-    "^@stores/(.*)$",
    "^@utils/(.*)$",
    "^[./]"
  ],
--- a/index.html
+++ b/index.html
@@ -4,7 +4,9 @@
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Lume</title>
  </head>
-  <body class="relative cursor-default select-none overflow-hidden font-sans antialiased h-screen w-screen text-neutral-950 dark:text-neutral-50">
+  <body
+    class="relative h-screen w-screen cursor-default select-none overflow-hidden font-sans text-neutral-950 antialiased dark:text-neutral-50"
+  >
    <div id="root"></div>
    <script type="module" src="/src/main.jsx"></script>
  </body>
--- a/package.json
+++ b/package.json
@@ -2,7 +2,7 @@
  "name": "lume",
  "description": "the communication app",
  "private": true,
-  "version": "2.2.0",
+  "version": "2.2.1",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
@@ -33,8 +33,8 @@
    "@radix-ui/react-switch": "^1.0.3",
    "@radix-ui/react-toolbar": "^1.0.4",
    "@radix-ui/react-tooltip": "^1.0.7",
-    "@tanstack/react-query": "^5.12.1",
-    "@tanstack/react-query-devtools": "^5.12.1",
+    "@tanstack/react-query": "^5.12.2",
+    "@tanstack/react-query-devtools": "^5.12.2",
    "@tauri-apps/api": "2.0.0-alpha.11",
    "@tauri-apps/cli": "2.0.0-alpha.17",
    "@tauri-apps/plugin-autostart": "2.0.0-alpha.3",
@@ -60,16 +60,15 @@
    "@tiptap/react": "^2.1.13",
    "@tiptap/starter-kit": "^2.1.13",
    "@tiptap/suggestion": "^2.1.13",
+    "@vidstack/react": "^1.8.3",
    "dayjs": "^1.11.10",
    "framer-motion": "^10.16.12",
    "html-to-text": "^9.0.5",
-    "idb-keyval": "^6.2.1",
    "light-bolt11-decoder": "^3.0.0",
    "lru-cache": "^10.1.0",
    "markdown-to-jsx": "^7.3.2",
-    "media-chrome": "^1.5.4",
    "minidenticons": "^4.2.0",
-    "nanoid": "^5.0.3",
+    "nanoid": "^5.0.4",
    "nostr-fetch": "^0.13.1",
    "nostr-tools": "^1.17.0",
    "qrcode.react": "^3.1.0",
@@ -85,8 +84,8 @@
    "sonner": "^1.2.4",
    "tauri-controls": "github:reyamir/tauri-controls",
    "tippy.js": "^6.3.7",
-    "tiptap-markdown": "^0.8.7",
-    "virtua": "^0.16.7",
+    "tiptap-markdown": "^0.8.8",
+    "virtua": "^0.17.4",
    "zustand": "^4.4.7"
  },
  "devDependencies": {
@@ -94,8 +93,8 @@
    "@tailwindcss/typography": "^0.5.10",
    "@trivago/prettier-plugin-sort-imports": "^4.3.0",
    "@types/html-to-text": "^9.0.4",
-    "@types/node": "^20.10.2",
-    "@types/react": "^18.2.40",
+    "@types/node": "^20.10.3",
+    "@types/react": "^18.2.41",
    "@types/react-dom": "^18.2.17",
    "@typescript-eslint/eslint-plugin": "^6.13.1",
    "@typescript-eslint/parser": "^6.13.1",
@@ -105,13 +104,13 @@
    "cross-env": "^7.0.3",
    "encoding": "^0.1.13",
    "eslint": "^8.55.0",
-    "eslint-config-prettier": "^9.0.0",
+    "eslint-config-prettier": "^9.1.0",
    "eslint-plugin-jsx-a11y": "^6.8.0",
    "eslint-plugin-react": "^7.33.2",
    "eslint-plugin-simple-import-sort": "^10.0.0",
    "husky": "^8.0.3",
-    "lint-staged": "^15.1.0",
-    "postcss": "^8.4.31",
+    "lint-staged": "^15.2.0",
+    "postcss": "^8.4.32",
    "prettier": "^3.1.0",
    "prettier-plugin-tailwindcss": "^0.5.7",
    "prop-types": "^15.8.1",
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
--- a/src-tauri/tauri.conf.json
+++ b/src-tauri/tauri.conf.json
@@ -9,7 +9,7 @@
  },
  "package": {
    "productName": "Lume",
-    "version": "2.2.0"
+    "version": "2.2.1"
  },
  "plugins": {
    "fs": {
--- a/src/app.css
+++ b/src/app.css
@@ -1,5 +1,9 @@
 /* @import 'reactflow/dist/style.css'; */

+/* Vidstack */
+@import '@vidstack/react/player/styles/default/theme.css';
+@import '@vidstack/react/player/styles/default/layouts/video.css';
+
@tailwind base;
@tailwind components;
@tailwind utilities;
@@ -41,22 +45,6 @@ input::-ms-clear {
  background-clip: padding-box;
 }

-.player {
-  --brand-color: #f5f5f5;
-  --focus-color: #4e9cf6;
-  --audio-brand: var(--brand-color);
-  --audio-focus-ring-color: var(--focus-color);
-  --audio-border-radius: 2px;
-  --video-brand: var(--brand-color);
-  --video-focus-ring-color: var(--focus-color);
-  --video-border-radius: 8px;
-  @apply w-full;
-}
-
-.player[data-view-type='video'] {
-  @apply aspect-video;
-}
-
 .ProseMirror p.is-empty::before {
  @apply text-neutral-600 dark:text-neutral-400 float-left h-0 pointer-events-none content-[attr(data-placeholder)];
 }
--- a/src/app.tsx
+++ b/src/app.tsx
@@ -308,7 +308,7 @@ export default function App() {
      router={router}
      fallbackElement={
        <div className="flex h-full w-full items-center justify-center">
-          <LoaderIcon className="h-6 w-6 animate-spin text-white" />
+          <LoaderIcon className="h-6 w-6 animate-spin" />
        </div>
      }
      future={{ v7_startTransition: true }}
--- a/src/app/auth/import.tsx
+++ b/src/app/auth/import.tsx
@@ -1,5 +1,6 @@
 import NDK, { NDKNip46Signer, NDKPrivateKeySigner } from '@nostr-dev-kit/ndk';
 import { readText } from '@tauri-apps/plugin-clipboard-manager';
+import { open } from '@tauri-apps/plugin-shell';
 import { motion } from 'framer-motion';
 import { nip19 } from 'nostr-tools';
 import { useState } from 'react';
@@ -49,6 +50,9 @@ export function ImportAccountScreen() {
      await db.createSetting('nsecbunker', '1');
      await db.secureSave(`${pubkey}-nsecbunker`, localSigner.privateKey);

+      // open nsecbunker web app in default browser
+      await open('https://app.nsecbunker.com/keys');
+
      const bunker = new NDK({
        explicitRelayUrls: ['wss://relay.nsecbunker.com', 'wss://nostr.vulpem.com'],
      });
@@ -141,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}
@@ -170,6 +175,12 @@ export function ImportAccountScreen() {
                    </button>
                  </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/notes/article.tsx
+++ b/src/app/notes/article.tsx
@@ -4,6 +4,7 @@ import { nip19 } from 'nostr-tools';
 import { EventPointer } from 'nostr-tools/lib/types/nip19';
 import { useMemo, useState } from 'react';
 import { useNavigate, useParams } from 'react-router-dom';
+import { toast } from 'sonner';

 import { ArrowLeftIcon, CheckCircleIcon, ShareIcon } from '@shared/icons';
 import { NoteReplyForm } from '@shared/notes';
@@ -40,14 +41,18 @@ export function ArticleNoteScreen() {
  }, [data]);

  const share = async () => {
-    await writeText(
-      'https://njump.me/' +
-        nip19.neventEncode({ id: data.id, author: data.pubkey } as EventPointer)
-    );
-    // update state
-    setIsCopy(true);
-    // reset state after 2 sec
-    setTimeout(() => setIsCopy(false), 2000);
+    try {
+      await writeText(
+        'https://njump.me/' +
+          nip19.neventEncode({ id: data?.id, author: data?.pubkey } as EventPointer)
+      );
+      // update state
+      setIsCopy(true);
+      // reset state after 2 sec
+      setTimeout(() => setIsCopy(false), 2000);
+    } catch (e) {
+      toast.error(e);
+    }
  };

  return (
--- a/src/app/notes/text.tsx
+++ b/src/app/notes/text.tsx
@@ -4,6 +4,7 @@ import { nip19 } from 'nostr-tools';
 import { EventPointer } from 'nostr-tools/lib/types/nip19';
 import { useRef, useState } from 'react';
 import { useNavigate, useParams } from 'react-router-dom';
+import { toast } from 'sonner';

 import { ArrowLeftIcon, CheckCircleIcon, ReplyIcon, ShareIcon } from '@shared/icons';
 import {
@@ -30,14 +31,18 @@ export function TextNoteScreen() {
  const [isCopy, setIsCopy] = useState(false);

  const share = async () => {
-    await writeText(
-      'https://njump.me/' +
-        nip19.neventEncode({ id: data.id, author: data.pubkey } as EventPointer)
-    );
-    // update state
-    setIsCopy(true);
-    // reset state after 2 sec
-    setTimeout(() => setIsCopy(false), 2000);
+    try {
+      await writeText(
+        'https://njump.me/' +
+          nip19.neventEncode({ id: data?.id, author: data?.pubkey } as EventPointer)
+      );
+      // update state
+      setIsCopy(true);
+      // reset state after 2 sec
+      setTimeout(() => setIsCopy(false), 2000);
+    } catch (e) {
+      toast.error(e);
+    }
  };

  const scrollToReply = () => {
--- a/src/app/relays/components/relayEventList.tsx
+++ b/src/app/relays/components/relayEventList.tsx
@@ -1,5 +1,6 @@
 import { NDKEvent, NDKKind } from '@nostr-dev-kit/ndk';
 import { useQuery } from '@tanstack/react-query';
+import { normalizeRelayUrl } from 'nostr-fetch';
 import { useCallback } from 'react';
 import { VList } from 'virtua';

@@ -15,7 +16,7 @@ export function RelayEventList({ relayUrl }: { relayUrl: string }) {
    queryFn: async () => {
      const url = 'wss://' + relayUrl;
      const events = await fetcher.fetchLatestEvents(
-        [url],
+        [normalizeRelayUrl(url)],
        {
          kinds: [NDKKind.Text, NDKKind.Repost],
        },
@@ -24,6 +25,8 @@ export function RelayEventList({ relayUrl }: { relayUrl: string }) {
      return events as unknown as NDKEvent[];
    },
    refetchOnWindowFocus: false,
+    refetchOnReconnect: false,
+    refetchOnMount: false,
  });

  const renderItem = useCallback(
@@ -41,19 +44,18 @@ export function RelayEventList({ relayUrl }: { relayUrl: string }) {
  );

  return (
-    <div className="h-full">
-      <VList className="mx-auto w-full max-w-[500px] scrollbar-none">
-        {status === 'pending' ? (
-          <div className="flex h-full w-full items-center justify-center">
-            <div className="inline-flex flex-col items-center justify-center gap-2">
-              <LoaderIcon className="h-5 w-5 animate-spin text-white" />
-              <p className="text-sm font-medium text-white/80">Loading newsfeed...</p>
-            </div>
+    <VList className="mx-auto h-full w-full max-w-[500px] pt-10 scrollbar-none">
+      {status === 'pending' ? (
+        <div className="flex h-full w-full items-center justify-center">
+          <div className="inline-flex flex-col items-center justify-center gap-2">
+            <LoaderIcon className="h-5 w-5 animate-spin text-white" />
+            <p className="text-sm font-medium text-white/80">Loading newsfeed...</p>
          </div>
-        ) : (
-          data.map((item) => renderItem(item))
-        )}
-      </VList>
-    </div>
+        </div>
+      ) : (
+        data.map((item) => renderItem(item))
+      )}
+      <div className="h-20" />
+    </VList>
  );
 }
--- a/src/app/relays/components/relayList.tsx
+++ b/src/app/relays/components/relayList.tsx
@@ -9,8 +9,6 @@ import { useNostr } from '@utils/hooks/useNostr';
 import { useRelay } from '@utils/hooks/useRelay';

 export function RelayList() {
-  const navigate = useNavigate();
-
  const { getAllRelaysByUsers } = useNostr();
  const { connectRelay } = useRelay();
  const { status, data } = useQuery({
@@ -24,6 +22,8 @@ export function RelayList() {
    staleTime: Infinity,
  });

+  const navigate = useNavigate();
+
  const inspectRelay = (relayUrl: string) => {
    const url = new URL(relayUrl);
    navigate(`/relays/${url.hostname}`);
--- a/src/app/relays/components/userRelayList.tsx
+++ b/src/app/relays/components/userRelayList.tsx
@@ -6,7 +6,7 @@ import { RelayForm } from '@app/relays/components/relayForm';
 import { useNDK } from '@libs/ndk/provider';
 import { useStorage } from '@libs/storage/provider';

-import { CancelIcon } from '@shared/icons';
+import { CancelIcon, RefreshIcon } from '@shared/icons';

 import { useRelay } from '@utils/hooks/useRelay';

@@ -14,7 +14,7 @@ export function UserRelayList() {
  const { db } = useStorage();
  const { ndk } = useNDK();
  const { removeRelay } = useRelay();
-  const { status, data } = useQuery({
+  const { status, data, refetch } = useQuery({
    queryKey: ['relays', db.account.pubkey],
    queryFn: async () => {
      const event = await ndk.fetchEvent(
@@ -25,7 +25,7 @@ export function UserRelayList() {
        { cacheUsage: NDKSubscriptionCacheUsage.ONLY_RELAY }
      );

-      if (!event) throw new Error('relay set not found');
+      if (!event) return [];
      return event.tags;
    },
    refetchOnWindowFocus: false,
@@ -35,15 +35,22 @@ export function UserRelayList() {

  return (
    <div className="col-span-1">
-      <div className="inline-flex h-16 w-full items-center border-b border-neutral-100 px-3 dark:border-neutral-900">
+      <div className="inline-flex h-16 w-full items-center justify-between border-b border-neutral-100 px-3 dark:border-neutral-900">
        <h3 className="font-semibold">Connected relays</h3>
+        <button
+          type="button"
+          onClick={() => refetch()}
+          className="inline-flex h-6 w-6 shrink-0 items-center justify-center rounded-md hover:bg-neutral-100 dark:hover:bg-neutral-900"
+        >
+          <RefreshIcon className="h-4 w-4" />
+        </button>
      </div>
      <div className="mt-3 flex flex-col gap-2 px-3">
        {status === 'pending' ? (
          <p>Loading...</p>
-        ) : !data ? (
-          <div className="flex h-20 w-full items-center justify-center rounded-xl bg-neutral-100 dark:bg-neutral-900">
-            <p className="text-sm font-medium">You not have personal relay set yet</p>
+        ) : !data.length ? (
+          <div className="flex h-20 w-full items-center justify-center rounded-xl bg-neutral-50 dark:bg-neutral-950">
+            <p className="text-sm font-medium">You not have personal relay list yet</p>
          </div>
        ) : (
          data.map((item) => (
@@ -68,8 +75,8 @@ export function UserRelayList() {
                </p>
              </div>
              <div className="inline-flex items-center gap-2">
-                {item[2] ? (
-                  <div className="inline-flex h-6 w-max items-center justify-center rounded bg-neutral-200 px-2 text-xs font-medium capitalize dark:bg-neutral-900">
+                {item[2]?.length ? (
+                  <div className="inline-flex h-6 w-max items-center justify-center rounded bg-neutral-200 px-2 text-xs font-medium capitalize dark:bg-neutral-800">
                    {item[2]}
                  </div>
                ) : null}
--- 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/libs/ndk/instance.ts
+++ b/src/libs/ndk/instance.ts
@@ -10,6 +10,7 @@ import { ask } from '@tauri-apps/plugin-dialog';
 import { relaunch } from '@tauri-apps/plugin-process';
 import { NostrFetcher, normalizeRelayUrlSet } from 'nostr-fetch';
 import { useEffect, useState } from 'react';
+import { toast } from 'sonner';

 import NDKCacheAdapterTauri from '@libs/ndk/cache';
 import { useStorage } from '@libs/storage/provider';
@@ -27,51 +28,73 @@ export const NDKInstance = () => {
  async function getSigner(nsecbunker?: boolean) {
    if (!db.account) return;

-    // NIP-46 Signer
-    if (nsecbunker) {
-      const localSignerPrivkey = await db.secureLoad(`${db.account.pubkey}-nsecbunker`);
-      if (!localSignerPrivkey) return null;
+    try {
+      // NIP-46 Signer
+      if (nsecbunker) {
+        const localSignerPrivkey = await db.secureLoad(`${db.account.pubkey}-nsecbunker`);
+        if (!localSignerPrivkey) return null;

-      const localSigner = new NDKPrivateKeySigner(localSignerPrivkey);
-      const bunker = new NDK({
-        explicitRelayUrls: ['wss://relay.nsecbunker.com', 'wss://nostr.vulpem.com'],
-      });
-      bunker.connect();
+        const localSigner = new NDKPrivateKeySigner(localSignerPrivkey);
+        const bunker = new NDK({
+          explicitRelayUrls: ['wss://relay.nsecbunker.com', 'wss://nostr.vulpem.com'],
+        });
+        bunker.connect();

-      const remoteSigner = new NDKNip46Signer(bunker, db.account.id, localSigner);
-      await remoteSigner.blockUntilReady();
+        const remoteSigner = new NDKNip46Signer(bunker, db.account.id, localSigner);
+        await remoteSigner.blockUntilReady();

-      return remoteSigner;
+        return remoteSigner;
+      }
+
+      // Privkey Signer
+      const userPrivkey = await db.secureLoad(db.account.pubkey);
+      if (!userPrivkey) return null;
+      return new NDKPrivateKeySigner(userPrivkey);
+    } catch (e) {
+      console.log(e);
+      if (e === 'Token already redeemed') {
+        toast.info(
+          'nsecbunker token already redeemed. You need to re-login with another token.'
+        );
+
+        await db.secureRemove(`${db.account.pubkey}-nsecbunker`);
+        await db.accountLogout();
+      }
+
+      return null;
    }
-
-    // Privkey Signer
-    const userPrivkey = await db.secureLoad(db.account.pubkey);
-    if (!userPrivkey) return null;
-    return new NDKPrivateKeySigner(userPrivkey);
  }

  async function initNDK() {
+    const outboxSetting = await db.getSettingValue('outbox');
+    const bunkerSetting = await db.getSettingValue('nsecbunker');
+
+    const bunker = !!parseInt(bunkerSetting);
+    const outbox = !!parseInt(outboxSetting);
+
+    const explicitRelayUrls = normalizeRelayUrlSet([
+      'wss://relay.damus.io',
+      'wss://relay.nostr.band',
+      'wss://nos.lol',
+      'wss://nostr.mutinywallet.com',
+    ]);
+
+    // #TODO: user should config outbox relays
+    const outboxRelayUrls = normalizeRelayUrlSet(['wss://purplepag.es']);
+
+    // #TODO: user should config blacklist relays
+    const blacklistRelayUrls = normalizeRelayUrlSet(['wss://brb.io']);
+
    try {
-      const outboxSetting = await db.getSettingValue('outbox');
-      const bunkerSetting = await db.getSettingValue('nsecbunker');
-      const explicitRelayUrls = normalizeRelayUrlSet([
-        'wss://relay.damus.io',
-        'wss://relay.nostr.band',
-        'wss://nos.lol',
-        'wss://nostr.mutinywallet.com',
-      ]);
-
-      const bunker = !!parseInt(bunkerSetting);
-      const outbox = !!parseInt(outboxSetting);
-
      const tauriAdapter = new NDKCacheAdapterTauri(db);
      const instance = new NDK({
        explicitRelayUrls,
-        cacheAdapter: tauriAdapter,
-        outboxRelayUrls: ['wss://purplepag.es'],
+        outboxRelayUrls,
+        blacklistRelayUrls,
        enableOutboxModel: outbox,
        autoConnectUserRelays: true,
        autoFetchUserMutelist: true,
+        cacheAdapter: tauriAdapter,
        // clientName: 'Lume',
        // clientNip89: '',
      });
@@ -88,9 +111,9 @@ export const NDKInstance = () => {
      if (db.account) {
        const user = instance.getUser({ pubkey: db.account.pubkey });
        instance.activeUser = user;
-        db.account.contacts = [...(await user.follows(undefined, outbox))].map(
-          (user) => user.pubkey
-        );
+
+        const contacts = await user.follows(undefined /* outbox */);
+        db.account.contacts = [...contacts].map((user) => user.pubkey);

        // prefetch newsfeed
        await queryClient.prefetchInfiniteQuery({
--- a/src/libs/storage/instance.ts
+++ b/src/libs/storage/instance.ts
@@ -416,7 +416,14 @@ export class LumeStorage {
    return await this.db.execute(`DELETE FROM relays WHERE relay = "${relay}";`);
  }

-  public async createSetting(key: string, value: string) {
+  public async createSetting(key: string, value: string | undefined) {
+    if (value) {
+      return await this.db.execute(
+        'INSERT OR IGNORE INTO settings (key, value) VALUES ($1, $2);',
+        [key, value]
+      );
+    }
+
    const currentSetting = await this.checkSettingValue(key);

    if (!currentSetting)
@@ -470,9 +477,7 @@ export class LumeStorage {
    await this.db.execute("UPDATE accounts SET is_active = '0' WHERE id = $1;", [
      this.account.id,
    ]);
-
    this.account = null;
-    return true;
  }

  public async close() {
--- a/src/main.jsx
+++ b/src/main.jsx
@@ -11,10 +11,7 @@ import App from './app';
 const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
-      gcTime: 1000 * 60 * 60 * 24, // 24 hours
-      queries: {
-        retryDelay: (attemptIndex) => Math.min(1000 * 2 ** attemptIndex, 10000), // 10 seconds
-      },
+      retryDelay: (attemptIndex) => Math.min(1000 * 2 ** attemptIndex, 10000), // 10 seconds
    },
  },
 });
--- a/src/shared/accounts/active.tsx
+++ b/src/shared/accounts/active.tsx
@@ -27,7 +27,7 @@ export function ActiveAccount() {
            loading="lazy"
            decoding="async"
            style={{ contentVisibility: 'auto' }}
-            className="aspect-square h-auto w-full rounded-md"
+            className="aspect-square h-auto w-full rounded-md object-cover"
          />
          <Avatar.Fallback delayMs={150}>
            <img
--- a/src/shared/accounts/logout.tsx
+++ b/src/shared/accounts/logout.tsx
@@ -19,7 +19,7 @@ export function Logout() {

      // remove private key
      await db.secureRemove(db.account.pubkey);
-      await db.secureRemove(db.account.pubkey + '-nsecbunker');
+      await db.secureRemove(`${db.account.pubkey}-nsecbunker`);

      // logout
      await db.accountLogout();
--- a/src/shared/accounts/more.tsx
+++ b/src/shared/accounts/more.tsx
@@ -1,8 +1,8 @@
 import * as DropdownMenu from '@radix-ui/react-dropdown-menu';
 import { Link } from 'react-router-dom';

+import { Logout } from '@shared/accounts/logout';
 import { HorizontalDotsIcon } from '@shared/icons';
-import { Logout } from '@shared/logout';

 export function AccountMoreActions() {
  return (
--- 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/child.tsx
+++ b/src/shared/notes/child.tsx
@@ -4,12 +4,22 @@ import { User } from '@shared/user';
 import { useEvent } from '@utils/hooks/useEvent';

 export function ChildNote({ id, isRoot }: { id: string; isRoot?: boolean }) {
-  const { status, data } = useEvent(id);
+  const { isFetching, isError, data } = useEvent(id);

-  if (status === 'pending' || !data) {
+  if (isFetching) {
    return <NoteSkeleton />;
  }

+  if (isError) {
+    return (
+      <div className="relative flex gap-3">
+        <div className="relative flex-1 rounded-md bg-neutral-200 px-2 py-2 dark:bg-neutral-800">
+          Failed to fetch event
+        </div>
+      </div>
+    );
+  }
+
  return (
    <div className="relative flex gap-3">
      <div className="relative flex-1 rounded-md bg-neutral-200 px-2 py-2 dark:bg-neutral-800">
--- a/src/shared/notes/file.tsx
+++ b/src/shared/notes/file.tsx
@@ -1,14 +1,11 @@
 import { NDKEvent } from '@nostr-dev-kit/ndk';
 import { downloadDir } from '@tauri-apps/api/path';
 import { download } from '@tauri-apps/plugin-upload';
+import { MediaPlayer, MediaProvider } from '@vidstack/react';
 import {
-  MediaControlBar,
-  MediaController,
-  MediaFullscreenButton,
-  MediaMuteButton,
-  MediaPlayButton,
-  MediaTimeRange,
-} from 'media-chrome/dist/react';
+  DefaultVideoLayout,
+  defaultLayoutIcons,
+} from '@vidstack/react/player/layouts/default';
 import { memo } from 'react';
 import { Link } from 'react-router-dom';

@@ -32,7 +29,7 @@ export function FileNote({ event }: { event: NDKEvent }) {
    switch (type) {
      case 'image':
        return (
-          <div key={url} className="group relative">
+          <div className="group relative">
            <img
              src={url}
              alt={url}
@@ -52,18 +49,15 @@ export function FileNote({ event }: { event: NDKEvent }) {
        );
      case 'video':
        return (
-          <MediaController
-            key={url}
-            className="aspect-video w-full overflow-hidden rounded-lg"
+          <MediaPlayer
+            src={url}
+            className="w-full overflow-hidden rounded-lg"
+            aspectRatio="16/9"
+            load="visible"
          >
-            <video slot="media" src={url} preload="metadata" muted />
-            <MediaControlBar>
-              <MediaPlayButton></MediaPlayButton>
-              <MediaTimeRange></MediaTimeRange>
-              <MediaMuteButton></MediaMuteButton>
-              <MediaFullscreenButton></MediaFullscreenButton>
-            </MediaControlBar>
-          </MediaController>
+            <MediaProvider />
+            <DefaultVideoLayout icons={defaultLayoutIcons} />
+          </MediaPlayer>
        );
      default:
        return (
--- a/src/shared/notes/kinds/file.tsx
+++ b/src/shared/notes/kinds/file.tsx
@@ -1,14 +1,11 @@
 import { NDKTag } from '@nostr-dev-kit/ndk';
 import { downloadDir } from '@tauri-apps/api/path';
 import { download } from '@tauri-apps/plugin-upload';
+import { MediaPlayer, MediaProvider } from '@vidstack/react';
 import {
-  MediaControlBar,
-  MediaController,
-  MediaFullscreenButton,
-  MediaMuteButton,
-  MediaPlayButton,
-  MediaTimeRange,
-} from 'media-chrome/dist/react';
+  DefaultVideoLayout,
+  defaultLayoutIcons,
+} from '@vidstack/react/player/layouts/default';
 import { memo } from 'react';
 import { Link } from 'react-router-dom';

@@ -50,18 +47,15 @@ export function FileKind({ tags }: { tags: NDKTag[] }) {

  if (type === 'video') {
    return (
-      <MediaController
-        key={url}
-        className="aspect-video w-full overflow-hidden rounded-lg"
+      <MediaPlayer
+        src={url}
+        className="w-full overflow-hidden rounded-lg"
+        aspectRatio="16/9"
+        load="visible"
      >
-        <video slot="media" src={url} preload="metadata" muted />
-        <MediaControlBar>
-          <MediaPlayButton></MediaPlayButton>
-          <MediaTimeRange></MediaTimeRange>
-          <MediaMuteButton></MediaMuteButton>
-          <MediaFullscreenButton></MediaFullscreenButton>
-        </MediaControlBar>
-      </MediaController>
+        <MediaProvider />
+        <DefaultVideoLayout icons={defaultLayoutIcons} />
+      </MediaPlayer>
    );
  }

--- a/src/shared/notes/mentions/note.tsx
+++ b/src/shared/notes/mentions/note.tsx
@@ -20,7 +20,7 @@ export const MentionNote = memo(function MentionNote({
  id: string;
  editing?: boolean;
 }) {
-  const { status, data } = useEvent(id);
+  const { isFetching, isError, data } = useEvent(id);
  const { addWidget } = useWidget();

  const renderKind = (event: NDKEvent) => {
@@ -36,7 +36,7 @@ export const MentionNote = memo(function MentionNote({
    }
  };

-  if (status === 'pending') {
+  if (isFetching) {
    return (
      <div className="w-full cursor-default rounded-lg bg-neutral-100 p-3 dark:bg-neutral-900">
        <NoteSkeleton />
@@ -44,6 +44,14 @@ export const MentionNote = memo(function MentionNote({
    );
  }

+  if (isError) {
+    return (
+      <div className="w-full cursor-default rounded-lg bg-neutral-100 p-3 dark:bg-neutral-900">
+        Failed to fetch event
+      </div>
+    );
+  }
+
  return (
    <div className="my-2 flex w-full cursor-default flex-col gap-1 rounded-lg bg-neutral-100 dark:bg-neutral-900">
      <div className="mt-3 px-3">
--- 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/notes/preview/video.tsx
+++ b/src/shared/notes/preview/video.tsx
@@ -1,27 +1,19 @@
+import { MediaPlayer, MediaProvider } from '@vidstack/react';
 import {
-  MediaControlBar,
-  MediaController,
-  MediaFullscreenButton,
-  MediaLoadingIndicator,
-  MediaMuteButton,
-  MediaPlayButton,
-  MediaTimeRange,
-} from 'media-chrome/dist/react';
+  DefaultVideoLayout,
+  defaultLayoutIcons,
+} from '@vidstack/react/player/layouts/default';

 export function VideoPreview({ url }: { url: string }) {
  return (
-    <MediaController
-      key={url}
-      className="my-2 aspect-video w-full overflow-hidden rounded-lg"
+    <MediaPlayer
+      src={url}
+      className="my-2 w-full overflow-hidden rounded-lg"
+      aspectRatio="16/9"
+      load="visible"
    >
-      <video slot="media" src={url} preload="metadata" muted />
-      <MediaLoadingIndicator slot="centered-chrome"></MediaLoadingIndicator>
-      <MediaControlBar>
-        <MediaPlayButton></MediaPlayButton>
-        <MediaTimeRange></MediaTimeRange>
-        <MediaMuteButton></MediaMuteButton>
-        <MediaFullscreenButton></MediaFullscreenButton>
-      </MediaControlBar>
-    </MediaController>
+      <MediaProvider />
+      <DefaultVideoLayout icons={defaultLayoutIcons} />
+    </MediaPlayer>
  );
 }
--- 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 { status, 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 (status === 'pending') {
+    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 (status === 'pending') {
+    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 (status === 'pending') {
+    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 (status === 'pending') {
+    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 (status === 'pending') {
+    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 (status === 'pending') {
+    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 (status === 'pending') {
+    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 (status === 'pending') {
+    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 (status === 'pending') {
+    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 (status === 'pending') {
+    if (isLoading) {
      return (
        <div className="flex gap-3">
          <div className="inline-flex h-10 w-10 items-center justify-center">
@@ -389,11 +415,11 @@ export const User = memo(function User({
              alt={pubkey}
              loading="lazy"
              decoding="async"
-              className="h-6 w-6 rounded"
+              className="h-6 w-6 rounded object-cover"
            />
            <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 (status === 'pending') {
+    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>
      );
@@ -434,11 +457,11 @@ export const User = memo(function User({
            alt={pubkey}
            loading="lazy"
            decoding="async"
-            className="h-10 w-10 rounded-lg ring-1 ring-neutral-200/50 dark:ring-neutral-800/50"
+            className="h-10 w-10 rounded-lg object-cover ring-1 ring-neutral-200/50 dark:ring-neutral-800/50"
          />
          <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 (status === 'pending') {
+  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>
@@ -515,11 +543,11 @@ export const User = memo(function User({
                alt={pubkey}
                loading="lazy"
                decoding="async"
-                className="h-10 w-10 rounded-lg"
+                className="h-10 w-10 rounded-lg object-cover"
              />
              <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/shared/widgets/thread.tsx
+++ b/src/shared/widgets/thread.tsx
@@ -21,7 +21,7 @@ import { useNostr } from '@utils/hooks/useNostr';
 import { Widget } from '@utils/types';

 export function ThreadWidget({ widget }: { widget: Widget }) {
-  const { status, data } = useEvent(widget.content);
+  const { isFetching, isError, data } = useEvent(widget.content);
  const { getEventThread } = useNostr();

  const renderKind = useCallback(
@@ -59,16 +59,22 @@ export function ThreadWidget({ widget }: { widget: Widget }) {
    <WidgetWrapper>
      <TitleBar id={widget.id} title={widget.title} />
      <WVList className="flex-1 overflow-y-auto px-3 pb-5">
-        {status === 'pending' ? (
+        {isFetching ? (
          <div className="flex h-16 items-center justify-center rounded-xl bg-neutral-50 px-3 py-3 dark:bg-neutral-950">
            <LoaderIcon className="h-5 w-5 animate-spin" />
          </div>
        ) : (
          <>
            <div className="flex flex-col rounded-xl bg-neutral-50 dark:bg-neutral-950">
-              <User pubkey={data.pubkey} time={data.created_at} variant="thread" />
-              {renderKind(data)}
-              <NoteActions event={data} />
+              {isError ? (
+                <div>Failed to fetch event</div>
+              ) : (
+                <>
+                  <User pubkey={data.pubkey} time={data.created_at} variant="thread" />
+                  {renderKind(data)}
+                  <NoteActions event={data} />
+                </>
+              )}
            </div>
            <NoteReplyForm rootEvent={data} />
            <ReplyList eventId={data.id} />
--- a/src/utils/constants.ts
+++ b/src/utils/constants.ts
@@ -1,9 +1,3 @@
-export const FULL_RELAYS = [
-  'wss://relay.damus.io',
-  'wss://relay.nostr.band/all',
-  'wss://nostr.mutinywallet.com',
-];
-
 export const FETCH_LIMIT = 20;

 export const HASHTAGS = [
--- a/src/utils/hooks/useEvent.ts
+++ b/src/utils/hooks/useEvent.ts
@@ -1,4 +1,4 @@
-import { NDKEvent } from '@nostr-dev-kit/ndk';
+import { NDKEvent, NDKSubscriptionCacheUsage, NostrEvent } from '@nostr-dev-kit/ndk';
 import { useQuery } from '@tanstack/react-query';
 import { nip19 } from 'nostr-tools';
 import { AddressPointer } from 'nostr-tools/lib/types/nip19';
@@ -7,7 +7,7 @@ import { useNDK } from '@libs/ndk/provider';

 export function useEvent(id: undefined | string, embed?: undefined | string) {
  const { ndk } = useNDK();
-  const { status, data } = useQuery({
+  const { status, isFetching, isError, data } = useQuery({
    queryKey: ['event', id],
    queryFn: async () => {
      const naddr = id.startsWith('naddr')
@@ -24,27 +24,33 @@ export function useEvent(id: undefined | string, embed?: undefined | string) {

        const rEvent = [...rEvents].slice(-1)[0];

-        if (!rEvent) return Promise.reject(new Error('event not found'));
+        if (!rEvent) throw new Error('event not found');
        return rEvent;
      }

      // return embed event (nostr.band api)
      if (embed) {
-        const event: NDKEvent = JSON.parse(embed);
-        return event;
+        const embedEvent: NostrEvent = JSON.parse(embed);
+        const ndkEvent = new NDKEvent(ndk, embedEvent);
+
+        return ndkEvent;
      }

      // get event from relay
-      const event = await ndk.fetchEvent(id);
+      const event = await ndk.fetchEvent(id, {
+        cacheUsage: NDKSubscriptionCacheUsage.CACHE_FIRST,
+      });
+
+      if (!event)
+        throw new Error(`Cannot get event with ${id}, will be retry after 10 seconds`);

-      if (!event) return Promise.reject(new Error('event not found'));
      return event;
    },
    refetchOnWindowFocus: false,
    refetchOnMount: false,
    refetchOnReconnect: false,
-    staleTime: Infinity,
+    retry: 2,
  });

-  return { status, data };
+  return { status, isFetching, isError, data };
 }
--- a/src/utils/hooks/useProfile.ts
+++ b/src/utils/hooks/useProfile.ts
@@ -1,48 +1,54 @@
-import { NDKUserProfile } from '@nostr-dev-kit/ndk';
-import { useQuery, useQueryClient } from '@tanstack/react-query';
+import { NDKSubscriptionCacheUsage, NDKUserProfile } from '@nostr-dev-kit/ndk';
+import { useQuery } from '@tanstack/react-query';
 import { nip19 } from 'nostr-tools';

 import { useNDK } from '@libs/ndk/provider';

 export function useProfile(pubkey: string, embed?: string) {
-  const queryClient = useQueryClient();
  const { ndk } = useNDK();
  const {
-    status,
+    isLoading,
+    isError,
    data: user,
-    error,
  } = useQuery({
    queryKey: ['user', pubkey],
    queryFn: async () => {
-      // parse data from nostr.band api
-      if (embed) {
-        const profile: NDKUserProfile = JSON.parse(embed);
+      try {
+        // parse data from nostr.band api
+        if (embed) {
+          const profile: NDKUserProfile = JSON.parse(embed);
+          return profile;
+        }
+
+        // get clean pubkey without any special characters
+        let hexstring = pubkey.replace(/[^a-zA-Z0-9]/g, '');
+
+        if (hexstring.startsWith('npub1') || hexstring.startsWith('nprofile1')) {
+          const decoded = nip19.decode(hexstring);
+          if (decoded.type === 'nprofile') hexstring = decoded.data.pubkey;
+          if (decoded.type === 'npub') hexstring = decoded.data;
+        }
+
+        const user = ndk.getUser({ pubkey: hexstring });
+        const profile = await user.fetchProfile({
+          cacheUsage: NDKSubscriptionCacheUsage.CACHE_FIRST,
+        });
+
+        if (!profile)
+          throw new Error(
+            `Cannot get metadata for ${pubkey}, will be retry after 10 seconds`
+          );
+
        return profile;
+      } catch (e) {
+        throw new Error(e);
      }
-
-      // get clean pubkey without any special characters
-      let hexstring = pubkey.replace(/[^a-zA-Z0-9]/g, '');
-
-      if (hexstring.startsWith('npub1') || hexstring.startsWith('nprofile1')) {
-        const decoded = nip19.decode(hexstring);
-        if (decoded.type === 'nprofile') hexstring = decoded.data.pubkey;
-        if (decoded.type === 'npub') hexstring = decoded.data;
-      }
-
-      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;
    },
-    initialData: () => queryClient.getQueryData(['user', pubkey]) as NDKUserProfile,
+    refetchOnMount: false,
    refetchOnWindowFocus: false,
    refetchOnReconnect: false,
    retry: 2,
  });

-  return { status, user, error };
+  return { isLoading, isError, user };
 }