refactor user component and updated onboarding

src/components/user/base.tsx

@@ -1,33 +1,22 @@
 import { ImageWithFallback } from '@components/imageWithFallback';
+import { RelayContext } from '@components/relaysProvider';
 
 import { DEFAULT_AVATAR } from '@stores/constants';
 
-import { createCacheProfile } from '@utils/storage';
 import { truncate } from '@utils/truncate';
 
-import { fetch } from '@tauri-apps/api/http';
-import destr from 'destr';
-import { memo, useCallback, useEffect, useState } from 'react';
+import { Author } from 'nostr-relaypool';
+import { memo, useContext, useEffect, useMemo, useState } from 'react';
 
 export const UserBase = memo(function UserBase({ pubkey }: { pubkey: string }) {
-  const [profile, setProfile] = useState(null);
+  const [pool, relays]: any = useContext(RelayContext);
 
-  const fetchProfile = useCallback(async (id: string) => {
-    const res = await fetch(`https://rbr.bio/${id}/metadata.json`, {
-      method: 'GET',
-      timeout: 30,
-    });
-    return res.data;
-  }, []);
+  const [profile, setProfile] = useState(null);
+  const user = useMemo(() => new Author(pool, relays, pubkey), [pubkey, pool, relays]);
 
   useEffect(() => {
-    fetchProfile(pubkey)
-      .then((res: any) => {
-        setProfile(destr(res.content));
-        createCacheProfile(res.pubkey, res.content);
-      })
-      .catch(console.error);
-  }, [fetchProfile, pubkey]);
+    user.metaData((res) => setProfile(JSON.parse(res.content)), 0);
+  }, [user]);
 
   return (
     <div className="flex items-center gap-2">

src/components/user/extend.tsx

@@ -1,51 +1,34 @@
 import { ImageWithFallback } from '@components/imageWithFallback';
+import { RelayContext } from '@components/relaysProvider';
 
 import { DEFAULT_AVATAR } from '@stores/constants';
 
-import { createCacheProfile, getCacheProfile } from '@utils/storage';
 import { truncate } from '@utils/truncate';
 
 import { DotsHorizontalIcon } from '@radix-ui/react-icons';
-import { fetch } from '@tauri-apps/api/http';
 import dayjs from 'dayjs';
 import relativeTime from 'dayjs/plugin/relativeTime';
-import destr from 'destr';
 import { useRouter } from 'next/router';
-import { memo, useCallback, useEffect, useState } from 'react';
+import { Author } from 'nostr-relaypool';
+import { memo, useContext, useEffect, useMemo, useState } from 'react';
 
 dayjs.extend(relativeTime);
 
 export const UserExtend = memo(function UserExtend({ pubkey, time }: { pubkey: string; time: any }) {
+  const [pool, relays]: any = useContext(RelayContext);
   const router = useRouter();
+
   const [profile, setProfile] = useState(null);
+  const user = useMemo(() => new Author(pool, relays, pubkey), [pubkey, pool, relays]);
 
   const openUserPage = (e) => {
     e.stopPropagation();
     router.push(`/users/${pubkey}`);
   };
 
-  const fetchProfile = useCallback(async (id: string) => {
-    const res = await fetch(`https://rbr.bio/${id}/metadata.json`, {
-      method: 'GET',
-      timeout: 30,
-    });
-    return res.data;
-  }, []);
-
   useEffect(() => {
-    getCacheProfile(pubkey).then((res) => {
-      if (res) {
-        setProfile(destr(res.metadata));
-      } else {
-        fetchProfile(pubkey)
-          .then((res: any) => {
-            setProfile(destr(res.content));
-            createCacheProfile(pubkey, res.content);
-          })
-          .catch(console.error);
-      }
-    });
-  }, [fetchProfile, pubkey]);
+    user.metaData((res) => setProfile(JSON.parse(res.content)), 0);
+  }, [user]);
 
   return (
     <div className="group flex items-start gap-2">

src/components/user/large.tsx

@@ -1,44 +1,27 @@
 import { ImageWithFallback } from '@components/imageWithFallback';
+import { RelayContext } from '@components/relaysProvider';
 
 import { DEFAULT_AVATAR } from '@stores/constants';
 
-import { createCacheProfile, getCacheProfile } from '@utils/storage';
 import { truncate } from '@utils/truncate';
 
 import { DotsHorizontalIcon } from '@radix-ui/react-icons';
-import { fetch } from '@tauri-apps/api/http';
 import dayjs from 'dayjs';
 import relativeTime from 'dayjs/plugin/relativeTime';
-import destr from 'destr';
-import { memo, useCallback, useEffect, useState } from 'react';
+import { Author } from 'nostr-relaypool';
+import { memo, useContext, useEffect, useMemo, useState } from 'react';
 
 dayjs.extend(relativeTime);
 
 export const UserLarge = memo(function UserLarge({ pubkey, time }: { pubkey: string; time: any }) {
-  const [profile, setProfile] = useState(null);
+  const [pool, relays]: any = useContext(RelayContext);
 
-  const fetchProfile = useCallback(async (id: string) => {
-    const res = await fetch(`https://rbr.bio/${id}/metadata.json`, {
-      method: 'GET',
-      timeout: 30,
-    });
-    return res.data;
-  }, []);
+  const [profile, setProfile] = useState(null);
+  const user = useMemo(() => new Author(pool, relays, pubkey), [pubkey, pool, relays]);
 
   useEffect(() => {
-    getCacheProfile(pubkey).then((res) => {
-      if (res) {
-        setProfile(destr(res.metadata));
-      } else {
-        fetchProfile(pubkey)
-          .then((res: any) => {
-            setProfile(destr(res.content));
-            createCacheProfile(pubkey, res.content);
-          })
-          .catch(console.error);
-      }
-    });
-  }, [fetchProfile, pubkey]);
+    user.metaData((res) => setProfile(JSON.parse(res.content)), 0);
+  }, [user]);
 
   return (
     <div className="flex items-center gap-2">

src/components/user/mention.tsx

@@ -1,35 +1,19 @@
-import { createCacheProfile, getCacheProfile } from '@utils/storage';
+import { RelayContext } from '@components/relaysProvider';
+
 import { truncate } from '@utils/truncate';
 
-import { fetch } from '@tauri-apps/api/http';
-import destr from 'destr';
-import { memo, useCallback, useEffect, useState } from 'react';
+import { Author } from 'nostr-relaypool';
+import { memo, useContext, useEffect, useMemo, useState } from 'react';
 
 export const UserMention = memo(function UserMention({ pubkey }: { pubkey: string }) {
-  const [profile, setProfile] = useState(null);
+  const [pool, relays]: any = useContext(RelayContext);
 
-  const fetchProfile = useCallback(async (id: string) => {
-    const res = await fetch(`https://rbr.bio/${id}/metadata.json`, {
-      method: 'GET',
-      timeout: 30,
-    });
-    return res.data;
-  }, []);
+  const [profile, setProfile] = useState(null);
+  const user = useMemo(() => new Author(pool, relays, pubkey), [pubkey, pool, relays]);
 
   useEffect(() => {
-    getCacheProfile(pubkey).then((res) => {
-      if (res) {
-        setProfile(destr(res.metadata));
-      } else {
-        fetchProfile(pubkey)
-          .then((res: any) => {
-            setProfile(destr(res.content));
-            createCacheProfile(pubkey, res.content);
-          })
-          .catch(console.error);
-      }
-    });
-  }, [fetchProfile, pubkey]);
+    user.metaData((res) => setProfile(JSON.parse(res.content)), 0);
+  }, [user]);
 
   return <span className="cursor-pointer text-fuchsia-500">@{profile?.name || truncate(pubkey, 16, ' .... ')}</span>;
 });

src/components/user/mini.tsx

@@ -1,24 +1,22 @@
 import { ImageWithFallback } from '@components/imageWithFallback';
+import { RelayContext } from '@components/relaysProvider';
 
 import { DEFAULT_AVATAR } from '@stores/constants';
 
-import { getCacheProfile } from '@utils/storage';
 import { truncate } from '@utils/truncate';
 
-import { useCallback, useEffect, useState } from 'react';
+import { Author } from 'nostr-relaypool';
+import { useContext, useEffect, useMemo, useState } from 'react';
 
 export const UserMini = ({ pubkey }: { pubkey: string }) => {
-  const [profile, setProfile] = useState(null);
+  const [pool, relays]: any = useContext(RelayContext);
 
-  const fetchCacheProfile = useCallback(async (id: string) => {
-    const res = await getCacheProfile(id);
-    const data = JSON.parse(res.metadata);
-    setProfile(data);
-  }, []);
+  const [profile, setProfile] = useState(null);
+  const user = useMemo(() => new Author(pool, relays, pubkey), [pubkey, pool, relays]);
 
   useEffect(() => {
-    fetchCacheProfile(pubkey).catch(console.error);
-  }, [fetchCacheProfile, pubkey]);
+    user.metaData((res) => setProfile(JSON.parse(res.content)), 0);
+  }, [user]);
 
   if (profile) {
     return (