feat: introduce react-hook-form (+zod) in profile edit page (closes #784)

Installs react-hook-form, @hookform/resolvers, and zod. Refactors
profile/[username]/edit/page.tsx's ~10 useState declarations for form
fields/errors into a single useForm<EditProfileFormValues>() with a
zod schema mirroring the exact validation rules from the removed
validate() function (same messages, same regexes). reset() populates
the form once the profile loads (async ownership check); register()
replaces the manual setField()/onChange wiring; handleSubmit(onSubmit)
replaces the manual validate-then-submit flow.

Per the issue, this starts with edit/page.tsx as the smaller scope;
create/page.tsx (~15 useState, 3-step form) is a follow-up. The
accepted-assets list (dynamic add/remove, not a simple field) is left
as local state — not a good fit for react-hook-form's field model.

Author: Temi-suwa18

frontend/src/app/profile/[username]/edit/page.tsx

@@ -3,6 +3,9 @@
 import { useEffect, useState } from "react";
 import { useParams, useRouter } from "next/navigation";
 import Link from "next/link";
+import { useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { z } from "zod";
 import { getAddress } from "@stellar/freighter-api";
 import { AppShell } from "@/components/app-shell";
 import { API_BASE_URL } from "@/lib/config";
@@ -23,38 +26,44 @@ type ProfileData = {
   acceptedAssets: Array<{ code: string; issuer?: string | null }>;
 };
 
-type FieldErrors = {
-  displayName?: string;
-  bio?: string;
-  websiteUrl?: string;
-  twitterHandle?: string;
-  githubHandle?: string;
-  email?: string;
+const editProfileSchema = z.object({
+  displayName: z
+    .string()
+    .trim()
+    .min(1, "Display name is required.")
+    .max(64, "Max 64 characters."),
+  bio: z.string().max(280, "Max 280 characters."),
+  websiteUrl: z
+    .string()
+    .refine((v) => v === "" || /^https:\/\/.+/.test(v), "Must start with https://"),
+  twitterHandle: z
+    .string()
+    .refine(
+      (v) => v === "" || /^[a-zA-Z0-9_]{1,15}$/.test(v),
+      "Max 15 chars, alphanumeric and underscores only.",
+    ),
+  githubHandle: z
+    .string()
+    .refine(
+      (v) => v === "" || /^[a-zA-Z0-9-]{1,39}$/.test(v),
+      "Max 39 chars, alphanumeric and hyphens only.",
+    ),
+  email: z
+    .string()
+    .refine((v) => v === "" || /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(v), "Enter a valid email address."),
+});
+
+type EditProfileFormValues = z.infer<typeof editProfileSchema>;
+
+const EMPTY_FORM: EditProfileFormValues = {
+  displayName: "",
+  bio: "",
+  websiteUrl: "",
+  twitterHandle: "",
+  githubHandle: "",
+  email: "",
 };
 
-function validate(form: {
-  displayName: string;
-  bio: string;
-  websiteUrl: string;
-  twitterHandle: string;
-  githubHandle: string;
-  email: string;
-}): FieldErrors {
-  const errors: FieldErrors = {};
-  if (!form.displayName.trim()) errors.displayName = "Display name is required.";
-  else if (form.displayName.length > 64) errors.displayName = "Max 64 characters.";
-  if (form.bio.length > 280) errors.bio = "Max 280 characters.";
-  if (form.websiteUrl && !/^https:\/\/.+/.test(form.websiteUrl))
-    errors.websiteUrl = "Must start with https://";
-  if (form.twitterHandle && !/^[a-zA-Z0-9_]{1,15}$/.test(form.twitterHandle))
-    errors.twitterHandle = "Max 15 chars, alphanumeric and underscores only.";
-  if (form.githubHandle && !/^[a-zA-Z0-9-]{1,39}$/.test(form.githubHandle))
-    errors.githubHandle = "Max 39 chars, alphanumeric and hyphens only.";
-  if (form.email && !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(form.email))
-    errors.email = "Enter a valid email address.";
-  return errors;
-}
-
 export default function EditProfilePage() {
   const { username } = useParams<{ username: string }>();
   const router = useRouter();
@@ -65,16 +74,19 @@ export default function EditProfilePage() {
   const [submitting, setSubmitting] = useState(false);
   const [authError, setAuthError] = useState<string | null>(null);
   const [walletPrompt, setWalletPrompt] = useState<"locked" | "not-owner" | null>(null);
-  const [fieldErrors, setFieldErrors] = useState<FieldErrors>({});
-
-  const [form, setForm] = useState({
-    displayName: "",
-    bio: "",
-    websiteUrl: "",
-    twitterHandle: "",
-    githubHandle: "",
-    email: "",
+
+  const {
+    register,
+    handleSubmit,
+    reset,
+    watch,
+    formState: { errors: fieldErrors },
+  } = useForm<EditProfileFormValues>({
+    resolver: zodResolver(editProfileSchema),
+    mode: "onChange",
+    defaultValues: EMPTY_FORM,
   });
+  const bioValue = watch("bio");
 
   const [assets, setAssets] = useState<Asset[]>([]);
   const [newAssetCode, setNewAssetCode] = useState("");
@@ -108,7 +120,7 @@ export default function EditProfilePage() {
         }
 
         setOwnershipChecked(true);
-        setForm({
+        reset({
           displayName: profile.displayName ?? "",
           bio: profile.bio ?? "",
           websiteUrl: profile.websiteUrl ?? "",
@@ -129,14 +141,7 @@ export default function EditProfilePage() {
       }
     }
     init();
-  }, [username, router, ownershipChecked]);
-
-  function setField(field: keyof typeof form) {
-    return (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
-      setForm((prev) => ({ ...prev, [field]: e.target.value }));
-      setFieldErrors((prev) => ({ ...prev, [field]: undefined }));
-    };
-  }
+  }, [username, router, ownershipChecked, reset]);
 
   function addAsset() {
     const code = newAssetCode.trim().toUpperCase();
@@ -153,23 +158,16 @@ export default function EditProfilePage() {
     setAssets((prev) => prev.filter((a) => a.code !== code));
   }
 
-  async function handleSubmit(e: React.FormEvent) {
-    e.preventDefault();
-    const errors = validate(form);
-    if (Object.keys(errors).length > 0) {
-      setFieldErrors(errors);
-      return;
-    }
-
+  async function onSubmit(values: EditProfileFormValues) {
     setSubmitting(true);
     try {
       const profilePayload: Record<string, string | null> = {
-        displayName: form.displayName,
-        bio: form.bio || "",
-        websiteUrl: form.websiteUrl || null,
-        twitterHandle: form.twitterHandle || null,
-        githubHandle: form.githubHandle || null,
-        email: form.email || null,
+        displayName: values.displayName,
+        bio: values.bio || "",
+        websiteUrl: values.websiteUrl || null,
+        twitterHandle: values.twitterHandle || null,
+        githubHandle: values.githubHandle || null,
+        email: values.email || null,
       };
 
       const [profileRes, assetsRes] = await Promise.all([
@@ -291,7 +289,7 @@ export default function EditProfilePage() {
           </Link>
         </div>
 
-        <form onSubmit={handleSubmit} noValidate className="space-y-8">
+        <form onSubmit={handleSubmit(onSubmit)} noValidate className="space-y-8">
           {/* Profile fields */}
           <section className="rounded-3xl border border-white/10 bg-white/[0.02] p-6 space-y-5">
             <h2 className="text-xs font-semibold uppercase tracking-widest text-steel">
@@ -301,69 +299,63 @@ export default function EditProfilePage() {
             <Field
               label="Display Name"
               required
-              error={fieldErrors.displayName}
+              error={fieldErrors.displayName?.message}
             >
               <input
                 type="text"
-                value={form.displayName}
-                onChange={setField("displayName")}
+                {...register("displayName")}
                 maxLength={64}
                 className={inputCls(!!fieldErrors.displayName)}
                 placeholder="Your name"
               />
             </Field>
 
-            <Field label="Bio" error={fieldErrors.bio}>
+            <Field label="Bio" error={fieldErrors.bio?.message}>
               <textarea
-                value={form.bio}
-                onChange={setField("bio")}
+                {...register("bio")}
                 maxLength={280}
                 rows={3}
                 className={inputCls(!!fieldErrors.bio)}
                 placeholder="Tell supporters about yourself (max 280 chars)"
               />
               <p className="mt-1 text-right text-[10px] text-steel">
-                {form.bio.length}/280
+                {bioValue.length}/280
               </p>
             </Field>
 
-            <Field label="Website URL" error={fieldErrors.websiteUrl}>
+            <Field label="Website URL" error={fieldErrors.websiteUrl?.message}>
               <input
                 type="url"
-                value={form.websiteUrl}
-                onChange={setField("websiteUrl")}
+                {...register("websiteUrl")}
                 className={inputCls(!!fieldErrors.websiteUrl)}
                 placeholder="https://yoursite.com"
               />
             </Field>
 
-            <Field label="Twitter Handle" error={fieldErrors.twitterHandle}>
+            <Field label="Twitter Handle" error={fieldErrors.twitterHandle?.message}>
               <input
                 type="text"
-                value={form.twitterHandle}
-                onChange={setField("twitterHandle")}
+                {...register("twitterHandle")}
                 maxLength={15}
                 className={inputCls(!!fieldErrors.twitterHandle)}
                 placeholder="username (no @)"
               />
             </Field>
 
-            <Field label="GitHub Handle" error={fieldErrors.githubHandle}>
+            <Field label="GitHub Handle" error={fieldErrors.githubHandle?.message}>
               <input
                 type="text"
-                value={form.githubHandle}
-                onChange={setField("githubHandle")}
+                {...register("githubHandle")}
                 maxLength={39}
                 className={inputCls(!!fieldErrors.githubHandle)}
                 placeholder="username"
               />
             </Field>
 
-            <Field label="Email" error={fieldErrors.email}>
+            <Field label="Email" error={fieldErrors.email?.message}>
               <input
                 type="email"
-                value={form.email}
-                onChange={setField("email")}
+                {...register("email")}
                 className={inputCls(!!fieldErrors.email)}
                 placeholder="you@example.com"
               />