feat(dashboard): import a proposal from JSON when creating one

.changeset/import-proposal-json.md

@@ -0,0 +1,8 @@
+---
+"@anticapture/dashboard": minor
+---
+
+Add an Import JSON button to the create proposal form. It opens a modal (drawer
+on mobile) with a textarea for pasting a proposal document plus a description of
+the expected format, and fills the title, discussion URL, description, and
+actions from what the document provides.

apps/dashboard/features/create-proposal/components/ProposalCreationForm.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { zodResolver } from "@hookform/resolvers/zod";
-import { ChevronLeft } from "lucide-react";
+import { ChevronLeft, FileJson } from "lucide-react";
 import { useEffect, useMemo, useRef, useState } from "react";
 import { FormProvider, useForm } from "react-hook-form";
 import Link from "next/link";
@@ -19,6 +19,7 @@ import daoConfig from "@/shared/dao-config";
 import type { DaoIdEnum } from "@/shared/types/daos";
 import { formatNumberUserReadable } from "@/shared/utils/formatNumberUserReadable";
 import { getWhitelabelBasePath } from "@/shared/utils/whitelabel";
+import { Button } from "@/shared/components/design-system/buttons/button/Button";
 import { FormLabel } from "@/shared/components/design-system/form/fields/form-label/FormLabel";
 import { Input } from "@/shared/components/design-system/form/fields/input/Input";
 import { useLogin } from "@/shared/services/auth/LoginProvider";
@@ -53,6 +54,8 @@ import { PublishModal } from "@/features/create-proposal/components/modals/Publi
 import { ProposalSubmittedModal } from "@/features/create-proposal/components/modals/ProposalSubmittedModal";
 import { SubmissionFailedModal } from "@/features/create-proposal/components/modals/SubmissionFailedModal";
 import { InsufficientVPModal } from "@/features/create-proposal/components/modals/InsufficientVPModal";
+import { ImportJsonModal } from "@/features/create-proposal/components/modals/ImportJsonModal";
+import type { ParsedProposalJson } from "@/features/create-proposal/utils/parseProposalJson";
 import type {
   CustomAction,
   ERC20TransferAction,
@@ -213,6 +216,7 @@ export const ProposalCreationForm = ({
   const [submittedOpen, setSubmittedOpen] = useState(false);
   const [failedOpen, setFailedOpen] = useState(false);
   const [insufficientOpen, setInsufficientOpen] = useState(false);
+  const [importOpen, setImportOpen] = useState(false);
   const [isSavingDraft, setIsSavingDraft] = useState(false);
 
   // Email/Google sign-in leaves the page, so a dirty form would be lost on
@@ -471,6 +475,27 @@ export const ProposalCreationForm = ({
     }
   };
 
+  // Field-by-field setValue rather than form.reset: the imported content is
+  // unsaved, so the dirty flag (and with it NavigationGuard) has to stay armed.
+  const handleImportJson = (imported: ParsedProposalJson) => {
+    const options = { shouldDirty: true, shouldValidate: true } as const;
+    if (imported.title !== undefined) {
+      form.setValue("title", imported.title, options);
+    }
+    if (imported.discussionUrl !== undefined) {
+      form.setValue("discussionUrl", imported.discussionUrl, options);
+    }
+    if (imported.body !== undefined) {
+      form.setValue("body", imported.body, options);
+      // MDXEditor only reads `markdown` on mount, so remount it on the new body.
+      setBodyVersion((v) => v + 1);
+    }
+    if (imported.actions !== undefined) {
+      form.setValue("actions", imported.actions, options);
+    }
+    showCustomToast("Proposal fields imported", "success");
+  };
+
   const openEditForAction = (index: number) => {
     const action = values.actions[index];
     if (!action) return;
@@ -659,6 +684,21 @@ export const ProposalCreationForm = ({
               />
             )}
 
+            <div className="flex items-center justify-between gap-3">
+              <p className="text-secondary text-xs">
+                Already have this proposal as JSON? Import it to fill the form.
+              </p>
+              <Button
+                variant="outline"
+                size="sm"
+                onClick={() => setImportOpen(true)}
+                className="shrink-0"
+              >
+                <FileJson className="size-3.5" />
+                Import JSON
+              </Button>
+            </div>
+
             <div className="flex w-full flex-col gap-1">
               <FormLabel isRequired>Title</FormLabel>
               <Input
@@ -731,6 +771,11 @@ export const ProposalCreationForm = ({
         </>
       )}
 
+      <ImportJsonModal
+        open={importOpen}
+        onOpenChange={setImportOpen}
+        onImport={handleImportJson}
+      />
       <AddTransferModal
         open={transferOpen}
         onOpenChange={(o) => {

apps/dashboard/features/create-proposal/components/modals/ImportJsonModal.tsx

@@ -0,0 +1,142 @@
+"use client";
+
+import { useEffect, useState } from "react";
+
+import { FormLabel } from "@/shared/components/design-system/form/fields/form-label/FormLabel";
+import { Textarea } from "@/shared/components/design-system/form/fields/textarea/Textarea";
+import { Modal } from "@/shared/components/design-system/modal/Modal";
+import { PROPOSAL_JSON_PLACEHOLDER } from "@/features/create-proposal/constants";
+import {
+  parseProposalJson,
+  type ParsedProposalJson,
+} from "@/features/create-proposal/utils/parseProposalJson";
+
+interface ImportJsonModalProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  onImport: (values: ParsedProposalJson) => void;
+}
+
+const Code = ({ children }: { children: React.ReactNode }) => (
+  <code className="text-primary font-mono">{children}</code>
+);
+
+// Keep the prose short: a line break right after a <code> swallows the space
+// that follows it, so each entry has to fit on one line.
+const Field = ({
+  name,
+  children,
+}: {
+  name: string;
+  children: React.ReactNode;
+}) => (
+  <li>
+    <Code>{name}</Code> {children}
+  </li>
+);
+
+export const ImportJsonModal = ({
+  open,
+  onOpenChange,
+  onImport,
+}: ImportJsonModalProps) => {
+  const [text, setText] = useState("");
+  const [error, setError] = useState<string | null>(null);
+
+  // Start from a clean sheet on every open: a previous failed paste hanging
+  // around next to a stale error reads as if the import already ran.
+  useEffect(() => {
+    if (!open) return;
+    setText("");
+    setError(null);
+  }, [open]);
+
+  const close = () => {
+    setText("");
+    setError(null);
+    onOpenChange(false);
+  };
+
+  const handleConfirm = () => {
+    const result = parseProposalJson(text);
+    if (!result.ok) {
+      setError(result.error);
+      return;
+    }
+    onImport(result.value);
+    close();
+  };
+
+  return (
+    <Modal
+      open={open}
+      onOpenChange={(o) => {
+        if (!o) {
+          setText("");
+          setError(null);
+        }
+        onOpenChange(o);
+      }}
+      title="Import JSON"
+      description="Paste a proposal document to fill the form fields."
+      cancelLabel="Cancel"
+      confirmLabel="Apply"
+      onCancel={close}
+      onConfirm={handleConfirm}
+      isConfirmDisabled={text.trim().length === 0}
+    >
+      <div className="flex flex-col gap-4">
+        <div className="flex flex-col gap-1.5">
+          <FormLabel isRequired>Proposal JSON</FormLabel>
+          <Textarea
+            value={text}
+            onChange={(e) => {
+              setText(e.target.value);
+              setError(null);
+            }}
+            placeholder={PROPOSAL_JSON_PLACEHOLDER}
+            // Capped so a long paste (or a drag on the native resize grip)
+            // can't push the footer off screen.
+            className="max-h-64 min-h-44 resize-y overflow-y-auto font-mono text-xs"
+            error={Boolean(error)}
+            spellCheck={false}
+            aria-label="Proposal JSON"
+          />
+          {error ? (
+            <span className="text-error text-xs">{error}</span>
+          ) : (
+            <span className="text-secondary text-xs">
+              Every field is optional, and only the ones present are replaced.
+              Recipients take an address or ENS, and amounts are human-readable
+              rather than wei.
+            </span>
+          )}
+        </div>
+
+        <ul className="text-secondary flex flex-col gap-1 text-xs">
+          <Field name="title">the proposal title.</Field>
+          <Field name="discussionUrl">
+            an http(s) link to the forum thread.
+          </Field>
+          <Field name="body">the description, in markdown.</Field>
+          <Field name="actions">
+            one entry per action, keyed by <Code>type</Code>:
+            <ul className="mt-1 flex flex-col gap-1 pl-4">
+              <Field name="eth-transfer">
+                <Code>recipient</Code> and <Code>amount</Code> in ETH.
+              </Field>
+              <Field name="erc20-transfer">
+                also <Code>tokenAddress</Code> and <Code>decimals</Code>.
+              </Field>
+              <Field name="custom">
+                <Code>contractAddress</Code>, then either{" "}
+                <Code>functionName</Code> with <Code>abi</Code> and{" "}
+                <Code>args</Code>, or raw <Code>calldata</Code>.
+              </Field>
+            </ul>
+          </Field>
+        </ul>
+      </div>
+    </Modal>
+  );
+};

apps/dashboard/features/create-proposal/constants.ts

@@ -38,6 +38,17 @@ export const SUGGESTED_TRANSFER_TOKENS: Partial<
   ],
 };
 
+/** Format hint rendered as the Import JSON textarea placeholder. */
+export const PROPOSAL_JSON_PLACEHOLDER = `{
+  "title": "Proposal title",
+  "discussionUrl": "https://discuss…",
+  "body": "## Synopsis\\n\\nMarkdown description.",
+  "actions": [
+    { "type": "eth-transfer", "recipient": "0x…", "amount": "1.5" },
+    { "type": "custom", "contractAddress": "0x…", "calldata": "0x…" }
+  ]
+}`;
+
 export const BODY_PLACEHOLDER = `## Synopsis
 
 State what the proposal does in one sentence.