feat(application-review): added card and updated review page

packages/interface/src/features/applications/components/ApplicationItem.tsx

@@ -32,7 +32,11 @@ export const ApplicationItem = ({
 
   const form = useFormContext<TApplicationsToApprove>();
 
-  const { fundingSources = [], profileImageUrl } = metadata.data ?? {};
+  const { profileImageUrl } = metadata.data ?? {};
+  const bio =
+    metadata.data?.bio && metadata.data.bio.length > 140
+      ? `${metadata.data.bio.substring(0, 140)}...`
+      : metadata.data?.bio;
 
   useEffect(() => {
     if (isApproved) {
@@ -60,7 +64,7 @@ export const ApplicationItem = ({
             </Skeleton>
 
             <div className="text-sm text-gray-400">
-              <div>{fundingSources.length} funding sources</div>
+              <div>{bio}</div>
             </div>
           </div>
         </div>

packages/interface/src/features/applications/components/ReviewApplicationDetails.tsx

@@ -1,10 +1,12 @@
 import clsx from "clsx";
 import { useMemo, type ReactNode } from "react";
 import { useFormContext } from "react-hook-form";
+import { Hex } from "viem";
 
 import { Heading } from "~/components/ui/Heading";
 import { Tag } from "~/components/ui/Tag";
 import { impactCategories } from "~/config";
+import { ProjectItem } from "~/features/projects/components/ProjectItem";
 
 import type { Application } from "../types";
 
@@ -122,6 +124,53 @@ export const ReviewApplicationDetails = (): JSX.Element => {
           title="Funding sources"
         />
       </div>
+
+      <b className="text-lg">Project Preview Card</b>
+
+      <p className="text-sm">This is how your project will look in the dashboard:</p>
+
+      <div className="mb-2 grid w-96 gap-4 sm:grid-cols-2  lg:grid-cols-1">
+        <ProjectItem
+          isLoading={false}
+          pollId=""
+          recipient={{
+            ...application,
+            id: "no-id",
+            metadataUrl: "",
+            payout: application.payoutAddress as Hex,
+            index: "0",
+            bannerImageUrl: application.bannerImageUrl,
+            profileImageUrl: application.profileImageUrl,
+            name: application.name,
+            bio: application.bio,
+            impactCategory: application.impactCategory,
+          }}
+        />
+      </div>
+
+      {/* <div className="mb-2 grid gap-4 sm:grid-cols-2 lg:grid-cols-1">
+        <article className="dark:bg-lightBlack group w-96 rounded-xl bg-white pb-6 shadow-lg">
+          <div className="">
+            <ProjectBanner url={application.bannerImageUrl} />
+
+            <ProjectAvatar className="-mt-8 ml-4" rounded="full" url={application.profileImageUrl} />
+          </div>
+
+          <div className="p-4 pt-2">
+            <Heading as="h3" className="truncate dark:text-white" size="lg">
+              <Skeleton>{application.name}</Skeleton>
+            </Heading>
+
+            <div className="line-clamp-2 h-10 text-sm text-gray-400">
+              <Skeleton className="w-full">{application.bio}</Skeleton>
+            </div>
+
+            <Skeleton className="w-[100px]">
+              <ImpactCategories tags={application.impactCategory} />
+            </Skeleton>
+          </div>
+        </article>
+      </div> */}
     </div>
   );
 };

packages/interface/src/features/projects/components/ProjectItem.tsx

@@ -34,31 +34,36 @@ export const ProjectItem = ({
 }: IProjectItemProps): JSX.Element => {
   const metadata = useProjectMetadata(recipient.metadataUrl);
   const roundState = useRoundState({ pollId });
+  const bannerImageUrl = recipient.bannerImageUrl ? recipient.bannerImageUrl : metadata.data?.bannerImageUrl;
+  const profileImageUrl = recipient.profileImageUrl ? recipient.profileImageUrl : metadata.data?.profileImageUrl;
+  const name = recipient.name ? recipient.name : metadata.data?.name;
+  const bio = recipient.bio ? recipient.bio : metadata.data?.bio;
+  const impactCategory = recipient.impactCategory ? recipient.impactCategory : metadata.data?.impactCategory;
 
   return (
     <article
       className="dark:bg-lightBlack group w-96 rounded-xl bg-white shadow-lg hover:shadow-sm sm:w-full"
       data-testid={`project-${recipient.id}`}
     >
       <div className="opacity-70 transition-opacity group-hover:opacity-100">
-        <ProjectBanner url={metadata.data?.bannerImageUrl} />
+        <ProjectBanner url={bannerImageUrl} />
 
-        <ProjectAvatar className="-mt-8 ml-4" rounded="full" url={metadata.data?.profileImageUrl} />
+        <ProjectAvatar className="-mt-8 ml-4" rounded="full" url={profileImageUrl} />
       </div>
 
       <div className="p-4 pt-2">
         <Heading as="h3" className="truncate dark:text-white" size="lg">
-          <Skeleton isLoading={isLoading}>{metadata.data?.name}</Skeleton>
+          <Skeleton isLoading={isLoading}>{name}</Skeleton>
         </Heading>
 
         <div className="line-clamp-2 h-10 text-sm text-gray-400">
           <Skeleton className="w-full" isLoading={isLoading}>
-            {metadata.data?.bio}
+            {bio}
           </Skeleton>
         </div>
 
         <Skeleton className="w-[100px]" isLoading={isLoading}>
-          <ImpactCategories tags={metadata.data?.impactCategory} />
+          <ImpactCategories tags={impactCategory} />
         </Skeleton>
 
         {!isLoading && state !== undefined && action && roundState === ERoundState.VOTING && (

packages/interface/src/utils/types.ts

@@ -241,6 +241,26 @@ export interface IRecipient {
    * Whether it was approved or not
    */
   initialized?: boolean;
+  /**
+   * Banner Image Url, used only for preview of card
+   */
+  bannerImageUrl?: string;
+  /**
+   * Profile Image Url, used only for preview of card
+   */
+  profileImageUrl?: string;
+  /**
+   * Name of the recipient, used only for preview of card
+   */
+  name?: string;
+  /**
+   * Bio of the recipient, used only for preview of card
+   */
+  bio?: string;
+  /**
+   * Impact categories of the recipient, used only for preview of card
+   */
+  impactCategory?: string[];
 }
 
 /**