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);
 
   const { isCorrectNetwork, correctNetwork } = useIsCorrectNetwork();
 
@@ -56,7 +57,9 @@ export const ApplicationForm = ({ pollId }: IApplicationFormProps): JSX.Element
 
   const create = useCreateApplication({
     onSuccess: (id: bigint) => {
-      clearDraft();
+      myApps!.push(id.toString());
+      setMyApps(myApps);
+
       router.push(`/rounds/${pollId}/applications/confirmation?id=${id.toString()}`);
     },
     onError: (err: { message: string }) =>

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/projects/components/ProjectItem.tsx

@@ -37,7 +37,7 @@ export const ProjectItem = ({
 
   return (
     <article
-      className="dark:bg-lightBlack group w-96 rounded-xl bg-white shadow-lg hover:shadow-sm sm:w-full"
+      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">

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);
+
+  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,12 +127,24 @@ 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?.map((project) => (
+              <Link key={project.recipient.id} href={`/rounds/${pollId}/${project.recipient.id}`}>
+                <ProjectItem isLoading={false} pollId={pollId} recipient={project.recipient as IRecipient} />
+              </Link>
+            ))}
+          </div>
         </div>
       )}
 

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",