From 0dc6a21b31ad6ed8624749603da6137b4140375e Mon Sep 17 00:00:00 2001
From: nijoe1 <nikolaos@gitcoin.co>
Date: Mon, 31 Mar 2025 12:46:31 +0300
Subject: [PATCH 1/8] chore: update env.example

---
 .env.example | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.env.example b/.env.example
index 7303185128..ba05492980 100644
--- a/.env.example
+++ b/.env.example
@@ -78,4 +78,4 @@ REACT_APP_GRANT_EXPLORER=https://explorer.gitcoin.co
 REACT_APP_COINGECKO_API_KEY=
 # ---------------------------
 
-REACT_APP_STAKING_APP=https://staking-hub-mu.vercel.app
+REACT_APP_STAKING_APP=https://boost.explorer.gitcoin.co/

From d06ee119dfd181c3ce5fe504cc5852ecc8e13fb2 Mon Sep 17 00:00:00 2001
From: nijoe1 <nikolaos@gitcoin.co>
Date: Mon, 31 Mar 2025 12:47:00 +0300
Subject: [PATCH 2/8] feat: new RoundViewLayout

---
 .../src/features/common/DefaultLayout.tsx     | 24 +++++++++++++++++++
 1 file changed, 24 insertions(+)

diff --git a/packages/grant-explorer/src/features/common/DefaultLayout.tsx b/packages/grant-explorer/src/features/common/DefaultLayout.tsx
index f1ddf69feb..056348ba7f 100644
--- a/packages/grant-explorer/src/features/common/DefaultLayout.tsx
+++ b/packages/grant-explorer/src/features/common/DefaultLayout.tsx
@@ -24,6 +24,30 @@ export function DefaultLayout({
   );
 }
 
+export function RoundViewLayout({
+  showWalletInteraction = true,
+  children,
+  infoCard,
+}: LayoutProps & { infoCard?: React.ReactNode }) {
+  return (
+    <main className={"font-sans min-h-screen text-grey-500"}>
+      <Navbar showWalletInteraction={showWalletInteraction} />
+      {infoCard && (
+        <div className="relative pt-16 w-full items-center">{infoCard}</div>
+      )}
+      <div
+        className={classNames(
+          "container pt-16 relative z-10 mx-auto px-4 sm:px-6 lg:px-20 max-w-screen-2xl",
+          infoCard ? "pt-0" : "pt-16"
+        )}
+      >
+        {children}
+      </div>
+      <Footer />
+    </main>
+  );
+}
+
 export function GradientLayout({
   showWalletInteraction = true,
   showAlloVersionBanner = false,

From 7264c32ee6969cb7d423f242517652160028540c Mon Sep 17 00:00:00 2001
From: nijoe1 <nikolaos@gitcoin.co>
Date: Mon, 31 Mar 2025 12:47:26 +0300
Subject: [PATCH 3/8] chore: small fix on dropdown component

---
 packages/grant-explorer/src/features/common/Dropdown.tsx | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/packages/grant-explorer/src/features/common/Dropdown.tsx b/packages/grant-explorer/src/features/common/Dropdown.tsx
index 96a591ce55..2a110d7b0c 100644
--- a/packages/grant-explorer/src/features/common/Dropdown.tsx
+++ b/packages/grant-explorer/src/features/common/Dropdown.tsx
@@ -9,6 +9,7 @@ type DropdownProps<T> = PropsWithChildren<{
   keepOpen?: boolean;
   renderItem: (p: { active: boolean; close: () => void } & T) => ReactElement;
   headerElement?: (close: () => void) => ReactElement;
+  labelClassName?: string;
 }>;
 
 export function Dropdown<T>({
@@ -17,6 +18,7 @@ export function Dropdown<T>({
   keepOpen,
   renderItem,
   headerElement,
+  labelClassName,
 }: DropdownProps<T>) {
   return (
     <Menu as="div" className="md:relative inline-block text-left z-20">
@@ -24,7 +26,11 @@ export function Dropdown<T>({
         <>
           <div>
             <Menu.Button className="inline-flex gap-2 items-center">
-              <span className="text-white py-2">{label}</span>
+              <span
+                className={`${labelClassName ? labelClassName : "text-white py-2 "}`}
+              >
+                {label}
+              </span>
               <ChevronDownIcon
                 className="h-5 w-5 text-black"
                 aria-hidden="true"

From c2988652fb1244d3d75b555b9ebb085b5dc1b1e1 Mon Sep 17 00:00:00 2001
From: nijoe1 <nikolaos@gitcoin.co>
Date: Mon, 31 Mar 2025 12:49:53 +0300
Subject: [PATCH 4/8] feat: updated stakingBannerAndModal to support all the
 different variations

---
 .../StakingBannerAndModal/StakingBanner.tsx   | 49 +++++++++++--
 .../StakingBannerAndModal.tsx                 | 68 +++++++++++++------
 .../StakingBannerAndModal/StakingButton.tsx   | 21 ++++--
 .../StakingCountDownLabel.tsx                 | 10 ++-
 .../StakingBannerAndModal/StakingModal.tsx    | 13 ++--
 .../hooks/useDonationPeriod.tsx               | 35 ++++------
 .../hooks/useIsStakable.tsx                   | 11 +--
 .../components/StakingBannerAndModal/utils.ts | 30 ++++----
 8 files changed, 161 insertions(+), 76 deletions(-)

diff --git a/packages/grant-explorer/src/features/round/ViewProjectDetails/components/StakingBannerAndModal/StakingBanner.tsx b/packages/grant-explorer/src/features/round/ViewProjectDetails/components/StakingBannerAndModal/StakingBanner.tsx
index da917b5758..d5705502b6 100644
--- a/packages/grant-explorer/src/features/round/ViewProjectDetails/components/StakingBannerAndModal/StakingBanner.tsx
+++ b/packages/grant-explorer/src/features/round/ViewProjectDetails/components/StakingBannerAndModal/StakingBanner.tsx
@@ -2,15 +2,54 @@ import { PropsWithChildren } from "react";
 
 const STAKING_BANNER_TITLE =
   "🔥 Boost grants, earn rewards, and shape the round!";
+
+const STAKING_BANNER_TITLE_ROUND_VIEW =
+  "🔥 Boost grants, earn rewards, and shape the round—staking is available only during GG23!";
+
+const STAKING_BANNER_TITLE_ROUND_VIEW_CLAIM_PERIOD =
+  "🎉 Staking’s a wrap! If you staked GTC, it’s time to claim your rewards!";
+
+const STAKING_BANNER_TITLE_CLAIM_PERIOD =
+  "Staking’s done—time to claim your rewards! 🎉";
+
 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!";
 
-export const StakingBanner = ({ children }: PropsWithChildren) => {
+const STAKING_BANNER_TEXT_CLAIM_PERIOD =
+  "Staking is closed! If you staked GTC during GG23, it’s time to claim your rewards from the 3% rewards pool. Thanks for boosting your favorite grants!";
+
+export const StakingBanner = ({
+  children,
+  isRoundView,
+  isClaimPeriod,
+}: PropsWithChildren<{ isRoundView?: boolean; isClaimPeriod?: boolean }>) => {
   return (
-    <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
+      className={`p-6 flex flex-col xl:flex-row items-center w-full gap-6 ${
+        isRoundView ? "justify-center" : "rounded-3xl justify-between"
+      } ${isClaimPeriod ? "bg-[#F5F4FE]" : "bg-[#F2FBF8]"}`}
+    >
+      <div
+        className={`flex flex-col gap-4 font-sans text-black ${
+          isRoundView ? "items-center" : "max-w-[609px]"
+        }`}
+      >
+        <h3 className={`font-medium ${isRoundView ? "text-xl" : "text-2xl"}`}>
+          {isRoundView
+            ? isClaimPeriod
+              ? STAKING_BANNER_TITLE_ROUND_VIEW_CLAIM_PERIOD
+              : STAKING_BANNER_TITLE_ROUND_VIEW
+            : isClaimPeriod
+              ? STAKING_BANNER_TITLE_CLAIM_PERIOD
+              : STAKING_BANNER_TITLE}
+        </h3>
+        {!isRoundView && (
+          <p className="text-base/[1.75rem] font-normal">
+            {isClaimPeriod
+              ? STAKING_BANNER_TEXT_CLAIM_PERIOD
+              : STAKING_BANNER_TEXT}
+          </p>
+        )}
       </div>
       {children}
     </div>
diff --git a/packages/grant-explorer/src/features/round/ViewProjectDetails/components/StakingBannerAndModal/StakingBannerAndModal.tsx b/packages/grant-explorer/src/features/round/ViewProjectDetails/components/StakingBannerAndModal/StakingBannerAndModal.tsx
index 156074f2b4..634811a7de 100644
--- a/packages/grant-explorer/src/features/round/ViewProjectDetails/components/StakingBannerAndModal/StakingBannerAndModal.tsx
+++ b/packages/grant-explorer/src/features/round/ViewProjectDetails/components/StakingBannerAndModal/StakingBannerAndModal.tsx
@@ -7,15 +7,16 @@ import { useDonationPeriod } from "./hooks/useDonationPeriod";
 import { StakingButton } from "./StakingButton";
 import { StakingCountDownLabel } from "./StakingCountDownLabel";
 
-const STAKING_APP_URL = "https://staking-hub-mu.vercel.app"; // TODO: from env
+const STAKING_APP_URL = process.env.REACT_APP_STAKING_APP;
 
-const COUNTDOWN_DAYS = 3;
-const DAY_IN_MILLISECONDS = 24 * 60 * 60 * 1000;
-const COUNTDOWN_STARTS_IN_MILLISECONDS = COUNTDOWN_DAYS * DAY_IN_MILLISECONDS;
 const COUNTDOWN_LABEL = "Staking begins in";
 const COUNTDOWN_LIMIT_MINUTES = 3;
 
-export const StakingBannerAndModal = () => {
+export const StakingBannerAndModal = ({
+  isRoundView,
+}: {
+  isRoundView?: boolean;
+}) => {
   const [isOpen, setIsOpen] = useState(false);
 
   const {
@@ -24,12 +25,16 @@ export const StakingBannerAndModal = () => {
     applicationId: paramApplicationId,
   } = useProjectDetailsParams();
 
-  const applicationId = paramApplicationId.includes("-")
+  const applicationId = paramApplicationId?.includes("-")
     ? paramApplicationId.split("-")[1]
     : paramApplicationId;
 
   const stakeProjectUrl = `${STAKING_APP_URL}/#/staking-round/${chainId}/${roundId}?id=${applicationId}`;
 
+  const stakeRoundUrl = `${STAKING_APP_URL}/#/staking-round/${chainId}/${roundId}`;
+
+  const claimRewardsUrl = `${STAKING_APP_URL}/#/claim-rewards`;
+
   const handleCloseModal = useCallback(() => {
     setIsOpen(false);
   }, []);
@@ -43,6 +48,15 @@ export const StakingBannerAndModal = () => {
     handleCloseModal();
   }, [handleCloseModal, stakeProjectUrl]);
 
+  const handleStakeRound = useCallback(() => {
+    window.open(stakeRoundUrl, "_blank");
+    handleCloseModal();
+  }, [handleCloseModal, stakeRoundUrl]);
+
+  const handleClaimRewards = useCallback(() => {
+    window.open(claimRewardsUrl, "_blank");
+  }, [claimRewardsUrl]);
+
   const chainIdNumber = chainId ? parseInt(chainId, 10) : 0;
 
   const isStakable = useIsStakable({
@@ -50,26 +64,41 @@ export const StakingBannerAndModal = () => {
     roundId,
   });
 
-  const { isDonationPeriod, timeToDonationStart } = useDonationPeriod({
-    chainId: chainIdNumber,
-    roundId,
-    applicationId,
-    refreshInterval: 60 * 1000, // 1 minute
-  });
+  const { isDonationPeriod, timeToDonationStart, timeToDonationEnd } =
+    useDonationPeriod({
+      chainId: chainIdNumber,
+      roundId,
+      refreshInterval: 60 * 1000, // 1 minute
+    });
 
   const isCountDownToStartPeriod =
-    timeToDonationStart &&
-    timeToDonationStart.totalMilliseconds > 0 &&
-    timeToDonationStart.totalMilliseconds < COUNTDOWN_STARTS_IN_MILLISECONDS;
+    timeToDonationStart && timeToDonationStart.totalMilliseconds > 0;
 
+  const isRoundEnded =
+    timeToDonationEnd && timeToDonationEnd.totalMilliseconds < 0;
+
+  if (isStakable && isRoundEnded) {
+    return (
+      <div className="mt-2 items-center justify-center">
+        <StakingBanner isRoundView={isRoundView} isClaimPeriod={true}>
+          <StakingButton
+            onClick={handleClaimRewards}
+            isRoundView={isRoundView}
+            isClaimPeriod={true}
+          />
+        </StakingBanner>
+      </div>
+    );
+  }
   if (isStakable && isCountDownToStartPeriod) {
     return (
       <div className="mt-2 mb-6">
-        <StakingBanner>
+        <StakingBanner isRoundView={isRoundView}>
           <StakingCountDownLabel
             timeLeft={timeToDonationStart}
             label={COUNTDOWN_LABEL}
             limitMinutes={COUNTDOWN_LIMIT_MINUTES}
+            isRoundView={isRoundView}
           />
         </StakingBanner>
       </div>
@@ -79,13 +108,14 @@ export const StakingBannerAndModal = () => {
   if (isStakable && isDonationPeriod) {
     return (
       <div className="mt-2 mb-6">
-        <StakingBanner>
-          <StakingButton onClick={handleOpenModal} />
+        <StakingBanner isRoundView={isRoundView}>
+          <StakingButton onClick={handleOpenModal} isRoundView={isRoundView} />
         </StakingBanner>
         <StakingModal
           isOpen={isOpen}
           onClose={handleCloseModal}
-          onStake={handleStake}
+          onStake={isRoundView ? handleStakeRound : handleStake}
+          isRoundView={isRoundView ?? false}
         />
       </div>
     );
diff --git a/packages/grant-explorer/src/features/round/ViewProjectDetails/components/StakingBannerAndModal/StakingButton.tsx b/packages/grant-explorer/src/features/round/ViewProjectDetails/components/StakingBannerAndModal/StakingButton.tsx
index 2ffc10c55c..1c4faf22db 100644
--- a/packages/grant-explorer/src/features/round/ViewProjectDetails/components/StakingBannerAndModal/StakingButton.tsx
+++ b/packages/grant-explorer/src/features/round/ViewProjectDetails/components/StakingBannerAndModal/StakingButton.tsx
@@ -1,14 +1,27 @@
 import { Button } from "common/src/styles";
 
 const STAKING_BUTTON_TEXT = "Stake on this project";
-
-export const StakingButton = ({ onClick }: { onClick?: () => void }) => {
+const STAKING_BUTTON_TEXT_ROUND_VIEW = "Stake GTC";
+const STAKING_BUTTON_TEXT_CLAIM_PERIOD = "Claim rewards";
+export const StakingButton = ({
+  onClick,
+  isRoundView,
+  isClaimPeriod,
+}: {
+  onClick?: () => void;
+  isRoundView?: boolean;
+  isClaimPeriod?: boolean;
+}) => {
   return (
     <Button
-      className="text-white bg-[#22635A] max-h-[40px] font-mono whitespace-nowrap"
+      className={`text-white max-h-[40px] font-mono whitespace-nowrap text-[14px]/[24px] ${isClaimPeriod ? "bg-[#5C35CC]" : "bg-[#22635A]"}`}
       onClick={onClick}
     >
-      {STAKING_BUTTON_TEXT}
+      {isClaimPeriod
+        ? STAKING_BUTTON_TEXT_CLAIM_PERIOD
+        : isRoundView
+          ? STAKING_BUTTON_TEXT_ROUND_VIEW
+          : STAKING_BUTTON_TEXT}
     </Button>
   );
 };
diff --git a/packages/grant-explorer/src/features/round/ViewProjectDetails/components/StakingBannerAndModal/StakingCountDownLabel.tsx b/packages/grant-explorer/src/features/round/ViewProjectDetails/components/StakingBannerAndModal/StakingCountDownLabel.tsx
index de3c31533d..8fc09263b7 100644
--- a/packages/grant-explorer/src/features/round/ViewProjectDetails/components/StakingBannerAndModal/StakingCountDownLabel.tsx
+++ b/packages/grant-explorer/src/features/round/ViewProjectDetails/components/StakingBannerAndModal/StakingCountDownLabel.tsx
@@ -39,16 +39,24 @@ export const StakingCountDownLabel = ({
   label = "Staking begins in",
   timeLeft,
   limitMinutes = 3,
+  isRoundView = false,
 }: {
   label?: string;
   timeLeft: TimeRemaining;
   limitMinutes?: number;
+  isRoundView?: boolean;
 }) => {
   if (timeLeft.totalMilliseconds <= 0) {
     return null;
   }
   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 items-center gap-1">
+    <div
+      className={` text-white bg-[#22635A] font-sans text-lg font-medium flex flex-row items-center gap-1 ${
+        isRoundView
+          ? "rounded-2xl px-4 py-1"
+          : "xl:flex-col py-4 px-8 rounded-2xl"
+      }`}
+    >
       <div className="whitespace-nowrap">{label}</div>
       <div className="whitespace-nowrap">
         {generateCountDownLabel({ ...timeLeft, limitMinutes })}
diff --git a/packages/grant-explorer/src/features/round/ViewProjectDetails/components/StakingBannerAndModal/StakingModal.tsx b/packages/grant-explorer/src/features/round/ViewProjectDetails/components/StakingBannerAndModal/StakingModal.tsx
index 6fd078efe6..4aa4d1ca04 100644
--- a/packages/grant-explorer/src/features/round/ViewProjectDetails/components/StakingBannerAndModal/StakingModal.tsx
+++ b/packages/grant-explorer/src/features/round/ViewProjectDetails/components/StakingBannerAndModal/StakingModal.tsx
@@ -3,6 +3,7 @@ import { BaseModal } from "../../../../common/BaseModal";
 import { ArrowRightIcon } from "@heroicons/react/20/solid";
 
 const TITLE = "You're about to stake GTC on this project";
+const TITLE_ROUND_VIEW = "You're about to stake GTC in this round!";
 const DESCRIPTION =
   "To complete your stake, you’ll be redirected to a new tab. Once you confirm your transaction, your support will be reflected on the round page.";
 
@@ -11,10 +12,10 @@ const CHECK_POINTS = [
   "Earn a share of the 3% rewards pool",
 ];
 
-const Title = () => (
+const Title = ({ isRoundView }: { isRoundView: boolean }) => (
   <div className="flex flex-col gap-2">
     <div className="text-3xl leading-[2.125rem] align-middle font-medium">
-      {TITLE}
+      {isRoundView ? TITLE_ROUND_VIEW : TITLE}
     </div>
     <div className="text-base leading-[1.625rem] align-middle font-normal">
       {DESCRIPTION}
@@ -33,9 +34,9 @@ const CheckPoints = () => (
   </div>
 );
 
-const Content = () => (
+const Content = ({ isRoundView }: { isRoundView: boolean }) => (
   <div className="flex flex-col gap-6 font-sans text-black">
-    <Title />
+    <Title isRoundView={isRoundView} />
     <CheckPoints />
   </div>
 );
@@ -74,15 +75,17 @@ export const StakingModal = ({
   isOpen,
   onClose,
   onStake,
+  isRoundView,
 }: {
   isOpen: boolean;
   onClose: () => void;
   onStake: () => void;
+  isRoundView: boolean;
 }) => {
   return (
     <BaseModal isOpen={isOpen} onClose={onClose} size="2xl">
       <div className="flex flex-col gap-8">
-        <Content />
+        <Content isRoundView={isRoundView} />
         <ActionButtons onCancel={onClose} onStake={onStake} />
       </div>
     </BaseModal>
diff --git a/packages/grant-explorer/src/features/round/ViewProjectDetails/components/StakingBannerAndModal/hooks/useDonationPeriod.tsx b/packages/grant-explorer/src/features/round/ViewProjectDetails/components/StakingBannerAndModal/hooks/useDonationPeriod.tsx
index a38d906251..369c49894b 100644
--- a/packages/grant-explorer/src/features/round/ViewProjectDetails/components/StakingBannerAndModal/hooks/useDonationPeriod.tsx
+++ b/packages/grant-explorer/src/features/round/ViewProjectDetails/components/StakingBannerAndModal/hooks/useDonationPeriod.tsx
@@ -1,13 +1,11 @@
-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";
+import { useRoundById } from "../../../../../../context/RoundContext";
 
 interface Params {
   chainId: number;
   roundId: string;
-  applicationId: string;
   refreshInterval?: number;
 }
 
@@ -21,27 +19,21 @@ interface Result {
 export const useDonationPeriod = ({
   chainId,
   roundId,
-  applicationId,
   refreshInterval = 5 * 60 * 1000,
 }: Params): Result => {
-  const dataLayer = useDataLayer();
-  const { data: application } = useApplication(
-    {
-      chainId,
-      roundId,
-      applicationId,
-    },
-    dataLayer
-  );
+  const { round } = useRoundById(chainId, roundId);
 
   const hasValidDonationDates = useMemo(() => {
-    if (!application) return false;
-    const { donationsStartTime, donationsEndTime } = application?.round ?? {};
+    if (!round) return false;
+    const {
+      roundStartTime: donationsStartTime,
+      roundEndTime: donationsEndTime,
+    } = round;
     return (
-      isValidStringDate(donationsStartTime) &&
-      isValidStringDate(donationsEndTime)
+      isValidStringDate(donationsStartTime.toISOString()) &&
+      isValidStringDate(donationsEndTime.toISOString())
     );
-  }, [application]);
+  }, [round]);
 
   const [currentTime, setCurrentTime] = useState(new Date());
 
@@ -57,11 +49,14 @@ export const useDonationPeriod = ({
     useMemo<DonationPeriodResult>(
       () =>
         calculateDonationPeriod({
-          application,
+          roundDonationPeriod: {
+            roundStartTime: round?.roundStartTime.toISOString() ?? "",
+            roundEndTime: round?.roundEndTime.toISOString() ?? "",
+          },
           currentTime,
           hasValidDonationDates,
         }),
-      [application, currentTime, hasValidDonationDates]
+      [round, currentTime, hasValidDonationDates]
     );
   return { isDonationPeriod, timeToDonationStart, timeToDonationEnd };
 };
diff --git a/packages/grant-explorer/src/features/round/ViewProjectDetails/components/StakingBannerAndModal/hooks/useIsStakable.tsx b/packages/grant-explorer/src/features/round/ViewProjectDetails/components/StakingBannerAndModal/hooks/useIsStakable.tsx
index efad9ceb5d..f12e77ebf1 100644
--- a/packages/grant-explorer/src/features/round/ViewProjectDetails/components/StakingBannerAndModal/hooks/useIsStakable.tsx
+++ b/packages/grant-explorer/src/features/round/ViewProjectDetails/components/StakingBannerAndModal/hooks/useIsStakable.tsx
@@ -6,15 +6,8 @@ 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" },
+  { chainId: 11155111, roundId: "709" },
+  { chainId: 11155111, roundId: "710" },
 ];
 
 export const useIsStakable = ({
diff --git a/packages/grant-explorer/src/features/round/ViewProjectDetails/components/StakingBannerAndModal/utils.ts b/packages/grant-explorer/src/features/round/ViewProjectDetails/components/StakingBannerAndModal/utils.ts
index 304f4a0e95..7e0ef8ff47 100644
--- a/packages/grant-explorer/src/features/round/ViewProjectDetails/components/StakingBannerAndModal/utils.ts
+++ b/packages/grant-explorer/src/features/round/ViewProjectDetails/components/StakingBannerAndModal/utils.ts
@@ -1,6 +1,5 @@
 import { isInfiniteDate } from "common";
 import { DonationPeriodResult, TimeRemaining } from "./types";
-import { Application } from "data-layer";
 
 export const isValidStringDate = (date?: string): boolean => {
   return !!date && !isInfiniteDate(new Date(date));
@@ -20,17 +19,22 @@ export const calculateTimeRemaining = (
   };
 };
 
+interface RoundDonationPeriod {
+  roundStartTime: string;
+  roundEndTime: string;
+}
+
 export const calculateDonationPeriod = ({
-  application,
+  roundDonationPeriod,
   currentTime,
   hasValidDonationDates,
 }: {
-  application?: Application;
+  roundDonationPeriod?: RoundDonationPeriod;
   currentTime: Date;
   hasValidDonationDates: boolean;
 }): DonationPeriodResult => {
-  const { donationsStartTime, donationsEndTime } = application?.round ?? {};
-  if (!hasValidDonationDates || !donationsStartTime || !donationsEndTime) {
+  const { roundStartTime, roundEndTime } = roundDonationPeriod ?? {};
+  if (!hasValidDonationDates || !roundStartTime || !roundEndTime) {
     return {
       isDonationPeriod: undefined,
       timeToDonationStart: undefined,
@@ -38,18 +42,23 @@ export const calculateDonationPeriod = ({
     };
   }
 
-  const donationsStartTimeDate = new Date(donationsStartTime);
-  const donationsEndTimeDate = new Date(donationsEndTime);
+  const donationsStartTimeDate = new Date(roundStartTime);
+  const donationsEndTimeDate = new Date(roundEndTime);
 
   const isBeforeDonationPeriod = currentTime < donationsStartTimeDate;
   const isAfterDonationPeriod = currentTime > donationsEndTimeDate;
   const isDonationPeriod = !isBeforeDonationPeriod && !isAfterDonationPeriod;
 
+  const timeToDonationEnd = calculateTimeRemaining(
+    donationsEndTimeDate,
+    currentTime
+  );
+
   if (isAfterDonationPeriod) {
     return {
       isDonationPeriod: false,
       timeToDonationStart: undefined,
-      timeToDonationEnd: undefined,
+      timeToDonationEnd,
     };
   }
 
@@ -58,11 +67,6 @@ export const calculateDonationPeriod = ({
     currentTime
   );
 
-  const timeToDonationEnd = calculateTimeRemaining(
-    donationsEndTimeDate,
-    currentTime
-  );
-
   return {
     isDonationPeriod,
     timeToDonationStart,

From 3d00cfacf3e56e024677700fc3921ba9ada8a388 Mon Sep 17 00:00:00 2001
From: nijoe1 <nikolaos@gitcoin.co>
Date: Mon, 31 Mar 2025 12:51:18 +0300
Subject: [PATCH 5/8] feat: added staking hooks

---
 .../projects/hooks/useRoundStakingSummary.tsx | 68 +++++++++++++
 .../projects/hooks/useSortApplications.ts     | 97 +++++++++++++++++++
 2 files changed, 165 insertions(+)
 create mode 100644 packages/grant-explorer/src/features/projects/hooks/useRoundStakingSummary.tsx
 create mode 100644 packages/grant-explorer/src/features/projects/hooks/useSortApplications.ts

diff --git a/packages/grant-explorer/src/features/projects/hooks/useRoundStakingSummary.tsx b/packages/grant-explorer/src/features/projects/hooks/useRoundStakingSummary.tsx
new file mode 100644
index 0000000000..689b24129b
--- /dev/null
+++ b/packages/grant-explorer/src/features/projects/hooks/useRoundStakingSummary.tsx
@@ -0,0 +1,68 @@
+import { useQuery } from "@tanstack/react-query";
+import { RoundWithApplications } from "data-layer";
+
+export const useRoundStakingSummary = (
+  alloPoolId: string,
+  chainId: string,
+  isStakableRound: boolean
+) => {
+  const query = useQuery({
+    enabled: isStakableRound,
+    queryKey: ["poolSummary", alloPoolId, chainId],
+    queryFn: () => getPoolSummary(alloPoolId, Number(chainId)),
+  });
+
+  return {
+    data: query.data,
+    isLoading: query.isLoading,
+    isError: query.isError,
+    error: query.error,
+    refetch: query.refetch,
+  };
+};
+
+export interface RoundWithStakes extends RoundWithApplications {
+  stakes: Stake[];
+  totalStakesByAnchorAddress: Record<string, string>;
+}
+
+export interface Stake {
+  chainId: number;
+  amount: string;
+  poolId: string;
+  recipient: string;
+  sender: string;
+  blockTimestamp: string;
+}
+
+const GET = async (url: string) => {
+  const response = await fetch(url, {
+    method: "GET",
+    headers: {
+      "Content-Type": "application/json",
+    },
+  });
+
+  if (!response.ok) {
+    const errorData = await response.json();
+    throw new Error(
+      `Error: ${response.status} - ${errorData.message || "Unknown error"}`
+    );
+  }
+
+  return response.json();
+};
+
+export async function getPoolSummary(
+  alloPoolId: string,
+  chainId: number
+): Promise<RoundWithStakes> {
+  try {
+    const url = `${process.env.REACT_APP_STAKING_HUB_ENDPOINT}/api/pools/${chainId}/${alloPoolId}/summary`;
+    const response: RoundWithStakes = await GET(url);
+    return response;
+  } catch (error) {
+    console.error("Error fetching pool info and stakes:", error);
+    throw error;
+  }
+}
diff --git a/packages/grant-explorer/src/features/projects/hooks/useSortApplications.ts b/packages/grant-explorer/src/features/projects/hooks/useSortApplications.ts
new file mode 100644
index 0000000000..8e8402a216
--- /dev/null
+++ b/packages/grant-explorer/src/features/projects/hooks/useSortApplications.ts
@@ -0,0 +1,97 @@
+import { useMemo } from "react";
+import { getAddress } from "viem";
+import { RoundWithStakes } from "./useRoundStakingSummary";
+import { Application } from "data-layer";
+
+export type ApplicationData = Application & {
+  totalStaked: number;
+  numberOfContributors: number;
+  totalDonations: number;
+};
+
+export type SortOption =
+  | "totalStakedDesc"
+  | "totalDonationsDesc"
+  | "totalContributorsDesc"
+  | "totalStakedAsc"
+  | "totalDonationsAsc"
+  | "totalContributorsAsc";
+
+export const useSortApplications = (
+  poolSummary: RoundWithStakes | undefined,
+  chainId: string | undefined,
+  roundId: string | undefined,
+  sortOption?: SortOption
+) => {
+  return useMemo(() => {
+    if (!poolSummary || !chainId || !roundId) return [];
+    const applications =
+      poolSummary.applications.map((application) => {
+        application.project.metadata = application.metadata.application.project;
+        return application;
+      }) ?? [];
+
+    const mappedProjects = applications.map((app) => {
+      return {
+        ...app,
+        totalStaked:
+          Number(
+            poolSummary.totalStakesByAnchorAddress[
+              getAddress(app.anchorAddress ?? "")
+            ] ?? 0
+          ) / 1e18,
+        uniqueDonorsCount: Number(app.uniqueDonorsCount),
+        numberOfContributors: Number(app.totalDonationsCount),
+        totalDonations: app.totalAmountDonatedInUsd,
+      };
+    });
+
+    // Sort based on selected option and update ranks
+    return sortProjects(mappedProjects, sortOption ?? "totalStakedDesc");
+  }, [poolSummary, chainId, roundId, sortOption]);
+};
+
+export const sortProjects = (
+  projects: ApplicationData[],
+  sortOption: SortOption
+): ApplicationData[] => {
+  // First sort the projects
+  const sortedProjects = [...projects].sort((a, b) => {
+    switch (sortOption) {
+      case "totalStakedDesc":
+        // If one has stakes and the other doesn't, the one with stakes ranks higher
+        if (a.totalStaked > 0 && b.totalStaked === 0) return -1;
+        if (b.totalStaked > 0 && a.totalStaked === 0) return 1;
+        // If both have stakes, compare by stake amount
+        if (a.totalStaked !== b.totalStaked) {
+          return b.totalStaked - a.totalStaked;
+        }
+        // If stakes are equal, sort by contributor count
+        return b.uniqueDonorsCount - a.uniqueDonorsCount;
+
+      case "totalDonationsDesc":
+        return b.totalDonations - a.totalDonations;
+
+      case "totalContributorsDesc":
+        return b.uniqueDonorsCount - a.uniqueDonorsCount;
+
+      case "totalStakedAsc":
+        return a.totalStaked - b.totalStaked;
+
+      case "totalDonationsAsc":
+        return a.totalDonations - b.totalDonations;
+
+      case "totalContributorsAsc":
+        return a.uniqueDonorsCount - b.uniqueDonorsCount;
+
+      default:
+        return 0;
+    }
+  });
+
+  // Then update the ranks based on the new order
+  return sortedProjects.map((project, index) => ({
+    ...project,
+    rank: index + 1,
+  }));
+};

From b86a2f537b11a917a026834ea48c11c1004e0504 Mon Sep 17 00:00:00 2001
From: nijoe1 <nikolaos@gitcoin.co>
Date: Mon, 31 Mar 2025 12:52:12 +0300
Subject: [PATCH 6/8] fix: project card to support a staking banner

---
 .../round/ViewRoundPage/ProjectCard.tsx       | 59 ++++++++++++++++++-
 1 file changed, 56 insertions(+), 3 deletions(-)

diff --git a/packages/grant-explorer/src/features/round/ViewRoundPage/ProjectCard.tsx b/packages/grant-explorer/src/features/round/ViewRoundPage/ProjectCard.tsx
index 8d94cc6e1c..6d0adef240 100644
--- a/packages/grant-explorer/src/features/round/ViewRoundPage/ProjectCard.tsx
+++ b/packages/grant-explorer/src/features/round/ViewRoundPage/ProjectCard.tsx
@@ -15,6 +15,7 @@ import {
 
 import { useCartStorage } from "../../../store";
 import { CartButton } from "./CartButton";
+import { useIsStakable } from "../ViewProjectDetails/components/StakingBannerAndModal/hooks/useIsStakable";
 
 export function ProjectCard(props: {
   project: Project;
@@ -28,12 +29,17 @@ export function ProjectCard(props: {
   setShowCartNotification: React.Dispatch<React.SetStateAction<boolean>>;
   crowdfundedUSD: number;
   uniqueContributorsCount: number;
+  totalStaked?: number;
 }) {
   const { project, roundRoutePath } = props;
-  const projectRecipient =
-    project.recipient.slice(0, 5) + "..." + project.recipient.slice(-4);
 
   const { projects, add, remove } = useCartStorage();
+  const isStakableRound = useIsStakable({
+    chainId: Number(props.chainId),
+    roundId: props.roundId,
+  });
+
+  const isStakingPeriodStarted = props.showProjectCardFooter;
 
   const isAlreadyInCart = projects.some(
     (cartProject) =>
@@ -41,6 +47,9 @@ export function ProjectCard(props: {
       cartProject.grantApplicationId === project.grantApplicationId &&
       cartProject.roundId === props.roundId
   );
+  if (!project) return null;
+  const projectRecipient =
+    project.recipient.slice(0, 5) + "..." + project.recipient.slice(-4);
 
   const cartProject = project as CartProject;
   cartProject.roundId = props.roundId;
@@ -55,7 +64,7 @@ export function ProjectCard(props: {
         to={`${roundRoutePath}/${project.grantApplicationId}`}
         data-testid="project-detail-link"
       >
-        <CardHeader>
+        <CardHeader className="relative">
           <ProjectBanner
             bannerImgCid={project.projectMetadata.bannerImg ?? null}
             classNameOverride={
@@ -63,6 +72,11 @@ export function ProjectCard(props: {
             }
             resizeHeight={108}
           />
+          {isStakableRound &&
+            props.totalStaked !== undefined &&
+            isStakingPeriodStarted && (
+              <StakedAmountCard totalStaked={props.totalStaked} />
+            )}
         </CardHeader>
 
         <CardContent className="px-2 relative">
@@ -131,3 +145,42 @@ export function ProjectCard(props: {
     </BasicCard>
   );
 }
+
+const StakedAmountCard = ({ totalStaked }: { totalStaked: number }) => {
+  return (
+    <div className="p-2 bg-white bg-opacity-80 rounded-2xl backdrop-blur-sm inline-flex justify-start items-center gap-2 absolute top-4 right-4">
+      <div className="w-5 h-5 relative overflow-hidden">
+        <div data-svg-wrapper className="left-[3.33px] top-[2.50px] absolute">
+          <svg
+            width="16"
+            height="18"
+            viewBox="0 0 16 18"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M8.83337 7.33333V1.5L1.33337 10.6667H7.16671L7.16671 16.5L14.6667 7.33333L8.83337 7.33333Z"
+              stroke="#7D67EB"
+              stroke-width="2"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+            />
+          </svg>
+        </div>
+      </div>
+      <div className="inline-flex flex-col justify-start items-start">
+        <div className="self-stretch inline-flex justify-start items-center gap-1">
+          <div className="justify-start text-text-primary text-sm font-medium font-mono leading-normal">
+            {totalStaked}
+          </div>
+          <div className="justify-start text-text-primary text-sm font-medium font-mono leading-normal">
+            GTC
+          </div>
+        </div>
+        <div className="self-stretch justify-start text-text-primary text-xs font-normal font-mono leading-[14px]">
+          Total staked
+        </div>
+      </div>
+    </div>
+  );
+};

From 7b8b92a53fff03d0ae03e28865d5359e17525bfd Mon Sep 17 00:00:00 2001
From: nijoe1 <nikolaos@gitcoin.co>
Date: Mon, 31 Mar 2025 12:52:42 +0300
Subject: [PATCH 7/8] feat: staking sort dropdown

---
 .../round/ViewRoundPage/SortDropdown.tsx      | 82 +++++++++++++++++++
 1 file changed, 82 insertions(+)
 create mode 100644 packages/grant-explorer/src/features/round/ViewRoundPage/SortDropdown.tsx

diff --git a/packages/grant-explorer/src/features/round/ViewRoundPage/SortDropdown.tsx b/packages/grant-explorer/src/features/round/ViewRoundPage/SortDropdown.tsx
new file mode 100644
index 0000000000..bcd7a0a314
--- /dev/null
+++ b/packages/grant-explorer/src/features/round/ViewRoundPage/SortDropdown.tsx
@@ -0,0 +1,82 @@
+import { useSearchParams } from "react-router-dom";
+import { Dropdown, DropdownItem } from "../../common/Dropdown";
+
+type SortOption =
+  | "TOTAL_STAKED_DESC"
+  | "TOTAL_CONTRIBUTORS_DESC"
+  | "TOTAL_DONATIONS_DESC"
+  | "TOTAL_STAKED_ASC"
+  | "TOTAL_CONTRIBUTORS_ASC"
+  | "TOTAL_DONATIONS_ASC";
+
+export type RoundApplicationsSortParams = {
+  orderBy: SortOption;
+};
+
+export const toQueryString = (
+  filterParams: Partial<RoundApplicationsSortParams> = {}
+): string => new URLSearchParams(filterParams).toString();
+
+interface RoundApplicationsSortOption {
+  label: string;
+  orderBy: SortOption;
+}
+
+export const SORT_OPTIONS: RoundApplicationsSortOption[] = [
+  {
+    label: "Most GTC Staked",
+    orderBy: "TOTAL_STAKED_DESC",
+  },
+  {
+    label: "Most contributors",
+    orderBy: "TOTAL_CONTRIBUTORS_DESC",
+  },
+  {
+    label: "Most donations",
+    orderBy: "TOTAL_DONATIONS_DESC",
+  },
+  {
+    label: "Least GTC Staked",
+    orderBy: "TOTAL_STAKED_ASC",
+  },
+  {
+    label: "Least contributors",
+    orderBy: "TOTAL_CONTRIBUTORS_ASC",
+  },
+  {
+    label: "Least donations",
+    orderBy: "TOTAL_DONATIONS_ASC",
+  },
+];
+
+const getSortOptionFromUrlParams = (params: URLSearchParams) => {
+  const orderBy = params.get("orderBy");
+  return SORT_OPTIONS.find((option) => option.orderBy === orderBy);
+};
+
+export function SortDropdown() {
+  const [params] = useSearchParams();
+  const selected = getSortOptionFromUrlParams(params);
+  const pathname = window.location.hash.substring(1);
+
+  return (
+    <Dropdown
+      labelClassName="text-[14px]/[21px] font-normal text-red-500"
+      label={selected?.label ?? "Most GTC Staked"}
+      options={SORT_OPTIONS}
+      renderItem={({ label, orderBy, close }) => (
+        <DropdownItem
+          onClick={(e: React.MouseEvent) => {
+            e.preventDefault();
+            close();
+            // Remove any existing query parameters from pathname
+            const basePath = pathname.split("?")[0];
+            window.location.hash = `${basePath}?orderBy=${orderBy}`;
+          }}
+        >
+          {label}
+        </DropdownItem>
+      )}
+    />
+  );
+}

From 18217e06dc5fa05ba7d44665f32a46c1ba1ad5de Mon Sep 17 00:00:00 2001
From: nijoe1 <nikolaos@gitcoin.co>
Date: Mon, 31 Mar 2025 12:54:22 +0300
Subject: [PATCH 8/8] feat: integrates staking round view

---
 .../round/ViewRoundPage/ProjectList.tsx       | 117 +++++++++++++++---
 .../round/ViewRoundPage/RoundPage.tsx         |  44 ++++---
 2 files changed, 128 insertions(+), 33 deletions(-)

diff --git a/packages/grant-explorer/src/features/round/ViewRoundPage/ProjectList.tsx b/packages/grant-explorer/src/features/round/ViewRoundPage/ProjectList.tsx
index 78ee3c3a69..1bab2907d6 100644
--- a/packages/grant-explorer/src/features/round/ViewRoundPage/ProjectList.tsx
+++ b/packages/grant-explorer/src/features/round/ViewRoundPage/ProjectList.tsx
@@ -1,12 +1,16 @@
 import { useMemo } from "react";
 
 import { Project, Round } from "../../api/types";
-
-import { BasicCard } from "../../common/styles";
-
 import { Application, useDataLayer } from "data-layer";
 import { useRoundApprovedApplications } from "../../projects/hooks/useRoundApplications";
+import { useRoundStakingSummary } from "../../projects/hooks/useRoundStakingSummary";
+import {
+  SortOption,
+  useSortApplications,
+} from "../../projects/hooks/useSortApplications";
 import { ProjectCard } from "./ProjectCard";
+import { useSearchParams } from "react-router-dom";
+import { useIsStakable } from "../ViewProjectDetails/components/StakingBannerAndModal/hooks/useIsStakable";
 
 export const ProjectList = (props: {
   projects?: Project[];
@@ -20,22 +24,87 @@ export const ProjectList = (props: {
   setCurrentProjectAddedToCart: React.Dispatch<React.SetStateAction<Project>>;
   setShowCartNotification: React.Dispatch<React.SetStateAction<boolean>>;
 }): JSX.Element => {
-  const { projects, roundRoutePath, chainId, roundId } = props;
+  const { projects: _projects, roundRoutePath, chainId, roundId } = props;
   const dataLayer = useDataLayer();
+  const [searchParams] = useSearchParams();
+  const sortOption = searchParams.get("orderBy");
+  const isStakableRound = useIsStakable({
+    chainId,
+    roundId,
+  });
 
-  const { data: applications } = useRoundApprovedApplications(
-    {
-      chainId,
-      roundId,
-    },
+  enum SortOptionEnum {
+    TOTAL_STAKED_DESC = "totalStakedDesc",
+    TOTAL_DONATIONS_DESC = "totalDonationsDesc",
+    TOTAL_CONTRIBUTORS_DESC = "totalContributorsDesc",
+    TOTAL_STAKED_ASC = "totalStakedAsc",
+    TOTAL_CONTRIBUTORS_ASC = "totalContributorsAsc",
+    TOTAL_DONATIONS_ASC = "totalDonationsAsc",
+  }
+  const params = isStakableRound
+    ? {}
+    : {
+        chainId,
+        roundId,
+      };
+
+  const { data: _applications } = useRoundApprovedApplications(
+    params,
     dataLayer
   );
 
+  const { data: poolSummary, isLoading } = useRoundStakingSummary(
+    roundId,
+    chainId.toString(),
+    isStakableRound
+  );
+
+  const _stakedApplications = useSortApplications(
+    poolSummary,
+    chainId.toString(),
+    roundId,
+    SortOptionEnum[sortOption as keyof typeof SortOptionEnum] as SortOption
+  );
+
+  const applications = useMemo(() => {
+    return _applications?.length ? _applications : (_stakedApplications ?? []);
+  }, [_stakedApplications, _applications]);
+
+  const isDonationPeriodStarted = props.showProjectCardFooter;
+
+  const LeaderboardTitle = useMemo(() => {
+    return sortOption === "TOTAL_STAKED_DESC"
+      ? "Leaderboard - Most GTC Staked"
+      : sortOption === "TOTAL_DONATIONS_DESC"
+        ? "Leaderboard - Most Donations"
+        : sortOption === "TOTAL_CONTRIBUTORS_DESC"
+          ? "Leaderboard - Most Contributors"
+          : sortOption === "TOTAL_STAKED_ASC"
+            ? "Leaderboard - Least GTC Staked"
+            : sortOption === "TOTAL_CONTRIBUTORS_ASC"
+              ? "Leaderboard - Least Contributors"
+              : sortOption === "TOTAL_DONATIONS_ASC"
+                ? "Leaderboard - Least Donations"
+                : isStakableRound && isDonationPeriodStarted
+                  ? "Leaderboard - Most GTC Staked"
+                  : "";
+  }, [sortOption, isStakableRound, isDonationPeriodStarted]);
+
+  const projects = useMemo(() => {
+    return (applications.map((application) => {
+      return _projects?.find(
+        (project) =>
+          project.anchorAddress?.toLowerCase() ===
+          application.anchorAddress?.toLowerCase()
+      );
+    }) ?? []) as Project[];
+  }, [applications, _projects]);
+
   const applicationsMapByGrantApplicationId:
-    | Map<string, Application>
+    | Map<string, Application & { totalStaked?: number }>
     | undefined = useMemo(() => {
     if (!applications) return;
-    const map: Map<string, Application> = new Map();
+    const map: Map<string, Application & { totalStaked?: number }> = new Map();
     applications.forEach((application) =>
       map.set(application.projectId, application)
     );
@@ -43,16 +112,21 @@ export const ProjectList = (props: {
   }, [applications]);
 
   return (
-    <>
+    <div className="flex flex-col gap-y-8">
+      {LeaderboardTitle && !props.isProjectsLoading && !isLoading && (
+        <span className="text-[32px]/[39px] font-modern-era-medium">
+          {LeaderboardTitle}
+        </span>
+      )}
       <div className="grid gap-x-6 gap-y-12 gap-5 justify-around md:justify-start sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 w-full">
-        {props.isProjectsLoading ? (
+        {props.isProjectsLoading || isLoading ? (
           <>
             {Array(6)
               .fill("")
               .map((item, index) => (
-                <BasicCard
+                <div
                   key={index}
-                  className="relative animate-pulse bg-grey-100"
+                  className="relative animate-pulse bg-grey-100 w-[326px] rounded-3xl h-[370px]"
                 />
               ))}
           </>
@@ -61,7 +135,7 @@ export const ProjectList = (props: {
             {projects.map((project) => {
               return (
                 <ProjectCard
-                  key={project.projectRegistryId}
+                  key={project?.projectRegistryId}
                   project={project}
                   roundRoutePath={roundRoutePath}
                   showProjectCardFooter={props.showProjectCardFooter}
@@ -75,14 +149,19 @@ export const ProjectList = (props: {
                   setShowCartNotification={props.setShowCartNotification}
                   crowdfundedUSD={
                     applicationsMapByGrantApplicationId?.get(
-                      project.projectRegistryId
+                      project?.projectRegistryId ?? ""
                     )?.totalAmountDonatedInUsd ?? 0
                   }
                   uniqueContributorsCount={
                     applicationsMapByGrantApplicationId?.get(
-                      project.projectRegistryId
+                      project?.projectRegistryId ?? ""
                     )?.uniqueDonorsCount ?? 0
                   }
+                  totalStaked={
+                    applicationsMapByGrantApplicationId?.get(
+                      project?.projectRegistryId ?? ""
+                    )?.totalStaked ?? 0
+                  }
                 />
               );
             })}
@@ -91,6 +170,6 @@ export const ProjectList = (props: {
           <p>No projects</p>
         )}
       </div>
-    </>
+    </div>
   );
 };
diff --git a/packages/grant-explorer/src/features/round/ViewRoundPage/RoundPage.tsx b/packages/grant-explorer/src/features/round/ViewRoundPage/RoundPage.tsx
index a9ff035cc2..a82a9f1d63 100644
--- a/packages/grant-explorer/src/features/round/ViewRoundPage/RoundPage.tsx
+++ b/packages/grant-explorer/src/features/round/ViewRoundPage/RoundPage.tsx
@@ -26,7 +26,7 @@ const builderURL = process.env.REACT_APP_BUILDER_URL;
 import CartNotification from "../../common/CartNotification";
 import { useAccount, useToken } from "wagmi";
 import { getAddress } from "viem";
-import { DefaultLayout } from "../../common/DefaultLayout";
+import { RoundViewLayout } from "../../common/DefaultLayout";
 import { getUnixTime } from "date-fns";
 import { PresentationChartBarIcon } from "@heroicons/react/24/outline";
 
@@ -36,7 +36,10 @@ import { ProjectList } from "./ProjectList";
 import { RoundStatsTabContent } from "./RoundStatsTabContent";
 import { RoundTabs } from "./RoundTabs";
 import { getAlloVersion } from "common/src/config";
+import { StakingBannerAndModal } from "../ViewProjectDetails/components/StakingBannerAndModal";
+import { useIsStakable } from "../ViewProjectDetails/components/StakingBannerAndModal/hooks/useIsStakable";
 
+import { SortDropdown } from "./SortDropdown";
 const alloVersion = getAlloVersion();
 
 export function RoundPage(props: {
@@ -54,6 +57,11 @@ export function RoundPage(props: {
   const [projects, setProjects] = useState<Project[]>();
   const [randomizedProjects, setRandomizedProjects] = useState<Project[]>();
   const { address: walletAddress } = useAccount();
+
+  const isStakableRound = useIsStakable({
+    chainId: Number(chainId),
+    roundId,
+  });
   const isSybilDefenseEnabled =
     round?.roundMetadata?.quadraticFundingConfig?.sybilDefense === true ||
     round?.roundMetadata?.quadraticFundingConfig?.sybilDefense !== "none";
@@ -254,7 +262,7 @@ export function RoundPage(props: {
 
   return (
     <>
-      <DefaultLayout>
+      <RoundViewLayout infoCard={<StakingBannerAndModal isRoundView={true} />}>
         {showCartNotification && renderCartNotification()}
         {props.isAfterRoundEndDate && (
           <div className="relative top-6">
@@ -442,24 +450,32 @@ export function RoundPage(props: {
               onChange={handleTabChange}
             />
             {selectedTab === 0 && (
-              <div className="relative">
-                <Search className="absolute h-4 w-4 mt-3 ml-3 " />
-                <Input
-                  className="w-full lg:w-64 h-8 rounded-full pl-10 font-mono"
-                  type="text"
-                  placeholder="Search"
-                  value={searchQuery}
-                  onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
-                    setSearchQuery(e.target.value)
-                  }
-                />
+              <div className="relative flex items-center gap-2">
+                <div className="relative">
+                  <Search className="absolute h-4 w-4 mt-3 ml-3 " />
+                  <Input
+                    className="w-full lg:w-64 h-8 rounded-full pl-10 font-mono"
+                    type="text"
+                    placeholder="Search"
+                    value={searchQuery}
+                    onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
+                      setSearchQuery(e.target.value)
+                    }
+                  />
+                </div>
+                {isStakableRound && props.isAfterRoundStartDate && (
+                  <div className="flex gap-2 items-center">
+                    <div>Sort by</div>
+                    <SortDropdown />
+                  </div>
+                )}
               </div>
             )}
           </div>
 
           <div>{projectDetailsTabs[selectedTab].content}</div>
         </div>
-      </DefaultLayout>
+      </RoundViewLayout>
     </>
   );
 }