wip: migrate channel to zustand

src/shared/composer/modal.tsx

@@ -58,7 +58,7 @@ export function ComposerModal() {
 							<Dialog.Panel className="relative h-min w-full max-w-xl rounded-lg border border-zinc-800 bg-zinc-900">
 								<div className="flex items-center justify-between px-4 py-4">
 									<div className="flex items-center gap-2">
-										<div>{account && <User data={account} />}</div>
+										<div>{account && <User pubkey={account.pubkey} />}</div>
 										<span>
 											<ChevronRightIcon
 												width={14}

src/shared/composer/user.tsx

@@ -1,21 +1,22 @@
 import { Image } from "@shared/image";
 import { DEFAULT_AVATAR } from "@stores/constants";
+import { useProfile } from "@utils/hooks/useProfile";
 
-export function User({ data }: { data: any }) {
-	const metadata = JSON.parse(data.metadata);
+export function User({ pubkey }: { pubkey: string }) {
+	const { user } = useProfile(pubkey);
 
 	return (
 		<div className="flex items-center gap-2">
 			<div className="h-8 w-8 shrink-0 overflow-hidden rounded bg-zinc-900">
 				<Image
-					src={metadata?.picture || DEFAULT_AVATAR}
-					alt={data.pubkey}
+					src={user?.picture || DEFAULT_AVATAR}
+					alt={pubkey}
 					className="h-8 w-8 object-cover"
 					loading="auto"
 				/>
 			</div>
 			<h5 className="text-base font-semibold leading-none text-white">
-				{metadata?.display_name || metadata?.name || (
+				{user?.nip05 || user?.name || (
 					<div className="h-3 w-20 animate-pulse rounded-sm bg-zinc-700" />
 				)}
 			</h5>