updated onboarding process use new storage util

src/components/user/base.tsx

@@ -1,13 +1,13 @@
-import { DatabaseContext } from '@components/contexts/database';
 import { ImageWithFallback } from '@components/imageWithFallback';
 
+import { createCacheProfile } from '@utils/storage';
 import { truncate } from '@utils/truncate';
 
 import { fetch } from '@tauri-apps/api/http';
-import { memo, useCallback, useContext, useEffect, useState } from 'react';
+import destr from 'destr';
+import { memo, useCallback, useEffect, useState } from 'react';
 
 export const UserBase = memo(function UserBase({ pubkey }: { pubkey: string }) {
-  const { db }: any = useContext(DatabaseContext);
   const [profile, setProfile] = useState(null);
 
   const fetchProfile = useCallback(async (id: string) => {
@@ -15,24 +15,17 @@ export const UserBase = memo(function UserBase({ pubkey }: { pubkey: string }) {
       method: 'GET',
       timeout: 30,
     });
-    return res;
+    return res.data;
   }, []);
 
-  const cacheProfile = useCallback(
-    async (event) => {
-      // insert to database
-      await db.execute('INSERT OR IGNORE INTO cache_profiles (id, metadata) VALUES (?, ?);', [pubkey, event.content]);
-      // update state
-      setProfile(JSON.parse(event.content));
-    },
-    [db, pubkey]
-  );
-
   useEffect(() => {
     fetchProfile(pubkey)
-      .then((res) => cacheProfile(res))
+      .then((res: any) => {
+        setProfile(destr(res.content));
+        createCacheProfile(res.pubkey, res.content);
+      })
       .catch(console.error);
-  }, [fetchProfile, cacheProfile, pubkey]);
+  }, [fetchProfile, pubkey]);
 
   return (
     <div className="flex items-center gap-2">
@@ -41,7 +34,7 @@ export const UserBase = memo(function UserBase({ pubkey }: { pubkey: string }) {
           <ImageWithFallback src={profile.picture} alt={pubkey} fill={true} className="rounded-full object-cover" />
         )}
       </div>
-      <div className="flex w-full flex-1 flex-col items-start">
+      <div className="flex w-full flex-1 flex-col items-start text-start">
         <span className="font-medium leading-tight text-zinc-200">{profile?.display_name || profile?.name}</span>
         <span className="text-sm leading-tight text-zinc-400">{truncate(pubkey, 16, ' .... ')}</span>
       </div>