fix

gitcoinco · Jun 17, 2024 · 557d935 · 557d935
1 parent 0cf5832
commit 557d935
Show file tree

Hide file tree

Showing 11 changed files with 208 additions and 185 deletions.
diff --git a/packages/common/src/icons/AlloV1Black.tsx b/packages/common/src/icons/AlloV1Black.tsx
@@ -0,0 +1,8 @@
+export default function AlloV1Black() {
+  return (
+    <svg width="33" height="16" viewBox="0 0 33 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path d="M12.3897 11.4377C12.2273 11.4171 12.1722 11.2132 12.3026 11.1154C13.9399 9.88569 14.4346 7.6153 13.3795 5.80926L10.2779 0.5C8.45179 1.54186 7.73179 3.74983 8.5246 5.6229C8.58776 5.77205 8.43686 5.92119 8.28595 5.85877C6.39073 5.07491 4.15604 5.7865 3.10155 7.59131L0 12.9006C1.82397 13.9412 4.11528 13.4559 5.36113 11.8458C5.46039 11.7176 5.66606 11.772 5.6869 11.9322C5.9492 13.9449 7.68916 15.5 9.7969 15.5H16C16 13.4169 14.4262 11.697 12.3897 11.438V11.4377ZM11.3872 11.4039H6.14118C5.93054 11.4039 5.79892 11.1785 5.90409 10.9983L8.52709 6.50824C8.63226 6.32804 8.8958 6.32804 9.00097 6.50824L11.624 10.9983C11.7295 11.1785 11.5975 11.4039 11.3869 11.4039H11.3872Z" fill="black"/>
+        <path d="M24.944 13H22.832L20.048 5.944H22.064L23.936 10.872H24L25.856 5.944H27.728L24.944 13ZM27.9573 5.736V4.424C29.3653 4.424 30.0053 3.944 30.3733 2.888H31.8453V13H29.8453V5.736H27.9573Z" fill="black"/>
+    </svg>
+  );
+}
diff --git a/packages/data-layer/src/data.types.ts b/packages/data-layer/src/data.types.ts
@@ -211,6 +211,8 @@ export type v2Project = {
    * The linked chains to the canonical project
    */
   linkedChains?: number[];
+  qfRounds? : string[];
+  dgRounds? : string[];
 };
 
 /**

diff --git a/packages/data-layer/src/queries.ts b/packages/data-layer/src/queries.ts
@@ -29,6 +29,12 @@ export const getProgramsByUserAndTag = gql`
         role
         createdAtBlock
       }
+      qfRounds: rounds(filter: {strategyName: {equalTo: "allov2.DonationVotingMerkleDistributionDirectTransferStrategy"}}) {
+        id
+      }
+      dgRounds: rounds(filter: {strategyName: {equalTo: "allov2.DirectGrantsLiteStrategy"}}) {
+        id
+      }
     }
   }
 `;

diff --git a/packages/round-manager/src/features/api/program.ts b/packages/round-manager/src/features/api/program.ts
@@ -50,6 +50,8 @@ export async function listPrograms(
         },
         createdByAddress: program.createdByAddress,
         roles: program.roles,
+        qfRoundsCount: program.qfRounds?.length || 0,
+        dgRoundsCount: program.dgRounds?.length || 0,
       });
     }
     return programs;

diff --git a/packages/round-manager/src/features/api/types.ts b/packages/round-manager/src/features/api/types.ts
@@ -111,6 +111,8 @@ export interface Program {
 
   tags?: string[];
   roles?: AddressAndRole[];
+  qfRoundsCount?: number;
+  dgRoundsCount?: number;
 }
 
 export type InputType =

diff --git a/packages/round-manager/src/features/common/LandingPage.tsx b/packages/round-manager/src/features/common/LandingPage.tsx
@@ -15,14 +15,12 @@ function LandingPage() {
     fetchProgramsStatus === ProgressStatus.IS_SUCCESS && !listProgramsError;
 
   return (
-    <>
-      <div className="bg-grey-50 flex flex-col items-center">
-        <Navbar programCta={isSuccess} />
+    <div className="bg-grey-50 flex flex-col items-center">
+      <Navbar programCta={isSuccess} />
         <ProgramListPage />
         <RoundListPage />
-        <Footer />
-      </div>
-    </>
+      <Footer />
+    </div>
   );
 }
 

diff --git a/packages/round-manager/src/features/common/types.ts b/packages/round-manager/src/features/common/types.ts
@@ -4,14 +4,16 @@ import { GrantApplication, ProgressStatus } from "../api/types";
 export type CardProps = {
   title: string;
   description: string;
-  displayDate: string;
+  footerContent: React.ReactNode;
+  displayDate?: string;
   status?: {
     status: string;
     style: string;
   }; // todo: update to Status type
   strategyType?: string;
   color?: string;
-  footerContent: React.ReactNode;
+  qfRoundsCount?: number;
+  dgRoundsCount?: number;
 };
 
 export type SpinnerProps = {

diff --git a/packages/round-manager/src/features/program/ProgramCard.tsx b/packages/round-manager/src/features/program/ProgramCard.tsx
@@ -10,7 +10,7 @@ import {
 import { CardProps } from "../common/types";
 
 export const ProgramCard: React.FC<CardProps> = (props: CardProps) => (
-  <BasicCard className="program-card border-none m-2 mb-6 min-w-[350px] sm:min-w-[375px] md:min-w-[400px] lg:min-w-[400px] xl:min-w-[350px] relative rounded-lg">
+  <BasicCard className="program-card border-none my-2 mb-8 min-w-[350px] sm:min-w-[375px] md:min-w-[400px] lg:min-w-[400px] xl:min-w-[200px] 2xl:min-w-[340px] relative rounded-lg mr-auto">
     <CardContent className="p-4 px-5">
       <CardTitle className="font-medium text-2xl font-sans">
         {props.title}
@@ -21,20 +21,20 @@ export const ProgramCard: React.FC<CardProps> = (props: CardProps) => (
           <span>{props.description}</span>
         </div>
         <div className="flex flex-col mt-6">
-          {/* todo: Add badges to props for each round category that exists within the program */}
-          {props.strategyType === "quadratic" ? (
+          {props.qfRoundsCount != 0 &&
             <div className="my-1">
               <span className="border border-green-100 rounded-2xl bg-green-100 p-1 px-2 font-mono">
-                Quadratic funding
+                {props.qfRoundsCount} Quadratic funding
               </span>
             </div>
-          ) : (
+          }
+          {props.dgRoundsCount != 0 &&
             <div className="my-1">
               <span className="border border-yellow-100 rounded-2xl bg-yellow-100 p-1 px-2 font-mono">
-                Direct Grants
+                {props.dgRoundsCount} Direct Grants
               </span>
             </div>
-          )}
+          }
         </div>
       </CardDescription>
     </CardContent>

diff --git a/packages/round-manager/src/features/program/ProgramListPage.tsx b/packages/round-manager/src/features/program/ProgramListPage.tsx
@@ -9,6 +9,7 @@ import { useAlloVersion } from "common/src/components/AlloVersionSwitcher";
 import { ExclamationCircleIcon } from "@heroicons/react/solid";
 import { ProgramCard } from "./ProgramCard";
 import { chunk } from "lodash";
+import AlloV1Black from "common/src/icons/AlloV1Black";
 
 const maxProgramsPerRow = 4;
 
@@ -51,13 +52,9 @@ function ListPrograms() {
           key={program.id}
           title={program.metadata.name}
           description={`${program.operatorWallets.length} ${program.operatorWallets.length === 1 ? "operator" : "operators"}`}
-          displayDate=""
           strategyType="quadratic"
-          // {
-          //   round.strategyName === "allov2.DirectGrantsLiteStrategy"
-          //     ? "direct"
-          //     : "quadratic"
-          // }
+          qfRoundsCount={program.qfRoundsCount}
+          dgRoundsCount={program.dgRoundsCount}
           footerContent={
             <>
               <div className="mr-auto">
@@ -67,19 +64,17 @@ function ListPrograms() {
                   className="rounded-full w-6 h-6 mr-2"
                 />
               </div>
-              <div className="-ml-28">
-                {program.tags?.includes("allo-v1") && (
-                  // todo: add the icon for Allo
-                  // <AlloV1 color="black" className="h-20 w-20 ml-12" />
-                  <span>v1</span>
-                )}
-              </div>
+              {program.tags?.includes("allo-v1") && (
+                <div className="-ml-[4rem] 2xl:-ml-[5rem] mr-1">
+                  <AlloV1Black/>
+                </div>
+              )}
               <div
                 className="text-gray-500 font-normal ml-auto"
                 data-testid="program-card"
               >
                 View details{" "}
-                <ArrowNarrowRightIcon className="h-5 w-5 inline ml-1" />
+                <ArrowNarrowRightIcon className="h-5 w-5 inline ml-1 mb-1" />
               </div>
             </>
           }
@@ -89,94 +84,98 @@ function ListPrograms() {
   });
 
   return (
-    <div className="bg-grey-50">
-      {fetchProgramsStatus === ProgressStatus.IN_PROGRESS && (
-        <Spinner text="We're fetching your Programs." />
-      )}
-      {/* todo: remove when ready */}
-      {version === "allo-v1" && (
-        <div className="bg-[#D3EDFE] py-4 text-center font-medium flex flex-col items-center justify-center">
-          <div>
-            <ExclamationCircleIcon className="h-5 w-5 inline-block mr-2" />
-            You are currently on Allo v1. To switch to the most current version
-            of Manager,&nbsp;
-            <button
-              type="button"
-              className="underline"
-              onClick={(e) => {
-                e.preventDefault();
-                switchToVersion("allo-v2");
-              }}
-            >
-              switch to Allo v2.
-            </button>
-            &nbsp;
-          </div>
-          <div>
-            Click&nbsp;
-            <a
-              href="https://gitcoin.notion.site/Navigating-the-Transition-to-Allo-v2-A-Guide-for-Grants-Managers-63e2bdddccb94792af83fdffb1530b85?pvs=74"
-              rel="noreferrer"
-              className="underline"
-              target="_blank"
-            >
-              here
-            </a>
-            &nbsp;to learn more about Allo v2.
-          </div>
-        </div>
-      )}
-      {/* {version === "allo-v2" && ()} */}
-      <main className="container px-8 max-h-full">
-        <div className="flex flex-col mb-6">
-          <div className="flex flex-col md:flex-row items-center justify-between pt-2 md:pt-8">
-            <div className="flex flex-row items-center justify-start mb-2">
-              <span className="text-2xl font-medium text-gray-500 antialiased">
-                Programs
-              </span>
-              <span
-                className="ml-8 mt-1 text-xs font-mono hover:cursor-pointer"
-                onClick={() => {
-                  setViewAllPrograms(!viewAllPrograms);
+    <main className="container max-h-full">
+      <div className="bg-grey-50 w-full">
+        {fetchProgramsStatus === ProgressStatus.IN_PROGRESS && (
+          <Spinner text="We're fetching your Programs." />
+        )}
+        {/* todo: remove when ready */}
+        {version === "allo-v1" && (
+          <div className="bg-[#D3EDFE] py-4 text-center font-medium flex flex-col items-center justify-center">
+            <div>
+              <ExclamationCircleIcon className="h-5 w-5 inline-block mr-2" />
+              You are currently on Allo v1. To switch to the most current version
+              of Manager,&nbsp;
+              <button
+                type="button"
+                className="underline"
+                onClick={(e) => {
+                  e.preventDefault();
+                  switchToVersion("allo-v2");
                 }}
               >
-                {viewAllPrograms ? "View less" : "View all"}
-              </span>
+                switch to Allo v2.
+              </button>
+              &nbsp;
             </div>
-            <div className="flex flex-row items-center justify-end mr-8 lg:mr-2">
-              <Link to="/program/create">
-                <span className="flex flex-row items-center justify-between p-2 bg-white hover:border-gray-200 border border-transparent rounded-lg text-xs font-mono font-medium hover:cursor-pointer">
-                  <PlusIcon className="h-5 w-5 inline mr-2" />
-                  <span data-testid="create-round-small-link">
-                    Create program
-                  </span>
-                </span>
-              </Link>
+            <div>
+              Click&nbsp;
+              <a
+                href="https://gitcoin.notion.site/Navigating-the-Transition-to-Allo-v2-A-Guide-for-Grants-Managers-63e2bdddccb94792af83fdffb1530b85?pvs=74"
+                rel="noreferrer"
+                className="underline"
+                target="_blank"
+              >
+                here
+              </a>
+              &nbsp;to learn more about Allo v2.
             </div>
           </div>
-        </div>
-        <div className="w-full overflow-hidden">
-          {isSuccess && hasNoPrograms() && startAProgramCard}
-          {chunk(
-            viewAllPrograms
-              ? ProgramList
-              : ProgramList.slice(0, maxProgramsPerRow * 2),
-            maxProgramsPerRow
-          ).map((programsChunk, rowIndex) => (
-            <div
-              key={rowIndex}
-              className={`flex flex-row flex-wrap w-full items-center ${rowIndex < 2 ? "justify-between" : "justify-start"}`}
-            >
-              {programsChunk.map((program, index) => (
-                <div key={index} className="w-full md:w-auto">
-                  {program}
+        )}
+        <main className="max-w-screen-2xl mx-auto px-8 max-h-full">
+        {/* {version === "allo-v2" && ()} */}
+          {isSuccess && 
+            <div className="flex flex-col mb-6">
+              <div className="flex flex-col md:flex-row items-center justify-between pt-2 md:pt-8">
+                <div className="flex flex-row items-center justify-start mb-2">
+                  <span className="text-2xl font-medium text-gray-500 antialiased">
+                    Programs
+                  </span>
+                  <span
+                    className="ml-8 mt-1 text-xs font-mono hover:cursor-pointer"
+                    onClick={() => {
+                      setViewAllPrograms(!viewAllPrograms);
+                    }}
+                  >
+                    {viewAllPrograms ? "View less" : "View all"}
+                  </span>
                 </div>
-              ))}
+                <div className="flex flex-row items-center justify-end">
+                  <Link to="/program/create">
+                    <span className="flex flex-row items-center justify-between p-2 bg-white hover:border-gray-200 border border-transparent rounded-lg text-xs font-mono font-medium hover:cursor-pointer">
+                      <PlusIcon className="h-5 w-5 inline mr-2" />
+                      <span data-testid="create-round-small-link">
+                        Create program
+                      </span>
+                    </span>
+                  </Link>
+                </div>
+              </div>
             </div>
-          ))}
-        </div>
-      </main>
-    </div>
+          }
+          <div className="w-full overflow-hidden">
+            {isSuccess && hasNoPrograms() && startAProgramCard}
+            {chunk(
+              viewAllPrograms
+                ? ProgramList
+                : ProgramList.slice(0, maxProgramsPerRow * 2),
+              maxProgramsPerRow
+            ).map((programsChunk, rowIndex) => (
+              <div
+                key={rowIndex}
+                className="flex flex-row flex-wrap w-full items-center justify-between"
+              >
+                {programsChunk.map((program, index) => (
+                  <div key={index} className="w-full md:w-auto">
+                    {program}
+                  </div>
+                ))}
+              </div>
+            ))}
+          </div>
+        </main>
+      </div>
+    </main>
   );
 }
 

diff --git a/packages/round-manager/src/features/round/RoundCard.tsx b/packages/round-manager/src/features/round/RoundCard.tsx
@@ -8,7 +8,7 @@ import {
 import { CardProps } from "../common/types";
 
 export const RoundCard: React.FC<CardProps> = (props: CardProps) => (
-  <BasicCard className="border border-gray-200 w-full mb-8 rounded-xl md:h-[230px]">
+  <BasicCard className="border border-gray-200 w-full mb-8 rounded-xl md:h-[220px]">
     <CardContent className="p-4 px-5">
       <div className="flex flex-row items-center justify-between">
         <div className="flex flex-col">
@@ -37,7 +37,7 @@ export const RoundCard: React.FC<CardProps> = (props: CardProps) => (
         <div className="flex justify-end text-sm font-mono mt-16">
           {/* todo: figure out the status display by dates */}
           <span
-            className={`border-none p-1 px-2 rounded-full ${props.status && props.status.style}`}
+            className={`border-none p-1 px-3 rounded-full ${props.status && props.status.style}`}
           >
             {props.status && props.status.status}
           </span>