Showing Pending Applications on Round Card

packages/data-layer/src/data-layer.ts

@@ -945,15 +945,17 @@ export class DataLayer {
     orderBy,
     filter,
     whitelistedPrograms,
+    query = getRoundsQuery,
   }: {
     chainIds: number[];
     first: number;
     orderBy?: OrderByRounds;
     orderDirection?: "asc" | "desc";
     filter?: RoundsQueryVariables["filter"];
     whitelistedPrograms?: string[];
+    query?: string | undefined;
   }): Promise<{ rounds: RoundGetRound[] }> {
-    return await request(this.gsIndexerEndpoint, getRoundsQuery, {
+    return await request(this.gsIndexerEndpoint, query, {
       orderBy: orderBy ?? "NATURAL",
       chainIds,
       first,

packages/data-layer/src/queries.ts

@@ -633,6 +633,36 @@ export const getRoundsQuery = gql`
   }
 `;
 
+export const getRoundsQueryWithAllApplications = gql`
+  query GetRounds(
+    $first: Int
+    $orderBy: [RoundsOrderBy!]
+    $filter: RoundFilter
+  ) {
+    rounds(first: $first, orderBy: $orderBy, filter: $filter) {
+      id
+      chainId
+      tags
+      roundMetadata
+      roundMetadataCid
+      applicationsStartTime
+      applicationsEndTime
+      donationsStartTime
+      donationsEndTime
+      matchAmountInUsd
+      matchAmount
+      matchTokenAddress
+      strategyId
+      strategyName
+      strategyAddress
+      applications(first: 1000) {
+        id
+        status
+      }
+    }
+  }
+`;
+
 export const getRoundByIdAndChainId = gql`
   query getRoundByIdAndChainId($roundId: String!, $chainId: Int!) {
     rounds(

packages/grant-explorer/src/features/api/rounds.ts

@@ -6,7 +6,8 @@ import { RoundGetRound, RoundsQueryVariables, useDataLayer } from "data-layer";
 export const useRounds = (
   variables: RoundsQueryVariables,
   chainIds: number[],
-  onlywWhitelistedPrograms = false
+  onlywWhitelistedPrograms = false,
+  gqlQuery: string | undefined
 ): SWRResponse<RoundGetRound[]> => {
   const dataLayer = useDataLayer();
 
@@ -26,6 +27,7 @@ export const useRounds = (
           first: 500,
           chainIds,
           whitelistedPrograms,
+          query: gqlQuery,
         }),
       ]);
 

packages/grant-explorer/src/features/discovery/ExploreRoundsPage.tsx

@@ -11,6 +11,7 @@ import { getExplorerPageTitle } from "./utils/getExplorerPageTitle";
 import { RoundsGrid } from "./RoundsGrid";
 import { getEnabledChains } from "../../app/chainConfig";
 import { useMemo } from "react";
+import { getRoundsQueryWithAllApplications } from "data-layer/src/queries";
 
 const ExploreRoundsPage = () => {
   const [params] = useSearchParams();
@@ -19,7 +20,8 @@ const ExploreRoundsPage = () => {
   const rounds = useFilterRounds(
     filter,
     getEnabledChains(),
-    filter.status.includes("verified")
+    filter.status.includes("verified"),
+    getRoundsQueryWithAllApplications
   );
 
   const publicRounds = useMemo(

packages/grant-explorer/src/features/discovery/RoundCard.tsx

@@ -18,7 +18,8 @@ import { RoundDaysDetails } from "./RoundDaysDetails";
 import { RoundMatchAmountBadge } from "./RoundMatchAmountBadge";
 import { RoundStrategyBadge } from "./RoundStrategyBadge";
 import { RoundTimeBadge } from "./RoundTimeBadge";
-import { RoundGetRound } from "data-layer";
+import { RoundProjects } from "./RoundProjects";
+import { Application, RoundGetRound } from "data-layer";
 import { parseChainIdIntoResult, stringToBlobUrl } from "common/dist/chains";
 
 type RoundType = "all" | "endingSoon" | "active";
@@ -95,7 +96,11 @@ const RoundCard = ({ round, index, roundType }: RoundCardProps) => {
     atTimeMs: Date.now(),
   });
 
-  const approvedApplicationsCount = applications?.length ?? 0;
+  const totalApplicationCount = applications?.length ?? 0;
+  const approvedApplicationCount =
+    applications?.filter(
+      (application) => (application as Application)?.status === "APPROVED"
+    ).length ?? 0;
 
   const getTrackEventValue = (roundType: RoundType, index: number) => {
     if (roundType === "all") return "round-card";
@@ -156,12 +161,11 @@ const RoundCard = ({ round, index, roundType }: RoundCardProps) => {
           <div className="border-t" />
           <div className="flex justify-between">
             <div className="flex gap-2">
-              <Badge
-                disabled={approvedApplicationsCount === 0}
-                data-testid="approved-applications-count"
-              >
-                {approvedApplicationsCount} projects
-              </Badge>
+              <RoundProjects
+                roundStates={roundStates}
+                totalApplicationCount={totalApplicationCount}
+                approvedApplications={approvedApplicationCount}
+              />
               {strategyName !== ROUND_PAYOUT_DIRECT && (
                 <RoundMatchAmountBadge
                   chainId={chainId}

packages/grant-explorer/src/features/discovery/RoundProjects.tsx

@@ -0,0 +1,33 @@
+import { Badge } from "../common/styles";
+
+interface RoundProjectsProps {
+  roundStates: Array<"active" | "accepting-applications" | "ended"> | undefined;
+  totalApplicationCount: number;
+  approvedApplications: number;
+}
+
+export const RoundProjects: React.FC<RoundProjectsProps> = ({
+  roundStates,
+  totalApplicationCount,
+  approvedApplications,
+}) => {
+  if (roundStates?.includes("accepting-applications")) {
+    return (
+      <Badge
+        disabled={totalApplicationCount === 0}
+        data-testid="applications-count"
+      >
+        {totalApplicationCount} applications
+      </Badge>
+    );
+  } else {
+    return (
+      <Badge
+        disabled={approvedApplications === 0}
+        data-testid="approved-applications-count"
+      >
+        {approvedApplications} projects
+      </Badge>
+    );
+  }
+};

packages/grant-explorer/src/features/discovery/hooks/useFilterRounds.ts

@@ -75,7 +75,8 @@ export const ROUNDS_ENDING_SOON_FILTER: RoundSelectionParams & {
 export const useFilterRounds = (
   where: RoundSelectionParams,
   chains: TChain[],
-  onlywWhitelistedPrograms?: boolean
+  onlywWhitelistedPrograms?: boolean,
+  gqlQuery?: string | undefined
 ): SWRResponse<RoundGetRound[]> => {
   const chainIds =
     where.network === undefined || where.network.trim() === ""
@@ -103,7 +104,7 @@ export const useFilterRounds = (
   const orderBy =
     where.orderBy === undefined ? "CREATED_AT_BLOCK_DESC" : where.orderBy;
   const vars = { orderBy, filter };
-  return useRounds(vars, chainIds, onlywWhitelistedPrograms);
+  return useRounds(vars, chainIds, onlywWhitelistedPrograms, gqlQuery);
 };
 
 const createRoundWhereFilter = (