Skip to content

Commit

Permalink
Merge pull request #20 from gboigwe/builders-grid
Browse files Browse the repository at this point in the history
feat: enhance homepage and add builders grid
  • Loading branch information
phipsae authored Dec 12, 2024
2 parents ebc928b + 75eb1f9 commit 49dc849
Show file tree
Hide file tree
Showing 3 changed files with 94 additions and 0 deletions.
19 changes: 19 additions & 0 deletions packages/nextjs/app/api/builders/route.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
import { NextResponse } from "next/server";
import { readdir } from "fs/promises";
import path from "path";

export async function GET() {
const buildersPath = path.join(process.cwd(), "app/builders");

try {
const directories = await readdir(buildersPath, { withFileTypes: true });
const addresses = directories
.filter(dirent => dirent.isDirectory())
.map(dirent => dirent.name)
.filter(name => name.startsWith("0x"));

return NextResponse.json(addresses);
} catch {
return NextResponse.json([], { status: 500 });
}
}
3 changes: 3 additions & 0 deletions packages/nextjs/app/page.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@
import Link from "next/link";
import type { NextPage } from "next";
import { BugAntIcon, MagnifyingGlassIcon } from "@heroicons/react/24/outline";
import BuildersGrid from "~~/components/batch/BuildersGrid";

const Home: NextPage = () => {
return (
Expand Down Expand Up @@ -44,6 +45,8 @@ const Home: NextPage = () => {
</div>
</div>
</div>
{/* Builders Grid */}
<BuildersGrid />
</div>
</>
);
Expand Down
72 changes: 72 additions & 0 deletions packages/nextjs/components/batch/BuildersGrid.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,72 @@
import Link from "next/link";
import { useQuery } from "@tanstack/react-query";
import { Address } from "~~/components/scaffold-eth";
import { useScaffoldEventHistory } from "~~/hooks/scaffold-eth";

const BuildersGrid = () => {
// Get builder profiles from filesystem
const { data: profileBuilders = [], isLoading: profilesLoading } = useQuery<string[]>({
queryKey: ["builders-profiles"],
queryFn: async () => {
const response = await fetch("/api/builders");
if (!response.ok) throw new Error("Failed to fetch builders");
return response.json();
},
});

// Get checked-in builders from contract events
const { data: events, isLoading: eventsLoading } = useScaffoldEventHistory({
contractName: "BatchRegistry",
eventName: "CheckedIn",
fromBlock: 127324219n,
});

if (profilesLoading || eventsLoading) {
return (
<div className="w-full px-6 py-8 text-center">
<span className="loading loading-spinner loading-lg text-primary"></span>
</div>
);
}

const buildersWithoutProfile = (events ?? [])
.map(event => event.args.builder)
.filter(address => address && !profileBuilders.includes(address));

return (
<div className="w-full px-6 py-8">
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
{profileBuilders.map((address, idx) => (
<div
key={`${address}-${idx}`}
className="bg-base-100 rounded-xl p-6 shadow-lg hover:shadow-xl transition-all duration-200 border border-base-200"
>
<div className="flex flex-col gap-2">
<Address address={address} size="lg" />
<div className="flex justify-between items-center">
<Link href={`/builders/${address}`} className="text-sm font-semibold hover:underline">
View Profile →
</Link>
</div>
</div>
</div>
))}
{buildersWithoutProfile.map((address, idx) => (
<div
key={`${address}-${idx}`}
className="bg-base-100 rounded-xl p-6 shadow-lg hover:shadow-xl transition-all duration-200 border border-base-200"
>
<div className="flex flex-col gap-2">
<Address address={address} size="lg" />
<div className="flex justify-between items-center">
<span className="text-sm font-semibold text-primary">No Profile</span>
</div>
</div>
</div>
))}
</div>
</div>
);
};

export default BuildersGrid;

0 comments on commit 49dc849

Please sign in to comment.