fix(propose): move ProposalDetailsHeader out of nested FormProvider + resolver typing

ProposalDetailsHeader was rendering inside TemplateDetailsForm's nested
FormProvider, so its useFormContext resolved to the template form (no
title/bannerImage fields) and silently broke hydration. Moved the header
above the nested provider so it reads the parent ProposalFormValues.

Also added a runtime-safe cast on zodResolver input so the slug-indexed
template validator satisfies the form's typed resolver. Reformatted
touched files.

Author: r4topunk

src/components/proposals/ProposalDetailsForm.tsx

@@ -10,11 +10,8 @@ import { Label } from "@/components/ui/label";
 import { Textarea } from "@/components/ui/textarea";
 import { getTemplateSchema } from "@/lib/proposal-template-schemas";
 import { ProposalDetailsHeader } from "./ProposalDetailsHeader";
-import {
-  TemplateDetailsForm,
-  type TemplateDetailsFormHandle,
-} from "./TemplateDetailsForm";
 import type { ProposalFormValues } from "./schema";
+import { TemplateDetailsForm, type TemplateDetailsFormHandle } from "./TemplateDetailsForm";
 
 export interface ProposalDetailsFormHandle {
   /** Validate the current details step. Branches on whether a template is active. */
@@ -25,42 +22,41 @@ export interface ProposalDetailsFormProps {
   templateSlug?: string | null;
 }
 
-export const ProposalDetailsForm = forwardRef<
-  ProposalDetailsFormHandle,
-  ProposalDetailsFormProps
->(function ProposalDetailsForm({ templateSlug }, ref) {
-  const { trigger } = useFormContext<ProposalFormValues>();
-  const templateHandleRef = useRef<TemplateDetailsFormHandle | null>(null);
-  const hasTemplate = Boolean(templateSlug && getTemplateSchema(templateSlug));
+export const ProposalDetailsForm = forwardRef<ProposalDetailsFormHandle, ProposalDetailsFormProps>(
+  function ProposalDetailsForm({ templateSlug }, ref) {
+    const { trigger } = useFormContext<ProposalFormValues>();
+    const templateHandleRef = useRef<TemplateDetailsFormHandle | null>(null);
+    const hasTemplate = Boolean(templateSlug && getTemplateSchema(templateSlug));
 
-  useImperativeHandle(
-    ref,
-    () => ({
-      validate: async () => {
-        if (hasTemplate) {
-          const templateOk = await templateHandleRef.current?.validate();
-          if (!templateOk) return false;
-          return trigger(["title"]);
-        }
-        return trigger(["title", "description"]);
-      },
-    }),
-    [hasTemplate, trigger],
-  );
-
-  if (hasTemplate && templateSlug) {
-    return (
-      <TemplateDetailsForm
-        ref={(handle) => {
-          templateHandleRef.current = handle;
-        }}
-        slug={templateSlug}
-      />
+    useImperativeHandle(
+      ref,
+      () => ({
+        validate: async () => {
+          if (hasTemplate) {
+            const templateOk = await templateHandleRef.current?.validate();
+            if (!templateOk) return false;
+            return trigger(["title"]);
+          }
+          return trigger(["title", "description"]);
+        },
+      }),
+      [hasTemplate, trigger],
     );
-  }
 
-  return <MarkdownDetailsForm />;
-});
+    if (hasTemplate && templateSlug) {
+      return (
+        <TemplateDetailsForm
+          ref={(handle) => {
+            templateHandleRef.current = handle;
+          }}
+          slug={templateSlug}
+        />
+      );
+    }
+
+    return <MarkdownDetailsForm />;
+  },
+);
 
 function MarkdownDetailsForm() {
   const {

src/components/proposals/ProposalWizard.tsx

@@ -1,23 +1,23 @@
 "use client";
-/* eslint-disable react-hooks/incompatible-library -- react-hook-form watch()/useFormContext pattern is known-incompatible with React Compiler */
 
+/* eslint-disable react-hooks/incompatible-library -- react-hook-form watch()/useFormContext pattern is known-incompatible with React Compiler */
 import { useEffect, useRef, useState } from "react";
 import { useSearchParams } from "next/navigation";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { Loader2 } from "lucide-react";
 import { FormProvider, useForm } from "react-hook-form";
-import { useUserAddress } from "@/hooks/use-user-address";
 import { TransactionBuilder } from "@/components/proposals/builder/TransactionBuilder";
 import {
   ProposalDetailsForm,
   type ProposalDetailsFormHandle,
 } from "@/components/proposals/ProposalDetailsForm";
+import { ProposalEligibilityProvider } from "@/components/proposals/ProposalEligibilityContext";
 import { ProposalGatingBanner } from "@/components/proposals/ProposalGatingBanner";
 import { ProposalPreview } from "@/components/proposals/ProposalPreview";
 import { Button } from "@/components/ui/button";
 import { Card, CardContent } from "@/components/ui/card";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
-import { ProposalEligibilityProvider } from "@/components/proposals/ProposalEligibilityContext";
+import { useUserAddress } from "@/hooks/use-user-address";
 import { useProposalEligibility } from "@/hooks/useProposalEligibility";
 import { CHAIN, DAO_ADDRESSES } from "@/lib/config";
 import { getProposalTemplate } from "@/lib/proposal-templates";
@@ -70,9 +70,7 @@ export function ProposalWizard() {
 
   const handleNextToTransactions = async () => {
     const handle = detailsFormRef.current;
-    const isValid = handle
-      ? await handle.validate()
-      : await trigger(["title", "description"]);
+    const isValid = handle ? await handle.validate() : await trigger(["title", "description"]);
     if (isValid) {
       setCurrentTab("transactions");
     }

src/components/proposals/TemplateDetailsForm.tsx

@@ -2,7 +2,7 @@
 
 import { forwardRef, useEffect, useImperativeHandle } from "react";
 import { zodResolver } from "@hookform/resolvers/zod";
-import { FormProvider, useForm, useFormContext, useWatch } from "react-hook-form";
+import { FormProvider, useForm, useFormContext, useWatch, type Resolver } from "react-hook-form";
 import { Label } from "@/components/ui/label";
 import { Textarea } from "@/components/ui/textarea";
 import {
@@ -25,50 +25,50 @@ export interface TemplateDetailsFormProps {
   slug: string;
 }
 
-export const TemplateDetailsForm = forwardRef<
-  TemplateDetailsFormHandle,
-  TemplateDetailsFormProps
->(function TemplateDetailsForm({ slug }, ref) {
-  const schema = getTemplateSchema(slug);
-  const parent = useFormContext<ProposalFormValues>();
+export const TemplateDetailsForm = forwardRef<TemplateDetailsFormHandle, TemplateDetailsFormProps>(
+  function TemplateDetailsForm({ slug }, ref) {
+    const schema = getTemplateSchema(slug);
+    const parent = useFormContext<ProposalFormValues>();
 
-  const initialValues = (parent.getValues("templateFields") as TemplateValues | undefined) ?? {};
-  const templateForm = useForm<TemplateValues>({
-    resolver: zodResolver(buildTemplateValidator(slug)),
-    defaultValues: buildDefaults(slug, initialValues),
-    mode: "onChange",
-  });
+    const initialValues = (parent.getValues("templateFields") as TemplateValues | undefined) ?? {};
+    // zodResolver's type expects a schema with specific input generics; our builder
+    // is slug-indexed so we bridge via a runtime-safe cast.
+    const validator = buildTemplateValidator(slug) as unknown as Parameters<typeof zodResolver>[0];
+    const templateForm = useForm<TemplateValues>({
+      resolver: zodResolver(validator) as unknown as Resolver<TemplateValues>,
+      defaultValues: buildDefaults(slug, initialValues),
+      mode: "onChange",
+    });
 
-  const watchedValues = useWatch({ control: templateForm.control }) as TemplateValues;
+    const watchedValues = useWatch({ control: templateForm.control }) as TemplateValues;
 
-  useEffect(() => {
-    if (!schema) return;
-    parent.setValue("templateFields", watchedValues, { shouldDirty: true });
-    const compiled = compileTemplate(slug, watchedValues);
-    parent.setValue("description", compiled, { shouldDirty: true, shouldValidate: false });
-  }, [watchedValues, slug, schema, parent]);
+    useEffect(() => {
+      if (!schema) return;
+      parent.setValue("templateFields", watchedValues, { shouldDirty: true });
+      const compiled = compileTemplate(slug, watchedValues);
+      parent.setValue("description", compiled, { shouldDirty: true, shouldValidate: false });
+    }, [watchedValues, slug, schema, parent]);
 
-  useImperativeHandle(
-    ref,
-    () => ({
-      validate: async () => {
-        const ok = await templateForm.trigger();
-        if (!ok) {
-          const firstError = Object.keys(templateForm.formState.errors)[0];
-          if (firstError) {
-            templateForm.setFocus(firstError as keyof TemplateValues);
+    useImperativeHandle(
+      ref,
+      () => ({
+        validate: async () => {
+          const ok = await templateForm.trigger();
+          if (!ok) {
+            const firstError = Object.keys(templateForm.formState.errors)[0];
+            if (firstError) {
+              templateForm.setFocus(firstError as keyof TemplateValues);
+            }
           }
-        }
-        return ok;
-      },
-    }),
-    [templateForm],
-  );
+          return ok;
+        },
+      }),
+      [templateForm],
+    );
 
-  if (!schema) return null;
+    if (!schema) return null;
 
-  return (
-    <FormProvider {...templateForm}>
+    return (
       <div className="space-y-6">
         <div>
           <h2 className="text-2xl font-bold mb-1">{schema.title}</h2>
@@ -77,61 +77,64 @@ export const TemplateDetailsForm = forwardRef<
           </p>
         </div>
 
+        {/* Header uses the parent form (title + banner live on ProposalFormValues). */}
         <ProposalDetailsHeader />
 
-        <div className="space-y-5">
-          {schema.fields.map((field) => {
-            const error = templateForm.formState.errors[field.id] as
-              | { message?: string }
-              | undefined;
-            return (
-              <div key={field.id}>
-                <Label htmlFor={field.id}>
-                  {field.label}
-                  {field.required ? " *" : ""}
-                </Label>
-                <p className="text-xs text-muted-foreground mt-1 mb-2">{field.helper}</p>
-                {field.type === "textarea" ? (
-                  <Textarea
-                    id={field.id}
-                    rows={field.rows ?? 4}
-                    className="resize-y"
-                    {...templateForm.register(field.id)}
-                  />
-                ) : (
-                  <BudgetRepeater
-                    name={field.id}
-                    topLevelError={error?.message}
-                    getRowError={(index) => {
-                      const arrErrors = templateForm.formState.errors[field.id] as
-                        | Record<
-                            number,
-                            {
-                              label?: { message?: string };
-                              amount?: { message?: string };
-                            }
-                          >
-                        | undefined;
-                      const rowErr = arrErrors?.[index];
-                      if (!rowErr) return undefined;
-                      return {
-                        label: rowErr.label?.message,
-                        amount: rowErr.amount?.message,
-                      };
-                    }}
-                  />
-                )}
-                {field.type === "textarea" && error?.message ? (
-                  <p className="text-xs text-red-500 mt-1">{error.message}</p>
-                ) : null}
-              </div>
-            );
-          })}
-        </div>
+        <FormProvider {...templateForm}>
+          <div className="space-y-5">
+            {schema.fields.map((field) => {
+              const error = templateForm.formState.errors[field.id] as
+                | { message?: string }
+                | undefined;
+              return (
+                <div key={field.id}>
+                  <Label htmlFor={field.id}>
+                    {field.label}
+                    {field.required ? " *" : ""}
+                  </Label>
+                  <p className="text-xs text-muted-foreground mt-1 mb-2">{field.helper}</p>
+                  {field.type === "textarea" ? (
+                    <Textarea
+                      id={field.id}
+                      rows={field.rows ?? 4}
+                      className="resize-y"
+                      {...templateForm.register(field.id)}
+                    />
+                  ) : (
+                    <BudgetRepeater
+                      name={field.id}
+                      topLevelError={error?.message}
+                      getRowError={(index) => {
+                        const arrErrors = templateForm.formState.errors[field.id] as
+                          | Record<
+                              number,
+                              {
+                                label?: { message?: string };
+                                amount?: { message?: string };
+                              }
+                            >
+                          | undefined;
+                        const rowErr = arrErrors?.[index];
+                        if (!rowErr) return undefined;
+                        return {
+                          label: rowErr.label?.message,
+                          amount: rowErr.amount?.message,
+                        };
+                      }}
+                    />
+                  )}
+                  {field.type === "textarea" && error?.message ? (
+                    <p className="text-xs text-red-500 mt-1">{error.message}</p>
+                  ) : null}
+                </div>
+              );
+            })}
+          </div>
+        </FormProvider>
       </div>
-    </FormProvider>
-  );
-});
+    );
+  },
+);
 
 function buildDefaults(slug: string, existing: TemplateValues): TemplateValues {
   const schema = getTemplateSchema(slug);

src/components/proposals/schema.ts

@@ -7,10 +7,10 @@ const addressSchema = z.string().refine((val) => isAddress(val), {
 });
 
 // Optional address that can be empty
-const optionalAddressSchema = z.string().optional().refine(
-  (val) => !val || isAddress(val),
-  { message: "Invalid Ethereum address" }
-);
+const optionalAddressSchema = z
+  .string()
+  .optional()
+  .refine((val) => !val || isAddress(val), { message: "Invalid Ethereum address" });
 
 // Reusable numeric string validation
 const numericString = <T extends z.ZodType<string | undefined>>(schema: T) => {
@@ -140,10 +140,14 @@ const droposalTransactionSchema = baseTransactionSchema.extend({
   coverType: z.string().optional(),
   // Revenue split configuration (optional)
   useSplit: z.boolean().optional(),
-  splitRecipients: z.array(z.object({
-    address: z.string(),
-    percentAllocation: z.number(),
-  })).optional(),
+  splitRecipients: z
+    .array(
+      z.object({
+        address: z.string(),
+        percentAllocation: z.number(),
+      }),
+    )
+    .optional(),
   splitDistributorFee: z.number().optional(),
   createdSplitAddress: z.string().optional(), // Stores the split address after creation
 });
@@ -161,9 +165,7 @@ const buyCoinTransactionSchema = baseTransactionSchema.extend({
   type: z.literal("buy-coin"),
   coinAddress: addressSchema,
   ethAmount: positiveNumericString(z.string().min(1, "ETH amount is required")),
-  slippage: nonNegativeNumericString(
-    z.string().min(1, "Slippage is required"),
-  ).refine(
+  slippage: nonNegativeNumericString(z.string().min(1, "Slippage is required")).refine(
     (val) => {
       if (!val) return true;
       return parseFloat(val) <= 100;

src/lib/proposal-template-schemas.test.ts

@@ -90,7 +90,13 @@ describe("TEMPLATE_SCHEMAS", () => {
   });
 
   it("funding templates have a budget field (droposal uses revenue split instead)", () => {
-    const withBudget = ["athlete-sponsorship", "event-activation", "physical-installation", "content-media", "development"] as const;
+    const withBudget = [
+      "athlete-sponsorship",
+      "event-activation",
+      "physical-installation",
+      "content-media",
+      "development",
+    ] as const;
     for (const slug of withBudget) {
       const schema = TEMPLATE_SCHEMAS[slug];
       expect(schema.fields.some((f) => f.type === "budget")).toBe(true);