feat: display the projects created by the user

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

@@ -8,6 +8,7 @@ import { ImageUpload } from "~/components/ImageUpload";
 import { FieldArray, Form, FormControl, FormSection, Select, Textarea } from "~/components/ui/Form";
 import { Input } from "~/components/ui/Input";
 import { useIsCorrectNetwork } from "~/hooks/useIsCorrectNetwork";
+import { MY_APPS_KEY } from "~/utils/types";
 
 import { useCreateApplication } from "../hooks/useCreateApplication";
 import { ApplicationSchema, contributionTypes, fundingSourceTypes, type Application } from "../types";
@@ -22,7 +23,7 @@ interface IApplicationFormProps {
 }
 
 export const ApplicationForm = ({ pollId }: IApplicationFormProps): JSX.Element => {
-  const clearDraft = useLocalStorage("application-draft")[2];
+  const [myApps, setMyApps] = useLocalStorage<string[]>(`${MY_APPS_KEY}-${pollId}`);
 
   const { isCorrectNetwork, correctNetwork } = useIsCorrectNetwork();
 
@@ -56,7 +57,13 @@ export const ApplicationForm = ({ pollId }: IApplicationFormProps): JSX.Element
 
   const create = useCreateApplication({
     onSuccess: (id: bigint) => {
-      clearDraft();
+      if (myApps) {
+        myApps.push(id.toString());
+        setMyApps(myApps);
+      } else {
+        setMyApps([id.toString()]);
+      }
+
       router.push(`/rounds/${pollId}/applications/confirmation?id=${id.toString()}`);
     },
     onError: (err: { message: string }) =>

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

@@ -1,6 +1,7 @@
 import clsx from "clsx";
 import { useMemo, type ReactNode } from "react";
 import { useFormContext } from "react-hook-form";
+import { useAccount } from "wagmi";
 
 import { Heading } from "~/components/ui/Heading";
 import { Tag } from "~/components/ui/Tag";
@@ -41,6 +42,8 @@ export const ReviewApplicationDetails = (): JSX.Element => {
 
   const application = useMemo(() => form.getValues(), [form]);
 
+  const { address } = useAccount();
+
   return (
     <div className="flex flex-col gap-8">
       <div>
@@ -54,6 +57,8 @@ export const ReviewApplicationDetails = (): JSX.Element => {
 
         <ValueField required body={application.name} title="Project name" />
 
+        <ValueField required body={address} title="Created By" />
+
         <ValueField required body={application.bio} title="Project description" />
 
         <div className="grid grid-flow-row gap-4 sm:grid-cols-2">

packages/interface/src/features/applications/hooks/useApplicationById.ts

@@ -6,3 +6,7 @@ import type { IRequest } from "~/utils/types";
 export function useApplicationById(registryAddress: string, id: string): UseTRPCQueryResult<IRequest, unknown> {
   return api.applications.getById.useQuery({ registryAddress, id });
 }
+
+export function useApplicationsByIds(registryAddress: string, ids: string[]): UseTRPCQueryResult<IRequest[], unknown> {
+  return api.applications.getByIds.useQuery({ registryAddress, ids });
+}

packages/interface/src/features/applications/hooks/useCreateApplication.ts

@@ -34,7 +34,7 @@ export function useCreateApplication(options: {
 }): TUseCreateApplicationReturn {
   const upload = useUploadMetadata();
 
-  const { chain } = useAccount();
+  const { chain, address } = useAccount();
   const { getRoundByPollId } = useRound();
 
   const roundData = getRoundByPollId(options.pollId);
@@ -44,7 +44,7 @@ export function useCreateApplication(options: {
 
   const mutation = useMutation({
     mutationFn: async (values: Application) => {
-      if (!signer || !chain) {
+      if (!signer || !chain || !address) {
         throw new Error("Please connect your wallet first");
       }
 
@@ -71,6 +71,7 @@ export function useCreateApplication(options: {
         profileImageUrl: profileImageUrl.url,
         bannerImageUrl: bannerImageUrl.url,
         submittedAt: Date.now().valueOf(),
+        creator: address,
       };
 
       const uploadRes = await upload.mutateAsync(metadataValues);

packages/interface/src/features/applications/types/index.ts

@@ -25,6 +25,7 @@ export const fundingSourceTypes = {
 export const ApplicationSchema = z.object({
   name: z.string().min(3),
   bio: z.string().min(3),
+  creator: z.string().optional(),
   profileImageUrl: z.string().optional(),
   bannerImageUrl: z.string().optional(),
   submittedAt: z.number().optional(),

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

@@ -1,4 +1,6 @@
 import Image from "next/image";
+import Link from "next/link";
+import { useAccount } from "wagmi";
 
 import { Button } from "~/components/ui/Button";
 import { Heading } from "~/components/ui/Heading";
@@ -22,6 +24,7 @@ export interface IProjectItemProps {
   recipient: IRecipient;
   isLoading: boolean;
   state?: EProjectState;
+  checkIsMine?: boolean;
   action?: (e: Event) => void;
 }
 
@@ -30,63 +33,70 @@ export const ProjectItem = ({
   recipient,
   isLoading,
   state = undefined,
+  checkIsMine = false,
   action = undefined,
 }: IProjectItemProps): JSX.Element => {
   const metadata = useProjectMetadata(recipient.metadataUrl);
   const roundState = useRoundState({ pollId });
+  const { address } = useAccount();
 
   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}`}
+    <Link
+      className={checkIsMine && metadata.data?.creator !== address ? "hidden" : ""}
+      href={`/rounds/${pollId}/${recipient.id}`}
     >
-      <div className="opacity-70 transition-opacity group-hover:opacity-100">
-        <ProjectBanner url={metadata.data?.bannerImageUrl} />
+      <article
+        className="dark:bg-lightBlack group 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} />
+
+          <ProjectAvatar className="-mt-8 ml-4" rounded="full" url={metadata.data?.profileImageUrl} />
+        </div>
 
-        <ProjectAvatar className="-mt-8 ml-4" rounded="full" url={metadata.data?.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>
+          </Heading>
 
-      <div className="p-4 pt-2">
-        <Heading as="h3" className="truncate dark:text-white" size="lg">
-          <Skeleton isLoading={isLoading}>{metadata.data?.name}</Skeleton>
-        </Heading>
+          <div className="line-clamp-2 h-10 text-sm text-gray-400">
+            <Skeleton className="w-full" isLoading={isLoading}>
+              {metadata.data?.bio}
+            </Skeleton>
+          </div>
 
-        <div className="line-clamp-2 h-10 text-sm text-gray-400">
-          <Skeleton className="w-full" isLoading={isLoading}>
-            {metadata.data?.bio}
+          <Skeleton className="w-[100px]" isLoading={isLoading}>
+            <ImpactCategories tags={metadata.data?.impactCategory} />
           </Skeleton>
-        </div>
 
-        <Skeleton className="w-[100px]" isLoading={isLoading}>
-          <ImpactCategories tags={metadata.data?.impactCategory} />
-        </Skeleton>
-
-        {!isLoading && state !== undefined && action && roundState === ERoundState.VOTING && (
-          <div className="flex justify-end pt-6">
-            <Skeleton>
-              {state === EProjectState.DEFAULT && (
-                <Button size="sm" variant="inverted" onClick={action}>
-                  Add to ballot
-                </Button>
-              )}
-
-              {state === EProjectState.ADDED && (
-                <Button size="sm" variant="primary" onClick={action}>
-                  Added
-                  <Image alt="check-white" height="18" src="/check-white.svg" width="18" />
-                </Button>
-              )}
-
-              {state === EProjectState.SUBMITTED && (
-                <Button size="sm" variant="disabled">
-                  Submitted
-                </Button>
-              )}
-            </Skeleton>
-          </div>
-        )}
-      </div>
-    </article>
+          {!isLoading && state !== undefined && action && roundState === ERoundState.VOTING && (
+            <div className="flex justify-end pt-6">
+              <Skeleton>
+                {state === EProjectState.DEFAULT && (
+                  <Button size="sm" variant="inverted" onClick={action}>
+                    Add to ballot
+                  </Button>
+                )}
+
+                {state === EProjectState.ADDED && (
+                  <Button size="sm" variant="primary" onClick={action}>
+                    Added
+                    <Image alt="check-white" height="18" src="/check-white.svg" width="18" />
+                  </Button>
+                )}
+
+                {state === EProjectState.SUBMITTED && (
+                  <Button size="sm" variant="disabled">
+                    Submitted
+                  </Button>
+                )}
+              </Skeleton>
+            </div>
+          )}
+        </div>
+      </article>
+    </Link>
   );
 };
 

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

@@ -1,5 +1,4 @@
 import clsx from "clsx";
-import Link from "next/link";
 import { useRouter } from "next/router";
 import { useCallback, useMemo } from "react";
 import { type Hex, zeroAddress } from "viem";
@@ -43,11 +42,7 @@ export const ProjectsResults = ({ pollId }: IProjectsResultsProps): JSX.Element
     <InfiniteLoading
       {...projects}
       renderItem={(item, { isLoading }) => (
-        <Link
-          key={item.id}
-          className={clsx("relative", { "animate-pulse": isLoading })}
-          href={`/rounds/${pollId}/${item.id}`}
-        >
+        <div key={item.id} className={clsx("relative", { "animate-pulse": isLoading })}>
           {!results.isLoading && roundState === ERoundState.RESULTS ? (
             <ProjectItemAwarded amount={results.data?.projects[item.id]?.votes} />
           ) : null}
@@ -59,7 +54,7 @@ export const ProjectsResults = ({ pollId }: IProjectsResultsProps): JSX.Element
             recipient={item}
             state={EProjectState.SUBMITTED}
           />
-        </Link>
+        </div>
       )}
     />
   );

packages/interface/src/features/rounds/components/Projects.tsx

@@ -2,6 +2,7 @@ import clsx from "clsx";
 import Link from "next/link";
 import { useCallback, useMemo } from "react";
 import { FiAlertCircle } from "react-icons/fi";
+import { useLocalStorage } from "react-use";
 import { Hex, zeroAddress } from "viem";
 
 import { InfiniteLoading } from "~/components/InfiniteLoading";
@@ -12,9 +13,10 @@ import { Heading } from "~/components/ui/Heading";
 import { useBallot } from "~/contexts/Ballot";
 import { useMaci } from "~/contexts/Maci";
 import { useRound } from "~/contexts/Round";
+import { useApplicationsByIds } from "~/features/applications/hooks/useApplicationById";
 import { useResults } from "~/hooks/useResults";
 import { useRoundState } from "~/utils/state";
-import { ERoundState } from "~/utils/types";
+import { ERoundState, MY_APPS_KEY, type IRecipient } from "~/utils/types";
 
 import { ProjectItem, ProjectItemAwarded } from "../../projects/components/ProjectItem";
 import { useSearchProjects } from "../../projects/hooks/useProjects";
@@ -43,6 +45,12 @@ export const Projects = ({ pollId = "" }: IProjectsProps): JSX.Element => {
 
   const ballot = useMemo(() => getBallot(pollId), [pollId, getBallot]);
 
+  const [myApps] = useLocalStorage<string[]>(`${MY_APPS_KEY}-${pollId}`);
+
+  const applications = useApplicationsByIds(round?.registryAddress ?? zeroAddress, myApps ?? []);
+
+  const myApplications = useMemo(() => applications.data, [applications]);
+
   const handleAction = useCallback(
     (projectIndex: number, projectId: string) => (e: Event) => {
       e.preventDefault();
@@ -119,23 +127,41 @@ export const Projects = ({ pollId = "" }: IProjectsProps): JSX.Element => {
       </div>
 
       {roundState === ERoundState.APPLICATION && (
-        <div className="mb-4 flex w-full justify-end">
-          <Link href={`/rounds/${pollId}/applications/new`}>
-            <Button size="auto" variant="primary">
-              Create Application
-            </Button>
-          </Link>
+        <div className="mb-4 rounded-md border border-black p-4 dark:border-white">
+          <div className="flex justify-between">
+            <Heading size="xl">My Projects</Heading>
+
+            <Link href={`/rounds/${pollId}/applications/new`}>
+              <Button size="auto" variant="primary">
+                Create Application
+              </Button>
+            </Link>
+          </div>
+
+          <div className="my-4 gap-4 md:grid md:grid-cols-2 lg:grid lg:grid-cols-3">
+            {myApplications &&
+              myApplications.length > 0 &&
+              myApplications.map((project) => (
+                <ProjectItem
+                  key={project.recipient.id}
+                  checkIsMine
+                  isLoading={false}
+                  pollId={pollId}
+                  recipient={project.recipient as IRecipient}
+                />
+              ))}
+
+            {(!myApplications || myApplications.length === 0) && (
+              <p className="text-gray-400">Create your application by clicking the button</p>
+            )}
+          </div>
         </div>
       )}
 
       <InfiniteLoading
         {...projects}
         renderItem={(item, { isLoading }) => (
-          <Link
-            key={item.id}
-            className={clsx("relative", { "animate-pulse": isLoading })}
-            href={`/rounds/${pollId}/${item.id}`}
-          >
+          <div key={item.id} className={clsx("relative", { "animate-pulse": isLoading })}>
             {!results.isLoading && roundState === ERoundState.RESULTS ? (
               <ProjectItemAwarded amount={results.data?.projects[item.id]?.votes} />
             ) : null}
@@ -147,7 +173,7 @@ export const Projects = ({ pollId = "" }: IProjectsProps): JSX.Element => {
               recipient={item}
               state={defineState(Number.parseInt(item.index, 10))}
             />
-          </Link>
+          </div>
         )}
       />
     </div>

packages/interface/src/hooks/useRegistry.ts

@@ -22,7 +22,7 @@ interface SubmitApplicationArgs {
    */
   registryAddress: Hex;
   /**
-   * The recipient of the attestation
+   * The recipient of the application
    */
   recipient: Hex;
 }

packages/interface/src/pages/rounds/[pollId]/applications/confirmation.tsx

@@ -1,4 +1,3 @@
-import Link from "next/link";
 import { useSearchParams } from "next/navigation";
 import { useMemo } from "react";
 import { FiAlertCircle } from "react-icons/fi";
@@ -83,9 +82,7 @@ const ConfirmProjectPage = ({ pollId }: { pollId: string }): JSX.Element => {
             </div>
           )}
 
-          <Link href={`/rounds/${pollId}/${project.recipient.id}`}>
-            <ProjectItem isLoading={false} pollId={pollId} recipient={project.recipient as IRecipient} />
-          </Link>
+          <ProjectItem isLoading={false} pollId={pollId} recipient={project.recipient as IRecipient} />
         </div>
       </div>
     </Layout>

packages/interface/src/server/api/routers/applications.ts

@@ -18,6 +18,9 @@ export const applicationsRouter = createTRPCRouter({
   getById: publicProcedure
     .input(z.object({ registryAddress: z.string(), id: z.string() }))
     .query(async ({ input }) => fetchApplicationById(input.registryAddress, input.id)),
+  getByIds: publicProcedure
+    .input(z.object({ registryAddress: z.string(), ids: z.array(z.string()) }))
+    .query(async ({ input }) => Promise.all(input.ids.map((id) => fetchApplicationById(input.registryAddress, id)))),
   getByProjectId: publicProcedure
     .input(z.object({ registryAddress: z.string(), projectId: z.string() }))
     .query(async ({ input }) => fetchApplicationByProjectId(input.projectId, input.registryAddress)),

packages/interface/src/utils/types.ts

@@ -1,6 +1,8 @@
 import type { IGetPollData } from "maci-cli/sdk";
 import type { Address, Hex } from "viem";
 
+export const MY_APPS_KEY = "my-apps";
+
 export enum ERoundState {
   LOADING = "LOADING",
   APPLICATION = "APPLICATION",