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.

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

Implementation of issue number 6 #27

Merged
merged 4 commits into from
Aug 26, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
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
63 changes: 63 additions & 0 deletions packages/nextjs/components/CheckInFlag.tsx
Original file line number Diff line number Diff line change
@@ -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 (
<div>
<dialog id="my_modal_1" className="modal ">
<div className="modal-box">
<h3 className={`font-bold text-xl ${isCheckedIn ? "" : "hidden"}`}>You have successfully checked in🎉</h3>
<h3 className={`font-bold text-xl ${isCheckedIn ? "hidden" : ""}`}>You have to yet check in 😌</h3>
<div className={` ${isCheckedIn ? "" : "hidden"}`}>
<p className="pt-4 mb-1">You used the below contract to check in</p>
<p className="m-0 font-semibold">{isCheckedIn}</p>
</div>

<div className={` ${isCheckedIn ? "hidden" : ""}`}>
<p className="text-lg">Visit the github issue for the checkIn challenge</p>
</div>

<div className="modal-action mt-10">
<form method="dialog" className="w-full flex justify-between">
<button className="btn dark:bg-slate-500 dark:text-slate-800 dark:hover:text-slate-900 hover:text-slate-600 dark:hover:bg-slate-400 transition-all border-none text-slate-400">
Close
</button>
<a
className={`btn ${isCheckedIn ? "hidden" : ""}`}
href="https://github.com/BuidlGuidl/batch8.buidlguidl.com/issues/10"
target="_blank"
>
Onwards to checkIn <span className="text-lg">👩🏽‍✈️</span>
</a>
<a
className={`btn ${isCheckedIn ? "" : "hidden"}`}
//Here the is checked provides the address of the deployed contract!!!
href={`https://optimistic.etherscan.io/address/${isCheckedIn}`}
target="_blank"
>
See on block explorer <span className="text-lg">🕵️‍♂️</span>
</a>
</form>
</div>
</div>
</dialog>
<button
className={`btn btn-sm border-none ${isCheckedIn ? "dark:bg-emerald-600 bg-emerald-400 dark:hover:bg-emerald-700 hover:bg-emerald-500" : "bg-red-500 dark:hover:bg-red-600"} ${isConnected ? "" : "hidden"} sm:py-1.5 rounded-full shadow-xl font-semibold text-sm transition-all`}
onClick={() => openModal("my_modal_1")}
>
<span className="hidden sm:inline-block">{isCheckedIn ? "CheckedIn 🎉" : "CheckIn 🤔"}</span>
<span className="sm:hidden"> {isCheckedIn ? "🎉" : "🤔"}</span>
</button>
</div>
);
};
10 changes: 8 additions & 2 deletions packages/nextjs/components/Footer.tsx
Original file line number Diff line number Diff line change
@@ -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";

Expand All @@ -16,18 +17,23 @@ export const Footer = () => {
const nativeCurrencyPrice = useGlobalState(state => state.nativeCurrency.price);
const { targetNetwork } = useTargetNetwork();
const isLocalNetwork = targetNetwork.id === hardhat.id;
const isMember = useCheckIsMember();

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="flex flex-col md:flex-row gap-2 pointer-events-auto">
{nativeCurrencyPrice > 0 && (
<div>
<div className="flex gap-5 items-center">
<div className="btn btn-primary btn-sm font-normal gap-1 cursor-auto">
<CurrencyDollarIcon className="h-4 w-4" />
<span>{nativeCurrencyPrice.toFixed(2)}</span>
</div>
{/* Conditionally renders the batch member logo is they are in the allow list */}
<div className={`${isMember ? "" : "hidden"}`}>
<BatchMemberLogo classNameWord="fill-current dark:text-white text-slate-700" className="" />
</div>
</div>
)}
{isLocalNetwork && (
Expand Down
2 changes: 2 additions & 0 deletions packages/nextjs/components/Header.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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";
Expand Down Expand Up @@ -102,6 +103,7 @@ export const Header = () => {
</ul>
</div>
<div className="navbar-end flex-grow mr-4">
<CheckInFlag />
<RainbowKitCustomConnectButton />
<FaucetButton />
</div>
Expand Down
36 changes: 36 additions & 0 deletions packages/nextjs/components/assets/BatchMemberLogo.tsx

Large diffs are not rendered by default.

Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ export const WrongNetworkDropdown = () => {
const { disconnect } = useDisconnect();

return (
<div className="dropdown dropdown-end mr-2">
<div className="dropdown dropdown-end mr-2 ml-3">
<label tabIndex={0} className="btn btn-error btn-sm dropdown-toggle gap-1">
<span>Wrong network</span>
<ChevronDownIcon className="h-6 w-4 ml-2 sm:ml-0" />
Expand Down
14 changes: 14 additions & 0 deletions packages/nextjs/hooks/scaffold-eth/useCheckIsMember.ts
Original file line number Diff line number Diff line change
@@ -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;
};
15 changes: 15 additions & 0 deletions packages/nextjs/hooks/scaffold-eth/useIsCheckedIn.ts
Original file line number Diff line number Diff line change
@@ -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;
};
Loading