Merge branch 'main' into update/com-grants-feedback

BuidlGuidl · Apr 18, 2024 · 1fa06c9 · 1fa06c9
2 parents d0565c8 + b26c43b
commit 1fa06c9
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 8 deletions.
diff --git a/packages/nextjs/app/api/grants/new/route.ts b/packages/nextjs/app/api/grants/new/route.ts
@@ -19,14 +19,14 @@ export async function POST(req: Request) {
   try {
     const { title, description, signature, signer } = (await req.json()) as ReqBody;
 
-    if (!title || !description || !signature || !signer) {
-      return NextResponse.json({ error: "Invalid form details submited" }, { status: 400 });
+    if (!title || !description || !signature || !signer || description.length > 750 || title.length > 75) {
+      return NextResponse.json({ error: "Invalid form details submitted" }, { status: 400 });
     }
 
     // Verif if the builder is present
     const builder = await findUserByAddress(signer);
     if (!builder.exists) {
-      return NextResponse.json({ error: "Only buidlguild builders can submit for grants" }, { status: 401 });
+      return NextResponse.json({ error: "Only Buidlguidl builders can submit for grants" }, { status: 401 });
     }
 
     const recoveredAddress = await recoverTypedDataAddress({

diff --git a/packages/nextjs/app/apply/_component/Form.tsx b/packages/nextjs/app/apply/_component/Form.tsx
@@ -1,5 +1,6 @@
 "use client";
 
+import React, { useState } from "react";
 import { useRouter } from "next/navigation";
 import SubmitButton from "./SubmitButton";
 import useSWRMutation from "swr/mutation";
@@ -16,8 +17,11 @@ type ReqBody = {
   signer?: string;
 };
 
+const MAX_DESCRIPTION_LENGTH = 750;
+
 const Form = () => {
   const { address: connectedAddress } = useAccount();
+  const [descriptionLength, setDescriptionLength] = useState(0);
   const { signTypedDataAsync } = useSignTypedData();
   const router = useRouter();
   const { trigger: postNewGrant } = useSWRMutation("/api/grants/new", postMutationFetcher<ReqBody>);
@@ -60,30 +64,36 @@ const Form = () => {
   };
 
   return (
-    <div className="card card-compact rounded-xl w-96 bg-secondary shadow-lg mb-12">
+    <div className="card card-compact rounded-xl max-w-[95%] w-[500px] bg-secondary shadow-lg mb-12">
       <form action={clientFormAction} className="card-body space-y-3">
         <h2 className="card-title self-center text-3xl !mb-0">Submit Proposal</h2>
         <div className="space-y-2">
           <p className="m-0 text-xl ml-2">Title</p>
           <div className="flex border-2 border-base-300 bg-base-200 rounded-xl text-accent">
             <input
               className="input input-ghost focus-within:border-transparent focus:outline-none focus:bg-transparent focus:text-gray-400 h-[2.2rem] min-h-[2.2rem] px-4 border w-full font-medium placeholder:text-accent/50 text-gray-400"
-              placeholder="title"
+              placeholder="Proposal title"
               name="title"
               autoComplete="off"
               type="text"
+              maxLength={75}
             />
           </div>
         </div>
         <div className="space-y-2">
           <p className="m-0 text-xl ml-2">Description</p>
-          <div className="flex border-2 border-base-300 bg-base-200 rounded-xl text-accent">
+          <div className="flex flex-col border-2 border-base-300 bg-base-200 rounded-xl text-accent">
             <textarea
-              className="input input-ghost focus-within:border-transparent focus:outline-none focus:bg-transparent focus:text-gray-400 px-4 pt-2 border w-full font-medium placeholder:text-accent/50 text-gray-400 h-28 rounded-none"
-              placeholder="description"
+              className="input input-ghost focus-within:border-transparent focus:outline-none focus:bg-transparent focus:text-gray-400 px-4 pt-2 border w-full font-medium placeholder:text-accent/50 text-gray-400 h-28 md:h-52 rounded-none"
+              placeholder="Proposal description"
               name="description"
               autoComplete="off"
+              maxLength={MAX_DESCRIPTION_LENGTH}
+              onChange={e => setDescriptionLength(e.target.value.length)}
             />
+            <p className="my-1">
+              {descriptionLength} / {MAX_DESCRIPTION_LENGTH}
+            </p>
           </div>
         </div>
         <SubmitButton />