Skip to content

Commit

Permalink
Main page tweaks (#17)
Browse files Browse the repository at this point in the history
  • Loading branch information
@muhammedshahinshapottayil
muhammedshahinshapottayil committed Mar 22, 2024
1 parent 14b058d commit 1e52e0e
Show file tree
Hide file tree
Showing 3 changed files with 67 additions and 84 deletions.
143 changes: 59 additions & 84 deletions packages/nextjs/app/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,123 +2,98 @@

import Link from "next/link";
import type { NextPage } from "next";
import { BugAntIcon, MagnifyingGlassIcon } from "@heroicons/react/24/outline";
import { WalletInfo } from "~~/components/WalletInfo";
import { Address } from "~~/components/scaffold-eth";
import { useScaffoldContractRead, useScaffoldEventHistory } from "~~/hooks/scaffold-eth";

const Home: NextPage = () => {
//Get tally of Checkedin Builders
const { isLoading, data: checkedInCounter } = useScaffoldContractRead({
contractName: "BatchRegistry",
functionName: "checkedInCounter",
});

//event history
const { isLoading: isReadingEventLoading, data: eventHistory } = useScaffoldEventHistory({
contractName: "BatchRegistry",
eventName: "CheckedIn",
fromBlock: 116978463n,
});

function checkedInCounterElement() {
if (!isLoading) {
return checkedInCounter?.toString();
} else {
return <span className="loading loading-dots loading-xs"></span>;
}
}

//event history
const { isLoading: isReadingEventLoading, data: eventHistory } = useScaffoldEventHistory({
contractName: "BatchRegistry",
eventName: "CheckedIn",
fromBlock: 116978463n,
});
//creates a list of checked in builders addresses from the event history of the contract
const buildersSet = new Set(eventHistory?.map(e => e.args.builder).filter(Boolean));
const checkedInBuilders = Array.from(buildersSet);

return (
<>
<div className="flex items-center flex-col flex-grow pt-10">
<div className="px-5">
<h1 className="text-center mb-8">
<span className="block text-2xl mb-2">Welcome to</span>
<span className="block text-4xl font-bold">Batch 3</span>
<section className="relative h-screen">
<div className="absolute inset-0 z-0 bg-image "></div>

<div className="relative z-10 bg-visibility-color flex flex-col justify-center items-center h-full text-white">
<div className="px-5 ">
<h1 className="text-center mb-8 text-3xl md:text-4xl lg:text-5xl">
<span className="block mb-2">Welcome to</span>
<span className="block text-4xl md:text-5xl lg:text-6xl font-bold">Batch 3</span>
</h1>
<p className="text-center text-lg">Get started by taking a look at your batch GitHub repository.</p>
<p className="text-lg flex gap-2 justify-center">
<span className="font-bold">Checked in builders count:</span>
<p className="text-center text-lg md:text-xl lg:text-2xl mb-6">
Get started by taking a look at your batch GitHub repository.
</p>
<p className="text-lg flex items-center justify-center mb-6">
<span className="font-bold mr-2">Checked in builders count:</span>
<span>{checkedInCounterElement()}</span>
</p>
<p className="text-center text-lg">
<WalletInfo />
</p>
<div className="flex flex-col text-center items-center text-md">
<div>
<span className="font-extrabold text-lg">List of Builers</span>
{isReadingEventLoading || !eventHistory?.length ? (
<span className="loading loading-dots loading-xs"></span>
) : (
<table className="table-auto mt-4">
<thead className=" border-b-2">
<tr>
<th>Address</th>
<th>ENS</th>
</tr>
</thead>
<tbody>
{checkedInBuilders.map((builder, index) => (
<tr key={index}>
<td className="border p-2">
<div className="relative flex flex-col items-center group">
<Link href={`builders/${builder}`}>
{builder ? builder?.slice(0, 5) + "..." + builder?.slice(-4) : "Address not found"}
</Link>

<div className="absolute bottom-0 flex-col items-center hidden mb-6 group-hover:flex">
<span className="relative z-10 p-2 text-xs leading-none text-white whitespace-no-wrap bg-black shadow-lg rounded-md">
Click here to visit Builders Homepage
</span>
<div className="w-3 h-3 -mt-2 rotate-45 bg-black"></div>
</div>
</div>
</td>
<td className="border p-2">
<span>
<Address address={builder} />
</span>
</td>
</tr>
))}
</tbody>
</table>
)}
</div>
</div>
</div>
<div className="flex flex-col text-center items-center text-md">
<div>
<span className="font-extrabold text-lg">List of Builders</span>
{isReadingEventLoading || !eventHistory?.length ? (
<span className="loading loading-dots loading-xs"></span>
) : (
<table className="table-auto mt-4 bg-white text-gray-600">
<thead className=" border-b-2">
<tr>
<th>Address</th>
<th>ENS</th>
</tr>
</thead>
<tbody>
{checkedInBuilders.map((builder, index) => (
<tr key={index}>
<td className="border p-2">
<div className="relative flex flex-col items-center group">
<Link href={`builders/${builder}`}>
{builder ? builder?.slice(0, 5) + "..." + builder?.slice(-4) : "Address not found"}
</Link>

<div className="flex-grow bg-base-300 w-full mt-16 px-8 py-12">
<div className="flex justify-center items-center gap-12 flex-col sm:flex-row">
<div className="flex flex-col bg-base-100 px-10 py-10 text-center items-center max-w-xs rounded-3xl">
<BugAntIcon className="h-8 w-8 fill-secondary" />
<p>
Tinker with your smart contract using the{" "}
<Link href="/debug" passHref className="link">
Debug Contract
</Link>{" "}
tab.
</p>
</div>
<div className="flex flex-col bg-base-100 px-10 py-10 text-center items-center max-w-xs rounded-3xl">
<MagnifyingGlassIcon className="h-8 w-8 fill-secondary" />
<p>
Explore your local transactions with the{" "}
<Link href="/blockexplorer" passHref className="link">
Block Explorer
</Link>{" "}
tab.
</p>
</div>
<div className="absolute bottom-0 flex-col items-center hidden mb-6 group-hover:flex">
<span className="relative z-10 p-2 text-xs leading-none text-white whitespace-no-wrap bg-black shadow-lg rounded-md">
Click here to visit Builders Homepage
</span>
<div className="w-3 h-3 -mt-2 rotate-45 bg-black"></div>
</div>
</div>
</td>
<td className="border p-2">
<span>
<Address address={builder} />
</span>
</td>
</tr>
))}
</tbody>
</table>
)}
</div>
</div>
</div>
</>
</section>
);
};

Expand Down
Binary file added packages/nextjs/public/ethereum.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
8 changes: 8 additions & 0 deletions packages/nextjs/styles/globals.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,3 +30,11 @@ p {
.btn.btn-ghost {
@apply shadow-none;
}
.bg-image {
background-image: url("/ethereum.png");
background-size: cover;
background-position: center;
}
.bg-visibility-color {
background-color: rgb(0 0 0 / 25%);
}

0 comments on commit 1e52e0e

Please sign in to comment.