checker: add standalone prop to toggle pool summary

gitcoinco · Jan 27, 2025 · b86a59a · b86a59a
1 parent 4806b55
commit b86a59a
Show file tree

Hide file tree

Showing 8 changed files with 109 additions and 55 deletions.
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
@@ -18,7 +18,7 @@ import {
 import { getManagerUrl } 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();
@@ -63,27 +63,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
@@ -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,17 +117,19 @@ 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

diff --git a/src/features/checker/routers/CheckerRouter.tsx b/src/features/checker/routers/CheckerRouter.tsx
@@ -29,6 +29,7 @@ export interface CheckerRouterProps {
   steps: Step[];
   setReviewBody: (reviewBody: ReviewBody | null) => void;
   isReviewing: boolean;
+  isStandalone: boolean;
 }
 
 export const CheckerRouter = ({
@@ -42,6 +43,7 @@ export const CheckerRouter = ({
   steps,
   setReviewBody,
   isReviewing,
+  isStandalone = true,
 }: CheckerRouterProps) => {
   useInitialize({ address, poolId, chainId });
 
@@ -53,7 +55,9 @@ export const CheckerRouter = ({
   }, [route]);
 
   return match(route)
-    .with({ id: CheckerRoute.ReviewApplications }, () => <ReviewApplicationsPage />)
+    .with({ id: CheckerRoute.ReviewApplications }, () => (
+      <ReviewApplicationsPage isStandalone={isStandalone} />
+    ))
     .with(
       { id: CheckerRoute.ApplicationEvaluationOverview, projectId: P.string.minLength(1) },
       ({ projectId }) => (
@@ -62,6 +66,7 @@ export const CheckerRouter = ({
           poolId={poolId}
           applicationId={projectId}
           address={address}
+          isStandalone={isStandalone}
         />
       ),
     )
@@ -78,6 +83,7 @@ export const CheckerRouter = ({
             chainId={chainId}
             poolId={poolId}
             address={address}
+            isStandalone={isStandalone}
           />
         );
       },
@@ -87,6 +93,7 @@ export const CheckerRouter = ({
         steps={steps}
         setReviewBody={setReviewBody}
         isReviewing={isReviewing}
+        isStandalone={isStandalone}
       />
     ))
     .otherwise(() => <div>{`Route Not Found: ${JSON.stringify(route)}`}</div>);