OCT-1935 Implement Karma Gap integration (#491)

client/package.json

@@ -55,6 +55,7 @@
     "react-dom": "^18.3.1",
     "react-i18next": "^14.1.2",
     "react-infinite-scroller": "^1.2.6",
+    "react-lines-ellipsis": "^0.15.4",
     "react-router-dom": "^6.23.1",
     "react-slider": "^2.0.6",
     "react-toastify": "^10.0.5",

client/src/api/calls/karmaGap.ts

@@ -0,0 +1,45 @@
+import { API_ENDPOINT } from 'constants/karmaGap';
+import apiService from 'services/apiService';
+
+export type GrantsPerProgram = {
+  data: {
+    milestones: {
+      createdAt: string;
+      data: {
+        description: string;
+        endsAt: number;
+        title: string; // Timestamp.
+      };
+      updatedAt: string;
+    }[];
+    project: {
+      details: {
+        data: {
+          description: string;
+          slug: string;
+          title: string;
+        };
+        recipient: string;
+      };
+      // externalAddresses is set only when recipient does not match project has in Octant.
+      externalAddresses?: {
+        octant: string;
+      };
+      recipient: string;
+    };
+    recipient: string;
+    // Date;
+    uid: string;
+    updatedAt: string;
+  }[];
+};
+
+export async function apiGetGrantsPerProgram(
+  selectedProgramIds: string,
+): Promise<GrantsPerProgram> {
+  return apiService
+    .get(
+      `${API_ENDPOINT}communities/octant/grants?page=0&pageLimit=100&selectedProgramIds=${selectedProgramIds}`,
+    )
+    .then(({ data }) => data);
+}

client/src/api/queryKeys/index.ts

@@ -15,6 +15,7 @@ export const ROOTS: Root = {
   epochesEndTime: 'epochesEndTime',
   estimatedEffectiveDeposit: 'estimatedEffectiveDeposit',
   individualReward: 'individualReward',
+  karmaGapMilestonesPerProjectPerGrantPerProgram: 'karmaGapMilestonesPerProjectPerGrantPerProgram',
   matchedProjectRewards: 'matchedProjectRewards',
   patronMode: 'patronMode',
   projectRewardsThreshold: 'projectRewardsThreshold',
@@ -53,6 +54,11 @@ export const QUERY_KEYS: QueryKeys = {
   individualProjectRewards: ['individualProjectRewards'],
   individualReward: epochNumber => [ROOTS.individualReward, epochNumber.toString()],
   isDecisionWindowOpen: ['isDecisionWindowOpen'],
+  karmaGapMilestonesPerProjectPerGrantPerProgram: (selectedProgramIds, projectAddress) => [
+    ROOTS.karmaGapMilestonesPerProjectPerGrantPerProgram,
+    selectedProgramIds,
+    projectAddress,
+  ],
   largestLockedAmount: ['largestLockedAmount'],
   lockedSummaryLatest: ['lockedSummaryLatest'],
   lockedSummarySnapshots: ['lockedSummarySnapshots'],

client/src/api/queryKeys/types.ts

@@ -15,6 +15,7 @@ export type Root = {
   epochesEndTime: 'epochesEndTime';
   estimatedEffectiveDeposit: 'estimatedEffectiveDeposit';
   individualReward: 'individualReward';
+  karmaGapMilestonesPerProjectPerGrantPerProgram: 'karmaGapMilestonesPerProjectPerGrantPerProgram';
   matchedProjectRewards: 'matchedProjectRewards';
   patronMode: 'patronMode';
   projectRewardsThreshold: 'projectRewardsThreshold';
@@ -55,6 +56,10 @@ export type QueryKeys = {
   individualProjectRewards: ['individualProjectRewards'];
   individualReward: (epochNumber: number) => [Root['individualReward'], string];
   isDecisionWindowOpen: ['isDecisionWindowOpen'];
+  karmaGapMilestonesPerProjectPerGrantPerProgram: (
+    selectedProgramIds: string,
+    projectAddress: string,
+  ) => [Root['karmaGapMilestonesPerProjectPerGrantPerProgram'], string, string];
   largestLockedAmount: ['largestLockedAmount'];
   lockedSummaryLatest: ['lockedSummaryLatest'];
   lockedSummarySnapshots: ['lockedSummarySnapshots'];

client/src/components/Project/ProjectListItem/ProjectListItem.module.scss

@@ -5,21 +5,25 @@
   padding: 4.8rem 5.6rem 4rem;
 
   @media #{$tablet-up} {
-    padding: 9.6rem 13.2rem 4rem;
+    padding: 9.6rem $projectListItemHorizontalPaddingTabletUp 4rem;
   }
 
   @media #{$desktop-up} {
-    padding: 9.6rem 17.8rem 4rem;
+    padding: 9.6rem $projectListItemHorizontalPaddingDesktopUp 4rem;
   }
 
   @media #{$large-desktop-up} {
-    padding: 9.6rem 24.6rem 4rem;
+    padding: 9.6rem $projectListItemHorizontalPaddingLargeDesktop 4rem;
   }
 
   .projectRewards {
     margin: 4.6rem 0 4.2rem;
-    border-bottom: 0.2rem solid $color-octant-grey3;
-    padding-bottom: 1.2rem;
+
+    &.hasPaddingAndBorder {
+      border-bottom: 0.2rem solid $color-octant-grey3;
+      padding-bottom: 1.2rem;
+      border-bottom: 0.2rem solid $color-octant-grey3;
+    }
 
     @media #{$tablet-up} {
       margin: 6.4rem 0 5.6rem;
@@ -55,3 +59,9 @@
     }
   }
 }
+
+.buttonsWebsiteAndShare {
+  @media #{$desktop-up} {
+    display: none;
+  }
+}

client/src/components/Project/ProjectListItem/ProjectListItem.tsx

@@ -1,11 +1,12 @@
+import cx from 'classnames';
 import React, { FC, Fragment, useMemo } from 'react';
 
-import ProjectDonors from 'components/Project/ProjectDonors';
+import ProjectListItemButtonsWebsiteAndShare from 'components/Project/ProjectListItemButtonsWebsiteAndShare';
 import ProjectListItemHeader from 'components/Project/ProjectListItemHeader';
+import ProjectMilestones from 'components/Project/ProjectMilestones';
 import RewardsWithoutThreshold from 'components/shared/RewardsWithoutThreshold';
 import RewardsWithThreshold from 'components/shared/RewardsWithThreshold';
 import Description from 'components/ui/Description';
-import useMediaQuery from 'hooks/helpers/useMediaQuery';
 import useCurrentEpoch from 'hooks/queries/useCurrentEpoch';
 import useProjectsIpfsWithRewards from 'hooks/queries/useProjectsIpfsWithRewards';
 import decodeBase64ToUtf8 from 'utils/decodeBase64ToUtf8';
@@ -22,7 +23,6 @@ const ProjectListItem: FC<ProjectListItemProps> = ({
   index,
   epoch,
 }) => {
-  const { isMobile } = useMediaQuery();
   const { data: projectsIpfsWithRewards } = useProjectsIpfsWithRewards(epoch);
   const projectIpfsWithRewards = projectsIpfsWithRewards.find(p => p.address === address);
   // loadedProjects (ProjectView) aren't updated during changes in open AW
@@ -49,7 +49,7 @@ const ProjectListItem: FC<ProjectListItemProps> = ({
         {!isEpoch1 && epoch && epoch < 4 && (
           <RewardsWithThreshold
             address={address}
-            className={styles.projectRewards}
+            className={cx(styles.projectRewards, styles.hasPaddingAndBorder)}
             epoch={epoch}
             isProjectView
             numberOfDonors={numberOfDonors}
@@ -58,13 +58,15 @@ const ProjectListItem: FC<ProjectListItemProps> = ({
         )}
         {!isEpoch1 && (!epoch || epoch >= 4) && (
           <RewardsWithoutThreshold
+            address={address}
             className={styles.projectRewards}
             donations={donations}
             epoch={epoch}
             matchedRewards={matchedRewards}
             numberOfDonors={numberOfDonors}
-            showMoreInfo={!isMobile}
+            showMoreInfo
             totalValueOfAllocations={totalValueOfAllocations}
+            variant="projectView"
           />
         )}
         <Description
@@ -73,8 +75,14 @@ const ProjectListItem: FC<ProjectListItemProps> = ({
           innerHtml={decodedDescription}
           variant="big"
         />
+        <ProjectListItemButtonsWebsiteAndShare
+          address={address}
+          className={styles.buttonsWebsiteAndShare}
+          name={name}
+          website={website}
+        />
       </div>
-      <ProjectDonors dataTest="ProjectListItem__Donors" projectAddress={address} />
+      <ProjectMilestones projectAddress={address} />
     </Fragment>
   );
 };