From eb7978e326f2c757f8e7dd018c4641f2cea59b9d Mon Sep 17 00:00:00 2001
From: Dominik Stumpf <122315398+dominik-stumpf@users.noreply.github.com>
Date: Thu, 8 Aug 2024 17:18:53 +0200
Subject: [PATCH] Implement `EditProfile` container (#1427)

* feat: add delete profile hook

* feat: add profile editing

* fix: update Header import

* chore: remove sfx from confetti

* fix: update jotai type

* chore: add comment to assertion

* chore: add ts path alias for @app dir

* refactor: apply write-check

* feat: remove profile atom and add swr hooks

* feat: add ssr to page

* feat: add profile owner guard

* feat: add ssr with swr fallback

* feat: add ssr with swr fallback for guild and role

* chore: add note why use constant api url

* chore: resolve schema errors in profile update
---
 package-lock.json                             |   8 +-
 package.json                                  |   2 +-
 .../_components/StartProfile.tsx              |   6 +-
 .../_hooks/useCreateProfile.tsx               |   4 +-
 .../{create-profile => }/layout.tsx           |   0
 .../(marketing)/profile/[username]/atoms.ts   |   5 -
 .../(marketing)/profile/[username]/page.tsx   | 258 +++++++-----------
 .../profile/_components/ContributionCard.tsx  |  10 +-
 .../profile/_components/EditContributions.tsx |  12 +-
 .../profile/_components/EditProfile.tsx       |  66 +++--
 .../profile/_components/OperatedGuildCard.tsx |   6 +-
 .../profile/_components/Profile.tsx           |  93 +++++++
 .../profile/_components/ProfileOwnerGuard.tsx |  14 +
 .../profile/_components/ProfileSkeleton.tsx   | 103 +++----
 .../profile/_hooks/useContribution.tsx        |   2 +-
 .../profile/_hooks/useCreateContribution.tsx  |   8 +-
 .../profile/_hooks/useDeleteContribution.tsx  |  10 +-
 .../profile/_hooks/useDeleteProfile.ts        |  38 +++
 .../profile/_hooks/useUpdateContribution.tsx  |  13 +-
 .../profile/_hooks/useUpdateProfile.ts        |  47 ++++
 .../_server_actions/revalidateContribution.ts |   7 +
 .../_server_actions/revalidateProfile.ts      |   7 +
 src/v2/components/Confetti.tsx                |   2 +-
 src/v2/components/SWRProvider.tsx             |  11 +
 src/v2/lib/validations/profileSchema.ts       |  41 +--
 tsconfig.json                                 |   3 +-
 26 files changed, 476 insertions(+), 300 deletions(-)
 rename src/app/(marketing)/{create-profile => }/layout.tsx (100%)
 delete mode 100644 src/app/(marketing)/profile/[username]/atoms.ts
 create mode 100644 src/app/(marketing)/profile/_components/Profile.tsx
 create mode 100644 src/app/(marketing)/profile/_components/ProfileOwnerGuard.tsx
 create mode 100644 src/app/(marketing)/profile/_hooks/useDeleteProfile.ts
 create mode 100644 src/app/(marketing)/profile/_hooks/useUpdateProfile.ts
 create mode 100644 src/app/(marketing)/profile/_server_actions/revalidateContribution.ts
 create mode 100644 src/app/(marketing)/profile/_server_actions/revalidateProfile.ts
 create mode 100644 src/v2/components/SWRProvider.tsx

diff --git a/package-lock.json b/package-lock.json
index cf71af1034..e0692055fa 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -19,7 +19,7 @@
         "@emotion/styled": "^11.11.0",
         "@fuels/connectors": "^0.5.0",
         "@fuels/react": "^0.20.0",
-        "@guildxyz/types": "^1.9.30",
+        "@guildxyz/types": "^1.9.33",
         "@hcaptcha/react-hcaptcha": "^1.4.4",
         "@hookform/resolvers": "^3.3.4",
         "@lexical/code": "^0.12.0",
@@ -5476,9 +5476,9 @@
       }
     },
     "node_modules/@guildxyz/types": {
-      "version": "1.9.30",
-      "resolved": "https://registry.npmjs.org/@guildxyz/types/-/types-1.9.30.tgz",
-      "integrity": "sha512-iSsYWu33IHXwy1MyDpeEspMVjLrpK4mX0UvLuwH/kuyoNjMUVFBWA1I1blw1t2g6CGBIbXL1ln8QjurrUS4+qg==",
+      "version": "1.9.33",
+      "resolved": "https://registry.npmjs.org/@guildxyz/types/-/types-1.9.33.tgz",
+      "integrity": "sha512-iekXya6x1D5nQufmNfw9NDpvjDHdDsNAuNF13/gf3yRbdp9jIJ7P+RIhJ/fGX4rX4tMomYauJ18BJNQTC/m6cQ==",
       "dependencies": {
         "zod": "^3.22.4"
       }
diff --git a/package.json b/package.json
index 237555df68..00700dce22 100644
--- a/package.json
+++ b/package.json
@@ -31,7 +31,7 @@
     "@emotion/styled": "^11.11.0",
     "@fuels/connectors": "^0.5.0",
     "@fuels/react": "^0.20.0",
-    "@guildxyz/types": "^1.9.30",
+    "@guildxyz/types": "^1.9.33",
     "@hcaptcha/react-hcaptcha": "^1.4.4",
     "@hookform/resolvers": "^3.3.4",
     "@lexical/code": "^0.12.0",
diff --git a/src/app/(marketing)/create-profile/_components/StartProfile.tsx b/src/app/(marketing)/create-profile/_components/StartProfile.tsx
index 51062345e4..dc61028fc3 100644
--- a/src/app/(marketing)/create-profile/_components/StartProfile.tsx
+++ b/src/app/(marketing)/create-profile/_components/StartProfile.tsx
@@ -148,13 +148,11 @@ export const StartProfile: OnboardingChain = () => {
           {method === undefined ? (
             <>
               <ConnectFarcasterButton
-                className="ml-0 w-full gap-2"
+                className="ml-0 flex w-full items-center gap-2"
                 size="md"
                 disabled={!!farcasterProfile}
               >
-                <div className="size-6">
-                  <FarcasterImage />
-                </div>
+                <FarcasterImage />
                 Connect farcaster
               </ConnectFarcasterButton>
               <Button
diff --git a/src/app/(marketing)/create-profile/_hooks/useCreateProfile.tsx b/src/app/(marketing)/create-profile/_hooks/useCreateProfile.tsx
index 664f6fbf89..557b0f3279 100644
--- a/src/app/(marketing)/create-profile/_hooks/useCreateProfile.tsx
+++ b/src/app/(marketing)/create-profile/_hooks/useCreateProfile.tsx
@@ -1,6 +1,7 @@
 import { useConfetti } from "@/components/Confetti"
 import { useToast } from "@/components/ui/hooks/useToast"
 import { profileSchema } from "@/lib/validations/profileSchema"
+import { Schemas } from "@guildxyz/types"
 import { SignedValidation, useSubmitWithSign } from "hooks/useSubmit"
 import { useRouter } from "next/navigation"
 import fetcher from "utils/fetcher"
@@ -17,14 +18,13 @@ export const useCreateProfile = () => {
       ...signedValidation,
     })
 
-  const submitWithSign = useSubmitWithSign<unknown>(createProfile, {
+  const submitWithSign = useSubmitWithSign<Schemas["Profile"]>(createProfile, {
     onSuccess: (response) => {
       toast({
         variant: "success",
         title: "Successfully created profile",
       })
       confettiPlayer.current("Confetti from left and right")
-      // @ts-ignore: TODO: either acquire types from backend, or type them here
       router.replace(`/profile/${response.username}`)
     },
     onError: (response) => {
diff --git a/src/app/(marketing)/create-profile/layout.tsx b/src/app/(marketing)/layout.tsx
similarity index 100%
rename from src/app/(marketing)/create-profile/layout.tsx
rename to src/app/(marketing)/layout.tsx
diff --git a/src/app/(marketing)/profile/[username]/atoms.ts b/src/app/(marketing)/profile/[username]/atoms.ts
deleted file mode 100644
index 58df821496..0000000000
--- a/src/app/(marketing)/profile/[username]/atoms.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-import { Schemas } from "@guildxyz/types"
-import { atom } from "jotai"
-
-// TODO: assertion here prevents WritableAtom type error, handle uninitialized atom with proper types
-export const profileAtom = atom(undefined as unknown as Schemas["Profile"])
diff --git a/src/app/(marketing)/profile/[username]/page.tsx b/src/app/(marketing)/profile/[username]/page.tsx
index 79402ae371..ae0ec696fe 100644
--- a/src/app/(marketing)/profile/[username]/page.tsx
+++ b/src/app/(marketing)/profile/[username]/page.tsx
@@ -1,6 +1,3 @@
-"use client"
-
-import { CheckMark } from "@/components/CheckMark"
 import { Header } from "@/components/Header"
 import {
   Layout,
@@ -9,170 +6,113 @@ import {
   LayoutHero,
   LayoutMain,
 } from "@/components/Layout"
+import { SWRProvider } from "@/components/SWRProvider"
 import { Anchor } from "@/components/ui/Anchor"
-import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/Avatar"
-import { AvatarGroup } from "@/components/ui/AvatarGroup"
-import { Separator } from "@/components/ui/Separator"
-import { Skeleton } from "@/components/ui/Skeleton"
-import { useUserPublic } from "@/hooks/useUserPublic"
-import { Schemas } from "@guildxyz/types"
+import { Guild, Role, Schemas } from "@guildxyz/types"
 import { ArrowRight } from "@phosphor-icons/react/dist/ssr"
-import { useAtom } from "jotai"
-import { useEffect } from "react"
-import useSWR from "swr"
-import { fetcherForSWR } from "utils/fetcher"
-import { ContributionCard } from "../_components/ContributionCard"
-import { EditContributions } from "../_components/EditContributions"
-import { EditProfile } from "../_components/EditProfile"
-import { OperatedGuildCard } from "../_components/OperatedGuildCard"
-import { ProfileSkeleton } from "../_components/ProfileSkeleton"
-import { RecentActivity } from "../_components/RecentActivity"
-import { useContribution } from "../_hooks/useContribution"
-import { profileAtom } from "./atoms"
-
-// async function getProfileData(username: string) {
-//   const req = `https://api.guild.xyz/v2/profiles/${username}`
-//   try {
-//     const res = await fetch(req)
-//     if (!res.ok) {
-//       throw new Error("Failed to fetch profile data")
-//     }
-//     return res.json() as Promise<Schemas["Profile"]>
-//   } catch (e) {
-//     // mocking for the time being if fetch fails
-//     console.error(e)
-//     const res = {
-//       id: 4,
-//       userId: 6027190,
-//       username: "durumm",
-//       name: "durum",
-//       bio: null,
-//       profileImageUrl:
-//         "https://guild-xyz.mypinata.cloud/ipfs/QmWGdo6FkjSz22oDZFMJysx3hGKoVqtzTWVMx9tTSP7jvi",
-//       backgroundImageUrl: null,
-//       createdAt: "2024-07-25T10:04:20.781Z",
-//       updatedAt: "2024-07-25T10:04:20.781Z",
-//     }
-//     return res
-//   }
-// }
+import { Profile } from "../_components/Profile"
 
-const Page = ({
-  params: { username },
-}: {
-  params: { username: string }
-}) => {
-  const { data: fetchedProfile, isLoading } = useSWR<Schemas["Profile"]>(
-    `/v2/profiles/${username}`,
-    fetcherForSWR
-  )
-  const [profile, setProfile] = useAtom(profileAtom)
-  const contributions = useContribution()
+// TODO: use env var for this url when it is changed to this value.
+// next-server throws fetch error if we modify the env var in memory
+const api = "https://api.guild.xyz"
 
-  const { id: publicUserId } = useUserPublic()
-  const isProfileOwner = !!profile?.userId && publicUserId === profile.userId
-  useEffect(() => {
-    setProfile(fetchedProfile)
-  }, [fetchedProfile, setProfile])
+async function ssrFetcher<T>(...args: Parameters<typeof fetch>) {
+  return (await fetch(...args)).json() as T
+}
 
-  if (!profile || isLoading) {
-    return <ProfileSkeleton />
+const fetchPublicProfileData = async ({ username }: { username: string }) => {
+  const contributionsRequest = new URL(`v2/profiles/${username}/contributions`, api)
+  const profileRequest = new URL(`v2/profiles/${username}`, api)
+  const contributions = await ssrFetcher<Schemas["Contribution"][]>(
+    contributionsRequest,
+    {
+      next: {
+        tags: ["contributions"],
+        revalidate: 600,
+      },
+    }
+  )
+  const profile = await ssrFetcher<Schemas["Profile"]>(profileRequest, {
+    next: {
+      tags: ["profile"],
+      revalidate: 600,
+    },
+  })
+  const roleRequests = contributions.map(
+    ({ roleId, guildId }) => new URL(`v2/guilds/${guildId}/roles/${roleId}`, api)
+  )
+  const guildRequests = contributions.map(
+    ({ guildId }) => new URL(`v2/guilds/${guildId}`, api)
+  )
+  const guilds = await Promise.all(
+    guildRequests.map((req) =>
+      ssrFetcher<Guild>(req, {
+        next: {
+          revalidate: 3600,
+        },
+      })
+    )
+  )
+  const roles = await Promise.all(
+    roleRequests.map((req) =>
+      ssrFetcher<Role>(req, {
+        next: {
+          revalidate: 3600,
+        },
+      })
+    )
+  )
+  const guildsZipped = Object.fromEntries(
+    guildRequests.map(({ pathname }, i) => [pathname, guilds[i]])
+  )
+  const rolesZipped = Object.fromEntries(
+    roleRequests.map(({ pathname }, i) => [pathname, roles[i]])
+  )
+  return {
+    fallback: {
+      [profileRequest.pathname]: profile,
+      [contributionsRequest.pathname]: contributions,
+      ...guildsZipped,
+      ...rolesZipped,
+    },
   }
+}
 
+const Page = async ({ params: { username } }: { params: { username: string } }) => {
+  const { fallback } = await fetchPublicProfileData({ username })
   return (
-    <Layout>
-      <LayoutHero>
-        <Header />
-        <LayoutBanner className="-bottom-[500px]">
-          <div className="absolute inset-0 bg-[url('/banner.svg')] opacity-10" />
-          <div className="absolute inset-0 bg-gradient-to-t from-background" />
-        </LayoutBanner>
-      </LayoutHero>
-      <LayoutMain>
-        <div className="mt-24">
-          <div className="relative mb-24 flex flex-col items-center">
-            <EditProfile
-              profileImageUrl={profile.profileImageUrl}
-              name={profile.name}
-              bio={profile.bio ?? undefined}
-              backgroundImageUrl={profile.backgroundImageUrl ?? undefined}
-              username={profile.username}
-            />
-            <div className="relative mb-12 flex items-center justify-center">
-              <Avatar className="size-48">
-                <AvatarImage
-                  src={profile.profileImageUrl ?? ""}
-                  alt="profile"
-                  width={192}
-                  height={192}
-                />
-                <AvatarFallback>
-                  <Skeleton className="size-full" />
-                </AvatarFallback>
-              </Avatar>
-            </div>
-            <h1 className="text-center font-bold text-4xl leading-normal tracking-tight">
-              {profile.name}
-              <CheckMark className="ml-2 inline size-6 fill-yellow-500" />
-            </h1>
-            <div className="text-lg text-muted-foreground">@{profile.username}</div>
-            <p className="mt-6 max-w-md text-pretty text-center text-lg text-muted-foreground">
-              {profile.bio}
-            </p>
-            <div className="mt-8 grid grid-cols-[repeat(3,auto)] gap-x-8 gap-y-6 sm:grid-cols-[repeat(5,auto)]">
-              <div className="flex flex-col items-center leading-tight">
-                <div className="font-bold text-lg">3232</div>
-                <div className="text-muted-foreground">Guildmates</div>
-              </div>
-              <Separator orientation="vertical" className="h-12" />
-              <div className="flex flex-col items-center leading-tight">
-                <div className="font-bold text-lg">0</div>
-                <div className="text-muted-foreground">Followers</div>
-              </div>
-              <Separator orientation="vertical" className="hidden h-12 sm:block" />
-              <div className="col-span-3 flex items-center gap-2 place-self-center sm:col-span-1">
-                <AvatarGroup imageUrls={["", ""]} count={8} />
-                <div className="text-muted-foreground leading-tight">
-                  Followed by <span className="font-bold">Hoho</span>,<br />
-                  <span className="font-bold">Hihi</span> and 22 others
-                </div>
-              </div>
-            </div>
-          </div>
-          <h2 className="mb-3 font-bold text-lg">Operated guilds</h2>
-          <OperatedGuildCard />
-          <div className="mt-8 mb-3 flex items-center justify-between">
-            <h2 className="font-bold text-lg">Top contributions</h2>
-            {isProfileOwner && <EditContributions />}
-          </div>
-          <div className="grid grid-cols-1 gap-3">
-            {contributions.data?.map((contribution) => (
-              <ContributionCard contribution={contribution} key={contribution.id} />
-            ))}
-          </div>
-          <div className="mt-8">
-            <h2 className="mb-3 font-bold text-lg">Recent activity</h2>
-            <RecentActivity />
-            <p className="mt-2 font-semibold text-muted-foreground">
-              &hellip; only last 20 actions are shown
-            </p>
-          </div>
-        </div>
-      </LayoutMain>
-      <LayoutFooter>
-        <p className="mb-12 text-center font-medium text-muted-foreground">
-          Guild Profiles are currently in invite only early access, only available to{" "}
-          <Anchor
-            href={"#"}
-            className="inline-flex items-center gap-1"
-            variant="muted"
-          >
-            Subscribers
-            <ArrowRight />
-          </Anchor>
-        </p>
-      </LayoutFooter>
-    </Layout>
+    <SWRProvider
+      value={{
+        fallback,
+      }}
+    >
+      <Layout>
+        <LayoutHero>
+          <Header />
+          <LayoutBanner className="-bottom-[500px]">
+            <div className="absolute inset-0 bg-[url('/banner.svg')] opacity-10" />
+            <div className="absolute inset-0 bg-gradient-to-t from-background" />
+          </LayoutBanner>
+        </LayoutHero>
+        <LayoutMain>
+          <Profile />
+        </LayoutMain>
+        <LayoutFooter>
+          <p className="mb-12 text-center font-medium text-muted-foreground">
+            Guild Profiles are currently in invite only early access, only available
+            to{" "}
+            <Anchor
+              href={"#"}
+              className="inline-flex items-center gap-1"
+              variant="muted"
+            >
+              Subscribers
+              <ArrowRight />
+            </Anchor>
+          </p>
+        </LayoutFooter>
+      </Layout>
+    </SWRProvider>
   )
 }
 
diff --git a/src/app/(marketing)/profile/_components/ContributionCard.tsx b/src/app/(marketing)/profile/_components/ContributionCard.tsx
index 9032de9e78..e807ce8fe8 100644
--- a/src/app/(marketing)/profile/_components/ContributionCard.tsx
+++ b/src/app/(marketing)/profile/_components/ContributionCard.tsx
@@ -1,13 +1,15 @@
+"use client"
+
 import { Guild, Role, Schemas } from "@guildxyz/types"
-import useSWR from "swr"
+import useSWRImmutable from "swr/immutable"
 import fetcher from "utils/fetcher"
 import { ContributionCardView } from "./ContributionCardView"
 
 export const ContributionCard = ({
   contribution,
-}: { contribution: Schemas["ProfileContribution"] }) => {
-  const guild = useSWR<Guild>(`/v2/guilds/${contribution.guildId}`, fetcher)
-  const role = useSWR<Role>(
+}: { contribution: Schemas["Contribution"] }) => {
+  const guild = useSWRImmutable<Guild>(`/v2/guilds/${contribution.guildId}`, fetcher)
+  const role = useSWRImmutable<Role>(
     `/v2/guilds/${contribution.guildId}/roles/${contribution.roleId}`,
     fetcher
   )
diff --git a/src/app/(marketing)/profile/_components/EditContributions.tsx b/src/app/(marketing)/profile/_components/EditContributions.tsx
index b864de727a..1a5b7b8a79 100644
--- a/src/app/(marketing)/profile/_components/EditContributions.tsx
+++ b/src/app/(marketing)/profile/_components/EditContributions.tsx
@@ -50,7 +50,7 @@ const useYourVerifiedGuild = () => {
 
 const EditContributionCard = ({
   contribution,
-}: { contribution: Schemas["ProfileContribution"] }) => {
+}: { contribution: Schemas["Contribution"] }) => {
   const { data: guild } = useSWRImmutable<Guild>(
     `/v2/guilds/${contribution.guildId}`,
     fetcher
@@ -90,8 +90,8 @@ const EditContributionCard = ({
             <SelectValue placeholder="Select from your guilds" />
           </SelectTrigger>
           <SelectContent>
-            {roleIds.map((roleId) => (
-              <RoleSelectItem roleId={roleId} guildId={guild.id} />
+            {roleIds?.map((roleId) => (
+              <RoleSelectItem roleId={roleId} guildId={guild.id} key={roleId} />
             ))}
           </SelectContent>
         </Select>
@@ -195,7 +195,11 @@ export const EditContributions = () => {
                   </SelectTrigger>
                   <SelectContent>
                     {roleIds?.map((roleId) => (
-                      <RoleSelectItem roleId={roleId} guildId={parseInt(guildId)} />
+                      <RoleSelectItem
+                        roleId={roleId}
+                        guildId={parseInt(guildId)}
+                        key={roleId}
+                      />
                     ))}
                   </SelectContent>
                 </Select>
diff --git a/src/app/(marketing)/profile/_components/EditProfile.tsx b/src/app/(marketing)/profile/_components/EditProfile.tsx
index 4f52600eda..aa1142ea1e 100644
--- a/src/app/(marketing)/profile/_components/EditProfile.tsx
+++ b/src/app/(marketing)/profile/_components/EditProfile.tsx
@@ -7,6 +7,7 @@ import {
   DialogBody,
   DialogCloseButton,
   DialogContent,
+  DialogDescription,
   DialogFooter,
   DialogHeader,
   DialogTitle,
@@ -23,6 +24,7 @@ import { Input } from "@/components/ui/Input"
 import { Separator } from "@/components/ui/Separator"
 import { Textarea } from "@/components/ui/Textarea"
 import { toast } from "@/components/ui/hooks/useToast"
+import { useDisclosure } from "@/hooks/useDisclosure"
 import { cn } from "@/lib/utils"
 import { profileSchema } from "@/lib/validations/profileSchema"
 import { Schemas } from "@guildxyz/types"
@@ -33,18 +35,27 @@ import usePinata from "hooks/usePinata"
 import Image from "next/image"
 import { useState } from "react"
 import { FormProvider, useForm } from "react-hook-form"
+import { useDeleteProfile } from "../_hooks/useDeleteProfile"
+import { useProfile } from "../_hooks/useProfile"
+import { useUpdateProfile } from "../_hooks/useUpdateProfile"
 
-export const EditProfile = (profile: Schemas["ProfileUpdate"]) => {
+export const EditProfile = () => {
+  const { data: profile } = useProfile()
   const form = useForm<Schemas["ProfileUpdate"]>({
     resolver: zodResolver(profileSchema),
     defaultValues: {
-      ...profile,
+      ...profileSchema.parse(profile),
     },
     mode: "onTouched",
   })
 
+  const disclosure = useDisclosure()
+  const editProfile = useUpdateProfile()
+
   async function onSubmit(values: Schemas["ProfileUpdate"]) {
-    console.log("edit profile submit", values)
+    await editProfile.onSubmit(profileSchema.parse(values))
+    if (editProfile.error) return
+    disclosure.onClose()
   }
 
   const { isUploading, onUpload } = usePinata({
@@ -79,28 +90,31 @@ export const EditProfile = (profile: Schemas["ProfileUpdate"]) => {
     },
   })
 
+  const deleteProfile = useDeleteProfile()
+
   return (
-    <Dialog>
+    <Dialog onOpenChange={disclosure.setValue} open={disclosure.isOpen}>
       <DialogTrigger asChild>
         <Button className="-top-8 absolute right-0" variant="solid">
           <Pencil weight="bold" />
           Edit profile
         </Button>
       </DialogTrigger>
-      <FormProvider {...form}>
-        <form onSubmit={form.handleSubmit(onSubmit)}>
-          <DialogContent size="lg" className="bg-background" scrollBody>
-            <DialogHeader>
-              <DialogTitle>Edit profile</DialogTitle>
-              <DialogCloseButton />
-            </DialogHeader>
-            <DialogBody scroll>
+      <DialogContent size="lg" className="bg-background">
+        <DialogHeader>
+          <DialogTitle>Edit profile</DialogTitle>
+          <DialogDescription />
+          <DialogCloseButton />
+        </DialogHeader>
+        <FormProvider {...form}>
+          <form onSubmit={form.handleSubmit(onSubmit)}>
+            <DialogBody>
               <div className="relative mb-20">
                 <FormField
                   control={form.control}
                   name="backgroundImageUrl"
                   render={({ field }) => (
-                    <FormItem className="relative flex h-32 items-center justify-center overflow-hidden rounded-xl">
+                    <FormItem className="relative flex h-32 items-center justify-center overflow-hidden rounded-xl border">
                       <div className="absolute inset-0 size-full">
                         {field.value ? (
                           <Image
@@ -136,7 +150,7 @@ export const EditProfile = (profile: Schemas["ProfileUpdate"]) => {
                       variant="unstyled"
                       type="button"
                       className={cn(
-                        "-bottom-2 absolute left-4 size-28 translate-y-1/2 rounded-full border border-dotted",
+                        "-bottom-2 absolute left-4 size-28 translate-y-1/2 rounded-full border-2 border-dotted",
                         { "border-solid": field.value }
                       )}
                       {...getRootProps()}
@@ -166,7 +180,12 @@ export const EditProfile = (profile: Schemas["ProfileUpdate"]) => {
                   <FormItem className="pb-2">
                     <FormLabel>Name</FormLabel>
                     <FormControl>
-                      <Input placeholder="" variant="muted" {...field} />
+                      <Input
+                        placeholder=""
+                        variant="muted"
+                        {...field}
+                        value={field.value ?? undefined}
+                      />
                     </FormControl>
                     <FormErrorMessage />
                   </FormItem>
@@ -189,34 +208,37 @@ export const EditProfile = (profile: Schemas["ProfileUpdate"]) => {
                 control={form.control}
                 name="bio"
                 render={({ field }) => (
-                  <FormItem>
+                  <FormItem className="">
                     <FormLabel>Bio</FormLabel>
                     <FormControl>
                       <Textarea
                         placeholder=""
                         className="max-h-12 bg-muted"
                         {...field}
+                        value={field.value ?? undefined}
                       />
                     </FormControl>
                     <FormErrorMessage />
                   </FormItem>
                 )}
               />
-              <Separator className="mt-8 mb-4 bg-border-muted" />
+              <Separator className="my-4" />
               <div>
                 <p className="mb-2 font-medium">Danger zone</p>
                 <Button
+                  onClick={deleteProfile.onSubmit}
                   variant="subtle"
+                  type="button"
                   colorScheme="destructive"
-                  type="submit"
                   size="sm"
                 >
                   Delete profile
                 </Button>
               </div>
             </DialogBody>
-            <DialogFooter className="pt-5 pb-7">
+            <DialogFooter>
               <Button
+                isLoading={editProfile.isLoading}
                 colorScheme="success"
                 type="submit"
                 disabled={!form.formState.isValid}
@@ -224,9 +246,9 @@ export const EditProfile = (profile: Schemas["ProfileUpdate"]) => {
                 Save
               </Button>
             </DialogFooter>
-          </DialogContent>
-        </form>
-      </FormProvider>
+          </form>
+        </FormProvider>
+      </DialogContent>
     </Dialog>
   )
 }
diff --git a/src/app/(marketing)/profile/_components/OperatedGuildCard.tsx b/src/app/(marketing)/profile/_components/OperatedGuildCard.tsx
index 4229c68d78..4ed2d386d1 100644
--- a/src/app/(marketing)/profile/_components/OperatedGuildCard.tsx
+++ b/src/app/(marketing)/profile/_components/OperatedGuildCard.tsx
@@ -2,15 +2,15 @@ import { CheckMark } from "@/components/CheckMark"
 import { Avatar, AvatarFallback } from "@/components/ui/Avatar"
 import { Card } from "@/components/ui/Card"
 import { Skeleton } from "@/components/ui/Skeleton"
+import { Icon } from "@phosphor-icons/react"
 import {
   ArrowFatUp,
   Calendar,
   FolderSimpleUser,
-  Icon,
   ShootingStar,
   Star,
-} from "@phosphor-icons/react"
-import { User } from "@phosphor-icons/react/dist/ssr"
+  User,
+} from "@phosphor-icons/react/dist/ssr"
 import { AvatarImage } from "@radix-ui/react-avatar"
 import { Separator } from "@radix-ui/react-separator"
 import Image from "next/image"
diff --git a/src/app/(marketing)/profile/_components/Profile.tsx b/src/app/(marketing)/profile/_components/Profile.tsx
new file mode 100644
index 0000000000..2b22a1cf11
--- /dev/null
+++ b/src/app/(marketing)/profile/_components/Profile.tsx
@@ -0,0 +1,93 @@
+"use client"
+
+import { CheckMark } from "@/components/CheckMark"
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/Avatar"
+import { AvatarGroup } from "@/components/ui/AvatarGroup"
+import { Separator } from "@/components/ui/Separator"
+import { Skeleton } from "@/components/ui/Skeleton"
+import { ContributionCard } from "../_components/ContributionCard"
+import { EditContributions } from "../_components/EditContributions"
+import { EditProfile } from "../_components/EditProfile"
+import { OperatedGuildCard } from "../_components/OperatedGuildCard"
+import { ProfileOwnerGuard } from "../_components/ProfileOwnerGuard"
+import { RecentActivity } from "../_components/RecentActivity"
+import { useContribution } from "../_hooks/useContribution"
+import { useProfile } from "../_hooks/useProfile"
+import { ProfileSkeleton } from "./ProfileSkeleton"
+
+export const Profile = () => {
+  const { data: profile } = useProfile()
+  const { data: contributions } = useContribution()
+
+  if (!profile || !contributions) return <ProfileSkeleton />
+
+  return (
+    <div className="mt-24">
+      <div className="relative mb-24 flex flex-col items-center">
+        <ProfileOwnerGuard>
+          <EditProfile />
+        </ProfileOwnerGuard>
+        <div className="relative mb-12 flex items-center justify-center">
+          <Avatar className="size-48">
+            <AvatarImage
+              src={profile.profileImageUrl ?? ""}
+              alt="profile"
+              width={192}
+              height={192}
+            />
+            <AvatarFallback>
+              <Skeleton className="size-full" />
+            </AvatarFallback>
+          </Avatar>
+        </div>
+        <h1 className="text-center font-bold text-4xl leading-normal tracking-tight">
+          {profile.name}
+          <CheckMark className="ml-2 inline size-6 fill-yellow-500" />
+        </h1>
+        <div className="text-lg text-muted-foreground">@{profile.username}</div>
+        <p className="mt-6 max-w-md text-pretty text-center text-lg text-muted-foreground">
+          {profile.bio}
+        </p>
+        <div className="mt-8 grid grid-cols-[repeat(3,auto)] gap-x-8 gap-y-6 sm:grid-cols-[repeat(5,auto)]">
+          <div className="flex flex-col items-center leading-tight">
+            <div className="font-bold text-lg">3232</div>
+            <div className="text-muted-foreground">Guildmates</div>
+          </div>
+          <Separator orientation="vertical" className="h-12" />
+          <div className="flex flex-col items-center leading-tight">
+            <div className="font-bold text-lg">0</div>
+            <div className="text-muted-foreground">Followers</div>
+          </div>
+          <Separator orientation="vertical" className="hidden h-12 sm:block" />
+          <div className="col-span-3 flex items-center gap-2 place-self-center sm:col-span-1">
+            <AvatarGroup imageUrls={["", ""]} count={8} />
+            <div className="text-muted-foreground leading-tight">
+              Followed by <span className="font-bold">Hoho</span>,<br />
+              <span className="font-bold">Hihi</span> and 22 others
+            </div>
+          </div>
+        </div>
+      </div>
+      <h2 className="mb-3 font-bold text-lg">Operated guilds</h2>
+      <OperatedGuildCard />
+      <div className="mt-8 mb-3 flex items-center justify-between">
+        <h2 className="font-bold text-lg">Top contributions</h2>
+        <ProfileOwnerGuard>
+          <EditContributions />
+        </ProfileOwnerGuard>
+      </div>
+      <div className="grid grid-cols-1 gap-3">
+        {contributions.map((contribution) => (
+          <ContributionCard contribution={contribution} key={contribution.id} />
+        ))}
+      </div>
+      <div className="mt-8">
+        <h2 className="mb-3 font-bold text-lg">Recent activity</h2>
+        <RecentActivity />
+        <p className="mt-2 font-semibold text-muted-foreground">
+          &hellip; only last 20 actions are shown
+        </p>
+      </div>
+    </div>
+  )
+}
diff --git a/src/app/(marketing)/profile/_components/ProfileOwnerGuard.tsx b/src/app/(marketing)/profile/_components/ProfileOwnerGuard.tsx
new file mode 100644
index 0000000000..6de4e15b1e
--- /dev/null
+++ b/src/app/(marketing)/profile/_components/ProfileOwnerGuard.tsx
@@ -0,0 +1,14 @@
+"use client"
+
+import { useUserPublic } from "@/hooks/useUserPublic"
+import { PropsWithChildren } from "react"
+import { useProfile } from "../_hooks/useProfile"
+
+export const ProfileOwnerGuard = ({ children }: PropsWithChildren) => {
+  const { data: profile } = useProfile()
+  const { id: publicUserId } = useUserPublic()
+  const isProfileOwner = !!profile?.userId && publicUserId === profile.userId
+
+  if (!isProfileOwner) return
+  return children
+}
diff --git a/src/app/(marketing)/profile/_components/ProfileSkeleton.tsx b/src/app/(marketing)/profile/_components/ProfileSkeleton.tsx
index dd91d0f3e0..51dc49d1cf 100644
--- a/src/app/(marketing)/profile/_components/ProfileSkeleton.tsx
+++ b/src/app/(marketing)/profile/_components/ProfileSkeleton.tsx
@@ -1,70 +1,57 @@
-import { Header } from "@/components/Header"
-import { Layout, LayoutBanner, LayoutHero, LayoutMain } from "@/components/Layout"
 import { Card } from "@/components/ui/Card"
 import { Separator } from "@/components/ui/Separator"
 import { Skeleton } from "@/components/ui/Skeleton"
 
 export const ProfileSkeleton = () => {
   return (
-    <Layout>
-      <LayoutHero>
-        <Header />
-        <LayoutBanner className="-bottom-[500px]">
-          <div className="absolute inset-0 bg-[url('/banner.svg')] opacity-10" />
-          <div className="absolute inset-0 bg-gradient-to-t from-background" />
-        </LayoutBanner>
-      </LayoutHero>
-      <LayoutMain>
-        <div className="mt-24">
-          <div className="relative mb-24 flex flex-col items-center">
-            <div className="relative mb-12 flex items-center justify-center">
-              <Skeleton className="size-48 rounded-full" />
-            </div>
-            <Skeleton className="my-2 h-8 w-96" />
-            <div className="text-lg text-muted-foreground"></div>
-            <p className="mt-6 max-w-md text-pretty text-center text-lg text-muted-foreground"></p>
-            <div className="mt-8 grid grid-cols-[repeat(3,auto)] gap-x-8 gap-y-6 sm:grid-cols-[repeat(5,auto)]">
-              <div className="flex flex-col items-center leading-tight">
-                <Skeleton className="mb-2 h-5 w-16" />
-                <Skeleton className="h-6 w-20" />
-              </div>
-              <Separator orientation="vertical" className="h-12" />
-              <div className="flex flex-col items-center leading-tight">
-                <Skeleton className="mb-2 h-5 w-16" />
-                <Skeleton className="h-6 w-20" />
-              </div>
-              <Separator orientation="vertical" className="hidden h-12 sm:block" />
-              <div className="col-span-3 flex items-center gap-2 place-self-center sm:col-span-1">
-                <Skeleton className="mb-1 h-12 w-32" />
-              </div>
-            </div>
+    <div className="mt-24">
+      <div className="relative mb-24 flex flex-col items-center">
+        <div className="relative mb-12 flex items-center justify-center">
+          <Skeleton className="size-48 rounded-full" />
+        </div>
+        <Skeleton className="my-2 h-8 w-96" />
+        <div className="text-lg text-muted-foreground"></div>
+        <p className="mt-6 max-w-md text-pretty text-center text-lg text-muted-foreground"></p>
+        <div className="mt-8 grid grid-cols-[repeat(3,auto)] gap-x-8 gap-y-6 sm:grid-cols-[repeat(5,auto)]">
+          <div className="flex flex-col items-center leading-tight">
+            <Skeleton className="mb-2 h-5 w-16" />
+            <Skeleton className="h-6 w-20" />
           </div>
-          <Skeleton className="mb-3 h-8 w-40" />
-          <div className="mb-16 grid grid-cols-1 gap-3 md:grid-cols-2">
-            <Card>
-              <Skeleton className="size-full h-44" />
-            </Card>
-            <Card>
-              <Skeleton className="size-full" />
-            </Card>
+          <Separator orientation="vertical" className="h-12" />
+          <div className="flex flex-col items-center leading-tight">
+            <Skeleton className="mb-2 h-5 w-16" />
+            <Skeleton className="h-6 w-20" />
           </div>
-          <Skeleton className="mb-3 h-8 w-40" />
-          <div className="mb-16 grid grid-cols-1 gap-3 md:grid-cols-2">
-            <Card>
-              <Skeleton className="size-full h-44" />
-            </Card>
-            <Card>
-              <Skeleton className="size-full h-44" />
-            </Card>
-            <Card>
-              <Skeleton className="size-full h-44" />
-            </Card>
-            <Card>
-              <Skeleton className="size-full" />
-            </Card>
+          <Separator orientation="vertical" className="hidden h-12 sm:block" />
+          <div className="col-span-3 flex items-center gap-2 place-self-center sm:col-span-1">
+            <Skeleton className="mb-1 h-12 w-32" />
           </div>
         </div>
-      </LayoutMain>
-    </Layout>
+      </div>
+      <Skeleton className="mb-3 h-8 w-40" />
+      <div className="mb-16 grid grid-cols-1 gap-3 md:grid-cols-2">
+        <Card>
+          <Skeleton className="size-full h-44" />
+        </Card>
+        <Card>
+          <Skeleton className="size-full" />
+        </Card>
+      </div>
+      <Skeleton className="mb-3 h-8 w-40" />
+      <div className="mb-16 grid grid-cols-1 gap-3 md:grid-cols-2">
+        <Card>
+          <Skeleton className="size-full h-44" />
+        </Card>
+        <Card>
+          <Skeleton className="size-full h-44" />
+        </Card>
+        <Card>
+          <Skeleton className="size-full h-44" />
+        </Card>
+        <Card>
+          <Skeleton className="size-full" />
+        </Card>
+      </div>
+    </div>
   )
 }
diff --git a/src/app/(marketing)/profile/_hooks/useContribution.tsx b/src/app/(marketing)/profile/_hooks/useContribution.tsx
index add0bb92f6..88c4c01317 100644
--- a/src/app/(marketing)/profile/_hooks/useContribution.tsx
+++ b/src/app/(marketing)/profile/_hooks/useContribution.tsx
@@ -4,7 +4,7 @@ import { useProfile } from "./useProfile"
 
 export const useContribution = () => {
   const { data: profileData } = useProfile()
-  return useSWRImmutable<Schemas["ProfileContribution"][]>(
+  return useSWRImmutable<Schemas["Contribution"][]>(
     profileData ? `/v2/profiles/${profileData.username}/contributions` : null
   )
 }
diff --git a/src/app/(marketing)/profile/_hooks/useCreateContribution.tsx b/src/app/(marketing)/profile/_hooks/useCreateContribution.tsx
index 877fcca714..abfbc22ee2 100644
--- a/src/app/(marketing)/profile/_hooks/useCreateContribution.tsx
+++ b/src/app/(marketing)/profile/_hooks/useCreateContribution.tsx
@@ -2,10 +2,11 @@ import { useToast } from "@/components/ui/hooks/useToast"
 import { Schemas } from "@guildxyz/types"
 import { SignedValidation, useSubmitWithSign } from "hooks/useSubmit"
 import fetcher from "utils/fetcher"
+import { revalidateContribution } from "../_server_actions/revalidateContribution"
 import { useContribution } from "./useContribution"
 import { useProfile } from "./useProfile"
 
-export type EditProfilePayload = Schemas["ProfileContributionUpdate"]
+export type EditProfilePayload = Schemas["ContributionUpdate"]
 
 export const useCreateContribution = () => {
   const { toast } = useToast()
@@ -14,7 +15,7 @@ export const useCreateContribution = () => {
 
   const update = async (signedValidation: SignedValidation) => {
     return fetcher(
-      `/v2/profiles/${(profile as Schemas["Profile"]).id}/contributions`,
+      `/v2/profiles/${(profile as Schemas["Profile"]).username}/contributions`,
       {
         method: "POST",
         ...signedValidation,
@@ -22,7 +23,7 @@ export const useCreateContribution = () => {
     )
   }
 
-  const submitWithSign = useSubmitWithSign<Schemas["ProfileContribution"]>(update, {
+  const submitWithSign = useSubmitWithSign<Schemas["Contribution"]>(update, {
     onSuccess: (response) => {
       contribution.mutate(
         (prev) => {
@@ -33,6 +34,7 @@ export const useCreateContribution = () => {
         },
         { revalidate: false }
       )
+      revalidateContribution()
       toast({
         variant: "success",
         title: "Successfully created contribution",
diff --git a/src/app/(marketing)/profile/_hooks/useDeleteContribution.tsx b/src/app/(marketing)/profile/_hooks/useDeleteContribution.tsx
index f438d98554..f69753505e 100644
--- a/src/app/(marketing)/profile/_hooks/useDeleteContribution.tsx
+++ b/src/app/(marketing)/profile/_hooks/useDeleteContribution.tsx
@@ -2,19 +2,20 @@ import { useToast } from "@/components/ui/hooks/useToast"
 import { Schemas } from "@guildxyz/types"
 import { SignedValidation, useSubmitWithSign } from "hooks/useSubmit"
 import fetcher from "utils/fetcher"
+import { revalidateContribution } from "../_server_actions/revalidateContribution"
 import { useContribution } from "./useContribution"
 import { useProfile } from "./useProfile"
 
 export const useDeleteContribution = ({
   contributionId,
-}: { contributionId: Schemas["ProfileContribution"]["id"] }) => {
+}: { contributionId: Schemas["Contribution"]["id"] }) => {
   const { toast } = useToast()
   const { data: profile } = useProfile()
   const contribution = useContribution()
 
   const update = async (signedValidation: SignedValidation) => {
     return fetcher(
-      `/v2/profiles/${(profile as Schemas["Profile"]).id}/contributions/${contributionId}`,
+      `/v2/profiles/${(profile as Schemas["Profile"]).username}/contributions/${contributionId}`,
       {
         method: "DELETE",
         ...signedValidation,
@@ -23,7 +24,7 @@ export const useDeleteContribution = ({
   }
 
   const submitWithSign = useSubmitWithSign<object>(update, {
-    onSuccess: (response) => {
+    onSuccess: () => {
       contribution.mutate(
         (prev) => {
           if (!prev || !contribution.data) return
@@ -32,6 +33,7 @@ export const useDeleteContribution = ({
         },
         { revalidate: false }
       )
+      revalidateContribution()
       toast({
         variant: "success",
         title: "Successfully deleted contribution",
@@ -40,7 +42,7 @@ export const useDeleteContribution = ({
     onError: (response) => {
       toast({
         variant: "error",
-        title: "Failed to deleted contribution",
+        title: "Failed to delete contribution",
         description: response.error,
       })
     },
diff --git a/src/app/(marketing)/profile/_hooks/useDeleteProfile.ts b/src/app/(marketing)/profile/_hooks/useDeleteProfile.ts
new file mode 100644
index 0000000000..cdae43aa81
--- /dev/null
+++ b/src/app/(marketing)/profile/_hooks/useDeleteProfile.ts
@@ -0,0 +1,38 @@
+import { useToast } from "@/components/ui/hooks/useToast"
+import { SignedValidation, useSubmitWithSign } from "hooks/useSubmit"
+import { useParams, useRouter } from "next/navigation"
+import fetcher from "utils/fetcher"
+
+export const useDeleteProfile = () => {
+  const { toast } = useToast()
+  const router = useRouter()
+  const params = useParams<{ username: string }>()
+
+  const createProfile = async (signedValidation: SignedValidation) => {
+    return fetcher(`/v2/profiles/${params?.username}`, {
+      method: "DELETE",
+      ...signedValidation,
+    })
+  }
+
+  const submitWithSign = useSubmitWithSign<object>(createProfile, {
+    onSuccess: () => {
+      router.replace("/create-profile")
+      toast({
+        variant: "success",
+        title: "Successfully deleted profile",
+      })
+    },
+    onError: (response) => {
+      toast({
+        variant: "error",
+        title: "Failed to delete profile",
+        description: response.error,
+      })
+    },
+  })
+  return {
+    ...submitWithSign,
+    onSubmit: () => params?.username && submitWithSign.onSubmit(),
+  }
+}
diff --git a/src/app/(marketing)/profile/_hooks/useUpdateContribution.tsx b/src/app/(marketing)/profile/_hooks/useUpdateContribution.tsx
index 85b4b9ecfc..febe464054 100644
--- a/src/app/(marketing)/profile/_hooks/useUpdateContribution.tsx
+++ b/src/app/(marketing)/profile/_hooks/useUpdateContribution.tsx
@@ -2,19 +2,20 @@ import { useToast } from "@/components/ui/hooks/useToast"
 import { Schemas } from "@guildxyz/types"
 import { SignedValidation, useSubmitWithSign } from "hooks/useSubmit"
 import fetcher from "utils/fetcher"
+import { revalidateContribution } from "../_server_actions/revalidateContribution"
 import { useContribution } from "./useContribution"
 import { useProfile } from "./useProfile"
 
 export const useUpdateContribution = ({
   contributionId,
-}: { contributionId: Schemas["ProfileContribution"]["id"] }) => {
+}: { contributionId: Schemas["Contribution"]["id"] }) => {
   const { toast } = useToast()
   const { data: profile } = useProfile()
   const contribution = useContribution()
 
   const update = async (signedValidation: SignedValidation) => {
     return fetcher(
-      `/v2/profiles/${(profile as Schemas["Profile"]).id}/contributions/${contributionId}`,
+      `/v2/profiles/${(profile as Schemas["Profile"]).username}/contributions/${contributionId}`,
       {
         method: "PUT",
         ...signedValidation,
@@ -22,21 +23,21 @@ export const useUpdateContribution = ({
     )
   }
 
-  const submitWithSign = useSubmitWithSign<Schemas["ProfileContribution"]>(update, {
+  const submitWithSign = useSubmitWithSign<Schemas["Contribution"]>(update, {
     onSuccess: (response) => {
       contribution.mutate(
         (prev) => {
           if (!prev || !contribution.data) return
           // WARNING: should we validate here?
           return prev.map((p) =>
-            p.id ===
-            (contribution.data as unknown as Schemas["ProfileContribution"]).id
+            p.id === (contribution.data as unknown as Schemas["Contribution"]).id
               ? response
               : p
           )
         },
         { revalidate: false }
       )
+      revalidateContribution()
       toast({
         variant: "success",
         title: "Successfully updated contribution",
@@ -52,7 +53,7 @@ export const useUpdateContribution = ({
   })
   return {
     ...submitWithSign,
-    onSubmit: (payload: Schemas["ProfileContributionUpdate"]) =>
+    onSubmit: (payload: Schemas["ContributionUpdate"]) =>
       profile && submitWithSign.onSubmit(payload),
   }
 }
diff --git a/src/app/(marketing)/profile/_hooks/useUpdateProfile.ts b/src/app/(marketing)/profile/_hooks/useUpdateProfile.ts
new file mode 100644
index 0000000000..8da9a9a059
--- /dev/null
+++ b/src/app/(marketing)/profile/_hooks/useUpdateProfile.ts
@@ -0,0 +1,47 @@
+import { useToast } from "@/components/ui/hooks/useToast"
+import { Schemas } from "@guildxyz/types"
+import { SignedValidation, useSubmitWithSign } from "hooks/useSubmit"
+import { useParams, useRouter } from "next/navigation"
+import fetcher from "utils/fetcher"
+import { revalidateProfile } from "../_server_actions/revalidateProfile"
+import { useProfile } from "./useProfile"
+
+export const useUpdateProfile = () => {
+  const { toast } = useToast()
+  const router = useRouter()
+  const params = useParams<{ username: string }>()
+  const { mutate } = useProfile()
+
+  const updateProfile = async (signedValidation: SignedValidation) => {
+    return fetcher(`/v2/profiles/${params?.username}`, {
+      method: "PUT",
+      ...signedValidation,
+    })
+  }
+
+  const submitWithSign = useSubmitWithSign<Schemas["Profile"]>(updateProfile, {
+    onSuccess: (response) => {
+      console.log("onSuccess", response)
+      router.replace(`/profile/${response.username}`)
+      mutate(() => response, { revalidate: false })
+      revalidateProfile()
+      toast({
+        variant: "success",
+        title: "Successfully updated profile",
+      })
+    },
+    onError: (response) => {
+      console.log("onError", response)
+      toast({
+        variant: "error",
+        title: "Failed to update profile",
+        description: response.error,
+      })
+    },
+  })
+  return {
+    ...submitWithSign,
+    onSubmit: (payload: Schemas["ProfileUpdate"]) =>
+      params?.username && submitWithSign.onSubmit(payload),
+  }
+}
diff --git a/src/app/(marketing)/profile/_server_actions/revalidateContribution.ts b/src/app/(marketing)/profile/_server_actions/revalidateContribution.ts
new file mode 100644
index 0000000000..fa10ae1ed6
--- /dev/null
+++ b/src/app/(marketing)/profile/_server_actions/revalidateContribution.ts
@@ -0,0 +1,7 @@
+"use server"
+
+import { revalidateTag } from "next/cache"
+
+export async function revalidateContribution() {
+  revalidateTag("contributions")
+}
diff --git a/src/app/(marketing)/profile/_server_actions/revalidateProfile.ts b/src/app/(marketing)/profile/_server_actions/revalidateProfile.ts
new file mode 100644
index 0000000000..09dbccd613
--- /dev/null
+++ b/src/app/(marketing)/profile/_server_actions/revalidateProfile.ts
@@ -0,0 +1,7 @@
+"use server"
+
+import { revalidateTag } from "next/cache"
+
+export const revalidateProfile = async () => {
+  revalidateTag("profile")
+}
diff --git a/src/v2/components/Confetti.tsx b/src/v2/components/Confetti.tsx
index dd39fa57d7..20ed8557fc 100644
--- a/src/v2/components/Confetti.tsx
+++ b/src/v2/components/Confetti.tsx
@@ -81,7 +81,7 @@ export const ConfettiProvider = ({ children }: PropsWithChildren) => {
     const confettiClosure: ConfettiPlayer = (type) => {
       if (type === "Confetti from left and right") {
         doubleConfetti(confetti)
-        audioRef.current?.play()
+        // audioRef.current?.play()
       }
     }
     confettiRef.current = confettiClosure
diff --git a/src/v2/components/SWRProvider.tsx b/src/v2/components/SWRProvider.tsx
new file mode 100644
index 0000000000..aa461de0f1
--- /dev/null
+++ b/src/v2/components/SWRProvider.tsx
@@ -0,0 +1,11 @@
+"use client"
+
+import { PropsWithChildren } from "react"
+import { SWRConfig, type SWRConfiguration } from "swr"
+
+export const SWRProvider = ({
+  children,
+  value,
+}: PropsWithChildren<{ value: SWRConfiguration }>) => {
+  return <SWRConfig value={value}>{children}</SWRConfig>
+}
diff --git a/src/v2/lib/validations/profileSchema.ts b/src/v2/lib/validations/profileSchema.ts
index db17dd94c1..5b5ca137d1 100644
--- a/src/v2/lib/validations/profileSchema.ts
+++ b/src/v2/lib/validations/profileSchema.ts
@@ -1,10 +1,12 @@
 import { z } from "zod"
 
+const nullToUndefined = <T extends z.ZodTypeAny>(schema: T) =>
+  z.preprocess((value) => (value === null ? undefined : value), schema)
+
 export const profileSchema = z.object({
-  name: z
-    .string()
-    .max(100, { message: "Name cannot exceed 100 characters" })
-    .optional(),
+  name: nullToUndefined(
+    z.string().max(100, { message: "Name cannot exceed 100 characters" }).optional()
+  ),
   username: z
     .string()
     .min(1, { message: "Username is required" })
@@ -20,18 +22,21 @@ export const profileSchema = z.object({
         })
       }
     }),
-  bio: z
-    .string()
-    .max(1000, { message: "Bio cannot exceed 1000 characters" })
-    .optional(),
-  profileImageUrl: z
-    .string()
-    .url({ message: "Profile image must be a valid URL" })
-    .max(500, { message: "Profile image URL cannot exceed 500 characters" })
-    .optional(),
-  backgroundImageUrl: z
-    .string()
-    .url({ message: "Background image must be a valid URL" })
-    .max(500, { message: "Profile image URL cannot exceed 500 characters" })
-    .optional(),
+  bio: nullToUndefined(
+    z.string().max(1000, { message: "Bio cannot exceed 1000 characters" }).optional()
+  ),
+  profileImageUrl: nullToUndefined(
+    z
+      .string()
+      .url({ message: "Profile image must be a valid URL" })
+      .max(500, { message: "Profile image URL cannot exceed 500 characters" })
+      .optional()
+  ),
+  backgroundImageUrl: nullToUndefined(
+    z
+      .string()
+      .url({ message: "Background image must be a valid URL" })
+      .max(500, { message: "Profile image URL cannot exceed 500 characters" })
+      .optional()
+  ),
 })
diff --git a/tsconfig.json b/tsconfig.json
index 80fe563470..ba984e0c85 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -25,7 +25,8 @@
     "strictNullChecks": true,
     "paths": {
       "@/*": ["./v2/*"],
-      "@public/*": ["../public/*"]
+      "@public/*": ["../public/*"],
+      "@app/*": ["./app/*"]
     }
   },
   "include": [