feat: List members of the batch from BatchRegistry contract

packages/nextjs/app/api/builders/profiles/route.ts

@@ -0,0 +1,39 @@
+import { NextResponse } from "next/server";
+
+// Statically define known builder profiles
+// This will be built into the application at build time
+// and will be automatically updated when new profiles are added to the codebase
+const BUILDER_PROFILES = [
+  "0x119d9A1ef0D16361284a9661727b363B04B5B0c8",
+  "0x167142915AD0fAADD84d9741eC253B82aB8625cd",
+  "0x208B2660e5F62CDca21869b389c5aF9E7f0faE89",
+  "0x2E15bB8aDF3438F66A6F786679B0bBBBF02A75d5",
+  "0x2d90C8bE0Df1BA58a66282bc4Ed03b330eBD7911",
+  "0x3BFbE4E3dCC472E9B1bdFC0c177dE3459Cf769bf",
+  "0xB24023434c3670E100068C925A87fE8F500d909a",
+  "0xE00E720798803B8B83379720c42f7A9bE1cCd281",
+  "0xb216270aFB9DfcD611AFAf785cEB38250863F2C9",
+  "0xe98540d28F45830E01D237251Bfc4777E69c9A46",
+];
+
+export const dynamic = "force-dynamic"; // Don't cache this route
+
+export async function GET() {
+  try {
+    // In a real production environment, this endpoint could:
+    // 1. Fetch from a database
+    // 2. Check against a predefined list that's updated during CI/CD
+    // 3. Use server-only code to scan directories in a non-serverless environment
+
+    // For this implementation, we're returning the predefined list
+    // that will be populated during build time
+
+    // Get all directories in /app/builders/[address] automatically via Next.js route conventions
+    const builderProfiles = BUILDER_PROFILES;
+
+    return NextResponse.json({ profiles: builderProfiles }, { status: 200 });
+  } catch (error) {
+    console.error("Error fetching builder profiles:", error);
+    return NextResponse.json({ profiles: [], error: "Failed to fetch profiles" }, { status: 500 });
+  }
+}

packages/nextjs/app/builders/components/BuilderDetailsRow.tsx

@@ -0,0 +1,107 @@
+"use client";
+
+import { useEffect, useMemo, useState } from "react";
+import Link from "next/link";
+import { Address as AddressType } from "viem";
+import { usePublicClient } from "wagmi";
+import { Address } from "~~/components/scaffold-eth";
+import { useScaffoldReadContract } from "~~/hooks/scaffold-eth";
+
+type BuilderDetailsRowProps = {
+  builderAddress: AddressType;
+  checkInContractAddress: AddressType;
+  blockNumber: bigint;
+  existingProfiles: string[];
+};
+
+/**
+ * Displays a single builder's information including address, contract, and graduation status
+ */
+export const BuilderDetailsRow = ({
+  builderAddress,
+  checkInContractAddress,
+  blockNumber,
+  existingProfiles,
+}: BuilderDetailsRowProps) => {
+  const publicClient = usePublicClient();
+  const [checkInDate, setCheckInDate] = useState<string>("Fetching date...");
+
+  const { data: graduatedTokenId } = useScaffoldReadContract({
+    contractName: "BatchRegistry",
+    functionName: "graduatedTokenId",
+    args: [builderAddress],
+  });
+
+  const hasGraduated = useMemo(() => graduatedTokenId && Number(graduatedTokenId) > 0, [graduatedTokenId]);
+
+  const hasProfile = useMemo(() => {
+    return existingProfiles.includes(builderAddress);
+  }, [builderAddress, existingProfiles]);
+
+  useEffect(() => {
+    const fetchBlockTimestamp = async () => {
+      if (!publicClient || blockNumber === undefined) {
+        setCheckInDate("N/A");
+        return;
+      }
+      try {
+        const block = await publicClient.getBlock({ blockNumber });
+        const date = new Date(Number(block.timestamp) * 1000);
+        setCheckInDate(date.toLocaleDateString());
+      } catch (error) {
+        console.error(`Error fetching block timestamp for block ${blockNumber}:`, error);
+        setCheckInDate("Error");
+      }
+    };
+    fetchBlockTimestamp();
+  }, [publicClient, blockNumber]);
+
+  return (
+    <div className="card bg-base-100 shadow-lg hover:shadow-xl transition-shadow duration-300 border border-base-300/50 dark:border-base-300/30 h-full flex flex-col">
+      <div className="card-body p-5 md:p-6 flex flex-col flex-grow">
+        {/* Top section: Builder EOA and Check-in Date */}
+        <div className="flex flex-col sm:flex-row sm:items-start sm:justify-between mb-3">
+          <div className="mb-2 sm:mb-0">
+            <Address address={builderAddress} size="lg" />
+          </div>
+          <div className="text-xs text-base-content/70 dark:text-base-content/60 mt-1 sm:mt-0">
+            Checked in: {checkInDate}
+          </div>
+        </div>
+
+        {/* Divider (for visual separation) */}
+        <div className="divider my-1"></div>
+
+        {/* Details Section */}
+        <div className="space-y-2 mb-4 flex-grow">
+          <div className="text-sm">
+            <span className="font-medium text-base-content/80 dark:text-base-content/70">Contract: </span>
+            <Address address={checkInContractAddress} size="sm" />
+          </div>
+          <div className="text-sm flex items-center gap-2">
+            <span className="font-medium text-base-content/80 dark:text-base-content/70">Status: </span>
+            {hasGraduated ? (
+              <span className="badge badge-sm badge-success text-success-content font-medium">
+                Graduated (ID: {graduatedTokenId?.toString()})
+              </span>
+            ) : (
+              <span className="badge badge-sm badge-neutral text-neutral-content font-medium">Not Graduated</span>
+            )}
+          </div>
+        </div>
+
+        {hasProfile && (
+          <div className="card-actions justify-start pt-2 mt-auto">
+            <Link
+              href={`/builders/${builderAddress}`}
+              passHref
+              className="btn btn-primary btn-sm dark:btn-outline dark:border-primary-content dark:text-primary-content dark:hover:bg-primary-content dark:hover:text-primary dark:hover:border-primary-content"
+            >
+              View Profile
+            </Link>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};

packages/nextjs/app/builders/components/BuilderListManager.tsx

@@ -0,0 +1,146 @@
+"use client";
+
+import { useEffect, useMemo, useState } from "react";
+import { BuilderDetailsRow } from "./BuilderDetailsRow";
+import { Address as AddressType } from "viem";
+import { useScaffoldEventHistory } from "~~/hooks/scaffold-eth";
+
+export const BuilderListManager = () => {
+  const {
+    data: checkedInEvents,
+    isLoading: isLoadingEvents,
+    error: errorEvents,
+  } = useScaffoldEventHistory({
+    contractName: "BatchRegistry",
+    eventName: "CheckedIn",
+    fromBlock: 334314026n, // DEPLOY_BLOCK
+    watch: true,
+  });
+
+  const buildersWithFirstCheckInBlock = useMemo(() => {
+    if (!checkedInEvents || !Array.isArray(checkedInEvents) || checkedInEvents.length === 0) return [];
+
+    try {
+      // Filter out any undefined events
+      const validEvents = checkedInEvents.filter(event => !!event);
+
+      // Sort events chronologically (earliest block first)
+      const sortedEvents = [...validEvents].sort((a, b) => {
+        if (!a || !b || a.blockNumber === undefined || b.blockNumber === undefined) return 0;
+        const blockA = a.blockNumber;
+        const blockB = b.blockNumber;
+        return blockA < blockB ? -1 : blockA > blockB ? 1 : 0;
+      });
+
+      const firstCheckIns = new Map<AddressType, { blockNumber: bigint; checkInContract: AddressType }>();
+
+      for (const event of sortedEvents) {
+        if (!event || !event.args) continue;
+
+        const builderAddress = event.args.builder as AddressType | undefined;
+        const contractAddress = event.args.checkInContract as AddressType | undefined;
+        const blockNumber = event.blockNumber;
+
+        if (
+          builderAddress &&
+          contractAddress &&
+          blockNumber !== undefined &&
+          blockNumber !== null &&
+          !firstCheckIns.has(builderAddress)
+        ) {
+          firstCheckIns.set(builderAddress, {
+            blockNumber,
+            checkInContract: contractAddress,
+          });
+        }
+      }
+
+      return Array.from(firstCheckIns.entries()).map(([address, data]) => ({
+        address,
+        blockNumber: data.blockNumber,
+        checkInContract: data.checkInContract,
+      }));
+    } catch (error) {
+      console.error("Error processing check-in events:", error);
+      return [];
+    }
+  }, [checkedInEvents]);
+
+  const [profilesList, setProfilesList] = useState<string[]>([]);
+  const [isLoadingProfiles, setIsLoadingProfiles] = useState(true);
+  const [profilesError, setProfilesError] = useState<string | null>(null);
+
+  useEffect(() => {
+    // Fetch builder profiles from the API route
+    const fetchProfiles = async () => {
+      try {
+        setIsLoadingProfiles(true);
+        setProfilesError(null);
+        const response = await fetch("/api/builders/profiles");
+
+        if (!response.ok) {
+          throw new Error(`API responded with status: ${response.status}`);
+        }
+
+        const data = await response.json();
+        setProfilesList(data.profiles || []);
+      } catch (error) {
+        console.error("Failed to fetch existing profiles:", error);
+        setProfilesError("Could not load profile data. Profile links may be unavailable.");
+      } finally {
+        setIsLoadingProfiles(false);
+      }
+    };
+
+    fetchProfiles();
+  }, []);
+
+  if (isLoadingEvents || isLoadingProfiles) {
+    return (
+      <div className="text-center py-10">
+        <span className="loading loading-lg loading-spinner text-primary"></span>
+        <p className="mt-4 text-lg text-base-content/70 dark:text-base-content/60">Loading builders data...</p>
+      </div>
+    );
+  }
+
+  if (errorEvents) {
+    return (
+      <div role="alert" className="alert alert-error shadow-md">
+        <span className="text-error-content">Error loading events. (Message: {errorEvents.message})</span>
+      </div>
+    );
+  }
+
+  if (profilesError) {
+    return (
+      <div className="mt-2 text-sm text-warning">
+        <span>{profilesError}</span>
+      </div>
+    );
+  }
+
+  return (
+    <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+      {buildersWithFirstCheckInBlock.length === 0 ? (
+        <div className="card bg-base-100 shadow-md border border-base-300/50 dark:border-base-300/30 md:col-span-2">
+          <div className="card-body items-center text-center p-6 md:p-8">
+            <p className="text-lg text-base-content/70 dark:text-base-content/60 py-8">
+              No builders have checked in yet.
+            </p>
+          </div>
+        </div>
+      ) : (
+        buildersWithFirstCheckInBlock.map(({ address, blockNumber, checkInContract }) => (
+          <BuilderDetailsRow
+            key={address}
+            builderAddress={address}
+            checkInContractAddress={checkInContract}
+            blockNumber={blockNumber}
+            existingProfiles={profilesList}
+          />
+        ))
+      )}
+    </div>
+  );
+};

packages/nextjs/app/builders/page.tsx

@@ -0,0 +1,29 @@
+"use client";
+
+import { BuilderListManager } from "./components/BuilderListManager";
+import { useScaffoldReadContract } from "~~/hooks/scaffold-eth";
+
+const BuildersList = () => {
+  const { data: checkedInCounter } = useScaffoldReadContract({
+    contractName: "BatchRegistry",
+    functionName: "checkedInCounter",
+  });
+
+  return (
+    <div className="container mx-auto mt-4 px-4 md:px-8 py-8 min-h-screen">
+      <div className="text-center mb-12">
+        <h1 className="text-4xl font-bold text-primary mb-2 dark:text-primary-content">Batch 16 Builders</h1>
+        <p className="text-xl text-base-content/80 dark:text-base-content/70">Checked-in Members</p>
+        <p className="text-lg text-base-content/70 dark:text-base-content/60 mt-2">
+          Total Checked In: {checkedInCounter === undefined ? "..." : (checkedInCounter?.toString() ?? "0")}
+        </p>
+      </div>
+
+      <div className="max-w-5xl mx-auto">
+        <BuilderListManager />
+      </div>
+    </div>
+  );
+};
+
+export default BuildersList;

packages/nextjs/components/Header.tsx

@@ -5,7 +5,7 @@ import Image from "next/image";
 import Link from "next/link";
 import { usePathname } from "next/navigation";
 import { hardhat } from "viem/chains";
-import { Bars3Icon, BugAntIcon } from "@heroicons/react/24/outline";
+import { Bars3Icon, BugAntIcon, UserGroupIcon } from "@heroicons/react/24/outline";
 import { FaucetButton, RainbowKitCustomConnectButton } from "~~/components/scaffold-eth";
 import { useOutsideClick, useTargetNetwork } from "~~/hooks/scaffold-eth";
 
@@ -20,6 +20,11 @@ export const menuLinks: HeaderMenuLink[] = [
     label: "Home",
     href: "/",
   },
+  {
+    label: "Builders",
+    href: "/builders",
+    icon: <UserGroupIcon className="h-4 w-4" />,
+  },
   {
     label: "Debug Contracts",
     href: "/debug",

packages/nextjs/package.json

@@ -3,17 +3,18 @@
   "private": true,
   "version": "0.1.0",
   "scripts": {
-    "build": "next build",
+    "build": "node scripts/update-builder-profiles.mjs && next build",
     "check-types": "tsc --noEmit --incremental",
-    "dev": "next dev",
+    "dev": "node scripts/update-builder-profiles.mjs && next dev",
     "format": "prettier --write . '!(node_modules|.next|contracts)/**/*'",
     "lint": "next lint",
     "serve": "next start",
-    "start": "next dev",
+    "start": "node scripts/update-builder-profiles.mjs && next dev",
     "vercel": "vercel --build-env YARN_ENABLE_IMMUTABLE_INSTALLS=false --build-env ENABLE_EXPERIMENTAL_COREPACK=1 --build-env VERCEL_TELEMETRY_DISABLED=1",
     "vercel:yolo": "vercel --build-env YARN_ENABLE_IMMUTABLE_INSTALLS=false --build-env ENABLE_EXPERIMENTAL_COREPACK=1 --build-env NEXT_PUBLIC_IGNORE_BUILD_ERROR=true --build-env VERCEL_TELEMETRY_DISABLED=1",
     "ipfs": "NEXT_PUBLIC_IPFS_BUILD=true yarn build && yarn bgipfs upload config init -u https://upload.bgipfs.com && CID=$(yarn bgipfs upload out | grep -o 'CID: [^ ]*' | cut -d' ' -f2) && [ ! -z \"$CID\" ] && echo '🚀 Upload complete! Your site is now available at: https://community.bgipfs.com/ipfs/'$CID || echo '❌ Upload failed'",
-    "vercel:login": "vercel login"
+    "vercel:login": "vercel login",
+    "update-profiles": "yarn workspace @se-2/nextjs update-profiles"
   },
   "dependencies": {
     "@heroicons/react": "^2.1.5",
@@ -28,7 +29,7 @@
     "lucide-react": "^0.510.0",
     "next": "^15.2.3",
     "next-nprogress-bar": "^2.3.13",
-"next-themes": "^0.3.0",
+    "next-themes": "^0.3.0",
     "qrcode.react": "^4.0.1",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",