fix: Update projectsummary (#52)

fix: Update ProjectSummary

Author: 0xKurt

src/components/project/components/ProjectSummary/ProjectSummary.stories.tsx

@@ -1,5 +1,8 @@
 import type { Meta, StoryObj } from "@storybook/react";
 
+import { ProjectApplicationForManager } from "@/features/checker/services/allo";
+import { applicationsForManagers } from "@/mocks/mockData/applicationsForManager";
+
 import { ProjectSummary } from "./ProjectSummary";
 
 const meta = {
@@ -25,5 +28,6 @@ export const Default: Story = {
       credentials: {},
       owners: [],
     },
+    application: applicationsForManagers[0] as unknown as Partial<ProjectApplicationForManager>,
   },
 };

src/components/project/components/ProjectSummary/ProjectSummary.tsx

@@ -1,29 +1,40 @@
 import * as React from "react";
 
 import { IconLabel } from "@/components/IconLabel";
-import { ProjectMetadata } from "@/features/checker/services/allo";
+import { useCredentialverification } from "@/features/checker/hooks";
+import { ProjectApplicationForManager, ProjectMetadata } from "@/features/checker/services/allo";
+import { isVerified } from "@/lib/passport/credentialVerification";
 import { IconType } from "@/primitives/Icon";
 
 export interface ProjectSummaryProps {
   projectMetadata: ProjectMetadata;
+  application: Partial<ProjectApplicationForManager>;
 }
 
-export const ProjectSummary: React.FC<ProjectSummaryProps> = ({ projectMetadata }) => {
-  const { recipient, createdAt, website, lastUpdated, projectTwitter, projectGithub } =
-    projectMetadata;
+export const ProjectSummary: React.FC<ProjectSummaryProps> = ({ projectMetadata, application }) => {
+  const { createdAt, website, lastUpdated, projectTwitter, projectGithub } = projectMetadata;
+
+  const recipient = application.metadata?.application.recipient;
 
   const appliedOnLabel = `Applied on: ${new Date(createdAt).toLocaleString()}`;
   const lastEditedLabel = `Last edited: ${new Date(
     lastUpdated.toString() !== "0" ? lastUpdated : createdAt,
   ).toLocaleString()}`;
 
+  const { isTwitterVerified, isGithubVerified } = useCredentialverification(application);
+
   return (
     <div className="flex gap-16">
       <div className="flex flex-col gap-4">
         {recipient && <IconLabel type="address" address={recipient} />}
         {website && <IconLabel type="social" platform="website" link={website} />}
         {projectTwitter && (
-          <IconLabel type="social" platform="twitter" link={`https://x.com/${projectTwitter}`} />
+          <IconLabel
+            type="social"
+            platform="twitter"
+            link={`https://x.com/${projectTwitter}`}
+            isVerified={isTwitterVerified}
+          />
         )}
       </div>
       <div className="flex flex-col gap-4">
@@ -44,7 +55,12 @@ export const ProjectSummary: React.FC<ProjectSummaryProps> = ({ projectMetadata
           />
         )}
         {projectGithub && (
-          <IconLabel type="social" platform="github" link={`https://github.com/${projectGithub}`} />
+          <IconLabel
+            type="social"
+            platform="github"
+            link={`https://github.com/${projectGithub}`}
+            isVerified={isGithubVerified}
+          />
         )}
       </div>
     </div>

src/features/checker/hooks/useCredentialverification.ts

@@ -5,7 +5,7 @@ import { isVerified } from "@/lib/passport/credentialVerification";
 import { ProjectApplicationForManager } from "../services/allo";
 
 export function useCredentialverification(
-  applicationMetadata: ProjectApplicationForManager | undefined,
+  applicationMetadata: Partial<ProjectApplicationForManager> | undefined,
 ) {
   const [isTwitterVerified, setIsTwitterVerified] = useState<boolean>(false);
   const [isGithubVerified, setIsGithubVerified] = useState<boolean>(false);

src/features/checker/pages/SubmitApplicationEvaluationPage/SubmitApplicationEvaluationPage.tsx

@@ -1,15 +1,14 @@
 // src/components/SubmitApplicationEvaluation/SubmitApplicationEvaluationPage.tsx
 import { useEffect, useState } from "react";
 
-
-
 import { Hex } from "viem";
 
 import { ApplicationBadge, ApplicationStatus } from "@/components/Badges";
 import EvaluationForm from "@/components/EvaluationForm/EvaluationForm";
 import { IconLabel } from "@/components/IconLabel";
 import { PoolSummary } from "@/components/pool/components/PoolSummary/PoolSummary";
 import { ProjectBanner } from "@/components/project/components/ProjectBanner/ProjectBanner";
+import { ProjectSummary } from "@/components/project/components/ProjectSummary/ProjectSummary";
 import { useToast } from "@/hooks/use-toast";
 import { formatDate, DateFormat } from "@/lib/dates/formatDate";
 import { Accordion } from "@/primitives/Accordion";
@@ -18,7 +17,7 @@ import { Icon, IconType } from "@/primitives/Icon";
 import { ListGrid, ListGridColumn } from "@/primitives/ListGrid";
 import { Markdown } from "@/primitives/Markdown/Markdown";
 
-import { useCredentialverification, useGetPastApplications, useInitialize } from "~checker/hooks";
+import { useGetPastApplications, useInitialize } from "~checker/hooks";
 import { useApplicationOverviewEvaluations } from "~checker/hooks/useApplicationEvaluations";
 import { PastApplication } from "~checker/services/allo";
 import { EVALUATION_STATUS, EvaluationBody } from "~checker/services/checker/api";
@@ -65,7 +64,6 @@ export const SubmitApplicationEvaluationPage = ({
   const [isModalOpen, setIsModalOpen] = useState(false);
   const { application, evaluationQuestions } =
     useApplicationOverviewEvaluations({ applicationId }) || {};
-  const { isTwitterVerified, isGithubVerified } = useCredentialverification(application);
 
   const [toastShowed, setToastShowed] = useState(false);
   const dispatch = useCheckerDispatchContext();
@@ -102,6 +100,7 @@ export const SubmitApplicationEvaluationPage = ({
   if (!application || !evaluationQuestions) return null;
 
   const project = application.metadata.application.project;
+
   const groups = evaluationQuestions.map((q) => ({
     id: q.questionIndex.toString(),
     heading: q.question,
@@ -238,65 +237,7 @@ export const SubmitApplicationEvaluationPage = ({
                 />
               }
               isOpen={true}
-              content={
-                <div className="flex flex-col gap-4">
-                  <div className="flex flex-wrap items-start gap-10">
-                    <div className="flex flex-col gap-4">
-                      {application.metadata.application.recipient && (
-                        <IconLabel
-                          type="address"
-                          address={application.metadata.application.recipient}
-                        />
-                      )}
-                      {project.website && (
-                        <IconLabel type="social" platform="website" link={project.website} />
-                      )}
-                      {project.projectTwitter && (
-                        <IconLabel
-                          type="social"
-                          platform="twitter"
-                          link={
-                            project.projectTwitter.includes("https://")
-                              ? project.projectTwitter
-                              : `https://x.com/${project.projectTwitter}`
-                          }
-                          isVerified={isTwitterVerified}
-                        />
-                      )}
-                      {project.projectGithub && (
-                        <IconLabel
-                          type="social"
-                          platform="github"
-                          link={
-                            project.projectGithub.includes("https://")
-                              ? project.projectGithub
-                              : `https://github.com/${project.projectGithub}`
-                          }
-                          isVerified={isGithubVerified}
-                        />
-                      )}
-                    </div>
-                    <div className="flex flex-col gap-4">
-                      <IconLabel
-                        type="dateWithPrefix"
-                        prefix="Applied on:"
-                        date={new Date(project.createdAt)}
-                      />
-                      {project.projectGithub && (
-                        <IconLabel
-                          type="social"
-                          platform="github"
-                          link={
-                            project.projectGithub.includes("https://")
-                              ? project.projectGithub
-                              : `https://github.com/${project.projectGithub}`
-                          }
-                        />
-                      )}
-                    </div>
-                  </div>
-                </div>
-              }
+              content={<ProjectSummary projectMetadata={project} application={application} />}
               variant="default"
               border="none"
               padding="none"
@@ -386,4 +327,4 @@ export const SubmitApplicationEvaluationPage = ({
       </div>
     </div>
   );
-};
+};

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

@@ -30,7 +30,6 @@ export const ViewApplicationEvaluationsPage: React.FC<ViewApplicationEvaluations
   if (!data) return;
 
   const project = data?.application.metadata.application.project;
-  project.recipient = data?.application.metadata.application.recipient;
 
   const reviewStatusBadgeVariant =
     data?.application.status === "APPROVED"
@@ -90,7 +89,7 @@ export const ViewApplicationEvaluationsPage: React.FC<ViewApplicationEvaluations
           {capitalizeWord(data?.application.status)}
         </Badge>
       </div>
-      <ProjectSummary projectMetadata={project} />
+      <ProjectSummary projectMetadata={project} application={data?.application}/>
       <div className="h-0.5 bg-[#EAEAEA]" />
       {data?.applicationEvaluations.length > 0 ? (
         <ReviewDropdownList evaluations={data?.applicationEvaluations} />

src/lib/passport/credentialVerification.ts

@@ -12,7 +12,7 @@ const verifier = new PassportVerifier();
 
 export async function isVerified(
   provider: "twitter" | "github",
-  application: ProjectApplicationForManager | undefined,
+  application: Partial<ProjectApplicationForManager> | undefined,
 ): Promise<boolean> {
   const applicationMetadata = application?.metadata;
   const verifiableCredential = applicationMetadata?.application.project.credentials[provider];