feat: List members of the batch from BatchRegistry contract

packages/nextjs/.gitignore

@@ -36,4 +36,7 @@ yarn-error.log*
 # typescript
 *.tsbuildinfo
 
+# Auto-generated files
+/generated/existingBuilderProfiles.ts
+
 ipfs-upload.config.json

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

@@ -0,0 +1,34 @@
+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",
+  "0x2E15bB8aDF3438F66A6F786679B0bBBBF02A75d5",
+  "0x3BFbE4E3dCC472E9B1bdFC0c177dE3459Cf769bf",
+  "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/page.tsx

@@ -0,0 +1,250 @@
+"use client";
+
+import { useEffect, useMemo, useState } from "react";
+import Link from "next/link";
+import type { NextPage } from "next";
+import { Address as AddressType } from "viem";
+import { usePublicClient } from "wagmi";
+import { Address } from "~~/components/scaffold-eth";
+import { useScaffoldEventHistory, useScaffoldReadContract } from "~~/hooks/scaffold-eth";
+
+// Helper component to display individual builder details with check-in date
+type BuilderDetailsRowProps = {
+  builderAddress: AddressType;
+  checkInContractAddress: AddressType;
+  blockNumber: bigint;
+  existingProfiles: string[];
+};
+
+/**
+ * Displays a single builder's information including address, contract, and graduation status
+ */
+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">
+      <div className="card-body p-5 md:p-6">
+        {/* 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">
+          <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">
+            <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>
+  );
+};
+
+const BuildersList: NextPage = () => {
+  const { data: checkedInCounter } = useScaffoldReadContract({
+    contractName: "BatchRegistry",
+    functionName: "checkedInCounter",
+  });
+
+  const {
+    data: checkedInEvents,
+    isLoading: isLoadingEvents,
+    error: errorEvents,
+  } = useScaffoldEventHistory({
+    contractName: "BatchRegistry",
+    eventName: "CheckedIn",
+    fromBlock: 334314026n, // DEPLOY_BLOCK
+    watch: true,
+  });
+
+  const buildersWithFirstCheckInBlock = useMemo(() => {
+    if (!checkedInEvents || checkedInEvents.length === 0) return [];
+
+    // Sort events chronologically (earliest block first) to correctly identify each builder's FIRST check-in,
+    // since a builder may have checked in multiple times with different contracts.
+    // Handle potential null blockNumbers, though unlikely for valid events.
+    const sortedEvents = [...checkedInEvents].sort((a, b) => {
+      const blockA = a.blockNumber ?? 0n; // Default to 0 if null, for robust sorting
+      const blockB = b.blockNumber ?? 0n; // Default to 0 if null, for robust sorting
+      if (blockA < blockB) return -1;
+      if (blockA > blockB) return 1;
+      return 0;
+    });
+
+    const firstCheckIns = new Map<AddressType, { blockNumber: bigint; checkInContract: AddressType }>();
+
+    for (const event of sortedEvents) {
+      // Skip events with undefined args
+      if (!event.args) continue;
+
+      const builderAddress = event.args.builder as AddressType | undefined;
+      const contractAddress = event.args.checkInContract as AddressType | undefined;
+      const blockNumber = event.blockNumber;
+
+      // Ensure all necessary data is present and the builder hasn't been added yet.
+      if (builderAddress && contractAddress && 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,
+    }));
+  }, [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();
+  }, []);
+
+  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>
+
+        {profilesError && (
+          <div className="mt-2 text-sm text-warning">
+            <span>{profilesError}</span>
+          </div>
+        )}
+      </div>
+
+      <div className="max-w-3xl mx-auto">
+        {(isLoadingEvents || isLoadingProfiles) && (
+          <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>
+        )}
+        {errorEvents && (
+          <div role="alert" className="alert alert-error shadow-md">
+            <span className="text-error-content">Error loading events. (Message: {errorEvents.message})</span>
+          </div>
+        )}
+        {!isLoadingEvents && !isLoadingProfiles && !errorEvents && (
+          <div className="grid grid-cols-1 gap-6">
+            {buildersWithFirstCheckInBlock.length === 0 ? (
+              <div className="card bg-base-100 shadow-md border border-base-300/50 dark:border-base-300/30">
+                <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>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default BuildersList;

packages/nextjs/generated/.gitkeep

@@ -0,0 +1,2 @@
+# This directory will contain auto-generated files
+# The .gitkeep file ensures this directory is tracked by git even when empty 

packages/nextjs/package.json

@@ -3,7 +3,7 @@
   "private": true,
   "version": "0.1.0",
   "scripts": {
-    "build": "next build",
+    "build": "node scripts/update-builder-profiles.js && next build",
     "check-types": "tsc --noEmit --incremental",
     "dev": "next dev",
     "format": "prettier --write . '!(node_modules|.next|contracts)/**/*'",
@@ -13,7 +13,8 @@
     "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": "node scripts/update-builder-profiles.js"
   },
   "dependencies": {
     "@heroicons/react": "^2.1.5",

packages/nextjs/scripts/update-builder-profiles.js

@@ -0,0 +1,78 @@
+#!/usr/bin/env node
+
+/**
+ * This script scans the builders directory for profile pages
+ * and updates the API route with the list of found profiles.
+ * 
+ * It should be run during the build process.
+ */
+
+const fs = require('fs');
+const path = require('path');
+
+// Define paths
+const buildersDir = path.join(__dirname, '..', 'app', 'builders');
+const apiRoutePath = path.join(__dirname, '..', 'app', 'api', 'builders', 'profiles', 'route.ts');
+
+// Regular expression for Ethereum addresses
+const ETH_ADDRESS_REGEX = /^0x[a-fA-F0-9]{40}$/;
+
+console.log('Scanning builder profiles...');
+
+// Check if builders directory exists
+if (!fs.existsSync(buildersDir)) {
+    console.log('Builders directory not found.');
+    process.exit(0);
+}
+
+// Check if a directory is a valid builder profile
+// 1. Must have a name that looks like an Ethereum address
+// 2. Must contain a page.tsx or page.js file
+function isValidBuilderProfile(dirName) {
+    // Skip non-address-looking directories
+    if (!ETH_ADDRESS_REGEX.test(dirName)) {
+        return false;
+    }
+
+    // Check if directory contains a page component
+    const dirPath = path.join(buildersDir, dirName);
+    const isDir = fs.statSync(dirPath).isDirectory();
+
+    if (!isDir) {
+        return false;
+    }
+
+    return (
+        fs.existsSync(path.join(dirPath, 'page.tsx')) ||
+        fs.existsSync(path.join(dirPath, 'page.js'))
+    );
+}
+
+// Scan for builder profiles (directories in the builders folder that contain pages)
+const builderProfiles = fs.readdirSync(buildersDir, { withFileTypes: true })
+    .filter(dirent => dirent.isDirectory() && dirent.name !== 'components')
+    .map(dirent => dirent.name)
+    .filter(isValidBuilderProfile);
+
+console.log(`Found ${builderProfiles.length} builder profiles.`);
+
+// Check if API route file exists
+if (!fs.existsSync(apiRoutePath)) {
+    console.error('API route file not found.');
+    process.exit(1);
+}
+
+// Read the API route file
+let routeContent = fs.readFileSync(apiRoutePath, 'utf8');
+
+// Replace the BUILDER_PROFILES array content
+const newArray = JSON.stringify(builderProfiles, null, 2);
+routeContent = routeContent.replace(
+    /const BUILDER_PROFILES = \[([\s\S]*?)\];/,
+    `const BUILDER_PROFILES = ${newArray};`
+);
+
+// Write the updated content back to the file
+fs.writeFileSync(apiRoutePath, routeContent);
+
+console.log('Builder profiles API route updated successfully.');