Minor UI tweaks and feedback modals after user grant applications

packages/nextjs/app/apply/page.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { useEffect } from "react";
+import { useEffect, useRef } from "react";
 import Link from "next/link";
 import { useRouter } from "next/navigation";
 import { CreateNewGrantReqBody } from "../api/grants/new/route";
@@ -29,6 +29,8 @@ const Apply: NextPage = () => {
   const { openConnectModal } = useConnectModal();
   const { isAuthenticated } = useAuthSession();
 
+  const feedbackModalRef = useRef<HTMLDialogElement>(null);
+
   useEffect(() => {
     if (isAuthenticated) {
       router.refresh();
@@ -47,16 +49,48 @@ const Apply: NextPage = () => {
         ...fieldValues,
       });
       notification.success(`The grant proposal has been created`);
-      router.push("/my-grants");
+      feedbackModalRef.current?.showModal();
     } catch (error) {
       const errorMessage = getParsedError(error);
       notification.error(errorMessage);
     }
   };
 
+  const handleModalClose = () => {
+    feedbackModalRef.current?.close();
+    router.push("/my-grants");
+  };
+
   return (
     <div className="flex flex-col w-full items-center justify-center p-6 sm:p-10">
       <h2 className="text-2xl sm:text-3xl font-extrabold !mb-0">Apply for a grant</h2>
+      <p className="text-center text-lg text-base-content/80 mt-4 max-w-2xl">
+        Open to all public goods projects. ENS-specific projects should apply through the ENS Ecosystem Grants program
+        instead.
+      </p>
+
+      <dialog ref={feedbackModalRef} className="modal">
+        <div className="modal-box flex flex-col space-y-3">
+          <form method="dialog" className="bg-secondary -mx-6 -mt-6 px-6 py-4">
+            <div className="flex items-center">
+              <p className="font-bold text-xl m-0 text-center w-full">Application Submitted Successfully!</p>
+            </div>
+          </form>
+
+          <div className="text-center">
+            <p>
+              Grant applications are reviewed at a regular cadence, you will receive information if we need more info,
+              if the application was rejected and why, or approved and for what amount, based on the info submitted.
+            </p>
+            <div className="mt-6 flex justify-center">
+              <Button onClick={handleModalClose}>Accept</Button>
+            </div>
+          </div>
+        </div>
+        <form method="dialog" className="modal-backdrop">
+          <button onClick={handleModalClose}>close</button>
+        </form>
+      </dialog>
 
       <FormProvider {...formMethods}>
         <div className="mt-6 sm:mt-10 card card-compact rounded-xl w-full max-w-4xl bg-secondary shadow-lg mb-8 sm:mb-12 p-4 sm:p-6">

packages/nextjs/app/grants/[grantId]/_components/CurrentStage/NewStageModal/index.tsx

@@ -1,4 +1,4 @@
-import { forwardRef } from "react";
+import { forwardRef, useRef } from "react";
 import { useRouter } from "next/navigation";
 import { NewStageModalFormValues, newStageModalFormSchema } from "./schema";
 import { useMutation } from "@tanstack/react-query";
@@ -27,6 +27,7 @@ export const NewStageModal = forwardRef<HTMLDialogElement, NewStageModalProps>(
       schema: newStageModalFormSchema,
     });
     const { handleSubmit } = formMethods;
+    const feedbackModalRef = useRef<HTMLDialogElement>(null);
 
     const onSubmit = async (fieldValues: NewStageModalFormValues) => {
       try {
@@ -44,12 +45,13 @@ export const NewStageModal = forwardRef<HTMLDialogElement, NewStageModalProps>(
 
         await postNewStage({ milestone, signature, grantId });
         closeModal();
-        router.refresh();
+        feedbackModalRef.current?.showModal();
       } catch (error) {
         const errorMessage = getParsedError(error);
         notification.error(errorMessage);
       }
     };
+
     const { signTypedDataAsync, isPending: isSigning } = useSignTypedData();
     const router = useRouter();
 
@@ -58,33 +60,63 @@ export const NewStageModal = forwardRef<HTMLDialogElement, NewStageModalProps>(
         postMutationFetcher("/api/stages/new", { body: newStageBody }),
     });
 
+    const handleFeedbackModalClose = () => {
+      feedbackModalRef.current?.close();
+      router.refresh();
+    };
+
     return (
-      <dialog id="action_modal" className="modal" ref={ref}>
-        <div className="modal-box flex flex-col space-y-3">
-          <form method="dialog" className="bg-secondary -mx-6 -mt-6 px-6 py-4 flex items-center justify-between">
-            <div className="flex justify-between items-center">
-              <p className="font-bold text-xl m-0">Stage {previousStage.stageNumber + 1} application</p>
+      <>
+        <dialog id="action_modal" className="modal" ref={ref}>
+          <div className="modal-box flex flex-col space-y-3">
+            <form method="dialog" className="bg-secondary -mx-6 -mt-6 px-6 py-4 flex items-center justify-between">
+              <div className="flex justify-between items-center">
+                <p className="font-bold text-xl m-0">Stage {previousStage.stageNumber + 1} application</p>
+              </div>
+              {/* if there is a button in form, it will close the modal */}
+              <button className="btn btn-sm btn-circle btn-ghost text-xl h-auto">✕</button>
+            </form>
+            <FormProvider {...formMethods}>
+              <form onSubmit={handleSubmit(onSubmit)} className="w-full flex flex-col">
+                <FormTextarea label="Stage milestones" showMessageLength {...getCommonOptions("milestone")} />
+                <Button
+                  variant="green"
+                  type="submit"
+                  disabled={isPostingNewStage || isSigning}
+                  className="self-center mt-4"
+                >
+                  {(isPostingNewStage || isSigning) && <span className="loading loading-spinner"></span>}
+                  Apply for a grant
+                </Button>
+              </form>
+            </FormProvider>
+          </div>
+        </dialog>
+
+        <dialog ref={feedbackModalRef} className="modal">
+          <div className="modal-box flex flex-col space-y-3">
+            <form method="dialog" className="bg-secondary -mx-6 -mt-6 px-6 py-4">
+              <div className="flex items-center">
+                <p className="font-bold text-xl m-0 text-center w-full">Stage Application Submitted!</p>
+              </div>
+            </form>
+
+            <div className="text-center">
+              <p>
+                Your stage application will be reviewed. You will receive information if we need more details, if the
+                application was rejected and why, or when it is approved and for what amount.
+              </p>
+              <div className="mt-6 flex justify-center">
+                <Button onClick={handleFeedbackModalClose}>Accept</Button>
+              </div>
             </div>
-            {/* if there is a button in form, it will close the modal */}
-            <button className="btn btn-sm btn-circle btn-ghost text-xl h-auto">✕</button>
+          </div>
+          <form method="dialog" className="modal-backdrop">
+            <button onClick={handleFeedbackModalClose}>close</button>
           </form>
-          <FormProvider {...formMethods}>
-            <form onSubmit={handleSubmit(onSubmit)} className="w-full flex flex-col">
-              <FormTextarea label="Stage milestones" showMessageLength {...getCommonOptions("milestone")} />
-              <Button
-                variant="green"
-                type="submit"
-                disabled={isPostingNewStage || isSigning}
-                className="self-center mt-4"
-              >
-                {(isPostingNewStage || isSigning) && <span className="loading loading-spinner"></span>}
-                Apply for a grant
-              </Button>
-            </form>
-          </FormProvider>
-        </div>
+        </dialog>
         <Toaster />
-      </dialog>
+      </>
     );
   },
 );

packages/nextjs/app/page.tsx

@@ -34,17 +34,16 @@ const Home: NextPage = () => {
     <div className="flex items-center flex-col flex-grow">
       <div className="max-w-4xl text-center px-4 py-8 sm:py-16">
         <h1 className="text-3xl font-extrabold !mb-0">ENS PG Builder Grants</h1>
-        <div className="mt-4 text-gray-400 max-w-2xl mx-auto space-y-4">
+        <div className="mt-4 max-w-2xl mx-auto space-y-4">
           <p>
-            The ENS PG Builder Grants program is designed to support foundational public goods in the Ethereum and Web3
+            PG Builder Grants program is designed to support foundational public goods in the Ethereum and Web3
             ecosystems. The program aims to empower projects that have demonstrated exceptional usefulness and impact
             for developers and users alike.
           </p>
           <p>
             By providing significant financial support, we help projects continue to drive innovation and growth within
             the ecosystem. Whether you&apos;re building infrastructure, developing tools, or creating educational
-            resources, the ENS PG Builder Grants offer a pathway to secure the funding you need to make a lasting
-            difference.
+            resources, PG Builder Grants offer a pathway to secure the funding you need to make a lasting difference.
           </p>
         </div>
         <Stats />