diff --git a/packages/nextjs/app/layout.tsx b/packages/nextjs/app/layout.tsx index be1234b..3de257b 100644 --- a/packages/nextjs/app/layout.tsx +++ b/packages/nextjs/app/layout.tsx @@ -1,3 +1,4 @@ +import { Inter } from "next/font/google"; import "@rainbow-me/rainbowkit/styles.css"; import { ScaffoldEthAppWithProviders } from "~~/components/ScaffoldEthAppWithProviders"; import { ThemeProvider } from "~~/components/ThemeProvider"; @@ -5,14 +6,16 @@ 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 ( - + {children} diff --git a/packages/nextjs/app/page.tsx b/packages/nextjs/app/page.tsx index 184c0c8..e3fb1a0 100644 --- a/packages/nextjs/app/page.tsx +++ b/packages/nextjs/app/page.tsx @@ -1,11 +1,30 @@ "use client"; +import { useEffect, useState } from "react"; +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 [builderPageExists, setBuilderPageExists] = useState(false); + + 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", @@ -14,57 +33,138 @@ const Home: NextPage = () => { if (error) { console.log("Error fetching checkedInCounter", error); } + + useEffect(() => { + const verifyBuilderPage = async (address: string) => { + try { + const response = await fetch(`/builders/${address}`); + setBuilderPageExists(response.status === 200); + } catch (error) { + setBuilderPageExists(false); + } + }; + + if (connectedAddress) { + verifyBuilderPage(connectedAddress); + } else { + setBuilderPageExists(false); + } + }, [connectedAddress]); + return ( - <> -
-
-

- Welcome to - Batch 9 +
+
+ Blurred Yellow Background +
+ +
+ Blurred Blue Background +
+ +
+ {/* Punks BG */} +
+ punks +
+ + {/* Header / SubHeader */} +
+

+ Welcome to Batch 9 of + + Buidl + Guidl +

-

Get started by taking a look at your batch GitHub repository.

-
- {checkedInCounter === undefined && !error ? ( -
- ) : checkedInCounter ? ( -

- Checked in builders count: - {checkedInCounter.toString()} -

- ) : ( -

- An error occurred, check your console for more information ๐Ÿ‘€ -

- )} -
+

+ Get started by taking a look at your batch GitHub repository. +

-
-
-
- -

- Tinker with your smart contract using the{" "} - - Debug Contracts - {" "} - tab. -

-
-
- +
+ {checkedInCounter === undefined && !error ? ( +
+ ) : checkedInCounter ? ( +

+ Checked-in count: + {checkedInCounter.toString()} +

+ ) : null} +
+ + {/* Member Status */} + {builderPageExists ? ( + + Batch Member {isAllowed ? "โœ…" : "โŒ"} + + ) : ( +
+ Batch Member {isAllowed ? "โœ…" : "โŒ"} +
+ )} + + {isAllowed && IsCheckIn !== zeroAddress ? ( +
+

Cheers ๐Ÿป.. You are checked in!

+
+ ) : ( + isAllowed && ( +

- Explore your local transactions with the{" "} - - Block Explorer - {" "} - tab. + + Hey there! Ready for an adventure?{" "} + + Check-In + + {" "} + to get started! ๐Ÿš€

-
+ ) + )} + + {/* Cards */} +
+ {/* Debug Contract Card */} + + + {/* Block Explorer Card */} +
- +
); }; diff --git a/packages/nextjs/components/Arrow_Icon.tsx b/packages/nextjs/components/Arrow_Icon.tsx new file mode 100644 index 0000000..a73aa0e --- /dev/null +++ b/packages/nextjs/components/Arrow_Icon.tsx @@ -0,0 +1,28 @@ +"use client"; + +import { useEffect, useState } from "react"; +import { useTheme } from "next-themes"; + +const Arrow_Icon = () => { + const { theme } = useTheme(); + const [mounted, setMounted] = useState(false); + + useEffect(() => { + setMounted(true); + }, []); + + if (!mounted) return null; + + return ( + + + + ); +}; + +export default Arrow_Icon; diff --git a/packages/nextjs/components/Card.tsx b/packages/nextjs/components/Card.tsx new file mode 100644 index 0000000..54b2bad --- /dev/null +++ b/packages/nextjs/components/Card.tsx @@ -0,0 +1,28 @@ +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 ( +
+
{mainText}
+ +
+ +
+ +

{footerText}

+ + + +
+
+ ); +}; + +export default Card; diff --git a/packages/nextjs/components/Footer.tsx b/packages/nextjs/components/Footer.tsx index 92b3c62..66146d8 100644 --- a/packages/nextjs/components/Footer.tsx +++ b/packages/nextjs/components/Footer.tsx @@ -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"; @@ -18,10 +20,10 @@ export const Footer = () => { const isLocalNetwork = targetNetwork.id === hardhat.id; return ( -
-
-
-
+
+
+
+
{nativeCurrencyPrice > 0 && (
@@ -40,41 +42,75 @@ export const Footer = () => { )}
- +
-
- +
); }; + +{ + /* */ +} diff --git a/packages/nextjs/components/Header.tsx b/packages/nextjs/components/Header.tsx index 58e9572..57ea4ae 100644 --- a/packages/nextjs/components/Header.tsx +++ b/packages/nextjs/components/Header.tsx @@ -64,7 +64,7 @@ export const Header = () => { ); return ( -
+
- SE2 logo + SE2 logo
Batch #9 diff --git a/packages/nextjs/components/scaffold-eth/RainbowKitCustomConnectButton/index.tsx b/packages/nextjs/components/scaffold-eth/RainbowKitCustomConnectButton/index.tsx index 8dce607..c0cc359 100644 --- a/packages/nextjs/components/scaffold-eth/RainbowKitCustomConnectButton/index.tsx +++ b/packages/nextjs/components/scaffold-eth/RainbowKitCustomConnectButton/index.tsx @@ -1,10 +1,10 @@ "use client"; // @refresh reset +// import { BatchDetails } from "./BatchDetails"; import { Balance } from "../Balance"; import { AddressInfoDropdown } from "./AddressInfoDropdown"; import { AddressQRCodeModal } from "./AddressQRCodeModal"; -import { BatchDetails } from "./BatchDetails"; import { WrongNetworkDropdown } from "./WrongNetworkDropdown"; import { ConnectButton } from "@rainbow-me/rainbowkit"; import { Address } from "viem"; @@ -44,9 +44,10 @@ export const RainbowKitCustomConnectButton = () => { return ( <> -
+ {/* Commenting out old walletinfo in the header */} + {/*
-
+
*/}
diff --git a/packages/nextjs/public/banner_bg.png b/packages/nextjs/public/banner_bg.png new file mode 100644 index 0000000..b50a8f0 Binary files /dev/null and b/packages/nextjs/public/banner_bg.png differ diff --git a/packages/nextjs/public/blur_blue.svg b/packages/nextjs/public/blur_blue.svg new file mode 100644 index 0000000..78ce850 --- /dev/null +++ b/packages/nextjs/public/blur_blue.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + + diff --git a/packages/nextjs/public/blur_yellow.svg b/packages/nextjs/public/blur_yellow.svg new file mode 100644 index 0000000..5f06f75 --- /dev/null +++ b/packages/nextjs/public/blur_yellow.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + + diff --git a/packages/nextjs/public/cryptopunks.png b/packages/nextjs/public/cryptopunks.png new file mode 100644 index 0000000..02dfc1d Binary files /dev/null and b/packages/nextjs/public/cryptopunks.png differ diff --git a/packages/nextjs/public/heart_icon.svg b/packages/nextjs/public/heart_icon.svg new file mode 100644 index 0000000..596cdf5 --- /dev/null +++ b/packages/nextjs/public/heart_icon.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/packages/nextjs/tailwind.config.js b/packages/nextjs/tailwind.config.js index 9099dc5..ff29e82 100644 --- a/packages/nextjs/tailwind.config.js +++ b/packages/nextjs/tailwind.config.js @@ -43,15 +43,15 @@ module.exports = { dark: { primary: "#212638", "primary-content": "#F9FBFF", - secondary: "#323f61", + secondary: "#12292f", "secondary-content": "#F9FBFF", - accent: "#4969A6", + accent: "#204954", "accent-content": "#F9FBFF", neutral: "#F9FBFF", "neutral-content": "#385183", - "base-100": "#385183", - "base-200": "#2A3655", - "base-300": "#212638", + "base-100": "#124250", + "base-200": "#12292f", + "base-300": "#145163", "base-content": "#F9FBFF", info: "#385183", success: "#34EEB6", @@ -82,6 +82,15 @@ module.exports = { animation: { "pulse-fast": "pulse 1s cubic-bezier(0.4, 0, 0.6, 1) infinite", }, + colors: { + st_background: "#101111", + st_white: "#e9e9e9", + st_gray: "#707070", + st_secondary: "#dbb786", + st_yellow: "#feb824", + st_cyan: "#18b2de", + st_orange: "#f9633e", + }, }, }, };