From b29f846f2982d2bd2363d34e4d91351c729e5daa Mon Sep 17 00:00:00 2001
From: Dominik Stumpf <s.dominik.work@gmail.com>
Date: Mon, 9 Sep 2024 23:47:45 +0200
Subject: [PATCH 01/29] feat: add progress bar and polygon

---
 .../profile/[username]/constants.ts           | 19 +++++++
 .../(marketing)/profile/[username]/page.tsx   | 10 ++++
 .../_components/CircularProgressBar.tsx       | 55 +++++++++++++++++++
 .../profile/_components/Polygon.tsx           | 31 +++++++++++
 .../profile/_components/ProfileHero.tsx       | 39 +++++++++++--
 .../profile/_hooks/useExperiences.tsx         | 13 +++++
 6 files changed, 161 insertions(+), 6 deletions(-)
 create mode 100644 src/app/(marketing)/profile/[username]/constants.ts
 create mode 100644 src/app/(marketing)/profile/_components/CircularProgressBar.tsx
 create mode 100644 src/app/(marketing)/profile/_components/Polygon.tsx
 create mode 100644 src/app/(marketing)/profile/_hooks/useExperiences.tsx

diff --git a/src/app/(marketing)/profile/[username]/constants.ts b/src/app/(marketing)/profile/[username]/constants.ts
new file mode 100644
index 0000000000..5f0689d3db
--- /dev/null
+++ b/src/app/(marketing)/profile/[username]/constants.ts
@@ -0,0 +1,19 @@
+export const MAX_LEVEL = 100
+export const RANKS = [
+  { color: "#78c93d", title: "novice", requiredXp: 0, polygonCount: 20 },
+  { color: "#88d525", title: "learner", requiredXp: 1e2, polygonCount: 20 },
+  { color: "#f6ca45", title: "knight", requiredXp: 1e3, polygonCount: 4 },
+  { color: "#78c93d", title: "veteran", requiredXp: 1e4, polygonCount: 4 },
+  { color: "#ec5a53", title: "champion", requiredXp: 1e6, polygonCount: 4 },
+  { color: "#53adf0", title: "hero", requiredXp: 1e8, polygonCount: 5 },
+  { color: "#c385f8", title: "master", requiredXp: 1e9, polygonCount: 5 },
+  { color: "#3e6fc3", title: "grand master", requiredXp: 1e11, polygonCount: 5 },
+  { color: "#be4681", title: "legend", requiredXp: 1e12, polygonCount: 6 },
+  { color: "#000000", title: "mythic", requiredXp: 1e13, polygonCount: 6 },
+  {
+    color: "linear-gradient(to left top, #00cbfa, #b9f2ff)",
+    title: "???",
+    requiredXp: 1e19,
+    polygonCount: 6,
+  },
+] as const
diff --git a/src/app/(marketing)/profile/[username]/page.tsx b/src/app/(marketing)/profile/[username]/page.tsx
index 9254fea7d8..f879d86c94 100644
--- a/src/app/(marketing)/profile/[username]/page.tsx
+++ b/src/app/(marketing)/profile/[username]/page.tsx
@@ -158,6 +158,14 @@ const fetchPublicProfileData = async ({
     : []
   const guildsZipped = guildRequests.map(({ pathname }, i) => [pathname, guilds[i]])
   const rolesZipped = roleRequests.map(({ pathname }, i) => [pathname, roles[i]])
+  const experiencesRequest = new URL(`/v2/profiles/${username}/experiences`, api)
+  const experiences = await ssrFetcher<any>(experiencesRequest)
+  const experienceCountRequest = new URL(
+    `/v2/profiles/${username}/experiences?count=true`,
+    api
+  )
+  const experienceCount = await ssrFetcher<any>(experiencesRequest)
+
   return {
     profile,
     fallback: Object.fromEntries(
@@ -167,6 +175,8 @@ const fetchPublicProfileData = async ({
         [farcasterProfilesRequest.pathname, farcasterProfiles],
         [neynarRequest?.href, fcFollowers],
         [referredUsersRequest.pathname, referredUsers],
+        [experiencesRequest.pathname, experiences],
+        [experienceCountRequest.pathname, experienceCount],
         ...collectionsZipped,
         ...guildsZipped,
         ...rolesZipped,
diff --git a/src/app/(marketing)/profile/_components/CircularProgressBar.tsx b/src/app/(marketing)/profile/_components/CircularProgressBar.tsx
new file mode 100644
index 0000000000..ae5a79cfe1
--- /dev/null
+++ b/src/app/(marketing)/profile/_components/CircularProgressBar.tsx
@@ -0,0 +1,55 @@
+import { cn } from "@/lib/utils"
+import React from "react"
+
+interface CircularProgressBarProps {
+  strokeWidth?: number
+  progress: number
+  color?: string
+  bgColor?: string
+  className?: string
+}
+
+export const CircularProgressBar: React.FC<CircularProgressBarProps> = ({
+  strokeWidth = 6,
+  progress,
+  color,
+  bgColor,
+  className,
+}) => {
+  const size = 128
+  const radius = (size - strokeWidth) / 2
+  const circumference = 2 * Math.PI * radius
+  const offset = circumference - progress * circumference
+
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox={`0 0 ${size} ${size}`}
+      className={className}
+    >
+      <circle
+        className={cn({ "stroke-background": !bgColor })}
+        cx={size / 2}
+        cy={size / 2}
+        r={radius}
+        fill="none"
+        stroke={bgColor}
+        strokeWidth={strokeWidth}
+      />
+      <circle
+        className={cn("transition-all", { "stroke-primary": !color })}
+        cx={size / 2}
+        cy={size / 2}
+        r={radius}
+        fill="none"
+        stroke={color}
+        strokeWidth={strokeWidth}
+        strokeDasharray={circumference}
+        strokeDashoffset={offset}
+        strokeLinecap="round"
+        transform={`rotate(-90 ${size / 2} ${size / 2})`}
+      />
+    </svg>
+  )
+}
diff --git a/src/app/(marketing)/profile/_components/Polygon.tsx b/src/app/(marketing)/profile/_components/Polygon.tsx
new file mode 100644
index 0000000000..dab503f316
--- /dev/null
+++ b/src/app/(marketing)/profile/_components/Polygon.tsx
@@ -0,0 +1,31 @@
+import { cn } from "@/lib/utils"
+import { PropsWithChildren } from "react"
+
+type PolygonProps = PropsWithChildren<{
+  sides: number
+  color?: string
+  className?: string
+}>
+
+export const Polygon = ({ sides, color, className }: PolygonProps) => {
+  const angleStep = (2 * Math.PI) / sides
+  const radius = 38
+  const points = Array.from({ length: sides }, (_, i) => {
+    const x = 50 + radius * Math.cos(i * angleStep)
+    const y = 50 + radius * Math.sin(i * angleStep)
+    return `${x},${y}`
+  }).join(" ")
+
+  return (
+    <svg viewBox={"0 0 100 100"} className={className}>
+      <polygon
+        className={cn({ "fill-primary stroke-primary": !color })}
+        points={points}
+        stroke={color}
+        fill={color}
+        strokeWidth="22"
+        strokeLinejoin="round"
+      />
+    </svg>
+  )
+}
diff --git a/src/app/(marketing)/profile/_components/ProfileHero.tsx b/src/app/(marketing)/profile/_components/ProfileHero.tsx
index 1d7e37e751..12cafc8be4 100644
--- a/src/app/(marketing)/profile/_components/ProfileHero.tsx
+++ b/src/app/(marketing)/profile/_components/ProfileHero.tsx
@@ -6,16 +6,28 @@ import { Avatar } from "@/components/ui/Avatar"
 import { Button } from "@/components/ui/Button"
 import { Card } from "@/components/ui/Card"
 import { Pencil } from "@phosphor-icons/react"
+import { RANKS } from "../[username]/constants"
 import { ProfileOwnerGuard } from "../_components/ProfileOwnerGuard"
+import { useExperiences } from "../_hooks/useExperiences"
 import { useProfile } from "../_hooks/useProfile"
+import { CircularProgressBar } from "./CircularProgressBar"
 import { EditProfile } from "./EditProfile/EditProfile"
+import { Polygon } from "./Polygon"
 import { ProfileHeroSkeleton } from "./ProfileSkeleton"
 import { ProfileSocialCounters } from "./ProfileSocialCounters"
 
 export const ProfileHero = () => {
   const { data: profile } = useProfile()
+  const { data: experienceCount } = useExperiences({ count: true })
+  const rankIndex = RANKS.findIndex(
+    ({ requiredXp }) => experienceCount >= requiredXp
+  )
+  const [rank, nextRank] = RANKS.slice(rankIndex, rankIndex + 1) as [
+    (typeof RANKS)[number],
+    (typeof RANKS)[number] | undefined,
+  ]
 
-  if (!profile) return <ProfileHeroSkeleton />
+  if (!profile || !rank) return <ProfileHeroSkeleton />
 
   return (
     <LayoutContainer>
@@ -36,12 +48,27 @@ export const ProfileHero = () => {
             </Card>
           </EditProfile>
         </ProfileOwnerGuard>
-        <Avatar className="relative mb-6 flex size-40 items-center justify-center rounded-full border-2 md:size-48">
-          <ProfileAvatar
-            username={profile.username}
-            profileImageUrl={profile.profileImageUrl}
+        <div className="relative mb-6 flex size-48 items-center justify-center md:size-56">
+          <CircularProgressBar
+            progress={nextRank ? experienceCount / nextRank.requiredXp : 1}
+            color={rank.color}
+            className="absolute inset-0 size-full"
           />
-        </Avatar>
+          <Avatar className="flex size-40 items-center justify-center rounded-full border-2 md:size-48">
+            <ProfileAvatar
+              username={profile.username}
+              profileImageUrl={profile.profileImageUrl}
+            />
+          </Avatar>
+          <div className="-translate-x-1/4 -translate-y-1/4 absolute right-0 bottom-0 flex size-12 items-center justify-center">
+            <Polygon
+              sides={rank.polygonCount}
+              color={rank.color}
+              className="brightness-75"
+            />
+            <span className="absolute font-bold font-display text-xl">23</span>
+          </div>
+        </div>
         <h1 className="break-all text-center font-extrabold text-3xl leading-tight tracking-tight md:text-4xl">
           {profile.name || profile.username}
           <CheckMark className="ml-2 inline size-6 fill-yellow-500 align-baseline" />
diff --git a/src/app/(marketing)/profile/_hooks/useExperiences.tsx b/src/app/(marketing)/profile/_hooks/useExperiences.tsx
new file mode 100644
index 0000000000..e081d9e5b2
--- /dev/null
+++ b/src/app/(marketing)/profile/_hooks/useExperiences.tsx
@@ -0,0 +1,13 @@
+import useSWRImmutable from "swr/immutable"
+import { useProfile } from "./useProfile"
+
+export const useExperiences = ({ count = false }: { count?: boolean }) => {
+  const { data: profile } = useProfile()
+  return useSWRImmutable(
+    profile
+      ? [`/v2/profiles/${profile.username}/experiences`, count && `count=${count}`]
+          .filter(Boolean)
+          .join("?")
+      : null
+  )
+}

From 31d88dc1c04c0779b7086440dadc65ebf0cbf115 Mon Sep 17 00:00:00 2001
From: Dominik Stumpf <s.dominik.work@gmail.com>
Date: Tue, 10 Sep 2024 00:58:51 +0200
Subject: [PATCH 02/29] feat: implement xp ranking, leveling logic

---
 .../profile/_components/ProfileHero.tsx       | 32 +++++++++++++++----
 1 file changed, 26 insertions(+), 6 deletions(-)

diff --git a/src/app/(marketing)/profile/_components/ProfileHero.tsx b/src/app/(marketing)/profile/_components/ProfileHero.tsx
index 12cafc8be4..122c455460 100644
--- a/src/app/(marketing)/profile/_components/ProfileHero.tsx
+++ b/src/app/(marketing)/profile/_components/ProfileHero.tsx
@@ -1,4 +1,5 @@
 "use client"
+
 import { CheckMark } from "@/components/CheckMark"
 import { LayoutContainer } from "@/components/Layout"
 import { ProfileAvatar } from "@/components/ProfileAvatar"
@@ -6,7 +7,7 @@ import { Avatar } from "@/components/ui/Avatar"
 import { Button } from "@/components/ui/Button"
 import { Card } from "@/components/ui/Card"
 import { Pencil } from "@phosphor-icons/react"
-import { RANKS } from "../[username]/constants"
+import { MAX_LEVEL, RANKS } from "../[username]/constants"
 import { ProfileOwnerGuard } from "../_components/ProfileOwnerGuard"
 import { useExperiences } from "../_hooks/useExperiences"
 import { useProfile } from "../_hooks/useProfile"
@@ -16,16 +17,35 @@ import { Polygon } from "./Polygon"
 import { ProfileHeroSkeleton } from "./ProfileSkeleton"
 import { ProfileSocialCounters } from "./ProfileSocialCounters"
 
+const generateExponentialArray = (
+  steps: number,
+  sum: number,
+  exponent = 2
+): number[] => {
+  const baseSum = (Math.pow(exponent, steps) - 1) / (exponent - 1)
+  const scaleFactor = sum / baseSum
+  return Array.from({ length: steps }, (_, i) => Math.pow(exponent, i) * scaleFactor)
+}
+
 export const ProfileHero = () => {
   const { data: profile } = useProfile()
   const { data: experienceCount } = useExperiences({ count: true })
-  const rankIndex = RANKS.findIndex(
-    ({ requiredXp }) => experienceCount >= requiredXp
+  const rankIndex = Math.max(
+    0,
+    RANKS.findIndex(({ requiredXp }) => experienceCount < requiredXp) - 1
   )
-  const [rank, nextRank] = RANKS.slice(rankIndex, rankIndex + 1) as [
+  const [rank, nextRank] = RANKS.slice(rankIndex, rankIndex + 2) as [
     (typeof RANKS)[number],
     (typeof RANKS)[number] | undefined,
   ]
+  console.log({ rankIndex })
+  const levelInRank = Math.floor(MAX_LEVEL / RANKS.length)
+  const levels =
+    nextRank && generateExponentialArray(levelInRank, nextRank.requiredXp)
+  console.log(levels, generateExponentialArray(5, 100))
+  const levelIndex =
+    levels && Math.max(0, levels.findIndex((level) => experienceCount <= level) - 1)
+  const level = rankIndex * levelInRank + (levelIndex || 0)
 
   if (!profile || !rank) return <ProfileHeroSkeleton />
 
@@ -50,7 +70,7 @@ export const ProfileHero = () => {
         </ProfileOwnerGuard>
         <div className="relative mb-6 flex size-48 items-center justify-center md:size-56">
           <CircularProgressBar
-            progress={nextRank ? experienceCount / nextRank.requiredXp : 1}
+            progress={nextRank ? experienceCount / levels.at(levelIndex + 1) : 1}
             color={rank.color}
             className="absolute inset-0 size-full"
           />
@@ -66,7 +86,7 @@ export const ProfileHero = () => {
               color={rank.color}
               className="brightness-75"
             />
-            <span className="absolute font-bold font-display text-xl">23</span>
+            <span className="absolute font-bold font-display text-xl">{level}</span>
           </div>
         </div>
         <h1 className="break-all text-center font-extrabold text-3xl leading-tight tracking-tight md:text-4xl">

From 8cbeefdf8e9f4a6d7089cfdeb40c34c662651c61 Mon Sep 17 00:00:00 2001
From: Dominik Stumpf <s.dominik.work@gmail.com>
Date: Tue, 10 Sep 2024 01:04:50 +0200
Subject: [PATCH 03/29] chore: remove console.log

---
 src/app/(marketing)/profile/_components/ProfileHero.tsx | 2 --
 1 file changed, 2 deletions(-)

diff --git a/src/app/(marketing)/profile/_components/ProfileHero.tsx b/src/app/(marketing)/profile/_components/ProfileHero.tsx
index 122c455460..1198a0010e 100644
--- a/src/app/(marketing)/profile/_components/ProfileHero.tsx
+++ b/src/app/(marketing)/profile/_components/ProfileHero.tsx
@@ -38,11 +38,9 @@ export const ProfileHero = () => {
     (typeof RANKS)[number],
     (typeof RANKS)[number] | undefined,
   ]
-  console.log({ rankIndex })
   const levelInRank = Math.floor(MAX_LEVEL / RANKS.length)
   const levels =
     nextRank && generateExponentialArray(levelInRank, nextRank.requiredXp)
-  console.log(levels, generateExponentialArray(5, 100))
   const levelIndex =
     levels && Math.max(0, levels.findIndex((level) => experienceCount <= level) - 1)
   const level = rankIndex * levelInRank + (levelIndex || 0)

From 326b10422ae2e9a1eaa7d40a7a5d8ae6f6681935 Mon Sep 17 00:00:00 2001
From: Dominik Stumpf <s.dominik.work@gmail.com>
Date: Tue, 10 Sep 2024 14:59:38 +0200
Subject: [PATCH 04/29] feat: add xp to activity card, refactor xp system

---
 .../profile/[username]/constants.ts           | 21 ++++-----
 .../_components/CircularProgressBar.tsx       |  5 ++-
 .../profile/_components/Polygon.tsx           |  8 ++--
 .../profile/_components/ProfileHero.tsx       | 43 +++++++++++--------
 .../RecentActivity/ActivityCard.tsx           |  6 +++
 src/components/[guild]/activity/constants.ts  |  1 +
 6 files changed, 52 insertions(+), 32 deletions(-)

diff --git a/src/app/(marketing)/profile/[username]/constants.ts b/src/app/(marketing)/profile/[username]/constants.ts
index 5f0689d3db..e188cee1f7 100644
--- a/src/app/(marketing)/profile/[username]/constants.ts
+++ b/src/app/(marketing)/profile/[username]/constants.ts
@@ -1,15 +1,16 @@
 export const MAX_LEVEL = 100
+export const MAX_XP = 11e4
 export const RANKS = [
-  { color: "#78c93d", title: "novice", requiredXp: 0, polygonCount: 20 },
-  { color: "#88d525", title: "learner", requiredXp: 1e2, polygonCount: 20 },
-  { color: "#f6ca45", title: "knight", requiredXp: 1e3, polygonCount: 4 },
-  { color: "#78c93d", title: "veteran", requiredXp: 1e4, polygonCount: 4 },
-  { color: "#ec5a53", title: "champion", requiredXp: 1e6, polygonCount: 4 },
-  { color: "#53adf0", title: "hero", requiredXp: 1e8, polygonCount: 5 },
-  { color: "#c385f8", title: "master", requiredXp: 1e9, polygonCount: 5 },
-  { color: "#3e6fc3", title: "grand master", requiredXp: 1e11, polygonCount: 5 },
-  { color: "#be4681", title: "legend", requiredXp: 1e12, polygonCount: 6 },
-  { color: "#000000", title: "mythic", requiredXp: 1e13, polygonCount: 6 },
+  { color: "#78c93d", title: "novice", polygonCount: 20 },
+  { color: "#88d525", title: "learner", polygonCount: 20 },
+  { color: "#f6ca45", title: "knight", polygonCount: 4 },
+  { color: "#78c93d", title: "veteran", polygonCount: 4 },
+  { color: "#ec5a53", title: "champion", polygonCount: 4 },
+  { color: "#53adf0", title: "hero", polygonCount: 5 },
+  { color: "#c385f8", title: "master", polygonCount: 5 },
+  { color: "#3e6fc3", title: "grand master", polygonCount: 5 },
+  { color: "#be4681", title: "legend", polygonCount: 6 },
+  { color: "#000000", title: "mythic", polygonCount: 6 },
   {
     color: "linear-gradient(to left top, #00cbfa, #b9f2ff)",
     title: "???",
diff --git a/src/app/(marketing)/profile/_components/CircularProgressBar.tsx b/src/app/(marketing)/profile/_components/CircularProgressBar.tsx
index ae5a79cfe1..eeffaa2d0d 100644
--- a/src/app/(marketing)/profile/_components/CircularProgressBar.tsx
+++ b/src/app/(marketing)/profile/_components/CircularProgressBar.tsx
@@ -38,7 +38,10 @@ export const CircularProgressBar: React.FC<CircularProgressBarProps> = ({
         strokeWidth={strokeWidth}
       />
       <circle
-        className={cn("transition-all", { "stroke-primary": !color })}
+        className={cn("transition-all ease-out", {
+          "stroke-primary": !color,
+        })}
+        style={{ transitionDuration: "3.33s" }}
         cx={size / 2}
         cy={size / 2}
         r={radius}
diff --git a/src/app/(marketing)/profile/_components/Polygon.tsx b/src/app/(marketing)/profile/_components/Polygon.tsx
index dab503f316..d4240f0634 100644
--- a/src/app/(marketing)/profile/_components/Polygon.tsx
+++ b/src/app/(marketing)/profile/_components/Polygon.tsx
@@ -13,17 +13,19 @@ export const Polygon = ({ sides, color, className }: PolygonProps) => {
   const points = Array.from({ length: sides }, (_, i) => {
     const x = 50 + radius * Math.cos(i * angleStep)
     const y = 50 + radius * Math.sin(i * angleStep)
-    return `${x},${y}`
+    return [x, y].map((coord) => coord.toFixed(7)).join(",")
   }).join(" ")
 
   return (
     <svg viewBox={"0 0 100 100"} className={className}>
       <polygon
-        className={cn({ "fill-primary stroke-primary": !color })}
+        className={cn("-rotate-90 origin-center", {
+          "fill-primary stroke-primary": !color,
+        })}
         points={points}
         stroke={color}
         fill={color}
-        strokeWidth="22"
+        strokeWidth="24"
         strokeLinejoin="round"
       />
     </svg>
diff --git a/src/app/(marketing)/profile/_components/ProfileHero.tsx b/src/app/(marketing)/profile/_components/ProfileHero.tsx
index 1198a0010e..3243644904 100644
--- a/src/app/(marketing)/profile/_components/ProfileHero.tsx
+++ b/src/app/(marketing)/profile/_components/ProfileHero.tsx
@@ -7,7 +7,7 @@ import { Avatar } from "@/components/ui/Avatar"
 import { Button } from "@/components/ui/Button"
 import { Card } from "@/components/ui/Card"
 import { Pencil } from "@phosphor-icons/react"
-import { MAX_LEVEL, RANKS } from "../[username]/constants"
+import { MAX_LEVEL, MAX_XP, RANKS } from "../[username]/constants"
 import { ProfileOwnerGuard } from "../_components/ProfileOwnerGuard"
 import { useExperiences } from "../_hooks/useExperiences"
 import { useProfile } from "../_hooks/useProfile"
@@ -20,30 +20,35 @@ import { ProfileSocialCounters } from "./ProfileSocialCounters"
 const generateExponentialArray = (
   steps: number,
   sum: number,
-  exponent = 2
+  exponent: number
 ): number[] => {
   const baseSum = (Math.pow(exponent, steps) - 1) / (exponent - 1)
   const scaleFactor = sum / baseSum
   return Array.from({ length: steps }, (_, i) => Math.pow(exponent, i) * scaleFactor)
 }
 
+export const calculateXpProgression = ({
+  experienceCount,
+}: { experienceCount: number }) => {
+  const levels = [...generateExponentialArray(MAX_LEVEL, MAX_XP, 1.03)]
+  const levelIndex = levels.findIndex((level) => experienceCount < level)
+  const levelInRank = Math.floor(MAX_LEVEL / RANKS.length)
+  const level = levels[levelIndex]
+  const rankIndex = Math.max(0, (levelIndex - 1) % levelInRank)
+  const rank = RANKS.at(rankIndex)
+  if (!rank) throw new Error("failed to calculate rank")
+  const nextLevel = levels.at(levelIndex + 1)
+  const progress = nextLevel ? experienceCount / nextLevel || 0 : 0
+  console.log({ progress, rank, levelIndex, level, experienceCount, levels })
+  return { progress, rank, levelIndex }
+}
+
 export const ProfileHero = () => {
   const { data: profile } = useProfile()
   const { data: experienceCount } = useExperiences({ count: true })
-  const rankIndex = Math.max(
-    0,
-    RANKS.findIndex(({ requiredXp }) => experienceCount < requiredXp) - 1
-  )
-  const [rank, nextRank] = RANKS.slice(rankIndex, rankIndex + 2) as [
-    (typeof RANKS)[number],
-    (typeof RANKS)[number] | undefined,
-  ]
-  const levelInRank = Math.floor(MAX_LEVEL / RANKS.length)
-  const levels =
-    nextRank && generateExponentialArray(levelInRank, nextRank.requiredXp)
-  const levelIndex =
-    levels && Math.max(0, levels.findIndex((level) => experienceCount <= level) - 1)
-  const level = rankIndex * levelInRank + (levelIndex || 0)
+  const { rank, progress, levelIndex } = calculateXpProgression({
+    experienceCount,
+  })
 
   if (!profile || !rank) return <ProfileHeroSkeleton />
 
@@ -68,7 +73,7 @@ export const ProfileHero = () => {
         </ProfileOwnerGuard>
         <div className="relative mb-6 flex size-48 items-center justify-center md:size-56">
           <CircularProgressBar
-            progress={nextRank ? experienceCount / levels.at(levelIndex + 1) : 1}
+            progress={progress}
             color={rank.color}
             className="absolute inset-0 size-full"
           />
@@ -84,7 +89,9 @@ export const ProfileHero = () => {
               color={rank.color}
               className="brightness-75"
             />
-            <span className="absolute font-bold font-display text-xl">{level}</span>
+            <span className="absolute font-bold font-display text-xl tracking-tight">
+              {levelIndex}
+            </span>
           </div>
         </div>
         <h1 className="break-all text-center font-extrabold text-3xl leading-tight tracking-tight md:text-4xl">
diff --git a/src/app/(marketing)/profile/_components/RecentActivity/ActivityCard.tsx b/src/app/(marketing)/profile/_components/RecentActivity/ActivityCard.tsx
index 8eed66dc4d..f625bf29b9 100644
--- a/src/app/(marketing)/profile/_components/RecentActivity/ActivityCard.tsx
+++ b/src/app/(marketing)/profile/_components/RecentActivity/ActivityCard.tsx
@@ -1,6 +1,7 @@
 "use client"
 
 import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/Avatar"
+import { Badge } from "@/components/ui/Badge"
 import { Card } from "@/components/ui/Card"
 import { cn } from "@/lib/utils"
 import { Guild } from "@guildxyz/types"
@@ -61,6 +62,11 @@ export const ActivityCard = ({ activity }: { activity: ActivityLogAction }) => {
       <div className="px-5 py-6">
         <h3 className="space-x-1.5 font-bold">
           <ProfileActionLabel activity={activity} />
+          {activity.xpAmount && (
+            <Badge colorScheme="blue" size="sm" className="align-text-top">
+              +{activity.xpAmount} XP
+            </Badge>
+          )}
         </h3>
         <div className="mt-1 flex flex-wrap items-center gap-2">
           <ClientOnly>
diff --git a/src/components/[guild]/activity/constants.ts b/src/components/[guild]/activity/constants.ts
index 09e6218c5d..e78efde1be 100644
--- a/src/components/[guild]/activity/constants.ts
+++ b/src/components/[guild]/activity/constants.ts
@@ -126,6 +126,7 @@ export type ActivityLogAction = {
     rolePlatform?: number
   }
   children?: Array<ActivityLogAction>
+  xpAmount?: number
 }
 
 export const activityLogActionIcons: Record<

From 894ecf2400509b56c50d4c8917fe945c6b70bab9 Mon Sep 17 00:00:00 2001
From: Dominik Stumpf <s.dominik.work@gmail.com>
Date: Tue, 10 Sep 2024 15:44:40 +0200
Subject: [PATCH 05/29] feat: add xp to activity card, refactor xp system

---
 package-lock.json                             |  8 ++--
 package.json                                  |  2 +-
 .../profile/_components/Polygon.tsx           |  2 +-
 .../profile/_components/ProfileHero.tsx       | 37 ++-----------------
 .../_hooks/useExperienceProgression.ts        | 34 +++++++++++++++++
 .../profile/_hooks/useExperiences.tsx         |  5 ++-
 .../requirementDisplayComponents.ts           |  1 +
 src/requirements/requirementFormComponents.ts |  1 +
 src/requirements/types.ts                     |  4 +-
 9 files changed, 52 insertions(+), 42 deletions(-)
 create mode 100644 src/app/(marketing)/profile/_hooks/useExperienceProgression.ts

diff --git a/package-lock.json b/package-lock.json
index 81a74a5162..e72865ce53 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.10.8",
+        "@guildxyz/types": "^1.10.10",
         "@hcaptcha/react-hcaptcha": "^1.4.4",
         "@hookform/resolvers": "^3.3.4",
         "@lexical/code": "^0.12.0",
@@ -5393,9 +5393,9 @@
       }
     },
     "node_modules/@guildxyz/types": {
-      "version": "1.10.8",
-      "resolved": "https://registry.npmjs.org/@guildxyz/types/-/types-1.10.8.tgz",
-      "integrity": "sha512-oTzLxdFQ3UFXHgsx/xjtIMgb5k9maCsdVlvKZjw/nqY3lYU9UK3DmnPEiiahCVple3zrDE41IgqZqR9McH520A==",
+      "version": "1.10.10",
+      "resolved": "https://registry.npmjs.org/@guildxyz/types/-/types-1.10.10.tgz",
+      "integrity": "sha512-xZjqVSExhp1XHQRsTh4O06GmEf7mGqTejJaNdmFNeNqTKXWIE2jHo0cEeOXavLg6k4BFKx5wC9y4+b6VsAMQBg==",
       "dependencies": {
         "zod": "^3.22.4"
       }
diff --git a/package.json b/package.json
index 626231b0ef..721238c501 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.10.8",
+    "@guildxyz/types": "^1.10.10",
     "@hcaptcha/react-hcaptcha": "^1.4.4",
     "@hookform/resolvers": "^3.3.4",
     "@lexical/code": "^0.12.0",
diff --git a/src/app/(marketing)/profile/_components/Polygon.tsx b/src/app/(marketing)/profile/_components/Polygon.tsx
index d4240f0634..a6ccff948c 100644
--- a/src/app/(marketing)/profile/_components/Polygon.tsx
+++ b/src/app/(marketing)/profile/_components/Polygon.tsx
@@ -13,7 +13,7 @@ export const Polygon = ({ sides, color, className }: PolygonProps) => {
   const points = Array.from({ length: sides }, (_, i) => {
     const x = 50 + radius * Math.cos(i * angleStep)
     const y = 50 + radius * Math.sin(i * angleStep)
-    return [x, y].map((coord) => coord.toFixed(7)).join(",")
+    return [x, y].map((coord) => coord.toFixed(5)).join(",")
   }).join(" ")
 
   return (
diff --git a/src/app/(marketing)/profile/_components/ProfileHero.tsx b/src/app/(marketing)/profile/_components/ProfileHero.tsx
index 3243644904..b8871a4034 100644
--- a/src/app/(marketing)/profile/_components/ProfileHero.tsx
+++ b/src/app/(marketing)/profile/_components/ProfileHero.tsx
@@ -7,9 +7,8 @@ import { Avatar } from "@/components/ui/Avatar"
 import { Button } from "@/components/ui/Button"
 import { Card } from "@/components/ui/Card"
 import { Pencil } from "@phosphor-icons/react"
-import { MAX_LEVEL, MAX_XP, RANKS } from "../[username]/constants"
 import { ProfileOwnerGuard } from "../_components/ProfileOwnerGuard"
-import { useExperiences } from "../_hooks/useExperiences"
+import { useExperienceProgression } from "../_hooks/useExperienceProgression"
 import { useProfile } from "../_hooks/useProfile"
 import { CircularProgressBar } from "./CircularProgressBar"
 import { EditProfile } from "./EditProfile/EditProfile"
@@ -17,40 +16,12 @@ import { Polygon } from "./Polygon"
 import { ProfileHeroSkeleton } from "./ProfileSkeleton"
 import { ProfileSocialCounters } from "./ProfileSocialCounters"
 
-const generateExponentialArray = (
-  steps: number,
-  sum: number,
-  exponent: number
-): number[] => {
-  const baseSum = (Math.pow(exponent, steps) - 1) / (exponent - 1)
-  const scaleFactor = sum / baseSum
-  return Array.from({ length: steps }, (_, i) => Math.pow(exponent, i) * scaleFactor)
-}
-
-export const calculateXpProgression = ({
-  experienceCount,
-}: { experienceCount: number }) => {
-  const levels = [...generateExponentialArray(MAX_LEVEL, MAX_XP, 1.03)]
-  const levelIndex = levels.findIndex((level) => experienceCount < level)
-  const levelInRank = Math.floor(MAX_LEVEL / RANKS.length)
-  const level = levels[levelIndex]
-  const rankIndex = Math.max(0, (levelIndex - 1) % levelInRank)
-  const rank = RANKS.at(rankIndex)
-  if (!rank) throw new Error("failed to calculate rank")
-  const nextLevel = levels.at(levelIndex + 1)
-  const progress = nextLevel ? experienceCount / nextLevel || 0 : 0
-  console.log({ progress, rank, levelIndex, level, experienceCount, levels })
-  return { progress, rank, levelIndex }
-}
-
 export const ProfileHero = () => {
   const { data: profile } = useProfile()
-  const { data: experienceCount } = useExperiences({ count: true })
-  const { rank, progress, levelIndex } = calculateXpProgression({
-    experienceCount,
-  })
+  const progression = useExperienceProgression()
 
-  if (!profile || !rank) return <ProfileHeroSkeleton />
+  if (!profile || !progression) return <ProfileHeroSkeleton />
+  const { rank, levelIndex, progress } = progression
 
   return (
     <LayoutContainer>
diff --git a/src/app/(marketing)/profile/_hooks/useExperienceProgression.ts b/src/app/(marketing)/profile/_hooks/useExperienceProgression.ts
new file mode 100644
index 0000000000..c89724f79f
--- /dev/null
+++ b/src/app/(marketing)/profile/_hooks/useExperienceProgression.ts
@@ -0,0 +1,34 @@
+import { MAX_LEVEL, MAX_XP, RANKS } from "../[username]/constants"
+import { useExperiences } from "../_hooks/useExperiences"
+
+const generateExponentialArray = (
+  steps: number,
+  sum: number,
+  exponent: number
+): number[] => {
+  const baseSum = (Math.pow(exponent, steps) - 1) / (exponent - 1)
+  const scaleFactor = sum / baseSum
+  return Array.from({ length: steps }, (_, i) => Math.pow(exponent, i) * scaleFactor)
+}
+
+export const calculateXpProgression = ({
+  experienceCount,
+}: { experienceCount: number }) => {
+  const levels = [...generateExponentialArray(MAX_LEVEL, MAX_XP, 1.03)]
+  const levelIndex = Math.max(
+    0,
+    levels.findIndex((level) => experienceCount < level)
+  )
+  const levelInRank = Math.floor(MAX_LEVEL / RANKS.length)
+  const rankIndex = Math.max(0, (levelIndex - 1) % levelInRank)
+  const rank = RANKS.at(rankIndex)
+  if (!rank) throw new Error("failed to calculate rank")
+  const nextLevel = levels.at(levelIndex + 1)
+  const progress = nextLevel ? experienceCount / nextLevel || 0 : 0
+  return { progress, rank, levelIndex }
+}
+
+export const useExperienceProgression = () => {
+  const { data: experienceCount } = useExperiences(true)
+  return experienceCount && calculateXpProgression({ experienceCount })
+}
diff --git a/src/app/(marketing)/profile/_hooks/useExperiences.tsx b/src/app/(marketing)/profile/_hooks/useExperiences.tsx
index e081d9e5b2..cad837231c 100644
--- a/src/app/(marketing)/profile/_hooks/useExperiences.tsx
+++ b/src/app/(marketing)/profile/_hooks/useExperiences.tsx
@@ -1,9 +1,10 @@
+import { Schemas } from "@guildxyz/types"
 import useSWRImmutable from "swr/immutable"
 import { useProfile } from "./useProfile"
 
-export const useExperiences = ({ count = false }: { count?: boolean }) => {
+export const useExperiences = <T extends boolean>(count?: T) => {
   const { data: profile } = useProfile()
-  return useSWRImmutable(
+  return useSWRImmutable<T extends true ? number : Schemas["Experience"][]>(
     profile
       ? [`/v2/profiles/${profile.username}/experiences`, count && `count=${count}`]
           .filter(Boolean)
diff --git a/src/requirements/requirementDisplayComponents.ts b/src/requirements/requirementDisplayComponents.ts
index 9a6f2a952e..cced28d562 100644
--- a/src/requirements/requirementDisplayComponents.ts
+++ b/src/requirements/requirementDisplayComponents.ts
@@ -374,4 +374,5 @@ export const REQUIREMENT_DISPLAY_COMPONENTS = {
   PARALLEL_TRAIT: dynamic<RequirementProps>(
     () => import("requirements/Parallel/ParallelRequirement")
   ),
+  // @ts-ignore: TODO: migrate to backend types to resolve error
 } as const satisfies Record<RequirementType, ComponentType<RequirementProps>>
diff --git a/src/requirements/requirementFormComponents.ts b/src/requirements/requirementFormComponents.ts
index ca398b81fb..da16f76f53 100644
--- a/src/requirements/requirementFormComponents.ts
+++ b/src/requirements/requirementFormComponents.ts
@@ -362,6 +362,7 @@ export const REQUIREMENT_FORM_COMPONENTS = {
   PARALLEL_TRAIT: dynamic<RequirementFormProps>(
     () => import("requirements/Parallel/ParallelForm")
   ),
+  // @ts-ignore: TODO: migrate to backend types to resolve error
 } as const satisfies Record<
   RequirementType,
   ReturnType<typeof dynamic<RequirementFormProps>> | null
diff --git a/src/requirements/types.ts b/src/requirements/types.ts
index 18d1d07bfa..742372869f 100644
--- a/src/requirements/types.ts
+++ b/src/requirements/types.ts
@@ -3,7 +3,9 @@ import { Icon } from "@phosphor-icons/react"
 import { UseControllerProps } from "react-hook-form"
 import { Requirement } from "types"
 
-export type RequirementType = Schemas["Requirement"]["type"]
+export type RequirementType =
+  | Schemas["Requirement"]["type"]
+  | "WORLD_ID_VERIFICATION"
 
 export type RequirementFormProps = {
   baseFieldPath: string

From 09576e672021b470d5b5e3010ac24c91fcea4829 Mon Sep 17 00:00:00 2001
From: Dominik Stumpf <s.dominik.work@gmail.com>
Date: Tue, 10 Sep 2024 15:58:31 +0200
Subject: [PATCH 06/29] fix: cache experiences count on server

---
 src/app/(marketing)/profile/[username]/page.tsx | 9 ++++++---
 1 file changed, 6 insertions(+), 3 deletions(-)

diff --git a/src/app/(marketing)/profile/[username]/page.tsx b/src/app/(marketing)/profile/[username]/page.tsx
index f879d86c94..e6d4e67207 100644
--- a/src/app/(marketing)/profile/[username]/page.tsx
+++ b/src/app/(marketing)/profile/[username]/page.tsx
@@ -159,12 +159,12 @@ const fetchPublicProfileData = async ({
   const guildsZipped = guildRequests.map(({ pathname }, i) => [pathname, guilds[i]])
   const rolesZipped = roleRequests.map(({ pathname }, i) => [pathname, roles[i]])
   const experiencesRequest = new URL(`/v2/profiles/${username}/experiences`, api)
-  const experiences = await ssrFetcher<any>(experiencesRequest)
+  const experiences = await ssrFetcher<Schemas["Experience"][]>(experiencesRequest)
   const experienceCountRequest = new URL(
     `/v2/profiles/${username}/experiences?count=true`,
     api
   )
-  const experienceCount = await ssrFetcher<any>(experiencesRequest)
+  const experienceCount = await ssrFetcher<number>(experienceCountRequest)
 
   return {
     profile,
@@ -176,7 +176,10 @@ const fetchPublicProfileData = async ({
         [neynarRequest?.href, fcFollowers],
         [referredUsersRequest.pathname, referredUsers],
         [experiencesRequest.pathname, experiences],
-        [experienceCountRequest.pathname, experienceCount],
+        [
+          experienceCountRequest.pathname + experienceCountRequest.search,
+          experienceCount,
+        ],
         ...collectionsZipped,
         ...guildsZipped,
         ...rolesZipped,

From e84b62e619df8fa6bb5bf2676448b66d8bff7b99 Mon Sep 17 00:00:00 2001
From: Dominik Stumpf <s.dominik.work@gmail.com>
Date: Tue, 10 Sep 2024 18:25:59 +0200
Subject: [PATCH 07/29] feat: add xp to Account and AccountModal

---
 .../profile/_components/ProfileHero.tsx       |  4 +-
 .../_hooks/useExperienceProgression.ts        | 14 +++---
 .../profile/_hooks/useExperiences.tsx         |  7 ++-
 .../(marketing)/profile/_hooks/useProfile.tsx |  7 ++-
 src/v2/components/Account/Account.tsx         | 43 +++++++++++++++----
 .../components/AccountModal/AccountModal.tsx  | 42 +++++++++++++++---
 .../components}/CircularProgressBar.tsx       |  0
 .../_components => v2/components}/Polygon.tsx |  0
 8 files changed, 91 insertions(+), 26 deletions(-)
 rename src/{app/(marketing)/profile/_components => v2/components}/CircularProgressBar.tsx (100%)
 rename src/{app/(marketing)/profile/_components => v2/components}/Polygon.tsx (100%)

diff --git a/src/app/(marketing)/profile/_components/ProfileHero.tsx b/src/app/(marketing)/profile/_components/ProfileHero.tsx
index b8871a4034..5105941e9b 100644
--- a/src/app/(marketing)/profile/_components/ProfileHero.tsx
+++ b/src/app/(marketing)/profile/_components/ProfileHero.tsx
@@ -1,7 +1,9 @@
 "use client"
 
 import { CheckMark } from "@/components/CheckMark"
+import { CircularProgressBar } from "@/components/CircularProgressBar"
 import { LayoutContainer } from "@/components/Layout"
+import { Polygon } from "@/components/Polygon"
 import { ProfileAvatar } from "@/components/ProfileAvatar"
 import { Avatar } from "@/components/ui/Avatar"
 import { Button } from "@/components/ui/Button"
@@ -10,9 +12,7 @@ import { Pencil } from "@phosphor-icons/react"
 import { ProfileOwnerGuard } from "../_components/ProfileOwnerGuard"
 import { useExperienceProgression } from "../_hooks/useExperienceProgression"
 import { useProfile } from "../_hooks/useProfile"
-import { CircularProgressBar } from "./CircularProgressBar"
 import { EditProfile } from "./EditProfile/EditProfile"
-import { Polygon } from "./Polygon"
 import { ProfileHeroSkeleton } from "./ProfileSkeleton"
 import { ProfileSocialCounters } from "./ProfileSocialCounters"
 
diff --git a/src/app/(marketing)/profile/_hooks/useExperienceProgression.ts b/src/app/(marketing)/profile/_hooks/useExperienceProgression.ts
index c89724f79f..c507ccf90e 100644
--- a/src/app/(marketing)/profile/_hooks/useExperienceProgression.ts
+++ b/src/app/(marketing)/profile/_hooks/useExperienceProgression.ts
@@ -14,21 +14,25 @@ const generateExponentialArray = (
 export const calculateXpProgression = ({
   experienceCount,
 }: { experienceCount: number }) => {
+  experienceCount = Math.min(experienceCount, MAX_XP)
   const levels = [...generateExponentialArray(MAX_LEVEL, MAX_XP, 1.03)]
   const levelIndex = Math.max(
     0,
     levels.findIndex((level) => experienceCount < level)
   )
+  const level = levels.at(levelIndex)
   const levelInRank = Math.floor(MAX_LEVEL / RANKS.length)
   const rankIndex = Math.max(0, (levelIndex - 1) % levelInRank)
   const rank = RANKS.at(rankIndex)
-  if (!rank) throw new Error("failed to calculate rank")
+  if (!rank || !level) throw new Error("failed to calculate rank")
   const nextLevel = levels.at(levelIndex + 1)
   const progress = nextLevel ? experienceCount / nextLevel || 0 : 0
-  return { progress, rank, levelIndex }
+  return { progress, rank, levelIndex, experienceCount, level }
 }
 
-export const useExperienceProgression = () => {
-  const { data: experienceCount } = useExperiences(true)
-  return experienceCount && calculateXpProgression({ experienceCount })
+export const useExperienceProgression = (showOwnProfile?: boolean) => {
+  const { data: experienceCount } = useExperiences({ showOwnProfile, count: true })
+  return typeof experienceCount === "number"
+    ? calculateXpProgression({ experienceCount })
+    : undefined
 }
diff --git a/src/app/(marketing)/profile/_hooks/useExperiences.tsx b/src/app/(marketing)/profile/_hooks/useExperiences.tsx
index cad837231c..ad4d0856f4 100644
--- a/src/app/(marketing)/profile/_hooks/useExperiences.tsx
+++ b/src/app/(marketing)/profile/_hooks/useExperiences.tsx
@@ -2,8 +2,11 @@ import { Schemas } from "@guildxyz/types"
 import useSWRImmutable from "swr/immutable"
 import { useProfile } from "./useProfile"
 
-export const useExperiences = <T extends boolean>(count?: T) => {
-  const { data: profile } = useProfile()
+export const useExperiences = <T extends boolean>({
+  count,
+  showOwnProfile,
+}: { count?: T; showOwnProfile?: boolean }) => {
+  const { data: profile } = useProfile(showOwnProfile)
   return useSWRImmutable<T extends true ? number : Schemas["Experience"][]>(
     profile
       ? [`/v2/profiles/${profile.username}/experiences`, count && `count=${count}`]
diff --git a/src/app/(marketing)/profile/_hooks/useProfile.tsx b/src/app/(marketing)/profile/_hooks/useProfile.tsx
index 5b1634e3fc..a4146c1be6 100644
--- a/src/app/(marketing)/profile/_hooks/useProfile.tsx
+++ b/src/app/(marketing)/profile/_hooks/useProfile.tsx
@@ -1,10 +1,13 @@
 import { Schemas } from "@guildxyz/types"
+import useUser from "components/[guild]/hooks/useUser"
 import { useParams } from "next/navigation"
 import useSWRImmutable from "swr/immutable"
 
-export const useProfile = () => {
+export const useProfile = (showOwnProfile?: boolean) => {
   const params = useParams<{ username: string }>()
+  const user = useUser()
+  const username = showOwnProfile ? user.guildProfile?.username : params?.username
   return useSWRImmutable<Schemas["Profile"]>(
-    params?.username ? `/v2/profiles/${params.username}` : null
+    username ? `/v2/profiles/${username}` : null
   )
 }
diff --git a/src/v2/components/Account/Account.tsx b/src/v2/components/Account/Account.tsx
index e41649c44f..172e072fa5 100644
--- a/src/v2/components/Account/Account.tsx
+++ b/src/v2/components/Account/Account.tsx
@@ -1,7 +1,10 @@
 "use client"
 
+import { CircularProgressBar } from "@/components/CircularProgressBar"
+import { Polygon } from "@/components/Polygon"
 import { useDisclosure } from "@/hooks/useDisclosure"
 import { cn } from "@/lib/utils"
+import { useExperienceProgression } from "@app/(marketing)/profile/_hooks/useExperienceProgression"
 import { Bell } from "@phosphor-icons/react"
 import { SignIn } from "@phosphor-icons/react/dist/ssr"
 import useUser from "components/[guild]/hooks/useUser"
@@ -30,6 +33,7 @@ export const Account = () => {
   const { addresses, guildProfile, isLoading } = useUser()
   const linkedAddressesCount = (addresses?.length ?? 1) - 1
   const { captureEvent } = usePostHogContext()
+  const progression = useExperienceProgression(true)
 
   if (isLoading || isWeb3Connected === null) {
     return (
@@ -80,21 +84,44 @@ export const Account = () => {
         className="rounded-r-2xl rounded-l-none"
       >
         {guildProfile ? (
-          <div className="flex items-center gap-3 pr-1">
-            <Avatar size="sm">
-              <ProfileAvatar
-                username={guildProfile.username}
-                profileImageUrl={guildProfile.profileImageUrl}
-              />
-            </Avatar>
+          <div className="flex items-center gap-2">
+            <div className="relative p-1">
+              {progression && (
+                <CircularProgressBar
+                  className="absolute inset-0 size-full"
+                  progress={progression.progress}
+                  color={progression.rank.color}
+                />
+              )}
+              <Avatar size="sm">
+                <ProfileAvatar
+                  username={guildProfile.username}
+                  profileImageUrl={guildProfile.profileImageUrl}
+                />
+              </Avatar>
+            </div>
             <div className="flex flex-col items-start">
               <div className="max-w-24 truncate font-bold text-sm leading-tight">
                 {guildProfile.name || guildProfile.username}
               </div>
               <div className="text-muted-foreground text-xs">
-                @{guildProfile.username}
+                {progression
+                  ? `${progression.experienceCount} / ${Math.ceil(progression.level)} XP`
+                  : `@${guildProfile.username}`}
               </div>
             </div>
+            {progression && (
+              <div className="flex size-7 items-center justify-center">
+                <Polygon
+                  sides={progression.rank.polygonCount}
+                  color={progression.rank.color}
+                  className="brightness-75"
+                />
+                <span className="absolute font-display font-extrabold text-xs">
+                  {progression.levelIndex}
+                </span>
+              </div>
+            )}
           </div>
         ) : (
           <div className="flex items-center gap-3">
diff --git a/src/v2/components/Account/components/AccountModal/AccountModal.tsx b/src/v2/components/Account/components/AccountModal/AccountModal.tsx
index 5a3a04fa3c..95997f9a01 100644
--- a/src/v2/components/Account/components/AccountModal/AccountModal.tsx
+++ b/src/v2/components/Account/components/AccountModal/AccountModal.tsx
@@ -1,6 +1,8 @@
 import { CheckMark } from "@/components/CheckMark"
+import { CircularProgressBar } from "@/components/CircularProgressBar"
 import { CopyableAddress } from "@/components/CopyableAddress"
 import { GuildAvatar } from "@/components/GuildAvatar"
+import { Polygon } from "@/components/Polygon"
 import { ProfileAvatar } from "@/components/ProfileAvatar"
 import { accountModalAtom } from "@/components/Providers/atoms"
 import useConnectorNameAndIcon from "@/components/Web3ConnectionManager/hooks/useConnectorNameAndIcon"
@@ -26,6 +28,7 @@ import {
 import { Separator } from "@/components/ui/Separator"
 import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/Tooltip"
 import { useUserPublic } from "@/hooks/useUserPublic"
+import { useExperienceProgression } from "@app/(marketing)/profile/_hooks/useExperienceProgression"
 import { ArrowRight, DotsThreeVertical } from "@phosphor-icons/react"
 import { SignOut } from "@phosphor-icons/react/dist/ssr"
 import useUser from "components/[guild]/hooks/useUser"
@@ -48,6 +51,7 @@ const AccountModal = () => {
 
   const { address: evmAddress, chainId } = useAccount()
   const domain = useResolveAddress(evmAddress)
+  const progression = useExperienceProgression(true)
 
   const handleLogout = () => {
     const keysToRemove = Object.keys({ ...window.localStorage }).filter((key) =>
@@ -81,12 +85,34 @@ const AccountModal = () => {
             <>
               {guildProfile ? (
                 <div className="mb-8 flex gap-3">
-                  <Avatar size="2xl" className="mr-2 self-center border-2">
-                    <ProfileAvatar
-                      username={guildProfile.username}
-                      profileImageUrl={guildProfile.profileImageUrl}
-                    />
-                  </Avatar>
+                  {progression && (
+                    <div className="relative mr-2 flex aspect-square items-center justify-center">
+                      <CircularProgressBar
+                        progress={progression.progress}
+                        color={progression.rank.color}
+                        className="absolute inset-0 size-full"
+                      />
+                      <Avatar
+                        size="2xl"
+                        className="m-2 flex items-center justify-center rounded-full border-2"
+                      >
+                        <ProfileAvatar
+                          username={guildProfile.username}
+                          profileImageUrl={guildProfile.profileImageUrl}
+                        />
+                      </Avatar>
+                      <div className="absolute right-0 bottom-0 flex size-8 items-center justify-center">
+                        <Polygon
+                          sides={progression.rank.polygonCount}
+                          color={progression.rank.color}
+                          className="brightness-75"
+                        />
+                        <span className="absolute font-bold font-display text-sm">
+                          {progression.levelIndex}
+                        </span>
+                      </div>
+                    </div>
+                  )}
                   <div className="flex w-full flex-col">
                     <h3 className=" flex items-center font-bold">
                       <span className="max-w-52 truncate">
@@ -95,7 +121,9 @@ const AccountModal = () => {
                       <CheckMark className="ml-0.5 inline-block fill-yellow-500" />
                     </h3>
                     <div className="text-muted-foreground text-sm">
-                      @{guildProfile.username}
+                      {progression
+                        ? `${progression.experienceCount} / ${Math.ceil(progression.level)} XP`
+                        : `@${guildProfile.username}`}
                     </div>
                     <div className="mt-2 flex gap-1.5">
                       <Anchor
diff --git a/src/app/(marketing)/profile/_components/CircularProgressBar.tsx b/src/v2/components/CircularProgressBar.tsx
similarity index 100%
rename from src/app/(marketing)/profile/_components/CircularProgressBar.tsx
rename to src/v2/components/CircularProgressBar.tsx
diff --git a/src/app/(marketing)/profile/_components/Polygon.tsx b/src/v2/components/Polygon.tsx
similarity index 100%
rename from src/app/(marketing)/profile/_components/Polygon.tsx
rename to src/v2/components/Polygon.tsx

From 7e2d9db7cc744d94202be72a3b7253aa420cb0d2 Mon Sep 17 00:00:00 2001
From: Dominik Stumpf <s.dominik.work@gmail.com>
Date: Tue, 10 Sep 2024 19:19:45 +0200
Subject: [PATCH 08/29] fix(a11y): add dialog description to modal

---
 .../Account/components/AccountModal/AccountModal.tsx          | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/v2/components/Account/components/AccountModal/AccountModal.tsx b/src/v2/components/Account/components/AccountModal/AccountModal.tsx
index 95997f9a01..95b82de599 100644
--- a/src/v2/components/Account/components/AccountModal/AccountModal.tsx
+++ b/src/v2/components/Account/components/AccountModal/AccountModal.tsx
@@ -15,6 +15,7 @@ import {
   DialogBody,
   DialogCloseButton,
   DialogContent,
+  DialogDescription,
   DialogHeader,
   DialogTitle,
 } from "@/components/ui/Dialog"
@@ -63,7 +64,7 @@ const AccountModal = () => {
     })
 
     deleteKeyPairFromIdb(id)
-      ?.catch(() => {})
+      ?.catch(() => { })
       .finally(() => {
         setIsOpen(false)
         disconnect()
@@ -78,6 +79,7 @@ const AccountModal = () => {
 
         <DialogHeader>
           <DialogTitle>Account</DialogTitle>
+          <DialogDescription className="sr-only" />
         </DialogHeader>
 
         <DialogBody scroll>

From 2b1618900c795d344b79c88ae781b770d76be23e Mon Sep 17 00:00:00 2001
From: valid <valid@zgen.hu>
Date: Tue, 10 Sep 2024 20:20:30 +0200
Subject: [PATCH 09/29] UI(ActivityCard): move XP to the right in gold

---
 .../RecentActivity/ActivityCard.tsx           | 36 ++++++++++---------
 src/app/globals.css                           |  2 +-
 src/v2/components/ui/Badge.tsx                |  1 +
 3 files changed, 22 insertions(+), 17 deletions(-)

diff --git a/src/app/(marketing)/profile/_components/RecentActivity/ActivityCard.tsx b/src/app/(marketing)/profile/_components/RecentActivity/ActivityCard.tsx
index f625bf29b9..239ed0ef31 100644
--- a/src/app/(marketing)/profile/_components/RecentActivity/ActivityCard.tsx
+++ b/src/app/(marketing)/profile/_components/RecentActivity/ActivityCard.tsx
@@ -59,23 +59,27 @@ export const ActivityCard = ({ activity }: { activity: ActivityLogAction }) => {
           </div>
         </div>
       )}
-      <div className="px-5 py-6">
-        <h3 className="space-x-1.5 font-bold">
-          <ProfileActionLabel activity={activity} />
-          {activity.xpAmount && (
-            <Badge colorScheme="blue" size="sm" className="align-text-top">
-              +{activity.xpAmount} XP
-            </Badge>
-          )}
-        </h3>
-        <div className="mt-1 flex flex-wrap items-center gap-2">
-          <ClientOnly>
-            <p className="text-muted-foreground">
-              {formatRelativeTimeFromNow(Date.now() - parseInt(activity.timestamp))}{" "}
-              ago
-            </p>
-          </ClientOnly>
+      <div className="flex flex-1 items-center justify-between gap-2 px-5 py-6">
+        <div>
+          <h3 className="space-x-1.5 font-bold">
+            <ProfileActionLabel activity={activity} />
+          </h3>
+          <div className="mt-1 flex flex-wrap items-center gap-3">
+            <ClientOnly>
+              <p className="text-muted-foreground">
+                {formatRelativeTimeFromNow(
+                  Date.now() - parseInt(activity.timestamp)
+                )}{" "}
+                ago
+              </p>
+            </ClientOnly>
+          </div>
         </div>
+        {activity.xpAmount && (
+          <Badge colorScheme="yellow" className="align-text-top font-bold">
+            +{activity.xpAmount} XP
+          </Badge>
+        )}
       </div>
     </Card>
   )
diff --git a/src/app/globals.css b/src/app/globals.css
index de1904e8dd..49ea1b38f0 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -129,7 +129,7 @@
     --gather_town: 232, 66%, 55%;
     --cyan: 190, 100%, 42%;
     --blue: 217, 91%, 60%;
-    --gold: 35, 39%, 60%;
+    --gold: 40 67% 51%;
     --gray: 240, 4%, 46%;
     
     --sm: 640px;
diff --git a/src/v2/components/ui/Badge.tsx b/src/v2/components/ui/Badge.tsx
index 47fee88b80..2818a1391e 100644
--- a/src/v2/components/ui/Badge.tsx
+++ b/src/v2/components/ui/Badge.tsx
@@ -13,6 +13,7 @@ const badgeVariants = cva(
       colorScheme: {
         gray: "[--badge-bg:var(--secondary-subtle)] [--badge-color:var(--secondary-subtle-foreground)]",
         blue: "[--badge-bg:var(--info-subtle)] [--badge-color:var(--info-subtle-foreground)]",
+        yellow: "[--badge-bg:var(--gold)] [--badge-color:var(--gold)]",
       },
       size: {
         sm: "text-xs h-5",

From 8f0f3b2469e867acb24bf9557a7154ef49fcfe05 Mon Sep 17 00:00:00 2001
From: Dominik Stumpf <s.dominik.work@gmail.com>
Date: Wed, 11 Sep 2024 00:48:03 +0200
Subject: [PATCH 10/29] feat: add activity chart

---
 .../profile/_components/ActivityChart.tsx     | 68 +++++++++++++++++++
 .../profile/_components/Profile.tsx           | 61 ++++++++++++++++-
 .../profile/_hooks/useExperiences.tsx         |  2 +-
 3 files changed, 129 insertions(+), 2 deletions(-)
 create mode 100644 src/app/(marketing)/profile/_components/ActivityChart.tsx

diff --git a/src/app/(marketing)/profile/_components/ActivityChart.tsx b/src/app/(marketing)/profile/_components/ActivityChart.tsx
new file mode 100644
index 0000000000..f00a9aedb3
--- /dev/null
+++ b/src/app/(marketing)/profile/_components/ActivityChart.tsx
@@ -0,0 +1,68 @@
+import { Skeleton } from "@/components/ui/Skeleton"
+import { Schemas } from "@guildxyz/types"
+import { Group } from "@visx/group"
+import { scaleBand, scaleLinear } from "@visx/scale"
+import { Bar } from "@visx/shape"
+import { useMemo } from "react"
+import { useExperiences } from "../_hooks/useExperiences"
+
+const verticalMargin = 0
+
+const getX = (xp: Schemas["Experience"]) => xp.id.toString()
+const getY = (xp: Schemas["Experience"]) => xp.amount
+
+export type BarsProps = {
+  width: number
+  height: number
+}
+
+export const ActivityChart = ({ width, height }: BarsProps) => {
+  const { data } = useExperiences({ count: false })
+  if (!data) return <Skeleton style={{ width, height }} />
+  const xMax = width
+  const yMax = height - verticalMargin
+  const xScale = useMemo(
+    () =>
+      scaleBand<string>({
+        range: [0, xMax],
+        round: true,
+        domain: data.map(getX),
+        padding: 0.4,
+      }),
+    [xMax]
+  )
+  const yScale = useMemo(
+    () =>
+      scaleLinear<number>({
+        range: [yMax, 0],
+        round: true,
+        domain: [0, Math.max(...data.map(getY))],
+      }),
+    [yMax]
+  )
+
+  return width < 10 ? null : (
+    <svg width={width} height={height}>
+      <Group top={verticalMargin / 2}>
+        {data.map((xp) => {
+          const x = getX(xp)
+          const barWidth = xScale.bandwidth()
+          const barHeight = yMax - (yScale(getY(xp)) ?? 0)
+          const barX = xScale(x)
+          const barY = yMax - barHeight
+          return (
+            <Bar
+              ry={3}
+              key={xp.id}
+              x={barX}
+              y={barY}
+              width={barWidth}
+              height={barHeight}
+              fill="hsl(var(--primary))"
+            />
+          )
+        })}
+      </Group>
+    </svg>
+  )
+}
diff --git a/src/app/(marketing)/profile/_components/Profile.tsx b/src/app/(marketing)/profile/_components/Profile.tsx
index 1aa2edd213..eed61308fe 100644
--- a/src/app/(marketing)/profile/_components/Profile.tsx
+++ b/src/app/(marketing)/profile/_components/Profile.tsx
@@ -1,15 +1,21 @@
 "use client"
+import { Polygon } from "@/components/Polygon"
 import { useWeb3ConnectionManager } from "@/components/Web3ConnectionManager/hooks/useWeb3ConnectionManager"
+import { Badge } from "@/components/ui/Badge"
 import { Card } from "@/components/ui/Card"
 import { cn } from "@/lib/utils"
 import { Info } from "@phosphor-icons/react"
+import { Progress, ProgressIndicator } from "@radix-ui/react-progress"
+import ParentSize from "@visx/responsive/lib/components/ParentSize"
 import { PropsWithChildren } from "react"
 import { ContributionCard } from "../_components/ContributionCard"
 import { EditContributions } from "../_components/EditContributions"
 import { ProfileOwnerGuard } from "../_components/ProfileOwnerGuard"
 import { useContributions } from "../_hooks/useContributions"
+import { useExperienceProgression } from "../_hooks/useExperienceProgression"
 import { useProfile } from "../_hooks/useProfile"
 import { useReferredUsers } from "../_hooks/useReferredUsers"
+import { ActivityChart } from "./ActivityChart"
 import { ProfileMainSkeleton } from "./ProfileSkeleton"
 import { RecentActivity } from "./RecentActivity/RecentActivity"
 import RecentActivityFallback from "./RecentActivity/RecentActivityFallback"
@@ -19,11 +25,64 @@ export const Profile = () => {
   const { data: contributions } = useContributions()
   const { data: referredUsers } = useReferredUsers()
   const { isWeb3Connected } = useWeb3ConnectionManager()
+  const xp = useExperienceProgression()
 
-  if (!profile || !contributions || !referredUsers) return <ProfileMainSkeleton />
+  if (!profile || !contributions || !referredUsers || !xp)
+    return <ProfileMainSkeleton />
 
   return (
     <>
+      <div className="mb-16 flex flex-col gap-4">
+        <SectionTitle>Experience</SectionTitle>
+        <div className="grid grid-cols-1 gap-3 md:grid-cols-2">
+          <Card className="flex gap-4 p-6">
+            <Polygon
+              color={xp.rank.color}
+              sides={xp.rank.polygonCount}
+              className="size-12"
+            />
+            {/*<LevelBadge
+                level={level}
+                className="row-span-3 size-14 self-start justify-self-center"
+              />*/}
+            <div className="flex w-full flex-col gap-2">
+              <div className="flex flex-col justify-between gap-2 sm:flex-row">
+                <h3 className="font-bold capitalize">{xp.rank.title}</h3>
+                <p className="text-muted-foreground">
+                  {`${xp.experienceCount} / ${Math.ceil(xp.level)} XP`}
+                </p>
+              </div>
+              <Progress
+                className={cn(
+                  "relative h-3 w-full overflow-hidden rounded-full bg-secondary"
+                )}
+              >
+                <ProgressIndicator
+                  className="h-full w-full flex-1 rounded-r-full transition-all"
+                  style={{
+                    background: xp.rank.color,
+                    transform: `translateX(-${(1 - (xp.progress || 0)) * 100}%)`,
+                  }}
+                />
+              </Progress>
+              <Progress value={xp.progress * 100} color={xp.rank.color} />
+              {/*<p className="text-muted-foreground">
+                This is a description that perfectly matches the 80 character
+                description limit.
+              </p>*/}
+            </div>
+          </Card>
+          <Card className="space-y-4 p-6">
+            <div className="flex flex-col items-start justify-between gap-2 sm:flex-row">
+              <h3 className="font-bold">Engagement this month</h3>
+              <Badge colorScheme="blue">+72 XP</Badge>
+            </div>
+            <ParentSize>
+              {({ width }) => <ActivityChart width={width} height={40} />}
+            </ParentSize>
+          </Card>
+        </div>
+      </div>
       <div className="mb-3 flex items-center justify-between" data-theme="dark">
         <SectionTitle>Top contributions</SectionTitle>
         <ProfileOwnerGuard>
diff --git a/src/app/(marketing)/profile/_hooks/useExperiences.tsx b/src/app/(marketing)/profile/_hooks/useExperiences.tsx
index ad4d0856f4..eb7677791f 100644
--- a/src/app/(marketing)/profile/_hooks/useExperiences.tsx
+++ b/src/app/(marketing)/profile/_hooks/useExperiences.tsx
@@ -5,7 +5,7 @@ import { useProfile } from "./useProfile"
 export const useExperiences = <T extends boolean>({
   count,
   showOwnProfile,
-}: { count?: T; showOwnProfile?: boolean }) => {
+}: { count: T; showOwnProfile?: boolean }) => {
   const { data: profile } = useProfile(showOwnProfile)
   return useSWRImmutable<T extends true ? number : Schemas["Experience"][]>(
     profile

From 92df919c0047d424b7f3385222de8f999ad0552c Mon Sep 17 00:00:00 2001
From: Dominik Stumpf <s.dominik.work@gmail.com>
Date: Wed, 11 Sep 2024 01:10:19 +0200
Subject: [PATCH 11/29] feat: add tooltip to chart

---
 .../profile/_components/ActivityChart.tsx     | 101 ++++++++++++++----
 .../profile/_components/Profile.tsx           |   4 +-
 2 files changed, 80 insertions(+), 25 deletions(-)

diff --git a/src/app/(marketing)/profile/_components/ActivityChart.tsx b/src/app/(marketing)/profile/_components/ActivityChart.tsx
index f00a9aedb3..c4ce3d6411 100644
--- a/src/app/(marketing)/profile/_components/ActivityChart.tsx
+++ b/src/app/(marketing)/profile/_components/ActivityChart.tsx
@@ -1,11 +1,21 @@
 import { Skeleton } from "@/components/ui/Skeleton"
 import { Schemas } from "@guildxyz/types"
+import { localPoint } from "@visx/event"
 import { Group } from "@visx/group"
 import { scaleBand, scaleLinear } from "@visx/scale"
 import { Bar } from "@visx/shape"
+import { defaultStyles, useTooltip, useTooltipInPortal } from "@visx/tooltip"
 import { useMemo } from "react"
 import { useExperiences } from "../_hooks/useExperiences"
 
+type TooltipData = Schemas["Experience"]
+const tooltipStyles = {
+  ...defaultStyles,
+  minWidth: 60,
+  backgroundColor: "rgba(0,0,0,0.9)",
+  color: "white",
+}
+
 const verticalMargin = 0
 
 const getX = (xp: Schemas["Experience"]) => xp.id.toString()
@@ -16,6 +26,7 @@ export type BarsProps = {
   height: number
 }
 
+let tooltipTimeout: number
 export const ActivityChart = ({ width, height }: BarsProps) => {
   const { data } = useExperiences({ count: false })
   if (!data) return <Skeleton style={{ width, height }} />
@@ -41,28 +52,74 @@ export const ActivityChart = ({ width, height }: BarsProps) => {
     [yMax]
   )
 
+  const {
+    tooltipOpen,
+    tooltipLeft,
+    tooltipTop,
+    tooltipData,
+    hideTooltip,
+    showTooltip,
+  } = useTooltip<TooltipData>()
+
+  const { containerRef, TooltipInPortal } = useTooltipInPortal({
+    // TooltipInPortal is rendered in a separate child of <body /> and positioned
+    // with page coordinates which should be updated on scroll. consider using
+    // Tooltip or TooltipWithBounds if you don't need to render inside a Portal
+    scroll: true,
+  })
+
   return width < 10 ? null : (
-    <svg width={width} height={height}>
-      <Group top={verticalMargin / 2}>
-        {data.map((xp) => {
-          const x = getX(xp)
-          const barWidth = xScale.bandwidth()
-          const barHeight = yMax - (yScale(getY(xp)) ?? 0)
-          const barX = xScale(x)
-          const barY = yMax - barHeight
-          return (
-            <Bar
-              ry={3}
-              key={xp.id}
-              x={barX}
-              y={barY}
-              width={barWidth}
-              height={barHeight}
-              fill="hsl(var(--primary))"
-            />
-          )
-        })}
-      </Group>
-    </svg>
+    <div className="relative">
+      <svg width={width} height={height} ref={containerRef}>
+        <Group top={verticalMargin / 2}>
+          {data.map((xp) => {
+            const x = getX(xp)
+            const barWidth = xScale.bandwidth()
+            const barHeight = yMax - (yScale(getY(xp)) ?? 0)
+            const barX = xScale(x)
+            const barY = yMax - barHeight
+            return (
+              <Bar
+                ry={3}
+                key={xp.id}
+                x={barX}
+                y={barY}
+                width={barWidth}
+                height={barHeight}
+                fill="hsl(var(--primary))"
+                onMouseLeave={() => {
+                  tooltipTimeout = window.setTimeout(() => {
+                    hideTooltip()
+                  }, 300)
+                }}
+                onMouseMove={(event) => {
+                  if (tooltipTimeout) clearTimeout(tooltipTimeout)
+                  // TooltipInPortal expects coordinates to be relative to containerRef
+                  // localPoint returns coordinates relative to the nearest SVG, which
+                  // is what containerRef is set to in this example.
+                  const eventSvgCoords = localPoint(event)
+                  const left = (barX || 0) + barWidth / 2
+                  showTooltip({
+                    tooltipData: xp,
+                    tooltipTop: eventSvgCoords?.y,
+                    tooltipLeft: left,
+                  })
+                }}
+              />
+            )
+          })}
+        </Group>
+      </svg>
+      {tooltipOpen && tooltipData && (
+        <TooltipInPortal top={tooltipTop} left={tooltipLeft} style={tooltipStyles}>
+          <div>
+            <strong>+{tooltipData.amount} XP</strong>
+          </div>
+          <div>
+            <small>{new Date(tooltipData.createdAt).toLocaleDateString()}</small>
+          </div>
+        </TooltipInPortal>
+      )}
+    </div>
   )
 }
diff --git a/src/app/(marketing)/profile/_components/Profile.tsx b/src/app/(marketing)/profile/_components/Profile.tsx
index eed61308fe..f88d10d7b4 100644
--- a/src/app/(marketing)/profile/_components/Profile.tsx
+++ b/src/app/(marketing)/profile/_components/Profile.tsx
@@ -1,7 +1,6 @@
 "use client"
 import { Polygon } from "@/components/Polygon"
 import { useWeb3ConnectionManager } from "@/components/Web3ConnectionManager/hooks/useWeb3ConnectionManager"
-import { Badge } from "@/components/ui/Badge"
 import { Card } from "@/components/ui/Card"
 import { cn } from "@/lib/utils"
 import { Info } from "@phosphor-icons/react"
@@ -75,10 +74,9 @@ export const Profile = () => {
           <Card className="space-y-4 p-6">
             <div className="flex flex-col items-start justify-between gap-2 sm:flex-row">
               <h3 className="font-bold">Engagement this month</h3>
-              <Badge colorScheme="blue">+72 XP</Badge>
             </div>
             <ParentSize>
-              {({ width }) => <ActivityChart width={width} height={40} />}
+              {({ width }) => <ActivityChart width={width} height={32} />}
             </ParentSize>
           </Card>
         </div>

From 6d60d95684e16531ef183966f6b067b45b36e611 Mon Sep 17 00:00:00 2001
From: valid <valid@zgen.hu>
Date: Wed, 11 Sep 2024 01:35:11 +0200
Subject: [PATCH 12/29] UI(ProfileHero): avatar level indicator refinements

---
 src/app/(marketing)/profile/_components/ProfileHero.tsx | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/src/app/(marketing)/profile/_components/ProfileHero.tsx b/src/app/(marketing)/profile/_components/ProfileHero.tsx
index 5105941e9b..4ece33af12 100644
--- a/src/app/(marketing)/profile/_components/ProfileHero.tsx
+++ b/src/app/(marketing)/profile/_components/ProfileHero.tsx
@@ -42,25 +42,26 @@ export const ProfileHero = () => {
             </Card>
           </EditProfile>
         </ProfileOwnerGuard>
-        <div className="relative mb-6 flex size-48 items-center justify-center md:size-56">
+        <div className="relative mb-6 flex size-44 items-center justify-center md:size-56">
           <CircularProgressBar
             progress={progress}
             color={rank.color}
+            strokeWidth={5}
             className="absolute inset-0 size-full"
           />
-          <Avatar className="flex size-40 items-center justify-center rounded-full border-2 md:size-48">
+          <Avatar className="flex size-40 items-center justify-center rounded-full border md:size-48">
             <ProfileAvatar
               username={profile.username}
               profileImageUrl={profile.profileImageUrl}
             />
           </Avatar>
-          <div className="-translate-x-1/4 -translate-y-1/4 absolute right-0 bottom-0 flex size-12 items-center justify-center">
+          <div className="absolute right-2 bottom-2 flex size-10 items-center justify-center md:right-3 md:bottom-3 md:size-12">
             <Polygon
               sides={rank.polygonCount}
               color={rank.color}
               className="brightness-75"
             />
-            <span className="absolute font-bold font-display text-xl tracking-tight">
+            <span className="-mt-0.5 absolute font-bold font-display text-lg tracking-tight md:text-xl">
               {levelIndex}
             </span>
           </div>

From 3818ef38bcd96c47c2742aed59feafb681200184 Mon Sep 17 00:00:00 2001
From: Dominik Stumpf <s.dominik.work@gmail.com>
Date: Wed, 11 Sep 2024 01:50:30 +0200
Subject: [PATCH 13/29] feat: style tooltip and group xp entries

---
 .../profile/_components/ActivityChart.tsx     | 61 ++++++++++++-------
 1 file changed, 38 insertions(+), 23 deletions(-)

diff --git a/src/app/(marketing)/profile/_components/ActivityChart.tsx b/src/app/(marketing)/profile/_components/ActivityChart.tsx
index c4ce3d6411..4651d8ab88 100644
--- a/src/app/(marketing)/profile/_components/ActivityChart.tsx
+++ b/src/app/(marketing)/profile/_components/ActivityChart.tsx
@@ -4,22 +4,15 @@ import { localPoint } from "@visx/event"
 import { Group } from "@visx/group"
 import { scaleBand, scaleLinear } from "@visx/scale"
 import { Bar } from "@visx/shape"
-import { defaultStyles, useTooltip, useTooltipInPortal } from "@visx/tooltip"
+import { useTooltip, useTooltipInPortal } from "@visx/tooltip"
 import { useMemo } from "react"
 import { useExperiences } from "../_hooks/useExperiences"
 
 type TooltipData = Schemas["Experience"]
-const tooltipStyles = {
-  ...defaultStyles,
-  minWidth: 60,
-  backgroundColor: "rgba(0,0,0,0.9)",
-  color: "white",
-}
-
 const verticalMargin = 0
 
 const getX = (xp: Schemas["Experience"]) => xp.id.toString()
-const getY = (xp: Schemas["Experience"]) => xp.amount
+const getY = (xp: Schemas["Experience"]) => xp.amount + 4
 
 export type BarsProps = {
   width: number
@@ -28,8 +21,32 @@ export type BarsProps = {
 
 let tooltipTimeout: number
 export const ActivityChart = ({ width, height }: BarsProps) => {
-  const { data } = useExperiences({ count: false })
-  if (!data) return <Skeleton style={{ width, height }} />
+  const { data: rawData } = useExperiences({ count: false })
+  if (!rawData) return <Skeleton style={{ width, height }} />
+  const groupedData = new Map<number, Schemas["Experience"][]>()
+  for (const xp of rawData) {
+    const createdAt = new Date(xp.createdAt)
+    const commonDay = new Date(
+      createdAt.getFullYear(),
+      createdAt.getMonth(),
+      createdAt.getDate()
+    ).valueOf()
+    groupedData.set(commonDay, [...(groupedData.get(commonDay) ?? []), xp])
+  }
+  const data = [...groupedData.entries()]
+    .reduce<Schemas["Experience"][]>((acc, [_, xpGroup]) => {
+      return [
+        ...acc,
+        {
+          ...xpGroup[0],
+          amount: xpGroup.reduce((sumAcc, xp) => sumAcc + xp.amount, 0),
+        },
+      ]
+    }, [])
+    .sort(
+      (a, b) => new Date(a.createdAt).valueOf() - new Date(b.createdAt).valueOf()
+    )
+
   const xMax = width
   const yMax = height - verticalMargin
   const xScale = useMemo(
@@ -62,9 +79,6 @@ export const ActivityChart = ({ width, height }: BarsProps) => {
   } = useTooltip<TooltipData>()
 
   const { containerRef, TooltipInPortal } = useTooltipInPortal({
-    // TooltipInPortal is rendered in a separate child of <body /> and positioned
-    // with page coordinates which should be updated on scroll. consider using
-    // Tooltip or TooltipWithBounds if you don't need to render inside a Portal
     scroll: true,
   })
 
@@ -94,9 +108,6 @@ export const ActivityChart = ({ width, height }: BarsProps) => {
                 }}
                 onMouseMove={(event) => {
                   if (tooltipTimeout) clearTimeout(tooltipTimeout)
-                  // TooltipInPortal expects coordinates to be relative to containerRef
-                  // localPoint returns coordinates relative to the nearest SVG, which
-                  // is what containerRef is set to in this example.
                   const eventSvgCoords = localPoint(event)
                   const left = (barX || 0) + barWidth / 2
                   showTooltip({
@@ -111,12 +122,16 @@ export const ActivityChart = ({ width, height }: BarsProps) => {
         </Group>
       </svg>
       {tooltipOpen && tooltipData && (
-        <TooltipInPortal top={tooltipTop} left={tooltipLeft} style={tooltipStyles}>
-          <div>
-            <strong>+{tooltipData.amount} XP</strong>
-          </div>
-          <div>
-            <small>{new Date(tooltipData.createdAt).toLocaleDateString()}</small>
+        <TooltipInPortal
+          top={tooltipTop}
+          left={tooltipLeft}
+          unstyled
+          applyPositionStyle
+          className="rounded border bg-card px-2 py-1"
+        >
+          <strong>+{tooltipData.amount} XP</strong>
+          <div className="text-muted-foreground text-sm">
+            {new Date(tooltipData.createdAt).toLocaleDateString()}
           </div>
         </TooltipInPortal>
       )}

From f6e7e0e3380ad126d1e111082b2cb9132b5030c7 Mon Sep 17 00:00:00 2001
From: Dominik Stumpf <s.dominik.work@gmail.com>
Date: Wed, 11 Sep 2024 12:37:32 +0200
Subject: [PATCH 14/29] chore: adjust barchart size

---
 src/app/(marketing)/profile/_components/ActivityChart.tsx | 6 +++---
 src/app/(marketing)/profile/_components/Profile.tsx       | 2 +-
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/app/(marketing)/profile/_components/ActivityChart.tsx b/src/app/(marketing)/profile/_components/ActivityChart.tsx
index 4651d8ab88..86fc92f6d4 100644
--- a/src/app/(marketing)/profile/_components/ActivityChart.tsx
+++ b/src/app/(marketing)/profile/_components/ActivityChart.tsx
@@ -12,7 +12,7 @@ type TooltipData = Schemas["Experience"]
 const verticalMargin = 0
 
 const getX = (xp: Schemas["Experience"]) => xp.id.toString()
-const getY = (xp: Schemas["Experience"]) => xp.amount + 4
+const getY = (xp: Schemas["Experience"]) => xp.amount
 
 export type BarsProps = {
   width: number
@@ -52,7 +52,7 @@ export const ActivityChart = ({ width, height }: BarsProps) => {
   const xScale = useMemo(
     () =>
       scaleBand<string>({
-        range: [0, xMax],
+        range: [0, Math.min(data.length * 18, xMax)],
         round: true,
         domain: data.map(getX),
         padding: 0.4,
@@ -94,7 +94,7 @@ export const ActivityChart = ({ width, height }: BarsProps) => {
             const barY = yMax - barHeight
             return (
               <Bar
-                ry={3}
+                ry={4}
                 key={xp.id}
                 x={barX}
                 y={barY}
diff --git a/src/app/(marketing)/profile/_components/Profile.tsx b/src/app/(marketing)/profile/_components/Profile.tsx
index f88d10d7b4..21c1d42b1e 100644
--- a/src/app/(marketing)/profile/_components/Profile.tsx
+++ b/src/app/(marketing)/profile/_components/Profile.tsx
@@ -76,7 +76,7 @@ export const Profile = () => {
               <h3 className="font-bold">Engagement this month</h3>
             </div>
             <ParentSize>
-              {({ width }) => <ActivityChart width={width} height={32} />}
+              {({ width }) => <ActivityChart width={width} height={42} />}
             </ParentSize>
           </Card>
         </div>

From 7f45f039956fc7f7d8cd8b01e9764aee37d56219 Mon Sep 17 00:00:00 2001
From: Dominik Stumpf <s.dominik.work@gmail.com>
Date: Wed, 11 Sep 2024 14:37:26 +0200
Subject: [PATCH 15/29] fix: size experience card with badge

---
 .../(marketing)/profile/[username]/types.ts   |  3 ++
 .../profile/_components/LevelBadge.tsx        | 39 +++++++++++++++++++
 .../profile/_components/Profile.tsx           | 18 ++-------
 .../profile/_components/ProfileHero.tsx       | 24 +++++-------
 src/v2/components/Account/Account.tsx         | 27 ++++---------
 .../components/AccountModal/AccountModal.tsx  | 31 +++++++--------
 src/v2/components/ui/Progress.tsx             |  2 +-
 7 files changed, 77 insertions(+), 67 deletions(-)
 create mode 100644 src/app/(marketing)/profile/[username]/types.ts
 create mode 100644 src/app/(marketing)/profile/_components/LevelBadge.tsx

diff --git a/src/app/(marketing)/profile/[username]/types.ts b/src/app/(marketing)/profile/[username]/types.ts
new file mode 100644
index 0000000000..f587d90b1f
--- /dev/null
+++ b/src/app/(marketing)/profile/[username]/types.ts
@@ -0,0 +1,3 @@
+import { RANKS } from "./constants"
+
+export type Rank = (typeof RANKS)[number]
diff --git a/src/app/(marketing)/profile/_components/LevelBadge.tsx b/src/app/(marketing)/profile/_components/LevelBadge.tsx
new file mode 100644
index 0000000000..d9e5e325db
--- /dev/null
+++ b/src/app/(marketing)/profile/_components/LevelBadge.tsx
@@ -0,0 +1,39 @@
+import { Polygon } from "@/components/Polygon"
+import { VariantProps, cva } from "class-variance-authority"
+import { Rank } from "../[username]/types"
+
+const levelBadgeVariants = cva("flex items-center justify-center", {
+  variants: {
+    size: {
+      md: "text-md size-7 text-xs",
+      lg: "text-lg md:text-xl size-10 md:size-12",
+    },
+  },
+  defaultVariants: {
+    size: "md",
+  },
+})
+
+type LevelBadgeProps = {
+  levelIndex: number
+  rank: Rank
+  className?: string
+} & VariantProps<typeof levelBadgeVariants>
+
+export const LevelBadge = ({
+  rank,
+  levelIndex,
+  size,
+  className,
+}: LevelBadgeProps) => {
+  return (
+    <div className={levelBadgeVariants({ size, className })}>
+      <Polygon
+        sides={rank.polygonCount}
+        color={rank.color}
+        className="brightness-75"
+      />
+      <span className="-mt-0.5 absolute font-bold font-display">{levelIndex}</span>
+    </div>
+  )
+}
diff --git a/src/app/(marketing)/profile/_components/Profile.tsx b/src/app/(marketing)/profile/_components/Profile.tsx
index 21c1d42b1e..664ae0a1ed 100644
--- a/src/app/(marketing)/profile/_components/Profile.tsx
+++ b/src/app/(marketing)/profile/_components/Profile.tsx
@@ -1,5 +1,4 @@
 "use client"
-import { Polygon } from "@/components/Polygon"
 import { useWeb3ConnectionManager } from "@/components/Web3ConnectionManager/hooks/useWeb3ConnectionManager"
 import { Card } from "@/components/ui/Card"
 import { cn } from "@/lib/utils"
@@ -15,6 +14,7 @@ import { useExperienceProgression } from "../_hooks/useExperienceProgression"
 import { useProfile } from "../_hooks/useProfile"
 import { useReferredUsers } from "../_hooks/useReferredUsers"
 import { ActivityChart } from "./ActivityChart"
+import { LevelBadge } from "./LevelBadge"
 import { ProfileMainSkeleton } from "./ProfileSkeleton"
 import { RecentActivity } from "./RecentActivity/RecentActivity"
 import RecentActivityFallback from "./RecentActivity/RecentActivityFallback"
@@ -35,15 +35,7 @@ export const Profile = () => {
         <SectionTitle>Experience</SectionTitle>
         <div className="grid grid-cols-1 gap-3 md:grid-cols-2">
           <Card className="flex gap-4 p-6">
-            <Polygon
-              color={xp.rank.color}
-              sides={xp.rank.polygonCount}
-              className="size-12"
-            />
-            {/*<LevelBadge
-                level={level}
-                className="row-span-3 size-14 self-start justify-self-center"
-              />*/}
+            <LevelBadge levelIndex={xp.levelIndex} rank={xp.rank} size="lg" />
             <div className="flex w-full flex-col gap-2">
               <div className="flex flex-col justify-between gap-2 sm:flex-row">
                 <h3 className="font-bold capitalize">{xp.rank.title}</h3>
@@ -64,11 +56,7 @@ export const Profile = () => {
                   }}
                 />
               </Progress>
-              <Progress value={xp.progress * 100} color={xp.rank.color} />
-              {/*<p className="text-muted-foreground">
-                This is a description that perfectly matches the 80 character
-                description limit.
-              </p>*/}
+              {/*<Progress value={xp.progress * 100} color={xp.rank.color} />*/}
             </div>
           </Card>
           <Card className="space-y-4 p-6">
diff --git a/src/app/(marketing)/profile/_components/ProfileHero.tsx b/src/app/(marketing)/profile/_components/ProfileHero.tsx
index 4ece33af12..ac2f012432 100644
--- a/src/app/(marketing)/profile/_components/ProfileHero.tsx
+++ b/src/app/(marketing)/profile/_components/ProfileHero.tsx
@@ -3,7 +3,6 @@
 import { CheckMark } from "@/components/CheckMark"
 import { CircularProgressBar } from "@/components/CircularProgressBar"
 import { LayoutContainer } from "@/components/Layout"
-import { Polygon } from "@/components/Polygon"
 import { ProfileAvatar } from "@/components/ProfileAvatar"
 import { Avatar } from "@/components/ui/Avatar"
 import { Button } from "@/components/ui/Button"
@@ -13,15 +12,16 @@ import { ProfileOwnerGuard } from "../_components/ProfileOwnerGuard"
 import { useExperienceProgression } from "../_hooks/useExperienceProgression"
 import { useProfile } from "../_hooks/useProfile"
 import { EditProfile } from "./EditProfile/EditProfile"
+import { LevelBadge } from "./LevelBadge"
 import { ProfileHeroSkeleton } from "./ProfileSkeleton"
 import { ProfileSocialCounters } from "./ProfileSocialCounters"
 
 export const ProfileHero = () => {
   const { data: profile } = useProfile()
-  const progression = useExperienceProgression()
+  const xp = useExperienceProgression()
 
-  if (!profile || !progression) return <ProfileHeroSkeleton />
-  const { rank, levelIndex, progress } = progression
+  if (!profile || !xp) return <ProfileHeroSkeleton />
+  const { rank, levelIndex, progress } = xp
 
   return (
     <LayoutContainer>
@@ -55,16 +55,12 @@ export const ProfileHero = () => {
               profileImageUrl={profile.profileImageUrl}
             />
           </Avatar>
-          <div className="absolute right-2 bottom-2 flex size-10 items-center justify-center md:right-3 md:bottom-3 md:size-12">
-            <Polygon
-              sides={rank.polygonCount}
-              color={rank.color}
-              className="brightness-75"
-            />
-            <span className="-mt-0.5 absolute font-bold font-display text-lg tracking-tight md:text-xl">
-              {levelIndex}
-            </span>
-          </div>
+          <LevelBadge
+            size="lg"
+            levelIndex={levelIndex}
+            rank={rank}
+            className="absolute right-2 bottom-2 md:right-3 md:bottom-3"
+          />
         </div>
         <h1 className="break-all text-center font-extrabold text-3xl leading-tight tracking-tight md:text-4xl">
           {profile.name || profile.username}
diff --git a/src/v2/components/Account/Account.tsx b/src/v2/components/Account/Account.tsx
index 172e072fa5..84ed66eb20 100644
--- a/src/v2/components/Account/Account.tsx
+++ b/src/v2/components/Account/Account.tsx
@@ -1,9 +1,9 @@
 "use client"
 
 import { CircularProgressBar } from "@/components/CircularProgressBar"
-import { Polygon } from "@/components/Polygon"
 import { useDisclosure } from "@/hooks/useDisclosure"
 import { cn } from "@/lib/utils"
+import { LevelBadge } from "@app/(marketing)/profile/_components/LevelBadge"
 import { useExperienceProgression } from "@app/(marketing)/profile/_hooks/useExperienceProgression"
 import { Bell } from "@phosphor-icons/react"
 import { SignIn } from "@phosphor-icons/react/dist/ssr"
@@ -33,7 +33,7 @@ export const Account = () => {
   const { addresses, guildProfile, isLoading } = useUser()
   const linkedAddressesCount = (addresses?.length ?? 1) - 1
   const { captureEvent } = usePostHogContext()
-  const progression = useExperienceProgression(true)
+  const xp = useExperienceProgression(true)
 
   if (isLoading || isWeb3Connected === null) {
     return (
@@ -86,11 +86,11 @@ export const Account = () => {
         {guildProfile ? (
           <div className="flex items-center gap-2">
             <div className="relative p-1">
-              {progression && (
+              {xp && (
                 <CircularProgressBar
                   className="absolute inset-0 size-full"
-                  progress={progression.progress}
-                  color={progression.rank.color}
+                  progress={xp.progress}
+                  color={xp.rank.color}
                 />
               )}
               <Avatar size="sm">
@@ -105,23 +105,12 @@ export const Account = () => {
                 {guildProfile.name || guildProfile.username}
               </div>
               <div className="text-muted-foreground text-xs">
-                {progression
-                  ? `${progression.experienceCount} / ${Math.ceil(progression.level)} XP`
+                {xp
+                  ? `${xp.experienceCount} / ${Math.ceil(xp.level)} XP`
                   : `@${guildProfile.username}`}
               </div>
             </div>
-            {progression && (
-              <div className="flex size-7 items-center justify-center">
-                <Polygon
-                  sides={progression.rank.polygonCount}
-                  color={progression.rank.color}
-                  className="brightness-75"
-                />
-                <span className="absolute font-display font-extrabold text-xs">
-                  {progression.levelIndex}
-                </span>
-              </div>
-            )}
+            {xp && <LevelBadge levelIndex={xp.levelIndex} rank={xp.rank} />}
           </div>
         ) : (
           <div className="flex items-center gap-3">
diff --git a/src/v2/components/Account/components/AccountModal/AccountModal.tsx b/src/v2/components/Account/components/AccountModal/AccountModal.tsx
index 95b82de599..f95b41e1a6 100644
--- a/src/v2/components/Account/components/AccountModal/AccountModal.tsx
+++ b/src/v2/components/Account/components/AccountModal/AccountModal.tsx
@@ -2,7 +2,6 @@ import { CheckMark } from "@/components/CheckMark"
 import { CircularProgressBar } from "@/components/CircularProgressBar"
 import { CopyableAddress } from "@/components/CopyableAddress"
 import { GuildAvatar } from "@/components/GuildAvatar"
-import { Polygon } from "@/components/Polygon"
 import { ProfileAvatar } from "@/components/ProfileAvatar"
 import { accountModalAtom } from "@/components/Providers/atoms"
 import useConnectorNameAndIcon from "@/components/Web3ConnectionManager/hooks/useConnectorNameAndIcon"
@@ -29,6 +28,7 @@ import {
 import { Separator } from "@/components/ui/Separator"
 import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/Tooltip"
 import { useUserPublic } from "@/hooks/useUserPublic"
+import { LevelBadge } from "@app/(marketing)/profile/_components/LevelBadge"
 import { useExperienceProgression } from "@app/(marketing)/profile/_hooks/useExperienceProgression"
 import { ArrowRight, DotsThreeVertical } from "@phosphor-icons/react"
 import { SignOut } from "@phosphor-icons/react/dist/ssr"
@@ -52,7 +52,7 @@ const AccountModal = () => {
 
   const { address: evmAddress, chainId } = useAccount()
   const domain = useResolveAddress(evmAddress)
-  const progression = useExperienceProgression(true)
+  const xp = useExperienceProgression(true)
 
   const handleLogout = () => {
     const keysToRemove = Object.keys({ ...window.localStorage }).filter((key) =>
@@ -64,7 +64,7 @@ const AccountModal = () => {
     })
 
     deleteKeyPairFromIdb(id)
-      ?.catch(() => { })
+      ?.catch(() => {})
       .finally(() => {
         setIsOpen(false)
         disconnect()
@@ -87,11 +87,11 @@ const AccountModal = () => {
             <>
               {guildProfile ? (
                 <div className="mb-8 flex gap-3">
-                  {progression && (
+                  {xp && (
                     <div className="relative mr-2 flex aspect-square items-center justify-center">
                       <CircularProgressBar
-                        progress={progression.progress}
-                        color={progression.rank.color}
+                        progress={xp.progress}
+                        color={xp.rank.color}
                         className="absolute inset-0 size-full"
                       />
                       <Avatar
@@ -103,16 +103,11 @@ const AccountModal = () => {
                           profileImageUrl={guildProfile.profileImageUrl}
                         />
                       </Avatar>
-                      <div className="absolute right-0 bottom-0 flex size-8 items-center justify-center">
-                        <Polygon
-                          sides={progression.rank.polygonCount}
-                          color={progression.rank.color}
-                          className="brightness-75"
-                        />
-                        <span className="absolute font-bold font-display text-sm">
-                          {progression.levelIndex}
-                        </span>
-                      </div>
+                      <LevelBadge
+                        levelIndex={xp.levelIndex}
+                        rank={xp.rank}
+                        className="absolute right-0 bottom-0 size-8"
+                      />
                     </div>
                   )}
                   <div className="flex w-full flex-col">
@@ -123,8 +118,8 @@ const AccountModal = () => {
                       <CheckMark className="ml-0.5 inline-block fill-yellow-500" />
                     </h3>
                     <div className="text-muted-foreground text-sm">
-                      {progression
-                        ? `${progression.experienceCount} / ${Math.ceil(progression.level)} XP`
+                      {xp
+                        ? `${xp.experienceCount} / ${Math.ceil(xp.level)} XP`
                         : `@${guildProfile.username}`}
                     </div>
                     <div className="mt-2 flex gap-1.5">
diff --git a/src/v2/components/ui/Progress.tsx b/src/v2/components/ui/Progress.tsx
index da5f1c8694..7ba310dd7d 100644
--- a/src/v2/components/ui/Progress.tsx
+++ b/src/v2/components/ui/Progress.tsx
@@ -19,7 +19,7 @@ const Progress = React.forwardRef<
   >
     <ProgressPrimitive.Indicator
       className="h-full w-full flex-1 rounded-r-full bg-primary transition-all"
-      style={{ transform: `translateX(-${100 - (value || 0)}%)` }}
+      style={{ transform: `translateX(-${(1 - (value || 0)) * 100}%)` }}
     />
   </ProgressPrimitive.Root>
 ))

From fdc5f6c5049524aa38b376c8b5c44515e164e9d6 Mon Sep 17 00:00:00 2001
From: Dominik Stumpf <s.dominik.work@gmail.com>
Date: Wed, 11 Sep 2024 14:42:55 +0200
Subject: [PATCH 16/29] refactor: resize RewardBadge

---
 src/app/(marketing)/profile/_components/Profile.tsx | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/src/app/(marketing)/profile/_components/Profile.tsx b/src/app/(marketing)/profile/_components/Profile.tsx
index 664ae0a1ed..ca009f1ba9 100644
--- a/src/app/(marketing)/profile/_components/Profile.tsx
+++ b/src/app/(marketing)/profile/_components/Profile.tsx
@@ -35,8 +35,13 @@ export const Profile = () => {
         <SectionTitle>Experience</SectionTitle>
         <div className="grid grid-cols-1 gap-3 md:grid-cols-2">
           <Card className="flex gap-4 p-6">
-            <LevelBadge levelIndex={xp.levelIndex} rank={xp.rank} size="lg" />
-            <div className="flex w-full flex-col gap-2">
+            <LevelBadge
+              levelIndex={xp.levelIndex}
+              rank={xp.rank}
+              size="lg"
+              className=""
+            />
+            <div className="flex grow flex-col gap-2">
               <div className="flex flex-col justify-between gap-2 sm:flex-row">
                 <h3 className="font-bold capitalize">{xp.rank.title}</h3>
                 <p className="text-muted-foreground">

From b745f7b1cfcaa89ac9825eac484b92f15b0376d0 Mon Sep 17 00:00:00 2001
From: Dominik Stumpf <s.dominik.work@gmail.com>
Date: Wed, 11 Sep 2024 15:14:52 +0200
Subject: [PATCH 17/29] refactor: add progress ui component

---
 .../profile/_components/Profile.tsx           | 19 ++++--------
 src/v2/components/ui/Progress.tsx             | 29 +++++++++++++------
 2 files changed, 26 insertions(+), 22 deletions(-)

diff --git a/src/app/(marketing)/profile/_components/Profile.tsx b/src/app/(marketing)/profile/_components/Profile.tsx
index ca009f1ba9..3d72b5daea 100644
--- a/src/app/(marketing)/profile/_components/Profile.tsx
+++ b/src/app/(marketing)/profile/_components/Profile.tsx
@@ -1,9 +1,9 @@
 "use client"
 import { useWeb3ConnectionManager } from "@/components/Web3ConnectionManager/hooks/useWeb3ConnectionManager"
 import { Card } from "@/components/ui/Card"
+import { ProgressIndicator, ProgressRoot } from "@/components/ui/Progress"
 import { cn } from "@/lib/utils"
 import { Info } from "@phosphor-icons/react"
-import { Progress, ProgressIndicator } from "@radix-ui/react-progress"
 import ParentSize from "@visx/responsive/lib/components/ParentSize"
 import { PropsWithChildren } from "react"
 import { ContributionCard } from "../_components/ContributionCard"
@@ -48,20 +48,13 @@ export const Profile = () => {
                   {`${xp.experienceCount} / ${Math.ceil(xp.level)} XP`}
                 </p>
               </div>
-              <Progress
-                className={cn(
-                  "relative h-3 w-full overflow-hidden rounded-full bg-secondary"
-                )}
-              >
+              <ProgressRoot>
                 <ProgressIndicator
-                  className="h-full w-full flex-1 rounded-r-full transition-all"
-                  style={{
-                    background: xp.rank.color,
-                    transform: `translateX(-${(1 - (xp.progress || 0)) * 100}%)`,
-                  }}
+                  value={xp.progress}
+                  // className="h-full w-full flex-1 rounded-r-full transition-all"
+                  style={{ background: xp.rank.color }}
                 />
-              </Progress>
-              {/*<Progress value={xp.progress * 100} color={xp.rank.color} />*/}
+              </ProgressRoot>
             </div>
           </Card>
           <Card className="space-y-4 p-6">
diff --git a/src/v2/components/ui/Progress.tsx b/src/v2/components/ui/Progress.tsx
index 7ba310dd7d..1897978e28 100644
--- a/src/v2/components/ui/Progress.tsx
+++ b/src/v2/components/ui/Progress.tsx
@@ -5,7 +5,7 @@ import * as React from "react"
 
 import { cn } from "@/lib/utils"
 
-const Progress = React.forwardRef<
+const ProgressRoot = React.forwardRef<
   React.ElementRef<typeof ProgressPrimitive.Root>,
   React.ComponentPropsWithoutRef<typeof ProgressPrimitive.Root>
 >(({ className, value, ...props }, ref) => (
@@ -16,13 +16,24 @@ const Progress = React.forwardRef<
       className
     )}
     {...props}
-  >
-    <ProgressPrimitive.Indicator
-      className="h-full w-full flex-1 rounded-r-full bg-primary transition-all"
-      style={{ transform: `translateX(-${(1 - (value || 0)) * 100}%)` }}
-    />
-  </ProgressPrimitive.Root>
+  />
 ))
-Progress.displayName = ProgressPrimitive.Root.displayName
 
-export { Progress }
+const ProgressIndicator = React.forwardRef<
+  React.ElementRef<
+    React.FunctionComponent<ProgressPrimitive.ProgressIndicatorProps>
+  >,
+  ProgressPrimitive.ProgressIndicatorProps & { value: number }
+>(({ className, value, style, ...props }, ref) => (
+  <ProgressPrimitive.Indicator
+    className={cn(
+      "h-full w-full flex-1 rounded-r-full bg-primary transition-all",
+      className
+    )}
+    style={{ transform: `translateX(-${(1 - (value || 0)) * 100}%)`, ...style }}
+    ref={ref}
+    {...props}
+  />
+))
+
+export { ProgressIndicator, ProgressRoot }

From 23c4c8c28ca6ef7bad42221355402394c1af87bf Mon Sep 17 00:00:00 2001
From: Dominik Stumpf <s.dominik.work@gmail.com>
Date: Wed, 11 Sep 2024 17:40:15 +0200
Subject: [PATCH 18/29] fix: assign rank properly on profile

---
 src/app/(marketing)/profile/[username]/constants.ts |  4 ++--
 src/app/(marketing)/profile/_components/Profile.tsx |  1 -
 .../profile/_hooks/useExperienceProgression.ts      | 13 +++++--------
 3 files changed, 7 insertions(+), 11 deletions(-)

diff --git a/src/app/(marketing)/profile/[username]/constants.ts b/src/app/(marketing)/profile/[username]/constants.ts
index e188cee1f7..d6b4a3b15c 100644
--- a/src/app/(marketing)/profile/[username]/constants.ts
+++ b/src/app/(marketing)/profile/[username]/constants.ts
@@ -4,7 +4,7 @@ export const RANKS = [
   { color: "#78c93d", title: "novice", polygonCount: 20 },
   { color: "#88d525", title: "learner", polygonCount: 20 },
   { color: "#f6ca45", title: "knight", polygonCount: 4 },
-  { color: "#78c93d", title: "veteran", polygonCount: 4 },
+  { color: "#f19b38", title: "veteran", polygonCount: 4 },
   { color: "#ec5a53", title: "champion", polygonCount: 4 },
   { color: "#53adf0", title: "hero", polygonCount: 5 },
   { color: "#c385f8", title: "master", polygonCount: 5 },
@@ -12,7 +12,7 @@ export const RANKS = [
   { color: "#be4681", title: "legend", polygonCount: 6 },
   { color: "#000000", title: "mythic", polygonCount: 6 },
   {
-    color: "linear-gradient(to left top, #00cbfa, #b9f2ff)",
+    color: "#eeeeee",
     title: "???",
     requiredXp: 1e19,
     polygonCount: 6,
diff --git a/src/app/(marketing)/profile/_components/Profile.tsx b/src/app/(marketing)/profile/_components/Profile.tsx
index 3d72b5daea..2d0a2a14d5 100644
--- a/src/app/(marketing)/profile/_components/Profile.tsx
+++ b/src/app/(marketing)/profile/_components/Profile.tsx
@@ -51,7 +51,6 @@ export const Profile = () => {
               <ProgressRoot>
                 <ProgressIndicator
                   value={xp.progress}
-                  // className="h-full w-full flex-1 rounded-r-full transition-all"
                   style={{ background: xp.rank.color }}
                 />
               </ProgressRoot>
diff --git a/src/app/(marketing)/profile/_hooks/useExperienceProgression.ts b/src/app/(marketing)/profile/_hooks/useExperienceProgression.ts
index c507ccf90e..0f372bcf45 100644
--- a/src/app/(marketing)/profile/_hooks/useExperienceProgression.ts
+++ b/src/app/(marketing)/profile/_hooks/useExperienceProgression.ts
@@ -14,19 +14,16 @@ const generateExponentialArray = (
 export const calculateXpProgression = ({
   experienceCount,
 }: { experienceCount: number }) => {
-  experienceCount = Math.min(experienceCount, MAX_XP)
-  const levels = [...generateExponentialArray(MAX_LEVEL, MAX_XP, 1.03)]
-  const levelIndex = Math.max(
-    0,
-    levels.findIndex((level) => experienceCount < level)
-  )
+  const levels = generateExponentialArray(MAX_LEVEL, MAX_XP, 1.03)
+  let levelIndex = levels.findIndex((level) => experienceCount < level)
+  levelIndex = levelIndex === -1 ? levels.length - 1 : levelIndex
   const level = levels.at(levelIndex)
   const levelInRank = Math.floor(MAX_LEVEL / RANKS.length)
-  const rankIndex = Math.max(0, (levelIndex - 1) % levelInRank)
+  const rankIndex = Math.max(0, Math.floor((levelIndex - 1) / levelInRank))
   const rank = RANKS.at(rankIndex)
   if (!rank || !level) throw new Error("failed to calculate rank")
   const nextLevel = levels.at(levelIndex + 1)
-  const progress = nextLevel ? experienceCount / nextLevel || 0 : 0
+  const progress = experienceCount / (nextLevel || experienceCount)
   return { progress, rank, levelIndex, experienceCount, level }
 }
 

From 82290e27177b6fe3bd6a4e845304e3304887f595 Mon Sep 17 00:00:00 2001
From: Dominik Stumpf <s.dominik.work@gmail.com>
Date: Wed, 11 Sep 2024 18:09:30 +0200
Subject: [PATCH 19/29] chore: floor levels for simplicity

---
 src/app/(marketing)/profile/_components/Profile.tsx           | 2 +-
 .../(marketing)/profile/_hooks/useExperienceProgression.ts    | 4 +++-
 src/v2/components/Account/Account.tsx                         | 2 +-
 .../Account/components/AccountModal/AccountModal.tsx          | 2 +-
 4 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/src/app/(marketing)/profile/_components/Profile.tsx b/src/app/(marketing)/profile/_components/Profile.tsx
index 2d0a2a14d5..d50224b04c 100644
--- a/src/app/(marketing)/profile/_components/Profile.tsx
+++ b/src/app/(marketing)/profile/_components/Profile.tsx
@@ -45,7 +45,7 @@ export const Profile = () => {
               <div className="flex flex-col justify-between gap-2 sm:flex-row">
                 <h3 className="font-bold capitalize">{xp.rank.title}</h3>
                 <p className="text-muted-foreground">
-                  {`${xp.experienceCount} / ${Math.ceil(xp.level)} XP`}
+                  {`${xp.experienceCount} / ${xp.level} XP`}
                 </p>
               </div>
               <ProgressRoot>
diff --git a/src/app/(marketing)/profile/_hooks/useExperienceProgression.ts b/src/app/(marketing)/profile/_hooks/useExperienceProgression.ts
index 0f372bcf45..20aa51f427 100644
--- a/src/app/(marketing)/profile/_hooks/useExperienceProgression.ts
+++ b/src/app/(marketing)/profile/_hooks/useExperienceProgression.ts
@@ -14,7 +14,9 @@ const generateExponentialArray = (
 export const calculateXpProgression = ({
   experienceCount,
 }: { experienceCount: number }) => {
-  const levels = generateExponentialArray(MAX_LEVEL, MAX_XP, 1.03)
+  const levels = generateExponentialArray(MAX_LEVEL, MAX_XP, 1.03).map((num) =>
+    Math.floor(num)
+  )
   let levelIndex = levels.findIndex((level) => experienceCount < level)
   levelIndex = levelIndex === -1 ? levels.length - 1 : levelIndex
   const level = levels.at(levelIndex)
diff --git a/src/v2/components/Account/Account.tsx b/src/v2/components/Account/Account.tsx
index 84ed66eb20..8f1a4aff18 100644
--- a/src/v2/components/Account/Account.tsx
+++ b/src/v2/components/Account/Account.tsx
@@ -106,7 +106,7 @@ export const Account = () => {
               </div>
               <div className="text-muted-foreground text-xs">
                 {xp
-                  ? `${xp.experienceCount} / ${Math.ceil(xp.level)} XP`
+                  ? `${xp.experienceCount} / ${xp.level} XP`
                   : `@${guildProfile.username}`}
               </div>
             </div>
diff --git a/src/v2/components/Account/components/AccountModal/AccountModal.tsx b/src/v2/components/Account/components/AccountModal/AccountModal.tsx
index f95b41e1a6..ebca4ff998 100644
--- a/src/v2/components/Account/components/AccountModal/AccountModal.tsx
+++ b/src/v2/components/Account/components/AccountModal/AccountModal.tsx
@@ -119,7 +119,7 @@ const AccountModal = () => {
                     </h3>
                     <div className="text-muted-foreground text-sm">
                       {xp
-                        ? `${xp.experienceCount} / ${Math.ceil(xp.level)} XP`
+                        ? `${xp.experienceCount} / ${xp.level} XP`
                         : `@${guildProfile.username}`}
                     </div>
                     <div className="mt-2 flex gap-1.5">

From 00d3ffda753c6c993b91b284e165b14604d1d44a Mon Sep 17 00:00:00 2001
From: Dominik Stumpf <s.dominik.work@gmail.com>
Date: Wed, 11 Sep 2024 18:29:52 +0200
Subject: [PATCH 20/29] chore: revalidate experiences every 20 min

---
 src/app/(marketing)/profile/[username]/page.tsx | 12 ++++++++++--
 1 file changed, 10 insertions(+), 2 deletions(-)

diff --git a/src/app/(marketing)/profile/[username]/page.tsx b/src/app/(marketing)/profile/[username]/page.tsx
index e6d4e67207..fe8768b1ae 100644
--- a/src/app/(marketing)/profile/[username]/page.tsx
+++ b/src/app/(marketing)/profile/[username]/page.tsx
@@ -159,12 +159,20 @@ const fetchPublicProfileData = async ({
   const guildsZipped = guildRequests.map(({ pathname }, i) => [pathname, guilds[i]])
   const rolesZipped = roleRequests.map(({ pathname }, i) => [pathname, roles[i]])
   const experiencesRequest = new URL(`/v2/profiles/${username}/experiences`, api)
-  const experiences = await ssrFetcher<Schemas["Experience"][]>(experiencesRequest)
+  const experiences = await ssrFetcher<Schemas["Experience"][]>(experiencesRequest, {
+    next: {
+      revalidate: 1200,
+    },
+  })
   const experienceCountRequest = new URL(
     `/v2/profiles/${username}/experiences?count=true`,
     api
   )
-  const experienceCount = await ssrFetcher<number>(experienceCountRequest)
+  const experienceCount = await ssrFetcher<number>(experienceCountRequest, {
+    next: {
+      revalidate: 1200,
+    },
+  })
 
   return {
     profile,

From e4a9a7dd32e5d101842b583d8e4bb708b259dc4a Mon Sep 17 00:00:00 2001
From: valid <valid@zgen.hu>
Date: Wed, 11 Sep 2024 20:26:30 +0200
Subject: [PATCH 21/29] =?UTF-8?q?fix:=20Experience=20&=C2=A0Top=20contribu?=
 =?UTF-8?q?tions=20title=20colors=20in=20light=20mode?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/app/(marketing)/profile/_components/Profile.tsx | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/src/app/(marketing)/profile/_components/Profile.tsx b/src/app/(marketing)/profile/_components/Profile.tsx
index d50224b04c..8b716ffb14 100644
--- a/src/app/(marketing)/profile/_components/Profile.tsx
+++ b/src/app/(marketing)/profile/_components/Profile.tsx
@@ -31,8 +31,10 @@ export const Profile = () => {
 
   return (
     <>
-      <div className="mb-16 flex flex-col gap-4">
-        <SectionTitle>Experience</SectionTitle>
+      <div className="mb-16">
+        <div data-theme="dark" className="mb-3">
+          <SectionTitle>Experience</SectionTitle>
+        </div>
         <div className="grid grid-cols-1 gap-3 md:grid-cols-2">
           <Card className="flex gap-4 p-6">
             <LevelBadge
@@ -66,7 +68,7 @@ export const Profile = () => {
           </Card>
         </div>
       </div>
-      <div className="mb-3 flex items-center justify-between" data-theme="dark">
+      <div className="mb-3 flex items-center justify-between">
         <SectionTitle>Top contributions</SectionTitle>
         <ProfileOwnerGuard>
           <EditContributions />

From 8cd810d5025aacfba36d5f3eaaaeb60e57dbe911 Mon Sep 17 00:00:00 2001
From: valid <valid@zgen.hu>
Date: Wed, 11 Sep 2024 20:29:02 +0200
Subject: [PATCH 22/29] UI: whitespace refinement

---
 src/app/(marketing)/profile/_components/Profile.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/app/(marketing)/profile/_components/Profile.tsx b/src/app/(marketing)/profile/_components/Profile.tsx
index 8b716ffb14..c52b6f9395 100644
--- a/src/app/(marketing)/profile/_components/Profile.tsx
+++ b/src/app/(marketing)/profile/_components/Profile.tsx
@@ -31,7 +31,7 @@ export const Profile = () => {
 
   return (
     <>
-      <div className="mb-16">
+      <div className="mb-12">
         <div data-theme="dark" className="mb-3">
           <SectionTitle>Experience</SectionTitle>
         </div>
@@ -92,7 +92,7 @@ export const Profile = () => {
           <ContributionCard contribution={contribution} key={contribution.id} />
         ))}
       </div>
-      <div className="mt-16">
+      <div className="mt-14">
         <SectionTitle className="mb-3">Recent activity</SectionTitle>
         {isWeb3Connected ? <RecentActivity /> : <RecentActivityFallback />}
       </div>

From b74d0dec5b1439b281811e1197a3f968206fac95 Mon Sep 17 00:00:00 2001
From: Dominik Stumpf <s.dominik.work@gmail.com>
Date: Wed, 11 Sep 2024 20:50:09 +0200
Subject: [PATCH 23/29] chore: add fallback to activity chart

---
 .../profile/_components/ActivityChart.tsx          |  2 ++
 .../(marketing)/profile/_hooks/useExperiences.tsx  | 14 ++++++++++----
 2 files changed, 12 insertions(+), 4 deletions(-)

diff --git a/src/app/(marketing)/profile/_components/ActivityChart.tsx b/src/app/(marketing)/profile/_components/ActivityChart.tsx
index 86fc92f6d4..46744223c6 100644
--- a/src/app/(marketing)/profile/_components/ActivityChart.tsx
+++ b/src/app/(marketing)/profile/_components/ActivityChart.tsx
@@ -23,6 +23,8 @@ let tooltipTimeout: number
 export const ActivityChart = ({ width, height }: BarsProps) => {
   const { data: rawData } = useExperiences({ count: false })
   if (!rawData) return <Skeleton style={{ width, height }} />
+  if (rawData.length === 0)
+    return <p className="text-muted-foreground">There are no activity this month</p>
   const groupedData = new Map<number, Schemas["Experience"][]>()
   for (const xp of rawData) {
     const createdAt = new Date(xp.createdAt)
diff --git a/src/app/(marketing)/profile/_hooks/useExperiences.tsx b/src/app/(marketing)/profile/_hooks/useExperiences.tsx
index eb7677791f..8c1851bf06 100644
--- a/src/app/(marketing)/profile/_hooks/useExperiences.tsx
+++ b/src/app/(marketing)/profile/_hooks/useExperiences.tsx
@@ -5,13 +5,19 @@ import { useProfile } from "./useProfile"
 export const useExperiences = <T extends boolean>({
   count,
   showOwnProfile,
-}: { count: T; showOwnProfile?: boolean }) => {
+  startTime,
+}: { count: T; showOwnProfile?: boolean; startTime?: number }) => {
   const { data: profile } = useProfile(showOwnProfile)
+  const oneMonthBeforeApprox = startTime && startTime - 86400 * 30
+  const params = new URLSearchParams(
+    [
+      ["count", count && count.toString()],
+      ["startTime", oneMonthBeforeApprox && oneMonthBeforeApprox.toString()],
+    ].filter(([_, value]) => value) as string[][]
+  )
   return useSWRImmutable<T extends true ? number : Schemas["Experience"][]>(
     profile
-      ? [`/v2/profiles/${profile.username}/experiences`, count && `count=${count}`]
-          .filter(Boolean)
-          .join("?")
+      ? `/v2/profiles/${profile.username}/experiences?${params.toString()}`
       : null
   )
 }

From d5adb06a687f34d8cad3c683d3e78b854adbb3a7 Mon Sep 17 00:00:00 2001
From: valid <valid@zgen.hu>
Date: Wed, 11 Sep 2024 20:50:37 +0200
Subject: [PATCH 24/29] UI(experiences): impros/fixes

---
 .../profile/_components/ActivityChart.tsx      | 18 ++++++++++--------
 .../profile/_components/LevelBadge.tsx         |  4 +++-
 .../profile/_components/Profile.tsx            | 18 +++++++++++-------
 3 files changed, 24 insertions(+), 16 deletions(-)

diff --git a/src/app/(marketing)/profile/_components/ActivityChart.tsx b/src/app/(marketing)/profile/_components/ActivityChart.tsx
index 86fc92f6d4..5c82ffc034 100644
--- a/src/app/(marketing)/profile/_components/ActivityChart.tsx
+++ b/src/app/(marketing)/profile/_components/ActivityChart.tsx
@@ -6,6 +6,7 @@ import { scaleBand, scaleLinear } from "@visx/scale"
 import { Bar } from "@visx/shape"
 import { useTooltip, useTooltipInPortal } from "@visx/tooltip"
 import { useMemo } from "react"
+import { useExperienceProgression } from "../_hooks/useExperienceProgression"
 import { useExperiences } from "../_hooks/useExperiences"
 
 type TooltipData = Schemas["Experience"]
@@ -22,6 +23,7 @@ export type BarsProps = {
 let tooltipTimeout: number
 export const ActivityChart = ({ width, height }: BarsProps) => {
   const { data: rawData } = useExperiences({ count: false })
+  const xp = useExperienceProgression()
   if (!rawData) return <Skeleton style={{ width, height }} />
   const groupedData = new Map<number, Schemas["Experience"][]>()
   for (const xp of rawData) {
@@ -86,21 +88,21 @@ export const ActivityChart = ({ width, height }: BarsProps) => {
     <div className="relative">
       <svg width={width} height={height} ref={containerRef}>
         <Group top={verticalMargin / 2}>
-          {data.map((xp) => {
-            const x = getX(xp)
+          {data.map((currentXp) => {
+            const x = getX(currentXp)
             const barWidth = xScale.bandwidth()
-            const barHeight = yMax - (yScale(getY(xp)) ?? 0)
+            const barHeight = yMax - (yScale(getY(currentXp)) ?? 0)
             const barX = xScale(x)
             const barY = yMax - barHeight
             return (
               <Bar
                 ry={4}
-                key={xp.id}
+                key={currentXp.id}
                 x={barX}
                 y={barY}
                 width={barWidth}
                 height={barHeight}
-                fill="hsl(var(--primary))"
+                fill={xp?.rank.color}
                 onMouseLeave={() => {
                   tooltipTimeout = window.setTimeout(() => {
                     hideTooltip()
@@ -111,7 +113,7 @@ export const ActivityChart = ({ width, height }: BarsProps) => {
                   const eventSvgCoords = localPoint(event)
                   const left = (barX || 0) + barWidth / 2
                   showTooltip({
-                    tooltipData: xp,
+                    tooltipData: currentXp,
                     tooltipTop: eventSvgCoords?.y,
                     tooltipLeft: left,
                   })
@@ -127,10 +129,10 @@ export const ActivityChart = ({ width, height }: BarsProps) => {
           left={tooltipLeft}
           unstyled
           applyPositionStyle
-          className="rounded border bg-card px-2 py-1"
+          className="rounded border bg-card px-2 py-1 text-sm"
         >
           <strong>+{tooltipData.amount} XP</strong>
-          <div className="text-muted-foreground text-sm">
+          <div className="text-muted-foreground">
             {new Date(tooltipData.createdAt).toLocaleDateString()}
           </div>
         </TooltipInPortal>
diff --git a/src/app/(marketing)/profile/_components/LevelBadge.tsx b/src/app/(marketing)/profile/_components/LevelBadge.tsx
index d9e5e325db..6dd5c734c9 100644
--- a/src/app/(marketing)/profile/_components/LevelBadge.tsx
+++ b/src/app/(marketing)/profile/_components/LevelBadge.tsx
@@ -33,7 +33,9 @@ export const LevelBadge = ({
         color={rank.color}
         className="brightness-75"
       />
-      <span className="-mt-0.5 absolute font-bold font-display">{levelIndex}</span>
+      <span className="-mt-0.5 absolute font-bold font-display text-white">
+        {levelIndex}
+      </span>
     </div>
   )
 }
diff --git a/src/app/(marketing)/profile/_components/Profile.tsx b/src/app/(marketing)/profile/_components/Profile.tsx
index c52b6f9395..52a2c5f664 100644
--- a/src/app/(marketing)/profile/_components/Profile.tsx
+++ b/src/app/(marketing)/profile/_components/Profile.tsx
@@ -36,15 +36,15 @@ export const Profile = () => {
           <SectionTitle>Experience</SectionTitle>
         </div>
         <div className="grid grid-cols-1 gap-3 md:grid-cols-2">
-          <Card className="flex gap-4 p-6">
+          <Card className="flex items-center gap-4 p-6">
             <LevelBadge
               levelIndex={xp.levelIndex}
               rank={xp.rank}
               size="lg"
               className=""
             />
-            <div className="flex grow flex-col gap-2">
-              <div className="flex flex-col justify-between gap-2 sm:flex-row">
+            <div className="-mt-1 flex grow flex-col gap-2">
+              <div className="flex flex-col justify-between sm:flex-row">
                 <h3 className="font-bold capitalize">{xp.rank.title}</h3>
                 <p className="text-muted-foreground">
                   {`${xp.experienceCount} / ${xp.level} XP`}
@@ -58,13 +58,17 @@ export const Profile = () => {
               </ProgressRoot>
             </div>
           </Card>
-          <Card className="space-y-4 p-6">
+          <Card className="space-y-3 p-6 pt-5">
             <div className="flex flex-col items-start justify-between gap-2 sm:flex-row">
               <h3 className="font-bold">Engagement this month</h3>
             </div>
-            <ParentSize>
-              {({ width }) => <ActivityChart width={width} height={42} />}
-            </ParentSize>
+            <div className="h-7">
+              <ParentSize>
+                {({ width, height }) => (
+                  <ActivityChart width={width} height={height} />
+                )}
+              </ParentSize>
+            </div>
           </Card>
         </div>
       </div>

From 74ef133c283b3345006a988c3ffe3e31eb17720e Mon Sep 17 00:00:00 2001
From: Dominik Stumpf <s.dominik.work@gmail.com>
Date: Wed, 11 Sep 2024 21:20:33 +0200
Subject: [PATCH 25/29] fix: reorder useEffect calls, adjust startTime

---
 .../profile/_components/ActivityChart.tsx     | 51 +++++++++++--------
 .../profile/_hooks/useExperiences.tsx         |  3 +-
 2 files changed, 31 insertions(+), 23 deletions(-)

diff --git a/src/app/(marketing)/profile/_components/ActivityChart.tsx b/src/app/(marketing)/profile/_components/ActivityChart.tsx
index 58cdd9e9e0..168aa77320 100644
--- a/src/app/(marketing)/profile/_components/ActivityChart.tsx
+++ b/src/app/(marketing)/profile/_components/ActivityChart.tsx
@@ -21,21 +21,35 @@ export type BarsProps = {
 }
 
 let tooltipTimeout: number
-export const ActivityChart = ({ width, height }: BarsProps) => {
-  const { data: rawData } = useExperiences({ count: false })
+export const ActivityChartChildren = ({
+  width,
+  height,
+  rawData,
+}: BarsProps & {
+  rawData: Schemas["Experience"][]
+}) => {
+  const {
+    tooltipOpen,
+    tooltipLeft,
+    tooltipTop,
+    tooltipData,
+    hideTooltip,
+    showTooltip,
+  } = useTooltip<TooltipData>()
+
+  const { containerRef, TooltipInPortal } = useTooltipInPortal({
+    scroll: true,
+  })
   const xp = useExperienceProgression()
-  if (!rawData) return <Skeleton style={{ width, height }} />
-  if (rawData.length === 0)
-    return <p className="text-muted-foreground">There are no activity this month</p>
   const groupedData = new Map<number, Schemas["Experience"][]>()
-  for (const xp of rawData) {
-    const createdAt = new Date(xp.createdAt)
+  for (const rawXp of rawData) {
+    const createdAt = new Date(rawXp.createdAt)
     const commonDay = new Date(
       createdAt.getFullYear(),
       createdAt.getMonth(),
       createdAt.getDate()
     ).valueOf()
-    groupedData.set(commonDay, [...(groupedData.get(commonDay) ?? []), xp])
+    groupedData.set(commonDay, [...(groupedData.get(commonDay) ?? []), rawXp])
   }
   const data = [...groupedData.entries()]
     .reduce<Schemas["Experience"][]>((acc, [_, xpGroup]) => {
@@ -73,19 +87,6 @@ export const ActivityChart = ({ width, height }: BarsProps) => {
     [yMax]
   )
 
-  const {
-    tooltipOpen,
-    tooltipLeft,
-    tooltipTop,
-    tooltipData,
-    hideTooltip,
-    showTooltip,
-  } = useTooltip<TooltipData>()
-
-  const { containerRef, TooltipInPortal } = useTooltipInPortal({
-    scroll: true,
-  })
-
   return width < 10 ? null : (
     <div className="relative">
       <svg width={width} height={height} ref={containerRef}>
@@ -142,3 +143,11 @@ export const ActivityChart = ({ width, height }: BarsProps) => {
     </div>
   )
 }
+
+export const ActivityChart = ({ width, height }: BarsProps) => {
+  const { data: rawData } = useExperiences({ count: false })
+  if (!rawData) return <Skeleton style={{ width, height }} />
+  if (rawData.length === 0)
+    return <p className="text-muted-foreground">There are no activity this month</p>
+  return <ActivityChartChildren height={height} width={width} rawData={rawData} />
+}
diff --git a/src/app/(marketing)/profile/_hooks/useExperiences.tsx b/src/app/(marketing)/profile/_hooks/useExperiences.tsx
index 8c1851bf06..2a64013e7e 100644
--- a/src/app/(marketing)/profile/_hooks/useExperiences.tsx
+++ b/src/app/(marketing)/profile/_hooks/useExperiences.tsx
@@ -8,11 +8,10 @@ export const useExperiences = <T extends boolean>({
   startTime,
 }: { count: T; showOwnProfile?: boolean; startTime?: number }) => {
   const { data: profile } = useProfile(showOwnProfile)
-  const oneMonthBeforeApprox = startTime && startTime - 86400 * 30
   const params = new URLSearchParams(
     [
       ["count", count && count.toString()],
-      ["startTime", oneMonthBeforeApprox && oneMonthBeforeApprox.toString()],
+      ["startTime", startTime && startTime.toString()],
     ].filter(([_, value]) => value) as string[][]
   )
   return useSWRImmutable<T extends true ? number : Schemas["Experience"][]>(

From 8dc278d157f244787981d20ecbd01aa77029e488 Mon Sep 17 00:00:00 2001
From: valid <valid@zgen.hu>
Date: Thu, 12 Sep 2024 02:04:08 +0200
Subject: [PATCH 26/29] =?UTF-8?q?UI:=20account=20modal=20&=C2=A0progress?=
 =?UTF-8?q?=20refinements?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/app/globals.css                                         | 1 +
 src/v2/components/Account/Account.tsx                       | 4 +---
 .../Account/components/AccountModal/AccountModal.tsx        | 6 +++---
 src/v2/components/CircularProgressBar.tsx                   | 4 +++-
 4 files changed, 8 insertions(+), 7 deletions(-)

diff --git a/src/app/globals.css b/src/app/globals.css
index 49ea1b38f0..10896b5ba3 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -92,6 +92,7 @@
     /* we plan to add the whole alpha color palettes */
     --whiteAlpha-800: rgba(255, 255, 255, 0.80);
     --blackAlpha-800: rgba(0, 0, 0, 0.80);
+    --blackAlpha-300: rgba(0, 0, 0, 0.30);
 
     --discord: 233 78% 63%;
     --discord-hover: 243 75% 59%;
diff --git a/src/v2/components/Account/Account.tsx b/src/v2/components/Account/Account.tsx
index 8f1a4aff18..714b4f61db 100644
--- a/src/v2/components/Account/Account.tsx
+++ b/src/v2/components/Account/Account.tsx
@@ -3,7 +3,6 @@
 import { CircularProgressBar } from "@/components/CircularProgressBar"
 import { useDisclosure } from "@/hooks/useDisclosure"
 import { cn } from "@/lib/utils"
-import { LevelBadge } from "@app/(marketing)/profile/_components/LevelBadge"
 import { useExperienceProgression } from "@app/(marketing)/profile/_hooks/useExperienceProgression"
 import { Bell } from "@phosphor-icons/react"
 import { SignIn } from "@phosphor-icons/react/dist/ssr"
@@ -85,7 +84,7 @@ export const Account = () => {
       >
         {guildProfile ? (
           <div className="flex items-center gap-2">
-            <div className="relative p-1">
+            <div className="relative p-0.5">
               {xp && (
                 <CircularProgressBar
                   className="absolute inset-0 size-full"
@@ -110,7 +109,6 @@ export const Account = () => {
                   : `@${guildProfile.username}`}
               </div>
             </div>
-            {xp && <LevelBadge levelIndex={xp.levelIndex} rank={xp.rank} />}
           </div>
         ) : (
           <div className="flex items-center gap-3">
diff --git a/src/v2/components/Account/components/AccountModal/AccountModal.tsx b/src/v2/components/Account/components/AccountModal/AccountModal.tsx
index ebca4ff998..b98c62c874 100644
--- a/src/v2/components/Account/components/AccountModal/AccountModal.tsx
+++ b/src/v2/components/Account/components/AccountModal/AccountModal.tsx
@@ -96,7 +96,7 @@ const AccountModal = () => {
                       />
                       <Avatar
                         size="2xl"
-                        className="m-2 flex items-center justify-center rounded-full border-2"
+                        className="m-1.5 flex items-center justify-center rounded-full border"
                       >
                         <ProfileAvatar
                           username={guildProfile.username}
@@ -106,11 +106,11 @@ const AccountModal = () => {
                       <LevelBadge
                         levelIndex={xp.levelIndex}
                         rank={xp.rank}
-                        className="absolute right-0 bottom-0 size-8"
+                        className="absolute right-0.5 bottom-0.5"
                       />
                     </div>
                   )}
-                  <div className="flex w-full flex-col">
+                  <div className="flex w-full flex-col justify-center">
                     <h3 className=" flex items-center font-bold">
                       <span className="max-w-52 truncate">
                         {guildProfile.name || guildProfile.username}
diff --git a/src/v2/components/CircularProgressBar.tsx b/src/v2/components/CircularProgressBar.tsx
index eeffaa2d0d..ca0bda90b0 100644
--- a/src/v2/components/CircularProgressBar.tsx
+++ b/src/v2/components/CircularProgressBar.tsx
@@ -29,7 +29,9 @@ export const CircularProgressBar: React.FC<CircularProgressBarProps> = ({
       className={className}
     >
       <circle
-        className={cn({ "stroke-background": !bgColor })}
+        className={cn({
+          "stroke-background dark:stroke-[var(--blackAlpha-300)]": !bgColor,
+        })}
         cx={size / 2}
         cy={size / 2}
         r={radius}

From c8aebdc3a5cee9fba3fe4227dc49039e589566d0 Mon Sep 17 00:00:00 2001
From: valid <valid@zgen.hu>
Date: Thu, 12 Sep 2024 02:04:42 +0200
Subject: [PATCH 27/29] cleanup(LevelBadge): duplicated text style

---
 src/app/(marketing)/profile/_components/LevelBadge.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/app/(marketing)/profile/_components/LevelBadge.tsx b/src/app/(marketing)/profile/_components/LevelBadge.tsx
index 6dd5c734c9..05f733369f 100644
--- a/src/app/(marketing)/profile/_components/LevelBadge.tsx
+++ b/src/app/(marketing)/profile/_components/LevelBadge.tsx
@@ -5,7 +5,7 @@ import { Rank } from "../[username]/types"
 const levelBadgeVariants = cva("flex items-center justify-center", {
   variants: {
     size: {
-      md: "text-md size-7 text-xs",
+      md: "size-7 text-xs",
       lg: "text-lg md:text-xl size-10 md:size-12",
     },
   },

From 8c76f50a1e86ca76a819dfcce7d87cfb8429fa62 Mon Sep 17 00:00:00 2001
From: valid <valid@zgen.hu>
Date: Thu, 12 Sep 2024 02:09:13 +0200
Subject: [PATCH 28/29] copy(ActivityChart): fallback fix

---
 src/app/(marketing)/profile/_components/ActivityChart.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/app/(marketing)/profile/_components/ActivityChart.tsx b/src/app/(marketing)/profile/_components/ActivityChart.tsx
index 168aa77320..2c87eeb6d5 100644
--- a/src/app/(marketing)/profile/_components/ActivityChart.tsx
+++ b/src/app/(marketing)/profile/_components/ActivityChart.tsx
@@ -148,6 +148,6 @@ export const ActivityChart = ({ width, height }: BarsProps) => {
   const { data: rawData } = useExperiences({ count: false })
   if (!rawData) return <Skeleton style={{ width, height }} />
   if (rawData.length === 0)
-    return <p className="text-muted-foreground">There are no activity this month</p>
+    return <p className="text-muted-foreground">There's no activity this month</p>
   return <ActivityChartChildren height={height} width={width} rawData={rawData} />
 }

From caba6ee800202d7754c0aec3b04eb67458c2fdfa Mon Sep 17 00:00:00 2001
From: valid <valid@zgen.hu>
Date: Thu, 12 Sep 2024 02:16:37 +0200
Subject: [PATCH 29/29] ActivityChart batching / fallback rendering impro

---
 .../profile/_components/ActivityChart.tsx     | 21 +++++++++++++++----
 .../profile/_components/Profile.tsx           |  9 +-------
 2 files changed, 18 insertions(+), 12 deletions(-)

diff --git a/src/app/(marketing)/profile/_components/ActivityChart.tsx b/src/app/(marketing)/profile/_components/ActivityChart.tsx
index 2c87eeb6d5..b1c2a7bb46 100644
--- a/src/app/(marketing)/profile/_components/ActivityChart.tsx
+++ b/src/app/(marketing)/profile/_components/ActivityChart.tsx
@@ -2,6 +2,7 @@ import { Skeleton } from "@/components/ui/Skeleton"
 import { Schemas } from "@guildxyz/types"
 import { localPoint } from "@visx/event"
 import { Group } from "@visx/group"
+import ParentSize from "@visx/responsive/lib/components/ParentSize"
 import { scaleBand, scaleLinear } from "@visx/scale"
 import { Bar } from "@visx/shape"
 import { useTooltip, useTooltipInPortal } from "@visx/tooltip"
@@ -21,7 +22,8 @@ export type BarsProps = {
 }
 
 let tooltipTimeout: number
-export const ActivityChartChildren = ({
+
+const ActivityChartChildren = ({
   width,
   height,
   rawData,
@@ -144,10 +146,21 @@ export const ActivityChartChildren = ({
   )
 }
 
-export const ActivityChart = ({ width, height }: BarsProps) => {
+export const ActivityChart = () => {
   const { data: rawData } = useExperiences({ count: false })
-  if (!rawData) return <Skeleton style={{ width, height }} />
+
+  if (!rawData) return <Skeleton className="h-7 w-full" />
+
   if (rawData.length === 0)
     return <p className="text-muted-foreground">There's no activity this month</p>
-  return <ActivityChartChildren height={height} width={width} rawData={rawData} />
+
+  return (
+    <div className="h-7">
+      <ParentSize>
+        {({ width, height }) => (
+          <ActivityChartChildren height={height} width={width} rawData={rawData} />
+        )}
+      </ParentSize>
+    </div>
+  )
 }
diff --git a/src/app/(marketing)/profile/_components/Profile.tsx b/src/app/(marketing)/profile/_components/Profile.tsx
index 52a2c5f664..69f57b5b48 100644
--- a/src/app/(marketing)/profile/_components/Profile.tsx
+++ b/src/app/(marketing)/profile/_components/Profile.tsx
@@ -4,7 +4,6 @@ import { Card } from "@/components/ui/Card"
 import { ProgressIndicator, ProgressRoot } from "@/components/ui/Progress"
 import { cn } from "@/lib/utils"
 import { Info } from "@phosphor-icons/react"
-import ParentSize from "@visx/responsive/lib/components/ParentSize"
 import { PropsWithChildren } from "react"
 import { ContributionCard } from "../_components/ContributionCard"
 import { EditContributions } from "../_components/EditContributions"
@@ -62,13 +61,7 @@ export const Profile = () => {
             <div className="flex flex-col items-start justify-between gap-2 sm:flex-row">
               <h3 className="font-bold">Engagement this month</h3>
             </div>
-            <div className="h-7">
-              <ParentSize>
-                {({ width, height }) => (
-                  <ActivityChart width={width} height={height} />
-                )}
-              </ParentSize>
-            </div>
+            <ActivityChart />
           </Card>
         </div>
       </div>