migrate to tanstack query v5

2023-10-28 07:35:39 +07:00
parent 42eb882f52
commit 555c8ec08a
51 changed files with 290 additions and 305 deletions
--- a/src/app/auth/components/features/followList.tsx
+++ b/src/app/auth/components/features/followList.tsx
@@ -9,9 +9,9 @@ import { User } from '@shared/user';
 export function FollowList() {
  const { db } = useStorage();
  const { ndk } = useNDK();
-  const { status, data } = useQuery(
-    ['follows'],
-    async () => {
+  const { status, data } = useQuery({
+    queryKey: ['follows'],
+    queryFn: async () => {
      const user = ndk.getUser({ hexpubkey: db.account.pubkey });
      const follows = await user.follows();
      const followsAsArr = [];
@@ -29,16 +29,14 @@ export function FollowList() {

      return followsAsArr;
    },
-    {
-      refetchOnWindowFocus: false,
-    }
-  );
+    refetchOnWindowFocus: false,
+  });

  return (
    <div className="relative rounded-xl bg-neutral-100 p-3 text-neutral-800 dark:bg-neutral-900 dark:text-neutral-200">
      <h5 className="font-semibold">Your follows</h5>
      <div className="mt-2 flex w-full items-center justify-center">
-        {status === 'loading' ? (
+        {status === 'pending' ? (
          <LoaderIcon className="h-4 w-4 animate-spin text-neutral-900 dark:text-neutral-100" />
        ) : (
          <div className="isolate flex -space-x-2">
--- a/src/app/auth/onboarding/enrich.tsx
+++ b/src/app/auth/onboarding/enrich.tsx
@@ -17,12 +17,15 @@ import { arrayToNIP02 } from '@utils/transform';
 export function OnboardEnrichScreen() {
  const { ndk } = useNDK();
  const { db } = useStorage();
-  const { status, data } = useQuery(['trending-profiles-widget'], async () => {
-    const res = await fetch('https://api.nostr.band/v0/trending/profiles');
-    if (!res.ok) {
-      throw new Error('Error');
-    }
-    return res.json();
+  const { status, data } = useQuery({
+    queryKey: ['trending-profiles-widget'],
+    queryFn: async () => {
+      const res = await fetch('https://api.nostr.band/v0/trending/profiles');
+      if (!res.ok) {
+        throw new Error('Error');
+      }
+      return res.json();
+    },
  });

  const [loading, setLoading] = useState(false);
@@ -90,7 +93,7 @@ export function OnboardEnrichScreen() {
        </h1>
      </div>
      <div className="flex w-full flex-nowrap items-center gap-4 overflow-x-auto px-4 scrollbar-none">
-        {status === 'loading' ? (
+        {status === 'pending' ? (
          <div className="flex h-full w-full items-center justify-center">
            <LoaderIcon className="h-4 w-4 animate-spin text-neutral-900 dark:text-neutral-100" />
          </div>
--- a/src/app/auth/onboarding/relays.tsx
+++ b/src/app/auth/onboarding/relays.tsx
@@ -24,15 +24,13 @@ export function OnboardRelaysScreen() {
  const { db } = useStorage();
  const { ndk } = useNDK();
  const { getAllRelaysByUsers } = useNostr();
-  const { status, data } = useQuery(
-    ['relays'],
-    async () => {
+  const { status, data } = useQuery({
+    queryKey: ['relays'],
+    queryFn: async () => {
      return await getAllRelaysByUsers();
    },
-    {
-      refetchOnWindowFocus: false,
-    }
-  );
+    refetchOnWindowFocus: false,
+  });

  const toggleRelay = (relay: string) => {
    if (relays.has(relay)) {
@@ -89,7 +87,7 @@ export function OnboardRelaysScreen() {
        </h1>
        <div className="flex flex-col gap-4">
          <div className="flex h-[420px] w-full flex-col overflow-y-auto rounded-xl bg-neutral-100 dark:bg-neutral-900">
-            {status === 'loading' ? (
+            {status === 'pending' ? (
              <div className="flex h-full w-full items-center justify-center">
                <LoaderIcon className="h-4 w-4 animate-spin text-neutral-900 dark:text-neutral-100" />
              </div>
--- a/src/app/chats/chat.tsx
+++ b/src/app/chats/chat.tsx
@@ -22,8 +22,12 @@ export function ChatScreen() {
  const { ndk } = useNDK();
  const { pubkey } = useParams();
  const { fetchNIP04Messages } = useNostr();
-  const { status, data } = useQuery(['nip04-dm', pubkey], async () => {
-    return await fetchNIP04Messages(pubkey);
+  const { status, data } = useQuery({
+    queryKey: ['nip04-dm', pubkey],
+    queryFn: async () => {
+      return await fetchNIP04Messages(pubkey);
+    },
+    refetchOnWindowFocus: false,
  });

  const renderItem = useCallback(
@@ -69,7 +73,7 @@ export function ChatScreen() {
            <User pubkey={pubkey} variant="simple" />
          </div>
          <div className="h-full w-full flex-1 px-3 py-3">
-            {status === 'loading' ? (
+            {status === 'pending' ? (
              <div className="flex h-full w-full items-center justify-center">
                <div className="flex flex-col items-center gap-1.5">
                  <LoaderIcon className="h-5 w-5 animate-spin text-neutral-900 dark:text-neutral-100" />
--- a/src/app/chats/components/chatListItem.tsx
+++ b/src/app/chats/components/chatListItem.tsx
@@ -19,7 +19,7 @@ export const ChatListItem = memo(function ChatListItem({ event }: { event: NDKEv
  const svgURI =
    'data:image/svg+xml;utf8,' + encodeURIComponent(minidenticon(event.pubkey, 90, 50));

-  if (status === 'loading') {
+  if (status === 'pending') {
    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/chats/components/mediaUploader.tsx
+++ b/src/app/chats/components/mediaUploader.tsx
@@ -3,14 +3,11 @@ import { Dispatch, SetStateAction, useState } from 'react';

 import { LoaderIcon, MediaIcon } from '@shared/icons';

-import { useNostr } from '@utils/hooks/useNostr';
-
 export function MediaUploader({
  setState,
 }: {
  setState: Dispatch<SetStateAction<string>>;
 }) {
-  const { upload } = useNostr();
  const [loading, setLoading] = useState(false);

  const uploadMedia = async () => {
--- a/src/app/chats/index.tsx
+++ b/src/app/chats/index.tsx
@@ -11,18 +11,16 @@ import { useNostr } from '@utils/hooks/useNostr';

 export function ChatsScreen() {
  const { getAllNIP04Chats } = useNostr();
-  const { status, data } = useQuery(
-    ['nip04-chats'],
-    async () => {
+  const { status, data } = useQuery({
+    queryKey: ['nip04-chats'],
+    queryFn: async () => {
      return await getAllNIP04Chats();
    },
-    {
-      refetchOnWindowFocus: false,
-      refetchOnMount: false,
-      refetchOnReconnect: false,
-      staleTime: Infinity,
-    }
-  );
+    refetchOnWindowFocus: false,
+    refetchOnMount: false,
+    refetchOnReconnect: false,
+    staleTime: Infinity,
+  });

  const renderItem = useCallback(
    (event: NDKEvent) => {
@@ -43,7 +41,7 @@ export function ChatsScreen() {
          </h3>
        </div>
        <div className="flex h-full flex-col gap-1">
-          {status === 'loading' ? (
+          {status === 'pending' ? (
            <div className="flex h-full w-full items-center justify-center pb-16">
              <div className="inline-flex flex-col items-center justify-center gap-2">
                <LoaderIcon className="h-5 w-5 animate-spin text-neutral-900 dark:text-neutral-100" />
--- a/src/app/error.tsx
+++ b/src/app/error.tsx
@@ -8,7 +8,6 @@ interface RouteError {

 interface DebugInfo {
  os: null | string;
-  version: null | string;
  appDir: null | string;
 }

@@ -18,24 +17,20 @@ export function ErrorScreen() {

  const [debugInfo, setDebugInfo] = useState<DebugInfo>({
    os: null,
-    version: null,
    appDir: null,
  });

  useEffect(() => {
    async function getInformation() {
      const { platform, version } = await import('@tauri-apps/plugin-os');
-      const { getVersion } = await import('@tauri-apps/plugin-app');
      const { appConfigDir } = await import('@tauri-apps/api/path');

      const platformName = await platform();
      const osVersion = await version();
-      const appVersion = await getVersion();
      const appDir = await appConfigDir();

      setDebugInfo({
        os: platformName + ' ' + osVersion,
-        version: appVersion,
        appDir: appDir,
      });
    }
@@ -59,9 +54,6 @@ export function ErrorScreen() {
            <p className="font-medium text-neutral-600 dark:text-neutral-400">
              Current location: {location.pathname}
            </p>
-            <p className="font-medium text-neutral-600 dark:text-neutral-400">
-              App version: {debugInfo.version}
-            </p>
            <p className="font-medium text-neutral-600 dark:text-neutral-400">
              Platform: {debugInfo.os}
            </p>
--- a/src/app/explore/components/groupTitle.tsx
+++ b/src/app/explore/components/groupTitle.tsx
@@ -5,7 +5,7 @@ import { useProfile } from '@utils/hooks/useProfile';
 export const GroupTitle = memo(function GroupTitle({ pubkey }: { pubkey: string }) {
  const { status, user } = useProfile(pubkey);

-  if (status === 'loading') {
+  if (status === 'pending') {
    return <div className="h-3 w-24 animate-pulse rounded bg-white/10" />;
  }

--- a/src/app/explore/components/userLatestPosts.tsx
+++ b/src/app/explore/components/userLatestPosts.tsx
@@ -16,8 +16,12 @@ import { useNostr } from '@utils/hooks/useNostr';

 export function UserLatestPosts({ pubkey }: { pubkey: string }) {
  const { getEventsByPubkey } = useNostr();
-  const { status, data } = useQuery(['user-posts', pubkey], async () => {
-    return await getEventsByPubkey(pubkey);
+  const { status, data } = useQuery({
+    queryKey: ['user-posts', pubkey],
+    queryFn: async () => {
+      return await getEventsByPubkey(pubkey);
+    },
+    refetchOnWindowFocus: false,
  });

  const renderItem = useCallback(
@@ -60,7 +64,7 @@ export function UserLatestPosts({ pubkey }: { pubkey: string }) {
        Latest post
      </h3>
      <div>
-        {status === 'loading' ? (
+        {status === 'pending' ? (
          <div className="px-3">
            <div className="inline-flex h-16 w-full items-center justify-center gap-1.5 rounded-lg bg-neutral-300 text-sm font-medium dark:bg-neutral-700">
              <LoaderIcon className="h-4 w-4 animate-spin" />
--- a/src/app/explore/components/userWithDrawer.tsx
+++ b/src/app/explore/components/userWithDrawer.tsx
@@ -84,7 +84,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 === 'loading' ? (
+            {status === 'pending' ? (
              <div>
                <p>Loading...</p>
              </div>
--- a/src/app/new/components/mentionPopupItem.tsx
+++ b/src/app/new/components/mentionPopupItem.tsx
@@ -6,7 +6,7 @@ import { displayNpub } from '@utils/shortenKey';
 export function MentionPopupItem({ pubkey, embed }: { pubkey: string; embed?: string }) {
  const { status, user } = useProfile(pubkey, embed);

-  if (status === 'loading') {
+  if (status === 'pending') {
    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" />
--- a/src/app/notes/article.tsx
+++ b/src/app/notes/article.tsx
@@ -72,7 +72,7 @@ export function ArticleNoteScreen() {
      </div>
      <div className="relative col-span-6 flex flex-col overflow-y-auto">
        <div className="mx-auto w-full max-w-2xl">
-          {status === 'loading' ? (
+          {status === 'pending' ? (
            <div className="px-3 py-1.5">Loading...</div>
          ) : (
            <div className="flex h-min w-full flex-col px-3">
--- a/src/app/notes/text.tsx
+++ b/src/app/notes/text.tsx
@@ -91,7 +91,7 @@ export function TextNoteScreen() {
      </div>
      <div className="relative col-span-6 flex flex-col overflow-y-auto">
        <div className="mx-auto w-full max-w-2xl">
-          {status === 'loading' ? (
+          {status === 'pending' ? (
            <div className="px-3 py-1.5">Loading...</div>
          ) : (
            <div className="flex h-min w-full flex-col px-3">
--- a/src/app/relays/components/relayEventList.tsx
+++ b/src/app/relays/components/relayEventList.tsx
@@ -17,9 +17,9 @@ import {

 export function RelayEventList({ relayUrl }: { relayUrl: string }) {
  const { fetcher } = useNDK();
-  const { status, data } = useQuery(
-    ['relay-event'],
-    async () => {
+  const { status, data } = useQuery({
+    queryKey: ['relay-event'],
+    queryFn: async () => {
      const url = 'wss://' + relayUrl;
      const events = await fetcher.fetchLatestEvents(
        [url],
@@ -30,8 +30,8 @@ export function RelayEventList({ relayUrl }: { relayUrl: string }) {
      );
      return events as unknown as NDKEvent[];
    },
-    { refetchOnWindowFocus: false }
-  );
+    refetchOnWindowFocus: false,
+  });

  const renderItem = useCallback(
    (event: NDKEvent) => {
@@ -70,7 +70,7 @@ export function RelayEventList({ relayUrl }: { relayUrl: string }) {
  return (
    <div className="h-full">
      <div className="mx-auto w-full max-w-[500px]">
-        {status === 'loading' ? (
+        {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" />
@@ -78,7 +78,7 @@ export function RelayEventList({ relayUrl }: { relayUrl: string }) {
            </div>
          </div>
        ) : (
-          <VList className="scrollbar-none h-full">
+          <VList className="h-full scrollbar-none">
            <div className="h-10" />
            {data.map((item) => renderItem(item))}
            <div className="h-16" />
--- a/src/app/relays/components/relayForm.tsx
+++ b/src/app/relays/components/relayForm.tsx
@@ -25,7 +25,10 @@ export function RelayForm() {
        const res = await db.createRelay(url);
        if (!res) return setError("You're already using this relay");

-        queryClient.invalidateQueries(['user-relay']);
+        queryClient.invalidateQueries({
+          queryKey: ['user-relay'],
+        });
+
        setError('');
        setUrl('');
      } else {
--- a/src/app/relays/components/relayList.tsx
+++ b/src/app/relays/components/relayList.tsx
@@ -17,18 +17,16 @@ export function RelayList() {

  const { getAllRelaysByUsers } = useNostr();
  const { db } = useStorage();
-  const { status, data } = useQuery(
-    ['relays'],
-    async () => {
+  const { status, data } = useQuery({
+    queryKey: ['relays'],
+    queryFn: async () => {
      return await getAllRelaysByUsers();
    },
-    {
-      refetchOnWindowFocus: false,
-      refetchOnMount: false,
-      refetchOnReconnect: false,
-      staleTime: Infinity,
-    }
-  );
+    refetchOnWindowFocus: false,
+    refetchOnMount: false,
+    refetchOnReconnect: false,
+    staleTime: Infinity,
+  });

  const inspectRelay = (relayUrl: string) => {
    const url = new URL(relayUrl);
@@ -40,12 +38,14 @@ export function RelayList() {
    const res = await db.createRelay(url);

    if (!res) await message("You're aldready connected to this relay");
-    queryClient.invalidateQueries(['user-relay']);
+    queryClient.invalidateQueries({
+      queryKey: ['user-relay'],
+    });
  };

  return (
    <div className="col-span-2 border-r border-neutral-100 dark:border-neutral-900">
-      {status === 'loading' ? (
+      {status === 'pending' ? (
        <div className="flex h-full w-full items-center justify-center pb-10">
          <div className="inline-flex flex-col items-center justify-center gap-2">
            <LoaderIcon className="h-5 w-5 animate-spin text-neutral-900 dark:text-neutral-100" />
--- a/src/app/relays/components/userRelay.tsx
+++ b/src/app/relays/components/userRelay.tsx
@@ -12,22 +12,24 @@ export function UserRelay() {

  const { relayUrls } = useNDK();
  const { db } = useStorage();
-  const { status, data } = useQuery(
-    ['user-relay'],
-    async () => {
+  const { status, data } = useQuery({
+    queryKey: ['user-relay'],
+    queryFn: async () => {
      return await db.getExplicitRelayUrls();
    },
-    { refetchOnWindowFocus: false }
-  );
+    refetchOnWindowFocus: false,
+  });

  const removeRelay = async (relayUrl: string) => {
    await db.removeRelay(relayUrl);
-    queryClient.invalidateQueries(['user-relay']);
+    queryClient.invalidateQueries({
+      queryKey: ['user-relay'],
+    });
  };

  return (
    <div className="mt-3 px-3">
-      {status === 'loading' ? (
+      {status === 'pending' ? (
        <p>Loading...</p>
      ) : (
        <div className="flex flex-col gap-2">
--- a/src/app/settings/components/version.tsx
+++ b/src/app/settings/components/version.tsx
@@ -1,17 +1,4 @@
-import { getVersion } from '@tauri-apps/plugin-app';
-import { useEffect, useState } from 'react';
-
 export function VersionSetting() {
-  const [version, setVersion] = useState<string>('');
-
-  useEffect(() => {
-    async function checkVersion() {
-      const appVersion = await getVersion();
-      setVersion(appVersion);
-    }
-    checkVersion();
-  }, []);
-
  return (
    <div className="inline-flex items-center justify-between px-5 py-4">
      <div className="flex flex-col gap-1">
@@ -21,7 +8,7 @@ export function VersionSetting() {
        </span>
      </div>
      <div className="inline-flex items-center gap-2">
-        <span className="font-medium text-neutral-300">{version}</span>
+        <span className="font-medium text-neutral-300">2</span>
      </div>
    </div>
  );
--- a/src/app/users/components/modal.tsx
+++ b/src/app/users/components/modal.tsx
@@ -210,7 +210,9 @@ export function EditProfileModal() {

    if (publishedRelays) {
      // invalid cache
-      queryClient.invalidateQueries(['user', db.account.pubkey]);
+      queryClient.invalidateQueries({
+        queryKey: ['user', db.account.pubkey]
+      });
      // reset form
      reset();
      // reset state
--- a/src/app/users/components/stats.tsx
+++ b/src/app/users/components/stats.tsx
@@ -5,15 +5,19 @@ import { LoaderIcon } from '@shared/icons';
 import { compactNumber } from '@utils/number';

 export function UserStats({ pubkey }: { pubkey: string }) {
-  const { status, data } = useQuery(['user-metadata', pubkey], async () => {
-    const res = await fetch(`https://api.nostr.band/v0/stats/profile/${pubkey}`);
-    if (!res.ok) {
-      throw new Error('Error');
-    }
-    return await res.json();
+  const { status, data } = useQuery({
+    queryKey: ['user-metadata', pubkey],
+
+    ...async () => {
+      const res = await fetch(`https://api.nostr.band/v0/stats/profile/${pubkey}`);
+      if (!res.ok) {
+        throw new Error('Error');
+      }
+      return await res.json();
+    },
  });

-  if (status === 'loading') {
+  if (status === 'pending') {
    return (
      <div className="flex w-full items-center justify-center">
        <LoaderIcon className="h-5 w-5 animate-spin text-neutral-900 dark:text-neutral-100" />
--- a/src/app/users/index.tsx
+++ b/src/app/users/index.tsx
@@ -19,14 +19,18 @@ import {
 export function UserScreen() {
  const { pubkey } = useParams();
  const { ndk } = useNDK();
-  const { status, data } = useQuery(['user-feed', pubkey], async () => {
-    const events = await ndk.fetchEvents({
-      kinds: [NDKKind.Text, NDKKind.Repost, NDKKind.Article],
-      authors: [pubkey],
-      limit: 50,
-    });
-    const sorted = [...events].sort((a, b) => b.created_at - a.created_at);
-    return sorted;
+  const { status, data } = useQuery({
+    queryKey: ['user-feed', pubkey],
+    queryFn: async () => {
+      const events = await ndk.fetchEvents({
+        kinds: [NDKKind.Text, NDKKind.Repost, NDKKind.Article],
+        authors: [pubkey],
+        limit: 50,
+      });
+      const sorted = [...events].sort((a, b) => b.created_at - a.created_at);
+      return sorted;
+    },
+    refetchOnWindowFocus: false,
  });

  // render event match event kind
@@ -73,7 +77,7 @@ export function UserScreen() {
          Latest posts
        </h3>
        <div className="mx-auto flex h-full max-w-[500px] flex-col justify-between gap-1.5 pb-4 pt-1.5">
-          {status === 'loading' ? (
+          {status === 'pending' ? (
            <div>Loading...</div>
          ) : data.length === 0 ? (
            <div className="px-3 py-1.5">
--- a/src/shared/accounts/active.tsx
+++ b/src/shared/accounts/active.tsx
@@ -94,7 +94,7 @@ export function ActiveAccount() {
    );
  }, []);

-  if (status === 'loading') {
+  if (status === 'pending') {
    return (
      <div className="aspect-square h-auto w-full animate-pulse rounded-lg bg-neutral-300 dark:bg-neutral-700" />
    );
--- a/src/shared/nip05.tsx
+++ b/src/shared/nip05.tsx
@@ -20,9 +20,9 @@ export const NIP05 = memo(function NIP05({
  nip05: string;
  className?: string;
 }) {
-  const { status, data } = useQuery(
-    ['nip05', nip05],
-    async () => {
+  const { status, data } = useQuery({
+    queryKey: ['nip05', nip05],
+    queryFn: async () => {
      try {
        const localPath = nip05.split('@')[0];
        const service = nip05.split('@')[1];
@@ -47,15 +47,13 @@ export const NIP05 = memo(function NIP05({
        throw new Error(`Failed to verify NIP-05, error: ${e}`);
      }
    },
-    {
-      refetchOnMount: false,
-      refetchOnReconnect: false,
-      refetchOnWindowFocus: false,
-      staleTime: Infinity,
-    }
-  );
+    refetchOnMount: false,
+    refetchOnReconnect: false,
+    refetchOnWindowFocus: false,
+    staleTime: Infinity,
+  });

-  if (status === 'loading') {
+  if (status === 'pending') {
    <div className="h-3 w-20 animate-pulse rounded bg-white/10" />;
  }

--- a/src/shared/notes/child.tsx
+++ b/src/shared/notes/child.tsx
@@ -30,7 +30,7 @@ export function ChildNote({ id, root }: { id: string; root?: string }) {
    }
  };

-  if (status === 'loading') {
+  if (status === 'pending') {
    return (
      <>
        <div className="absolute bottom-0 left-[18px] h-[calc(100%-3.4rem)] w-0.5 bg-gradient-to-t from-black/20 to-black/10 dark:from-white/20 dark:to-white/10" />
--- a/src/shared/notes/kinds/repost.tsx
+++ b/src/shared/notes/kinds/repost.tsx
@@ -28,9 +28,9 @@ export function Repost({
    event.content.length > 0 ? JSON.parse(event.content) : null;

  const { ndk } = useNDK();
-  const { status, isError, data } = useQuery(
-    ['repost', event.id],
-    async () => {
+  const { status, isError, data } = useQuery({
+    queryKey: ['repost', event.id],
+    queryFn: async () => {
      const id = event.tags.find((el) => el[0] === 'e')[1];
      if (!id) throw new Error('wrong id');

@@ -39,11 +39,9 @@ export function Repost({

      return ndkEvent;
    },
-    {
-      enabled: embedEvent === null,
-      refetchOnWindowFocus: false,
-    }
-  );
+    enabled: embedEvent === null,
+    refetchOnWindowFocus: false,
+  });

  const renderKind = useCallback((repostEvent: NDKEvent) => {
    switch (repostEvent.kind) {
@@ -87,7 +85,7 @@ export function Repost({
    );
  }

-  if (status === 'loading') {
+  if (status === 'pending') {
    return (
      <div className="h-min w-full px-3 pb-3">
        <div className="relative overflow-hidden rounded-xl border border-neutral-300 bg-neutral-200 p-3 dark:border-neutral-700 dark:bg-neutral-800">
--- a/src/shared/notes/mentions/note.tsx
+++ b/src/shared/notes/mentions/note.tsx
@@ -46,7 +46,7 @@ export const MentionNote = memo(function MentionNote({ id }: { id: string }) {
    }
  };

-  if (status === 'loading') {
+  if (status === 'pending') {
    return (
      <div className="mt-3 cursor-default rounded-lg border border-neutral-300 bg-neutral-200 p-3 dark:border-neutral-700 dark:bg-neutral-800">
        <NoteSkeleton />
--- a/src/shared/notes/metadata.tsx
+++ b/src/shared/notes/metadata.tsx
@@ -17,9 +17,9 @@ export function NoteMetadata({ id }: { id: string }) {

  const { db } = useStorage();
  const { ndk } = useNDK();
-  const { status, data } = useQuery(
-    ['note-metadata', id],
-    async () => {
+  const { status, data } = useQuery({
+    queryKey: ['note-metadata', id],
+    queryFn: async () => {
      let replies = 0;
      let zap = 0;
      const users = [];
@@ -53,14 +53,12 @@ export function NoteMetadata({ id }: { id: string }) {

      return { replies, users, zap };
    },
-    {
-      enabled: !!ndk,
-      refetchOnWindowFocus: false,
-      refetchOnReconnect: false,
-    }
-  );
+    enabled: !!ndk,
+    refetchOnWindowFocus: false,
+    refetchOnReconnect: false,
+  });

-  if (status === 'loading') {
+  if (status === 'pending') {
    return (
      <div className="relative z-10 flex items-center gap-3 pb-3">
        <div className="mt-2 h-6 w-11 shrink-0"></div>
--- a/src/shared/notes/preview/link.tsx
+++ b/src/shared/notes/preview/link.tsx
@@ -8,7 +8,7 @@ export function LinkPreview({ urls }: { urls: string[] }) {

  return (
    <div className="my-2">
-      {status === 'loading' ? (
+      {status === 'pending' ? (
        <div className="flex flex-col bg-neutral-200 dark:bg-neutral-800">
          <div className="h-44 w-full animate-pulse bg-neutral-400 dark:bg-neutral-600" />
          <div className="flex flex-col gap-2 px-3 py-3">
--- a/src/shared/notes/stats.tsx
+++ b/src/shared/notes/stats.tsx
@@ -10,9 +10,9 @@ import { compactNumber } from '@utils/number';

 export function NoteStats({ id }: { id: string }) {
  const { ndk } = useNDK();
-  const { status, data } = useQuery(
-    ['note-stats', id],
-    async () => {
+  const { status, data } = useQuery({
+    queryKey: ['note-stats', id],
+    queryFn: async () => {
      let reactions = 0;
      let reposts = 0;
      let zaps = 0;
@@ -48,10 +48,11 @@ export function NoteStats({ id }: { id: string }) {

      return { reposts, reactions, zaps };
    },
-    { refetchOnWindowFocus: false, refetchOnReconnect: false }
-  );
+    refetchOnWindowFocus: false,
+    refetchOnReconnect: false,
+  });

-  if (status === 'loading') {
+  if (status === 'pending') {
    return (
      <div className="flex h-11 items-center">
        <LoaderIcon className="h-4 w-4 animate-spin text-white" />
--- a/src/shared/notification/notifyNote.tsx
+++ b/src/shared/notification/notifyNote.tsx
@@ -62,7 +62,7 @@ export function NotifyNote({ event }: { event: NDKEvent }) {
    }
  };

-  if (status === 'loading') {
+  if (status === 'pending') {
    return (
      <div className="h-min w-full px-3 pb-3">
        <div className="relative overflow-hidden rounded-xl bg-white/10 px-3 py-3 backdrop-blur-xl">
--- a/src/shared/user.tsx
+++ b/src/shared/user.tsx
@@ -46,7 +46,7 @@ export const User = memo(function User({
  const svgURI =
    'data:image/svg+xml;utf8,' + encodeURIComponent(minidenticon(pubkey, 90, 50));

-  if (status === 'loading') {
+  if (status === 'pending') {
    if (variant === 'avatar') {
      return (
        <div className="h-12 w-12 animate-pulse overflow-hidden rounded-lg bg-neutral-300 dark:bg-neutral-700" />
--- a/src/shared/widgets/eventLoader.tsx
+++ b/src/shared/widgets/eventLoader.tsx
@@ -29,7 +29,9 @@ export function EventLoader({ firstTime }: { firstTime: boolean }) {
        setProgress(100);
        setIsFetched();
        // invalidate queries
-        queryClient.invalidateQueries(['local-network-widget']);
+        queryClient.invalidateQueries({
+          queryKey: ['local-network-widget']
+        });
        await db.updateLastLogin();
      }
    }
--- a/src/shared/widgets/global/articles.tsx
+++ b/src/shared/widgets/global/articles.tsx
@@ -14,9 +14,9 @@ import { Widget } from '@utils/types';

 export function GlobalArticlesWidget({ params }: { params: Widget }) {
  const { ndk } = useNDK();
-  const { status, data } = useQuery(
-    ['global-articles'],
-    async () => {
+  const { status, data } = useQuery({
+    queryKey: ['global-articles'],
+    queryFn: async () => {
      const events = await ndk.fetchEvents({
        kinds: [NDKKind.Article],
        limit: 200,
@@ -24,8 +24,8 @@ export function GlobalArticlesWidget({ params }: { params: Widget }) {
      const sortedEvents = [...events].sort((x, y) => y.created_at - x.created_at);
      return sortedEvents;
    },
-    { refetchOnWindowFocus: false }
-  );
+    refetchOnWindowFocus: false,
+  });

  // render event match event kind
  const renderItem = useCallback(
@@ -43,7 +43,7 @@ export function GlobalArticlesWidget({ params }: { params: Widget }) {
    <WidgetWrapper>
      <TitleBar id={params.id} title={params.title} />
      <div className="flex-1">
-        {status === 'loading' ? (
+        {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-black dark:text-white" />
--- a/src/shared/widgets/global/files.tsx
+++ b/src/shared/widgets/global/files.tsx
@@ -15,9 +15,9 @@ import { Widget } from '@utils/types';

 export function GlobalFilesWidget({ params }: { params: Widget }) {
  const { ndk } = useNDK();
-  const { status, data } = useQuery(
-    ['global-file-sharing'],
-    async () => {
+  const { status, data } = useQuery({
+    queryKey: ['global-file-sharing'],
+    queryFn: async () => {
      const events = await ndk.fetchEvents({
        // @ts-expect-error, NDK not support file metadata yet
        kinds: [1063],
@@ -26,8 +26,8 @@ export function GlobalFilesWidget({ params }: { params: Widget }) {
      const sortedEvents = [...events].sort((x, y) => y.created_at - x.created_at);
      return sortedEvents;
    },
-    { refetchOnWindowFocus: false }
-  );
+    refetchOnWindowFocus: false,
+  });

  // render event match event kind
  const renderItem = useCallback(
@@ -45,7 +45,7 @@ export function GlobalFilesWidget({ params }: { params: Widget }) {
    <WidgetWrapper>
      <TitleBar id={params.id} title={params.title} />
      <div className="flex-1">
-        {status === 'loading' ? (
+        {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-black dark:text-white" />
--- a/src/shared/widgets/global/hashtag.tsx
+++ b/src/shared/widgets/global/hashtag.tsx
@@ -22,9 +22,9 @@ import { Widget } from '@utils/types';

 export function GlobalHashtagWidget({ params }: { params: Widget }) {
  const { ndk } = useNDK();
-  const { status, data } = useQuery(
-    ['hashtag-' + params.title],
-    async () => {
+  const { status, data } = useQuery({
+    queryKey: ['hashtag-' + params.title],
+    queryFn: async () => {
      const events = await ndk.fetchEvents({
        kinds: [NDKKind.Text, NDKKind.Repost, NDKKind.Article],
        '#t': [params.content],
@@ -33,8 +33,8 @@ export function GlobalHashtagWidget({ params }: { params: Widget }) {
      const sortedEvents = [...events].sort((x, y) => y.created_at - x.created_at);
      return sortedEvents;
    },
-    { refetchOnWindowFocus: false }
-  );
+    refetchOnWindowFocus: false,
+  });

  // render event match event kind
  const renderItem = useCallback(
@@ -75,7 +75,7 @@ export function GlobalHashtagWidget({ params }: { params: Widget }) {
    <WidgetWrapper>
      <TitleBar id={params.id} title={params.title} />
      <div className="flex-1">
-        {status === 'loading' ? (
+        {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-black dark:text-white" />
--- a/src/shared/widgets/local/articles.tsx
+++ b/src/shared/widgets/local/articles.tsx
@@ -17,6 +17,7 @@ export function LocalArticlesWidget({ params }: { params: Widget }) {
  const { status, data, hasNextPage, isFetchingNextPage, fetchNextPage } =
    useInfiniteQuery({
      queryKey: ['local-articles'],
+      initialPageParam: 0,
      queryFn: async ({ pageParam = 0 }) => {
        return await db.getAllEventsByKinds([NDKKind.Article], 20, pageParam);
      },
@@ -45,7 +46,7 @@ export function LocalArticlesWidget({ params }: { params: Widget }) {
    <WidgetWrapper>
      <TitleBar id={params.id} title={params.title} />
      <div className="flex-1">
-        {status === 'loading' ? (
+        {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-black dark:text-white" />
--- a/src/shared/widgets/local/feeds.tsx
+++ b/src/shared/widgets/local/feeds.tsx
@@ -24,6 +24,7 @@ export function LocalFeedsWidget({ params }: { params: Widget }) {
  const { status, data, hasNextPage, isFetchingNextPage, fetchNextPage } =
    useInfiniteQuery({
      queryKey: ['group-feeds-' + params.id],
+      initialPageParam: 0,
      queryFn: async ({ pageParam = 0 }) => {
        const authors = JSON.parse(params.content);
        return await db.getAllEventsByAuthors(authors, 20, pageParam);
@@ -81,7 +82,7 @@ export function LocalFeedsWidget({ params }: { params: Widget }) {
    <WidgetWrapper>
      <TitleBar id={params.id} title={params.title} />
      <div className="flex-1">
-        {status === 'loading' ? (
+        {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-black dark:text-white" />
--- a/src/shared/widgets/local/files.tsx
+++ b/src/shared/widgets/local/files.tsx
@@ -17,6 +17,7 @@ export function LocalFilesWidget({ params }: { params: Widget }) {
  const { status, data, hasNextPage, isFetchingNextPage, fetchNextPage } =
    useInfiniteQuery({
      queryKey: ['local-file-sharing'],
+      initialPageParam: 0,
      queryFn: async ({ pageParam = 0 }) => {
        return await db.getAllEventsByKinds([1063], 20, pageParam);
      },
@@ -45,7 +46,7 @@ export function LocalFilesWidget({ params }: { params: Widget }) {
    <WidgetWrapper>
      <TitleBar id={params.id} title={params.title} />
      <div className="flex-1">
-        {status === 'loading' ? (
+        {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-black dark:text-white" />
--- a/src/shared/widgets/local/follows.tsx
+++ b/src/shared/widgets/local/follows.tsx
@@ -24,6 +24,7 @@ export function LocalFollowsWidget({ params }: { params: Widget }) {
  const { status, data, hasNextPage, isFetchingNextPage, fetchNextPage } =
    useInfiniteQuery({
      queryKey: ['follows-' + params.title],
+      initialPageParam: 0,
      queryFn: async ({ pageParam = 0 }) => {
        return await db.getAllEventsByAuthors(db.account.follows, 20, pageParam);
      },
@@ -80,7 +81,7 @@ export function LocalFollowsWidget({ params }: { params: Widget }) {
    <WidgetWrapper>
      <TitleBar id={params.id} title="Follows" />
      <div className="flex-1">
-        {status === 'loading' ? (
+        {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-black dark:text-white" />
--- a/src/shared/widgets/local/network.tsx
+++ b/src/shared/widgets/local/network.tsx
@@ -29,6 +29,7 @@ export function LocalNetworkWidget() {
  const { status, data, hasNextPage, isFetchingNextPage, fetchNextPage } =
    useInfiniteQuery({
      queryKey: ['local-network-widget'],
+      initialPageParam: 0,
      queryFn: async ({ pageParam = 0 }) => {
        return await db.getAllEvents(20, pageParam);
      },
@@ -136,7 +137,7 @@ export function LocalNetworkWidget() {
    <WidgetWrapper>
      <TitleBar id="9999" />
      <div className="flex-1">
-        {status === 'loading' ? (
+        {status === 'pending' ? (
          <div className="px-3 py-1.5">
            <div className="rounded-xl bg-neutral-100 px-3 py-3 dark:bg-neutral-900">
              <NoteSkeleton />
--- a/src/shared/widgets/local/thread.tsx
+++ b/src/shared/widgets/local/thread.tsx
@@ -43,7 +43,7 @@ export function LocalThreadWidget({ params }: { params: Widget }) {
    <WidgetWrapper>
      <TitleBar id={params.id} title={params.title} />
      <WVList className="flex-1 overflow-y-auto px-3">
-        {status === 'loading' ? (
+        {status === 'pending' ? (
          <div className="flex h-16 items-center justify-center rounded-xl bg-neutral-100 px-3 py-3 dark:bg-neutral-900">
            <LoaderIcon className="h-5 w-5 animate-spin" />
          </div>
--- a/src/shared/widgets/local/user.tsx
+++ b/src/shared/widgets/local/user.tsx
@@ -23,9 +23,9 @@ import { Widget } from '@utils/types';

 export function LocalUserWidget({ params }: { params: Widget }) {
  const { ndk } = useNDK();
-  const { status, data } = useQuery(
-    ['user-posts', params.content],
-    async () => {
+  const { status, data } = useQuery({
+    queryKey: ['user-posts', params.content],
+    queryFn: async () => {
      const events = await ndk.fetchEvents({
        // @ts-expect-error, NDK not support file metadata yet
        kinds: [NDKKind.Text, NDKKind.Repost, 1063, NDKKind.Article],
@@ -35,13 +35,11 @@ export function LocalUserWidget({ params }: { params: Widget }) {
      const sortedEvents = [...events].sort((x, y) => y.created_at - x.created_at);
      return sortedEvents;
    },
-    {
-      staleTime: Infinity,
-      refetchOnMount: false,
-      refetchOnReconnect: false,
-      refetchOnWindowFocus: false,
-    }
-  );
+    staleTime: Infinity,
+    refetchOnMount: false,
+    refetchOnReconnect: false,
+    refetchOnWindowFocus: false,
+  });

  // render event match event kind
  const renderItem = useCallback(
@@ -90,7 +88,7 @@ export function LocalUserWidget({ params }: { params: Widget }) {
            Latest posts
          </h3>
          <div className="flex h-full w-full flex-col justify-between gap-1.5 pb-10">
-            {status === 'loading' ? (
+            {status === 'pending' ? (
              <div className="px-3 py-1.5">
                <div className="rounded-xl bg-neutral-100 px-3 py-3 dark:bg-neutral-900">
                  <NoteSkeleton />
--- a/src/shared/widgets/nostrBand/trendingAccounts.tsx
+++ b/src/shared/widgets/nostrBand/trendingAccounts.tsx
@@ -13,9 +13,9 @@ interface Response {
 }

 export function TrendingAccountsWidget({ params }: { params: Widget }) {
-  const { status, data } = useQuery(
-    ['trending-profiles-widget'],
-    async () => {
+  const { status, data } = useQuery({
+    queryKey: ['trending-profiles-widget'],
+    queryFn: async () => {
      const res = await fetch('https://api.nostr.band/v0/trending/profiles');
      if (!res.ok) {
        throw new Error('Error');
@@ -24,19 +24,17 @@ export function TrendingAccountsWidget({ params }: { params: Widget }) {
      if (!json.profiles) return [];
      return json.profiles;
    },
-    {
-      refetchOnMount: false,
-      refetchOnReconnect: false,
-      refetchOnWindowFocus: false,
-      staleTime: Infinity,
-    }
-  );
+    refetchOnMount: false,
+    refetchOnReconnect: false,
+    refetchOnWindowFocus: false,
+    staleTime: Infinity,
+  });

  return (
    <WidgetWrapper>
      <TitleBar id={params.id} title="Trending Accounts" />
      <div className="flex-1">
-        {status === 'loading' ? (
+        {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-black dark:text-white" />
--- a/src/shared/widgets/nostrBand/trendingNotes.tsx
+++ b/src/shared/widgets/nostrBand/trendingNotes.tsx
@@ -14,9 +14,9 @@ interface Response {
 }

 export function TrendingNotesWidget({ params }: { params: Widget }) {
-  const { status, data } = useQuery(
-    ['trending-notes-widget'],
-    async () => {
+  const { status, data } = useQuery({
+    queryKey: ['trending-notes-widget'],
+    queryFn: async () => {
      const res = await fetch('https://api.nostr.band/v0/trending/notes');
      if (!res.ok) {
        throw new Error('failed to fecht trending notes');
@@ -25,19 +25,17 @@ export function TrendingNotesWidget({ params }: { params: Widget }) {
      if (!json.notes) return null;
      return json.notes;
    },
-    {
-      refetchOnMount: false,
-      refetchOnReconnect: false,
-      refetchOnWindowFocus: false,
-      staleTime: Infinity,
-    }
-  );
+    refetchOnMount: false,
+    refetchOnReconnect: false,
+    refetchOnWindowFocus: false,
+    staleTime: Infinity,
+  });

  return (
    <WidgetWrapper>
      <TitleBar id={params.id} title="Trending Notes" />
      <div className="flex-1">
-        {status === 'loading' ? (
+        {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-black dark:text-white" />
--- a/src/shared/widgets/nostrBandUserProfile.tsx
+++ b/src/shared/widgets/nostrBandUserProfile.tsx
@@ -3,6 +3,7 @@ import { useQuery } from '@tanstack/react-query';
 import { useEffect, useState } from 'react';
 import { toast } from 'sonner';

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

 import { FollowIcon, UnfollowIcon } from '@shared/icons';
@@ -18,20 +19,18 @@ export interface Profile {

 export function NostrBandUserProfile({ data }: { data: Profile }) {
  const { db } = useStorage();
-  const { ndk } = useStorage();
-  const { status, data: userStats } = useQuery(
-    ['user-stats', data.pubkey],
-    async () => {
+  const { ndk } = useNDK();
+  const { status, data: userStats } = useQuery({
+    queryKey: ['user-stats', data.pubkey],
+    queryFn: async () => {
      const res = await fetch(`https://api.nostr.band/v0/stats/profile/${data.pubkey}`);
      return res.json();
    },
-    {
-      refetchOnMount: false,
-      refetchOnReconnect: false,
-      refetchOnWindowFocus: false,
-      staleTime: Infinity,
-    }
-  );
+    refetchOnMount: false,
+    refetchOnReconnect: false,
+    refetchOnWindowFocus: false,
+    staleTime: Infinity,
+  });

  const embedProfile = data.profile ? JSON.parse(data.profile.content) : null;
  const profile = embedProfile;
@@ -137,7 +136,7 @@ export function NostrBandUserProfile({ data }: { data: Profile }) {
          </p>
        </div>
        <div className="mt-8">
-          {status === 'loading' ? (
+          {status === 'pending' ? (
            <p>Loading...</p>
          ) : (
            <div className="flex w-full items-center gap-8">
--- a/src/utils/hooks/useEvent.ts
+++ b/src/utils/hooks/useEvent.ts
@@ -12,9 +12,9 @@ export function useEvent(
 ) {
  const { db } = useStorage();
  const { ndk } = useNDK();
-  const { status, data } = useQuery(
-    ['event', id],
-    async () => {
+  const { status, data } = useQuery({
+    queryKey: ['event', id],
+    queryFn: async () => {
      // return event refer from naddr
      if (naddr) {
        const rEvents = await ndk.fetchEvents({
@@ -45,11 +45,9 @@ export function useEvent(

      return event;
    },
-    {
-      enabled: !!ndk,
-      refetchOnWindowFocus: false,
-    }
-  );
+    enabled: !!ndk,
+    refetchOnWindowFocus: false,
+  });

  return { status, data };
 }
--- a/src/utils/hooks/useOpenGraph.ts
+++ b/src/utils/hooks/useOpenGraph.ts
@@ -4,22 +4,20 @@ import { invoke } from '@tauri-apps/api/primitives';
 import { Opengraph } from '@utils/types';

 export function useOpenGraph(url: string) {
-  const { status, data, error } = useQuery(
-    ['opg', url],
-    async () => {
+  const { status, data, error } = useQuery({
+    queryKey: ['opg', url],
+    queryFn: async () => {
      const res: Opengraph = await invoke('opengraph', { url });
      if (!res) {
        throw new Error('fetch preview failed');
      }
      return res;
    },
-    {
-      staleTime: Infinity,
-      refetchOnWindowFocus: false,
-      refetchOnMount: false,
-      refetchOnReconnect: false,
-    }
-  );
+    staleTime: Infinity,
+    refetchOnWindowFocus: false,
+    refetchOnMount: false,
+    refetchOnReconnect: false,
+  });

  return {
    status,
--- a/src/utils/hooks/useProfile.ts
+++ b/src/utils/hooks/useProfile.ts
@@ -9,9 +9,9 @@ export function useProfile(pubkey: string, embed?: string) {
    status,
    data: user,
    error,
-  } = useQuery(
-    ['user', pubkey],
-    async () => {
+  } = useQuery({
+    queryKey: ['user', pubkey],
+    queryFn: async () => {
      if (embed) {
        const profile: NDKUserProfile = JSON.parse(embed);
        return profile;
@@ -21,15 +21,13 @@ export function useProfile(pubkey: string, embed?: string) {
      const user = ndk.getUser({ hexpubkey: cleanPubkey });
      return await user.fetchProfile();
    },
-    {
-      enabled: !!ndk,
-      staleTime: Infinity,
-      refetchOnMount: false,
-      refetchOnWindowFocus: false,
-      refetchOnReconnect: false,
-      retry: 2,
-    }
-  );
+    enabled: !!ndk,
+    staleTime: Infinity,
+    refetchOnMount: false,
+    refetchOnWindowFocus: false,
+    refetchOnReconnect: false,
+    retry: 2,
+  });

  return { status, user, error };
 }