Merge pull request #75 from luloxi/countdown-timer

Added a countdown component

packages/nextjs/components/lists/ListHeader.tsx

@@ -119,8 +119,8 @@ function ListHeader({ displayList, titleHeader, display, onCategoryChange, onShu
               onClick={() => handleButtonClick(`${category.category}`)}
               className={`px-4 py-2 rounded-md font-normal text-base leading-6 font-inter  ${
                 active == `${category.category}`
-                  ? "bg-secondary-content text-white dark:bg-black"
-                  : "bg-customWhite text-customGrayBtn"
+                  ? "bg-[#FF0520] text-white"
+                  : "bg-customWhite dark:bg-slate-700 text-customGrayBtn"
               }`}
             >
               {category.category}

packages/nextjs/components/op/projects/YourBallot.tsx

@@ -1,17 +1,22 @@
 import React from "react";
+import CountdownTimer from "./YourBallotCountdown";
 import { ArrowTopRightOnSquareIcon } from "@heroicons/react/20/solid";
 import { useBallot } from "~~/context/BallotContext";
 import { useProjects } from "~~/context/ProjectsContext";
 
 const YourBallot = () => {
   const { state } = useBallot();
   const { projects } = useProjects();
+
+  const fakeTimestamp = 1700453260;
+  const votingDeadline = fakeTimestamp;
+
   return (
     <div className="border-OPlightgray border-[1px] h-fit px-6 py-10 rounded-xl">
       <h3 className="text-OPextradarkgray">YOUR BALLOT</h3>
       <div className="mt-5">
-        <p className="p-0 m-0 text-sm text-OPbluegray ">Voting ends in</p>
-        <span className="font-bold text-lg">3d:12h:30m:24s</span>
+        {/* <p className="p-0 m-0 text-sm text-OPbluegray ">Voting ends in</p> */}
+        <CountdownTimer deadline={votingDeadline} />
       </div>
       <div className="mt-5">
         <p className="p-0 m-0 text-sm text-OPbluegray">Projects added</p>

packages/nextjs/components/op/projects/YourBallotCountdown.tsx

@@ -0,0 +1,81 @@
+import { useEffect, useState } from "react";
+
+interface CountdownTimerProps {
+  deadline: number;
+}
+
+const CountdownTimer: React.FC<CountdownTimerProps> = ({ deadline }) => {
+  const [timeRemaining, setTimeRemaining] = useState<string | null>(
+    calculateTimeRemaining(deadline), // Initialize with the initial value
+  );
+  const [isEnded, setIsEnded] = useState<boolean>(false);
+
+  useEffect(() => {
+    const timer = setInterval(() => {
+      const now = Math.floor(new Date().getTime() / 1000);
+
+      if (now >= deadline) {
+        setTimeRemaining(null);
+        setIsEnded(true);
+        clearInterval(timer);
+      } else {
+        const timeRemainingSeconds = deadline - now;
+        const days = Math.floor(timeRemainingSeconds / 86400);
+        const hours = Math.floor((timeRemainingSeconds % 86400) / 3600);
+        const minutes = Math.floor((timeRemainingSeconds % 3600) / 60);
+        const seconds = Math.floor(timeRemainingSeconds % 60);
+
+        if (days > 0) {
+          setTimeRemaining(`${days}d:${hours}h:${minutes}m:${seconds}s`);
+        } else {
+          setTimeRemaining(`${hours}h:${minutes}m:${seconds}s`);
+        }
+      }
+    }, 1000); // Update every 1 second
+
+    return () => clearInterval(timer);
+  }, [deadline]);
+
+  const deadlineMessage = () => {
+    if (isEnded) {
+      return {
+        message: "Ended on",
+        formattedDate: new Date(deadline * 1000).toLocaleString(),
+      };
+    } else {
+      return {
+        message: "Voting ends in",
+      };
+    }
+  };
+
+  return (
+    <>
+      <p className="p-0 m-0 text-sm text-OPbluegray ">{deadlineMessage().message}</p>
+      <span className="font-bold text-lg">{isEnded ? deadlineMessage().formattedDate : timeRemaining || ""}</span>
+    </>
+  );
+};
+
+export default CountdownTimer;
+
+// Helper function to calculate initial time remaining
+const calculateTimeRemaining = (deadline: number): string => {
+  const now = Math.floor(new Date().getTime() / 1000);
+
+  if (now >= deadline) {
+    return ""; // Timer has already ended
+  }
+
+  const timeRemainingSeconds = deadline - now;
+  const days = Math.floor(timeRemainingSeconds / 86400);
+  const hours = Math.floor((timeRemainingSeconds % 86400) / 3600);
+  const minutes = Math.floor((timeRemainingSeconds % 3600) / 60);
+  const seconds = Math.floor(timeRemainingSeconds % 60);
+
+  if (days > 0) {
+    return `${days}d:${hours}h:${minutes}m:${seconds}s`;
+  } else {
+    return `${hours}h:${minutes}m:${seconds}s`;
+  }
+};

packages/nextjs/generated/deployedContracts.ts

@@ -1,3 +1,3 @@
 const deployedContracts = null;
 
-export default deployedContracts;
+export default deployedContracts;

packages/nextjs/tailwind.config.js

@@ -41,7 +41,7 @@ module.exports = {
         scaffoldEthDark: {
           primary: "#212638",
           "primary-content": "#F9FBFF",
-          secondary: "#323f61",
+          secondary: "#991b1b",
           "secondary-content": "#F9FBFF",
           accent: "#4969A6",
           "accent-content": "#F9FBFF",