From f9b2470542fd3246d4b9271908d329cf2025c400 Mon Sep 17 00:00:00 2001
From: Shiv Bhonde <shivbhonde04@gmail.com>
Date: Sat, 23 Mar 2024 23:22:31 +0530
Subject: [PATCH 01/10] create EditGrantModal component

---
 .../app/admin/_components/EditGrantModal.tsx  | 74 +++++++++++++++++++
 .../app/admin/_components/GrantReview.tsx     | 15 +++-
 2 files changed, 85 insertions(+), 4 deletions(-)
 create mode 100644 packages/nextjs/app/admin/_components/EditGrantModal.tsx

diff --git a/packages/nextjs/app/admin/_components/EditGrantModal.tsx b/packages/nextjs/app/admin/_components/EditGrantModal.tsx
new file mode 100644
index 00000000..91c09aaf
--- /dev/null
+++ b/packages/nextjs/app/admin/_components/EditGrantModal.tsx
@@ -0,0 +1,74 @@
+import { ChangeEvent, forwardRef, useState } from "react";
+import { GrantDataWithBuilder } from "~~/services/database/schema";
+
+type EditGrantModalProps = {
+  grant: GrantDataWithBuilder;
+};
+
+export const EditGrantModal = forwardRef<HTMLDialogElement, EditGrantModalProps>(({ grant }, ref) => {
+  const [formData, setFormData] = useState({
+    title: grant.title,
+    description: grant.description,
+    askAmount: grant.askAmount,
+  });
+
+  const handleInputChange = (e: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
+    const { name, value } = e.target;
+    setFormData(prevFormData => ({
+      ...prevFormData,
+      [name]: value,
+    }));
+  };
+
+  return (
+    <dialog id="edit_grant_modal" className="modal" ref={ref}>
+      <div className="modal-box flex flex-col space-y-3">
+        <form method="dialog">
+          {/* if there is a button in form, it will close the modal */}
+          <button className="btn btn-sm btn-circle btn-ghost absolute right-2 top-2">✕</button>
+        </form>
+        <div className="flex justify-between items-center">
+          <p className="font-bold text-lg m-0">
+            Edit grant
+            <span className="text-sm text-gray-500 ml-2">({grant.id})</span>
+          </p>
+        </div>
+        <div className="w-full flex-col gap-1">
+          <p className="m-0 font-semibold text-base">Title</p>
+          <input
+            type="text"
+            placeholder="title"
+            name="title"
+            value={formData.title}
+            className="input input-sm input-bordered w-full"
+            onChange={handleInputChange}
+          />
+        </div>
+        <div className="w-full flex-col gap-1">
+          <p className="m-0 font-semibold text-base">Description</p>
+          <textarea
+            name="description"
+            placeholder="description"
+            value={formData.description}
+            className="textarea textarea-md textarea-bordered  w-full"
+            rows={5}
+            onChange={handleInputChange}
+          />
+        </div>
+        <div className="w-full flex-col gap-1">
+          <p className="m-0 font-semibold text-base">Amount</p>
+          <input
+            type="number"
+            name="askAmount"
+            placeholder="ask amount"
+            value={formData.askAmount}
+            className="input input-sm input-bordered w-full"
+            onChange={handleInputChange}
+          />
+        </div>
+      </div>
+    </dialog>
+  );
+});
+
+EditGrantModal.displayName = "EditGrantModal";
diff --git a/packages/nextjs/app/admin/_components/GrantReview.tsx b/packages/nextjs/app/admin/_components/GrantReview.tsx
index de8a11fe..57b23bcf 100644
--- a/packages/nextjs/app/admin/_components/GrantReview.tsx
+++ b/packages/nextjs/app/admin/_components/GrantReview.tsx
@@ -2,9 +2,11 @@ import { useRef } from "react";
 import Image from "next/image";
 import { useReviewGrant } from "../hooks/useReviewGrant";
 import { ActionModal } from "./ActionModal";
+import { EditGrantModal } from "./EditGrantModal";
 import { parseEther } from "viem";
 import { useNetwork } from "wagmi";
 import { ArrowTopRightOnSquareIcon } from "@heroicons/react/20/solid";
+import { PencilSquareIcon } from "@heroicons/react/24/outline";
 import TelegramIcon from "~~/components/assets/TelegramIcon";
 import TwitterIcon from "~~/components/assets/TwitterIcon";
 import { Address } from "~~/components/scaffold-eth";
@@ -47,7 +49,8 @@ type GrantReviewProps = {
   toggleSelection: () => void;
 };
 export const GrantReview = ({ grant, selected, toggleSelection }: GrantReviewProps) => {
-  const modalRef = useRef<HTMLDialogElement>(null);
+  const actionModalRef = useRef<HTMLDialogElement>(null);
+  const editGrantModalRef = useRef<HTMLDialogElement>(null);
   const { chain: connectedChain } = useNetwork();
 
   const { data: txResult, writeAsync: splitEqualETH } = useScaffoldContractWrite({
@@ -76,6 +79,9 @@ export const GrantReview = ({ grant, selected, toggleSelection }: GrantReviewPro
         <div className="font-bold flex flex-col gap-1 lg:gap-2 lg:flex-row items-baseline">
           <h1 className="text-lg m-0">{grant.title}</h1>
           <span className="text-sm text-gray-500">({grant.id})</span>
+          <button className="cursor-pointer" onClick={() => editGrantModalRef?.current?.showModal()}>
+            <PencilSquareIcon className="h-5 w-5" />
+          </button>
           {grant.link && (
             <a href={grant.link} className="underline text-sm" target="_blank" rel="noopener noreferrer">
               View Build <ArrowTopRightOnSquareIcon className="h-4 w-4 inline" />
@@ -125,7 +131,7 @@ export const GrantReview = ({ grant, selected, toggleSelection }: GrantReviewPro
                 value: parseEther((grant.askAmount / 2).toString()),
               });
               // Transactor eats the error, so we need to handle by checking resHash
-              if (resHash && modalRef.current) modalRef.current.showModal();
+              if (resHash && actionModalRef.current) actionModalRef.current.showModal();
             }}
             disabled={isLoading || isCompleteActionDisabled}
           >
@@ -135,7 +141,7 @@ export const GrantReview = ({ grant, selected, toggleSelection }: GrantReviewPro
             className={`btn btn-sm btn-success ${isLoading ? "opacity-50" : ""} ${completeActionDisableClassName}`}
             data-tip={completeActionDisableToolTip}
             onClick={() => {
-              if (modalRef.current) modalRef.current.showModal();
+              if (actionModalRef.current) actionModalRef.current.showModal();
             }}
             disabled={isLoading || isCompleteActionDisabled}
           >
@@ -143,7 +149,8 @@ export const GrantReview = ({ grant, selected, toggleSelection }: GrantReviewPro
           </button>
         </div>
       </div>
-      <ActionModal ref={modalRef} grant={grant} initialTxLink={txResult?.hash} />
+      <EditGrantModal ref={editGrantModalRef} grant={grant} />
+      <ActionModal ref={actionModalRef} grant={grant} initialTxLink={txResult?.hash} />
     </div>
   );
 };

From abd4a823f65221c828d97a5c9b429860ab8dc007 Mon Sep 17 00:00:00 2001
From: Shiv Bhonde <shivbhonde04@gmail.com>
Date: Sun, 24 Mar 2024 00:05:16 +0530
Subject: [PATCH 02/10] create new edit grant PUT route

---
 .../nextjs/app/api/grants/[grantId]/route.ts  | 46 +++++++++++++++++++
 packages/nextjs/services/database/grants.ts   |  9 ++++
 packages/nextjs/utils/eip712.ts               |  4 ++
 3 files changed, 59 insertions(+)
 create mode 100644 packages/nextjs/app/api/grants/[grantId]/route.ts

diff --git a/packages/nextjs/app/api/grants/[grantId]/route.ts b/packages/nextjs/app/api/grants/[grantId]/route.ts
new file mode 100644
index 00000000..8780d17d
--- /dev/null
+++ b/packages/nextjs/app/api/grants/[grantId]/route.ts
@@ -0,0 +1,46 @@
+import { NextRequest, NextResponse } from "next/server";
+import { recoverTypedDataAddress } from "viem";
+import { updateGrant } from "~~/services/database/grants";
+import { findUserByAddress } from "~~/services/database/users";
+import { EIP_712_DOMAIN, EIP_712_TYPES_EDIT_GRANT } from "~~/utils/eip712";
+
+type ReqBody = {
+  title?: string;
+  description?: string;
+  askAmount?: number;
+  signature?: `0x${string}`;
+  signer?: string;
+};
+
+export async function PUT(req: NextRequest, { params }: { params: { grantId: string } }) {
+  try {
+    const { grantId } = params;
+    const { title, description, signature, signer, askAmount } = (await req.json()) as ReqBody;
+
+    if (!title || !description || !askAmount || !signature || !signer) {
+      return NextResponse.json({ error: "Invalid form details submited" }, { status: 400 });
+    }
+
+    const recoveredAddress = await recoverTypedDataAddress({
+      domain: EIP_712_DOMAIN,
+      types: EIP_712_TYPES_EDIT_GRANT,
+      primaryType: "Message",
+      message: { title, description, askAmount: askAmount.toString() },
+      signature: signature,
+    });
+    if (recoveredAddress !== signer) {
+      return NextResponse.json({ error: "Recovered address did not match signer" }, { status: 401 });
+    }
+
+    // Only admins can edit grant
+    const signerData = await findUserByAddress(signer);
+    if (signerData.data?.role !== "admin") {
+      return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
+    }
+
+    await updateGrant(grantId, { title, description, askAmount });
+  } catch (e) {
+    console.error(e);
+    return NextResponse.json({ error: "Error editing grant" }, { status: 500 });
+  }
+}
diff --git a/packages/nextjs/services/database/grants.ts b/packages/nextjs/services/database/grants.ts
index c21d619e..c872a4d2 100644
--- a/packages/nextjs/services/database/grants.ts
+++ b/packages/nextjs/services/database/grants.ts
@@ -161,6 +161,15 @@ export const reviewGrant = async ({ grantId, action, txHash, txChainId }: Review
   }
 };
 
+export const updateGrant = async (grantId: string, grantData: Partial<GrantData>) => {
+  try {
+    await getGrantsDoc(grantId).update(grantData);
+  } catch (error) {
+    console.error("Error updating the grant:", error);
+    throw error;
+  }
+};
+
 export const getGrantsStats = async () => {
   // total_eth_granted is the summation of askAmount of all completed grants
   // total_active_grants is the count of grants with status "approved"
diff --git a/packages/nextjs/utils/eip712.ts b/packages/nextjs/utils/eip712.ts
index 86f1e3df..8362edc0 100644
--- a/packages/nextjs/utils/eip712.ts
+++ b/packages/nextjs/utils/eip712.ts
@@ -10,6 +10,10 @@ export const EIP_712_TYPES__APPLY_FOR_GRANT = {
   ],
 } as const;
 
+export const EIP_712_TYPES_EDIT_GRANT = {
+  Message: [...EIP_712_TYPES__APPLY_FOR_GRANT.Message, { name: "askAmount", type: "string" }],
+} as const;
+
 export const EIP_712_TYPES__REVIEW_GRANT = {
   Message: [
     { name: "grantId", type: "string" },

From 08eae439032f203b0bc0bfcd4c346dc5628faafb Mon Sep 17 00:00:00 2001
From: Shiv Bhonde <shivbhonde04@gmail.com>
Date: Sun, 24 Mar 2024 01:15:02 +0530
Subject: [PATCH 03/10] create higher order fucntion to make mutation fetcher

---
 packages/nextjs/utils/swr.ts | 30 +++++++++++++++++++-----------
 1 file changed, 19 insertions(+), 11 deletions(-)

diff --git a/packages/nextjs/utils/swr.ts b/packages/nextjs/utils/swr.ts
index 936c186b..17b61bef 100644
--- a/packages/nextjs/utils/swr.ts
+++ b/packages/nextjs/utils/swr.ts
@@ -7,16 +7,24 @@ export const fetcher = async (...args: Parameters<typeof fetch>) => {
   return data;
 };
 
-export const postMutationFetcher = async <T = Record<any, any>>(url: string, { arg }: { arg: T }) => {
-  const res = await fetch(url, {
-    method: "POST",
-    body: JSON.stringify(arg),
-  });
+export const makeMutationFetcher =
+  <T = Record<any, any>>(method: "POST" | "PUT" | "PATCH" | "DELETE") =>
+  async (url: string, { arg }: { arg: T }) => {
+    const res = await fetch(url, {
+      method: method,
+      body: JSON.stringify(arg),
+    });
 
-  const data = await res.json();
+    const data = await res.json();
 
-  if (!res.ok) {
-    throw new Error(data.error || "Error posting data");
-  }
-  return data;
-};
+    if (!res.ok) {
+      throw new Error(data.error || `Error ${method.toLowerCase()}ing data`);
+    }
+    return data;
+  };
+
+export const postMutationFetcher = <T = Record<any, any>>(url: string, arg: { arg: T }) =>
+  makeMutationFetcher<T>("POST")(url, arg);
+
+export const putMutationFetcher = <T = Record<any, any>>(url: string, arg: { arg: T }) =>
+  makeMutationFetcher<T>("PUT")(url, arg);

From d4ecbe7a211ef80b245b093d1deff464d68d48bd Mon Sep 17 00:00:00 2001
From: Shiv Bhonde <shivbhonde04@gmail.com>
Date: Sun, 24 Mar 2024 01:17:39 +0530
Subject: [PATCH 04/10] use PATCH request instead of PUT

---
 packages/nextjs/app/api/grants/[grantId]/route.ts | 2 +-
 packages/nextjs/utils/swr.ts                      | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/nextjs/app/api/grants/[grantId]/route.ts b/packages/nextjs/app/api/grants/[grantId]/route.ts
index 8780d17d..ed813823 100644
--- a/packages/nextjs/app/api/grants/[grantId]/route.ts
+++ b/packages/nextjs/app/api/grants/[grantId]/route.ts
@@ -12,7 +12,7 @@ type ReqBody = {
   signer?: string;
 };
 
-export async function PUT(req: NextRequest, { params }: { params: { grantId: string } }) {
+export async function PATCH(req: NextRequest, { params }: { params: { grantId: string } }) {
   try {
     const { grantId } = params;
     const { title, description, signature, signer, askAmount } = (await req.json()) as ReqBody;
diff --git a/packages/nextjs/utils/swr.ts b/packages/nextjs/utils/swr.ts
index 17b61bef..1743d25d 100644
--- a/packages/nextjs/utils/swr.ts
+++ b/packages/nextjs/utils/swr.ts
@@ -26,5 +26,5 @@ export const makeMutationFetcher =
 export const postMutationFetcher = <T = Record<any, any>>(url: string, arg: { arg: T }) =>
   makeMutationFetcher<T>("POST")(url, arg);
 
-export const putMutationFetcher = <T = Record<any, any>>(url: string, arg: { arg: T }) =>
-  makeMutationFetcher<T>("PUT")(url, arg);
+export const patchMutationFetcher = <T = Record<any, any>>(url: string, arg: { arg: T }) =>
+  makeMutationFetcher<T>("PATCH")(url, arg);

From f2729fcea6ad71bee4cdcb0bc0e6c0753ec4bb1c Mon Sep 17 00:00:00 2001
From: Shiv Bhonde <shivbhonde04@gmail.com>
Date: Sun, 24 Mar 2024 01:54:27 +0530
Subject: [PATCH 05/10] integrate frontend with api

---
 .../app/admin/_components/EditGrantModal.tsx  | 72 ++++++++++++++++++-
 .../app/admin/_components/GrantReview.tsx     |  2 +-
 .../nextjs/app/api/grants/[grantId]/route.ts  |  3 +-
 packages/nextjs/utils/eip712.ts               |  7 +-
 4 files changed, 80 insertions(+), 4 deletions(-)

diff --git a/packages/nextjs/app/admin/_components/EditGrantModal.tsx b/packages/nextjs/app/admin/_components/EditGrantModal.tsx
index 91c09aaf..8e80cf8a 100644
--- a/packages/nextjs/app/admin/_components/EditGrantModal.tsx
+++ b/packages/nextjs/app/admin/_components/EditGrantModal.tsx
@@ -1,17 +1,41 @@
 import { ChangeEvent, forwardRef, useState } from "react";
+import { useSWRConfig } from "swr";
+import useSWRMutation from "swr/mutation";
+import { useAccount, useNetwork, useSignTypedData } from "wagmi";
 import { GrantDataWithBuilder } from "~~/services/database/schema";
+import { EIP_712_DOMAIN, EIP_712_TYPES_EDIT_GRANT } from "~~/utils/eip712";
+import { getParsedError, notification } from "~~/utils/scaffold-eth";
+import { patchMutationFetcher } from "~~/utils/swr";
 
 type EditGrantModalProps = {
   grant: GrantDataWithBuilder;
+  closeModal: () => void;
 };
 
-export const EditGrantModal = forwardRef<HTMLDialogElement, EditGrantModalProps>(({ grant }, ref) => {
+type ReqBody = {
+  title?: string;
+  description?: string;
+  askAmount?: number;
+  signature?: `0x${string}`;
+  signer?: string;
+};
+
+export const EditGrantModal = forwardRef<HTMLDialogElement, EditGrantModalProps>(({ grant, closeModal }, ref) => {
   const [formData, setFormData] = useState({
     title: grant.title,
     description: grant.description,
     askAmount: grant.askAmount,
   });
 
+  const { address } = useAccount();
+  const { chain: connectedChain } = useNetwork();
+  const { signTypedDataAsync, isLoading: isSigningMessage } = useSignTypedData();
+
+  const { trigger: editGrant, isMutating } = useSWRMutation(`/api/grants/${grant.id}`, patchMutationFetcher<ReqBody>);
+  const { mutate } = useSWRConfig();
+
+  const isLoading = isSigningMessage || isMutating;
+
   const handleInputChange = (e: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
     const { name, value } = e.target;
     setFormData(prevFormData => ({
@@ -20,6 +44,44 @@ export const EditGrantModal = forwardRef<HTMLDialogElement, EditGrantModalProps>
     }));
   };
 
+  const handleEditGrant = async () => {
+    if (!address || !connectedChain) {
+      notification.error("Please connect your wallet");
+      return;
+    }
+
+    let notificationId: string | undefined;
+    try {
+      const signature = await signTypedDataAsync({
+        domain: EIP_712_DOMAIN,
+        types: EIP_712_TYPES_EDIT_GRANT,
+        primaryType: "Message",
+        message: {
+          grantId: grant.id,
+          title: formData.title,
+          description: formData.description,
+          askAmount: formData.askAmount.toString(),
+        },
+      });
+      notificationId = notification.loading("Updating grant");
+      await editGrant({
+        signer: address,
+        signature,
+        ...formData,
+      });
+      await mutate("/api/grants/review");
+      notification.remove(notificationId);
+      notification.success(`Successfully updated grant ${grant.id}`);
+      closeModal();
+    } catch (error) {
+      console.error("Error editing grant", error);
+      const errorMessage = getParsedError(error);
+      notification.error(errorMessage);
+    } finally {
+      if (notificationId) notification.remove(notificationId);
+    }
+  };
+
   return (
     <dialog id="edit_grant_modal" className="modal" ref={ref}>
       <div className="modal-box flex flex-col space-y-3">
@@ -66,6 +128,14 @@ export const EditGrantModal = forwardRef<HTMLDialogElement, EditGrantModalProps>
             onChange={handleInputChange}
           />
         </div>
+        <button
+          className={`btn btn-md btn-success ${isLoading ? "opacity-50" : ""}`}
+          onClick={handleEditGrant}
+          disabled={isLoading}
+        >
+          {isLoading && <span className="loading loading-spinner"></span>}
+          Submit
+        </button>
       </div>
     </dialog>
   );
diff --git a/packages/nextjs/app/admin/_components/GrantReview.tsx b/packages/nextjs/app/admin/_components/GrantReview.tsx
index 57b23bcf..678d13d9 100644
--- a/packages/nextjs/app/admin/_components/GrantReview.tsx
+++ b/packages/nextjs/app/admin/_components/GrantReview.tsx
@@ -149,7 +149,7 @@ export const GrantReview = ({ grant, selected, toggleSelection }: GrantReviewPro
           </button>
         </div>
       </div>
-      <EditGrantModal ref={editGrantModalRef} grant={grant} />
+      <EditGrantModal ref={editGrantModalRef} grant={grant} closeModal={() => editGrantModalRef?.current?.close()} />
       <ActionModal ref={actionModalRef} grant={grant} initialTxLink={txResult?.hash} />
     </div>
   );
diff --git a/packages/nextjs/app/api/grants/[grantId]/route.ts b/packages/nextjs/app/api/grants/[grantId]/route.ts
index ed813823..1e8f716b 100644
--- a/packages/nextjs/app/api/grants/[grantId]/route.ts
+++ b/packages/nextjs/app/api/grants/[grantId]/route.ts
@@ -25,7 +25,7 @@ export async function PATCH(req: NextRequest, { params }: { params: { grantId: s
       domain: EIP_712_DOMAIN,
       types: EIP_712_TYPES_EDIT_GRANT,
       primaryType: "Message",
-      message: { title, description, askAmount: askAmount.toString() },
+      message: { title, description, askAmount: askAmount.toString(), grantId },
       signature: signature,
     });
     if (recoveredAddress !== signer) {
@@ -39,6 +39,7 @@ export async function PATCH(req: NextRequest, { params }: { params: { grantId: s
     }
 
     await updateGrant(grantId, { title, description, askAmount });
+    return NextResponse.json({ success: true });
   } catch (e) {
     console.error(e);
     return NextResponse.json({ error: "Error editing grant" }, { status: 500 });
diff --git a/packages/nextjs/utils/eip712.ts b/packages/nextjs/utils/eip712.ts
index 8362edc0..00fdb9e5 100644
--- a/packages/nextjs/utils/eip712.ts
+++ b/packages/nextjs/utils/eip712.ts
@@ -11,7 +11,12 @@ export const EIP_712_TYPES__APPLY_FOR_GRANT = {
 } as const;
 
 export const EIP_712_TYPES_EDIT_GRANT = {
-  Message: [...EIP_712_TYPES__APPLY_FOR_GRANT.Message, { name: "askAmount", type: "string" }],
+  Message: [
+    ...EIP_712_TYPES__APPLY_FOR_GRANT.Message,
+
+    { name: "grantId", type: "string" },
+    { name: "askAmount", type: "string" },
+  ],
 } as const;
 
 export const EIP_712_TYPES__REVIEW_GRANT = {

From 1d000c662c38e5ef3a5e3443e3eb9cfbe0f8d684 Mon Sep 17 00:00:00 2001
From: Shiv Bhonde <shivbhonde04@gmail.com>
Date: Sun, 24 Mar 2024 01:56:25 +0530
Subject: [PATCH 06/10] self center edit icon

---
 packages/nextjs/app/admin/_components/GrantReview.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/nextjs/app/admin/_components/GrantReview.tsx b/packages/nextjs/app/admin/_components/GrantReview.tsx
index 678d13d9..40cd27f8 100644
--- a/packages/nextjs/app/admin/_components/GrantReview.tsx
+++ b/packages/nextjs/app/admin/_components/GrantReview.tsx
@@ -79,7 +79,7 @@ export const GrantReview = ({ grant, selected, toggleSelection }: GrantReviewPro
         <div className="font-bold flex flex-col gap-1 lg:gap-2 lg:flex-row items-baseline">
           <h1 className="text-lg m-0">{grant.title}</h1>
           <span className="text-sm text-gray-500">({grant.id})</span>
-          <button className="cursor-pointer" onClick={() => editGrantModalRef?.current?.showModal()}>
+          <button className="cursor-pointer self-center" onClick={() => editGrantModalRef?.current?.showModal()}>
             <PencilSquareIcon className="h-5 w-5" />
           </button>
           {grant.link && (

From e5e1abbb0f9f52b749cf45ae3eef9e88a219b77d Mon Sep 17 00:00:00 2001
From: Shiv Bhonde <shivbhonde04@gmail.com>
Date: Sun, 24 Mar 2024 02:09:45 +0530
Subject: [PATCH 07/10] move edit icon at last, increase height, add flex-wrap

---
 packages/nextjs/app/admin/_components/GrantReview.tsx | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/nextjs/app/admin/_components/GrantReview.tsx b/packages/nextjs/app/admin/_components/GrantReview.tsx
index 40cd27f8..065e1775 100644
--- a/packages/nextjs/app/admin/_components/GrantReview.tsx
+++ b/packages/nextjs/app/admin/_components/GrantReview.tsx
@@ -76,17 +76,17 @@ export const GrantReview = ({ grant, selected, toggleSelection }: GrantReviewPro
   return (
     <div className="border-4 rounded-lg p-4 my-4">
       <div className="flex justify-between mb-2">
-        <div className="font-bold flex flex-col gap-1 lg:gap-2 lg:flex-row items-baseline">
+        <div className="font-bold flex flex-col gap-1 lg:gap-2 lg:flex-row lg:flex-wrap items-baseline">
           <h1 className="text-lg m-0">{grant.title}</h1>
           <span className="text-sm text-gray-500">({grant.id})</span>
-          <button className="cursor-pointer self-center" onClick={() => editGrantModalRef?.current?.showModal()}>
-            <PencilSquareIcon className="h-5 w-5" />
-          </button>
           {grant.link && (
             <a href={grant.link} className="underline text-sm" target="_blank" rel="noopener noreferrer">
               View Build <ArrowTopRightOnSquareIcon className="h-4 w-4 inline" />
             </a>
           )}
+          <button className="cursor-pointer self-center" onClick={() => editGrantModalRef?.current?.showModal()}>
+            <PencilSquareIcon className="h-6 w-6" />
+          </button>
         </div>
         <input
           type="checkbox"

From b77e0a945dfebce2a26fc5c9769f603f57766818 Mon Sep 17 00:00:00 2001
From: Shiv Bhonde <shivbhonde04@gmail.com>
Date: Mon, 25 Mar 2024 16:07:05 +0530
Subject: [PATCH 08/10] fix bug of number converting to string

---
 packages/nextjs/app/admin/_components/EditGrantModal.tsx | 7 +++++--
 packages/nextjs/app/api/grants/[grantId]/route.ts        | 2 +-
 2 files changed, 6 insertions(+), 3 deletions(-)

diff --git a/packages/nextjs/app/admin/_components/EditGrantModal.tsx b/packages/nextjs/app/admin/_components/EditGrantModal.tsx
index 8e80cf8a..7158d8b7 100644
--- a/packages/nextjs/app/admin/_components/EditGrantModal.tsx
+++ b/packages/nextjs/app/admin/_components/EditGrantModal.tsx
@@ -24,7 +24,7 @@ export const EditGrantModal = forwardRef<HTMLDialogElement, EditGrantModalProps>
   const [formData, setFormData] = useState({
     title: grant.title,
     description: grant.description,
-    askAmount: grant.askAmount,
+    askAmount: grant.askAmount.toString(),
   });
 
   const { address } = useAccount();
@@ -60,7 +60,9 @@ export const EditGrantModal = forwardRef<HTMLDialogElement, EditGrantModalProps>
           grantId: grant.id,
           title: formData.title,
           description: formData.description,
-          askAmount: formData.askAmount.toString(),
+          // Converting this to number with parseFloat and again to string (similar to backend),
+          // if not it generates different signature with .23 and 0.23
+          askAmount: parseFloat(formData.askAmount).toString(),
         },
       });
       notificationId = notification.loading("Updating grant");
@@ -68,6 +70,7 @@ export const EditGrantModal = forwardRef<HTMLDialogElement, EditGrantModalProps>
         signer: address,
         signature,
         ...formData,
+        askAmount: parseFloat(formData.askAmount),
       });
       await mutate("/api/grants/review");
       notification.remove(notificationId);
diff --git a/packages/nextjs/app/api/grants/[grantId]/route.ts b/packages/nextjs/app/api/grants/[grantId]/route.ts
index 1e8f716b..4b5b3761 100644
--- a/packages/nextjs/app/api/grants/[grantId]/route.ts
+++ b/packages/nextjs/app/api/grants/[grantId]/route.ts
@@ -17,7 +17,7 @@ export async function PATCH(req: NextRequest, { params }: { params: { grantId: s
     const { grantId } = params;
     const { title, description, signature, signer, askAmount } = (await req.json()) as ReqBody;
 
-    if (!title || !description || !askAmount || !signature || !signer) {
+    if (!title || !description || !askAmount || typeof askAmount !== "number" || !signature || !signer) {
       return NextResponse.json({ error: "Invalid form details submited" }, { status: 400 });
     }
 

From 093df8f2207d01821060d5ddb16d106d1943ac24 Mon Sep 17 00:00:00 2001
From: Shiv Bhonde <shivbhonde04@gmail.com>
Date: Mon, 25 Mar 2024 16:40:42 +0530
Subject: [PATCH 09/10] disbale askAmount on frontend if status is submitted

---
 packages/nextjs/app/admin/_components/EditGrantModal.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/nextjs/app/admin/_components/EditGrantModal.tsx b/packages/nextjs/app/admin/_components/EditGrantModal.tsx
index 7158d8b7..88cdfc2e 100644
--- a/packages/nextjs/app/admin/_components/EditGrantModal.tsx
+++ b/packages/nextjs/app/admin/_components/EditGrantModal.tsx
@@ -125,6 +125,7 @@ export const EditGrantModal = forwardRef<HTMLDialogElement, EditGrantModalProps>
           <input
             type="number"
             name="askAmount"
+            disabled={grant.status === "submitted"}
             placeholder="ask amount"
             value={formData.askAmount}
             className="input input-sm input-bordered w-full"

From 87f39868938fc971bbda18c17d1d387dca3cad47 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Carlos=20S=C3=A1nchez?= <oceanrdn@gmail.com>
Date: Mon, 25 Mar 2024 15:28:59 +0100
Subject: [PATCH 10/10] Fix type name for consitency

---
 packages/nextjs/app/admin/_components/EditGrantModal.tsx | 4 ++--
 packages/nextjs/app/api/grants/[grantId]/route.ts        | 4 ++--
 packages/nextjs/utils/eip712.ts                          | 2 +-
 3 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/packages/nextjs/app/admin/_components/EditGrantModal.tsx b/packages/nextjs/app/admin/_components/EditGrantModal.tsx
index 88cdfc2e..9a51274e 100644
--- a/packages/nextjs/app/admin/_components/EditGrantModal.tsx
+++ b/packages/nextjs/app/admin/_components/EditGrantModal.tsx
@@ -3,7 +3,7 @@ import { useSWRConfig } from "swr";
 import useSWRMutation from "swr/mutation";
 import { useAccount, useNetwork, useSignTypedData } from "wagmi";
 import { GrantDataWithBuilder } from "~~/services/database/schema";
-import { EIP_712_DOMAIN, EIP_712_TYPES_EDIT_GRANT } from "~~/utils/eip712";
+import { EIP_712_DOMAIN, EIP_712_TYPES__EDIT_GRANT } from "~~/utils/eip712";
 import { getParsedError, notification } from "~~/utils/scaffold-eth";
 import { patchMutationFetcher } from "~~/utils/swr";
 
@@ -54,7 +54,7 @@ export const EditGrantModal = forwardRef<HTMLDialogElement, EditGrantModalProps>
     try {
       const signature = await signTypedDataAsync({
         domain: EIP_712_DOMAIN,
-        types: EIP_712_TYPES_EDIT_GRANT,
+        types: EIP_712_TYPES__EDIT_GRANT,
         primaryType: "Message",
         message: {
           grantId: grant.id,
diff --git a/packages/nextjs/app/api/grants/[grantId]/route.ts b/packages/nextjs/app/api/grants/[grantId]/route.ts
index 4b5b3761..451a90c0 100644
--- a/packages/nextjs/app/api/grants/[grantId]/route.ts
+++ b/packages/nextjs/app/api/grants/[grantId]/route.ts
@@ -2,7 +2,7 @@ import { NextRequest, NextResponse } from "next/server";
 import { recoverTypedDataAddress } from "viem";
 import { updateGrant } from "~~/services/database/grants";
 import { findUserByAddress } from "~~/services/database/users";
-import { EIP_712_DOMAIN, EIP_712_TYPES_EDIT_GRANT } from "~~/utils/eip712";
+import { EIP_712_DOMAIN, EIP_712_TYPES__EDIT_GRANT } from "~~/utils/eip712";
 
 type ReqBody = {
   title?: string;
@@ -23,7 +23,7 @@ export async function PATCH(req: NextRequest, { params }: { params: { grantId: s
 
     const recoveredAddress = await recoverTypedDataAddress({
       domain: EIP_712_DOMAIN,
-      types: EIP_712_TYPES_EDIT_GRANT,
+      types: EIP_712_TYPES__EDIT_GRANT,
       primaryType: "Message",
       message: { title, description, askAmount: askAmount.toString(), grantId },
       signature: signature,
diff --git a/packages/nextjs/utils/eip712.ts b/packages/nextjs/utils/eip712.ts
index 00fdb9e5..90a29579 100644
--- a/packages/nextjs/utils/eip712.ts
+++ b/packages/nextjs/utils/eip712.ts
@@ -10,7 +10,7 @@ export const EIP_712_TYPES__APPLY_FOR_GRANT = {
   ],
 } as const;
 
-export const EIP_712_TYPES_EDIT_GRANT = {
+export const EIP_712_TYPES__EDIT_GRANT = {
   Message: [
     ...EIP_712_TYPES__APPLY_FOR_GRANT.Message,