Add new fields to submission and apply design to submit page (#42)

--------- Co-authored-by: Pablo Alayeto <[email protected]>
BuidlGuidl · Aug 18, 2024 · ad1608c · ad1608c
1 parent aa6d2ee
commit ad1608c
Show file tree

Hide file tree

Showing 8 changed files with 142 additions and 30 deletions.
diff --git a/packages/nextjs/app/admin/_components/SubmissionCard.tsx b/packages/nextjs/app/admin/_components/SubmissionCard.tsx
@@ -130,7 +130,17 @@ export const SubmissionCard = ({ submission }: { submission: Submission }) => {
             </a>
           )}
           <p>{submission.description}</p>
+          {submission.linkToVideo && (
+            <p>
+              Video:
+              <a href={submission.linkToVideo} className="link" target="_blank">
+                {submission.linkToVideo}
+              </a>
+            </p>
+          )}
           {submission.builder && <Address address={submission.builder} />}
+          {submission.telegram && <p>Telegram: {submission.telegram}</p>}
+          {submission.feedback && <p>Extensions feedback: {submission.feedback}</p>}
           <div className="collapse">
             <input type="checkbox" />
             <div className="collapse-title text-xl font-medium">{submission.comments.length} comments</div>

diff --git a/packages/nextjs/app/api/submissions/route.ts b/packages/nextjs/app/api/submissions/route.ts
@@ -26,7 +26,8 @@ export type CreateNewSubmissionBody = SubmissionInsert & { signature: `0x${strin
 
 export async function POST(req: Request) {
   try {
-    const { title, description, linkToRepository, signature, builder } = (await req.json()) as CreateNewSubmissionBody;
+    const { title, description, telegram, linkToRepository, linkToVideo, feedback, signature, builder } =
+      (await req.json()) as CreateNewSubmissionBody;
 
     if (
       !title ||
@@ -35,6 +36,7 @@ export async function POST(req: Request) {
       !signature ||
       !builder ||
       description.length > 750 ||
+      (feedback && feedback.length > 750) ||
       title.length > 75
     ) {
       return NextResponse.json({ error: "Invalid form details submitted" }, { status: 400 });
@@ -44,7 +46,14 @@ export async function POST(req: Request) {
       domain: EIP_712_DOMAIN,
       types: EIP_712_TYPES__SUBMISSION,
       primaryType: "Message",
-      message: { title, description, linkToRepository },
+      message: {
+        title,
+        description,
+        telegram: telegram || "",
+        linkToRepository,
+        linkToVideo: linkToVideo || "",
+        feedback: feedback || "",
+      },
       signature: signature,
     });
 
@@ -61,7 +70,10 @@ export async function POST(req: Request) {
     const submission = await createSubmission({
       title,
       description,
+      telegram,
       linkToRepository,
+      linkToVideo,
+      feedback,
       builder,
     });
 

diff --git a/packages/nextjs/app/submit/_component/Form.tsx b/packages/nextjs/app/submit/_component/Form.tsx
@@ -11,10 +11,12 @@ import { postMutationFetcher } from "~~/utils/react-query";
 import { notification } from "~~/utils/scaffold-eth";
 
 const MAX_DESCRIPTION_LENGTH = 750;
+const MAX_FEEDBACK_LENGTH = 750;
 
 const Form = () => {
   const { address: connectedAddress } = useAccount();
   const [descriptionLength, setDescriptionLength] = useState(0);
+  const [feedbackLength, setFeedbackLength] = useState(0);
   const { signTypedDataAsync } = useSignTypedData();
   const router = useRouter();
   const { mutateAsync: postNewSubmission } = useMutation({
@@ -33,22 +35,38 @@ const Form = () => {
       const description = formData.get("description") as string;
       const linkToRepository = formData.get("linkToRepository") as string;
       if (!title || !description || !linkToRepository) {
-        notification.error("Please fill all the fields");
+        notification.error("Please fill all the required fields");
         return;
       }
 
+      const telegram = formData.get("telegram") as string;
+      const linkToVideo = formData.get("linkToVideo") as string;
+      const feedback = formData.get("feedback") as string;
+
       const signature = await signTypedDataAsync({
         domain: EIP_712_DOMAIN,
         types: EIP_712_TYPES__SUBMISSION,
         primaryType: "Message",
         message: {
-          title: title,
-          description: description,
-          linkToRepository: linkToRepository,
+          title,
+          description,
+          telegram,
+          linkToRepository,
+          linkToVideo,
+          feedback,
         },
       });
 
-      await postNewSubmission({ title, description, linkToRepository, signature, builder: connectedAddress });
+      await postNewSubmission({
+        title,
+        description,
+        telegram,
+        linkToRepository,
+        linkToVideo,
+        feedback,
+        signature,
+        builder: connectedAddress,
+      });
 
       notification.success("Extension submitted successfully!");
       router.push("/");
@@ -62,14 +80,13 @@ const Form = () => {
   };
 
   return (
-    <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 Extension</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">
+    <div className="card w-[95%]">
+      <form action={clientFormAction} className="card-body space-y-2 p-0 md:p-2">
+        <div className="space-y-1">
+          <p className="m-0 text-lg">Title *</p>
+          <div className="flex border-2 border-base-300 bg-base-200 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"
+              className="input input-ghost focus-within:border-transparent focus:outline-none focus:bg-transparent focus:text-gray-700 h-[2.2rem] min-h-[2.2rem] px-4 border w-full font-medium placeholder:text-gray-300 text-gray-700"
               placeholder="Extension title"
               name="title"
               autoComplete="off"
@@ -78,11 +95,11 @@ const Form = () => {
             />
           </div>
         </div>
-        <div className="space-y-2">
-          <p className="m-0 text-xl ml-2">Description</p>
-          <div className="flex flex-col border-2 border-base-300 bg-base-200 rounded-xl text-accent">
+        <div className="space-y-1">
+          <p className="m-0 text-lg">Description *</p>
+          <div className="flex flex-col border-2 border-base-300 bg-base-200 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 md:h-52 rounded-none"
+              className="input input-ghost focus-within:border-transparent focus:outline-none focus:bg-transparent focus:text-gray-700 px-4 pt-2 border w-full font-medium placeholder:text-gray-300 text-gray-700 h-28 md:h-52 rounded-none"
               placeholder="Extension description"
               name="description"
               autoComplete="off"
@@ -94,11 +111,24 @@ const Form = () => {
             </p>
           </div>
         </div>
-        <div className="space-y-2">
-          <p className="m-0 text-xl ml-2">Repository URL</p>
-          <div className="flex border-2 border-base-300 bg-base-200 rounded-xl text-accent">
+        <div className="space-y-1">
+          <p className="m-0 text-lg">Your Telegram handle</p>
+          <div className="flex border-2 border-base-300 bg-base-200 text-accent">
+            <input
+              className="input input-ghost focus-within:border-transparent focus:outline-none focus:bg-transparent focus:text-gray-700 h-[2.2rem] min-h-[2.2rem] px-4 border w-full font-medium placeholder:text-gray-300 text-gray-700"
+              placeholder="@username"
+              name="telegram"
+              autoComplete="off"
+              type="text"
+              maxLength={75}
+            />
+          </div>
+        </div>
+        <div className="space-y-1">
+          <p className="m-0 text-lg">Repository URL *</p>
+          <div className="flex border-2 border-base-300 bg-base-200 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"
+              className="input input-ghost focus-within:border-transparent focus:outline-none focus:bg-transparent focus:text-gray-700 h-[2.2rem] min-h-[2.2rem] px-4 border w-full font-medium placeholder:text-gray-300 text-gray-700"
               placeholder="https://"
               name="linkToRepository"
               autoComplete="off"
@@ -107,6 +137,34 @@ const Form = () => {
             />
           </div>
         </div>
+        <div className="space-y-1">
+          <p className="m-0 text-lg">Project video link</p>
+          <div className="flex border-2 border-base-300 bg-base-200 text-accent">
+            <input
+              className="input input-ghost focus-within:border-transparent focus:outline-none focus:bg-transparent focus:text-gray-700 h-[2.2rem] min-h-[2.2rem] px-4 border w-full font-medium placeholder:text-gray-300 text-gray-700"
+              placeholder="https://"
+              name="linkToVideo"
+              autoComplete="off"
+              type="text"
+              maxLength={75}
+            />
+          </div>
+        </div>
+        <div className="space-y-1">
+          <p className="m-0 text-lg">What would you improve about extensions?</p>
+          <div className="flex flex-col border-2 border-base-300 bg-base-200 text-accent">
+            <textarea
+              className="input input-ghost focus-within:border-transparent focus:outline-none focus:bg-transparent focus:text-gray-700 px-4 pt-2 border w-full font-medium placeholder:text-gray-300 text-gray-700 h-28 md:h-52 rounded-none"
+              name="feedback"
+              autoComplete="off"
+              maxLength={MAX_FEEDBACK_LENGTH}
+              onChange={e => setFeedbackLength(e.target.value.length)}
+            />
+            <p className="my-1">
+              {feedbackLength} / {MAX_FEEDBACK_LENGTH}
+            </p>
+          </div>
+        </div>
         <SubmitButton />
       </form>
     </div>

diff --git a/packages/nextjs/app/submit/_component/SubmitButton.tsx b/packages/nextjs/app/submit/_component/SubmitButton.tsx
@@ -11,15 +11,19 @@ const SubmitButton = () => {
 
   return (
     <div
-      className={`flex ${!isConnected && "tooltip tooltip-bottom"}`}
+      className={`items-center flex flex-col ${!isConnected && "tooltip tooltip-bottom"}`}
       data-tip={`${!isConnected ? "Please connect your wallet" : ""}`}
     >
       {isConnected ? (
-        <button className="btn btn-primary w-full" disabled={pending} aria-disabled={pending}>
-          Submit
+        <button
+          className="btn border border-black px-6 text-lg h-10 min-h-10 font-medium"
+          disabled={pending}
+          aria-disabled={pending}
+        >
+          Submit <span className="text-accent">✦</span>
         </button>
       ) : (
-        <RainbowKitCustomConnectButton fullWidth={true} />
+        <RainbowKitCustomConnectButton />
       )}
     </div>
   );

diff --git a/packages/nextjs/app/submit/page.tsx b/packages/nextjs/app/submit/page.tsx
@@ -3,10 +3,29 @@ import { NextPage } from "next";
 
 const Submit: NextPage = () => {
   return (
-    <div className="flex bg-base-100 items-center flex-col flex-grow text-center pt-10 md:pt-4 px-6">
-      <h1 className="text-3xl sm:text-4xl font-bold mb-4">Submit Extension</h1>
-      <p className="text-md mb-0 max-w-xl">Submit your SE-2 extension.</p>
-      <Form />
+    <div className="flex flex-col md:flex-row m-6 md:m-10 border border-black">
+      <div className="w-[100%] md:w-5/12 border-r border-black p-4 md:p-12">
+        <h2 className="text-2xl md:text-3xl mb-8">Before submitting</h2>
+        <h3 className="text-xl underline">What makes a good extension</h3>
+        <p className="text-lg mb-8">
+          A good extension is a useful tool that helps developers to build better apps. It should be well-documented,
+          easy to use, and solve a real problem.
+        </p>
+        <h3 className="text-xl underline">Please pay attention to the following before submitting</h3>
+        <ul className="list-disc pl-5 text-lg mt-4">
+          <li>Follow extension guidelines to ensure compatibility with Scaffold-ETH 2 CLI.</li>
+          <li>Submit only your original work, disclose any pre-existing work used.</li>
+          <li>Be respectful to all participants.</li>
+          <li>Focus on quality, including documentation and demo video.</li>
+          <li>Limit of 5 submissions per person.</li>
+        </ul>
+      </div>
+      <div className="w-[100%] md:w-7/12 p-4 md:p-12 bg-accent">
+        <div className="flex items-center flex-col flex-grow">
+          <h1 className="text-2xl md:text-3xl mb-8">Submit your extension</h1>
+          <Form />
+        </div>
+      </div>
     </div>
   );
 };

diff --git a/packages/nextjs/services/database/config/schema.ts b/packages/nextjs/services/database/config/schema.ts
@@ -10,7 +10,10 @@ export const submissions = pgTable("submissions", {
   id: serial("id").primaryKey(),
   title: varchar("name", { length: 256 }).notNull(),
   description: text("description").notNull(),
+  telegram: varchar("telegram", { length: 256 }),
   linkToRepository: varchar("link_to_repository", { length: 256 }).notNull(),
+  linkToVideo: varchar("link_to_video", { length: 256 }),
+  feedback: text("feedback"),
   submissionTimestamp: timestamp("submission_timestamp")
     .default(sql`now()`)
     .notNull(),

diff --git a/packages/nextjs/services/database/seed.ts b/packages/nextjs/services/database/seed.ts
@@ -36,6 +36,9 @@ async function seed() {
         description: "This is the first submission",
         linkToRepository: "https://github.com/BuidlGuidl/grants.buidlguidl.com",
         builder: "0xf39Fd6e51aad88F6F4ce6aB8827279cffFb92266",
+        linkToVideo: "https://www.youtube.com/watch?v=4hl61AmEGwU",
+        telegram: "@buidlguidl",
+        feedback: "This is the feedback",
       },
       {
         title: "Second submission",

diff --git a/packages/nextjs/utils/eip712.ts b/packages/nextjs/utils/eip712.ts
@@ -8,5 +8,8 @@ export const EIP_712_TYPES__SUBMISSION = {
     { name: "title", type: "string" },
     { name: "description", type: "string" },
     { name: "linkToRepository", type: "string" },
+    { name: "telegram", type: "string" },
+    { name: "linkToVideo", type: "string" },
+    { name: "feedback", type: "string" },
   ],
 } as const;