Account and avatar

src/components/view/NewProfileView.tsx

@@ -7,6 +7,16 @@ import { Label } from "@/components/ui/label";
 import { Button } from "@/components/ui/button";
 import { saveAccounts } from "@/lib/accounts";
 import Enclave from "@/app/app";
+import { Avatar, AvatarFallback, AvatarImage } from "../ui/avatar";
+
+function readFileAsDataUrl(file: File): Promise<string> {
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader();
+    reader.onload = () => resolve(reader.result as string);
+    reader.onerror = () => reject(new Error("Failed to read image"));
+    reader.readAsDataURL(file);
+  });
+}
 
 export function NewProfilePage({
   appRef,
@@ -14,9 +24,28 @@ export function NewProfilePage({
   appRef: React.RefObject<Enclave | null>;
 }) {
   const [displayName, setDisplayName] = useState("");
+  const [avatar, setAvatar] = useState<string | null>(null);
   const [error, setError] = useState<string | null>(null);
   const [submitting, setSubmitting] = useState(false);
 
+  async function handleAvatarChange(e: React.ChangeEvent<HTMLInputElement>) {
+    const file = e.target.files?.[0];
+    if (!file) return;
+
+    if (!file.type.startsWith("image/")) {
+      setError("Please select an image file");
+      return;
+    }
+
+    try {
+      const dataUrl = await readFileAsDataUrl(file);
+      setAvatar(dataUrl);
+      setError(null);
+    } catch {
+      setError("Failed to load image");
+    }
+  }
+
   async function handleCreate() {
     const name = displayName.trim();
     if (!name) {
@@ -42,6 +71,7 @@ export function NewProfilePage({
       const newAccount = {
         displayName: name,
         privateKey: base58.encode(secretKey),
+        avatar: avatar ?? undefined,
       };
 
       appRef.current.accounts.activeAccount =
@@ -54,11 +84,13 @@ export function NewProfilePage({
       setError(e instanceof Error ? e.message : "Failed to create profile");
     } finally {
       setSubmitting(false);
+
+      window.location.reload();
     }
   }
 
   return (
-    <div className="flex h-screen items-center justify-center">
+    <div className="flex h-screen w-full items-center justify-center">
       <div className="w-full max-w-sm space-y-6">
         <div className="space-y-2 text-center">
           <h1 className="text-2xl font-semibold">Create your profile</h1>
@@ -68,6 +100,24 @@ export function NewProfilePage({
           </p>
         </div>
 
+        <div className="flex flex-col items-center gap-3">
+          <label htmlFor="avatar-upload" className="cursor-pointer">
+            <div className="h-20 w-20 overflow-hidden rounded-full border border-border bg-muted flex items-center justify-center hover:opacity-80 transition-opacity">
+              <Avatar className="h-full w-auto aspect-square">
+                {avatar && <AvatarImage src={avatar} />}
+                <AvatarFallback>{displayName[0] || "J"}</AvatarFallback>
+              </Avatar>
+            </div>
+          </label>
+          <input
+            id="avatar-upload"
+            type="file"
+            accept="image/*"
+            className="hidden"
+            onChange={handleAvatarChange}
+          />
+        </div>
+
         <div className="space-y-2">
           <Label htmlFor="display-name">Display name</Label>
           <Input