add custom fields based on pool type

Author: thelostone-mc

src/components/IconLabel/IconLabel.tsx

@@ -74,7 +74,7 @@ export const IconLabel: React.FC<
     ))
     .with(
       { type: "roundPeriod" },
-      ({ startDate, endDate = undefined, className, isLoading, label }) => (
+      ({ startDate, endDate = undefined, className, isLoading, label = "Review Period" }) => (
         <IconLabelContainer
           type="period"
           className={className}

src/components/IconLabel/types.ts

@@ -21,9 +21,9 @@ interface PeriodProps {
 
 interface RoundPeriodProps {
   type: "roundPeriod";
-  label: string;
   startDate: Date;
   endDate?: Date;
+  label?: string;
   className?: string;
 }
 

src/features/checker/pages/ReviewApplicationsPage/ReviewApplicationsPage.tsx

@@ -6,6 +6,7 @@ import { Button } from "@/primitives/Button";
 import { Icon, IconType } from "@/primitives/Icon";
 import { StatCardProps } from "@/primitives/StatCard";
 import { StatCardGroup } from "@/primitives/StatCardGroup";
+import { PoolType } from "@/types";
 
 import { ApplicationsSection } from "~checker/components";
 import { useGetApplicationsReviewPage } from "~checker/hooks";
@@ -15,7 +16,7 @@ import {
   useCheckerContext,
   useCheckerDispatchContext,
 } from "~checker/store";
-import { getManagerUrl } from "~checker/utils";
+import { getManagerUrl, getRoundLinkOnManager } from "~checker/utils";
 import { PoolSummary } from "~pool";
 
 export const ReviewApplicationsPage = ({ isStandalone }: { isStandalone: boolean }) => {
@@ -51,7 +52,10 @@ export const ReviewApplicationsPage = ({ isStandalone }: { isStandalone: boolean
   };
 
   const openRoundInManager = () => {
-    window.open(`${getManagerUrl(chainId)}/#/chain/${chainId}/round/${poolId}`, "_blank");
+    window.open(
+      getRoundLinkOnManager(chainId, poolId, poolData?.strategyName as PoolType),
+      "_blank",
+    );
   };
 
   const openCheckerApplicationEvaluations = (projectId: string) => {

src/features/checker/pages/SubmitFinalEvaluationPage/SubmitFinalEvaluationPage.tsx

@@ -9,7 +9,7 @@ import { useToast } from "@/hooks/useToast";
 import { Button } from "@/primitives/Button";
 import { Icon, IconType } from "@/primitives/Icon";
 import { StatCardGroup } from "@/primitives/StatCardGroup";
-import { Step } from "@/types";
+import { PoolType, Step } from "@/types";
 
 import { ProjectEvaluationList } from "~checker/components";
 import { useGetApplicationsFinalEvaluationPage } from "~checker/hooks";
@@ -19,7 +19,7 @@ import {
   useCheckerContext,
 } from "~checker/store";
 import { EvaluationAction, ReviewBody } from "~checker/types";
-import { getManagerUrl } from "~checker/utils";
+import { getManagerUrl, getRoundLinkOnManager } from "~checker/utils";
 import { PoolSummary } from "~pool";
 
 import { SubmitFinalEvaluationModal } from "./SubmitFinalEvaluationModal";
@@ -136,7 +136,13 @@ export const SubmitFinalEvaluationPage = ({
             variant="secondry"
             icon={<Icon type={IconType.CHEVRON_LEFT} />}
             onClick={() =>
-              window.open(`${getManagerUrl(chainId as number)}/#/chain/${chainId}/round/${poolId}`)
+              window.open(
+                getRoundLinkOnManager(
+                  chainId as number,
+                  poolId as string,
+                  poolData?.strategyName as PoolType,
+                ),
+              )
             }
             value="back to round manager"
           />

src/features/checker/pages/ViewApplicationEvaluationsPage/ViewApplicationEvaluationsPage.tsx

@@ -11,7 +11,7 @@ import { Icon, IconType } from "@/primitives/Icon";
 import { ApplicationSummary, SummaryAccordians } from "~application";
 import { ReviewDropdownList } from "~checker/components";
 import { useApplicationEvaluations, useGetPastApplications } from "~checker/hooks";
-import { getExplorerUrl } from "~checker/utils";
+import { getApplicationLinkOnExplorer, getExplorerUrl } from "~checker/utils";
 import { ProjectBanner } from "~project";
 import { ProjectSummary } from "~project";
 
@@ -80,10 +80,7 @@ export const ViewApplicationEvaluationsPage: React.FC<ViewApplicationEvaluations
               variant="none"
               className="h-[38px] w-40 bg-white"
               onClick={() => {
-                window.open(
-                  `${getExplorerUrl(chainId)}/#/round/${chainId}/${poolId}/${applicationId}`,
-                  "_blank",
-                );
+                window.open(getApplicationLinkOnExplorer(chainId, poolId, applicationId), "_blank");
               }}
             />
           </div>

src/features/checker/utils/getGitcoinLinks.ts

@@ -1,5 +1,7 @@
 import { getChains, TChain } from "@gitcoin/gitcoin-chain-data";
 
+import { PoolType } from "@/types";
+
 type ChainIdToType = Record<number, string>;
 
 const chainData = getChains();
@@ -9,23 +11,108 @@ const chainIdToType: ChainIdToType = chainData.reduce((acc, chain: TChain) => {
   return acc;
 }, {} as ChainIdToType);
 
-export const getManagerUrl = (chainId: number): string => {
+const getUrlByChainType = (chainId: number, mainnetUrl: string, stagingUrl: string): string => {
   const chainType = chainIdToType[chainId];
-  return chainType === "mainnet"
-    ? "https://manager.gitcoin.co"
-    : "https://grants-stack-manager-staging.vercel.app";
+  return chainType === "mainnet" ? mainnetUrl : stagingUrl;
 };
 
-export const getBuilderUrl = (chainId: number): string => {
-  const chainType = chainIdToType[chainId];
-  return chainType === "mainnet"
-    ? "https://builder.gitcoin.co"
-    : "https://grants-stack-builder-staging.vercel.app";
+// --- Manager ---
+
+export const getManagerUrl = (chainId: number, strategyName?: PoolType): string => {
+  switch (strategyName) {
+    case PoolType.Retrofunding:
+      return "https://retrofunding-amber.vercel.app";
+    default:
+      return getUrlByChainType(
+        chainId,
+        "https://manager.gitcoin.co",
+        "https://grants-stack-manager-staging.vercel.app",
+      );
+  }
 };
 
-export const getExplorerUrl = (chainId: number): string => {
-  const chainType = chainIdToType[chainId];
-  return chainType === "mainnet"
-    ? "https://explorer.gitcoin.co"
-    : "https://grants-stack-explorer-staging.vercel.app";
+export const getProgramLinkOnManager = (
+  chainId: number,
+  programId: string,
+  strategyName?: PoolType,
+) => {
+  switch (strategyName) {
+    default:
+      return `${getManagerUrl(chainId, strategyName)}/#/chain/${chainId}/program/${programId}`;
+  }
+};
+
+export const getRoundLinkOnManager = (chainId: number, poolId: string, strategyName?: PoolType) => {
+  switch (strategyName) {
+    default:
+      return `${getManagerUrl(chainId, strategyName)}/#/chain/${chainId}/round/${poolId}`;
+  }
+};
+
+// Builder
+
+export const getBuilderUrl = (chainId: number, strategyName?: PoolType): string => {
+  switch (strategyName) {
+    case PoolType.Retrofunding:
+    default:
+      return getUrlByChainType(
+        chainId,
+        "https://builder.gitcoin.co",
+        "https://grants-stack-builder-staging.vercel.app",
+      );
+  }
+};
+
+export const getApplyLink = (chainId: number, poolId: string, strategyName?: PoolType) => {
+  switch (strategyName) {
+    default:
+      return `${getBuilderUrl(chainId, strategyName)}/#/chains/${chainId}/rounds/${poolId}/apply`;
+  }
+};
+
+// --- Explorer ---
+export const getExplorerUrl = (chainId: number, strategyName?: PoolType): string => {
+  switch (strategyName) {
+    case PoolType.Retrofunding:
+      return "https://retrofunding-vote.vercel.app";
+    default:
+      return getUrlByChainType(
+        chainId,
+        "https://explorer.gitcoin.co",
+        "https://grants-stack-explorer-staging.vercel.app",
+      );
+  }
+};
+
+export const getPoolLinkOnExplorer = (chainId: number, poolId: string, strategyName?: PoolType) => {
+  switch (strategyName) {
+    default:
+      return `${getExplorerUrl(chainId, strategyName)}/#/round/${chainId}/${poolId}`;
+  }
+};
+
+export const getApplicationLinkOnExplorer = (
+  chainId: number,
+  poolId: string,
+  applicationId: string,
+  strategyName?: PoolType,
+) => {
+  switch (strategyName) {
+    default:
+      return `${getExplorerUrl(
+        chainId,
+        strategyName,
+      )}/#/round/${chainId}/${poolId}/${applicationId}`;
+  }
+};
+
+export const getVotingInterfaceLinkOnExplorer = (
+  chainId: number,
+  poolId: string,
+  strategyName?: PoolType,
+) => {
+  switch (strategyName) {
+    default:
+      return `${getExplorerUrl(chainId, strategyName)}/#/round/${chainId}/${poolId}/voting`;
+  }
 };

src/features/pool/components/PoolSummary/PoolSummary.stories.tsx

@@ -1,24 +1,35 @@
 import type { Meta, StoryObj } from "@storybook/react";
 
+import { PoolType } from "@/types";
+
 import { PoolSummary, PoolSummaryProps } from "./PoolSummary";
 
+const defaultProps = {
+  chainId: 1,
+  name: "Beta Round",
+  poolId: "1",
+  strategyName: PoolType.QuadraticFunding,
+  applicationsStartTime: "2024-12-09T19:22:56.413Z",
+  applicationsEndTime: "2024-12-10T19:23:30.678Z",
+  donationsStartTime: "2024-12-09T19:22:56.413Z",
+  donationsEndTime: "2024-12-09T19:22:56.413Z",
+};
+
 const meta: Meta<PoolSummaryProps> = {
   title: "Features/Pool/PoolSummary",
   component: PoolSummary,
-  args: {
-    chainId: 1,
-    name: "Beta Round",
-    poolId: "1",
-    strategyName: "allov2.DonationVotingMerkleDistributionDirectTransferStrategy",
-    applicationsStartTime: "2024-12-09T19:22:56.413Z",
-    applicationsEndTime: "2024-12-10T19:23:30.678Z",
-    donationsStartTime: "2024-12-09T19:22:56.413Z",
-    donationsEndTime: "2024-12-09T19:22:56.413Z",
-  },
+  args: defaultProps,
 } satisfies Meta;
 
 export default meta;
 
 type Story = StoryObj<typeof PoolSummary>;
 
 export const Default: Story = {};
+
+export const Retrofunding: Story = {
+  args: {
+    ...defaultProps,
+    strategyName: PoolType.Retrofunding,
+  },
+};

src/features/pool/components/PoolSummary/PoolSummary.tsx

@@ -11,7 +11,13 @@ import { Button } from "@/primitives/Button";
 import { Icon, IconType } from "@/primitives/Icon";
 import { PoolStatus, PoolType } from "@/types";
 
-import { getManagerUrl, getBuilderUrl, getExplorerUrl } from "~checker/utils";
+import {
+  getApplyLink,
+  getPoolLinkOnExplorer,
+  getProgramLinkOnManager,
+  getManagerUrl,
+  getVotingInterfaceLinkOnExplorer,
+} from "~checker/utils";
 
 import { PoolBadge } from "../PoolBadge";
 
@@ -38,13 +44,11 @@ export const PoolSummary = (pool: PoolSummaryProps) => {
   const { toast } = useToast();
   const chainInfo = getChainInfo(pool.chainId);
 
-  const managerUrl = getManagerUrl(pool.chainId);
-  const builderUrl = getBuilderUrl(pool.chainId);
-  const explorerUrl = getExplorerUrl(pool.chainId);
-
   let poolStatus: PoolStatus;
   const poolType = pool.strategyName as PoolType;
 
+  const managerUrl = getManagerUrl(pool.chainId, poolType);
+
   const now = new Date();
 
   const registerStartDate = pool.applicationsStartTime
@@ -67,9 +71,9 @@ export const PoolSummary = (pool: PoolSummaryProps) => {
   } else {
     poolStatus = PoolStatus.PreRound;
   }
-  const applyLink = `${builderUrl}/#/chains/${pool.chainId}/rounds/${pool.poolId}/apply`;
-  const explorerLink = `${explorerUrl}/#/round/${pool.chainId}/${pool.poolId}`;
-  const managerProgramLink = `${managerUrl}/#/chain/${pool.chainId}/program/${pool.programId}`;
+  const applyLink = getApplyLink(pool.chainId, pool.poolId, poolType);
+  const explorerLink = getPoolLinkOnExplorer(pool.chainId, pool.poolId, poolType);
+  const managerProgramLink = getProgramLinkOnManager(pool.chainId, pool.programId, poolType);
   const breadcrumbItems = [
     { label: "My Programs", href: managerUrl },
     {
@@ -81,6 +85,13 @@ export const PoolSummary = (pool: PoolSummaryProps) => {
       href: explorerLink,
     },
   ];
+
+  const { registerDateLabel, allocationDateLabel, viewButton } = getInfoBasedOnPoolType(
+    poolType,
+    pool,
+    explorerLink,
+  );
+
   return (
     <div className={cn(variants.variants.default, "grid grid-cols-2 py-6")}>
       <div className="flex flex-col items-start justify-start gap-4">
@@ -105,14 +116,14 @@ export const PoolSummary = (pool: PoolSummaryProps) => {
               startDate={registerStartDate}
               endDate={registerEndDate}
               isLoading={pool.isLoading}
-              label="Review"
+              label={registerDateLabel}
             />
             <IconLabel
               type="roundPeriod"
               startDate={allocationStartDate}
               endDate={allocationEndDate}
               isLoading={pool.isLoading}
-              label="Voting"
+              label={allocationDateLabel}
             />
           </div>
         </div>
@@ -140,14 +151,45 @@ export const PoolSummary = (pool: PoolSummaryProps) => {
               );
             }}
           />
-          <Button
-            icon={<Icon type={IconType.EXPLORER} />}
-            className="border-grey-100 bg-white text-black shadow-sm"
-            value="View round"
-            onClick={() => window.open(explorerLink, "_blank")}
-          />
+          {viewButton}
         </div>
       </div>
     </div>
   );
 };
+
+function getInfoBasedOnPoolType(poolType: PoolType, pool: PoolSummaryProps, explorerLink: string) {
+  let allocationDateLabel;
+  let registerDateLabel;
+  let viewButton;
+
+  if (poolType === PoolType.Retrofunding) {
+    registerDateLabel = "Applications";
+    allocationDateLabel = "Voting";
+    viewButton = (
+      <Button
+        icon={<Icon type={IconType.LINK} />}
+        className="border-grey-100 bg-white text-black shadow-sm"
+        value="Voting Interface"
+        onClick={() =>
+          window.open(
+            getVotingInterfaceLinkOnExplorer(pool.chainId, pool.poolId, poolType),
+            "_blank",
+          )
+        }
+      />
+    );
+  } else {
+    registerDateLabel = "Review";
+    allocationDateLabel = "Allocation";
+    viewButton = (
+      <Button
+        icon={<Icon type={IconType.EXPLORER} />}
+        className="border-grey-100 bg-white text-black shadow-sm"
+        value="View round"
+        onClick={() => window.open(explorerLink, "_blank")}
+      />
+    );
+  }
+  return { registerDateLabel, allocationDateLabel, viewButton };
+}