From 136d1c80ac2d7c632880622072c630d14071270f Mon Sep 17 00:00:00 2001 From: benhur Date: Wed, 21 Aug 2024 20:15:18 +0530 Subject: [PATCH 1/4] issue number 6 solved --- packages/nextjs/components/CheckInFlag.tsx | 20 +++++++++++ packages/nextjs/components/Footer.tsx | 10 ++++-- packages/nextjs/components/Header.tsx | 2 ++ .../components/assets/BatchMemberLogo.tsx | 34 +++++++++++++++++++ .../hooks/scaffold-eth/useCheckIsMember.ts | 14 ++++++++ .../hooks/scaffold-eth/useIsCheckedIn.ts | 15 ++++++++ 6 files changed, 93 insertions(+), 2 deletions(-) create mode 100644 packages/nextjs/components/CheckInFlag.tsx create mode 100644 packages/nextjs/components/assets/BatchMemberLogo.tsx create mode 100644 packages/nextjs/hooks/scaffold-eth/useCheckIsMember.ts create mode 100644 packages/nextjs/hooks/scaffold-eth/useIsCheckedIn.ts diff --git a/packages/nextjs/components/CheckInFlag.tsx b/packages/nextjs/components/CheckInFlag.tsx new file mode 100644 index 0000000..523db1a --- /dev/null +++ b/packages/nextjs/components/CheckInFlag.tsx @@ -0,0 +1,20 @@ +import { useAccount } from "wagmi"; +import { useIsCheckedIn } from "~~/hooks/scaffold-eth/useIsCheckedIn"; + +export const CheckInFlag = () => { + const isCheckedIn = useIsCheckedIn(); + const { isConnected } = useAccount(); + return ( + + ); +}; diff --git a/packages/nextjs/components/Footer.tsx b/packages/nextjs/components/Footer.tsx index 92b3c62..d40d95d 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..761e020 --- /dev/null +++ b/packages/nextjs/components/assets/BatchMemberLogo.tsx @@ -0,0 +1,34 @@ +export const BatchMemberLogo = ({ className }: { className: string }) => { + return ( + + + + + + + + + + + + ); +}; diff --git a/packages/nextjs/hooks/scaffold-eth/useCheckIsMember.ts b/packages/nextjs/hooks/scaffold-eth/useCheckIsMember.ts new file mode 100644 index 0000000..42f18c8 --- /dev/null +++ b/packages/nextjs/hooks/scaffold-eth/useCheckIsMember.ts @@ -0,0 +1,14 @@ +import { useScaffoldReadContract } from "./useScaffoldReadContract"; +import { useAccount } from "wagmi"; + +//Checks whether they are a member of batch 8! +export const useCheckIsMember = () => { + const { address } = useAccount(); + const { data } = useScaffoldReadContract({ + contractName: "BatchRegistry", + functionName: "allowList", + args: [address], + }); + + return data; +}; diff --git a/packages/nextjs/hooks/scaffold-eth/useIsCheckedIn.ts b/packages/nextjs/hooks/scaffold-eth/useIsCheckedIn.ts new file mode 100644 index 0000000..1d97534 --- /dev/null +++ b/packages/nextjs/hooks/scaffold-eth/useIsCheckedIn.ts @@ -0,0 +1,15 @@ +import { useScaffoldReadContract } from "./useScaffoldReadContract"; +import { useAccount } from "wagmi"; + +export const useIsCheckedIn = () => { + const { address } = useAccount(); + const { data } = useScaffoldReadContract({ + contractName: "BatchRegistry", + functionName: "yourContractAddress", + args: [address], + }); + if (data == "0x0000000000000000000000000000000000000000") { + return false; + } + return data; +}; From 7ace2e3c138ff87ff248dbdb4e0ab8d8a274d59f Mon Sep 17 00:00:00 2001 From: benhur Date: Wed, 21 Aug 2024 20:45:26 +0530 Subject: [PATCH 2/4] some minor changes regarding the alert --- packages/nextjs/components/CheckInFlag.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/nextjs/components/CheckInFlag.tsx b/packages/nextjs/components/CheckInFlag.tsx index 523db1a..99a83fa 100644 --- a/packages/nextjs/components/CheckInFlag.tsx +++ b/packages/nextjs/components/CheckInFlag.tsx @@ -9,7 +9,7 @@ export const CheckInFlag = () => { className={`${isCheckedIn ? "bg-green-600" : "bg-red-500 mr-3"} ${isConnected ? "" : "hidden"} px-3 py-2 sm:py-1.5 rounded-full shadow-xl font-semibold text-sm `} onClick={() => isCheckedIn - ? alert(`You have checkedIn using the above contract ${isCheckedIn}`) + ? alert(`You have checkedIn using the contract shown below ${isCheckedIn}`) : window.open("https://github.com/BuidlGuidl/batch8.buidlguidl.com/issues/10", "_blank") } > From 5ddcec58176c3266e5e89da0911c9677b5ec4ce6 Mon Sep 17 00:00:00 2001 From: benhur Date: Thu, 22 Aug 2024 21:07:06 +0530 Subject: [PATCH 3/4] changed the alert to daisy modal modal component and also some minor improvements --- packages/nextjs/components/CheckInFlag.tsx | 63 ++++++++++++++++++---- 1 file changed, 52 insertions(+), 11 deletions(-) diff --git a/packages/nextjs/components/CheckInFlag.tsx b/packages/nextjs/components/CheckInFlag.tsx index 99a83fa..5ff272a 100644 --- a/packages/nextjs/components/CheckInFlag.tsx +++ b/packages/nextjs/components/CheckInFlag.tsx @@ -1,20 +1,61 @@ 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

+
+ + +
+ + +
); }; From 7898cd4072f9483a8eee5b100fef193eea75ce11 Mon Sep 17 00:00:00 2001 From: benhur Date: Sat, 24 Aug 2024 13:19:53 +0530 Subject: [PATCH 4/4] adjusted the logo to be visible on dark and light mode and some padding adjustment and button positioning in the modal --- packages/nextjs/components/CheckInFlag.tsx | 26 ++++++++++--------- packages/nextjs/components/Footer.tsx | 2 +- .../components/assets/BatchMemberLogo.tsx | 10 ++++--- .../WrongNetworkDropdown.tsx | 2 +- 4 files changed, 22 insertions(+), 18 deletions(-) diff --git a/packages/nextjs/components/CheckInFlag.tsx b/packages/nextjs/components/CheckInFlag.tsx index 5ff272a..38b9e21 100644 --- a/packages/nextjs/components/CheckInFlag.tsx +++ b/packages/nextjs/components/CheckInFlag.tsx @@ -14,31 +14,33 @@ export const CheckInFlag = () => { }; return (
- +
-

You have successfully checked inπŸŽ‰

-

You have to yet check in 😌

+

You have successfully checked inπŸŽ‰

+

You have to yet check in 😌

-

You used the below contract to check in

-

{isCheckedIn}

+

You used the below contract to check in

+

{isCheckedIn}

-

Visit the github issue for the checkIn challenge

+

Visit the github issue for the checkIn challenge

-
{/* Conditionally renders the batch member logo is they are in the allow list */}
- +
)} diff --git a/packages/nextjs/components/assets/BatchMemberLogo.tsx b/packages/nextjs/components/assets/BatchMemberLogo.tsx index 761e020..6ed77a8 100644 --- a/packages/nextjs/components/assets/BatchMemberLogo.tsx +++ b/packages/nextjs/components/assets/BatchMemberLogo.tsx @@ -1,21 +1,23 @@ -export const BatchMemberLogo = ({ className }: { className: string }) => { +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 ( -
+