My grants page (#23)

packages/nextjs/app/api/builders/[builderAddress]/grants/route.ts

@@ -0,0 +1,17 @@
+import { NextResponse } from "next/server";
+import { getAllGrantsForUser } from "~~/services/database/grants";
+
+export async function GET(_request: Request, { params }: { params: { builderAddress: string } }) {
+  try {
+    const builderAddress = params.builderAddress;
+    const grants = await getAllGrantsForUser(builderAddress);
+    return NextResponse.json(grants);
+  } catch (error) {
+    return NextResponse.json(
+      { error: "Internal Server Error" },
+      {
+        status: 500,
+      },
+    );
+  }
+}

packages/nextjs/app/api/grants/review/route.tsx

@@ -2,7 +2,15 @@ import { NextResponse } from "next/server";
 import { getAllGrantsForReview } from "~~/services/database/grants";
 
 export async function GET() {
-  const grants = await getAllGrantsForReview();
-
-  return NextResponse.json({ data: grants });
+  try {
+    const grants = await getAllGrantsForReview();
+    return NextResponse.json({ data: grants });
+  } catch (error) {
+    return NextResponse.json(
+      { error: "Internal Server Error" },
+      {
+        status: 500,
+      },
+    );
+  }
 }

packages/nextjs/app/my-grants/page.tsx

@@ -0,0 +1,41 @@
+"use client";
+
+import { NextPage } from "next";
+import useSWR from "swr";
+import { useAccount } from "wagmi";
+import { GrantData } from "~~/services/database/schema";
+import { PROPOSAL_STATUS } from "~~/utils/grants";
+
+const badgeBgColor = {
+  [PROPOSAL_STATUS.PROPOSED]: "bg-warning",
+  [PROPOSAL_STATUS.APPROVED]: "bg-success",
+  [PROPOSAL_STATUS.SUBMITTED]: "bg-warning",
+  [PROPOSAL_STATUS.COMPLETED]: "bg-success",
+  [PROPOSAL_STATUS.REJECTED]: "bg-error",
+};
+
+// ToDo. Action (v1.0 = submit grant after completion)
+const MyGrants: NextPage = () => {
+  const { address } = useAccount();
+  const { data: builderGrants, isLoading } = useSWR<GrantData[]>(address ? `/api/builders/${address}/grants` : null);
+
+  return (
+    <div className="container mx-auto max-w-screen-md mt-12">
+      <h1 className="text-4xl font-bold">My grants</h1>
+      {isLoading && <span className="loading loading-spinner"></span>}
+      {builderGrants?.length === 0 && <p>No grants found</p>}
+      {builderGrants?.map(grant => (
+        <div key={grant.id} className="border p-4 my-4">
+          <h3 className="font-bold">
+            {grant.title}
+            <span className="text-sm text-gray-500 ml-2">({grant.id})</span>
+          </h3>
+          <p>{grant.description}</p>
+          <p className={`badge ${badgeBgColor[grant.status]}`}>{grant.status}</p>
+        </div>
+      ))}
+    </div>
+  );
+};
+
+export default MyGrants;

packages/nextjs/components/Header.tsx

@@ -4,7 +4,7 @@ import Link from "next/link";
 import { usePathname } from "next/navigation";
 import { RainbowKitCustomConnectButton } from "./scaffold-eth";
 import { useAccount } from "wagmi";
-import { LockClosedIcon } from "@heroicons/react/24/outline";
+import { AcademicCapIcon, LockClosedIcon } from "@heroicons/react/24/outline";
 import { useBGBuilderData } from "~~/hooks/useBGBuilderData";
 
 type HeaderMenuLink = {
@@ -15,8 +15,9 @@ type HeaderMenuLink = {
 
 export const menuLinks: HeaderMenuLink[] = [
   {
-    label: "Home",
-    href: "/",
+    label: "My Grants",
+    href: "/my-grants",
+    icon: <AcademicCapIcon className="h-4 w-4" />,
   },
   {
     label: "Admin",
@@ -35,6 +36,7 @@ export const HeaderMenuLinks = () => {
       {menuLinks.map(({ label, href, icon }) => {
         const isActive = pathname === href;
         if (href === "/admin" && builderData?.role !== "admin") return null;
+        if (href === "/my-grants" && !builderData) return null;
         return (
           <li key={href}>
             <Link

packages/nextjs/services/database/grants.ts

@@ -36,6 +36,20 @@ export const getAllGrants = async () => {
   }
 };
 
+export const getAllGrantsForUser = async (userAddress: string) => {
+  try {
+    const grantsSnapshot = await grantsCollection.where("builder", "==", userAddress).get();
+    const grants: GrantData[] = [];
+    grantsSnapshot.forEach(doc => {
+      grants.push({ id: doc.id, ...doc.data() } as GrantData);
+    });
+    return grants;
+  } catch (error) {
+    console.error("Error getting all grants for user:", error);
+    throw error;
+  }
+};
+
 export const getAllGrantsForReview = async () => {
   try {
     const grantsSnapshot = await grantsCollection