fix: retrofunding improvements for pool details (#125)

* checker: add standalone prop to toggle pool summary * poolsummary: fix label and padding * add custom fields based on pool type
gitcoinco · Jan 28, 2025 · ce30387 · ce30387
1 parent 4806b55
commit ce30387
Show file tree

Hide file tree

Showing 14 changed files with 353 additions and 137 deletions.
diff --git a/src/components/IconLabel/IconLabel.tsx b/src/components/IconLabel/IconLabel.tsx
@@ -72,32 +72,35 @@ export const IconLabel: React.FC<
           ))}
       </IconLabelContainer>
     ))
-    .with({ type: "roundPeriod" }, ({ startDate, endDate = undefined, className, isLoading }) => (
-      <IconLabelContainer
-        type="period"
-        className={className}
-        iconType={IconType.CLOCK}
-        iconVariant={icon({ type: isLoading ? "loading" : "roundPeriod" })}
-      >
-        {match(isLoading)
-          .with(true, () => (
-            <div className="flex items-center gap-1">
-              <span className={text({ type: "roundPeriod" })}>{`Review period:`}</span>
-              <Skeleton className="h-6 w-72 rounded-lg" />
-            </div>
-          ))
-          .otherwise(() => (
-            <span className={text({ type: "roundPeriod" })}>{`Review period: ${formatDate(
-              startDate,
-              DateFormat.ShortMonthDayYear24HourUTC,
-            )} - ${
-              endDate
-                ? formatDate(endDate, DateFormat.ShortMonthDayYear24HourUTC)
-                : "No end date (open round)"
-            }`}</span>
-          ))}
-      </IconLabelContainer>
-    ))
+    .with(
+      { type: "roundPeriod" },
+      ({ startDate, endDate = undefined, className, isLoading, label = "Review Period" }) => (
+        <IconLabelContainer
+          type="period"
+          className={className}
+          iconType={IconType.CLOCK}
+          iconVariant={icon({ type: isLoading ? "loading" : "roundPeriod" })}
+        >
+          {match(isLoading)
+            .with(true, () => (
+              <div className="flex items-center gap-1">
+                <span className={text({ type: "roundPeriod" })}>{label}</span>
+                <Skeleton className="h-6 w-72 rounded-lg" />
+              </div>
+            ))
+            .otherwise(() => (
+              <span className={text({ type: "roundPeriod" })}>{`${label}: ${formatDate(
+                startDate,
+                DateFormat.ShortMonthDayYear24HourUTC,
+              )} - ${
+                endDate
+                  ? formatDate(endDate, DateFormat.ShortMonthDayYear24HourUTC)
+                  : "No end date (open round)"
+              }`}</span>
+            ))}
+        </IconLabelContainer>
+      ),
+    )
     .with({ type: "dateWithPrefix" }, ({ date, prefix, className, isLoading }) => (
       <IconLabelContainer
         type="date"

diff --git a/src/components/IconLabel/types.ts b/src/components/IconLabel/types.ts
@@ -23,6 +23,7 @@ interface RoundPeriodProps {
   type: "roundPeriod";
   startDate: Date;
   endDate?: Date;
+  label?: string;
   className?: string;
 }
 

diff --git a/src/features/checker/apps/Checker.stories.tsx b/src/features/checker/apps/Checker.stories.tsx
@@ -46,3 +46,32 @@ export const Default: Story = {
     );
   },
 };
+
+export const Embedded: Story = {
+  render(args) {
+    // New StoryWrapper component
+    const StoryWrapper = () => {
+      const { setEvaluationBody, isSuccess, isEvaluating, isError } = usePerformEvaluation();
+      const { steps, setReviewBody, isReviewing } = usePerformOnChainReview();
+
+      return (
+        <Checker
+          {...args}
+          setEvaluationBody={setEvaluationBody}
+          isSuccess={isSuccess}
+          isEvaluating={isEvaluating}
+          isError={isError}
+          steps={steps}
+          setReviewBody={setReviewBody}
+          isReviewing={isReviewing}
+          isStandalone={false}
+        />
+      );
+    };
+    return (
+      <CheckerProvider>
+        <StoryWrapper />
+      </CheckerProvider>
+    );
+  },
+};
diff --git a/src/features/checker/apps/Checker.tsx b/src/features/checker/apps/Checker.tsx
@@ -19,6 +19,7 @@ export interface CheckerProps {
   steps: Step[];
   setReviewBody: (reviewBody: ReviewBody | null) => void;
   isReviewing: boolean;
+  isStandalone: boolean;
 }
 
 export const Checker = (props: CheckerProps) => {

diff --git a/...res/checker/pages/ApplicationEvaluationOverviewPage/ApplicationEvaluationOverviewPage.tsx b/...res/checker/pages/ApplicationEvaluationOverviewPage/ApplicationEvaluationOverviewPage.tsx
@@ -20,13 +20,15 @@ export interface ApplicationEvaluationOverviewPageProps {
   poolId: string;
   applicationId: string;
   address: Hex;
+  isStandalone: boolean;
 }
 
 export const ApplicationEvaluationOverviewPage = ({
   chainId,
   poolId,
   applicationId,
   address,
+  isStandalone,
 }: ApplicationEvaluationOverviewPageProps) => {
   useInitialize({ address, poolId, chainId });
 
@@ -49,17 +51,19 @@ export const ApplicationEvaluationOverviewPage = ({
 
   return (
     <div className="flex flex-col gap-6">
-      <PoolSummary
-        chainId={chainId}
-        poolId={poolId}
-        programId={poolData?.project.id as string}
-        strategyName={poolData?.strategyName}
-        name={poolData?.roundMetadata.name}
-        applicationsStartTime={poolData?.applicationsStartTime}
-        applicationsEndTime={poolData?.applicationsEndTime}
-        donationsStartTime={poolData?.donationsStartTime}
-        donationsEndTime={poolData?.donationsEndTime}
-      />
+      {isStandalone && (
+        <PoolSummary
+          chainId={chainId}
+          poolId={poolId}
+          programId={poolData?.project.id as string}
+          strategyName={poolData?.strategyName}
+          name={poolData?.roundMetadata.name}
+          applicationsStartTime={poolData?.applicationsStartTime}
+          applicationsEndTime={poolData?.applicationsEndTime}
+          donationsStartTime={poolData?.donationsStartTime}
+          donationsEndTime={poolData?.donationsEndTime}
+        />
+      )}
       <div className="mx-auto flex max-w-[1440px] flex-col gap-4 px-20">
         <div>
           <Button

diff --git a/src/features/checker/pages/ReviewApplicationsPage/ReviewApplicationsPage.tsx b/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,10 +16,10 @@ import {
   useCheckerContext,
   useCheckerDispatchContext,
 } from "~checker/store";
-import { getManagerUrl } from "~checker/utils";
+import { getManagerUrl, getRoundLinkOnManager } from "~checker/utils";
 import { PoolSummary } from "~pool";
 
-export const ReviewApplicationsPage = () => {
+export const ReviewApplicationsPage = ({ isStandalone }: { isStandalone: boolean }) => {
   const { categorizedReviews, statCardsProps, poolData, poolFetchState } =
     useGetApplicationsReviewPage() || {};
   const { poolId, chainId } = useCheckerContext();
@@ -51,7 +52,10 @@ export const ReviewApplicationsPage = () => {
   };
 
   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) => {
@@ -63,27 +67,31 @@ export const ReviewApplicationsPage = () => {
 
   return (
     <div className="flex flex-col gap-6 ">
-      <PoolSummary
-        isLoading={isLoading}
-        chainId={chainId}
-        poolId={poolId}
-        programId={poolData?.project.id as string}
-        strategyName={poolData?.strategyName}
-        name={poolData?.roundMetadata?.name}
-        applicationsStartTime={poolData?.applicationsStartTime}
-        applicationsEndTime={poolData?.applicationsEndTime}
-        donationsStartTime={poolData?.donationsStartTime}
-        donationsEndTime={poolData?.donationsEndTime}
-      />
+      {isStandalone && (
+        <PoolSummary
+          isLoading={isLoading}
+          chainId={chainId}
+          poolId={poolId}
+          programId={poolData?.project.id as string}
+          strategyName={poolData?.strategyName}
+          name={poolData?.roundMetadata?.name}
+          applicationsStartTime={poolData?.applicationsStartTime}
+          applicationsEndTime={poolData?.applicationsEndTime}
+          donationsStartTime={poolData?.donationsStartTime}
+          donationsEndTime={poolData?.donationsEndTime}
+        />
+      )}
       <div className="mx-auto flex max-w-[1440px] flex-col gap-6 px-20">
-        <div className="flex justify-start">
-          <Button
-            variant="secondry"
-            icon={<Icon type={IconType.CHEVRON_LEFT} />}
-            onClick={openRoundInManager}
-            value="back to round manager"
-          />
-        </div>
+        {isStandalone && (
+          <div className="flex justify-start">
+            <Button
+              variant="secondry"
+              icon={<Icon type={IconType.CHEVRON_LEFT} />}
+              onClick={openRoundInManager}
+              value="back to round manager"
+            />
+          </div>
+        )}
         <StatCardGroup stats={statCardsProps as StatCardProps[]} justify="center" />
         <div className="flex flex-col gap-8">
           <div className="flex flex-col gap-4">

diff --git a/...checker/pages/SubmitApplicationEvaluationPage/SubmitApplicationEvaluationPage.stories.tsx b/...checker/pages/SubmitApplicationEvaluationPage/SubmitApplicationEvaluationPage.stories.tsx
@@ -60,6 +60,7 @@ export const Default: Story = {
         chainId={args.chainId}
         poolId={args.poolId}
         address={args.address}
+        isStandalone={true}
       />
     );
   },

diff --git a/...eatures/checker/pages/SubmitApplicationEvaluationPage/SubmitApplicationEvaluationPage.tsx b/...eatures/checker/pages/SubmitApplicationEvaluationPage/SubmitApplicationEvaluationPage.tsx
@@ -33,6 +33,7 @@ export interface SubmitApplicationEvaluationPageProps {
   isSuccess: boolean;
   isEvaluating: boolean;
   isError: boolean;
+  isStandalone: boolean;
 }
 
 export const SubmitApplicationEvaluationPage = ({
@@ -44,6 +45,7 @@ export const SubmitApplicationEvaluationPage = ({
   isSuccess,
   isEvaluating,
   isError,
+  isStandalone,
 }: SubmitApplicationEvaluationPageProps) => {
   useInitialize({ address, poolId, chainId });
 
@@ -134,17 +136,19 @@ export const SubmitApplicationEvaluationPage = ({
 
   return (
     <div className="flex flex-col gap-6">
-      <PoolSummary
-        chainId={chainId}
-        poolId={poolId}
-        programId={poolData?.project.id as string}
-        strategyName={poolData?.strategyName}
-        name={poolData?.roundMetadata?.name}
-        applicationsStartTime={poolData?.applicationsStartTime}
-        applicationsEndTime={poolData?.applicationsEndTime}
-        donationsStartTime={poolData?.donationsStartTime}
-        donationsEndTime={poolData?.donationsEndTime}
-      />
+      {isStandalone && (
+        <PoolSummary
+          chainId={chainId}
+          poolId={poolId}
+          programId={poolData?.project.id as string}
+          strategyName={poolData?.strategyName}
+          name={poolData?.roundMetadata?.name}
+          applicationsStartTime={poolData?.applicationsStartTime}
+          applicationsEndTime={poolData?.applicationsEndTime}
+          donationsStartTime={poolData?.donationsStartTime}
+          donationsEndTime={poolData?.donationsEndTime}
+        />
+      )}
       <div className="mx-auto flex max-w-[1440px] flex-col gap-4 px-20">
         <SubmitApplicationEvaluationModal
           evaluationStatus={evaluationStatus}

diff --git a/src/features/checker/pages/SubmitFinalEvaluationPage/SubmitFinalEvaluationPage.tsx b/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";
@@ -28,12 +28,14 @@ export interface SubmitFinalEvaluationPageProps {
   steps: Step[];
   setReviewBody: (reviewBody: ReviewBody | null) => void;
   isReviewing: boolean;
+  isStandalone: boolean;
 }
 
 export const SubmitFinalEvaluationPage = ({
   steps,
   setReviewBody,
   isReviewing,
+  isStandalone,
 }: SubmitFinalEvaluationPageProps) => {
   const { categorizedReviews, statCardsProps, reviewBody, poolData } =
     useGetApplicationsFinalEvaluationPage() || {};
@@ -115,24 +117,32 @@ export const SubmitFinalEvaluationPage = ({
 
   return (
     <div className="flex flex-col gap-6">
-      <PoolSummary
-        chainId={chainId as number}
-        poolId={poolId as string}
-        programId={poolData?.project.id as string}
-        strategyName={poolData?.strategyName}
-        name={poolData?.roundMetadata.name}
-        applicationsStartTime={poolData?.applicationsStartTime}
-        applicationsEndTime={poolData?.applicationsEndTime}
-        donationsStartTime={poolData?.donationsStartTime}
-        donationsEndTime={poolData?.donationsEndTime}
-      />
+      {isStandalone && (
+        <PoolSummary
+          chainId={chainId as number}
+          poolId={poolId as string}
+          programId={poolData?.project.id as string}
+          strategyName={poolData?.strategyName}
+          name={poolData?.roundMetadata.name}
+          applicationsStartTime={poolData?.applicationsStartTime}
+          applicationsEndTime={poolData?.applicationsEndTime}
+          donationsStartTime={poolData?.donationsStartTime}
+          donationsEndTime={poolData?.donationsEndTime}
+        />
+      )}
       <div className="mx-auto flex max-w-[1440px] flex-col  gap-6 px-20">
         <div className="flex justify-start">
           <Button
             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"
           />

diff --git a/src/features/checker/pages/ViewApplicationEvaluationsPage/ViewApplicationEvaluationsPage.tsx b/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>