feat: List members of the batch from BatchRegistry contract

[dmystical-coder]

Description

This PR implements the feature to list all builders who have checked in to the BatchRegistry contract. It displays each builder's address, their deployed contract, check-in date, and graduation status, with links to individual profile pages when available.

Screenshots

Additional Information

• Lists all builders who have checked in based on the CheckedIn events from the BatchRegistry contract
• Fetches additional data for each builder (graduation status from graduatedTokenId)
• Displays check-in date by fetching the block timestamp for each builder's first check-in
• Conditionally renders "View Profile" links for builders with existing profile pages
• Supports both light and dark modes
• Responsive layout

Technical Approach

• Used useScaffoldEventHistory to fetch all CheckedIn events, then processed to get unique builders
• Added a script (scripts/generate-existing-profiles.js) that auto-detects existing builder profile pages during build
• Implemented robust error handling and loading states for all async operations
• Optimized event sorting to correctly identify first check-in date when a builder has checked in multiple times
• Used React's useMemo to efficiently process events without unnecessary recalculations

File Changes

• Added: packages/nextjs/app/builders/page.tsx - Main page component

• Added: packages/nextjs/scripts/generate-existing-profiles.js - Script for profile detection

• Added: packages/nextjs/generated/.gitkeep - Ensures directory exists for generated files

• Modified: packages/nextjs/package.json - Added build script integration

• Modified: packages/nextjs/.gitignore - Added generated file to ignore list

• I have read the contributing docs (if this is your first contribution)

• This is not a duplicate of any existing pull request

Related Issues

Closes #3 : List the members of the batch (read batch registry contract)

Your ENS/address:
0x119d9A1ef0D16361284a9661727b363B04B5B0c8

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
batch16.buidlguidl.com	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	May 21, 2025 0:09am

[phipsae]

Thanks a lot for taking on one of the toughest issues!
I really like that you include the check-in date and use the graduate status.

Before diving deeper into the code, I'm not sure this will work as expected. When exactly is the script supposed to run? It needs to be triggered somehow, and the output would then need to be deployed to Vercel?

Ideally, we want this to run automatically (whenever a new page is deployed, it should be updated). Could you consider implementing it as an API route instead? Keep in mind that Vercel’s serverless environment has some limitations with fs, so file system access can be tricky.

Give it a try, and feel free to reach out if anything’s unclear.

[dmystical-coder]

Before diving deeper into the code, I'm not sure this will work as expected. When exactly is the script supposed to run? It needs to be triggered somehow, and the output would then need to be deployed to Vercel?

The script runs during the build process automatically, whenever anyone runs yarn build locally or Vercel runs its build process, the script executes first.

[dmystical-coder]

@phipsae

[phipsae]

@dmystical-coder it's a nice solution!

Sorry for my late response, I will give you a review tomorrow.

[phipsae]

Thanks a lot for the implementation and for tackling one of our toughest issues! Well done!

Running a script beforehand is a nice approach, I haven’t considered that before. I think the generated file (as in your initial solution) could have worked just as well, but your current approach with the route is solid too.

One small improvement: could you add a link to the builders page in the main page header, so that we can access it?

I've left a few comments below.

[dmystical-coder]

Thank you for your kind words 😊.

[phipsae]

Thanks for the changes!

Just these little comments below and then we merge :)

[phipsae]

Great, thanks a lot! Let's finally merge it :)