diff --git a/packages/nextjs/components/CheckInFlag.tsx b/packages/nextjs/components/CheckInFlag.tsx new file mode 100644 index 0000000..38b9e21 --- /dev/null +++ b/packages/nextjs/components/CheckInFlag.tsx @@ -0,0 +1,63 @@ +import { useAccount } from "wagmi"; +import { useIsCheckedIn } from "~~/hooks/scaffold-eth/useIsCheckedIn"; + +//This is the isCheckedIn is used as flag and also as the address of the deployed checkin contract + +export const CheckInFlag = () => { + const isCheckedIn = useIsCheckedIn(); + const { isConnected } = useAccount(); + const openModal = (modalId: string) => { + const modal = document.getElementById(modalId) as HTMLDialogElement; + if (modal) { + modal.showModal(); + } + }; + return ( +
+ +
+

You have successfully checked inπŸŽ‰

+

You have to yet check in 😌

+
+

You used the below contract to check in

+

{isCheckedIn}

+
+ +
+

Visit the github issue for the checkIn challenge

+
+ +
+
+ + + Onwards to checkIn πŸ‘©πŸ½β€βœˆοΈ + + + See on block explorer πŸ•΅οΈβ€β™‚οΈ + +
+
+
+ + +
+ ); +}; diff --git a/packages/nextjs/components/Footer.tsx b/packages/nextjs/components/Footer.tsx index 92b3c62..a43d6a4 100644 --- a/packages/nextjs/components/Footer.tsx +++ b/packages/nextjs/components/Footer.tsx @@ -1,11 +1,12 @@ -import React from "react"; import Link from "next/link"; +import { BatchMemberLogo } from "./assets/BatchMemberLogo"; import { hardhat } from "viem/chains"; import { CurrencyDollarIcon, MagnifyingGlassIcon } from "@heroicons/react/24/outline"; import { HeartIcon } from "@heroicons/react/24/outline"; import { SwitchTheme } from "~~/components/SwitchTheme"; import { BuidlGuidlLogo } from "~~/components/assets/BuidlGuidlLogo"; import { Faucet } from "~~/components/scaffold-eth"; +import { useCheckIsMember } from "~~/hooks/scaffold-eth/useCheckIsMember"; import { useTargetNetwork } from "~~/hooks/scaffold-eth/useTargetNetwork"; import { useGlobalState } from "~~/services/store/store"; @@ -16,6 +17,7 @@ export const Footer = () => { const nativeCurrencyPrice = useGlobalState(state => state.nativeCurrency.price); const { targetNetwork } = useTargetNetwork(); const isLocalNetwork = targetNetwork.id === hardhat.id; + const isMember = useCheckIsMember(); return (
@@ -23,11 +25,15 @@ export const Footer = () => {
{nativeCurrencyPrice > 0 && ( -
+
{nativeCurrencyPrice.toFixed(2)}
+ {/* Conditionally renders the batch member logo is they are in the allow list */} +
+ +
)} {isLocalNetwork && ( diff --git a/packages/nextjs/components/Header.tsx b/packages/nextjs/components/Header.tsx index f24a1de..62d5a91 100644 --- a/packages/nextjs/components/Header.tsx +++ b/packages/nextjs/components/Header.tsx @@ -4,6 +4,7 @@ import React, { useCallback, useRef, useState } from "react"; import Image from "next/image"; import Link from "next/link"; import { usePathname } from "next/navigation"; +import { CheckInFlag } from "./CheckInFlag"; import { Bars3Icon, BugAntIcon } from "@heroicons/react/24/outline"; import { FaucetButton, RainbowKitCustomConnectButton } from "~~/components/scaffold-eth"; import { useOutsideClick } from "~~/hooks/scaffold-eth"; @@ -102,6 +103,7 @@ export const Header = () => {
+
diff --git a/packages/nextjs/components/assets/BatchMemberLogo.tsx b/packages/nextjs/components/assets/BatchMemberLogo.tsx new file mode 100644 index 0000000..6ed77a8 --- /dev/null +++ b/packages/nextjs/components/assets/BatchMemberLogo.tsx @@ -0,0 +1,36 @@ +export const BatchMemberLogo = ({ classNameWord, className }: { classNameWord: string; className: string }) => { + return ( + + + + + + + + + + + + ); +}; diff --git a/packages/nextjs/components/scaffold-eth/RainbowKitCustomConnectButton/WrongNetworkDropdown.tsx b/packages/nextjs/components/scaffold-eth/RainbowKitCustomConnectButton/WrongNetworkDropdown.tsx index f9f0fd8..98698d9 100644 --- a/packages/nextjs/components/scaffold-eth/RainbowKitCustomConnectButton/WrongNetworkDropdown.tsx +++ b/packages/nextjs/components/scaffold-eth/RainbowKitCustomConnectButton/WrongNetworkDropdown.tsx @@ -6,7 +6,7 @@ export const WrongNetworkDropdown = () => { const { disconnect } = useDisconnect(); return ( -
+