added useMetadata and refactor user component

src/components/user/follow.tsx

@@ -2,28 +2,11 @@ import { ImageWithFallback } from '@components/imageWithFallback';
 
 import { DEFAULT_AVATAR } from '@stores/constants';
 
+import { useMetadata } from '@utils/metadata';
 import { truncate } from '@utils/truncate';
 
-import { useCallback, useEffect, useState } from 'react';
-
 export const UserFollow = ({ pubkey }: { pubkey: string }) => {
-  const [profile, setProfile] = useState(null);
-
-  const getCachedMetadata = useCallback(async () => {
-    const { getPlebByPubkey } = await import('@utils/bindings');
-    getPlebByPubkey({ pubkey: pubkey })
-      .then((res) => {
-        if (res) {
-          const metadata = JSON.parse(res.metadata);
-          setProfile(metadata);
-        }
-      })
-      .catch(console.error);
-  }, [pubkey]);
-
-  useEffect(() => {
-    getCachedMetadata().catch(console.error);
-  }, [getCachedMetadata]);
+  const profile = useMetadata(pubkey);
 
   return (
     <div className="flex items-center gap-2">