chore: added staking countdown functionality

Author: hussmartinez

packages/grant-explorer/src/features/round/ViewProjectDetails/components/StakingBannerAndModal/StakingBanner.tsx

@@ -1,30 +1,18 @@
-import { Button } from "common/src/styles";
+import { PropsWithChildren } from "react";
 
 const STAKING_BANNER_TITLE =
   "🔥 Boost grants, earn rewards, and shape the round!";
 const STAKING_BANNER_TEXT =
   "Stake GTC during GG23 to upvote your favorite grants and increase their visibility in the round. The more you stake, the higher they rank—and the more rewards you can claim from the 3% rewards pool!";
-const STAKING_BUTTON_TEXT = "Stake on this project";
-const STAKING_BUTTON_TEXT_MOBILE = "Stake";
 
-export const StakingBanner = ({ onClick }: { onClick?: () => void }) => {
+export const StakingBanner = ({ children }: PropsWithChildren) => {
   return (
-    <div className="bg-[#F2FBF8] rounded-3xl p-6 flex items-center justify-between w-full gap-4">
+    <div className="bg-[#F2FBF8] rounded-3xl p-6 flex flex-col xl:flex-row items-center justify-between w-full gap-4">
       <div className="flex flex-col gap-4 font-sans text-black max-w-[609px]">
         <h3 className="text-2xl font-medium">{STAKING_BANNER_TITLE}</h3>
         <p className="text-base/[1.75rem] font-normal">{STAKING_BANNER_TEXT}</p>
       </div>
-      <Button
-        className="text-white bg-[#22635A] max-h-[40px] font-mono"
-        onClick={onClick}
-      >
-        <span className="block lg:hidden whitespace-nowrap">
-          {STAKING_BUTTON_TEXT_MOBILE}
-        </span>
-        <span className="hidden lg:block whitespace-nowrap">
-          {STAKING_BUTTON_TEXT}
-        </span>
-      </Button>
+      {children}
     </div>
   );
 };

packages/grant-explorer/src/features/round/ViewProjectDetails/components/StakingBannerAndModal/StakingBannerAndModal.tsx

@@ -3,6 +3,13 @@ import { useCallback, useState } from "react";
 import { StakingBanner } from "./StakingBanner";
 import { useProjectDetailsParams } from "../../hooks/useProjectDetailsParams";
 import { useIsStakable } from "./hooks/useIsStakable";
+import { useDonationPeriod } from "./hooks/useDonationPeriod";
+import { StakingButton } from "./StakingButton";
+import { StakingCountDownLabel } from "./StakingCountDownLabel";
+
+const COUNTDOWN_DAYS = 3;
+const DAY_IN_MILLISECONDS = 24 * 60 * 60 * 1000;
+const COUNTDOWN_STARTS_IN_MILLISECONDS = COUNTDOWN_DAYS * DAY_IN_MILLISECONDS;
 
 export const StakingBannerAndModal = () => {
   const [isOpen, setIsOpen] = useState(false);
@@ -38,21 +45,43 @@ export const StakingBannerAndModal = () => {
   const isStakable = useIsStakable({
     chainId: chainIdNumber,
     roundId,
+  });
+
+  const { isDonationPeriod, timeToDonationStart } = useDonationPeriod({
+    chainId: chainIdNumber,
+    roundId,
     applicationId,
+    refreshInterval: 60 * 1000, // 1 minute
   });
 
-  if (!isStakable) {
-    return null;
+  const isCountDownToStartPeriod =
+    timeToDonationStart &&
+    timeToDonationStart.totalMilliseconds > 0 &&
+    timeToDonationStart.totalMilliseconds < COUNTDOWN_STARTS_IN_MILLISECONDS;
+
+  if (isStakable && isCountDownToStartPeriod) {
+    return (
+      <div className="mt-2 mb-6">
+        <StakingBanner>
+          <StakingCountDownLabel timeLeft={timeToDonationStart} />
+        </StakingBanner>
+      </div>
+    );
   }
 
-  return (
-    <div className="mt-2 mb-6">
-      <StakingBanner onClick={handleOpenModal} />
-      <StakingModal
-        isOpen={isOpen}
-        onClose={handleCloseModal}
-        onStake={handleStake}
-      />
-    </div>
-  );
+  if (isStakable && isDonationPeriod) {
+    return (
+      <div className="mt-2 mb-6">
+        <StakingBanner>
+          <StakingButton onClick={handleOpenModal} />
+        </StakingBanner>
+        <StakingModal
+          isOpen={isOpen}
+          onClose={handleCloseModal}
+          onStake={handleStake}
+        />
+      </div>
+    );
+  }
+  return null;
 };

packages/grant-explorer/src/features/round/ViewProjectDetails/components/StakingBannerAndModal/StakingButton.tsx

@@ -0,0 +1,14 @@
+import { Button } from "common/src/styles";
+
+const STAKING_BUTTON_TEXT = "Stake on this project";
+
+export const StakingButton = ({ onClick }: { onClick?: () => void }) => {
+  return (
+    <Button
+      className="text-white bg-[#22635A] max-h-[40px] font-mono whitespace-nowrap"
+      onClick={onClick}
+    >
+      {STAKING_BUTTON_TEXT}
+    </Button>
+  );
+};

packages/grant-explorer/src/features/round/ViewProjectDetails/components/StakingBannerAndModal/StakingCountDownLabel.tsx

@@ -0,0 +1,49 @@
+const generateCountDownLabel = (
+  days: number,
+  hours: number,
+  minutes: number
+) => {
+  const limitMinutes = 1;
+  if (days > 0) {
+    const dayText = days === 1 ? "day" : "days";
+    if (hours === 0) {
+      return `${days} ${dayText}`;
+    }
+    const hourText = hours === 1 ? "hour" : "hours";
+    return `${days} ${dayText}, ${hours} ${hourText}`;
+  } else if (hours > 0) {
+    const hourText = hours === 1 ? "hour" : "hours";
+    if (minutes === 0) {
+      return `${hours} ${hourText}`;
+    }
+    const minuteText = minutes === 1 ? "minute" : "minutes";
+    return `${hours} ${hourText}, ${minutes} ${minuteText}`;
+  } else if (minutes >= limitMinutes) {
+    const minuteText = minutes === 1 ? "minute" : "minutes";
+    return `${minutes} ${minuteText}`;
+  } else {
+    return "in a few minutes";
+  }
+};
+
+export const StakingCountDownLabel = ({
+  label = "Staking begins in",
+  timeLeft,
+}: {
+  label?: string;
+  timeLeft: {
+    days: number;
+    hours: number;
+    minutes: number;
+  };
+}) => {
+  const { days, hours, minutes } = timeLeft;
+  return (
+    <div className="py-4 px-8 rounded-2xl text-white bg-[#22635A] font-sans text-lg font-medium flex flex-row xl:flex-col gap-1">
+      <div className="whitespace-nowrap">{label}</div>
+      <div className="whitespace-nowrap">
+        {generateCountDownLabel(days, hours, minutes)}
+      </div>
+    </div>
+  );
+};

packages/grant-explorer/src/features/round/ViewProjectDetails/components/StakingBannerAndModal/hooks/useDonationPeriod.tsx

@@ -0,0 +1,67 @@
+import { useApplication } from "../../../../../projects/hooks/useApplication";
+import { useDataLayer } from "data-layer";
+import { useEffect, useMemo, useState } from "react";
+import { DonationPeriodResult, TimeRemaining } from "../types";
+import { calculateDonationPeriod, isValidStringDate } from "../utils";
+
+interface Params {
+  chainId: number;
+  roundId: string;
+  applicationId: string;
+  refreshInterval?: number;
+}
+
+interface Result {
+  isDonationPeriod?: boolean;
+  timeToDonationStart?: TimeRemaining;
+  timeToDonationEnd?: TimeRemaining;
+}
+
+// Returns undefined if the application is not stakable or if the donation period is not valid
+export const useDonationPeriod = ({
+  chainId,
+  roundId,
+  applicationId,
+  refreshInterval = 5 * 60 * 1000,
+}: Params): Result => {
+  const dataLayer = useDataLayer();
+  const { data: application } = useApplication(
+    {
+      chainId,
+      roundId,
+      applicationId,
+    },
+    dataLayer
+  );
+
+  const hasValidDonationDates = useMemo(() => {
+    if (!application) return false;
+    const { donationsStartTime, donationsEndTime } = application?.round ?? {};
+    return (
+      isValidStringDate(donationsStartTime) &&
+      isValidStringDate(donationsEndTime)
+    );
+  }, [application]);
+
+  const [currentTime, setCurrentTime] = useState(new Date());
+
+  useEffect(() => {
+    const interval = setInterval(() => {
+      if (hasValidDonationDates) setCurrentTime(new Date());
+    }, refreshInterval);
+
+    return () => clearInterval(interval);
+  }, [hasValidDonationDates, refreshInterval]);
+
+  const { isDonationPeriod, timeToDonationStart, timeToDonationEnd } =
+    useMemo<DonationPeriodResult>(
+      () =>
+        calculateDonationPeriod({
+          application,
+          currentTime,
+          hasValidDonationDates,
+        }),
+      [application, currentTime, hasValidDonationDates]
+    );
+  return { isDonationPeriod, timeToDonationStart, timeToDonationEnd };
+};

packages/grant-explorer/src/features/round/ViewProjectDetails/components/StakingBannerAndModal/hooks/useIsDonationPeriod.tsx

@@ -1,5 +1,4 @@
 import { useMemo } from "react";
-import { useIsDonationPeriod } from "./useIsDonationPeriod";
 
 // TODO: either from metadata or from env value
 // ONLY GITCOIN ROUNDS OF GG23
@@ -21,24 +20,15 @@ const STAKABLE_ROUNDS: Array<{ chainId: number; roundId: string }> = [
 export const useIsStakable = ({
   chainId,
   roundId,
-  applicationId,
 }: {
   chainId: number;
   roundId: string;
-  applicationId: string;
 }) => {
-  const isDonationPeriod = useIsDonationPeriod({
-    chainId,
-    roundId,
-    applicationId,
-  });
-
   const isStakable = useMemo(() => {
-    if (!isDonationPeriod) return false;
     return STAKABLE_ROUNDS.some(
       (round) => round.chainId === chainId && round.roundId === roundId
     );
-  }, [isDonationPeriod, chainId, roundId]);
+  }, [chainId, roundId]);
 
   return isStakable;
 };

packages/grant-explorer/src/features/round/ViewProjectDetails/components/StakingBannerAndModal/hooks/useIsStakable.tsx

@@ -0,0 +1,13 @@
+export interface TimeRemaining {
+  days: number;
+  hours: number;
+  minutes: number;
+  seconds: number;
+  totalMilliseconds: number;
+}
+
+export type DonationPeriodResult = {
+  isDonationPeriod?: boolean;
+  timeToDonationStart?: TimeRemaining;
+  timeToDonationEnd?: TimeRemaining;
+};