diff --git a/packages/nextjs/components/BatchStatusIndicators.tsx b/packages/nextjs/components/BatchStatusIndicators.tsx new file mode 100644 index 00000000..ac4aead0 --- /dev/null +++ b/packages/nextjs/components/BatchStatusIndicators.tsx @@ -0,0 +1,71 @@ +"use client"; + +import { zeroAddress } from "viem"; +import { useAccount } from "wagmi"; +import { CheckCircleIcon, UserGroupIcon, XCircleIcon } from "@heroicons/react/24/solid"; +import { useScaffoldReadContract } from "~~/hooks/scaffold-eth"; + +export const BatchStatusIndicators = () => { + const { address: userAddress } = useAccount(); + + // Check if address is in allowList (batch member) + const { data: allowListStatus, isLoading: isLoadingAllowList } = useScaffoldReadContract({ + contractName: "BatchRegistry", + functionName: "allowList", + args: [userAddress ?? zeroAddress], + chainId: 42161, + }); + + // Check if address has checked in + const { data: contractAddress, isLoading: isLoadingContractAddress } = useScaffoldReadContract({ + contractName: "BatchRegistry", + functionName: "yourContractAddress", + args: [userAddress ?? zeroAddress], + chainId: 42161, + }); + + const isInBatch = !!allowListStatus; + const isCheckedIn = contractAddress && contractAddress !== zeroAddress; + + if (!userAddress) return null; + + const isLoading = isLoadingAllowList || isLoadingContractAddress; + + return ( +
+ {isLoading ? ( +
+ ) : ( + <> + {/* Batch Membership Indicator */} +
+
+ +
+
+ + {/* Check-in Status Indicator */} +
+
+ {isCheckedIn ? ( + + ) : ( + + )} +
+
+ + )} +
+ ); +}; diff --git a/packages/nextjs/components/Header.tsx b/packages/nextjs/components/Header.tsx index 42c981a9..a7d4d4a3 100644 --- a/packages/nextjs/components/Header.tsx +++ b/packages/nextjs/components/Header.tsx @@ -6,6 +6,7 @@ import Link from "next/link"; import { usePathname } from "next/navigation"; import { hardhat } from "viem/chains"; import { Bars3Icon, BugAntIcon, UserGroupIcon } from "@heroicons/react/24/outline"; +import { BatchStatusIndicators } from "~~/components/BatchStatusIndicators"; import { FaucetButton, RainbowKitCustomConnectButton } from "~~/components/scaffold-eth"; import { useOutsideClick, useTargetNetwork } from "~~/hooks/scaffold-eth"; @@ -100,7 +101,10 @@ export const Header = () => {
- +
+ + +
{isLocalNetwork && }