Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Issue 4 - created new home page #30

Merged
merged 10 commits into from
Sep 23, 2024
Merged

Issue 4 - created new home page #30

Show file tree
Hide file tree
Changes from 7 commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
713fee8
created new home page
ishtails Sep 18, 2024
c59ae9e
hover animations added
ishtails Sep 18, 2024
971a241
various fixes based on @phipsae's review
ishtails Sep 19, 2024
d62fc81
bug fix
ishtails Sep 19, 2024
4f91a83
Merge branch 'main' into 4-home-page
ishtails Sep 20, 2024
dbe3837
ui fixes for merge conflicts
ishtails Sep 20, 2024
355b4fe
fixes
ishtails Sep 21, 2024
72e13ed
ui fixes
ishtails Sep 22, 2024
9d6a8a9
revert AdressInfoDropdown changes
ishtails Sep 22, 2024
0ab8407
added a check for builder page
ishtails Sep 23, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 5 additions & 2 deletions packages/nextjs/app/layout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,18 +1,21 @@
import { Inter } from "next/font/google";
import "@rainbow-me/rainbowkit/styles.css";
import { ScaffoldEthAppWithProviders } from "~~/components/ScaffoldEthAppWithProviders";
import { ThemeProvider } from "~~/components/ThemeProvider";
import "~~/styles/globals.css";
import { getMetadata } from "~~/utils/scaffold-eth/getMetadata";

export const metadata = getMetadata({
title: "Scaffold-ETH 2 App",
title: "BuidlGuidl Batch 9",
description: "Built with 🏗 Scaffold-ETH 2",
});

const inter = Inter({ subsets: ["latin"] });

const ScaffoldEthApp = ({ children }: { children: React.ReactNode }) => {
return (
<html suppressHydrationWarning>
<body>
<body className={inter.className}>
<ThemeProvider enableSystem>
<ScaffoldEthAppWithProviders>{children}</ScaffoldEthAppWithProviders>
</ThemeProvider>
Expand Down
148 changes: 115 additions & 33 deletions packages/nextjs/app/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,11 +1,28 @@
"use client";

import Image from "next/image";
import Link from "next/link";
import type { NextPage } from "next";
import { BugAntIcon, MagnifyingGlassIcon } from "@heroicons/react/24/outline";
import { useAccount } from "wagmi";
import Card from "~~/components/Card";
import { useScaffoldReadContract } from "~~/hooks/scaffold-eth";

const Home: NextPage = () => {
const { address: connectedAddress } = useAccount();
const zeroAddress = "0x0000000000000000000000000000000000000000";

const { data: isAllowed } = useScaffoldReadContract({
contractName: "BatchRegistry",
functionName: "allowList",
args: [connectedAddress],
});

const { data: IsCheckIn } = useScaffoldReadContract({
contractName: "BatchRegistry",
functionName: "yourContractAddress",
args: [connectedAddress],
});

const { data: checkedInCounter, error } = useScaffoldReadContract({
contractName: "BatchRegistry",
functionName: "checkedInCounter",
Expand All @@ -14,57 +31,122 @@ const Home: NextPage = () => {
if (error) {
console.log("Error fetching checkedInCounter", error);
}

return (
<>
<div className="flex items-center flex-col flex-grow pt-10">
<div className="px-5">
<h1 className="text-center">
<span className="block text-2xl mb-2">Welcome to</span>
<span className="block text-4xl font-bold">Batch 9</span>
<div className="dark:bg-zinc-950 bg-zinc-200 dark:text-st_white text-st_background min-h-screen h-fit relative overflow-clip flex items-center justify-center">
<div className="absolute w-full h-full pointer-events-none">
<Image
src="/blur_yellow.svg"
alt="Blurred Yellow Background"
className="absolute -top-[10%] -left-[40%] w-200 h-200 blur-2xl"
width={2000}
height={2000}
/>
</div>

<div className="absolute w-full h-full pointer-events-none">
<Image
src="/blur_blue.svg"
alt="Blurred Blue Background"
className="absolute -bottom-[10%] -right-[40%] blur-2xl"
width={2000}
height={2000}
/>
</div>

<div className="max-w-7xl px-4 mt-8 sm:mt-0 sm:px-0 mx-auto flex flex-col items-center justify-center">
{/* Punks BG */}
<div className="overflow-clip">
<Image src="/cryptopunks.png" alt="punks" width={2000} height={2000} />
</div>

{/* Header / SubHeader */}
<div className="mt-10 sm:mt-16 tracking-wider flex flex-col items-center justify-center">
<h1 className="font-semibold text-center text-4xl md:text-5xl lg:text-6xl xl:text-7xl">
Welcome to Batch 9 of
<span className="ml-3 font-bold">
<span className="text-st_cyan">Buidl</span>
<span className="text-st_yellow">Guidl</span>
</span>
</h1>
<p className="text-center text-lg">Get started by taking a look at your batch GitHub repository.</p>
<p className="text-lg md:text-xl text-center lg:text-2xl xl:text-3xl">
Get started by taking a look at your batch GitHub repository.
</p>

<div className="flex justify-center items-center">
{checkedInCounter === undefined && !error ? (
<div className="w-64 h-8 bg-base-300 animate-pulse rounded-lg"></div>
<div className="w-64 h-8 bg-st_gray/20 animate-pulse rounded-lg"></div>
) : checkedInCounter ? (
<p className="text-lg flex gap-2 justify-center">
<span className="font-bold">Checked in builders count:</span>
<p className="flex font-semibold gap-2 justify-center">
<span className="">Checked in builders count:</span>
<span>{checkedInCounter.toString()}</span>
</p>
) : (
<p className="text-lg flex gap-2 justify-center">
<p className="flex gap-2 justify-center">
<span className="font-bold">An error occurred, check your console for more information 👀</span>
</p>
)}
</div>
</div>

<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 Contracts
</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" />
{/* Member Status */}
{isAllowed && IsCheckIn !== zeroAddress ? (
<Link
href={`/builders/${connectedAddress}`}
target="_blank"
title="View Your Builder Page"
className="w-[16rem] sm:w-[34rem] text-center tracking-widest py-5 mt-6 text-st_cyan font-semibold rounded-xl border border-zinc-500 uppercase shadow-sm hover:bg-zinc-300 dark:hover:bg-zinc-800 transition-all"
>
Batch Member ✅
</Link>
) : (
<div className="w-[16rem] sm:w-[34rem] text-center tracking-widest py-5 mt-6 text-st_cyan font-semibold rounded-xl border border-zinc-500 uppercase shadow-sm transition-all">
Batch Member {isAllowed ? "✅" : "❌"}
</div>
)}

{isAllowed && IsCheckIn !== zeroAddress ? (
<div className="text-center italic text-zinc-400">
<p>Cheers 🍻.. You are checked in!</p>
</div>
) : (
isAllowed && (
<div className="text-center italic text-zinc-400">
<p>
Explore your local transactions with the{" "}
<Link href="/blockexplorer" passHref className="link">
Block Explorer
</Link>{" "}
tab.
<span>
Hey there! Ready for an adventure?{" "}
<Link
target="_blank"
href="https://github.com/BuidlGuidl/batch9.buidlguidl.com/issues/10"
className="underline underline-offset-1 hover:underline-offset-2 transition-all text-st_cyan/70"
>
Check-In
</Link>
</span>{" "}
to get started! 🚀
</p>
</div>
</div>
)
)}

{/* Cards */}
<div className="flex flex-col sm:flex-row sm:gap-8 mb-8">
{/* Debug Contract Card */}
<Card
mainText="Tinker with your smart contract using the Debug Contracts tab."
footerLink="/debug"
footerText="Try it out.."
/>

{/* Block Explorer Card */}
<Card
mainText="Explore your local transactions with the Block Explorer tab."
footerLink="/blockexplorer"
footerText="Try it out.."
/>
</div>
</div>
</>
</div>
);
};

Expand Down
22 changes: 22 additions & 0 deletions packages/nextjs/components/Arrow_Icon.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
"use client";

import { useTheme } from "next-themes";

const Arrow_Icon = () => {
const { theme } = useTheme();

return (
<svg width="12" height="12" viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
fillRule="evenodd"
clipRule="evenodd"
d="M16 16.5V0.5H0V2.5H13L0 15.5L1 16.5L14 3.5V16.5H16ZM16 0.5H13V3.5H16V0.5Z"
fill={`
${theme === "light" ? "#000000" : "#868686"}
`}
/>
ishtails marked this conversation as resolved.
Show resolved Hide resolved
</svg>
);
};

export default Arrow_Icon;
30 changes: 30 additions & 0 deletions packages/nextjs/components/Card.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,30 @@
import Link from "next/link";
import Arrow_Icon from "~~/components/Arrow_Icon";

type Props = {
mainText: string;
footerText: string;
footerLink: string;
};

const Card = ({ mainText, footerText, footerLink }: Props) => {
return (
<div className="shadow-sm border rounded-xl w-[16rem] h-[12rem] font-light mt-6 border-zinc-500 flex flex-col">
<div className="w-full flex items-center justify-center flex-grow-[5] dark:hover:bg-zinc-800 px-4 hover:bg-zinc-300 transition-all rounded-t-xl">
{mainText}
</div>
ishtails marked this conversation as resolved.
Show resolved Hide resolved

<hr className="border-t border-zinc-500" />

<div className="hover:bg-st_cyan/10 rounded-b-xl transition-all border-zinc-500 flex-grow">
<Link href={footerLink} target="_blank" passHref className="flex items-center justify-between h-full px-4">
<p className="font-medium flex flex-col items-center justify-center">{footerText}</p>

<Arrow_Icon />
</Link>
</div>
</div>
);
};

export default Card;
104 changes: 70 additions & 34 deletions packages/nextjs/components/Footer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,10 @@
import React from "react";
import Image from "next/image";
import Link from "next/link";
import { hardhat } from "viem/chains";
import { CurrencyDollarIcon, MagnifyingGlassIcon } from "@heroicons/react/24/outline";
import { HeartIcon } from "@heroicons/react/24/outline";
import Arrow_Icon from "~~/components/Arrow_Icon";
// import { HeartIcon } from "@heroicons/react/24/outline";
import { SwitchTheme } from "~~/components/SwitchTheme";
import { BuidlGuidlLogo } from "~~/components/assets/BuidlGuidlLogo";
import { Faucet } from "~~/components/scaffold-eth";
Expand All @@ -18,9 +20,9 @@ export const Footer = () => {
const isLocalNetwork = targetNetwork.id === hardhat.id;

return (
<div className="min-h-0 py-5 px-1 mb-11 lg:mb-0">
<div>
<div className="fixed flex justify-between items-center w-full z-10 p-4 bottom-0 left-0 pointer-events-none">
<div className="bg-zinc-100 dark:bg-zinc-950">
<div className="">
<div className="fixed flex justify-between items-center w-full z-10 p-4 bottom-10 md:bottom-0 left-0 pointer-events-none">
<div className="flex flex-col md:flex-row gap-2 pointer-events-auto">
{nativeCurrencyPrice > 0 && (
<div>
Expand All @@ -43,38 +45,72 @@ export const Footer = () => {
<SwitchTheme className={`pointer-events-auto ${isLocalNetwork ? "self-end md:self-auto" : ""}`} />
</div>
</div>
<div className="w-full">
<ul className="menu menu-horizontal w-full">
<div className="flex justify-center items-center gap-2 text-sm w-full">
<div className="text-center">
<a href="https://github.com/scaffold-eth/se-2" target="_blank" rel="noreferrer" className="link">
Fork me
</a>
</div>
<span>·</span>
<div className="flex justify-center items-center gap-2">
<p className="m-0 text-center">
Built with <HeartIcon className="inline-block h-4 w-4" /> at
</p>
<a
className="flex justify-center items-center gap-1"
href="https://buidlguidl.com/"
target="_blank"
rel="noreferrer"
>
<BuidlGuidlLogo className="w-3 h-5 pb-1" />
<span className="link">BuidlGuidl</span>
</a>
</div>
<span>·</span>
<div className="text-center">
<a href="https://t.me/joinchat/KByvmRe5wkR-8F_zz6AjpA" target="_blank" rel="noreferrer" className="link">
Support
</a>
</div>
<div className="max-w-lg lg:max-w-2xl mx-auto text-st_gray">
<div className="text-[11px] sm:text-sm lg:text-base flex gap-2 justify-between mx-4 sm:mx-10">
<Link
href="https://github.com/scaffold-eth/se-2"
target="_blank"
rel="noreferrer"
className="flex gap-2 items-center "
>
<p>Fork me</p>
phipsae marked this conversation as resolved.
Show resolved Hide resolved
<Arrow_Icon />
</Link>

<div className="flex gap-2 items-center">
<p className="flex-shrink-0">Built with</p>
<Image src="/heart_icon.svg" alt="heart icon" width={20} height={20} />
<p>at</p>
<Link href="https://buidlguidl.com/" target="_blank" rel="noreferrer" className="flex gap-2 items-center ">
<BuidlGuidlLogo className="w-3 h-5 pb-1" />
<p>BuidlGuidl</p>
</Link>

<Arrow_Icon />
</div>

<div className="flex items-center gap-2">
<Link href="https://t.me/joinchat/KByvmRe5wkR-8F_zz6AjpA" target="_blank" rel="noreferrer">
Support
</Link>

<Arrow_Icon />
</div>
</ul>
</div>
</div>
</div>
);
};

{
/* <ul className="menu menu-horizontal w-full">
<div className="flex justify-center items-center gap-2 text-sm w-full">
<div className="text-center">
<a href="https://github.com/scaffold-eth/se-2" target="_blank" rel="noreferrer" className="link">
Fork me
</a>
</div>
<span>·</span>
<div className="flex justify-center items-center gap-2">
<p className="m-0 text-center">
Built with <HeartIcon className="inline-block h-4 w-4" /> at
</p>
<a
className="flex justify-center items-center gap-1"
href="https://buidlguidl.com/"
target="_blank"
rel="noreferrer"
>
<BuidlGuidlLogo className="w-3 h-5 pb-1" />
<span className="link">BuidlGuidl</span>
</a>
</div>
<span>·</span>
<div className="text-center">
<a href="https://t.me/joinchat/KByvmRe5wkR-8F_zz6AjpA" target="_blank" rel="noreferrer" className="link">
Support
</a>
</div>
</div>
</ul> */
}
Loading
Loading