123-keep-a-floating-at-bottom-banner

packages/frontend/components/Banner.tsx

@@ -0,0 +1,162 @@
+import React, { useEffect, useState } from "react";
+import {
+  MegaphoneIcon,
+  XMarkIcon,
+  TicketIcon,
+  RocketLaunchIcon,
+  HandRaisedIcon,
+} from "@heroicons/react/24/outline";
+import Link from "next/link";
+import { useContext } from "react";
+import { BingoStateContext } from "@/components/Layout";
+import { BingoState } from "@/hooks/useBingoContract";
+import { tabs } from "@/components/Header";
+import moment, { now } from "moment";
+import { useContractRead } from "wagmi";
+import { CONTRACT_ABI, CONTRACT_ADDRESS } from "../config";
+
+type BannerProps = {
+  setShowBanner: React.Dispatch<React.SetStateAction<boolean>>;
+  activeTab: string;
+};
+
+export function Banner(props: BannerProps) {
+  const { setShowBanner, activeTab } = props;
+  const [bannerContent, setBannerContent] = useState<string>("");
+  const bingoState = useContext(BingoStateContext);
+  const [drawTimestamp, setDrawTimestamp] = useState<number>();
+  const [humanizedCountdown, setHumanizedCountdown] = useState<string>("");
+  const [drawCount, setDrawCount] = useState<number>();
+  const [icon, setIcon] = useState<JSX.Element>(
+    <MegaphoneIcon className="h-6 w-6 text-black" aria-hidden="true" />
+  );
+
+  const getDrawTimestamp = useContractRead({
+    abi: CONTRACT_ABI,
+    address: CONTRACT_ADDRESS,
+    functionName: "firstDrawTimestamp",
+    onSuccess(data: any) {
+      setDrawTimestamp(Number(data));
+    },
+    onError() {
+      console.log("Error");
+    },
+    onSettled() {
+      console.log("Triggered drawTimeStamp");
+    },
+    watch: true,
+  });
+
+  const getDrawnNumbersCount = useContractRead({
+    abi: CONTRACT_ABI,
+    address: CONTRACT_ADDRESS,
+    functionName: "drawnNumbersCount",
+    onSuccess(data: any) {
+      setDrawCount(Number(data));
+    },
+    onError() {
+      console.log("Error");
+    },
+    onSettled() {
+      console.log("Triggered drawTimeStamp");
+    },
+    watch: true,
+  });
+
+  useEffect(() => {
+    if (drawTimestamp) {
+      setHumanizedCountdown(
+        moment
+          .duration(moment.unix(drawTimestamp).diff(moment.now()))
+          .humanize()
+      );
+    }
+  }, [drawTimestamp]);
+
+  useEffect(() => {
+    switch (bingoState) {
+      case BingoState.MINT:
+        setIcon(
+          <TicketIcon className="h-6 w-6 text-black" aria-hidden="true" />
+        );
+        if (drawTimestamp && Date.now() / 1000 < drawTimestamp) {
+          setBannerContent(`${humanizedCountdown} is left for minting cards`);
+        } else {
+          setBannerContent(`Draw can start anytime now!`);
+        }
+        break;
+      case BingoState.DRAW:
+        setIcon(
+          <RocketLaunchIcon
+            className="h-6 w-6 text-black"
+            aria-hidden="true"
+          ></RocketLaunchIcon>
+        );
+        setBannerContent(() => {
+          if (drawCount !== undefined) {
+            return `${drawCount === 0 ? "No" : drawCount} number${
+              drawCount === 1 ? " is" : "s are"
+            } drawn. You need to claim the prize if you're eligible!`;
+          } else {
+            return `Draw has been started. Check out now!`;
+          }
+        });
+        break;
+      case BingoState.END:
+        setIcon(
+          <HandRaisedIcon
+            className="h-6 w-6 text-black"
+            aria-hidden="true"
+          ></HandRaisedIcon>
+        );
+        setBannerContent(
+          "The game has ended. See the donation we've made collectively!"
+        );
+        break;
+    }
+  }, [bingoState]);
+
+  return (
+    <div className="fixed inset-x-0 bottom-0 pb-2 sm:pb-5 z-50">
+      <div className="mx-auto max-w-7xl px-2 sm:px-6 lg:px-8">
+        <div className="rounded-lg bg-yellow-1 p-2 shadow-lg sm:p-3">
+          <div className="flex flex-wrap items-center justify-between">
+            <div className="flex w-0 flex-1 items-center">
+              <span className="flex rounded-lg bg-yellow-3 p-2">{icon}</span>
+              <p className="ml-3 font-medium text-black">
+                {/* <span className="md:hidden">We announced a new product!</span> */}
+                {bannerContent}
+              </p>
+            </div>
+            <div className="order-3 mt-2 w-full flex-shrink-0 sm:order-2 sm:mt-0 sm:w-auto">
+              <Link
+                onClick={() => {
+                  setShowBanner(false);
+                }}
+                href={activeTab}
+                className="flex items-center justify-center rounded-md border border-transparent bg-white px-4 py-2 text-sm font-medium text-black shadow-sm hover:bg-green-1"
+              >
+                {tabs.find((tab) => tab.href === activeTab)?.name}
+              </Link>
+            </div>
+            <div className="order-2 flex-shrink-0 sm:order-3 sm:ml-2">
+              <button
+                type="button"
+                onClick={() => setShowBanner(false)}
+                className="group -mr-1 flex rounded-md p-2 hover:bg-yellow-3 focus:outline-none focus:ring-2 focus:ring-white"
+              >
+                <span className="sr-only">Dismiss</span>
+                <XMarkIcon
+                  className="h-6 w-6 text-white group-hover:text-black"
+                  aria-hidden="true"
+                />
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default Banner;

packages/frontend/components/Header.tsx

@@ -2,11 +2,13 @@ import Link from "next/link";
 import router, { NextRouter, useRouter } from "next/router";
 import { ConnectOrSwitchNetworkButton } from "./web3/ConnectOrSwitchNetworkButton";
 import { useMediaQuery } from "react-responsive";
-import { useContext, useState } from "react";
-import { BingoStateContext } from "./Layout";
+import { Dispatch, SetStateAction, useContext, useEffect } from "react";
+import { BingoStateContext } from "@/components/Layout";
 import { BingoState } from "@/hooks/useBingoContract";
 
-type HeaderProps = {};
+type HeaderProps = {
+  setActiveTab: Dispatch<SetStateAction<string>>;
+};
 
 interface ITab {
   name: string;
@@ -15,10 +17,10 @@ interface ITab {
 }
 
 export const tabs: ITab[] = [
-  { name: "Mint", href: "/mint", active: true },
-  { name: "The Draw", href: "/lucky-numbers", active: false },
-  { name: "The Winner", href: "/winner", active: false },
-  { name: "My Cards", href: "/my-cards", active: true },
+  { name: "🎲 Mint", href: "/mint", active: true },
+  { name: "🎰 The Draw", href: "/lucky-numbers", active: false },
+  { name: "🫶 The Impact", href: "/impact", active: false },
+  { name: "🃏 My Cards", href: "/my-cards", active: true },
 ];
 
 function classNames(...classes: any[]) {
@@ -30,31 +32,39 @@ function isCurrent(tab: ITab, router: NextRouter): boolean {
 }
 
 export default function Header(props: HeaderProps) {
+  const { setActiveTab } = props;
   const router = useRouter();
   const isMobile = useMediaQuery({ query: "(max-width: 768px)" });
   const isPortrait = useMediaQuery({ query: "(orientation: portrait)" });
   const bingoState = useContext(BingoStateContext);
-  console.log("Bingo:", bingoState);
-  switch (bingoState) {
-    case BingoState.MINT:
-      tabs[0].active = true;
-      tabs[1].active = false;
-      tabs[2].active = false;
-      tabs[3].active = true;
-      break;
-    case BingoState.DRAW:
-      tabs[0].active = false;
-      tabs[1].active = true;
-      tabs[2].active = false;
-      tabs[3].active = true;
-      break;
-    case BingoState.END:
-      tabs[0].active = false;
-      tabs[1].active = false;
-      tabs[2].active = true;
-      tabs[3].active = true;
-      break;
-  }
+
+  useEffect(() => {
+    if (bingoState !== undefined) {
+      switch (bingoState) {
+        case BingoState.MINT:
+          tabs[0].active = true;
+          tabs[1].active = false;
+          tabs[2].active = false;
+          tabs[3].active = true;
+          setActiveTab("/mint");
+          break;
+        case BingoState.DRAW:
+          tabs[0].active = false;
+          tabs[1].active = true;
+          tabs[2].active = false;
+          tabs[3].active = true;
+          setActiveTab("/lucky-numbers");
+          break;
+        case BingoState.END:
+          tabs[0].active = false;
+          tabs[1].active = false;
+          tabs[2].active = true;
+          tabs[3].active = true;
+          setActiveTab("/impact");
+          break;
+      }
+    }
+  }, [bingoState]);
 
   return !isMobile ? (
     // Default View