Admin page with admin data

packages/nextjs/app/admin/page.tsx

@@ -1,12 +1,56 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { useReadLocalStorage } from "usehooks-ts";
+import { useAccount } from "wagmi";
 import SIWE from "~~/components/SIWE";
+import { GrantData } from "~~/services/database/schema";
+import { notification } from "~~/utils/scaffold-eth";
+
+const AdminPage = () => {
+  const [grants, setGrants] = useState<GrantData[]>([]);
+  const { isConnected } = useAccount();
+  const jwt = useReadLocalStorage("jwt");
+
+  // In use effect, make get request (with JWT) to /api/grants/all
+  useEffect(() => {
+    const getGrants = async () => {
+      try {
+        const response = await fetch("/api/grants/all", {
+          headers: {
+            Authorization: `Bearer ${jwt}`,
+          },
+        });
+        const grants: GrantData[] = (await response.json()).data;
+        setGrants(grants);
+      } catch (error) {
+        notification.error("Error getting grants");
+      }
+    };
+
+    if (jwt) getGrants();
+  }, [jwt]);
 
-const Home = () => {
   return (
     <div className="container mx-auto max-w-screen-md mt-12">
       <h1 className="text-4xl font-bold">Admin page</h1>
       <SIWE />
+      <h2 className="font-bold mt-8">Admin data:</h2>
+      {!isConnected || !jwt ? (
+        <p>Connect & authenticate to see admin data</p>
+      ) : (
+        <>
+          <h2 className="font-bold mt-8">All grants:</h2>
+          {grants.map(grant => (
+            <div key={grant.id} className="border p-4 my-4">
+              <h3 className="font-bold">{grant.title}</h3>
+              <p>{grant.description}</p>
+            </div>
+          ))}
+        </>
+      )}
     </div>
   );
 };
 
-export default Home;
+export default AdminPage;

packages/nextjs/app/api/auth/siwe/route.tsx

@@ -1,3 +1,4 @@
+import { NextResponse } from "next/server";
 import jwt from "jsonwebtoken";
 import { verifyMessage } from "viem";
 import { findUserByAddress } from "~~/services/database/users";
@@ -17,7 +18,5 @@ export async function POST(request: Request) {
 
   const token = jwt.sign({ address }, process.env.JWT_SECRET, { expiresIn: "1w" });
 
-  return new Response(JSON.stringify({ token }), {
-    headers: { "Content-Type": "application/json" },
-  });
+  return NextResponse.json({ token });
 }

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

@@ -0,0 +1,22 @@
+import { NextResponse } from "next/server";
+import jwt from "jsonwebtoken";
+import { getAllGrants } from "~~/services/database/grants";
+
+export async function GET(request: Request) {
+  // ToDo. We probably want to use a middleware for this.
+  const authHeader = request.headers.get("Authorization");
+  if (!authHeader || !authHeader.startsWith("Bearer ")) {
+    return new Response("Unauthorized", { status: 401 });
+  }
+
+  const token = authHeader.split(" ")[1];
+  try {
+    jwt.verify(token, process.env.JWT_SECRET || "");
+  } catch (error) {
+    return new Response("Unauthorized", { status: 401 });
+  }
+
+  const grants = await getAllGrants();
+
+  return NextResponse.json({ data: grants });
+}

packages/nextjs/app/page.tsx

@@ -1,16 +1,13 @@
 import { CompletedGrants } from "./_components/CompletedGrants";
 import { GrantsStats } from "./_components/GrantsStats";
 import { HomepageHero } from "./_components/HomepageHero";
-import SIWE from "~~/components/SIWE";
 
 const Home = () => {
   return (
     <>
       <HomepageHero />
       <GrantsStats />
       <CompletedGrants />
-      <h2 className="font-bold mt-8">SIWE:</h2>
-      <SIWE />
     </>
   );
 };

packages/nextjs/components/SIWE.tsx

@@ -5,7 +5,7 @@ import { useLocalStorage } from "usehooks-ts";
 import { useAccount, useSignMessage } from "wagmi";
 import { notification } from "~~/utils/scaffold-eth";
 
-// ToDo. Connect wallet tooltip if disabled
+// ToDo. "Connect wallet" info tooltip if disabled
 // ToDo. Nonce?
 // ToDo. Check if expired?
 const SIWE = () => {