wip: migrate to ark

src/app/chats/components/chatForm.tsx

@@ -1,29 +1,19 @@
-import { NDKEvent, NDKKind, NDKUser } from '@nostr-dev-kit/ndk';
 import { useState } from 'react';
 import { toast } from 'sonner';
 
 import { MediaUploader } from '@app/chats/components/mediaUploader';
 
-import { useNDK } from '@libs/ndk/provider';
+import { useArk } from '@libs/ark';
 
 import { EnterIcon } from '@shared/icons';
 
 export function ChatForm({ receiverPubkey }: { receiverPubkey: string }) {
-  const { ndk } = useNDK();
+  const { ark } = useArk();
   const [value, setValue] = useState('');
 
   const submit = async () => {
     try {
-      const recipient = new NDKUser({ pubkey: receiverPubkey });
+      const publish = await ark.nip04Encrypt({ content: value, pubkey: receiverPubkey });
-      const message = await ndk.signer.encrypt(recipient, value);
-
-      const event = new NDKEvent(ndk);
-      event.content = message;
-      event.kind = NDKKind.EncryptedDirectMessage;
-      event.tag(recipient);
-
-      const publish = await event.publish();
-
       if (publish) setValue('');
     } catch (e) {
       toast.error(e);

src/app/chats/hooks/useDecryptMessage.tsx

@@ -1,26 +1,17 @@
-import { NDKEvent, NDKUser } from '@nostr-dev-kit/ndk';
+import { NDKEvent } from '@nostr-dev-kit/ndk';
 import { useEffect, useState } from 'react';
 
-import { useNDK } from '@libs/ndk/provider';
+import { useArk } from '@libs/ark';
-import { useStorage } from '@libs/storage/provider';
 
-export function useDecryptMessage(message: NDKEvent) {
+export function useDecryptMessage(event: NDKEvent) {
-  const { db } = useStorage();
+  const { ark } = useArk();
-  const { ndk } = useNDK();
+  const [content, setContent] = useState(event.content);
-
-  const [content, setContent] = useState(message.content);
 
   useEffect(() => {
     async function decryptContent() {
       try {
-        const sender = new NDKUser({
+        const message = await ark.nip04Decrypt({ event });
-          pubkey:
+        setContent(message);
-            db.account.pubkey === message.pubkey
-              ? message.tags.find((el) => el[0] === 'p')[1]
-              : message.pubkey,
-        });
-        const result = await ndk.signer.decrypt(sender, message.content);
-        setContent(result);
       } catch (e) {
         console.error(e);
       }

src/app/relays/components/relayEventList.tsx

@@ -1,33 +1,58 @@
 import { NDKEvent, NDKKind } from '@nostr-dev-kit/ndk';
-import { useQuery } from '@tanstack/react-query';
+import { useInfiniteQuery } from '@tanstack/react-query';
-import { normalizeRelayUrl } from 'nostr-fetch';
+import { useCallback, useMemo } from 'react';
-import { useCallback } from 'react';
 import { VList } from 'virtua';
 
-import { useNDK } from '@libs/ndk/provider';
+import { useArk } from '@libs/ark';
 
-import { LoaderIcon } from '@shared/icons';
+import { ArrowRightCircleIcon, LoaderIcon } from '@shared/icons';
-import { MemoizedRepost, MemoizedTextNote, UnknownNote } from '@shared/notes';
+import {
+  MemoizedRepost,
+  MemoizedTextNote,
+  NoteSkeleton,
+  UnknownNote,
+} from '@shared/notes';
+
+import { FETCH_LIMIT } from '@utils/constants';
 
 export function RelayEventList({ relayUrl }: { relayUrl: string }) {
-  const { fetcher } = useNDK();
+  const { ark } = useArk();
-  const { status, data } = useQuery({
+  const { status, data, hasNextPage, isFetchingNextPage, fetchNextPage } =
-    queryKey: ['relay-events', relayUrl],
+    useInfiniteQuery({
-    queryFn: async () => {
+      queryKey: ['relay-events', relayUrl],
-      const url = 'wss://' + relayUrl;
+      initialPageParam: 0,
-      const events = await fetcher.fetchLatestEvents(
+      queryFn: async ({
-        [normalizeRelayUrl(url)],
+        signal,
-        {
+        pageParam,
-          kinds: [NDKKind.Text, NDKKind.Repost],
+      }: {
-        },
+        signal: AbortSignal;
-        20
+        pageParam: number;
-      );
+      }) => {
-      return events as unknown as NDKEvent[];
+        const url = 'wss://' + relayUrl;
-    },
+        const events = await ark.getRelayEvents({
-    refetchOnWindowFocus: false,
+          relayUrl: url,
-    refetchOnReconnect: false,
+          filter: {
-    refetchOnMount: false,
+            kinds: [NDKKind.Text, NDKKind.Repost],
-  });
+          },
+          limit: FETCH_LIMIT,
+          pageParam,
+          signal,
+        });
+
+        return events;
+      },
+      getNextPageParam: (lastPage) => {
+        const lastEvent = lastPage.at(-1);
+        if (!lastEvent) return;
+        return lastEvent.created_at - 1;
+      },
+      refetchOnWindowFocus: false,
+    });
+
+  const allEvents = useMemo(
+    () => (data ? data.pages.flatMap((page) => page) : []),
+    [data]
+  );
 
   const renderItem = useCallback(
     (event: NDKEvent) => {
@@ -46,16 +71,33 @@ export function RelayEventList({ relayUrl }: { relayUrl: string }) {
   return (
     <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="px-3 py-1.5">
-          <div className="inline-flex flex-col items-center justify-center gap-2">
+          <div className="rounded-xl bg-neutral-100 px-3 py-3 dark:bg-neutral-900">
-            <LoaderIcon className="h-5 w-5 animate-spin text-white" />
+            <NoteSkeleton />
-            <p className="text-sm font-medium text-white/80">Loading newsfeed...</p>
           </div>
         </div>
       ) : (
-        data.map((item) => renderItem(item))
+        allEvents.map((item) => renderItem(item))
       )}
-      <div className="h-20" />
+      <div className="flex h-16 items-center justify-center px-3 pb-3">
+        {hasNextPage ? (
+          <button
+            type="button"
+            onClick={() => fetchNextPage()}
+            disabled={!hasNextPage || isFetchingNextPage}
+            className="inline-flex h-10 w-max items-center justify-center gap-2 rounded-full bg-blue-500 px-6 font-medium text-white hover:bg-blue-600 focus:outline-none"
+          >
+            {isFetchingNextPage ? (
+              <LoaderIcon className="h-4 w-4 animate-spin" />
+            ) : (
+              <>
+                <ArrowRightCircleIcon className="h-5 w-5" />
+                Load more
+              </>
+            )}
+          </button>
+        ) : null}
+      </div>
     </VList>
   );
 }

src/app/users/index.tsx

@@ -1,30 +1,60 @@
 import { NDKEvent, NDKKind } from '@nostr-dev-kit/ndk';
-import { useQuery } from '@tanstack/react-query';
+import { useInfiniteQuery } from '@tanstack/react-query';
-import { useCallback } from 'react';
+import { useCallback, useMemo } from 'react';
 import { useParams } from 'react-router-dom';
 
 import { UserProfile } from '@app/users/components/profile';
 
-import { useNDK } from '@libs/ndk/provider';
+import { useArk } from '@libs/ark';
 
-import { MemoizedRepost, MemoizedTextNote, UnknownNote } from '@shared/notes';
+import { ArrowRightCircleIcon, LoaderIcon } from '@shared/icons';
+import {
+  MemoizedRepost,
+  MemoizedTextNote,
+  NoteSkeleton,
+  UnknownNote,
+} from '@shared/notes';
+
+import { FETCH_LIMIT } from '@utils/constants';
 
 export function UserScreen() {
   const { pubkey } = useParams();
-  const { ndk } = useNDK();
+  const { ark } = useArk();
-  const { status, data } = useQuery({
+  const { status, data, hasNextPage, isFetchingNextPage, fetchNextPage } =
-    queryKey: ['user-feed', pubkey],
+    useInfiniteQuery({
-    queryFn: async () => {
+      queryKey: ['user-posts', pubkey],
-      const events = await ndk.fetchEvents({
+      initialPageParam: 0,
-        kinds: [NDKKind.Text, NDKKind.Repost],
+      queryFn: async ({
-        authors: [pubkey],
+        signal,
-        limit: 20,
+        pageParam,
-      });
+      }: {
-      const sorted = [...events].sort((a, b) => b.created_at - a.created_at);
+        signal: AbortSignal;
-      return sorted;
+        pageParam: number;
-    },
+      }) => {
-    refetchOnWindowFocus: false,
+        const events = await ark.getInfiniteEvents({
-  });
+          filter: {
+            kinds: [NDKKind.Text, NDKKind.Repost],
+            authors: [pubkey],
+          },
+          limit: FETCH_LIMIT,
+          pageParam,
+          signal,
+        });
+
+        return events;
+      },
+      getNextPageParam: (lastPage) => {
+        const lastEvent = lastPage.at(-1);
+        if (!lastEvent) return;
+        return lastEvent.created_at - 1;
+      },
+      refetchOnWindowFocus: false,
+    });
+
+  const allEvents = useMemo(
+    () => (data ? data.pages.flatMap((page) => page) : []),
+    [data]
+  );
 
   // render event match event kind
   const renderItem = useCallback(
@@ -50,20 +80,33 @@ export function UserScreen() {
         </h3>
         <div className="mx-auto flex h-full max-w-[500px] flex-col justify-between gap-1.5 pb-4 pt-1.5">
           {status === 'pending' ? (
-            <div>Loading...</div>
-          ) : data.length === 0 ? (
             <div className="px-3 py-1.5">
-              <div className="rounded-xl bg-neutral-100 px-3 py-6 dark:bg-neutral-900">
+              <div className="rounded-xl bg-neutral-100 px-3 py-3 dark:bg-neutral-900">
-                <div className="flex flex-col items-center gap-4">
+                <NoteSkeleton />
-                  <p className="text-center text-sm font-medium text-neutral-900 dark:text-neutral-100">
-                    User doesn&apos;t have any posts in the last 48 hours.
-                  </p>
-                </div>
               </div>
             </div>
           ) : (
-            data.map((item) => renderItem(item))
+            allEvents.map((item) => renderItem(item))
           )}
+          <div className="flex h-16 items-center justify-center px-3 pb-3">
+            {hasNextPage ? (
+              <button
+                type="button"
+                onClick={() => fetchNextPage()}
+                disabled={!hasNextPage || isFetchingNextPage}
+                className="inline-flex h-10 w-max items-center justify-center gap-2 rounded-full bg-blue-500 px-6 font-medium text-white hover:bg-blue-600 focus:outline-none"
+              >
+                {isFetchingNextPage ? (
+                  <LoaderIcon className="h-4 w-4 animate-spin" />
+                ) : (
+                  <>
+                    <ArrowRightCircleIcon className="h-5 w-5" />
+                    Load more
+                  </>
+                )}
+              </button>
+            ) : null}
+          </div>
         </div>
       </div>
     </div>

src/libs/ark/ark.ts

@@ -13,9 +13,15 @@ import { ndkAdapter } from '@nostr-fetch/adapter-ndk';
 import { invoke } from '@tauri-apps/api/primitives';
 import { open } from '@tauri-apps/plugin-dialog';
 import { readBinaryFile } from '@tauri-apps/plugin-fs';
+import { fetch } from '@tauri-apps/plugin-http';
 import { Platform } from '@tauri-apps/plugin-os';
 import Database from '@tauri-apps/plugin-sql';
-import { NostrEventExt, NostrFetcher, normalizeRelayUrlSet } from 'nostr-fetch';
+import {
+  NostrEventExt,
+  NostrFetcher,
+  normalizeRelayUrl,
+  normalizeRelayUrlSet,
+} from 'nostr-fetch';
 import { toast } from 'sonner';
 
 import { NDKCacheAdapterTauri } from '@libs/ark';
@@ -77,7 +83,7 @@ export class Ark {
       // NIP-46 Signer
       if (nsecbunker) {
         const localSignerPrivkey = await this.#keyring_load(
-          `${this.account.pubkey}-nsecbunker`
+          `${this.account.id}-nsecbunker`
         );
 
         if (!localSignerPrivkey) {
@@ -89,9 +95,9 @@ export class Ark {
         const bunker = new NDK({
           explicitRelayUrls: ['wss://relay.nsecbunker.com', 'wss://nostr.vulpem.com'],
         });
-        bunker.connect();
+        await bunker.connect();
 
-        const remoteSigner = new NDKNip46Signer(bunker, this.account.id, localSigner);
+        const remoteSigner = new NDKNip46Signer(bunker, this.account.pubkey, localSigner);
         await remoteSigner.blockUntilReady();
 
         this.readyToSign = true;
@@ -619,11 +625,13 @@ export class Ark {
     limit,
     pageParam = 0,
     signal = undefined,
+    dedup = true,
   }: {
     filter: NDKFilter;
     limit: number;
     pageParam?: number;
     signal?: AbortSignal;
+    dedup?: boolean;
   }) {
     const rootIds = new Set();
     const dedupQueue = new Set();
@@ -637,18 +645,53 @@ export class Ark {
       return new NDKEvent(this.#ndk, event);
     });
 
-    ndkEvents.forEach((event) => {
+    if (dedup) {
-      const tags = event.tags.filter((el) => el[0] === 'e');
+      ndkEvents.forEach((event) => {
-      if (tags && tags.length > 0) {
+        const tags = event.tags.filter((el) => el[0] === 'e');
-        const rootId = tags.filter((el) => el[3] === 'root')[1] ?? tags[0][1];
+        if (tags && tags.length > 0) {
-        if (rootIds.has(rootId)) return dedupQueue.add(event.id);
+          const rootId = tags.filter((el) => el[3] === 'root')[1] ?? tags[0][1];
-        rootIds.add(rootId);
+          if (rootIds.has(rootId)) return dedupQueue.add(event.id);
+          rootIds.add(rootId);
+        }
+      });
+
+      return ndkEvents
+        .filter((event) => !dedupQueue.has(event.id))
+        .sort((a, b) => b.created_at - a.created_at);
+    }
+
+    return ndkEvents.sort((a, b) => b.created_at - a.created_at);
+  }
+
+  public async getRelayEvents({
+    relayUrl,
+    filter,
+    limit,
+    pageParam = 0,
+    signal = undefined,
+  }: {
+    relayUrl: string;
+    filter: NDKFilter;
+    limit: number;
+    pageParam?: number;
+    signal?: AbortSignal;
+    dedup?: boolean;
+  }) {
+    const events = await this.#fetcher.fetchLatestEvents(
+      [normalizeRelayUrl(relayUrl)],
+      filter,
+      limit,
+      {
+        asOf: pageParam === 0 ? undefined : pageParam,
+        abortSignal: signal,
       }
+    );
+
+    const ndkEvents = events.map((event) => {
+      return new NDKEvent(this.#ndk, event);
     });
 
-    return ndkEvents
+    return ndkEvents.sort((a, b) => b.created_at - a.created_at);
-      .filter((event) => !dedupQueue.has(event.id))
-      .sort((a, b) => b.created_at - a.created_at);
   }
 
   /**
@@ -714,11 +757,60 @@ export class Ark {
     if (!res.ok) throw new Error(`Failed to fetch NIP-05 service: ${nip05}`);
 
     const data: NIP05 = await res.json();
-    if (data.names) {
+
-      if (data.names[localPath.toLowerCase()] !== pubkey) return false;
+    if (!data.names) return false;
-      if (data.names[localPath] !== pubkey) return false;
+
-      return true;
+    if (data.names[localPath.toLowerCase()] === pubkey) return true;
-    }
+    if (data.names[localPath] === pubkey) return true;
+
     return false;
   }
+
+  public async nip04Decrypt({ event }: { event: NDKEvent }) {
+    try {
+      const sender = new NDKUser({
+        pubkey:
+          this.account.pubkey === event.pubkey
+            ? event.tags.find((el) => el[0] === 'p')[1]
+            : event.pubkey,
+      });
+      const content = await this.#ndk.signer.decrypt(sender, event.content);
+
+      return content;
+    } catch (e) {
+      console.error(e);
+    }
+  }
+
+  public async nip04Encrypt({ content, pubkey }: { content: string; pubkey: string }) {
+    try {
+      const recipient = new NDKUser({ pubkey });
+      const message = await this.#ndk.signer.encrypt(recipient, content);
+
+      const event = new NDKEvent(this.#ndk);
+      event.content = message;
+      event.kind = NDKKind.EncryptedDirectMessage;
+      event.tag(recipient);
+
+      const publish = await event.publish();
+
+      if (!publish) throw new Error('Failed to send NIP-04 encrypted message');
+      return publish;
+    } catch (e) {
+      console.error(e);
+    }
+  }
+
+  public async replyTo({ content, event }: { content: string; event: NDKEvent }) {
+    try {
+      const replyEvent = new NDKEvent(this.#ndk);
+      event.content = content;
+      event.kind = NDKKind.Text;
+      event.tag(event, 'reply');
+
+      return await replyEvent.publish();
+    } catch (e) {
+      console.error(e);
+    }
+  }
 }

src/shared/accounts/active.tsx

@@ -2,7 +2,7 @@ import * as Avatar from '@radix-ui/react-avatar';
 import { minidenticon } from 'minidenticons';
 import { Link } from 'react-router-dom';
 
-import { useStorage } from '@libs/storage/provider';
+import { useArk } from '@libs/ark';
 
 import { AccountMoreActions } from '@shared/accounts/more';
 import { NetworkStatusIndicator } from '@shared/networkStatusIndicator';
@@ -10,12 +10,12 @@ import { NetworkStatusIndicator } from '@shared/networkStatusIndicator';
 import { useProfile } from '@utils/hooks/useProfile';
 
 export function ActiveAccount() {
-  const { db } = useStorage();
+  const { ark } = useArk();
-  const { user } = useProfile(db.account.pubkey);
+  const { user } = useProfile(ark.account.pubkey);
 
   const svgURI =
     'data:image/svg+xml;utf8,' +
-    encodeURIComponent(minidenticon(db.account.pubkey, 90, 50));
+    encodeURIComponent(minidenticon(ark.account.pubkey, 90, 50));
 
   return (
     <div className="flex flex-col gap-1 rounded-lg bg-neutral-100 p-1 ring-1 ring-transparent hover:bg-neutral-200 hover:ring-blue-500 dark:bg-neutral-900 dark:hover:bg-neutral-800">
@@ -23,7 +23,7 @@ export function ActiveAccount() {
         <Avatar.Root>
           <Avatar.Image
             src={user?.picture || user?.image}
-            alt={db.account.pubkey}
+            alt={ark.account.pubkey}
             loading="lazy"
             decoding="async"
             style={{ contentVisibility: 'auto' }}
@@ -32,7 +32,7 @@ export function ActiveAccount() {
           <Avatar.Fallback delayMs={150}>
             <img
               src={svgURI}
-              alt={db.account.pubkey}
+              alt={ark.account.pubkey}
               className="aspect-square h-auto w-full rounded-md bg-black dark:bg-white"
             />
           </Avatar.Fallback>

src/shared/layouts/app.tsx

@@ -2,21 +2,21 @@ import { Outlet, ScrollRestoration } from 'react-router-dom';
 import { twMerge } from 'tailwind-merge';
 import { WindowTitlebar } from 'tauri-controls';
 
-import { useStorage } from '@libs/storage/provider';
+import { useArk } from '@libs/ark';
 
 import { Navigation } from '@shared/navigation';
 
 export function AppLayout() {
-  const { db } = useStorage();
+  const { ark } = useArk();
 
   return (
     <div
       className={twMerge(
         'flex h-screen w-screen flex-col',
-        db.platform !== 'macos' ? 'bg-neutral-50 dark:bg-neutral-950' : ''
+        ark.platform !== 'macos' ? 'bg-neutral-50 dark:bg-neutral-950' : ''
       )}
     >
-      {db.platform !== 'macos' ? (
+      {ark.platform !== 'macos' ? (
         <WindowTitlebar />
       ) : (
         <div data-tauri-drag-region className="h-9" />
@@ -26,7 +26,7 @@ export function AppLayout() {
           data-tauri-drag-region
           className={twMerge(
             'h-full w-[64px] shrink-0',
-            db.platform !== 'macos' ? 'pt-2' : 'pt-0'
+            ark.platform !== 'macos' ? 'pt-2' : 'pt-0'
           )}
         >
           <Navigation />

src/shared/layouts/auth.tsx

@@ -1,14 +1,14 @@
 import { Outlet, ScrollRestoration } from 'react-router-dom';
 import { WindowTitlebar } from 'tauri-controls';
 
-import { useStorage } from '@libs/storage/provider';
+import { useArk } from '@libs/ark';
 
 export function AuthLayout() {
-  const { db } = useStorage();
+  const { ark } = useArk();
 
   return (
     <div className="flex h-screen w-screen flex-col">
-      {db.platform !== 'macos' ? (
+      {ark.platform !== 'macos' ? (
         <WindowTitlebar />
       ) : (
         <div data-tauri-drag-region className="h-9" />

src/shared/layouts/new.tsx

@@ -2,17 +2,17 @@ import { Link, NavLink, Outlet, useLocation } from 'react-router-dom';
 import { twMerge } from 'tailwind-merge';
 import { WindowTitlebar } from 'tauri-controls';
 
-import { useStorage } from '@libs/storage/provider';
+import { useArk } from '@libs/ark';
 
 import { ArrowLeftIcon } from '@shared/icons';
 
 export function NewLayout() {
-  const { db } = useStorage();
+  const { ark } = useArk();
   const location = useLocation();
 
   return (
     <div className="flex h-screen w-screen flex-col bg-neutral-50 dark:bg-neutral-950">
-      {db.platform !== 'macos' ? (
+      {ark.platform !== 'macos' ? (
         <WindowTitlebar />
       ) : (
         <div data-tauri-drag-region className="h-9 shrink-0" />

src/shared/layouts/note.tsx

@@ -1,14 +1,14 @@
 import { Outlet, ScrollRestoration } from 'react-router-dom';
 import { WindowTitlebar } from 'tauri-controls';
 
-import { useStorage } from '@libs/storage/provider';
+import { useArk } from '@libs/ark';
 
 export function NoteLayout() {
-  const { db } = useStorage();
+  const { ark } = useArk();
 
   return (
     <div className="flex h-screen w-screen flex-col bg-neutral-50 dark:bg-neutral-950">
-      {db.platform !== 'macos' ? (
+      {ark.platform !== 'macos' ? (
         <WindowTitlebar />
       ) : (
         <div data-tauri-drag-region className="h-9" />

src/shared/layouts/settings.tsx

@@ -2,7 +2,7 @@ import { NavLink, Outlet, ScrollRestoration, useNavigate } from 'react-router-do
 import { twMerge } from 'tailwind-merge';
 import { WindowTitlebar } from 'tauri-controls';
 
-import { useStorage } from '@libs/storage/provider';
+import { useArk } from '@libs/ark';
 
 import {
   AdvancedSettingsIcon,
@@ -14,12 +14,12 @@ import {
 } from '@shared/icons';
 
 export function SettingsLayout() {
-  const { db } = useStorage();
+  const { ark } = useArk();
   const navigate = useNavigate();
 
   return (
     <div className="flex h-screen w-screen flex-col bg-neutral-50 dark:bg-neutral-950">
-      {db.platform !== 'macos' ? (
+      {ark.platform !== 'macos' ? (
         <WindowTitlebar />
       ) : (
         <div data-tauri-drag-region className="h-9" />

src/shared/notes/actions/reaction.tsx

@@ -4,7 +4,7 @@ import { useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { toast } from 'sonner';
 
-import { useNDK } from '@libs/ndk/provider';
+import { useArk } from '@libs/ark';
 
 import { ReactionIcon } from '@shared/icons';
 
@@ -35,7 +35,7 @@ export function NoteReaction({ event }: { event: NDKEvent }) {
   const [open, setOpen] = useState(false);
   const [reaction, setReaction] = useState<string | null>(null);
 
-  const { ndk } = useNDK();
+  const { ark } = useArk();
   const navigate = useNavigate();
 
   const getReactionImage = (content: string) => {
@@ -45,7 +45,7 @@ export function NoteReaction({ event }: { event: NDKEvent }) {
 
   const react = async (content: string) => {
     try {
-      if (!ndk.signer) return navigate('/new/privkey');
+      if (!ark.readyToSign) return navigate('/new/privkey');
 
       setReaction(content);
 

src/shared/notes/actions/repost.tsx

@@ -6,7 +6,7 @@ import { useNavigate } from 'react-router-dom';
 import { toast } from 'sonner';
 import { twMerge } from 'tailwind-merge';
 
-import { useNDK } from '@libs/ndk/provider';
+import { useArk } from '@libs/ark';
 
 import { LoaderIcon, RepostIcon } from '@shared/icons';
 
@@ -15,12 +15,12 @@ export function NoteRepost({ event }: { event: NDKEvent }) {
   const [isLoading, setIsLoading] = useState(false);
   const [isRepost, setIsRepost] = useState(false);
 
-  const { ndk } = useNDK();
+  const { ark } = useArk();
   const navigate = useNavigate();
 
   const submit = async () => {
     try {
-      if (!ndk.signer) return navigate('/new/privkey');
+      if (!ark.readyToSign) return navigate('/new/privkey');
 
       setIsLoading(true);
 

src/shared/notes/actions/zap.tsx

@@ -9,8 +9,7 @@ import { useEffect, useRef, useState } from 'react';
 import CurrencyInput from 'react-currency-input-field';
 import { useNavigate } from 'react-router-dom';
 
-import { useNDK } from '@libs/ndk/provider';
+import { useArk } from '@libs/ark';
-import { useStorage } from '@libs/storage/provider';
 
 import { CancelIcon, ZapIcon } from '@shared/icons';
 
@@ -20,11 +19,7 @@ import { compactNumber } from '@utils/number';
 import { displayNpub } from '@utils/shortenKey';
 
 export function NoteZap({ event }: { event: NDKEvent }) {
-  const nwc = useRef(null);
+  const { ark } = useArk();
-  const navigate = useNavigate();
-
-  const { db } = useStorage();
-  const { ndk } = useNDK();
   const { user } = useProfile(event.pubkey);
 
   const [walletConnectURL, setWalletConnectURL] = useState<string>(null);
@@ -35,9 +30,12 @@ export function NoteZap({ event }: { event: NDKEvent }) {
   const [isCompleted, setIsCompleted] = useState(false);
   const [isLoading, setIsLoading] = useState(false);
 
+  const nwc = useRef(null);
+  const navigate = useNavigate();
+
   const createZapRequest = async () => {
     try {
-      if (!ndk.signer) return navigate('/new/privkey');
+      if (!ark.readyToSign) return navigate('/new/privkey');
 
       const zapAmount = parseInt(amount) * 1000;
       const res = await event.zap(zapAmount, zapMessage);
@@ -88,7 +86,7 @@ export function NoteZap({ event }: { event: NDKEvent }) {
   useEffect(() => {
     async function getWalletConnectURL() {
       const uri: string = await invoke('secure_load', {
-        key: `${db.account.pubkey}-nwc`,
+        key: `${ark.account.pubkey}-nwc`,
       });
       if (uri) setWalletConnectURL(uri);
     }

src/shared/notes/replies/form.tsx

@@ -1,15 +1,15 @@
-import { NDKEvent, NDKKind } from '@nostr-dev-kit/ndk';
+import { NDKEvent } from '@nostr-dev-kit/ndk';
 import { useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { toast } from 'sonner';
 
-import { useNDK } from '@libs/ndk/provider';
+import { useArk } from '@libs/ark';
 
 import { LoaderIcon } from '@shared/icons';
 import { ReplyMediaUploader } from '@shared/notes';
 
 export function NoteReplyForm({ rootEvent }: { rootEvent: NDKEvent }) {
-  const { ndk } = useNDK();
+  const { ark } = useArk();
   const navigate = useNavigate();
 
   const [value, setValue] = useState('');
@@ -17,22 +17,14 @@ export function NoteReplyForm({ rootEvent }: { rootEvent: NDKEvent }) {
 
   const submit = async () => {
     try {
-      if (!ndk.signer) return navigate('/new/privkey');
+      if (!ark.readyToSign) return navigate('/new/privkey');
-
       setLoading(true);
 
-      const event = new NDKEvent(ndk);
-      event.content = value;
-      event.kind = NDKKind.Text;
-
-      // tag root event
-      event.tag(rootEvent, 'reply');
-
       // publish event
-      const publishedRelays = await event.publish();
+      const publish = await ark.replyTo({ content: value, event: rootEvent });
 
-      if (publishedRelays) {
+      if (publish) {
-        toast.success(`Broadcasted to ${publishedRelays.size} relays successfully.`);
+        toast.success(`Broadcasted to ${publish.size} relays successfully.`);
 
         // reset state
         setValue('');

src/shared/userProfile.tsx

@@ -1,10 +1,8 @@
-import { NDKEvent, NDKKind, NDKUser } from '@nostr-dev-kit/ndk';
 import { useEffect, useState } from 'react';
-import { Link, useNavigate } from 'react-router-dom';
+import { Link } from 'react-router-dom';
 import { toast } from 'sonner';
 
-import { useNDK } from '@libs/ndk/provider';
+import { useArk } from '@libs/ark';
-import { useStorage } from '@libs/storage/provider';
 
 import { NIP05 } from '@shared/nip05';
 
@@ -12,18 +10,14 @@ import { useProfile } from '@utils/hooks/useProfile';
 import { displayNpub } from '@utils/shortenKey';
 
 export function UserProfile({ pubkey }: { pubkey: string }) {
-  const { db } = useStorage();
+  const { ark } = useArk();
-  const { ndk } = useNDK();
   const { user } = useProfile(pubkey);
 
   const [followed, setFollowed] = useState(false);
-  const navigate = useNavigate();
 
   const follow = async (pubkey: string) => {
     try {
-      const user = ndk.getUser({ pubkey: db.account.pubkey });
+      const add = await ark.createContact({ pubkey });
-      const contacts = await user.follows();
-      const add = await user.follow(new NDKUser({ pubkey: pubkey }), contacts);
 
       if (add) {
         setFollowed(true);
@@ -37,22 +31,9 @@ export function UserProfile({ pubkey }: { pubkey: string }) {
 
   const unfollow = async (pubkey: string) => {
     try {
-      if (!ndk.signer) return navigate('/new/privkey');
+      const remove = await ark.deleteContact({ pubkey });
 
-      const user = ndk.getUser({ pubkey: db.account.pubkey });
+      if (remove) {
-      const contacts = await user.follows();
-      contacts.delete(new NDKUser({ pubkey: pubkey }));
-
-      let list: string[][];
-      contacts.forEach((el) => list.push(['p', el.pubkey, el.relayUrls?.[0] || '', '']));
-
-      const event = new NDKEvent(ndk);
-      event.content = '';
-      event.kind = NDKKind.Contacts;
-      event.tags = list;
-
-      const publishedRelays = await event.publish();
-      if (publishedRelays) {
         setFollowed(false);
       }
     } catch (error) {
@@ -61,7 +42,7 @@ export function UserProfile({ pubkey }: { pubkey: string }) {
   };
 
   useEffect(() => {
-    if (db.account.contacts.includes(pubkey)) {
+    if (ark.account.contacts.includes(pubkey)) {
       setFollowed(true);
     }
   }, []);

src/shared/widgets/article.tsx

@@ -1,11 +1,10 @@
-import { NDKEvent, NDKKind } from '@nostr-dev-kit/ndk';
+import { NDKKind } from '@nostr-dev-kit/ndk';
 import { useInfiniteQuery } from '@tanstack/react-query';
 import { FetchFilter } from 'nostr-fetch';
 import { useMemo } from 'react';
 import { VList } from 'virtua';
 
-import { useNDK } from '@libs/ndk/provider';
+import { useArk } from '@libs/ark';
-import { useStorage } from '@libs/storage/provider';
 
 import { ArrowRightCircleIcon, LoaderIcon } from '@shared/icons';
 import { MemoizedArticleNote } from '@shared/notes';
@@ -16,8 +15,7 @@ import { FETCH_LIMIT } from '@utils/constants';
 import { Widget } from '@utils/types';
 
 export function ArticleWidget({ widget }: { widget: Widget }) {
-  const { db } = useStorage();
+  const { ark } = useArk();
-  const { ndk, relayUrls, fetcher } = useNDK();
   const { status, data, hasNextPage, isFetchingNextPage, fetchNextPage } =
     useInfiniteQuery({
       queryKey: ['article', widget.id],
@@ -39,20 +37,19 @@ export function ArticleWidget({ widget }: { widget: Widget }) {
         } else {
           filter = {
             kinds: [NDKKind.Article],
-            authors: db.account.contacts,
+            authors: ark.account.contacts,
           };
         }
 
-        const events = await fetcher.fetchLatestEvents(relayUrls, filter, FETCH_LIMIT, {
+        const events = await ark.getInfiniteEvents({
-          asOf: pageParam === 0 ? undefined : pageParam,
+          filter,
-          abortSignal: signal,
+          limit: FETCH_LIMIT,
+          pageParam,
+          signal,
+          dedup: false,
         });
 
-        const ndkEvents = events.map((event) => {
+        return events;
-          return new NDKEvent(ndk, event);
-        });
-
-        return ndkEvents.sort((a, b) => b.created_at - a.created_at);
       },
       getNextPageParam: (lastPage) => {
         const lastEvent = lastPage.at(-1);

src/shared/widgets/file.tsx

@@ -1,11 +1,9 @@
-import { NDKEvent } from '@nostr-dev-kit/ndk';
 import { useInfiniteQuery } from '@tanstack/react-query';
 import { FetchFilter } from 'nostr-fetch';
 import { useMemo } from 'react';
 import { VList } from 'virtua';
 
-import { useNDK } from '@libs/ndk/provider';
+import { useArk } from '@libs/ark';
-import { useStorage } from '@libs/storage/provider';
 
 import { ArrowRightCircleIcon, LoaderIcon } from '@shared/icons';
 import { MemoizedFileNote } from '@shared/notes';
@@ -16,8 +14,7 @@ import { FETCH_LIMIT } from '@utils/constants';
 import { Widget } from '@utils/types';
 
 export function FileWidget({ widget }: { widget: Widget }) {
-  const { db } = useStorage();
+  const { ark } = useArk();
-  const { ndk, relayUrls, fetcher } = useNDK();
   const { status, data, hasNextPage, isFetchingNextPage, fetchNextPage } =
     useInfiniteQuery({
       queryKey: ['media', widget.id],
@@ -39,20 +36,19 @@ export function FileWidget({ widget }: { widget: Widget }) {
         } else {
           filter = {
             kinds: [1063],
-            authors: db.account.contacts,
+            authors: ark.account.contacts,
           };
         }
 
-        const events = await fetcher.fetchLatestEvents(relayUrls, filter, FETCH_LIMIT, {
+        const events = await ark.getInfiniteEvents({
-          asOf: pageParam === 0 ? undefined : pageParam,
+          filter,
-          abortSignal: signal,
+          limit: FETCH_LIMIT,
+          pageParam,
+          signal,
+          dedup: false,
         });
 
-        const ndkEvents = events.map((event) => {
+        return events;
-          return new NDKEvent(ndk, event);
-        });
-
-        return ndkEvents.sort((a, b) => b.created_at - a.created_at);
       },
       getNextPageParam: (lastPage) => {
         const lastEvent = lastPage.at(-1);

src/shared/widgets/group.tsx

@@ -3,7 +3,7 @@ import { useInfiniteQuery } from '@tanstack/react-query';
 import { useCallback, useMemo } from 'react';
 import { VList } from 'virtua';
 
-import { useNDK } from '@libs/ndk/provider';
+import { useArk } from '@libs/ark';
 
 import { ArrowRightCircleIcon, LoaderIcon } from '@shared/icons';
 import {
@@ -19,7 +19,7 @@ import { FETCH_LIMIT } from '@utils/constants';
 import { Widget } from '@utils/types';
 
 export function GroupWidget({ widget }: { widget: Widget }) {
-  const { relayUrls, ndk, fetcher } = useNDK();
+  const { ark } = useArk();
   const { status, data, hasNextPage, isFetchingNextPage, fetchNextPage } =
     useInfiniteQuery({
       queryKey: ['groupfeeds', widget.id],
@@ -32,21 +32,18 @@ export function GroupWidget({ widget }: { widget: Widget }) {
         pageParam: number;
       }) => {
         const authors = JSON.parse(widget.content);
-        const events = await fetcher.fetchLatestEvents(
+        const events = await ark.getInfiniteEvents({
-          relayUrls,
+          filter: {
-          {
             kinds: [NDKKind.Text, NDKKind.Repost],
             authors: authors,
           },
-          FETCH_LIMIT,
+          limit: FETCH_LIMIT,
-          { asOf: pageParam === 0 ? undefined : pageParam, abortSignal: signal }
+          pageParam,
-        );
+          signal,
-
+          dedup: false,
-        const ndkEvents = events.map((event) => {
-          return new NDKEvent(ndk, event);
         });
 
-        return ndkEvents.sort((a, b) => b.created_at - a.created_at);
+        return events;
       },
       getNextPageParam: (lastPage) => {
         const lastEvent = lastPage.at(-1);

src/shared/widgets/hashtag.tsx

@@ -3,7 +3,7 @@ import { useInfiniteQuery } from '@tanstack/react-query';
 import { useCallback, useMemo } from 'react';
 import { VList } from 'virtua';
 
-import { useNDK } from '@libs/ndk/provider';
+import { useArk } from '@libs/ark';
 
 import { ArrowRightCircleIcon, LoaderIcon } from '@shared/icons';
 import { MemoizedRepost, MemoizedTextNote, UnknownNote } from '@shared/notes';
@@ -14,7 +14,7 @@ import { FETCH_LIMIT } from '@utils/constants';
 import { Widget } from '@utils/types';
 
 export function HashtagWidget({ widget }: { widget: Widget }) {
-  const { ndk, relayUrls, fetcher } = useNDK();
+  const { ark } = useArk();
   const { status, data, hasNextPage, isFetchingNextPage, fetchNextPage } =
     useInfiniteQuery({
       queryKey: ['hashtag', widget.id],
@@ -26,21 +26,18 @@ export function HashtagWidget({ widget }: { widget: Widget }) {
         signal: AbortSignal;
         pageParam: number;
       }) => {
-        const events = await fetcher.fetchLatestEvents(
+        const events = await ark.getInfiniteEvents({
-          relayUrls,
+          filter: {
-          {
             kinds: [NDKKind.Text, NDKKind.Repost],
             '#t': [widget.content],
           },
-          FETCH_LIMIT,
+          limit: FETCH_LIMIT,
-          { asOf: pageParam === 0 ? undefined : pageParam, abortSignal: signal }
+          pageParam,
-        );
+          signal,
-
+          dedup: false,
-        const ndkEvents = events.map((event) => {
-          return new NDKEvent(ndk, event);
         });
 
-        return ndkEvents.sort((a, b) => b.created_at - a.created_at);
+        return events;
       },
       getNextPageParam: (lastPage) => {
         const lastEvent = lastPage.at(-1);

src/shared/widgets/newsfeed.tsx

@@ -3,8 +3,7 @@ import { useInfiniteQuery } from '@tanstack/react-query';
 import { useCallback, useMemo, useRef } from 'react';
 import { VList, VListHandle } from 'virtua';
 
-import { useNDK } from '@libs/ndk/provider';
+import { useArk } from '@libs/ark';
-import { useStorage } from '@libs/storage/provider';
 
 import { ArrowRightCircleIcon, LoaderIcon } from '@shared/icons';
 import {
@@ -19,8 +18,7 @@ import { LiveUpdater, WidgetWrapper } from '@shared/widgets';
 import { FETCH_LIMIT } from '@utils/constants';
 
 export function NewsfeedWidget() {
-  const { db } = useStorage();
+  const { ark } = useArk();
-  const { relayUrls, ndk, fetcher } = useNDK();
   const { status, data, hasNextPage, isFetchingNextPage, fetchNextPage } =
     useInfiniteQuery({
       queryKey: ['newsfeed'],
@@ -32,35 +30,17 @@ export function NewsfeedWidget() {
         signal: AbortSignal;
         pageParam: number;
       }) => {
-        const rootIds = new Set();
+        const events = await ark.getInfiniteEvents({
-        const dedupQueue = new Set();
+          filter: {
-
-        const events = await fetcher.fetchLatestEvents(
-          relayUrls,
-          {
             kinds: [NDKKind.Text, NDKKind.Repost],
-            authors: db.account.contacts,
+            authors: ark.account.contacts,
           },
-          FETCH_LIMIT,
+          limit: FETCH_LIMIT,
-          { asOf: pageParam === 0 ? undefined : pageParam, abortSignal: signal }
+          pageParam,
-        );
+          signal,
-
-        const ndkEvents = events.map((event) => {
-          return new NDKEvent(ndk, event);
         });
 
-        ndkEvents.forEach((event) => {
+        return events;
-          const tags = event.tags.filter((el) => el[0] === 'e');
-          if (tags && tags.length > 0) {
-            const rootId = tags.filter((el) => el[3] === 'root')[1] ?? tags[0][1];
-            if (rootIds.has(rootId)) return dedupQueue.add(event.id);
-            rootIds.add(rootId);
-          }
-        });
-
-        return ndkEvents
-          .filter((event) => !dedupQueue.has(event.id))
-          .sort((a, b) => b.created_at - a.created_at);
       },
       getNextPageParam: (lastPage) => {
         const lastEvent = lastPage.at(-1);

src/shared/widgets/other/addGroupFeeds.tsx

@@ -1,7 +1,7 @@
 import * as Dialog from '@radix-ui/react-dialog';
 import { useState } from 'react';
 
-import { useStorage } from '@libs/storage/provider';
+import { useArk } from '@libs/ark';
 
 import {
   ArrowRightCircleIcon,
@@ -16,7 +16,7 @@ import { WIDGET_KIND } from '@utils/constants';
 import { useWidget } from '@utils/hooks/useWidget';
 
 export function AddGroupFeeds({ currentWidgetId }: { currentWidgetId: string }) {
-  const { db } = useStorage();
+  const { ark } = useArk();
   const { replaceWidget } = useWidget();
 
   const [title, setTitle] = useState<string>('');
@@ -95,7 +95,7 @@ export function AddGroupFeeds({ currentWidgetId }: { currentWidgetId: string })
                   Users
                 </span>
                 <div className="flex h-[420px] flex-col overflow-y-auto rounded-xl bg-neutral-100 py-2 dark:bg-neutral-900">
-                  {db.account.contacts.map((item: string) => (
+                  {ark.account?.contacts?.map((item: string) => (
                     <button
                       key={item}
                       type="button"

src/shared/widgets/topic.tsx

@@ -1,10 +1,9 @@
-import { NDKEvent, NDKKind } from '@nostr-dev-kit/ndk';
+import { NDKEvent, NDKFilter, NDKKind } from '@nostr-dev-kit/ndk';
 import { useInfiniteQuery } from '@tanstack/react-query';
-import { FetchFilter } from 'nostr-fetch';
 import { useCallback, useMemo } from 'react';
 import { VList } from 'virtua';
 
-import { useNDK } from '@libs/ndk/provider';
+import { useArk } from '@libs/ark';
 
 import { ArrowRightCircleIcon, LoaderIcon } from '@shared/icons';
 import {
@@ -20,7 +19,7 @@ import { FETCH_LIMIT } from '@utils/constants';
 import { Widget } from '@utils/types';
 
 export function TopicWidget({ widget }: { widget: Widget }) {
-  const { relayUrls, ndk, fetcher } = useNDK();
+  const { ark } = useArk();
   const { status, data, hasNextPage, isFetchingNextPage, fetchNextPage } =
     useInfiniteQuery({
       queryKey: ['topic', widget.id],
@@ -33,35 +32,19 @@ export function TopicWidget({ widget }: { widget: Widget }) {
         pageParam: number;
       }) => {
         const hashtags: string[] = JSON.parse(widget.content as string);
-        const filter: FetchFilter = {
+        const filter: NDKFilter = {
           kinds: [NDKKind.Text, NDKKind.Repost],
           '#t': hashtags.map((tag) => tag.replace('#', '')),
         };
 
-        const rootIds = new Set();
+        const events = await ark.getInfiniteEvents({
-        const dedupQueue = new Set();
+          filter,
-
+          limit: FETCH_LIMIT,
-        const events = await fetcher.fetchLatestEvents(relayUrls, filter, FETCH_LIMIT, {
+          pageParam,
-          asOf: pageParam === 0 ? undefined : pageParam,
+          signal,
-          abortSignal: signal,
         });
 
-        const ndkEvents = events.map((event) => {
+        return events;
-          return new NDKEvent(ndk, event);
-        });
-
-        ndkEvents.forEach((event) => {
-          const tags = event.tags.filter((el) => el[0] === 'e');
-          if (tags && tags.length > 0) {
-            const rootId = tags.filter((el) => el[3] === 'root')[1] ?? tags[0][1];
-            if (rootIds.has(rootId)) return dedupQueue.add(event.id);
-            rootIds.add(rootId);
-          }
-        });
-
-        return ndkEvents
-          .filter((event) => !dedupQueue.has(event.id))
-          .sort((a, b) => b.created_at - a.created_at);
       },
       getNextPageParam: (lastPage) => {
         const lastEvent = lastPage.at(-1);

src/shared/widgets/user.tsx

@@ -1,10 +1,11 @@
 import { NDKEvent, NDKKind } from '@nostr-dev-kit/ndk';
-import { useQuery } from '@tanstack/react-query';
+import { useInfiniteQuery } from '@tanstack/react-query';
-import { useCallback } from 'react';
+import { useCallback, useMemo } from 'react';
 import { WVList } from 'virtua';
 
-import { useNDK } from '@libs/ndk/provider';
+import { useArk } from '@libs/ark';
 
+import { ArrowRightCircleIcon, LoaderIcon } from '@shared/icons';
 import {
   MemoizedRepost,
   MemoizedTextNote,
@@ -15,43 +16,46 @@ import { TitleBar } from '@shared/titleBar';
 import { UserProfile } from '@shared/userProfile';
 import { WidgetWrapper } from '@shared/widgets';
 
-import { nHoursAgo } from '@utils/date';
+import { FETCH_LIMIT } from '@utils/constants';
 import { Widget } from '@utils/types';
 
 export function UserWidget({ widget }: { widget: Widget }) {
-  const { ndk } = useNDK();
+  const { ark } = useArk();
-  const { status, data } = useQuery({
+  const { status, data, hasNextPage, isFetchingNextPage, fetchNextPage } =
-    queryKey: ['user-posts', widget.id],
+    useInfiniteQuery({
-    queryFn: async () => {
+      queryKey: ['user-posts', widget.content],
-      const rootIds = new Set();
+      initialPageParam: 0,
-      const dedupQueue = new Set();
+      queryFn: async ({
+        signal,
+        pageParam,
+      }: {
+        signal: AbortSignal;
+        pageParam: number;
+      }) => {
+        const events = await ark.getInfiniteEvents({
+          filter: {
+            kinds: [NDKKind.Text, NDKKind.Repost],
+            authors: [widget.content],
+          },
+          limit: FETCH_LIMIT,
+          pageParam,
+          signal,
+        });
 
-      const events = await ndk.fetchEvents({
+        return events;
-        kinds: [NDKKind.Text, NDKKind.Repost],
+      },
-        authors: [widget.content],
+      getNextPageParam: (lastPage) => {
-        since: nHoursAgo(24),
+        const lastEvent = lastPage.at(-1);
-      });
+        if (!lastEvent) return;
+        return lastEvent.created_at - 1;
+      },
+      refetchOnWindowFocus: false,
+    });
 
-      const ndkEvents = [...events];
+  const allEvents = useMemo(
-
+    () => (data ? data.pages.flatMap((page) => page) : []),
-      ndkEvents.forEach((event) => {
+    [data]
-        const tags = event.tags.filter((el) => el[0] === 'e');
+  );
-        if (tags && tags.length > 0) {
-          const rootId = tags.filter((el) => el[3] === 'root')[1] ?? tags[0][1];
-          if (rootIds.has(rootId)) return dedupQueue.add(event.id);
-          rootIds.add(rootId);
-        }
-      });
-
-      return ndkEvents
-        .filter((event) => !dedupQueue.has(event.id))
-        .sort((a, b) => b.created_at - a.created_at);
-    },
-    staleTime: Infinity,
-    refetchOnMount: false,
-    refetchOnReconnect: false,
-    refetchOnWindowFocus: false,
-  });
 
   // render event match event kind
   const renderItem = useCallback(
@@ -86,19 +90,28 @@ export function UserWidget({ widget }: { widget: Widget }) {
                   <NoteSkeleton />
                 </div>
               </div>
-            ) : data.length === 0 ? (
-              <div className="px-3 py-1.5">
-                <div className="rounded-xl bg-neutral-100 px-3 py-6 dark:bg-neutral-900">
-                  <div className="flex flex-col items-center gap-4">
-                    <p className="text-center text-sm text-neutral-900 dark:text-neutral-100">
-                      No new post from 24 hours ago
-                    </p>
-                  </div>
-                </div>
-              </div>
             ) : (
-              data.map((item) => renderItem(item))
+              allEvents.map((item) => renderItem(item))
             )}
+            <div className="flex h-16 items-center justify-center px-3 pb-3">
+              {hasNextPage ? (
+                <button
+                  type="button"
+                  onClick={() => fetchNextPage()}
+                  disabled={!hasNextPage || isFetchingNextPage}
+                  className="inline-flex h-10 w-max items-center justify-center gap-2 rounded-full bg-blue-500 px-6 font-medium text-white hover:bg-blue-600 focus:outline-none"
+                >
+                  {isFetchingNextPage ? (
+                    <LoaderIcon className="h-4 w-4 animate-spin" />
+                  ) : (
+                    <>
+                      <ArrowRightCircleIcon className="h-5 w-5" />
+                      Load more
+                    </>
+                  )}
+                </button>
+              ) : null}
+            </div>
           </div>
         </div>
       </WVList>

src/utils/hooks/useSuggestion.ts

@@ -4,14 +4,14 @@ import tippy from 'tippy.js';
 
 import { MentionList } from '@app/new/components';
 
-import { useStorage } from '@libs/storage/provider';
+import { useArk } from '@libs/ark';
 
 export function useSuggestion() {
-  const { db } = useStorage();
+  const { ark } = useArk();
 
   const suggestion: MentionOptions['suggestion'] = {
     items: async ({ query }) => {
-      const users = await db.getAllCacheUsers();
+      const users = await ark.getAllCacheUsers();
       return users
         .filter((item) => {
           if (item.name) return item.name.toLowerCase().startsWith(query.toLowerCase());

src/utils/hooks/useWidget.ts

@@ -1,16 +1,16 @@
 import { useMutation, useQueryClient } from '@tanstack/react-query';
 
-import { useStorage } from '@libs/storage/provider';
+import { useArk } from '@libs/ark';
 
 import { Widget } from '@utils/types';
 
 export function useWidget() {
-  const { db } = useStorage();
+  const { ark } = useArk();
   const queryClient = useQueryClient();
 
   const addWidget = useMutation({
     mutationFn: async (widget: Widget) => {
-      return await db.createWidget(widget.kind, widget.title, widget.content);
+      return await ark.createWidget(widget.kind, widget.title, widget.content);
     },
     onSuccess: (data) => {
       queryClient.setQueryData(['widgets'], (old: Widget[]) => [...old, data]);
@@ -26,8 +26,8 @@ export function useWidget() {
       const prevWidgets = queryClient.getQueryData(['widgets']);
 
       // create new widget
-      await db.removeWidget(currentId);
+      await ark.removeWidget(currentId);
-      const newWidget = await db.createWidget(widget.kind, widget.title, widget.content);
+      const newWidget = await ark.createWidget(widget.kind, widget.title, widget.content);
 
       // Optimistically update to the new value
       queryClient.setQueryData(['widgets'], (prev: Widget[]) => [
@@ -57,7 +57,7 @@ export function useWidget() {
       );
 
       // Update in database
-      await db.removeWidget(id);
+      await ark.removeWidget(id);
 
       // Return a context object with the snapshotted value
       return { prevWidgets };