chore: hide staking banner if it is not donation period

Author: hussmartinez

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

@@ -2,34 +2,24 @@ import { StakingModal } from "./StakingModal";
 import { useCallback, useState } from "react";
 import { StakingBanner } from "./StakingBanner";
 import { useProjectDetailsParams } from "../../hooks/useProjectDetailsParams";
-
-// TODO: either from metadata or from env value
-// ONLY GITCOIN ROUNDS OF GG23
-const STAKABLE_ROUNDS: Array<{ chainId: number; roundId: string }> = [
-  { chainId: 42161, roundId: "863" },
-  { chainId: 42161, roundId: "865" },
-  { chainId: 42161, roundId: "867" },
-  // { chainId: 42220, roundId: "27" },
-  // { chainId: 42220, roundId: "28" },
-  // { chainId: 42220, roundId: "29" },
-  // { chainId: 42220, roundId: "30" },
-  // { chainId: 42220, roundId: "31" },
-  // { chainId: 42220, roundId: "32" },
-  // { chainId: 42220, roundId: "33" },
-  // { chainId: 42220, roundId: "34" },
-  // { chainId: 42220, roundId: "35" },
-];
+import { useIsStakable } from "./hooks/useIsStakable";
 
 export const StakingBannerAndModal = () => {
   const [isOpen, setIsOpen] = useState(false);
 
-  const { chainId, roundId, applicationId } = useProjectDetailsParams();
+  const {
+    chainId,
+    roundId,
+    applicationId: paramApplicationId,
+  } = useProjectDetailsParams();
+
+  const applicationId = paramApplicationId.includes("-")
+    ? paramApplicationId.split("-")[1]
+    : paramApplicationId;
 
   const stakingAppUrl = "https://staking-hub-mu.vercel.app"; // TODO: from env
   const stakeProjectUrl = `${stakingAppUrl}/#/staking-round/${chainId}/${roundId}?id=${applicationId}`;
 
-  console.log("stakeProjectUrl", stakeProjectUrl);
-
   const handleCloseModal = useCallback(() => {
     setIsOpen(false);
   }, []);
@@ -45,9 +35,11 @@ export const StakingBannerAndModal = () => {
 
   const chainIdNumber = chainId ? parseInt(chainId, 10) : 0;
 
-  const isStakable = STAKABLE_ROUNDS.some(
-    (round) => round.chainId === chainIdNumber && round.roundId === roundId
-  );
+  const isStakable = useIsStakable({
+    chainId: chainIdNumber,
+    roundId,
+    applicationId,
+  });
 
   if (!isStakable) {
     return null;

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

@@ -0,0 +1,47 @@
+import { useApplication } from "../../../../../projects/hooks/useApplication";
+import { useDataLayer } from "data-layer";
+import { isInfiniteDate } from "../../../../../api/utils";
+import { useMemo } from "react";
+
+export const useIsDonationPeriod = ({
+  chainId,
+  roundId,
+  applicationId,
+}: {
+  chainId: number;
+  roundId: string;
+  applicationId: string;
+}) => {
+  const dataLayer = useDataLayer();
+
+  const { data: application } = useApplication(
+    {
+      chainId,
+      roundId,
+      applicationId,
+    },
+    dataLayer
+  );
+
+  const isDonationPeriod = useMemo<boolean | undefined>(() => {
+    if (!application) return undefined;
+    const { donationsStartTime, donationsEndTime } = application?.round ?? {};
+    if (
+      !donationsStartTime ||
+      !donationsEndTime ||
+      isInfiniteDate(new Date(donationsStartTime)) ||
+      isInfiniteDate(new Date(donationsEndTime))
+    )
+      return false;
+
+    const currentTime = new Date();
+    const donationsStartTimeDate = new Date("2025-03-02T12:00:00+00:00");
+    const donationsEndTimeDate = new Date(donationsEndTime);
+    return (
+      currentTime >= donationsStartTimeDate &&
+      currentTime <= donationsEndTimeDate
+    );
+  }, [application]);
+
+  return isDonationPeriod;
+};

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

@@ -0,0 +1,44 @@
+import { useMemo } from "react";
+import { useIsDonationPeriod } from "./useIsDonationPeriod";
+
+// TODO: either from metadata or from env value
+// ONLY GITCOIN ROUNDS OF GG23
+const STAKABLE_ROUNDS: Array<{ chainId: number; roundId: string }> = [
+  { chainId: 42161, roundId: "863" },
+  { chainId: 42161, roundId: "865" },
+  { chainId: 42161, roundId: "867" },
+  // { chainId: 42220, roundId: "27" },
+  // { chainId: 42220, roundId: "28" },
+  // { chainId: 42220, roundId: "29" },
+  // { chainId: 42220, roundId: "30" },
+  // { chainId: 42220, roundId: "31" },
+  // { chainId: 42220, roundId: "32" },
+  // { chainId: 42220, roundId: "33" },
+  // { chainId: 42220, roundId: "34" },
+  // { chainId: 42220, roundId: "35" },
+];
+
+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]);
+
+  return isStakable;
+};