From d8981256117d54a5f70dd7237c3c225e64c580d4 Mon Sep 17 00:00:00 2001
From: Dominik Stumpf <s.dominik.work@gmail.com>
Date: Thu, 18 Jul 2024 22:44:48 +0200
Subject: [PATCH 01/87] feat: add chart and start profile page

---
 package.json                         |   2 +
 src/app/(marketing)/profile/page.tsx |  69 +++++-
 src/app/globals.css                  |  12 +
 src/v2/components/ui/Chart.tsx       | 351 +++++++++++++++++++++++++++
 4 files changed, 433 insertions(+), 1 deletion(-)
 create mode 100644 src/v2/components/ui/Chart.tsx

diff --git a/package.json b/package.json
index 8346d65f69..e03e195ed6 100644
--- a/package.json
+++ b/package.json
@@ -90,6 +90,7 @@
     "jotai": "^2.7.0",
     "js-confetti": "^0.11.0",
     "lexical": "^0.12.0",
+    "lucide-react": "^0.408.0",
     "mini-svg-data-uri": "^1.4.4",
     "next": "^14.2.4",
     "next-themes": "^0.3.0",
@@ -109,6 +110,7 @@
     "react-markdown": "^8.0.7",
     "react-papaparse": "^4.4.0",
     "react-window": "^1.8.8",
+    "recharts": "^2.12.7",
     "remark-gfm": "^4.0.0",
     "slugify": "^1.6.5",
     "swr": "^2.2.4",
diff --git a/src/app/(marketing)/profile/page.tsx b/src/app/(marketing)/profile/page.tsx
index 50f5e2c58a..59704faa69 100644
--- a/src/app/(marketing)/profile/page.tsx
+++ b/src/app/(marketing)/profile/page.tsx
@@ -1,5 +1,72 @@
+"use client"
+
+import { Layout } from "@/components/Layout"
+import { Avatar, AvatarFallback } from "@/components/ui/Avatar"
+import { ChartConfig, ChartContainer } from "@/components/ui/Chart"
+import { PolarGrid, PolarRadiusAxis, RadialBar, RadialBarChart } from "recharts"
+
+const chartData = [{ browser: "safari", visitors: 200, fill: "hsl(var(--primary))" }]
+
+const chartConfig = {
+  visitors: {
+    label: "Visitors",
+  },
+  safari: {
+    label: "Safari",
+    color: "hsl(var(--chart-2))",
+  },
+} satisfies ChartConfig
+
 const Page = () => {
-  return <>profile</>
+  return (
+    <Layout.Root className="relative min-h-screen">
+      <Layout.Hero>
+        <Layout.Header />
+        <Layout.Banner offset={100} className="border-border border-b border-dashed">
+          <div className="absolute inset-0 bg-[auto_115%] bg-[top_5px_right_0] bg-[url('/banner.svg')] opacity-10" />
+        </Layout.Banner>
+      </Layout.Hero>
+      <Layout.Main>
+        <div className="flex flex-col items-center gap-2">
+          <div className="mb-8">
+            <ChartContainer
+              config={chartConfig}
+              className="aspect-square size-56 outline"
+            >
+              <RadialBarChart
+                data={chartData}
+                startAngle={0}
+                endAngle={100}
+                innerRadius={80}
+                outerRadius={110}
+              >
+                <PolarGrid
+                  gridType="circle"
+                  radialLines={false}
+                  stroke="none"
+                  className="first:fill-muted last:fill-background"
+                  polarRadius={[86, 74]}
+                />
+                <RadialBar dataKey="visitors" background cornerRadius={10} />
+                <PolarRadiusAxis tick={false} tickLine={false} axisLine={false} />
+              </RadialBarChart>
+            </ChartContainer>
+            <Avatar className="size-48">
+              <AvatarFallback>#</AvatarFallback>
+            </Avatar>
+          </div>
+          <h1 className="whitespace-nowrap font-bold text-4xl tracking-tighter">
+            Maximillian Xiaohua Longname
+          </h1>
+          <div className="text-muted-foreground">@stephaniexixo11</div>
+          <p className="mt-6 max-w-md text-pretty text-center text-lg text-muted-foreground">
+            This is a description that perfectly matches the 80 character description
+            limit.
+          </p>
+        </div>
+      </Layout.Main>
+    </Layout.Root>
+  )
 }
 
 // biome-ignore lint/style/noDefaultExport: page route
diff --git a/src/app/globals.css b/src/app/globals.css
index 474ecd15ab..28da18b552 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -112,6 +112,12 @@
     --md: 768px;
     --lg: 1024px;
     --xl: 1280px;
+
+    --chart-1: 12 76% 61%;
+    --chart-2: 173 58% 39%;
+    --chart-3: 197 37% 24%;
+    --chart-4: 43 74% 66%;
+    --chart-5: 27 87% 67%;
   }
 
   :root[data-theme="dark"] {
@@ -207,6 +213,12 @@
     --polygonid-active: 262 81% 77%;
     --farcaster-hover: 239 75% 75%;
     --farcaster-active: 238 76% 81%;
+
+    --chart-1: 220 70% 50%;
+    --chart-2: 160 60% 45%;
+    --chart-3: 30 80% 55%;
+    --chart-4: 280 65% 60%;
+    --chart-5: 340 75% 55%;
   }
 }
 
diff --git a/src/v2/components/ui/Chart.tsx b/src/v2/components/ui/Chart.tsx
new file mode 100644
index 0000000000..642228c89c
--- /dev/null
+++ b/src/v2/components/ui/Chart.tsx
@@ -0,0 +1,351 @@
+"use client"
+
+import * as React from "react"
+import * as RechartsPrimitive from "recharts"
+
+import { cn } from "@/lib/utils"
+
+// Format: { THEME_NAME: CSS_SELECTOR }
+const THEMES = { light: "", dark: ".dark" } as const
+
+export type ChartConfig = {
+  [k in string]: {
+    label?: React.ReactNode
+    icon?: React.ComponentType
+  } & (
+    | { color?: string; theme?: never }
+    | { color?: never; theme: Record<keyof typeof THEMES, string> }
+  )
+}
+
+type ChartContextProps = {
+  config: ChartConfig
+}
+
+const ChartContext = React.createContext<ChartContextProps | null>(null)
+
+function useChart() {
+  const context = React.useContext(ChartContext)
+
+  if (!context) {
+    throw new Error("useChart must be used within a <ChartContainer />")
+  }
+
+  return context
+}
+
+const ChartContainer = React.forwardRef<
+  HTMLDivElement,
+  React.ComponentProps<"div"> & {
+    config: ChartConfig
+    children: React.ComponentProps<
+      typeof RechartsPrimitive.ResponsiveContainer
+    >["children"]
+  }
+>(({ id, className, children, config, ...props }, ref) => {
+  const uniqueId = React.useId()
+  const chartId = `chart-${id || uniqueId.replace(/:/g, "")}`
+
+  return (
+    <ChartContext.Provider value={{ config }}>
+      <div
+        data-chart={chartId}
+        ref={ref}
+        className={cn(
+          "flex aspect-video justify-center text-xs [&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-none [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_[stroke='#ccc']]:stroke-border [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-sector]:outline-none [&_.recharts-surface]:outline-none",
+          className
+        )}
+        {...props}
+      >
+        <ChartStyle id={chartId} config={config} />
+        <RechartsPrimitive.ResponsiveContainer>
+          {children}
+        </RechartsPrimitive.ResponsiveContainer>
+      </div>
+    </ChartContext.Provider>
+  )
+})
+ChartContainer.displayName = "Chart"
+
+const ChartStyle = ({ id, config }: { id: string; config: ChartConfig }) => {
+  const colorConfig = Object.entries(config).filter(
+    ([_, config]) => config.theme || config.color
+  )
+
+  if (!colorConfig.length) {
+    return null
+  }
+
+  return (
+    <style
+      dangerouslySetInnerHTML={{
+        __html: Object.entries(THEMES)
+          .map(
+            ([theme, prefix]) => `
+${prefix} [data-chart=${id}] {
+${colorConfig
+  .map(([key, itemConfig]) => {
+    const color =
+      itemConfig.theme?.[theme as keyof typeof itemConfig.theme] || itemConfig.color
+    return color ? `  --color-${key}: ${color};` : null
+  })
+  .join("\n")}
+}
+`
+          )
+          .join("\n"),
+      }}
+    />
+  )
+}
+
+const ChartTooltip = RechartsPrimitive.Tooltip
+
+const ChartTooltipContent = React.forwardRef<
+  HTMLDivElement,
+  React.ComponentProps<typeof RechartsPrimitive.Tooltip> &
+    React.ComponentProps<"div"> & {
+      hideLabel?: boolean
+      hideIndicator?: boolean
+      indicator?: "line" | "dot" | "dashed"
+      nameKey?: string
+      labelKey?: string
+    }
+>(
+  (
+    {
+      active,
+      payload,
+      className,
+      indicator = "dot",
+      hideLabel = false,
+      hideIndicator = false,
+      label,
+      labelFormatter,
+      labelClassName,
+      formatter,
+      color,
+      nameKey,
+      labelKey,
+    },
+    ref
+  ) => {
+    const { config } = useChart()
+
+    const tooltipLabel = React.useMemo(() => {
+      if (hideLabel || !payload?.length) {
+        return null
+      }
+
+      const [item] = payload
+      const key = `${labelKey || item.dataKey || item.name || "value"}`
+      const itemConfig = getPayloadConfigFromPayload(config, item, key)
+      const value =
+        !labelKey && typeof label === "string"
+          ? config[label as keyof typeof config]?.label || label
+          : itemConfig?.label
+
+      if (labelFormatter) {
+        return (
+          <div className={cn("font-medium", labelClassName)}>
+            {labelFormatter(value, payload)}
+          </div>
+        )
+      }
+
+      if (!value) {
+        return null
+      }
+
+      return <div className={cn("font-medium", labelClassName)}>{value}</div>
+    }, [label, labelFormatter, payload, hideLabel, labelClassName, config, labelKey])
+
+    if (!active || !payload?.length) {
+      return null
+    }
+
+    const nestLabel = payload.length === 1 && indicator !== "dot"
+
+    return (
+      <div
+        ref={ref}
+        className={cn(
+          "grid min-w-[8rem] items-start gap-1.5 rounded-lg border border-border/50 bg-background px-2.5 py-1.5 text-xs shadow-xl",
+          className
+        )}
+      >
+        {!nestLabel ? tooltipLabel : null}
+        <div className="grid gap-1.5">
+          {payload.map((item, index) => {
+            const key = `${nameKey || item.name || item.dataKey || "value"}`
+            const itemConfig = getPayloadConfigFromPayload(config, item, key)
+            const indicatorColor = color || item.payload.fill || item.color
+
+            return (
+              <div
+                key={item.dataKey}
+                className={cn(
+                  "flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5 [&>svg]:text-muted-foreground",
+                  indicator === "dot" && "items-center"
+                )}
+              >
+                {formatter && item?.value !== undefined && item.name ? (
+                  formatter(item.value, item.name, item, index, item.payload)
+                ) : (
+                  <>
+                    {itemConfig?.icon ? (
+                      <itemConfig.icon />
+                    ) : (
+                      !hideIndicator && (
+                        <div
+                          className={cn(
+                            "shrink-0 rounded-[2px] border-[--color-border] bg-[--color-bg]",
+                            {
+                              "h-2.5 w-2.5": indicator === "dot",
+                              "w-1": indicator === "line",
+                              "w-0 border-[1.5px] border-dashed bg-transparent":
+                                indicator === "dashed",
+                              "my-0.5": nestLabel && indicator === "dashed",
+                            }
+                          )}
+                          style={
+                            {
+                              "--color-bg": indicatorColor,
+                              "--color-border": indicatorColor,
+                            } as React.CSSProperties
+                          }
+                        />
+                      )
+                    )}
+                    <div
+                      className={cn(
+                        "flex flex-1 justify-between leading-none",
+                        nestLabel ? "items-end" : "items-center"
+                      )}
+                    >
+                      <div className="grid gap-1.5">
+                        {nestLabel ? tooltipLabel : null}
+                        <span className="text-muted-foreground">
+                          {itemConfig?.label || item.name}
+                        </span>
+                      </div>
+                      {item.value && (
+                        <span className="font-medium font-mono text-foreground tabular-nums">
+                          {item.value.toLocaleString()}
+                        </span>
+                      )}
+                    </div>
+                  </>
+                )}
+              </div>
+            )
+          })}
+        </div>
+      </div>
+    )
+  }
+)
+ChartTooltipContent.displayName = "ChartTooltip"
+
+const ChartLegend = RechartsPrimitive.Legend
+
+const ChartLegendContent = React.forwardRef<
+  HTMLDivElement,
+  React.ComponentProps<"div"> &
+    Pick<RechartsPrimitive.LegendProps, "payload" | "verticalAlign"> & {
+      hideIcon?: boolean
+      nameKey?: string
+    }
+>(
+  (
+    { className, hideIcon = false, payload, verticalAlign = "bottom", nameKey },
+    ref
+  ) => {
+    const { config } = useChart()
+
+    if (!payload?.length) {
+      return null
+    }
+
+    return (
+      <div
+        ref={ref}
+        className={cn(
+          "flex items-center justify-center gap-4",
+          verticalAlign === "top" ? "pb-3" : "pt-3",
+          className
+        )}
+      >
+        {payload.map((item) => {
+          const key = `${nameKey || item.dataKey || "value"}`
+          const itemConfig = getPayloadConfigFromPayload(config, item, key)
+
+          return (
+            <div
+              key={item.value}
+              className={cn(
+                "flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3 [&>svg]:text-muted-foreground"
+              )}
+            >
+              {itemConfig?.icon && !hideIcon ? (
+                <itemConfig.icon />
+              ) : (
+                <div
+                  className="h-2 w-2 shrink-0 rounded-[2px]"
+                  style={{
+                    backgroundColor: item.color,
+                  }}
+                />
+              )}
+              {itemConfig?.label}
+            </div>
+          )
+        })}
+      </div>
+    )
+  }
+)
+ChartLegendContent.displayName = "ChartLegend"
+
+// Helper to extract item config from a payload.
+function getPayloadConfigFromPayload(
+  config: ChartConfig,
+  payload: unknown,
+  key: string
+) {
+  if (typeof payload !== "object" || payload === null) {
+    return undefined
+  }
+
+  const payloadPayload =
+    "payload" in payload &&
+    typeof payload.payload === "object" &&
+    payload.payload !== null
+      ? payload.payload
+      : undefined
+
+  let configLabelKey: string = key
+
+  if (key in payload && typeof payload[key as keyof typeof payload] === "string") {
+    configLabelKey = payload[key as keyof typeof payload] as string
+  } else if (
+    payloadPayload &&
+    key in payloadPayload &&
+    typeof payloadPayload[key as keyof typeof payloadPayload] === "string"
+  ) {
+    configLabelKey = payloadPayload[key as keyof typeof payloadPayload] as string
+  }
+
+  return configLabelKey in config
+    ? config[configLabelKey]
+    : config[key as keyof typeof config]
+}
+
+export {
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+  ChartLegend,
+  ChartLegendContent,
+  ChartStyle,
+}

From 0ff85d4e68d00aeaee4eeac705a0453157ce314c Mon Sep 17 00:00:00 2001
From: Dominik Stumpf <s.dominik.work@gmail.com>
Date: Fri, 19 Jul 2024 21:06:14 +0200
Subject: [PATCH 02/87] chore: build up profile main section

---
 src/app/(marketing)/profile/page.tsx | 95 ++++++++++++++++++----------
 1 file changed, 62 insertions(+), 33 deletions(-)

diff --git a/src/app/(marketing)/profile/page.tsx b/src/app/(marketing)/profile/page.tsx
index 59704faa69..5269f18bb5 100644
--- a/src/app/(marketing)/profile/page.tsx
+++ b/src/app/(marketing)/profile/page.tsx
@@ -2,20 +2,13 @@
 
 import { Layout } from "@/components/Layout"
 import { Avatar, AvatarFallback } from "@/components/ui/Avatar"
-import { ChartConfig, ChartContainer } from "@/components/ui/Chart"
-import { PolarGrid, PolarRadiusAxis, RadialBar, RadialBarChart } from "recharts"
+import { Card } from "@/components/ui/Card"
+import { ChartContainer } from "@/components/ui/Chart"
+import { Separator } from "@/components/ui/Separator"
+import { CircleWavyCheck } from "@phosphor-icons/react"
+import { RadialBar, RadialBarChart } from "recharts"
 
-const chartData = [{ browser: "safari", visitors: 200, fill: "hsl(var(--primary))" }]
-
-const chartConfig = {
-  visitors: {
-    label: "Visitors",
-  },
-  safari: {
-    label: "Safari",
-    color: "hsl(var(--chart-2))",
-  },
-} satisfies ChartConfig
+const chartData = [{ experience: 1, fill: "hsl(var(--primary))" }]
 
 const Page = () => {
   return (
@@ -27,42 +20,78 @@ const Page = () => {
         </Layout.Banner>
       </Layout.Hero>
       <Layout.Main>
-        <div className="flex flex-col items-center gap-2">
-          <div className="mb-8">
+        <div className="flex flex-col items-center">
+          <div className="relative mb-12 flex items-center justify-center">
             <ChartContainer
-              config={chartConfig}
-              className="aspect-square size-56 outline"
+              config={{}}
+              className="-rotate-90 absolute aspect-square min-h-56"
             >
               <RadialBarChart
                 data={chartData}
                 startAngle={0}
-                endAngle={100}
-                innerRadius={80}
-                outerRadius={110}
+                endAngle={280}
+                innerRadius={105}
+                outerRadius={115}
               >
-                <PolarGrid
-                  gridType="circle"
-                  radialLines={false}
-                  stroke="none"
-                  className="first:fill-muted last:fill-background"
-                  polarRadius={[86, 74]}
-                />
-                <RadialBar dataKey="visitors" background cornerRadius={10} />
-                <PolarRadiusAxis tick={false} tickLine={false} axisLine={false} />
+                <RadialBar dataKey="experience" cornerRadius={10} />
               </RadialBarChart>
             </ChartContainer>
             <Avatar className="size-48">
               <AvatarFallback>#</AvatarFallback>
             </Avatar>
+            <div className="absolute right-0 bottom-0 flex size-12 items-center justify-center rounded-xl bg-primary font-extrabold text-xl shadow-lg">
+              22
+            </div>
+          </div>
+          <div className="flex items-center gap-2">
+            <h1 className="whitespace-nowrap font-bold text-3xl tracking-tighter">
+              Maximillian Xiaohua Longname
+            </h1>
+            <CircleWavyCheck
+              weight="fill"
+              className="relative size-6 fill-yellow-500"
+            />
           </div>
-          <h1 className="whitespace-nowrap font-bold text-4xl tracking-tighter">
-            Maximillian Xiaohua Longname
-          </h1>
           <div className="text-muted-foreground">@stephaniexixo11</div>
-          <p className="mt-6 max-w-md text-pretty text-center text-lg text-muted-foreground">
+          <p className="mt-6 max-w-md text-pretty text-center text-md text-muted-foreground">
             This is a description that perfectly matches the 80 character description
             limit.
           </p>
+          <div className="mt-8 flex justify-center gap-4">
+            <div className="flex flex-col items-center leading-tight">
+              <div className="font-bold text-lg">3232</div>
+              <div className="text-muted-foreground">Guildmates</div>
+            </div>
+            <Separator orientation="vertical" />
+            <div className="flex flex-col items-center leading-tight">
+              <div className="font-bold text-lg">0</div>
+              <div className="text-muted-foreground">Followers</div>
+            </div>
+            <Separator orientation="vertical" />
+            <div className="flex items-center gap-2">
+              <Avatar>
+                <AvatarFallback>#</AvatarFallback>
+              </Avatar>
+              <div className="text-muted-foreground leading-tight">
+                Followed by <span className="font-bold">Hoho</span>,<br />
+                <span className="font-bold">Hihi</span> and 22 others
+              </div>
+            </div>
+          </div>
+          <Separator className="mt-16 mb-8" />
+          <div className="w-full">
+            <h2 className="mb-3 font-bold text-lg">Experience</h2>
+            <div className="grid grid-cols-2 gap-3">
+              <Card className="p-6">
+                <h3 className="font-bold">Champion</h3>
+                <p className="text-muted-foreground">Description</p>
+              </Card>
+              <Card className="p-6">
+                <h3>Engagement this month</h3>
+              </Card>
+            </div>
+          </div>
+          <Separator className="mt-16 mb-8" />
         </div>
       </Layout.Main>
     </Layout.Root>

From ae22328eab8c9d2bf1c68c4bc2b2dc809fe1a987 Mon Sep 17 00:00:00 2001
From: Dominik Stumpf <s.dominik.work@gmail.com>
Date: Fri, 19 Jul 2024 21:16:27 +0200
Subject: [PATCH 03/87] chore: adjust css to design

---
 src/app/(marketing)/profile/page.tsx | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/app/(marketing)/profile/page.tsx b/src/app/(marketing)/profile/page.tsx
index 5269f18bb5..f96de97d26 100644
--- a/src/app/(marketing)/profile/page.tsx
+++ b/src/app/(marketing)/profile/page.tsx
@@ -44,7 +44,7 @@ const Page = () => {
             </div>
           </div>
           <div className="flex items-center gap-2">
-            <h1 className="whitespace-nowrap font-bold text-3xl tracking-tighter">
+            <h1 className="whitespace-nowrap font-bold text-4xl leading-normal tracking-tight">
               Maximillian Xiaohua Longname
             </h1>
             <CircleWavyCheck
@@ -52,12 +52,12 @@ const Page = () => {
               className="relative size-6 fill-yellow-500"
             />
           </div>
-          <div className="text-muted-foreground">@stephaniexixo11</div>
-          <p className="mt-6 max-w-md text-pretty text-center text-md text-muted-foreground">
+          <div className="text-lg text-muted-foreground">@stephaniexixo11</div>
+          <p className="mt-6 max-w-md text-pretty text-center text-lg text-muted-foreground">
             This is a description that perfectly matches the 80 character description
             limit.
           </p>
-          <div className="mt-8 flex justify-center gap-4">
+          <div className="mt-8 flex h-12 items-center justify-center gap-8">
             <div className="flex flex-col items-center leading-tight">
               <div className="font-bold text-lg">3232</div>
               <div className="text-muted-foreground">Guildmates</div>

From 8aba3ca4d86ab9c066cd6a5a1f35e8f571e42e15 Mon Sep 17 00:00:00 2001
From: Dominik Stumpf <s.dominik.work@gmail.com>
Date: Fri, 19 Jul 2024 21:57:59 +0200
Subject: [PATCH 04/87] chore: add mobile view

---
 src/app/(marketing)/profile/page.tsx       | 131 +++++++++++----------
 src/v2/components/Layout/Layout.tsx        |  84 ++++++-------
 src/v2/components/Layout/PageContainer.tsx |  21 ++++
 src/v2/components/Layout/index.ts          |  13 +-
 4 files changed, 138 insertions(+), 111 deletions(-)
 create mode 100644 src/v2/components/Layout/PageContainer.tsx

diff --git a/src/app/(marketing)/profile/page.tsx b/src/app/(marketing)/profile/page.tsx
index f96de97d26..cfc1231dfd 100644
--- a/src/app/(marketing)/profile/page.tsx
+++ b/src/app/(marketing)/profile/page.tsx
@@ -1,6 +1,12 @@
 "use client"
 
-import { Layout } from "@/components/Layout"
+import {
+  Layout,
+  LayoutBanner,
+  LayoutHeader,
+  LayoutHero,
+  LayoutMain,
+} from "@/components/Layout"
 import { Avatar, AvatarFallback } from "@/components/ui/Avatar"
 import { Card } from "@/components/ui/Card"
 import { ChartContainer } from "@/components/ui/Chart"
@@ -12,69 +18,70 @@ const chartData = [{ experience: 1, fill: "hsl(var(--primary))" }]
 
 const Page = () => {
   return (
-    <Layout.Root className="relative min-h-screen">
-      <Layout.Hero>
-        <Layout.Header />
-        <Layout.Banner offset={100} className="border-border border-b border-dashed">
-          <div className="absolute inset-0 bg-[auto_115%] bg-[top_5px_right_0] bg-[url('/banner.svg')] opacity-10" />
-        </Layout.Banner>
-      </Layout.Hero>
-      <Layout.Main>
-        <div className="flex flex-col items-center">
-          <div className="relative mb-12 flex items-center justify-center">
-            <ChartContainer
-              config={{}}
-              className="-rotate-90 absolute aspect-square min-h-56"
-            >
-              <RadialBarChart
-                data={chartData}
-                startAngle={0}
-                endAngle={280}
-                innerRadius={105}
-                outerRadius={115}
+    <Layout>
+      <LayoutHero>
+        <LayoutHeader />
+        <LayoutBanner className="-bottom-[500px]">
+          <div className="absolute inset-0 bg-[url('/banner.svg')] opacity-10" />
+          <div className="absolute inset-0 bg-gradient-to-t from-background" />
+        </LayoutBanner>
+      </LayoutHero>
+      <LayoutMain>
+        <div className="mt-24">
+          <div className="flex flex-col items-center">
+            <div className="relative mb-12 flex items-center justify-center">
+              <ChartContainer
+                config={{}}
+                className="-rotate-90 absolute aspect-square min-h-56"
               >
-                <RadialBar dataKey="experience" cornerRadius={10} />
-              </RadialBarChart>
-            </ChartContainer>
-            <Avatar className="size-48">
-              <AvatarFallback>#</AvatarFallback>
-            </Avatar>
-            <div className="absolute right-0 bottom-0 flex size-12 items-center justify-center rounded-xl bg-primary font-extrabold text-xl shadow-lg">
-              22
+                <RadialBarChart
+                  data={chartData}
+                  startAngle={0}
+                  endAngle={280}
+                  innerRadius={105}
+                  outerRadius={115}
+                >
+                  <RadialBar dataKey="experience" cornerRadius={10} />
+                </RadialBarChart>
+              </ChartContainer>
+              <Avatar className="size-48">
+                <AvatarFallback>#</AvatarFallback>
+              </Avatar>
+              <div className="absolute right-0 bottom-0 flex size-12 items-center justify-center rounded-xl bg-primary font-extrabold text-xl shadow-lg">
+                22
+              </div>
             </div>
-          </div>
-          <div className="flex items-center gap-2">
-            <h1 className="whitespace-nowrap font-bold text-4xl leading-normal tracking-tight">
+            <h1 className="text-center font-bold text-4xl leading-normal tracking-tight">
               Maximillian Xiaohua Longname
+              <CircleWavyCheck
+                weight="fill"
+                className="ml-4 inline size-6 fill-yellow-500"
+              />
             </h1>
-            <CircleWavyCheck
-              weight="fill"
-              className="relative size-6 fill-yellow-500"
-            />
-          </div>
-          <div className="text-lg text-muted-foreground">@stephaniexixo11</div>
-          <p className="mt-6 max-w-md text-pretty text-center text-lg text-muted-foreground">
-            This is a description that perfectly matches the 80 character description
-            limit.
-          </p>
-          <div className="mt-8 flex h-12 items-center justify-center gap-8">
-            <div className="flex flex-col items-center leading-tight">
-              <div className="font-bold text-lg">3232</div>
-              <div className="text-muted-foreground">Guildmates</div>
-            </div>
-            <Separator orientation="vertical" />
-            <div className="flex flex-col items-center leading-tight">
-              <div className="font-bold text-lg">0</div>
-              <div className="text-muted-foreground">Followers</div>
-            </div>
-            <Separator orientation="vertical" />
-            <div className="flex items-center gap-2">
-              <Avatar>
-                <AvatarFallback>#</AvatarFallback>
-              </Avatar>
-              <div className="text-muted-foreground leading-tight">
-                Followed by <span className="font-bold">Hoho</span>,<br />
-                <span className="font-bold">Hihi</span> and 22 others
+            <div className="text-lg text-muted-foreground">@stephaniexixo11</div>
+            <p className="mt-6 max-w-md text-pretty text-center text-lg text-muted-foreground">
+              This is a description that perfectly matches the 80 character
+              description limit.
+            </p>
+            <div className="mt-8 flex flex-wrap items-center justify-center gap-x-8 gap-y-6">
+              <div className="flex flex-col items-center leading-tight">
+                <div className="font-bold text-lg">3232</div>
+                <div className="text-muted-foreground">Guildmates</div>
+              </div>
+              <Separator orientation="vertical" className="hidden sm:block" />
+              <div className="flex flex-col items-center leading-tight">
+                <div className="font-bold text-lg">0</div>
+                <div className="text-muted-foreground">Followers</div>
+              </div>
+              <Separator orientation="vertical" className="hidden sm:block" />
+              <div className="flex items-center gap-2">
+                <Avatar>
+                  <AvatarFallback>#</AvatarFallback>
+                </Avatar>
+                <div className="text-muted-foreground leading-tight">
+                  Followed by <span className="font-bold">Hoho</span>,<br />
+                  <span className="font-bold">Hihi</span> and 22 others
+                </div>
               </div>
             </div>
           </div>
@@ -93,8 +100,8 @@ const Page = () => {
           </div>
           <Separator className="mt-16 mb-8" />
         </div>
-      </Layout.Main>
-    </Layout.Root>
+      </LayoutMain>
+    </Layout>
   )
 }
 
diff --git a/src/v2/components/Layout/Layout.tsx b/src/v2/components/Layout/Layout.tsx
index b6004590a0..627a619fe7 100644
--- a/src/v2/components/Layout/Layout.tsx
+++ b/src/v2/components/Layout/Layout.tsx
@@ -1,59 +1,36 @@
 import { cn } from "@/lib/utils"
-import { Slot } from "@radix-ui/react-slot"
-import clsx from "clsx"
-import { PropsWithChildren, ReactNode, forwardRef } from "react"
+import { PropsWithChildren, ReactNode } from "react"
+import { PageContainer } from "./PageContainer"
 
 /* -------------------------------------------------------------------------------------------------
- * Root
+ * Layout
  * -----------------------------------------------------------------------------------------------*/
 
-export interface RootProps extends React.HTMLAttributes<HTMLDivElement> {}
+export interface LayoutProps extends React.HTMLAttributes<HTMLDivElement> {}
 
-const Root = ({ children, ...props }: RootProps) => (
+const Layout = ({ children, ...props }: LayoutProps) => (
   <div className="flex min-h-screen flex-col" {...props}>
     {children}
   </div>
 )
 
 /* -------------------------------------------------------------------------------------------------
- * PageContainer
+ * LayoutHero
  * -----------------------------------------------------------------------------------------------*/
 
-export interface PageContainerProps extends React.HTMLAttributes<HTMLDivElement> {
-  asChild?: boolean
-}
-
-const PageContainer = forwardRef<HTMLDivElement, PageContainerProps>(
-  ({ children, className, asChild = false }, ref) => {
-    const Comp = asChild ? Slot : "div"
-    return (
-      <Comp
-        className={clsx("mx-auto max-w-screen-lg px-4 sm:px-8 md:px-10", className)}
-        ref={ref}
-      >
-        {children}
-      </Comp>
-    )
-  }
-)
-
-/* -------------------------------------------------------------------------------------------------
- * Hero
- * -----------------------------------------------------------------------------------------------*/
-
-const Hero = ({ children }: PropsWithChildren) => (
+const LayoutHero = ({ children }: PropsWithChildren) => (
   <div className="relative">{children}</div>
 )
 
 /* -------------------------------------------------------------------------------------------------
- * Headline
+ * LayoutHeadline
  * -----------------------------------------------------------------------------------------------*/
 
-interface HeadlineProps {
+interface LayoutHeadlineProps {
   title: ReactNode
 }
 
-const Headline = ({ title }: HeadlineProps) => (
+const LayoutHeadline = ({ title }: LayoutHeadlineProps) => (
   <PageContainer>
     <h1 className="pt-9 pb-14 font-bold font-display text-4xl text-white tracking-tight sm:text-5xl">
       {title}
@@ -62,39 +39,48 @@ const Headline = ({ title }: HeadlineProps) => (
 )
 
 /* -------------------------------------------------------------------------------------------------
- * Banner
+ * LayoutBannerBackground
+ * -----------------------------------------------------------------------------------------------*/
+
+interface LayoutBannerBackgroundProps {
+  className?: string
+}
+
+const LayoutBannerBackground = ({ className }: LayoutBannerBackgroundProps) => (
+  <div className={cn("absolute inset-0 bg-banner", className)} />
+)
+
+/* -------------------------------------------------------------------------------------------------
+ * LayoutBanner
  * -----------------------------------------------------------------------------------------------*/
 
-interface BannerProps extends PropsWithChildren {
-  offset?: number
+interface LayoutBannerProps extends PropsWithChildren {
   className?: string
 }
 
-const Banner = ({ children, offset = 112, className }: BannerProps) => (
+const LayoutBanner = ({ children, className }: LayoutBannerProps) => (
   <div
-    className={"-z-10 absolute inset-0 overflow-hidden"}
-    style={{ bottom: -offset }}
+    className={cn("-z-10 -bottom-48 absolute inset-0 overflow-hidden", className)}
   >
-    <div className={cn("absolute inset-0 bg-banner", className)} />
     {children}
   </div>
 )
 
 /* -------------------------------------------------------------------------------------------------
- * Main
+ * LayoutMain
  * -----------------------------------------------------------------------------------------------*/
 
-const Main = ({ children }: PropsWithChildren) => (
+const LayoutMain = ({ children }: PropsWithChildren) => (
   <main>
     <PageContainer>{children}</PageContainer>
   </main>
 )
 
 /* -------------------------------------------------------------------------------------------------
- * Footer
+ * LayoutFooter
  * -----------------------------------------------------------------------------------------------*/
 
-const Footer = ({ children }: PropsWithChildren) => (
+const LayoutFooter = ({ children }: PropsWithChildren) => (
   <footer className="mt-auto">
     <PageContainer>{children}</PageContainer>
   </footer>
@@ -102,4 +88,12 @@ const Footer = ({ children }: PropsWithChildren) => (
 
 /* -----------------------------------------------------------------------------------------------*/
 
-export { Banner, Footer, Headline, Hero, Main, PageContainer, Root }
+export {
+  LayoutBanner,
+  LayoutBannerBackground,
+  LayoutFooter,
+  LayoutHeadline,
+  LayoutHero,
+  LayoutMain,
+  Layout,
+}
diff --git a/src/v2/components/Layout/PageContainer.tsx b/src/v2/components/Layout/PageContainer.tsx
new file mode 100644
index 0000000000..1e98a4222d
--- /dev/null
+++ b/src/v2/components/Layout/PageContainer.tsx
@@ -0,0 +1,21 @@
+import { Slot } from "@radix-ui/react-slot"
+import clsx from "clsx"
+import { forwardRef } from "react"
+
+export interface PageContainerProps extends React.HTMLAttributes<HTMLDivElement> {
+  asChild?: boolean
+}
+
+export const PageContainer = forwardRef<HTMLDivElement, PageContainerProps>(
+  ({ children, className, asChild = false }, ref) => {
+    const Comp = asChild ? Slot : "div"
+    return (
+      <Comp
+        className={clsx("mx-auto max-w-screen-lg px-4 sm:px-8 md:px-10", className)}
+        ref={ref}
+      >
+        {children}
+      </Comp>
+    )
+  }
+)
diff --git a/src/v2/components/Layout/index.ts b/src/v2/components/Layout/index.ts
index 07defeec20..58a593df5f 100644
--- a/src/v2/components/Layout/index.ts
+++ b/src/v2/components/Layout/index.ts
@@ -1,4 +1,9 @@
-import { Header } from "@/components/Header"
-import { Banner, Footer, Headline, Hero, Main, Root } from "./Layout"
-
-export const Layout = { Root, Headline, Banner, Hero, Footer, Main, Header }
+export { Header as LayoutHeader } from "@/components/Header"
+export {
+  LayoutBanner,
+  LayoutFooter,
+  LayoutHeadline,
+  LayoutHero,
+  LayoutMain,
+  Layout,
+} from "./Layout"

From 354170b46582d406b260ede00b3f93b6f83a7f76 Mon Sep 17 00:00:00 2001
From: Dominik Stumpf <s.dominik.work@gmail.com>
Date: Mon, 22 Jul 2024 12:03:54 +0200
Subject: [PATCH 05/87] feat: add contribution card

---
 package.json                         |  1 +
 src/app/(marketing)/profile/page.tsx | 73 +++++++++++++++++++++-------
 src/v2/components/ui/Avatar.tsx      | 29 ++++++++---
 src/v2/components/ui/AvatarGroup.tsx | 35 +++++++++++++
 src/v2/components/ui/Progress.tsx    | 28 +++++++++++
 5 files changed, 142 insertions(+), 24 deletions(-)
 create mode 100644 src/v2/components/ui/AvatarGroup.tsx
 create mode 100644 src/v2/components/ui/Progress.tsx

diff --git a/package.json b/package.json
index e03e195ed6..9b8bffc2c1 100644
--- a/package.json
+++ b/package.json
@@ -53,6 +53,7 @@
     "@radix-ui/react-focus-scope": "^1.1.0",
     "@radix-ui/react-label": "^2.1.0",
     "@radix-ui/react-popover": "^1.1.1",
+    "@radix-ui/react-progress": "^1.1.0",
     "@radix-ui/react-separator": "^1.1.0",
     "@radix-ui/react-slot": "^1.1.0",
     "@radix-ui/react-toast": "^1.2.1",
diff --git a/src/app/(marketing)/profile/page.tsx b/src/app/(marketing)/profile/page.tsx
index cfc1231dfd..7fe636326a 100644
--- a/src/app/(marketing)/profile/page.tsx
+++ b/src/app/(marketing)/profile/page.tsx
@@ -8,10 +8,11 @@ import {
   LayoutMain,
 } from "@/components/Layout"
 import { Avatar, AvatarFallback } from "@/components/ui/Avatar"
+import { AvatarGroup } from "@/components/ui/AvatarGroup"
 import { Card } from "@/components/ui/Card"
 import { ChartContainer } from "@/components/ui/Chart"
 import { Separator } from "@/components/ui/Separator"
-import { CircleWavyCheck } from "@phosphor-icons/react"
+import { CaretDown, CircleWavyCheck, Users } from "@phosphor-icons/react"
 import { RadialBar, RadialBarChart } from "recharts"
 
 const chartData = [{ experience: 1, fill: "hsl(var(--primary))" }]
@@ -68,16 +69,14 @@ const Page = () => {
                 <div className="font-bold text-lg">3232</div>
                 <div className="text-muted-foreground">Guildmates</div>
               </div>
-              <Separator orientation="vertical" className="hidden sm:block" />
+              <Separator orientation="vertical" className="hidden h-12 sm:block" />
               <div className="flex flex-col items-center leading-tight">
                 <div className="font-bold text-lg">0</div>
                 <div className="text-muted-foreground">Followers</div>
               </div>
-              <Separator orientation="vertical" className="hidden sm:block" />
+              <Separator orientation="vertical" className="hidden h-12 sm:block" />
               <div className="flex items-center gap-2">
-                <Avatar>
-                  <AvatarFallback>#</AvatarFallback>
-                </Avatar>
+                <AvatarGroup imageUrls={["", ""]} count={8} />
                 <div className="text-muted-foreground leading-tight">
                   Followed by <span className="font-bold">Hoho</span>,<br />
                   <span className="font-bold">Hihi</span> and 22 others
@@ -86,20 +85,58 @@ const Page = () => {
             </div>
           </div>
           <Separator className="mt-16 mb-8" />
-          <div className="w-full">
-            <h2 className="mb-3 font-bold text-lg">Experience</h2>
-            <div className="grid grid-cols-2 gap-3">
-              <Card className="p-6">
-                <h3 className="font-bold">Champion</h3>
-                <p className="text-muted-foreground">Description</p>
-              </Card>
-              <Card className="p-6">
-                <h3>Engagement this month</h3>
-              </Card>
-            </div>
+          <h2 className="mb-3 font-bold text-lg">Experience</h2>
+          <div className="grid grid-cols-2 gap-3">
+            <Card className="p-6">
+              <h3 className="font-bold">Champion</h3>
+              <p className="text-muted-foreground">Description</p>
+            </Card>
+            <Card className="p-6">
+              <h3>Engagement this month</h3>
+            </Card>
+          </div>
+          <Separator className="my-8" />
+          <h2 className="mb-3 font-bold text-lg">Top contributions</h2>
+          <div className="grid grid-cols-1 gap-3">
+            <Card className="flex border-2">
+              <div className="relative h-full w-10 bg-border">
+                <div className="-translate-x-1/2 -rotate-90 absolute bottom-1/2 left-1/2 flex translate-y-1/2 items-center gap-1">
+                  <Avatar size="sm">
+                    <AvatarFallback>#</AvatarFallback>
+                  </Avatar>
+                  <div className="max-w-12 truncate font-bold font-display">
+                    Guild
+                  </div>
+                </div>
+              </div>
+              <div className="grid w-full grid-cols-[auto_auto_1fr] items-center gap-4 p-6">
+                <Avatar size="2xl">
+                  <AvatarFallback>#</AvatarFallback>
+                </Avatar>
+                <div>
+                  <div className="font-extrabold text-muted-foreground text-xs uppercase">
+                    TOP ROLE
+                  </div>
+                  <h3 className="mb-1 font-bold font-display text-xl tracking-tight">
+                    Enter Farcaster
+                  </h3>
+                  <p className="flex items-center gap-2 text-muted-foreground text-sm">
+                    <Users weight="bold" />
+                    Only 3.4% of users have this role
+                  </p>
+                </div>
+                <div className="flex items-center gap-2 justify-self-end">
+                  <div className="font-extrabold text-muted-foreground text-xs uppercase">
+                    COLLECTION:
+                  </div>
+                  <AvatarGroup imageUrls={["", "", ""]} count={87} size="lg" />
+                  <CaretDown weight="bold" className="ml-2 size-5" />
+                </div>
+              </div>
+            </Card>
           </div>
-          <Separator className="mt-16 mb-8" />
         </div>
+        <Separator className="mt-8 mb-32" />
       </LayoutMain>
     </Layout>
   )
diff --git a/src/v2/components/ui/Avatar.tsx b/src/v2/components/ui/Avatar.tsx
index f7fb89b1d6..22c898ff53 100644
--- a/src/v2/components/ui/Avatar.tsx
+++ b/src/v2/components/ui/Avatar.tsx
@@ -2,19 +2,36 @@
 
 import { cn } from "@/lib/utils"
 import * as AvatarPrimitive from "@radix-ui/react-avatar"
+import { VariantProps, cva } from "class-variance-authority"
 import NextImage from "next/image"
 import { ComponentPropsWithoutRef, ElementRef, forwardRef } from "react"
 
+export const avatarVariants = cva(
+  "relative flex shrink-0 items-center justify-center overflow-hidden rounded-full bg-image",
+  {
+    variants: {
+      size: {
+        sm: "size-7",
+        md: "size-10",
+        lg: "size-12",
+        xl: "size-16",
+        "2xl": "size-20",
+      },
+    },
+    defaultVariants: {
+      size: "md",
+    },
+  }
+)
+
 const Avatar = forwardRef<
   ElementRef<typeof AvatarPrimitive.Root>,
-  ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>
->(({ className, ...props }, ref) => (
+  ComponentPropsWithoutRef<typeof AvatarPrimitive.Root> &
+    VariantProps<typeof avatarVariants>
+>(({ className, size, ...props }, ref) => (
   <AvatarPrimitive.Root
     ref={ref}
-    className={cn(
-      "relative flex h-10 w-10 shrink-0 items-center justify-center overflow-hidden rounded-full bg-image",
-      className
-    )}
+    className={cn(avatarVariants({ size }), className)}
     {...props}
   />
 ))
diff --git a/src/v2/components/ui/AvatarGroup.tsx b/src/v2/components/ui/AvatarGroup.tsx
new file mode 100644
index 0000000000..01930e418c
--- /dev/null
+++ b/src/v2/components/ui/AvatarGroup.tsx
@@ -0,0 +1,35 @@
+import { cn } from "@/lib/utils"
+import { AvatarImage } from "@radix-ui/react-avatar"
+import { VariantProps } from "class-variance-authority"
+import { Avatar, AvatarFallback, avatarVariants } from "./Avatar"
+import { Skeleton } from "./Skeleton"
+
+interface AvatarGroupProps extends VariantProps<typeof avatarVariants> {
+  count?: number
+  imageUrls: string[]
+}
+
+export const AvatarGroup = ({
+  count = 0,
+  imageUrls,
+  ...avatarProps
+}: AvatarGroupProps) => {
+  const diffCount = count - imageUrls.length
+  return (
+    <div className="ml-3 flex">
+      {imageUrls.map((src, i) => (
+        <Avatar key={i} className={cn(avatarVariants(avatarProps), "-ml-3")}>
+          <AvatarImage src={src} alt="avatar" />
+          <AvatarFallback>
+            <Skeleton className="size-full" />
+          </AvatarFallback>
+        </Avatar>
+      ))}
+      {diffCount > 0 && (
+        <Avatar className={cn(avatarVariants(avatarProps), "-ml-3")}>
+          <AvatarFallback>+{diffCount}</AvatarFallback>
+        </Avatar>
+      )}
+    </div>
+  )
+}
diff --git a/src/v2/components/ui/Progress.tsx b/src/v2/components/ui/Progress.tsx
new file mode 100644
index 0000000000..c119b6004d
--- /dev/null
+++ b/src/v2/components/ui/Progress.tsx
@@ -0,0 +1,28 @@
+"use client"
+
+import * as ProgressPrimitive from "@radix-ui/react-progress"
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+const Progress = React.forwardRef<
+  React.ElementRef<typeof ProgressPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof ProgressPrimitive.Root>
+>(({ className, value, ...props }, ref) => (
+  <ProgressPrimitive.Root
+    ref={ref}
+    className={cn(
+      "relative h-4 w-full overflow-hidden rounded-full bg-secondary",
+      className
+    )}
+    {...props}
+  >
+    <ProgressPrimitive.Indicator
+      className="h-full w-full flex-1 bg-primary transition-all"
+      style={{ transform: `translateX(-${100 - (value || 0)}%)` }}
+    />
+  </ProgressPrimitive.Root>
+))
+Progress.displayName = ProgressPrimitive.Root.displayName
+
+export { Progress }

From 82a2f950e86e88274e7908331427a80505af606f Mon Sep 17 00:00:00 2001
From: Dominik Stumpf <s.dominik.work@gmail.com>
Date: Mon, 22 Jul 2024 12:05:45 +0200
Subject: [PATCH 06/87] chore: position xp radial chart correctly

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

diff --git a/src/app/(marketing)/profile/page.tsx b/src/app/(marketing)/profile/page.tsx
index 7fe636326a..d3857a2dda 100644
--- a/src/app/(marketing)/profile/page.tsx
+++ b/src/app/(marketing)/profile/page.tsx
@@ -33,7 +33,7 @@ const Page = () => {
             <div className="relative mb-12 flex items-center justify-center">
               <ChartContainer
                 config={{}}
-                className="-rotate-90 absolute aspect-square min-h-56"
+                className="-scale-x-100 absolute aspect-square min-h-56 rotate-90"
               >
                 <RadialBarChart
                   data={chartData}

From 01dfd334b4eb372036280d1f624398fab44e0421 Mon Sep 17 00:00:00 2001
From: Dominik Stumpf <s.dominik.work@gmail.com>
Date: Tue, 23 Jul 2024 12:10:12 +0200
Subject: [PATCH 07/87] feat: improve contribution card view

---
 .../profile/_components/ActivityChart.tsx     | 101 ++++++++++++++++
 src/app/(marketing)/profile/page.tsx          | 113 +++++++++++-------
 src/v2/components/ui/Progress.tsx             |   4 +-
 3 files changed, 174 insertions(+), 44 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..2f2395e5a2
--- /dev/null
+++ b/src/app/(marketing)/profile/_components/ActivityChart.tsx
@@ -0,0 +1,101 @@
+"use client"
+
+import {
+  ChartConfig,
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+} from "@/components/ui/Chart"
+import { Bar, BarChart, CartesianGrid, XAxis } from "recharts"
+
+const chartData = [
+  { date: "2024-06-19", experience: 341 },
+  { date: "2024-06-20", experience: 408 },
+  { date: "2024-06-21", experience: 169 },
+  { date: "2024-06-22", experience: 317 },
+  { date: "2024-06-23", experience: 480 },
+  { date: "2024-06-24", experience: 132 },
+  { date: "2024-06-25", experience: 141 },
+  { date: "2024-06-26", experience: 434 },
+  { date: "2024-06-13", experience: 81 },
+  { date: "2024-06-14", experience: 426 },
+  { date: "2024-06-15", experience: 307 },
+  { date: "2024-06-16", experience: 371 },
+  { date: "2024-06-17", experience: 475 },
+  { date: "2024-06-18", experience: 107 },
+  { date: "2024-06-19", experience: 341 },
+  { date: "2024-06-20", experience: 408 },
+  { date: "2024-06-21", experience: 169 },
+  { date: "2024-06-22", experience: 317 },
+  { date: "2024-06-23", experience: 480 },
+  { date: "2024-06-24", experience: 132 },
+  { date: "2024-06-25", experience: 141 },
+  { date: "2024-06-26", experience: 434 },
+  { date: "2024-06-27", experience: 448 },
+  { date: "2024-06-28", experience: 149 },
+  { date: "2024-06-29", experience: 103 },
+  { date: "2024-06-30", experience: 446 },
+  { date: "2024-06-24", experience: 132 },
+  { date: "2024-06-25", experience: 141 },
+  { date: "2024-06-26", experience: 434 },
+  { date: "2024-06-27", experience: 448 },
+  { date: "2024-06-28", experience: 149 },
+  { date: "2024-06-29", experience: 103 },
+  { date: "2024-06-30", experience: 446 },
+]
+const chartConfig = {
+  views: {
+    label: "Gained XP",
+  },
+  experience: {
+    label: "experience",
+    color: "hsl(var(--primary))",
+  },
+} satisfies ChartConfig
+
+export function ActivityChart() {
+  return (
+    <ChartContainer config={chartConfig} className="aspect-auto h-[65px] w-full">
+      <BarChart
+        accessibilityLayer
+        data={chartData}
+        margin={{
+          left: 12,
+          right: 12,
+        }}
+      >
+        <CartesianGrid vertical={false} />
+        <XAxis
+          dataKey="date"
+          tickLine={false}
+          axisLine={false}
+          tick={false}
+          height={0}
+          tickFormatter={(value) => {
+            const date = new Date(value)
+            return date.toLocaleDateString("en-US", {
+              month: "short",
+              day: "numeric",
+            })
+          }}
+        />
+        <ChartTooltip
+          content={
+            <ChartTooltipContent
+              className="w-[150px]"
+              nameKey="views"
+              labelFormatter={(value) => {
+                return new Date(value).toLocaleDateString("en-US", {
+                  month: "short",
+                  day: "numeric",
+                  year: "numeric",
+                })
+              }}
+            />
+          }
+        />
+        <Bar dataKey="experience" fill="var(--color-experience)" radius={999} />
+      </BarChart>
+    </ChartContainer>
+  )
+}
diff --git a/src/app/(marketing)/profile/page.tsx b/src/app/(marketing)/profile/page.tsx
index d3857a2dda..b7a05884f5 100644
--- a/src/app/(marketing)/profile/page.tsx
+++ b/src/app/(marketing)/profile/page.tsx
@@ -9,11 +9,15 @@ import {
 } from "@/components/Layout"
 import { Avatar, AvatarFallback } from "@/components/ui/Avatar"
 import { AvatarGroup } from "@/components/ui/AvatarGroup"
+import { Badge } from "@/components/ui/Badge"
+import { Button } from "@/components/ui/Button"
 import { Card } from "@/components/ui/Card"
 import { ChartContainer } from "@/components/ui/Chart"
+import { Progress } from "@/components/ui/Progress"
 import { Separator } from "@/components/ui/Separator"
 import { CaretDown, CircleWavyCheck, Users } from "@phosphor-icons/react"
 import { RadialBar, RadialBarChart } from "recharts"
+import { ActivityChart } from "./_components/ActivityChart"
 
 const chartData = [{ experience: 1, fill: "hsl(var(--primary))" }]
 
@@ -69,7 +73,7 @@ const Page = () => {
                 <div className="font-bold text-lg">3232</div>
                 <div className="text-muted-foreground">Guildmates</div>
               </div>
-              <Separator orientation="vertical" className="hidden h-12 sm:block" />
+              <Separator orientation="vertical" className="h-12" />
               <div className="flex flex-col items-center leading-tight">
                 <div className="font-bold text-lg">0</div>
                 <div className="text-muted-foreground">Followers</div>
@@ -86,54 +90,40 @@ const Page = () => {
           </div>
           <Separator className="mt-16 mb-8" />
           <h2 className="mb-3 font-bold text-lg">Experience</h2>
-          <div className="grid grid-cols-2 gap-3">
+          <div className="grid grid-cols-1 gap-3 md:grid-cols-2">
             <Card className="p-6">
-              <h3 className="font-bold">Champion</h3>
-              <p className="text-muted-foreground">Description</p>
+              <div className="grid grid-cols-[auto_1fr] grid-rows-[auto_auto_auto] items-center gap-x-6 gap-y-2">
+                <div className="row-span-3 flex size-12 items-center justify-center place-self-center rounded-xl bg-primary font-extrabold text-xl shadow-lg">
+                  22
+                </div>
+                <div className="flex flex-col justify-between gap-2 sm:flex-row">
+                  <h3 className="font-bold">Champion</h3>
+                  <p className="text-muted-foreground">1322 / 9999 XP</p>
+                </div>
+                <Progress value={77} />
+                <p className="text-muted-foreground">
+                  This is a description that perfectly matches the 80 character
+                  description limit.
+                </p>
+              </div>
             </Card>
-            <Card className="p-6">
-              <h3>Engagement this month</h3>
+            <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>
+              <ActivityChart />
             </Card>
           </div>
           <Separator className="my-8" />
           <h2 className="mb-3 font-bold text-lg">Top contributions</h2>
           <div className="grid grid-cols-1 gap-3">
-            <Card className="flex border-2">
-              <div className="relative h-full w-10 bg-border">
-                <div className="-translate-x-1/2 -rotate-90 absolute bottom-1/2 left-1/2 flex translate-y-1/2 items-center gap-1">
-                  <Avatar size="sm">
-                    <AvatarFallback>#</AvatarFallback>
-                  </Avatar>
-                  <div className="max-w-12 truncate font-bold font-display">
-                    Guild
-                  </div>
-                </div>
-              </div>
-              <div className="grid w-full grid-cols-[auto_auto_1fr] items-center gap-4 p-6">
-                <Avatar size="2xl">
-                  <AvatarFallback>#</AvatarFallback>
-                </Avatar>
-                <div>
-                  <div className="font-extrabold text-muted-foreground text-xs uppercase">
-                    TOP ROLE
-                  </div>
-                  <h3 className="mb-1 font-bold font-display text-xl tracking-tight">
-                    Enter Farcaster
-                  </h3>
-                  <p className="flex items-center gap-2 text-muted-foreground text-sm">
-                    <Users weight="bold" />
-                    Only 3.4% of users have this role
-                  </p>
-                </div>
-                <div className="flex items-center gap-2 justify-self-end">
-                  <div className="font-extrabold text-muted-foreground text-xs uppercase">
-                    COLLECTION:
-                  </div>
-                  <AvatarGroup imageUrls={["", "", ""]} count={87} size="lg" />
-                  <CaretDown weight="bold" className="ml-2 size-5" />
-                </div>
-              </div>
-            </Card>
+            <ContributionCard />
+            <ContributionCard />
+            <ContributionCard />
+            <Button size="sm" variant="outline" className="place-self-center">
+              See more involvement
+            </Button>
           </div>
         </div>
         <Separator className="mt-8 mb-32" />
@@ -141,6 +131,45 @@ const Page = () => {
     </Layout>
   )
 }
+const ContributionCard = () => {
+  return (
+    <Card className="flex border-2">
+      <div className="relative h-full w-10 bg-border">
+        <div className="-translate-x-1/2 -rotate-90 absolute bottom-1/2 left-1/2 flex translate-y-1/2 items-center gap-1">
+          <Avatar size="sm">
+            <AvatarFallback>#</AvatarFallback>
+          </Avatar>
+          <div className="max-w-12 truncate font-bold font-display">Guild</div>
+        </div>
+      </div>
+      <div className="grid w-full grid-cols-[auto_1fr] items-center gap-4 p-6 md:grid-cols-[auto_auto_1fr]">
+        <Avatar className="size-16 sm:size-20">
+          <AvatarFallback>#</AvatarFallback>
+        </Avatar>
+        <div>
+          <div className="font-extrabold text-muted-foreground text-xs uppercase">
+            TOP ROLE
+          </div>
+          <h3 className="mb-1 font-bold font-display text-xl tracking-tight">
+            Enter Farcaster
+          </h3>
+          <div className="flex items-center gap-2 text-muted-foreground">
+            <Users weight="bold" className="min-w-4" />
+            <p className="line-clamp-1 text-sm">Only 3.4% of users have this role</p>
+          </div>
+        </div>
+        <div className="col-span-2 flex w-full flex-col gap-2 justify-self-end md:col-span-1 md:w-auto md:flex-row md:items-center">
+          <Separator className="mb-2 md:hidden" />
+          <div className="font-extrabold text-muted-foreground text-xs uppercase">
+            COLLECTION:
+          </div>
+          <AvatarGroup imageUrls={["", "", ""]} count={87} size="lg" />
+          <CaretDown weight="bold" className="ml-2 hidden size-5 md:block" />
+        </div>
+      </div>
+    </Card>
+  )
+}
 
 // biome-ignore lint/style/noDefaultExport: page route
 export default Page
diff --git a/src/v2/components/ui/Progress.tsx b/src/v2/components/ui/Progress.tsx
index c119b6004d..da5f1c8694 100644
--- a/src/v2/components/ui/Progress.tsx
+++ b/src/v2/components/ui/Progress.tsx
@@ -12,13 +12,13 @@ const Progress = React.forwardRef<
   <ProgressPrimitive.Root
     ref={ref}
     className={cn(
-      "relative h-4 w-full overflow-hidden rounded-full bg-secondary",
+      "relative h-3 w-full overflow-hidden rounded-full bg-secondary",
       className
     )}
     {...props}
   >
     <ProgressPrimitive.Indicator
-      className="h-full w-full flex-1 bg-primary transition-all"
+      className="h-full w-full flex-1 rounded-r-full bg-primary transition-all"
       style={{ transform: `translateX(-${100 - (value || 0)}%)` }}
     />
   </ProgressPrimitive.Root>

From 118949528b18565cf9ad3b8ad07b3d80b41a2fcb Mon Sep 17 00:00:00 2001
From: Dominik Stumpf <s.dominik.work@gmail.com>
Date: Tue, 23 Jul 2024 14:45:52 +0200
Subject: [PATCH 08/87] chore: add RecentActivity

---
 .../profile/_components/ContributionCard.tsx  | 49 ++++++++++++
 .../profile/_components/RecentActivity.tsx    | 63 +++++++++++++++
 src/app/(marketing)/profile/page.tsx          | 76 +++++++------------
 src/v2/components/ui/Anchor.tsx               |  2 +-
 src/v2/components/ui/Avatar.tsx               |  1 +
 5 files changed, 143 insertions(+), 48 deletions(-)
 create mode 100644 src/app/(marketing)/profile/_components/ContributionCard.tsx
 create mode 100644 src/app/(marketing)/profile/_components/RecentActivity.tsx

diff --git a/src/app/(marketing)/profile/_components/ContributionCard.tsx b/src/app/(marketing)/profile/_components/ContributionCard.tsx
new file mode 100644
index 0000000000..3314c74580
--- /dev/null
+++ b/src/app/(marketing)/profile/_components/ContributionCard.tsx
@@ -0,0 +1,49 @@
+import { Avatar, AvatarFallback } from "@/components/ui/Avatar"
+import { AvatarGroup } from "@/components/ui/AvatarGroup"
+import { Button } from "@/components/ui/Button"
+import { Card } from "@/components/ui/Card"
+import { Separator } from "@/components/ui/Separator"
+import { CaretDown } from "@phosphor-icons/react"
+import { Users } from "@phosphor-icons/react/dist/ssr"
+
+export const ContributionCard = () => {
+  return (
+    <Card className="flex flex-col border-2 md:flex-row">
+      <div className="relative flex h-10 self-start rounded-br-2xl bg-border px-3 md:h-full md:w-10 md:rounded-br-none">
+        <div className="md:-translate-x-1/2 md:-rotate-90 flex items-center gap-1 md:absolute md:bottom-1/2 md:left-1/2 md:translate-y-1/2">
+          <Avatar size="sm">
+            <AvatarFallback>#</AvatarFallback>
+          </Avatar>
+          <div className="max-w-12 truncate font-bold font-display">Guild</div>
+        </div>
+      </div>
+      <div className="grid w-full grid-cols-[auto_1fr] items-center gap-4 p-6 md:grid-cols-[auto_auto_1fr]">
+        <Avatar className="size-16 sm:size-20">
+          <AvatarFallback>#</AvatarFallback>
+        </Avatar>
+        <div>
+          <div className="font-extrabold text-muted-foreground text-xs uppercase">
+            TOP ROLE
+          </div>
+          <h3 className="mb-1 font-bold font-display text-xl tracking-tight">
+            Enter Farcaster
+          </h3>
+          <div className="flex items-center gap-2 text-muted-foreground">
+            <Users weight="bold" className="min-w-4" />
+            <p className="line-clamp-1 text-sm">Only 3.4% of users have this role</p>
+          </div>
+        </div>
+        <div className="col-span-2 flex w-full flex-col gap-2 justify-self-end md:col-span-1 md:w-auto md:flex-row md:items-center">
+          <Separator className="mb-2 md:hidden" />
+          <div className="font-extrabold text-muted-foreground text-xs uppercase">
+            COLLECTION:
+          </div>
+          <AvatarGroup imageUrls={["", "", ""]} count={87} size="lg" />
+          <Button size="icon" variant="ghost" className="ml-2 hidden md:block">
+            <CaretDown weight="bold" className="size-5" />
+          </Button>
+        </div>
+      </div>
+    </Card>
+  )
+}
diff --git a/src/app/(marketing)/profile/_components/RecentActivity.tsx b/src/app/(marketing)/profile/_components/RecentActivity.tsx
new file mode 100644
index 0000000000..ff4e690ff7
--- /dev/null
+++ b/src/app/(marketing)/profile/_components/RecentActivity.tsx
@@ -0,0 +1,63 @@
+"use client"
+
+import { Avatar, AvatarFallback } from "@/components/ui/Avatar"
+import { Badge } from "@/components/ui/Badge"
+import { Card } from "@/components/ui/Card"
+import { ToggleGroup, ToggleGroupItem } from "@/components/ui/ToggleGroup"
+import { Circle, Rocket } from "@phosphor-icons/react"
+import { useState } from "react"
+
+export const RecentActivity = () => {
+  const ACTIVITY_FILTERS = ["All", "Editing", "Join", "NFTs"] as const
+  const [activityFilter, setActivityFilter] =
+    useState<(typeof ACTIVITY_FILTERS)[number]>("All")
+
+  return (
+    <>
+      <ToggleGroup
+        type="single"
+        variant="primary"
+        className="mb-4"
+        onValueChange={(value) =>
+          value && setActivityFilter(value as (typeof ACTIVITY_FILTERS)[number])
+        }
+        value={activityFilter}
+      >
+        {ACTIVITY_FILTERS.map((filter) => (
+          <ToggleGroupItem value={filter} key={filter}>
+            {filter}
+          </ToggleGroupItem>
+        ))}
+      </ToggleGroup>
+      <div className="grid grid-cols-1 gap-3 lg:grid-cols-2">
+        {Array.from({ length: 8 }, (_, i) => (
+          <Card className="flex" key={i}>
+            <div className="flex h-full w-9 items-center justify-center border-border border-r-2 bg-accent">
+              <div className="-rotate-90 flex items-center gap-1">
+                <Avatar size="xs">
+                  <AvatarFallback>#</AvatarFallback>
+                </Avatar>
+                <span className="font-bold font-display text-sm">Guild</span>
+              </div>
+            </div>
+            <div className="px-5 py-6">
+              <h3 className="font-bold">
+                Acquire the{" "}
+                <Badge className="mx-1">
+                  <Rocket weight="fill" className="mr-1" />
+                  Enter Farcaster
+                </Badge>{" "}
+                role
+              </h3>
+              <div className="flex items-center gap-2">
+                <p className="text-muted-foreground">2 hours ago</p>
+                <Circle className="size-1.5 text-muted-foreground" weight="fill" />
+                <span className="font-bold text-primary">+5 XP</span>
+              </div>
+            </div>
+          </Card>
+        ))}
+      </div>
+    </>
+  )
+}
diff --git a/src/app/(marketing)/profile/page.tsx b/src/app/(marketing)/profile/page.tsx
index b7a05884f5..4d9bb26cf5 100644
--- a/src/app/(marketing)/profile/page.tsx
+++ b/src/app/(marketing)/profile/page.tsx
@@ -3,10 +3,12 @@
 import {
   Layout,
   LayoutBanner,
+  LayoutFooter,
   LayoutHeader,
   LayoutHero,
   LayoutMain,
 } from "@/components/Layout"
+import { Anchor } from "@/components/ui/Anchor"
 import { Avatar, AvatarFallback } from "@/components/ui/Avatar"
 import { AvatarGroup } from "@/components/ui/AvatarGroup"
 import { Badge } from "@/components/ui/Badge"
@@ -15,9 +17,11 @@ import { Card } from "@/components/ui/Card"
 import { ChartContainer } from "@/components/ui/Chart"
 import { Progress } from "@/components/ui/Progress"
 import { Separator } from "@/components/ui/Separator"
-import { CaretDown, CircleWavyCheck, Users } from "@phosphor-icons/react"
+import { ArrowRight, CircleWavyCheck } from "@phosphor-icons/react/dist/ssr"
 import { RadialBar, RadialBarChart } from "recharts"
 import { ActivityChart } from "./_components/ActivityChart"
+import { ContributionCard } from "./_components/ContributionCard"
+import { RecentActivity } from "./_components/RecentActivity"
 
 const chartData = [{ experience: 1, fill: "hsl(var(--primary))" }]
 
@@ -33,7 +37,7 @@ const Page = () => {
       </LayoutHero>
       <LayoutMain>
         <div className="mt-24">
-          <div className="flex flex-col items-center">
+          <div className="mb-24 flex flex-col items-center">
             <div className="relative mb-12 flex items-center justify-center">
               <ChartContainer
                 config={{}}
@@ -88,12 +92,11 @@ const Page = () => {
               </div>
             </div>
           </div>
-          <Separator className="mt-16 mb-8" />
           <h2 className="mb-3 font-bold text-lg">Experience</h2>
-          <div className="grid grid-cols-1 gap-3 md:grid-cols-2">
+          <div className="mb-16 grid grid-cols-1 gap-3 md:grid-cols-2">
             <Card className="p-6">
-              <div className="grid grid-cols-[auto_1fr] grid-rows-[auto_auto_auto] items-center gap-x-6 gap-y-2">
-                <div className="row-span-3 flex size-12 items-center justify-center place-self-center rounded-xl bg-primary font-extrabold text-xl shadow-lg">
+              <div className="grid grid-cols-[auto_1fr] grid-rows-[auto_auto_auto] items-center gap-x-3 gap-y-2">
+                <div className="row-span-3 flex size-12 items-center justify-center place-self-center self-start rounded-xl bg-primary font-extrabold text-xl shadow-lg">
                   22
                 </div>
                 <div className="flex flex-col justify-between gap-2 sm:flex-row">
@@ -115,7 +118,6 @@ const Page = () => {
               <ActivityChart />
             </Card>
           </div>
-          <Separator className="my-8" />
           <h2 className="mb-3 font-bold text-lg">Top contributions</h2>
           <div className="grid grid-cols-1 gap-3">
             <ContributionCard />
@@ -125,51 +127,31 @@ const Page = () => {
               See more involvement
             </Button>
           </div>
+          <div className="mt-8">
+            <h2 className="mb-3 font-bold text-lg">Recent activity</h2>
+            <RecentActivity />
+            <p className="mt-2 font-semibold text-muted-foreground">
+              ... only last 20 actions are shown
+            </p>
+          </div>
         </div>
-        <Separator className="mt-8 mb-32" />
       </LayoutMain>
+      <LayoutFooter>
+        <p className="mt-24 mb-12 text-center font-medium text-muted-foreground">
+          Guild Profiles are currently in invite only early access, only available to{" "}
+          <Anchor
+            href={"#"}
+            className="inline-flex items-center gap-1"
+            variant="muted"
+          >
+            Subscribers
+            <ArrowRight />
+          </Anchor>
+        </p>
+      </LayoutFooter>
     </Layout>
   )
 }
-const ContributionCard = () => {
-  return (
-    <Card className="flex border-2">
-      <div className="relative h-full w-10 bg-border">
-        <div className="-translate-x-1/2 -rotate-90 absolute bottom-1/2 left-1/2 flex translate-y-1/2 items-center gap-1">
-          <Avatar size="sm">
-            <AvatarFallback>#</AvatarFallback>
-          </Avatar>
-          <div className="max-w-12 truncate font-bold font-display">Guild</div>
-        </div>
-      </div>
-      <div className="grid w-full grid-cols-[auto_1fr] items-center gap-4 p-6 md:grid-cols-[auto_auto_1fr]">
-        <Avatar className="size-16 sm:size-20">
-          <AvatarFallback>#</AvatarFallback>
-        </Avatar>
-        <div>
-          <div className="font-extrabold text-muted-foreground text-xs uppercase">
-            TOP ROLE
-          </div>
-          <h3 className="mb-1 font-bold font-display text-xl tracking-tight">
-            Enter Farcaster
-          </h3>
-          <div className="flex items-center gap-2 text-muted-foreground">
-            <Users weight="bold" className="min-w-4" />
-            <p className="line-clamp-1 text-sm">Only 3.4% of users have this role</p>
-          </div>
-        </div>
-        <div className="col-span-2 flex w-full flex-col gap-2 justify-self-end md:col-span-1 md:w-auto md:flex-row md:items-center">
-          <Separator className="mb-2 md:hidden" />
-          <div className="font-extrabold text-muted-foreground text-xs uppercase">
-            COLLECTION:
-          </div>
-          <AvatarGroup imageUrls={["", "", ""]} count={87} size="lg" />
-          <CaretDown weight="bold" className="ml-2 hidden size-5 md:block" />
-        </div>
-      </div>
-    </Card>
-  )
-}
 
 // biome-ignore lint/style/noDefaultExport: page route
 export default Page
diff --git a/src/v2/components/ui/Anchor.tsx b/src/v2/components/ui/Anchor.tsx
index 91b0773b66..4e9f99b37d 100644
--- a/src/v2/components/ui/Anchor.tsx
+++ b/src/v2/components/ui/Anchor.tsx
@@ -6,7 +6,7 @@ import Link from "next/link"
 import { ComponentProps, forwardRef } from "react"
 
 const anchorVariants = cva(
-  "underline-offset-4 focus:ring-ring focus-visible:ring-4 outline-none font-medium",
+  "underline-offset-4 focus:ring-ring focus-visible:ring-4 outline-none font-semibold",
   {
     variants: {
       variant: {
diff --git a/src/v2/components/ui/Avatar.tsx b/src/v2/components/ui/Avatar.tsx
index 22c898ff53..dc79ff349f 100644
--- a/src/v2/components/ui/Avatar.tsx
+++ b/src/v2/components/ui/Avatar.tsx
@@ -11,6 +11,7 @@ export const avatarVariants = cva(
   {
     variants: {
       size: {
+        xs: "size-5",
         sm: "size-7",
         md: "size-10",
         lg: "size-12",

From 56be0707050644f98c1df78339d7c20d76a2ac72 Mon Sep 17 00:00:00 2001
From: Dominik Stumpf <s.dominik.work@gmail.com>
Date: Tue, 23 Jul 2024 14:52:04 +0200
Subject: [PATCH 09/87] chore: replace xp by badge

---
 .../profile/_components/RecentActivity.tsx      | 17 +++++++++++++----
 1 file changed, 13 insertions(+), 4 deletions(-)

diff --git a/src/app/(marketing)/profile/_components/RecentActivity.tsx b/src/app/(marketing)/profile/_components/RecentActivity.tsx
index ff4e690ff7..b20461a7e3 100644
--- a/src/app/(marketing)/profile/_components/RecentActivity.tsx
+++ b/src/app/(marketing)/profile/_components/RecentActivity.tsx
@@ -43,16 +43,25 @@ export const RecentActivity = () => {
             <div className="px-5 py-6">
               <h3 className="font-bold">
                 Acquire the{" "}
-                <Badge className="mx-1">
+                <Badge>
                   <Rocket weight="fill" className="mr-1" />
                   Enter Farcaster
                 </Badge>{" "}
                 role
               </h3>
-              <div className="flex items-center gap-2">
+              <div className="mt-1.5 flex flex-col sm:flex-row sm:items-center sm:gap-2">
                 <p className="text-muted-foreground">2 hours ago</p>
-                <Circle className="size-1.5 text-muted-foreground" weight="fill" />
-                <span className="font-bold text-primary">+5 XP</span>
+                <Circle
+                  className="hidden size-1.5 text-muted-foreground sm:block"
+                  weight="fill"
+                />
+                <Badge
+                  colorScheme="blue"
+                  className="self-start sm:self-center"
+                  size="sm"
+                >
+                  +5 XP
+                </Badge>
               </div>
             </div>
           </Card>

From 1989c4db7f4538dee390ea8b23675e95e54d61e9 Mon Sep 17 00:00:00 2001
From: Dominik Stumpf <s.dominik.work@gmail.com>
Date: Tue, 23 Jul 2024 15:16:15 +0200
Subject: [PATCH 10/87] chore: move PageContainer into Layout

---
 src/v2/components/Layout/Layout.tsx        | 35 ++++++++++++++++++----
 src/v2/components/Layout/PageContainer.tsx | 21 -------------
 2 files changed, 30 insertions(+), 26 deletions(-)
 delete mode 100644 src/v2/components/Layout/PageContainer.tsx

diff --git a/src/v2/components/Layout/Layout.tsx b/src/v2/components/Layout/Layout.tsx
index 627a619fe7..8336f8c169 100644
--- a/src/v2/components/Layout/Layout.tsx
+++ b/src/v2/components/Layout/Layout.tsx
@@ -1,6 +1,8 @@
 import { cn } from "@/lib/utils"
+import { Slot } from "@radix-ui/react-slot"
+import clsx from "clsx"
 import { PropsWithChildren, ReactNode } from "react"
-import { PageContainer } from "./PageContainer"
+import { forwardRef } from "react"
 
 /* -------------------------------------------------------------------------------------------------
  * Layout
@@ -14,6 +16,28 @@ const Layout = ({ children, ...props }: LayoutProps) => (
   </div>
 )
 
+/* -------------------------------------------------------------------------------------------------
+ * LayoutContainer
+ * -----------------------------------------------------------------------------------------------*/
+
+interface LayoutContainerProps extends React.HTMLAttributes<HTMLDivElement> {
+  asChild?: boolean
+}
+
+const LayoutContainer = forwardRef<HTMLDivElement, LayoutContainerProps>(
+  ({ children, className, asChild = false }, ref) => {
+    const Comp = asChild ? Slot : "div"
+    return (
+      <Comp
+        className={clsx("mx-auto max-w-screen-lg px-4 sm:px-8 md:px-10", className)}
+        ref={ref}
+      >
+        {children}
+      </Comp>
+    )
+  }
+)
+
 /* -------------------------------------------------------------------------------------------------
  * LayoutHero
  * -----------------------------------------------------------------------------------------------*/
@@ -31,11 +55,11 @@ interface LayoutHeadlineProps {
 }
 
 const LayoutHeadline = ({ title }: LayoutHeadlineProps) => (
-  <PageContainer>
+  <LayoutContainer>
     <h1 className="pt-9 pb-14 font-bold font-display text-4xl text-white tracking-tight sm:text-5xl">
       {title}
     </h1>
-  </PageContainer>
+  </LayoutContainer>
 )
 
 /* -------------------------------------------------------------------------------------------------
@@ -72,7 +96,7 @@ const LayoutBanner = ({ children, className }: LayoutBannerProps) => (
 
 const LayoutMain = ({ children }: PropsWithChildren) => (
   <main>
-    <PageContainer>{children}</PageContainer>
+    <LayoutContainer>{children}</LayoutContainer>
   </main>
 )
 
@@ -82,7 +106,7 @@ const LayoutMain = ({ children }: PropsWithChildren) => (
 
 const LayoutFooter = ({ children }: PropsWithChildren) => (
   <footer className="mt-auto">
-    <PageContainer>{children}</PageContainer>
+    <LayoutContainer>{children}</LayoutContainer>
   </footer>
 )
 
@@ -95,5 +119,6 @@ export {
   LayoutHeadline,
   LayoutHero,
   LayoutMain,
+  LayoutContainer,
   Layout,
 }
diff --git a/src/v2/components/Layout/PageContainer.tsx b/src/v2/components/Layout/PageContainer.tsx
deleted file mode 100644
index 1e98a4222d..0000000000
--- a/src/v2/components/Layout/PageContainer.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-import { Slot } from "@radix-ui/react-slot"
-import clsx from "clsx"
-import { forwardRef } from "react"
-
-export interface PageContainerProps extends React.HTMLAttributes<HTMLDivElement> {
-  asChild?: boolean
-}
-
-export const PageContainer = forwardRef<HTMLDivElement, PageContainerProps>(
-  ({ children, className, asChild = false }, ref) => {
-    const Comp = asChild ? Slot : "div"
-    return (
-      <Comp
-        className={clsx("mx-auto max-w-screen-lg px-4 sm:px-8 md:px-10", className)}
-        ref={ref}
-      >
-        {children}
-      </Comp>
-    )
-  }
-)

From 5fabd670beb366d6963cd032c95a1cc9626478ca Mon Sep 17 00:00:00 2001
From: Dominik Stumpf <s.dominik.work@gmail.com>
Date: Tue, 23 Jul 2024 15:26:39 +0200
Subject: [PATCH 11/87] chore: add customizability to Layout components

---
 src/v2/components/Layout/Layout.tsx | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/v2/components/Layout/Layout.tsx b/src/v2/components/Layout/Layout.tsx
index 8336f8c169..0656706fc6 100644
--- a/src/v2/components/Layout/Layout.tsx
+++ b/src/v2/components/Layout/Layout.tsx
@@ -8,7 +8,7 @@ import { forwardRef } from "react"
  * Layout
  * -----------------------------------------------------------------------------------------------*/
 
-export interface LayoutProps extends React.HTMLAttributes<HTMLDivElement> {}
+interface LayoutProps extends React.HTMLAttributes<HTMLDivElement> {}
 
 const Layout = ({ children, ...props }: LayoutProps) => (
   <div className="flex min-h-screen flex-col" {...props}>
@@ -94,9 +94,9 @@ const LayoutBanner = ({ children, className }: LayoutBannerProps) => (
  * LayoutMain
  * -----------------------------------------------------------------------------------------------*/
 
-const LayoutMain = ({ children }: PropsWithChildren) => (
+const LayoutMain = ({ children, ...props }: LayoutContainerProps) => (
   <main>
-    <LayoutContainer>{children}</LayoutContainer>
+    <LayoutContainer {...props}>{children}</LayoutContainer>
   </main>
 )
 
@@ -104,9 +104,9 @@ const LayoutMain = ({ children }: PropsWithChildren) => (
  * LayoutFooter
  * -----------------------------------------------------------------------------------------------*/
 
-const LayoutFooter = ({ children }: PropsWithChildren) => (
+const LayoutFooter = ({ children, ...props }: LayoutContainerProps) => (
   <footer className="mt-auto">
-    <LayoutContainer>{children}</LayoutContainer>
+    <LayoutContainer {...props}>{children}</LayoutContainer>
   </footer>
 )
 

From e86511c8ae561a200cd6ce4f1ed7a261ebe59f9b Mon Sep 17 00:00:00 2001
From: Dominik Stumpf <s.dominik.work@gmail.com>
Date: Tue, 23 Jul 2024 15:31:03 +0200
Subject: [PATCH 12/87] test: update stories

---
 src/v2/components/Layout/Layout.stories.tsx | 28 ++++++++++++++-------
 1 file changed, 19 insertions(+), 9 deletions(-)

diff --git a/src/v2/components/Layout/Layout.stories.tsx b/src/v2/components/Layout/Layout.stories.tsx
index 0b01f9e27b..296c1e7bb8 100644
--- a/src/v2/components/Layout/Layout.stories.tsx
+++ b/src/v2/components/Layout/Layout.stories.tsx
@@ -1,5 +1,13 @@
 import type { Meta, StoryFn } from "@storybook/react"
-import { Layout } from "."
+import {
+  Layout,
+  LayoutBanner,
+  LayoutFooter,
+  LayoutHeadline,
+  LayoutHero,
+  LayoutMain,
+} from "."
+import { LayoutBannerBackground } from "./Layout"
 
 const meta: Meta = {
   title: "Design system/Layout",
@@ -11,12 +19,14 @@ const meta: Meta = {
 export default meta
 
 export const Static: StoryFn = () => (
-  <Layout.Root>
-    <Layout.Hero>
-      <Layout.Banner />
-      <Layout.Headline title="Layout title" />
-    </Layout.Hero>
-    <Layout.Main>Page contents</Layout.Main>
-    <Layout.Footer />
-  </Layout.Root>
+  <Layout>
+    <LayoutHero>
+      <LayoutBanner>
+        <LayoutBannerBackground />
+      </LayoutBanner>
+      <LayoutHeadline title="Layout title" />
+    </LayoutHero>
+    <LayoutMain>Page contents</LayoutMain>
+    <LayoutFooter />
+  </Layout>
 )

From 4a28b4bbfd0f682de65952fea41986c336c6ff6d Mon Sep 17 00:00:00 2001
From: Dominik Stumpf <s.dominik.work@gmail.com>
Date: Tue, 23 Jul 2024 18:15:02 +0200
Subject: [PATCH 13/87] chore: remove lucide-react dep

---
 package-lock.json | 161 ++++++++++++++++++++++++++++++++++++++++++++++
 package.json      |   1 -
 2 files changed, 161 insertions(+), 1 deletion(-)

diff --git a/package-lock.json b/package-lock.json
index 8d9db5b567..987b05ea63 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -41,6 +41,7 @@
         "@radix-ui/react-focus-scope": "^1.1.0",
         "@radix-ui/react-label": "^2.1.0",
         "@radix-ui/react-popover": "^1.1.1",
+        "@radix-ui/react-progress": "^1.1.0",
         "@radix-ui/react-separator": "^1.1.0",
         "@radix-ui/react-slot": "^1.1.0",
         "@radix-ui/react-toast": "^1.2.1",
@@ -97,6 +98,7 @@
         "react-markdown": "^8.0.7",
         "react-papaparse": "^4.4.0",
         "react-window": "^1.8.8",
+        "recharts": "^2.12.7",
         "remark-gfm": "^4.0.0",
         "slugify": "^1.6.5",
         "swr": "^2.2.4",
@@ -8477,6 +8479,29 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-progress": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-progress/-/react-progress-1.1.0.tgz",
+      "integrity": "sha512-aSzvnYpP725CROcxAOEBVZZSIQVQdHgBr2QQFKySsaD14u8dNT0batuXI+AAGDdAHfXH8rbnHmjYFqVJ21KkRg==",
+      "dependencies": {
+        "@radix-ui/react-context": "1.1.0",
+        "@radix-ui/react-primitive": "2.0.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-roving-focus": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-roving-focus/-/react-roving-focus-1.1.0.tgz",
@@ -12801,6 +12826,11 @@
       "resolved": "https://registry.npmjs.org/@types/d3-delaunay/-/d3-delaunay-6.0.1.tgz",
       "integrity": "sha512-tLxQ2sfT0p6sxdG75c6f/ekqxjyYR0+LwPrsO1mbC9YDBzPJhs2HbJJRrn8Ez1DBoHRo2yx7YEATI+8V1nGMnQ=="
     },
+    "node_modules/@types/d3-ease": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/@types/d3-ease/-/d3-ease-3.0.2.tgz",
+      "integrity": "sha512-NcV1JjO5oDzoK26oMzbILE6HW7uVXOHLQvHshBUW4UMdZGfiY6v5BeQwh9a9tCzv+CeefZQHJt5SRgK154RtiA=="
+    },
     "node_modules/@types/d3-format": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/@types/d3-format/-/d3-format-3.0.1.tgz",
@@ -12853,6 +12883,11 @@
       "resolved": "https://registry.npmjs.org/@types/d3-time-format/-/d3-time-format-2.1.0.tgz",
       "integrity": "sha512-/myT3I7EwlukNOX2xVdMzb8FRgNzRMpsZddwst9Ld/VFe6LyJyRp0s32l/V9XoUzk+Gqu56F/oGk6507+8BxrA=="
     },
+    "node_modules/@types/d3-timer": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/@types/d3-timer/-/d3-timer-3.0.2.tgz",
+      "integrity": "sha512-Ps3T8E8dZDam6fUyNiMkekK3XUsaUEik+idO9/YjPtfj2qruF8tFBXS7XhtE4iIXBLxhmLjP3SXpLhVf21I9Lw=="
+    },
     "node_modules/@types/d3-voronoi": {
       "version": "1.1.12",
       "resolved": "https://registry.npmjs.org/@types/d3-voronoi/-/d3-voronoi-1.1.12.tgz",
@@ -18751,6 +18786,14 @@
         "node": ">=12"
       }
     },
+    "node_modules/d3-ease": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-ease/-/d3-ease-3.0.1.tgz",
+      "integrity": "sha512-wR/XK3D3XcLIZwpbvQwQ5fK+8Ykds1ip7A2Txe0yxncXSdq1L9skcG7blcedkOX+ZcgxGAmLX1FrRGbADwzi0w==",
+      "engines": {
+        "node": ">=12"
+      }
+    },
     "node_modules/d3-format": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/d3-format/-/d3-format-3.1.0.tgz",
@@ -18836,6 +18879,14 @@
         "node": ">=12"
       }
     },
+    "node_modules/d3-timer": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-timer/-/d3-timer-3.0.1.tgz",
+      "integrity": "sha512-ndfJ/JxxMd3nw31uyKoY2naivF+r29V+Lc0svZxe1JvvIRmi8hUsrMvdOwgS1o6uBHmiz91geQ0ylPP0aj1VUA==",
+      "engines": {
+        "node": ">=12"
+      }
+    },
     "node_modules/d3-voronoi": {
       "version": "1.1.4",
       "resolved": "https://registry.npmjs.org/d3-voronoi/-/d3-voronoi-1.1.4.tgz",
@@ -18936,6 +18987,11 @@
       "resolved": "https://registry.npmjs.org/decimal.js/-/decimal.js-10.4.3.tgz",
       "integrity": "sha512-VBBaLc1MgL5XpzgIP7ny5Z6Nx3UrRkIViUkPUdtl9aya5amy3De1gsUUSB1g3+3sExYNjCAsAznmukyxCb1GRA=="
     },
+    "node_modules/decimal.js-light": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/decimal.js-light/-/decimal.js-light-2.5.1.tgz",
+      "integrity": "sha512-qIMFpTMZmny+MMIitAB6D7iVPEorVw6YQRWkvarTkT4tBeSLLiHzcwj6q0MmYSFCiVpiqPJTJEYIrpcPzVEIvg=="
+    },
     "node_modules/decode-named-character-reference": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/decode-named-character-reference/-/decode-named-character-reference-1.0.2.tgz",
@@ -20265,6 +20321,14 @@
       "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
       "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q=="
     },
+    "node_modules/fast-equals": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/fast-equals/-/fast-equals-5.0.1.tgz",
+      "integrity": "sha512-WF1Wi8PwwSY7/6Kx0vKXtw8RwuSGoM1bvDaJbu7MxDlR1vovZjIAKrnzyrThgAjm6JDTu0fVgWXDlMGspodfoQ==",
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
     "node_modules/fast-glob": {
       "version": "3.3.2",
       "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.3.2.tgz",
@@ -29070,6 +29134,20 @@
         "react-dom": "^16.8.0 || ^17 || ^18"
       }
     },
+    "node_modules/react-smooth": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/react-smooth/-/react-smooth-4.0.1.tgz",
+      "integrity": "sha512-OE4hm7XqR0jNOq3Qmk9mFLyd6p2+j6bvbPJ7qlB7+oo0eNcL2l7WQzG6MBnT3EXY6xzkLMUBec3AfewJdA0J8w==",
+      "dependencies": {
+        "fast-equals": "^5.0.1",
+        "prop-types": "^15.8.1",
+        "react-transition-group": "^4.4.5"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+        "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
     "node_modules/react-style-singleton": {
       "version": "2.2.1",
       "resolved": "https://registry.npmjs.org/react-style-singleton/-/react-style-singleton-2.2.1.tgz",
@@ -29321,6 +29399,41 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/recharts": {
+      "version": "2.12.7",
+      "resolved": "https://registry.npmjs.org/recharts/-/recharts-2.12.7.tgz",
+      "integrity": "sha512-hlLJMhPQfv4/3NBSAyq3gzGg4h2v69RJh6KU7b3pXYNNAELs9kEoXOjbkxdXpALqKBoVmVptGfLpxdaVYqjmXQ==",
+      "dependencies": {
+        "clsx": "^2.0.0",
+        "eventemitter3": "^4.0.1",
+        "lodash": "^4.17.21",
+        "react-is": "^16.10.2",
+        "react-smooth": "^4.0.0",
+        "recharts-scale": "^0.4.4",
+        "tiny-invariant": "^1.3.1",
+        "victory-vendor": "^36.6.8"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "peerDependencies": {
+        "react": "^16.0.0 || ^17.0.0 || ^18.0.0",
+        "react-dom": "^16.0.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
+    "node_modules/recharts-scale": {
+      "version": "0.4.5",
+      "resolved": "https://registry.npmjs.org/recharts-scale/-/recharts-scale-0.4.5.tgz",
+      "integrity": "sha512-kivNFO+0OcUNu7jQquLXAxz1FIwZj8nrj+YkOKc5694NbjCvcT6aSZiIzNzd2Kul4o4rTto8QVR9lMNtxD4G1w==",
+      "dependencies": {
+        "decimal.js-light": "^2.4.1"
+      }
+    },
+    "node_modules/recharts/node_modules/eventemitter3": {
+      "version": "4.0.7",
+      "resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-4.0.7.tgz",
+      "integrity": "sha512-8guHBZCwKnFhYdHr2ysuRWErTwhoN2X8XELRlrRwpmfeY2jjuUN4taQMsULKUVo1K4DvZl+0pgfyoysHxvmvEw=="
+    },
     "node_modules/redent": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/redent/-/redent-3.0.0.tgz",
@@ -33518,6 +33631,54 @@
         "url": "https://opencollective.com/unified"
       }
     },
+    "node_modules/victory-vendor": {
+      "version": "36.9.2",
+      "resolved": "https://registry.npmjs.org/victory-vendor/-/victory-vendor-36.9.2.tgz",
+      "integrity": "sha512-PnpQQMuxlwYdocC8fIJqVXvkeViHYzotI+NJrCuav0ZYFoq912ZHBk3mCeuj+5/VpodOjPe1z0Fk2ihgzlXqjQ==",
+      "dependencies": {
+        "@types/d3-array": "^3.0.3",
+        "@types/d3-ease": "^3.0.0",
+        "@types/d3-interpolate": "^3.0.1",
+        "@types/d3-scale": "^4.0.2",
+        "@types/d3-shape": "^3.1.0",
+        "@types/d3-time": "^3.0.0",
+        "@types/d3-timer": "^3.0.0",
+        "d3-array": "^3.1.6",
+        "d3-ease": "^3.0.1",
+        "d3-interpolate": "^3.0.1",
+        "d3-scale": "^4.0.2",
+        "d3-shape": "^3.1.0",
+        "d3-time": "^3.0.0",
+        "d3-timer": "^3.0.1"
+      }
+    },
+    "node_modules/victory-vendor/node_modules/@types/d3-shape": {
+      "version": "3.1.6",
+      "resolved": "https://registry.npmjs.org/@types/d3-shape/-/d3-shape-3.1.6.tgz",
+      "integrity": "sha512-5KKk5aKGu2I+O6SONMYSNflgiP0WfZIQvVUMan50wHsLG1G94JlxEVnCpQARfTtzytuY0p/9PXXZb3I7giofIA==",
+      "dependencies": {
+        "@types/d3-path": "*"
+      }
+    },
+    "node_modules/victory-vendor/node_modules/d3-path": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/d3-path/-/d3-path-3.1.0.tgz",
+      "integrity": "sha512-p3KP5HCf/bvjBSSKuXid6Zqijx7wIfNW+J/maPs+iwR35at5JCbLUT0LzF1cnjbCHWhqzQTIN2Jpe8pRebIEFQ==",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/victory-vendor/node_modules/d3-shape": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/d3-shape/-/d3-shape-3.2.0.tgz",
+      "integrity": "sha512-SaLBuwGm3MOViRq2ABk3eLoxwZELpH6zhl3FbAoJ7Vm1gofKx6El1Ib5z23NUEhF9AsGl7y+dzLe5Cw2AArGTA==",
+      "dependencies": {
+        "d3-path": "^3.1.0"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
     "node_modules/viem": {
       "version": "2.17.4",
       "resolved": "https://registry.npmjs.org/viem/-/viem-2.17.4.tgz",
diff --git a/package.json b/package.json
index 855202b775..23cb3153c5 100644
--- a/package.json
+++ b/package.json
@@ -91,7 +91,6 @@
     "jotai": "^2.7.0",
     "js-confetti": "^0.11.0",
     "lexical": "^0.12.0",
-    "lucide-react": "^0.408.0",
     "mini-svg-data-uri": "^1.4.4",
     "next": "^14.2.4",
     "next-themes": "^0.3.0",

From da2850508119c8860ca6aeef88073d4be37634d0 Mon Sep 17 00:00:00 2001
From: Dominik Stumpf <s.dominik.work@gmail.com>
Date: Thu, 25 Jul 2024 20:23:19 +0200
Subject: [PATCH 14/87] feat: add bg to circle xp bar

---
 package-lock.json                             | 15 +++++---
 package.json                                  |  2 +-
 .../profile/{ => [username]}/page.tsx         | 34 ++++++-------------
 .../_components/CircularProgressBar.tsx       | 33 ++++++++++++++++++
 .../profile/_components/ContributionCard.tsx  |  3 +-
 src/v2/components/ui/Avatar.tsx               |  2 --
 6 files changed, 55 insertions(+), 34 deletions(-)
 rename src/app/(marketing)/profile/{ => [username]}/page.tsx (86%)
 create mode 100644 src/app/(marketing)/profile/_components/CircularProgressBar.tsx

diff --git a/package-lock.json b/package-lock.json
index bdacc83c18..861780d682 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -98,7 +98,7 @@
         "react-markdown": "^8.0.7",
         "react-papaparse": "^4.4.0",
         "react-window": "^1.8.8",
-        "recharts": "^2.12.7",
+        "recharts": "^2.13.0-alpha.4",
         "remark-gfm": "^4.0.0",
         "slugify": "^1.6.5",
         "swr": "^2.2.4",
@@ -28570,14 +28570,14 @@
       }
     },
     "node_modules/recharts": {
-      "version": "2.12.7",
-      "resolved": "https://registry.npmjs.org/recharts/-/recharts-2.12.7.tgz",
-      "integrity": "sha512-hlLJMhPQfv4/3NBSAyq3gzGg4h2v69RJh6KU7b3pXYNNAELs9kEoXOjbkxdXpALqKBoVmVptGfLpxdaVYqjmXQ==",
+      "version": "2.13.0-alpha.4",
+      "resolved": "https://registry.npmjs.org/recharts/-/recharts-2.13.0-alpha.4.tgz",
+      "integrity": "sha512-K9naL6F7pEcDYJE6yFQASSCQecSLPP0JagnvQ9hPtA/aHgsxsnIOjouLP5yrFZehxzfCkV5TEORr7/uNtSr7Qw==",
       "dependencies": {
         "clsx": "^2.0.0",
         "eventemitter3": "^4.0.1",
         "lodash": "^4.17.21",
-        "react-is": "^16.10.2",
+        "react-is": "^18.3.1",
         "react-smooth": "^4.0.0",
         "recharts-scale": "^0.4.4",
         "tiny-invariant": "^1.3.1",
@@ -28604,6 +28604,11 @@
       "resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-4.0.7.tgz",
       "integrity": "sha512-8guHBZCwKnFhYdHr2ysuRWErTwhoN2X8XELRlrRwpmfeY2jjuUN4taQMsULKUVo1K4DvZl+0pgfyoysHxvmvEw=="
     },
+    "node_modules/recharts/node_modules/react-is": {
+      "version": "18.3.1",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.3.1.tgz",
+      "integrity": "sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg=="
+    },
     "node_modules/redent": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/redent/-/redent-3.0.0.tgz",
diff --git a/package.json b/package.json
index e96f029f6d..3bf2997bc2 100644
--- a/package.json
+++ b/package.json
@@ -109,7 +109,7 @@
     "react-markdown": "^8.0.7",
     "react-papaparse": "^4.4.0",
     "react-window": "^1.8.8",
-    "recharts": "^2.12.7",
+    "recharts": "^2.13.0-alpha.4",
     "remark-gfm": "^4.0.0",
     "slugify": "^1.6.5",
     "swr": "^2.2.4",
diff --git a/src/app/(marketing)/profile/page.tsx b/src/app/(marketing)/profile/[username]/page.tsx
similarity index 86%
rename from src/app/(marketing)/profile/page.tsx
rename to src/app/(marketing)/profile/[username]/page.tsx
index 4d9bb26cf5..e55823bde4 100644
--- a/src/app/(marketing)/profile/page.tsx
+++ b/src/app/(marketing)/profile/[username]/page.tsx
@@ -1,5 +1,3 @@
-"use client"
-
 import {
   Layout,
   LayoutBanner,
@@ -14,18 +12,19 @@ import { AvatarGroup } from "@/components/ui/AvatarGroup"
 import { Badge } from "@/components/ui/Badge"
 import { Button } from "@/components/ui/Button"
 import { Card } from "@/components/ui/Card"
-import { ChartContainer } from "@/components/ui/Chart"
 import { Progress } from "@/components/ui/Progress"
 import { Separator } from "@/components/ui/Separator"
 import { ArrowRight, CircleWavyCheck } from "@phosphor-icons/react/dist/ssr"
-import { RadialBar, RadialBarChart } from "recharts"
-import { ActivityChart } from "./_components/ActivityChart"
-import { ContributionCard } from "./_components/ContributionCard"
-import { RecentActivity } from "./_components/RecentActivity"
-
-const chartData = [{ experience: 1, fill: "hsl(var(--primary))" }]
+import { ActivityChart } from "../_components/ActivityChart"
+import { CircularProgressBar } from "../_components/CircularProgressBar"
+import { ContributionCard } from "../_components/ContributionCard"
+import { RecentActivity } from "../_components/RecentActivity"
 
-const Page = () => {
+const Page = async ({
+  params: { username },
+}: {
+  params: { username: string }
+}) => {
   return (
     <Layout>
       <LayoutHero>
@@ -39,20 +38,7 @@ const Page = () => {
         <div className="mt-24">
           <div className="mb-24 flex flex-col items-center">
             <div className="relative mb-12 flex items-center justify-center">
-              <ChartContainer
-                config={{}}
-                className="-scale-x-100 absolute aspect-square min-h-56 rotate-90"
-              >
-                <RadialBarChart
-                  data={chartData}
-                  startAngle={0}
-                  endAngle={280}
-                  innerRadius={105}
-                  outerRadius={115}
-                >
-                  <RadialBar dataKey="experience" cornerRadius={10} />
-                </RadialBarChart>
-              </ChartContainer>
+              <CircularProgressBar />
               <Avatar className="size-48">
                 <AvatarFallback>#</AvatarFallback>
               </Avatar>
diff --git a/src/app/(marketing)/profile/_components/CircularProgressBar.tsx b/src/app/(marketing)/profile/_components/CircularProgressBar.tsx
new file mode 100644
index 0000000000..488a43312d
--- /dev/null
+++ b/src/app/(marketing)/profile/_components/CircularProgressBar.tsx
@@ -0,0 +1,33 @@
+"use client"
+
+import { ChartContainer } from "@/components/ui/Chart"
+import { RadialBar, RadialBarChart } from "recharts"
+
+const chartData = [{ experience: 1, fill: "hsl(var(--primary))" }]
+
+export const CircularProgressBar = () => {
+  return (
+    <ChartContainer
+      config={{}}
+      className="-scale-x-100 absolute aspect-square min-h-56 rotate-90"
+    >
+      <RadialBarChart
+        data={chartData}
+        startAngle={0}
+        endAngle={280}
+        innerRadius={105}
+        outerRadius={115}
+      >
+        <circle
+          className="stroke-muted"
+          cx={224 >> 1}
+          cy={224 >> 1}
+          r={103}
+          strokeWidth={13}
+          fill="none"
+        />
+        <RadialBar dataKey="experience" cornerRadius={10} />
+      </RadialBarChart>
+    </ChartContainer>
+  )
+}
diff --git a/src/app/(marketing)/profile/_components/ContributionCard.tsx b/src/app/(marketing)/profile/_components/ContributionCard.tsx
index 3314c74580..78fe3ae20e 100644
--- a/src/app/(marketing)/profile/_components/ContributionCard.tsx
+++ b/src/app/(marketing)/profile/_components/ContributionCard.tsx
@@ -3,8 +3,7 @@ import { AvatarGroup } from "@/components/ui/AvatarGroup"
 import { Button } from "@/components/ui/Button"
 import { Card } from "@/components/ui/Card"
 import { Separator } from "@/components/ui/Separator"
-import { CaretDown } from "@phosphor-icons/react"
-import { Users } from "@phosphor-icons/react/dist/ssr"
+import { CaretDown, Users } from "@phosphor-icons/react/dist/ssr"
 
 export const ContributionCard = () => {
   return (
diff --git a/src/v2/components/ui/Avatar.tsx b/src/v2/components/ui/Avatar.tsx
index dc79ff349f..ca0c9f20f5 100644
--- a/src/v2/components/ui/Avatar.tsx
+++ b/src/v2/components/ui/Avatar.tsx
@@ -1,5 +1,3 @@
-"use client"
-
 import { cn } from "@/lib/utils"
 import * as AvatarPrimitive from "@radix-ui/react-avatar"
 import { VariantProps, cva } from "class-variance-authority"

From 0e4e90fc261d408b97a41b8ca1f14d7b986bd875 Mon Sep 17 00:00:00 2001
From: Dominik Stumpf <s.dominik.work@gmail.com>
Date: Fri, 26 Jul 2024 19:06:48 +0200
Subject: [PATCH 15/87] feat: try filling user data

---
 .../(marketing)/profile/[username]/page.tsx   | 42 ++++++++++++++++---
 1 file changed, 36 insertions(+), 6 deletions(-)

diff --git a/src/app/(marketing)/profile/[username]/page.tsx b/src/app/(marketing)/profile/[username]/page.tsx
index e55823bde4..84bc01b700 100644
--- a/src/app/(marketing)/profile/[username]/page.tsx
+++ b/src/app/(marketing)/profile/[username]/page.tsx
@@ -7,7 +7,7 @@ import {
   LayoutMain,
 } from "@/components/Layout"
 import { Anchor } from "@/components/ui/Anchor"
-import { Avatar, AvatarFallback } from "@/components/ui/Avatar"
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/Avatar"
 import { AvatarGroup } from "@/components/ui/AvatarGroup"
 import { Badge } from "@/components/ui/Badge"
 import { Button } from "@/components/ui/Button"
@@ -20,11 +20,36 @@ import { CircularProgressBar } from "../_components/CircularProgressBar"
 import { ContributionCard } from "../_components/ContributionCard"
 import { RecentActivity } from "../_components/RecentActivity"
 
+async function getProfileData(username: string) {
+  const req = `https://api.guild.xyz/v2/profiles/${username}`
+  console.log(req)
+  const res = await fetch(req)
+  if (!res.ok) {
+    throw new Error("Failed to fetch profile data")
+  }
+  return res.json() as Promise<Profile>
+}
+
+// TODO: try get this from the backend if not possible write zod validation
+interface Profile {
+  id: number
+  userId: number
+  username: string
+  name: string
+  bio: null | string
+  profileImageUrl: null | string
+  backgroundImageUrl: null | string
+  createdAt: string
+  updatedAt: string
+}
+
 const Page = async ({
   params: { username },
 }: {
   params: { username: string }
 }) => {
+  const profile = await getProfileData(username)
+
   return (
     <Layout>
       <LayoutHero>
@@ -38,25 +63,30 @@ const Page = async ({
         <div className="mt-24">
           <div className="mb-24 flex flex-col items-center">
             <div className="relative mb-12 flex items-center justify-center">
-              <CircularProgressBar />
               <Avatar className="size-48">
+                <AvatarImage
+                  src={profile.profileImageUrl ?? ""}
+                  alt="profile"
+                  width={192}
+                  height={192}
+                />
                 <AvatarFallback>#</AvatarFallback>
               </Avatar>
+              <CircularProgressBar />
               <div className="absolute right-0 bottom-0 flex size-12 items-center justify-center rounded-xl bg-primary font-extrabold text-xl shadow-lg">
                 22
               </div>
             </div>
             <h1 className="text-center font-bold text-4xl leading-normal tracking-tight">
-              Maximillian Xiaohua Longname
+              {profile.name}
               <CircleWavyCheck
                 weight="fill"
                 className="ml-4 inline size-6 fill-yellow-500"
               />
             </h1>
-            <div className="text-lg text-muted-foreground">@stephaniexixo11</div>
+            <div className="text-lg text-muted-foreground">@{profile.username}</div>
             <p className="mt-6 max-w-md text-pretty text-center text-lg text-muted-foreground">
-              This is a description that perfectly matches the 80 character
-              description limit.
+              {profile.bio ?? "Write your bio"}
             </p>
             <div className="mt-8 flex flex-wrap items-center justify-center gap-x-8 gap-y-6">
               <div className="flex flex-col items-center leading-tight">

From 2c284531df00f6f47fffe04bd0fcb2bb239e7d6a Mon Sep 17 00:00:00 2001
From: Dominik Stumpf <s.dominik.work@gmail.com>
Date: Fri, 26 Jul 2024 19:16:14 +0200
Subject: [PATCH 16/87] chore: remove providers and account

---
 src/v2/components/Header/Header.tsx       |  3 ---
 src/v2/components/Providers/Providers.tsx | 32 +++--------------------
 2 files changed, 3 insertions(+), 32 deletions(-)

diff --git a/src/v2/components/Header/Header.tsx b/src/v2/components/Header/Header.tsx
index b32aa8c806..77ba9a3951 100644
--- a/src/v2/components/Header/Header.tsx
+++ b/src/v2/components/Header/Header.tsx
@@ -1,12 +1,9 @@
 "use client"
-
-import { Account } from "../Account"
 import { NavMenu } from "./NavMenu"
 
 const Header = () => (
   <header className="relative flex h-16 w-full items-center justify-between p-2">
     <NavMenu />
-    <Account />
   </header>
 )
 
diff --git a/src/v2/components/Providers/Providers.tsx b/src/v2/components/Providers/Providers.tsx
index 8295007a83..26664b2e00 100644
--- a/src/v2/components/Providers/Providers.tsx
+++ b/src/v2/components/Providers/Providers.tsx
@@ -1,24 +1,15 @@
 "use client"
-
-import { FuelProvider } from "@fuels/react"
-import { QueryClient, QueryClientProvider } from "@tanstack/react-query"
+import { QueryClient } from "@tanstack/react-query"
 import { env } from "env"
-import { fuelConfig } from "fuelConfig"
 import { useAtomValue } from "jotai"
 import { ThemeProvider } from "next-themes"
 import dynamic from "next/dynamic"
-import { ReactNode, Suspense } from "react"
+import { ReactNode } from "react"
 import { SWRConfig } from "swr"
 import { fetcherForSWR } from "utils/fetcher"
 import { shouldUseReCAPTCHAAtom } from "utils/recaptcha"
-import { WagmiProvider } from "wagmi"
-import { wagmiConfig } from "wagmiConfig"
-import { AccountModal } from "../Account/components/AccountModal"
-import { Web3ConnectionManager } from "../Web3ConnectionManager"
 import { Toaster } from "../ui/Toaster"
 import { TooltipProvider } from "../ui/Tooltip"
-import { IntercomProvider } from "./IntercomProvider"
-import { PostHogProvider } from "./PostHogProvider"
 
 const DynamicReCAPTCHA = dynamic(() => import("v2/components/ReCAPTCHA"))
 
@@ -37,24 +28,7 @@ export function Providers({ children }: { children: ReactNode }) {
         disableTransitionOnChange
       >
         <TooltipProvider>
-          <SWRConfig value={{ fetcher: fetcherForSWR }}>
-            <WagmiProvider config={wagmiConfig} reconnectOnMount={false}>
-              <QueryClientProvider client={queryClient}>
-                <FuelProvider ui={false} fuelConfig={fuelConfig}>
-                  <PostHogProvider>
-                    <IntercomProvider>
-                      {children}
-                      <AccountModal />
-                      <Suspense>
-                        <Web3ConnectionManager />
-                      </Suspense>
-                    </IntercomProvider>
-                  </PostHogProvider>
-                </FuelProvider>
-              </QueryClientProvider>
-            </WagmiProvider>
-          </SWRConfig>
-
+          <SWRConfig value={{ fetcher: fetcherForSWR }}>{children}</SWRConfig>
           <Toaster />
         </TooltipProvider>
       </ThemeProvider>

From 53fc78c4d72749cf4275c35e2233613fc7b179e5 Mon Sep 17 00:00:00 2001
From: Dominik Stumpf <s.dominik.work@gmail.com>
Date: Fri, 26 Jul 2024 19:25:35 +0200
Subject: [PATCH 17/87] chore: fine tune CircularProgressBar

---
 .../profile/_components/CircularProgressBar.tsx | 17 ++++++++++-------
 1 file changed, 10 insertions(+), 7 deletions(-)

diff --git a/src/app/(marketing)/profile/_components/CircularProgressBar.tsx b/src/app/(marketing)/profile/_components/CircularProgressBar.tsx
index 488a43312d..ac5b2bd7f5 100644
--- a/src/app/(marketing)/profile/_components/CircularProgressBar.tsx
+++ b/src/app/(marketing)/profile/_components/CircularProgressBar.tsx
@@ -6,24 +6,27 @@ import { RadialBar, RadialBarChart } from "recharts"
 const chartData = [{ experience: 1, fill: "hsl(var(--primary))" }]
 
 export const CircularProgressBar = () => {
+  const size = 224
+  const strokeWidth = 10
   return (
     <ChartContainer
       config={{}}
-      className="-scale-x-100 absolute aspect-square min-h-56 rotate-90"
+      className="-scale-x-100 absolute aspect-square rotate-90"
+      style={{ minHeight: size }}
     >
       <RadialBarChart
         data={chartData}
         startAngle={0}
         endAngle={280}
-        innerRadius={105}
-        outerRadius={115}
+        innerRadius={106}
+        outerRadius={116}
       >
         <circle
           className="stroke-muted"
-          cx={224 >> 1}
-          cy={224 >> 1}
-          r={103}
-          strokeWidth={13}
+          cx={size >> 1}
+          cy={size >> 1}
+          r={(size >> 1) - (strokeWidth >> 1) - 1}
+          strokeWidth={strokeWidth}
           fill="none"
         />
         <RadialBar dataKey="experience" cornerRadius={10} />

From 996743284fa19364dc4cd835dd9fbc27c92411d1 Mon Sep 17 00:00:00 2001
From: Dominik Stumpf <s.dominik.work@gmail.com>
Date: Fri, 26 Jul 2024 19:51:15 +0200
Subject: [PATCH 18/87] feat: try adding compoundVariants to Toggle

---
 .../(marketing)/profile/[username]/page.tsx   | 26 ++++--
 .../profile/_components/RecentActivity.tsx    |  3 +-
 src/v2/components/ui/Toggle.tsx               | 93 +++++++++++++++++--
 3 files changed, 106 insertions(+), 16 deletions(-)

diff --git a/src/app/(marketing)/profile/[username]/page.tsx b/src/app/(marketing)/profile/[username]/page.tsx
index 84bc01b700..d673c78d7c 100644
--- a/src/app/(marketing)/profile/[username]/page.tsx
+++ b/src/app/(marketing)/profile/[username]/page.tsx
@@ -21,13 +21,27 @@ import { ContributionCard } from "../_components/ContributionCard"
 import { RecentActivity } from "../_components/RecentActivity"
 
 async function getProfileData(username: string) {
-  const req = `https://api.guild.xyz/v2/profiles/${username}`
-  console.log(req)
-  const res = await fetch(req)
-  if (!res.ok) {
-    throw new Error("Failed to fetch profile data")
+  // const req = `https://api.guild.xyz/v2/profiles/${username}`
+  // const res = await fetch(req)
+  // if (!res.ok) {
+  //   throw new Error("Failed to fetch profile data")
+  // }
+  // return res.json() as Promise<Profile>
+  //
+  // mocking for the time being
+  const res = {
+    id: 4,
+    userId: 6027190,
+    username: "durumm",
+    name: "durum",
+    bio: null,
+    profileImageUrl:
+      "https://guild-xyz.mypinata.cloud/ipfs/QmWGdo6FkjSz22oDZFMJysx3hGKoVqtzTWVMx9tTSP7jvi",
+    backgroundImageUrl: null,
+    createdAt: "2024-07-25T10:04:20.781Z",
+    updatedAt: "2024-07-25T10:04:20.781Z",
   }
-  return res.json() as Promise<Profile>
+  return res
 }
 
 // TODO: try get this from the backend if not possible write zod validation
diff --git a/src/app/(marketing)/profile/_components/RecentActivity.tsx b/src/app/(marketing)/profile/_components/RecentActivity.tsx
index b20461a7e3..de3058b3b3 100644
--- a/src/app/(marketing)/profile/_components/RecentActivity.tsx
+++ b/src/app/(marketing)/profile/_components/RecentActivity.tsx
@@ -16,7 +16,8 @@ export const RecentActivity = () => {
     <>
       <ToggleGroup
         type="single"
-        variant="primary"
+        colorScheme="primary"
+        variant="subtle"
         className="mb-4"
         onValueChange={(value) =>
           value && setActivityFilter(value as (typeof ACTIVITY_FILTERS)[number])
diff --git a/src/v2/components/ui/Toggle.tsx b/src/v2/components/ui/Toggle.tsx
index ca9c63ebb0..e3e754f2f2 100644
--- a/src/v2/components/ui/Toggle.tsx
+++ b/src/v2/components/ui/Toggle.tsx
@@ -5,29 +5,104 @@ import * as TogglePrimitive from "@radix-ui/react-toggle"
 import { type VariantProps, cva } from "class-variance-authority"
 import { ComponentPropsWithoutRef, ElementRef, forwardRef } from "react"
 
+const buttonVariants = cva(
+  "font-semibold inline-flex items-center justify-center whitespace-nowrap transition-colors focus-visible:outline-none focus-visible:ring-4 focus:ring-ring disabled:pointer-events-none disabled:opacity-50 rounded-xl text-base text-ellipsis overflow-hidden gap-1.5",
+  {
+    variants: {
+      variant: {
+        solid:
+          "bg-[hsl(var(--button-bg))] hover:bg-[hsl(var(--button-bg-hover))] active:bg-[hsl(var(--button-bg-active))] text-[hsl(var(--button-foreground))]",
+        ghost:
+          "bg-[hsl(var(--button-bg-subtle)/0)] hover:bg-[hsl(var(--button-bg-subtle)/0.12)] active:bg-[hsl(var(--button-bg-subtle)/0.24)] text-[hsl(var(--button-foreground-subtle))]",
+        subtle:
+          "bg-[hsl(var(--button-bg-subtle)/0.12)] hover:bg-[hsl(var(--button-bg-subtle)/0.24)] active:bg-[hsl(var(--button-bg-subtle)/0.36)] text-[hsl(var(--button-foreground-subtle))]",
+        outline:
+          "bg-[hsl(var(--button-bg-subtle)/0)] hover:bg-[hsl(var(--button-bg-subtle)/0.12)] active:bg-[hsl(var(--button-bg-subtle)/0.24)] text-[hsl(var(--button-foreground-subtle))] border-2 border-[hsl(var(--button-foreground-subtle))]",
+        unstyled: "",
+      },
+      // TODO: we could extract this to a Tailwind plugin
+      colorScheme: {
+        primary:
+          "[--button-bg:var(--primary)] [--button-bg-hover:var(--primary-hover)] [--button-bg-active:var(--primary-active)] [--button-foreground:var(--primary-foreground)] [--button-bg-subtle:var(--primary-subtle)] [--button-foreground-subtle:var(--primary-subtle-foreground)]",
+        secondary:
+          "[--button-bg:var(--secondary)] [--button-bg-hover:var(--secondary-hover)] [--button-bg-active:var(--secondary-active)] [--button-foreground:var(--secondary-foreground)] [--button-bg-subtle:var(--secondary-subtle)] [--button-foreground-subtle:var(--secondary-subtle-foreground)]",
+        info: "[--button-bg:var(--info)] [--button-bg-hover:var(--info-hover)]  [--button-bg-active:var(--info-active)] [--button-foreground:var(--info-foreground)] [--button-bg-subtle:var(--info-subtle)] [--button-foreground-subtle:var(--info-subtle-foreground)]",
+        destructive:
+          "[--button-bg:var(--destructive)] [--button-bg-hover:var(--destructive-hover)] [--button-bg-active:var(--destructive-active)] [--button-foreground:var(--destructive-foreground)] [--button-bg-subtle:var(--destructive-subtle)] [--button-foreground-subtle:var(--destructive-subtle-foreground)]",
+        success:
+          "[--button-bg:var(--success)] [--button-bg-hover:var(--success-hover)] [--button-bg-active:var(--success-active)] [--button-foreground:var(--success-foreground)] [--button-bg-subtle:var(--success-subtle)] [--button-foreground-subtle:var(--success-subtle-foreground)]",
+      },
+      size: {
+        xs: "h-6 px-2 text-xs gap-1",
+        sm: "h-8 px-3 text-sm",
+        md: "h-11 px-4 py-2",
+        lg: "h-12 px-6 py-4 text-lg",
+        xl: "h-14 px-6 py-4 text-lg gap-2",
+        icon: "h-10 w-10",
+      },
+    },
+    compoundVariants: [
+      {
+        colorScheme: "secondary",
+        variant: "outline",
+        className: "border-[hsl(var(--secondary))]",
+      },
+    ],
+    defaultVariants: {
+      variant: "solid",
+      colorScheme: "secondary",
+      size: "md",
+    },
+  }
+)
+
 const toggleVariants = cva(
   "inline-flex items-center justify-center rounded-lg text-sm font-medium transition-colors hover:bg-muted focus-visible:outline-none focus-visible:ring-4 focus:ring-ring disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground font-medium",
   {
     variants: {
       variant: {
-        default:
-          "text-secondary-foreground hover:bg-secondary data-[state=on]:bg-secondary active:bg-secondary-hover",
-        primary:
-          "bg-transparent hover:bg-accent/50 hover:text-accent-foreground data-[state=on]:bg-primary data-[state=on]:text-primary-foreground",
-        mono: "text-white hover:bg-white/10 data-[state=on]:bg-white/15 hover:text-white data-[state=on]:text-white",
+        solid:
+          "bg-[hsl(var(--toggle-bg))] hover:bg-[hsl(var(--toggle-bg-hover))] active:bg-[hsl(var(--toggle-bg-active))] text-[hsl(var(--toggle-foreground))]",
+        ghost:
+          "bg-[hsl(var(--toggle-bg-subtle)/0)] hover:bg-[hsl(var(--toggle-bg-subtle)/0.12)] active:bg-[hsl(var(--toggle-bg-subtle)/0.24)] text-[hsl(var(--toggle-foreground-subtle))]",
+        subtle: [
+          "bg-[hsl(var(--toggle-bg-subtle)/0.12)] hover:bg-[hsl(var(--toggle-bg-subtle)/0.24)] active:bg-[hsl(var(--toggle-bg-subtle)/0.36)] text-[hsl(var(--toggle-foreground-subtle))]",
+          "data-[state=on]:bg-[hsl(var(--toggle-bg))] data-[state=on]:text-primary-foreground",
+        ],
         outline:
-          "border border-input bg-transparent hover:bg-accent/50 hover:text-accent-foreground",
+          "bg-[hsl(var(--toggle-bg-subtle)/0)] hover:bg-[hsl(var(--toggle-bg-subtle)/0.12)] active:bg-[hsl(var(--toggle-bg-subtle)/0.24)] text-[hsl(var(--toggle-foreground-subtle))] border-2 border-[hsl(var(--toggle-foreground-subtle))]",
+        unstyled: "",
+        mono: "text-white hover:bg-white/10 data-[state=on]:bg-white/15 hover:text-white data-[state=on]:text-white",
+      },
+      colorScheme: {
+        primary:
+          "[--toggle-bg:var(--primary)] [--toggle-bg-hover:var(--primary-hover)] [--toggle-bg-active:var(--primary-active)] [--toggle-foreground:var(--primary-foreground)] [--toggle-bg-subtle:var(--primary-subtle)] [--toggle-foreground-subtle:var(--primary-subtle-foreground)]",
+        secondary:
+          "[--toggle-bg:var(--secondary)] [--toggle-bg-hover:var(--secondary-hover)] [--toggle-bg-active:var(--secondary-active)] [--toggle-foreground:var(--secondary-foreground)] [--toggle-bg-subtle:var(--secondary-subtle)] [--toggle-foreground-subtle:var(--secondary-subtle-foreground)]",
+        info: "[--toggle-bg:var(--info)] [--toggle-bg-hover:var(--info-hover)]  [--toggle-bg-active:var(--info-active)] [--toggle-foreground:var(--info-foreground)] [--toggle-bg-subtle:var(--info-subtle)] [--toggle-foreground-subtle:var(--info-subtle-foreground)]",
+        destructive:
+          "[--toggle-bg:var(--destructive)] [--toggle-bg-hover:var(--destructive-hover)] [--toggle-bg-active:var(--destructive-active)] [--toggle-foreground:var(--destructive-foreground)] [--toggle-bg-subtle:var(--destructive-subtle)] [--toggle-foreground-subtle:var(--destructive-subtle-foreground)]",
+        success:
+          "[--toggle-bg:var(--success)] [--toggle-bg-hover:var(--success-hover)] [--toggle-bg-active:var(--success-active)] [--toggle-foreground:var(--success-foreground)] [--toggle-bg-subtle:var(--success-subtle)] [--toggle-foreground-subtle:var(--success-subtle-foreground)]",
       },
       size: {
-        default: "h-10 px-3",
         sm: "h-8 px-2.5",
+        md: "h-10 px-3",
         lg: "h-11 px-5 font-semibold text-base",
         icon: "size-9",
       },
     },
+    compoundVariants: [
+      {
+        colorScheme: "primary",
+        variant: "outline",
+        className: "border-[hsl(var(--primary))]",
+      },
+    ],
     defaultVariants: {
-      variant: "default",
-      size: "default",
+      variant: "solid",
+      colorScheme: "primary",
+      size: "md",
     },
   }
 )

From 0d67bd005f92dec0af7de8cc6327389addbf37fe Mon Sep 17 00:00:00 2001
From: Dominik Stumpf <s.dominik.work@gmail.com>
Date: Fri, 26 Jul 2024 20:24:41 +0200
Subject: [PATCH 19/87] feat: add LevelPolygon

---
 .../(marketing)/profile/[username]/page.tsx   | 26 ++++++++++++++++---
 1 file changed, 23 insertions(+), 3 deletions(-)

diff --git a/src/app/(marketing)/profile/[username]/page.tsx b/src/app/(marketing)/profile/[username]/page.tsx
index d673c78d7c..9b049028f4 100644
--- a/src/app/(marketing)/profile/[username]/page.tsx
+++ b/src/app/(marketing)/profile/[username]/page.tsx
@@ -20,6 +20,28 @@ import { CircularProgressBar } from "../_components/CircularProgressBar"
 import { ContributionCard } from "../_components/ContributionCard"
 import { RecentActivity } from "../_components/RecentActivity"
 
+function generatePolygonClipPath(sides: number): string {
+  const angle = (2 * Math.PI) / sides
+  const path = Array.from({ length: sides }, (_, i) => {
+    const x = 50 + 50 * Math.cos(i * angle)
+    const y = 50 + 50 * Math.sin(i * angle)
+    return `${x}% ${y}%`
+  }).join(", ")
+
+  return `polygon(${path}, round 10px)`
+}
+
+const LevelPolygon = () => {
+  return (
+    <div
+      className="absolute right-0 bottom-0 flex size-12 items-center justify-center bg-primary-subtle font-extrabold text-xl shadow-lg"
+      style={{ clipPath: generatePolygonClipPath(5) }}
+    >
+      22
+    </div>
+  )
+}
+
 async function getProfileData(username: string) {
   // const req = `https://api.guild.xyz/v2/profiles/${username}`
   // const res = await fetch(req)
@@ -87,9 +109,7 @@ const Page = async ({
                 <AvatarFallback>#</AvatarFallback>
               </Avatar>
               <CircularProgressBar />
-              <div className="absolute right-0 bottom-0 flex size-12 items-center justify-center rounded-xl bg-primary font-extrabold text-xl shadow-lg">
-                22
-              </div>
+              <LevelPolygon />
             </div>
             <h1 className="text-center font-bold text-4xl leading-normal tracking-tight">
               {profile.name}

From 44d4b54e271a2759d2ee319d58110d812c68fe1c Mon Sep 17 00:00:00 2001
From: Dominik Stumpf <s.dominik.work@gmail.com>
Date: Mon, 29 Jul 2024 20:56:00 +0200
Subject: [PATCH 20/87] chore: add back profile fetching

---
 next.config.js                                |  3 ++
 .../(marketing)/profile/[username]/page.tsx   | 43 ++++++++++---------
 2 files changed, 26 insertions(+), 20 deletions(-)

diff --git a/next.config.js b/next.config.js
index 35ce1a0ae6..f04d1cc35c 100644
--- a/next.config.js
+++ b/next.config.js
@@ -88,6 +88,9 @@ const nextConfig = {
       {
         hostname: "og.link3.to",
       },
+      {
+        hostname: "imagedelivery.net"
+      }
     ],
     contentSecurityPolicy: "default-src 'self'; script-src 'none'; sandbox;",
   },
diff --git a/src/app/(marketing)/profile/[username]/page.tsx b/src/app/(marketing)/profile/[username]/page.tsx
index 9b049028f4..8e5ff1ef80 100644
--- a/src/app/(marketing)/profile/[username]/page.tsx
+++ b/src/app/(marketing)/profile/[username]/page.tsx
@@ -43,27 +43,30 @@ const LevelPolygon = () => {
 }
 
 async function getProfileData(username: string) {
-  // const req = `https://api.guild.xyz/v2/profiles/${username}`
-  // const res = await fetch(req)
-  // if (!res.ok) {
-  //   throw new Error("Failed to fetch profile data")
-  // }
-  // return res.json() as Promise<Profile>
-  //
-  // mocking for the time being
-  const res = {
-    id: 4,
-    userId: 6027190,
-    username: "durumm",
-    name: "durum",
-    bio: null,
-    profileImageUrl:
-      "https://guild-xyz.mypinata.cloud/ipfs/QmWGdo6FkjSz22oDZFMJysx3hGKoVqtzTWVMx9tTSP7jvi",
-    backgroundImageUrl: null,
-    createdAt: "2024-07-25T10:04:20.781Z",
-    updatedAt: "2024-07-25T10:04:20.781Z",
+  const req = `https://api.guild.xyz/v2/profiles/${username}`
+  try {
+    const res = await fetch(req)
+    if (!res.ok) {
+      throw new Error("Failed to fetch profile data")
+    }
+    return res.json() as Promise<Profile>
+  } catch (e) {
+    // mocking for the time being if fetch fails
+    console.error(e)
+    const res = {
+      id: 4,
+      userId: 6027190,
+      username: "durumm",
+      name: "durum",
+      bio: null,
+      profileImageUrl:
+        "https://guild-xyz.mypinata.cloud/ipfs/QmWGdo6FkjSz22oDZFMJysx3hGKoVqtzTWVMx9tTSP7jvi",
+      backgroundImageUrl: null,
+      createdAt: "2024-07-25T10:04:20.781Z",
+      updatedAt: "2024-07-25T10:04:20.781Z",
+    }
+    return res
   }
-  return res
 }
 
 // TODO: try get this from the backend if not possible write zod validation

From 913e43605a7b0c1cf8729892709b7ea9ae3d5d46 Mon Sep 17 00:00:00 2001
From: Dominik Stumpf <s.dominik.work@gmail.com>
Date: Mon, 29 Jul 2024 21:03:37 +0200
Subject: [PATCH 21/87] chore: finish toggle color config

---
 .../profile/_components/RecentActivity.tsx    |  1 -
 src/v2/components/ui/Toggle.tsx               | 68 ++-----------------
 2 files changed, 5 insertions(+), 64 deletions(-)

diff --git a/src/app/(marketing)/profile/_components/RecentActivity.tsx b/src/app/(marketing)/profile/_components/RecentActivity.tsx
index de3058b3b3..40d2e56343 100644
--- a/src/app/(marketing)/profile/_components/RecentActivity.tsx
+++ b/src/app/(marketing)/profile/_components/RecentActivity.tsx
@@ -16,7 +16,6 @@ export const RecentActivity = () => {
     <>
       <ToggleGroup
         type="single"
-        colorScheme="primary"
         variant="subtle"
         className="mb-4"
         onValueChange={(value) =>
diff --git a/src/v2/components/ui/Toggle.tsx b/src/v2/components/ui/Toggle.tsx
index e3e754f2f2..f9d7c813f2 100644
--- a/src/v2/components/ui/Toggle.tsx
+++ b/src/v2/components/ui/Toggle.tsx
@@ -5,59 +5,8 @@ import * as TogglePrimitive from "@radix-ui/react-toggle"
 import { type VariantProps, cva } from "class-variance-authority"
 import { ComponentPropsWithoutRef, ElementRef, forwardRef } from "react"
 
-const buttonVariants = cva(
-  "font-semibold inline-flex items-center justify-center whitespace-nowrap transition-colors focus-visible:outline-none focus-visible:ring-4 focus:ring-ring disabled:pointer-events-none disabled:opacity-50 rounded-xl text-base text-ellipsis overflow-hidden gap-1.5",
-  {
-    variants: {
-      variant: {
-        solid:
-          "bg-[hsl(var(--button-bg))] hover:bg-[hsl(var(--button-bg-hover))] active:bg-[hsl(var(--button-bg-active))] text-[hsl(var(--button-foreground))]",
-        ghost:
-          "bg-[hsl(var(--button-bg-subtle)/0)] hover:bg-[hsl(var(--button-bg-subtle)/0.12)] active:bg-[hsl(var(--button-bg-subtle)/0.24)] text-[hsl(var(--button-foreground-subtle))]",
-        subtle:
-          "bg-[hsl(var(--button-bg-subtle)/0.12)] hover:bg-[hsl(var(--button-bg-subtle)/0.24)] active:bg-[hsl(var(--button-bg-subtle)/0.36)] text-[hsl(var(--button-foreground-subtle))]",
-        outline:
-          "bg-[hsl(var(--button-bg-subtle)/0)] hover:bg-[hsl(var(--button-bg-subtle)/0.12)] active:bg-[hsl(var(--button-bg-subtle)/0.24)] text-[hsl(var(--button-foreground-subtle))] border-2 border-[hsl(var(--button-foreground-subtle))]",
-        unstyled: "",
-      },
-      // TODO: we could extract this to a Tailwind plugin
-      colorScheme: {
-        primary:
-          "[--button-bg:var(--primary)] [--button-bg-hover:var(--primary-hover)] [--button-bg-active:var(--primary-active)] [--button-foreground:var(--primary-foreground)] [--button-bg-subtle:var(--primary-subtle)] [--button-foreground-subtle:var(--primary-subtle-foreground)]",
-        secondary:
-          "[--button-bg:var(--secondary)] [--button-bg-hover:var(--secondary-hover)] [--button-bg-active:var(--secondary-active)] [--button-foreground:var(--secondary-foreground)] [--button-bg-subtle:var(--secondary-subtle)] [--button-foreground-subtle:var(--secondary-subtle-foreground)]",
-        info: "[--button-bg:var(--info)] [--button-bg-hover:var(--info-hover)]  [--button-bg-active:var(--info-active)] [--button-foreground:var(--info-foreground)] [--button-bg-subtle:var(--info-subtle)] [--button-foreground-subtle:var(--info-subtle-foreground)]",
-        destructive:
-          "[--button-bg:var(--destructive)] [--button-bg-hover:var(--destructive-hover)] [--button-bg-active:var(--destructive-active)] [--button-foreground:var(--destructive-foreground)] [--button-bg-subtle:var(--destructive-subtle)] [--button-foreground-subtle:var(--destructive-subtle-foreground)]",
-        success:
-          "[--button-bg:var(--success)] [--button-bg-hover:var(--success-hover)] [--button-bg-active:var(--success-active)] [--button-foreground:var(--success-foreground)] [--button-bg-subtle:var(--success-subtle)] [--button-foreground-subtle:var(--success-subtle-foreground)]",
-      },
-      size: {
-        xs: "h-6 px-2 text-xs gap-1",
-        sm: "h-8 px-3 text-sm",
-        md: "h-11 px-4 py-2",
-        lg: "h-12 px-6 py-4 text-lg",
-        xl: "h-14 px-6 py-4 text-lg gap-2",
-        icon: "h-10 w-10",
-      },
-    },
-    compoundVariants: [
-      {
-        colorScheme: "secondary",
-        variant: "outline",
-        className: "border-[hsl(var(--secondary))]",
-      },
-    ],
-    defaultVariants: {
-      variant: "solid",
-      colorScheme: "secondary",
-      size: "md",
-    },
-  }
-)
-
 const toggleVariants = cva(
-  "inline-flex items-center justify-center rounded-lg text-sm font-medium transition-colors hover:bg-muted focus-visible:outline-none focus-visible:ring-4 focus:ring-ring disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground font-medium",
+  "inline-flex items-center justify-center rounded-lg text-sm font-medium transition-colors hover:bg-muted focus-visible:outline-none focus-visible:ring-4 focus:ring-ring disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground font-medium data-[state=on]:bg-primary data-[state=on]:text-primary-foreground",
   {
     variants: {
       variant: {
@@ -65,10 +14,8 @@ const toggleVariants = cva(
           "bg-[hsl(var(--toggle-bg))] hover:bg-[hsl(var(--toggle-bg-hover))] active:bg-[hsl(var(--toggle-bg-active))] text-[hsl(var(--toggle-foreground))]",
         ghost:
           "bg-[hsl(var(--toggle-bg-subtle)/0)] hover:bg-[hsl(var(--toggle-bg-subtle)/0.12)] active:bg-[hsl(var(--toggle-bg-subtle)/0.24)] text-[hsl(var(--toggle-foreground-subtle))]",
-        subtle: [
+        subtle:
           "bg-[hsl(var(--toggle-bg-subtle)/0.12)] hover:bg-[hsl(var(--toggle-bg-subtle)/0.24)] active:bg-[hsl(var(--toggle-bg-subtle)/0.36)] text-[hsl(var(--toggle-foreground-subtle))]",
-          "data-[state=on]:bg-[hsl(var(--toggle-bg))] data-[state=on]:text-primary-foreground",
-        ],
         outline:
           "bg-[hsl(var(--toggle-bg-subtle)/0)] hover:bg-[hsl(var(--toggle-bg-subtle)/0.12)] active:bg-[hsl(var(--toggle-bg-subtle)/0.24)] text-[hsl(var(--toggle-foreground-subtle))] border-2 border-[hsl(var(--toggle-foreground-subtle))]",
         unstyled: "",
@@ -79,11 +26,6 @@ const toggleVariants = cva(
           "[--toggle-bg:var(--primary)] [--toggle-bg-hover:var(--primary-hover)] [--toggle-bg-active:var(--primary-active)] [--toggle-foreground:var(--primary-foreground)] [--toggle-bg-subtle:var(--primary-subtle)] [--toggle-foreground-subtle:var(--primary-subtle-foreground)]",
         secondary:
           "[--toggle-bg:var(--secondary)] [--toggle-bg-hover:var(--secondary-hover)] [--toggle-bg-active:var(--secondary-active)] [--toggle-foreground:var(--secondary-foreground)] [--toggle-bg-subtle:var(--secondary-subtle)] [--toggle-foreground-subtle:var(--secondary-subtle-foreground)]",
-        info: "[--toggle-bg:var(--info)] [--toggle-bg-hover:var(--info-hover)]  [--toggle-bg-active:var(--info-active)] [--toggle-foreground:var(--info-foreground)] [--toggle-bg-subtle:var(--info-subtle)] [--toggle-foreground-subtle:var(--info-subtle-foreground)]",
-        destructive:
-          "[--toggle-bg:var(--destructive)] [--toggle-bg-hover:var(--destructive-hover)] [--toggle-bg-active:var(--destructive-active)] [--toggle-foreground:var(--destructive-foreground)] [--toggle-bg-subtle:var(--destructive-subtle)] [--toggle-foreground-subtle:var(--destructive-subtle-foreground)]",
-        success:
-          "[--toggle-bg:var(--success)] [--toggle-bg-hover:var(--success-hover)] [--toggle-bg-active:var(--success-active)] [--toggle-foreground:var(--success-foreground)] [--toggle-bg-subtle:var(--success-subtle)] [--toggle-foreground-subtle:var(--success-subtle-foreground)]",
       },
       size: {
         sm: "h-8 px-2.5",
@@ -94,14 +36,14 @@ const toggleVariants = cva(
     },
     compoundVariants: [
       {
-        colorScheme: "primary",
+        colorScheme: "secondary",
         variant: "outline",
-        className: "border-[hsl(var(--primary))]",
+        className: "border-[hsl(var(--secondary))]",
       },
     ],
     defaultVariants: {
       variant: "solid",
-      colorScheme: "primary",
+      colorScheme: "secondary",
       size: "md",
     },
   }

From e82fbc89a5e7dfc34d3258222181c877576576c5 Mon Sep 17 00:00:00 2001
From: Dominik Stumpf <s.dominik.work@gmail.com>
Date: Mon, 29 Jul 2024 21:08:11 +0200
Subject: [PATCH 22/87] fix: address toggle type errors

---
 src/app/explorer/_components/GuildSearchBar.tsx | 2 +-
 src/app/explorer/_components/StickyBar.tsx      | 2 +-
 src/v2/components/ThemeToggle.tsx               | 5 ++---
 src/v2/components/ui/ToggleGroup.tsx            | 4 ++--
 4 files changed, 6 insertions(+), 7 deletions(-)

diff --git a/src/app/explorer/_components/GuildSearchBar.tsx b/src/app/explorer/_components/GuildSearchBar.tsx
index 371e36769f..7cd1957df1 100644
--- a/src/app/explorer/_components/GuildSearchBar.tsx
+++ b/src/app/explorer/_components/GuildSearchBar.tsx
@@ -52,7 +52,7 @@ export const GuildSearchBar = () => {
         type="single"
         className="self-start sm:h-12 sm:rounded-r-xl sm:border sm:border-border-muted sm:border-l-0 sm:bg-card sm:px-4"
         size="sm"
-        variant="default"
+        variant="ghost"
         onValueChange={(value) => value && setOrder(value as Order)}
         value={order}
       >
diff --git a/src/app/explorer/_components/StickyBar.tsx b/src/app/explorer/_components/StickyBar.tsx
index a7454f1f99..aac3c2ee55 100644
--- a/src/app/explorer/_components/StickyBar.tsx
+++ b/src/app/explorer/_components/StickyBar.tsx
@@ -39,7 +39,7 @@ const Nav = () => {
       type="single"
       className="gap-2"
       size={isSearchStuck ? "sm" : "lg"}
-      variant={isNavStuck ? "default" : "mono"}
+      variant={isNavStuck ? "ghost" : "mono"}
       onValueChange={(value) => value && setActiveSection(value as ActiveSection)}
       value={activeSection}
     >
diff --git a/src/v2/components/ThemeToggle.tsx b/src/v2/components/ThemeToggle.tsx
index 0a6d1abdba..c307b4ca63 100644
--- a/src/v2/components/ThemeToggle.tsx
+++ b/src/v2/components/ThemeToggle.tsx
@@ -27,12 +27,13 @@ export function ThemeToggle() {
         }
       }}
       aria-label="Toggle between themes"
+      variant="ghost"
     >
       <ToggleGroupItem
         value="light"
         aria-label="Toggle light mode"
         size="icon"
-        variant="primary"
+        variant="ghost"
         className="size-8"
       >
         <Sun weight="bold" />
@@ -41,7 +42,6 @@ export function ThemeToggle() {
         value="dark"
         aria-label="Toggle dark mode"
         size="icon"
-        variant="primary"
         className="size-8"
       >
         <Moon weight="bold" />
@@ -50,7 +50,6 @@ export function ThemeToggle() {
         value="system"
         aria-label="Toggle system default"
         size="icon"
-        variant="primary"
         className="size-8"
       >
         <Desktop weight="bold" />
diff --git a/src/v2/components/ui/ToggleGroup.tsx b/src/v2/components/ui/ToggleGroup.tsx
index 0994858831..2b2802c261 100644
--- a/src/v2/components/ui/ToggleGroup.tsx
+++ b/src/v2/components/ui/ToggleGroup.tsx
@@ -13,8 +13,8 @@ import {
 } from "react"
 
 const ToggleGroupContext = createContext<VariantProps<typeof toggleVariants>>({
-  size: "default",
-  variant: "default",
+  size: "md",
+  variant: "ghost",
 })
 
 const ToggleGroup = forwardRef<

From 53bfb3fb012036f0119f9547d71f29136eb6dfea Mon Sep 17 00:00:00 2001
From: Dominik Stumpf <s.dominik.work@gmail.com>
Date: Tue, 30 Jul 2024 14:15:35 +0200
Subject: [PATCH 23/87] Revert "fix: address toggle type errors"

This reverts commit e82fbc89a5e7dfc34d3258222181c877576576c5.
---
 src/app/explorer/_components/GuildSearchBar.tsx | 2 +-
 src/app/explorer/_components/StickyBar.tsx      | 2 +-
 src/v2/components/ThemeToggle.tsx               | 5 +++--
 src/v2/components/ui/ToggleGroup.tsx            | 4 ++--
 4 files changed, 7 insertions(+), 6 deletions(-)

diff --git a/src/app/explorer/_components/GuildSearchBar.tsx b/src/app/explorer/_components/GuildSearchBar.tsx
index 7cd1957df1..371e36769f 100644
--- a/src/app/explorer/_components/GuildSearchBar.tsx
+++ b/src/app/explorer/_components/GuildSearchBar.tsx
@@ -52,7 +52,7 @@ export const GuildSearchBar = () => {
         type="single"
         className="self-start sm:h-12 sm:rounded-r-xl sm:border sm:border-border-muted sm:border-l-0 sm:bg-card sm:px-4"
         size="sm"
-        variant="ghost"
+        variant="default"
         onValueChange={(value) => value && setOrder(value as Order)}
         value={order}
       >
diff --git a/src/app/explorer/_components/StickyBar.tsx b/src/app/explorer/_components/StickyBar.tsx
index aac3c2ee55..a7454f1f99 100644
--- a/src/app/explorer/_components/StickyBar.tsx
+++ b/src/app/explorer/_components/StickyBar.tsx
@@ -39,7 +39,7 @@ const Nav = () => {
       type="single"
       className="gap-2"
       size={isSearchStuck ? "sm" : "lg"}
-      variant={isNavStuck ? "ghost" : "mono"}
+      variant={isNavStuck ? "default" : "mono"}
       onValueChange={(value) => value && setActiveSection(value as ActiveSection)}
       value={activeSection}
     >
diff --git a/src/v2/components/ThemeToggle.tsx b/src/v2/components/ThemeToggle.tsx
index c307b4ca63..0a6d1abdba 100644
--- a/src/v2/components/ThemeToggle.tsx
+++ b/src/v2/components/ThemeToggle.tsx
@@ -27,13 +27,12 @@ export function ThemeToggle() {
         }
       }}
       aria-label="Toggle between themes"
-      variant="ghost"
     >
       <ToggleGroupItem
         value="light"
         aria-label="Toggle light mode"
         size="icon"
-        variant="ghost"
+        variant="primary"
         className="size-8"
       >
         <Sun weight="bold" />
@@ -42,6 +41,7 @@ export function ThemeToggle() {
         value="dark"
         aria-label="Toggle dark mode"
         size="icon"
+        variant="primary"
         className="size-8"
       >
         <Moon weight="bold" />
@@ -50,6 +50,7 @@ export function ThemeToggle() {
         value="system"
         aria-label="Toggle system default"
         size="icon"
+        variant="primary"
         className="size-8"
       >
         <Desktop weight="bold" />
diff --git a/src/v2/components/ui/ToggleGroup.tsx b/src/v2/components/ui/ToggleGroup.tsx
index 2b2802c261..0994858831 100644
--- a/src/v2/components/ui/ToggleGroup.tsx
+++ b/src/v2/components/ui/ToggleGroup.tsx
@@ -13,8 +13,8 @@ import {
 } from "react"
 
 const ToggleGroupContext = createContext<VariantProps<typeof toggleVariants>>({
-  size: "md",
-  variant: "ghost",
+  size: "default",
+  variant: "default",
 })
 
 const ToggleGroup = forwardRef<

From 13ff511b103eadaf222160ce3a3579dba63b622a Mon Sep 17 00:00:00 2001
From: Dominik Stumpf <s.dominik.work@gmail.com>
Date: Tue, 30 Jul 2024 14:15:53 +0200
Subject: [PATCH 24/87] Revert "chore: finish toggle color config"

This reverts commit 913e43605a7b0c1cf8729892709b7ea9ae3d5d46.
---
 .../profile/_components/RecentActivity.tsx    |  1 +
 src/v2/components/ui/Toggle.tsx               | 68 +++++++++++++++++--
 2 files changed, 64 insertions(+), 5 deletions(-)

diff --git a/src/app/(marketing)/profile/_components/RecentActivity.tsx b/src/app/(marketing)/profile/_components/RecentActivity.tsx
index 40d2e56343..de3058b3b3 100644
--- a/src/app/(marketing)/profile/_components/RecentActivity.tsx
+++ b/src/app/(marketing)/profile/_components/RecentActivity.tsx
@@ -16,6 +16,7 @@ export const RecentActivity = () => {
     <>
       <ToggleGroup
         type="single"
+        colorScheme="primary"
         variant="subtle"
         className="mb-4"
         onValueChange={(value) =>
diff --git a/src/v2/components/ui/Toggle.tsx b/src/v2/components/ui/Toggle.tsx
index f9d7c813f2..e3e754f2f2 100644
--- a/src/v2/components/ui/Toggle.tsx
+++ b/src/v2/components/ui/Toggle.tsx
@@ -5,8 +5,59 @@ import * as TogglePrimitive from "@radix-ui/react-toggle"
 import { type VariantProps, cva } from "class-variance-authority"
 import { ComponentPropsWithoutRef, ElementRef, forwardRef } from "react"
 
+const buttonVariants = cva(
+  "font-semibold inline-flex items-center justify-center whitespace-nowrap transition-colors focus-visible:outline-none focus-visible:ring-4 focus:ring-ring disabled:pointer-events-none disabled:opacity-50 rounded-xl text-base text-ellipsis overflow-hidden gap-1.5",
+  {
+    variants: {
+      variant: {
+        solid:
+          "bg-[hsl(var(--button-bg))] hover:bg-[hsl(var(--button-bg-hover))] active:bg-[hsl(var(--button-bg-active))] text-[hsl(var(--button-foreground))]",
+        ghost:
+          "bg-[hsl(var(--button-bg-subtle)/0)] hover:bg-[hsl(var(--button-bg-subtle)/0.12)] active:bg-[hsl(var(--button-bg-subtle)/0.24)] text-[hsl(var(--button-foreground-subtle))]",
+        subtle:
+          "bg-[hsl(var(--button-bg-subtle)/0.12)] hover:bg-[hsl(var(--button-bg-subtle)/0.24)] active:bg-[hsl(var(--button-bg-subtle)/0.36)] text-[hsl(var(--button-foreground-subtle))]",
+        outline:
+          "bg-[hsl(var(--button-bg-subtle)/0)] hover:bg-[hsl(var(--button-bg-subtle)/0.12)] active:bg-[hsl(var(--button-bg-subtle)/0.24)] text-[hsl(var(--button-foreground-subtle))] border-2 border-[hsl(var(--button-foreground-subtle))]",
+        unstyled: "",
+      },
+      // TODO: we could extract this to a Tailwind plugin
+      colorScheme: {
+        primary:
+          "[--button-bg:var(--primary)] [--button-bg-hover:var(--primary-hover)] [--button-bg-active:var(--primary-active)] [--button-foreground:var(--primary-foreground)] [--button-bg-subtle:var(--primary-subtle)] [--button-foreground-subtle:var(--primary-subtle-foreground)]",
+        secondary:
+          "[--button-bg:var(--secondary)] [--button-bg-hover:var(--secondary-hover)] [--button-bg-active:var(--secondary-active)] [--button-foreground:var(--secondary-foreground)] [--button-bg-subtle:var(--secondary-subtle)] [--button-foreground-subtle:var(--secondary-subtle-foreground)]",
+        info: "[--button-bg:var(--info)] [--button-bg-hover:var(--info-hover)]  [--button-bg-active:var(--info-active)] [--button-foreground:var(--info-foreground)] [--button-bg-subtle:var(--info-subtle)] [--button-foreground-subtle:var(--info-subtle-foreground)]",
+        destructive:
+          "[--button-bg:var(--destructive)] [--button-bg-hover:var(--destructive-hover)] [--button-bg-active:var(--destructive-active)] [--button-foreground:var(--destructive-foreground)] [--button-bg-subtle:var(--destructive-subtle)] [--button-foreground-subtle:var(--destructive-subtle-foreground)]",
+        success:
+          "[--button-bg:var(--success)] [--button-bg-hover:var(--success-hover)] [--button-bg-active:var(--success-active)] [--button-foreground:var(--success-foreground)] [--button-bg-subtle:var(--success-subtle)] [--button-foreground-subtle:var(--success-subtle-foreground)]",
+      },
+      size: {
+        xs: "h-6 px-2 text-xs gap-1",
+        sm: "h-8 px-3 text-sm",
+        md: "h-11 px-4 py-2",
+        lg: "h-12 px-6 py-4 text-lg",
+        xl: "h-14 px-6 py-4 text-lg gap-2",
+        icon: "h-10 w-10",
+      },
+    },
+    compoundVariants: [
+      {
+        colorScheme: "secondary",
+        variant: "outline",
+        className: "border-[hsl(var(--secondary))]",
+      },
+    ],
+    defaultVariants: {
+      variant: "solid",
+      colorScheme: "secondary",
+      size: "md",
+    },
+  }
+)
+
 const toggleVariants = cva(
-  "inline-flex items-center justify-center rounded-lg text-sm font-medium transition-colors hover:bg-muted focus-visible:outline-none focus-visible:ring-4 focus:ring-ring disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground font-medium data-[state=on]:bg-primary data-[state=on]:text-primary-foreground",
+  "inline-flex items-center justify-center rounded-lg text-sm font-medium transition-colors hover:bg-muted focus-visible:outline-none focus-visible:ring-4 focus:ring-ring disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground font-medium",
   {
     variants: {
       variant: {
@@ -14,8 +65,10 @@ const toggleVariants = cva(
           "bg-[hsl(var(--toggle-bg))] hover:bg-[hsl(var(--toggle-bg-hover))] active:bg-[hsl(var(--toggle-bg-active))] text-[hsl(var(--toggle-foreground))]",
         ghost:
           "bg-[hsl(var(--toggle-bg-subtle)/0)] hover:bg-[hsl(var(--toggle-bg-subtle)/0.12)] active:bg-[hsl(var(--toggle-bg-subtle)/0.24)] text-[hsl(var(--toggle-foreground-subtle))]",
-        subtle:
+        subtle: [
           "bg-[hsl(var(--toggle-bg-subtle)/0.12)] hover:bg-[hsl(var(--toggle-bg-subtle)/0.24)] active:bg-[hsl(var(--toggle-bg-subtle)/0.36)] text-[hsl(var(--toggle-foreground-subtle))]",
+          "data-[state=on]:bg-[hsl(var(--toggle-bg))] data-[state=on]:text-primary-foreground",
+        ],
         outline:
           "bg-[hsl(var(--toggle-bg-subtle)/0)] hover:bg-[hsl(var(--toggle-bg-subtle)/0.12)] active:bg-[hsl(var(--toggle-bg-subtle)/0.24)] text-[hsl(var(--toggle-foreground-subtle))] border-2 border-[hsl(var(--toggle-foreground-subtle))]",
         unstyled: "",
@@ -26,6 +79,11 @@ const toggleVariants = cva(
           "[--toggle-bg:var(--primary)] [--toggle-bg-hover:var(--primary-hover)] [--toggle-bg-active:var(--primary-active)] [--toggle-foreground:var(--primary-foreground)] [--toggle-bg-subtle:var(--primary-subtle)] [--toggle-foreground-subtle:var(--primary-subtle-foreground)]",
         secondary:
           "[--toggle-bg:var(--secondary)] [--toggle-bg-hover:var(--secondary-hover)] [--toggle-bg-active:var(--secondary-active)] [--toggle-foreground:var(--secondary-foreground)] [--toggle-bg-subtle:var(--secondary-subtle)] [--toggle-foreground-subtle:var(--secondary-subtle-foreground)]",
+        info: "[--toggle-bg:var(--info)] [--toggle-bg-hover:var(--info-hover)]  [--toggle-bg-active:var(--info-active)] [--toggle-foreground:var(--info-foreground)] [--toggle-bg-subtle:var(--info-subtle)] [--toggle-foreground-subtle:var(--info-subtle-foreground)]",
+        destructive:
+          "[--toggle-bg:var(--destructive)] [--toggle-bg-hover:var(--destructive-hover)] [--toggle-bg-active:var(--destructive-active)] [--toggle-foreground:var(--destructive-foreground)] [--toggle-bg-subtle:var(--destructive-subtle)] [--toggle-foreground-subtle:var(--destructive-subtle-foreground)]",
+        success:
+          "[--toggle-bg:var(--success)] [--toggle-bg-hover:var(--success-hover)] [--toggle-bg-active:var(--success-active)] [--toggle-foreground:var(--success-foreground)] [--toggle-bg-subtle:var(--success-subtle)] [--toggle-foreground-subtle:var(--success-subtle-foreground)]",
       },
       size: {
         sm: "h-8 px-2.5",
@@ -36,14 +94,14 @@ const toggleVariants = cva(
     },
     compoundVariants: [
       {
-        colorScheme: "secondary",
+        colorScheme: "primary",
         variant: "outline",
-        className: "border-[hsl(var(--secondary))]",
+        className: "border-[hsl(var(--primary))]",
       },
     ],
     defaultVariants: {
       variant: "solid",
-      colorScheme: "secondary",
+      colorScheme: "primary",
       size: "md",
     },
   }

From faa3f21595f684414d719ef6db794d689c3528b4 Mon Sep 17 00:00:00 2001
From: Dominik Stumpf <s.dominik.work@gmail.com>
Date: Tue, 30 Jul 2024 14:40:03 +0200
Subject: [PATCH 25/87] feat: improve toggle variants

---
 .../profile/_components/RecentActivity.tsx    |  3 +-
 .../explorer/_components/GuildSearchBar.tsx   |  2 +-
 src/app/explorer/_components/StickyBar.tsx    |  2 +-
 src/v2/components/ThemeToggle.tsx             | 14 +--
 src/v2/components/ui/Toggle.tsx               | 91 ++-----------------
 src/v2/components/ui/ToggleGroup.tsx          |  4 +-
 6 files changed, 17 insertions(+), 99 deletions(-)

diff --git a/src/app/(marketing)/profile/_components/RecentActivity.tsx b/src/app/(marketing)/profile/_components/RecentActivity.tsx
index de3058b3b3..b20461a7e3 100644
--- a/src/app/(marketing)/profile/_components/RecentActivity.tsx
+++ b/src/app/(marketing)/profile/_components/RecentActivity.tsx
@@ -16,8 +16,7 @@ export const RecentActivity = () => {
     <>
       <ToggleGroup
         type="single"
-        colorScheme="primary"
-        variant="subtle"
+        variant="primary"
         className="mb-4"
         onValueChange={(value) =>
           value && setActivityFilter(value as (typeof ACTIVITY_FILTERS)[number])
diff --git a/src/app/explorer/_components/GuildSearchBar.tsx b/src/app/explorer/_components/GuildSearchBar.tsx
index 371e36769f..a78511a9ad 100644
--- a/src/app/explorer/_components/GuildSearchBar.tsx
+++ b/src/app/explorer/_components/GuildSearchBar.tsx
@@ -52,7 +52,7 @@ export const GuildSearchBar = () => {
         type="single"
         className="self-start sm:h-12 sm:rounded-r-xl sm:border sm:border-border-muted sm:border-l-0 sm:bg-card sm:px-4"
         size="sm"
-        variant="default"
+        variant="secondary"
         onValueChange={(value) => value && setOrder(value as Order)}
         value={order}
       >
diff --git a/src/app/explorer/_components/StickyBar.tsx b/src/app/explorer/_components/StickyBar.tsx
index a7454f1f99..1c4959e197 100644
--- a/src/app/explorer/_components/StickyBar.tsx
+++ b/src/app/explorer/_components/StickyBar.tsx
@@ -39,7 +39,7 @@ const Nav = () => {
       type="single"
       className="gap-2"
       size={isSearchStuck ? "sm" : "lg"}
-      variant={isNavStuck ? "default" : "mono"}
+      variant={isNavStuck ? "secondary" : "mono"}
       onValueChange={(value) => value && setActiveSection(value as ActiveSection)}
       value={activeSection}
     >
diff --git a/src/v2/components/ThemeToggle.tsx b/src/v2/components/ThemeToggle.tsx
index 0a6d1abdba..ea2b2b0562 100644
--- a/src/v2/components/ThemeToggle.tsx
+++ b/src/v2/components/ThemeToggle.tsx
@@ -18,6 +18,8 @@ export function ThemeToggle() {
 
   return (
     <ToggleGroup
+      size="icon"
+      variant="primary-ghost"
       type="single"
       value={chakraColorMode || theme}
       onValueChange={(selected) => {
@@ -31,26 +33,16 @@ export function ThemeToggle() {
       <ToggleGroupItem
         value="light"
         aria-label="Toggle light mode"
-        size="icon"
-        variant="primary"
         className="size-8"
       >
         <Sun weight="bold" />
       </ToggleGroupItem>
-      <ToggleGroupItem
-        value="dark"
-        aria-label="Toggle dark mode"
-        size="icon"
-        variant="primary"
-        className="size-8"
-      >
+      <ToggleGroupItem value="dark" aria-label="Toggle dark mode" className="size-8">
         <Moon weight="bold" />
       </ToggleGroupItem>
       <ToggleGroupItem
         value="system"
         aria-label="Toggle system default"
-        size="icon"
-        variant="primary"
         className="size-8"
       >
         <Desktop weight="bold" />
diff --git a/src/v2/components/ui/Toggle.tsx b/src/v2/components/ui/Toggle.tsx
index e3e754f2f2..4dd45610c0 100644
--- a/src/v2/components/ui/Toggle.tsx
+++ b/src/v2/components/ui/Toggle.tsx
@@ -5,85 +5,20 @@ import * as TogglePrimitive from "@radix-ui/react-toggle"
 import { type VariantProps, cva } from "class-variance-authority"
 import { ComponentPropsWithoutRef, ElementRef, forwardRef } from "react"
 
-const buttonVariants = cva(
-  "font-semibold inline-flex items-center justify-center whitespace-nowrap transition-colors focus-visible:outline-none focus-visible:ring-4 focus:ring-ring disabled:pointer-events-none disabled:opacity-50 rounded-xl text-base text-ellipsis overflow-hidden gap-1.5",
-  {
-    variants: {
-      variant: {
-        solid:
-          "bg-[hsl(var(--button-bg))] hover:bg-[hsl(var(--button-bg-hover))] active:bg-[hsl(var(--button-bg-active))] text-[hsl(var(--button-foreground))]",
-        ghost:
-          "bg-[hsl(var(--button-bg-subtle)/0)] hover:bg-[hsl(var(--button-bg-subtle)/0.12)] active:bg-[hsl(var(--button-bg-subtle)/0.24)] text-[hsl(var(--button-foreground-subtle))]",
-        subtle:
-          "bg-[hsl(var(--button-bg-subtle)/0.12)] hover:bg-[hsl(var(--button-bg-subtle)/0.24)] active:bg-[hsl(var(--button-bg-subtle)/0.36)] text-[hsl(var(--button-foreground-subtle))]",
-        outline:
-          "bg-[hsl(var(--button-bg-subtle)/0)] hover:bg-[hsl(var(--button-bg-subtle)/0.12)] active:bg-[hsl(var(--button-bg-subtle)/0.24)] text-[hsl(var(--button-foreground-subtle))] border-2 border-[hsl(var(--button-foreground-subtle))]",
-        unstyled: "",
-      },
-      // TODO: we could extract this to a Tailwind plugin
-      colorScheme: {
-        primary:
-          "[--button-bg:var(--primary)] [--button-bg-hover:var(--primary-hover)] [--button-bg-active:var(--primary-active)] [--button-foreground:var(--primary-foreground)] [--button-bg-subtle:var(--primary-subtle)] [--button-foreground-subtle:var(--primary-subtle-foreground)]",
-        secondary:
-          "[--button-bg:var(--secondary)] [--button-bg-hover:var(--secondary-hover)] [--button-bg-active:var(--secondary-active)] [--button-foreground:var(--secondary-foreground)] [--button-bg-subtle:var(--secondary-subtle)] [--button-foreground-subtle:var(--secondary-subtle-foreground)]",
-        info: "[--button-bg:var(--info)] [--button-bg-hover:var(--info-hover)]  [--button-bg-active:var(--info-active)] [--button-foreground:var(--info-foreground)] [--button-bg-subtle:var(--info-subtle)] [--button-foreground-subtle:var(--info-subtle-foreground)]",
-        destructive:
-          "[--button-bg:var(--destructive)] [--button-bg-hover:var(--destructive-hover)] [--button-bg-active:var(--destructive-active)] [--button-foreground:var(--destructive-foreground)] [--button-bg-subtle:var(--destructive-subtle)] [--button-foreground-subtle:var(--destructive-subtle-foreground)]",
-        success:
-          "[--button-bg:var(--success)] [--button-bg-hover:var(--success-hover)] [--button-bg-active:var(--success-active)] [--button-foreground:var(--success-foreground)] [--button-bg-subtle:var(--success-subtle)] [--button-foreground-subtle:var(--success-subtle-foreground)]",
-      },
-      size: {
-        xs: "h-6 px-2 text-xs gap-1",
-        sm: "h-8 px-3 text-sm",
-        md: "h-11 px-4 py-2",
-        lg: "h-12 px-6 py-4 text-lg",
-        xl: "h-14 px-6 py-4 text-lg gap-2",
-        icon: "h-10 w-10",
-      },
-    },
-    compoundVariants: [
-      {
-        colorScheme: "secondary",
-        variant: "outline",
-        className: "border-[hsl(var(--secondary))]",
-      },
-    ],
-    defaultVariants: {
-      variant: "solid",
-      colorScheme: "secondary",
-      size: "md",
-    },
-  }
-)
-
 const toggleVariants = cva(
   "inline-flex items-center justify-center rounded-lg text-sm font-medium transition-colors hover:bg-muted focus-visible:outline-none focus-visible:ring-4 focus:ring-ring disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground font-medium",
   {
     variants: {
       variant: {
-        solid:
-          "bg-[hsl(var(--toggle-bg))] hover:bg-[hsl(var(--toggle-bg-hover))] active:bg-[hsl(var(--toggle-bg-active))] text-[hsl(var(--toggle-foreground))]",
-        ghost:
-          "bg-[hsl(var(--toggle-bg-subtle)/0)] hover:bg-[hsl(var(--toggle-bg-subtle)/0.12)] active:bg-[hsl(var(--toggle-bg-subtle)/0.24)] text-[hsl(var(--toggle-foreground-subtle))]",
-        subtle: [
-          "bg-[hsl(var(--toggle-bg-subtle)/0.12)] hover:bg-[hsl(var(--toggle-bg-subtle)/0.24)] active:bg-[hsl(var(--toggle-bg-subtle)/0.36)] text-[hsl(var(--toggle-foreground-subtle))]",
-          "data-[state=on]:bg-[hsl(var(--toggle-bg))] data-[state=on]:text-primary-foreground",
-        ],
-        outline:
-          "bg-[hsl(var(--toggle-bg-subtle)/0)] hover:bg-[hsl(var(--toggle-bg-subtle)/0.12)] active:bg-[hsl(var(--toggle-bg-subtle)/0.24)] text-[hsl(var(--toggle-foreground-subtle))] border-2 border-[hsl(var(--toggle-foreground-subtle))]",
-        unstyled: "",
-        mono: "text-white hover:bg-white/10 data-[state=on]:bg-white/15 hover:text-white data-[state=on]:text-white",
-      },
-      colorScheme: {
-        primary:
-          "[--toggle-bg:var(--primary)] [--toggle-bg-hover:var(--primary-hover)] [--toggle-bg-active:var(--primary-active)] [--toggle-foreground:var(--primary-foreground)] [--toggle-bg-subtle:var(--primary-subtle)] [--toggle-foreground-subtle:var(--primary-subtle-foreground)]",
         secondary:
-          "[--toggle-bg:var(--secondary)] [--toggle-bg-hover:var(--secondary-hover)] [--toggle-bg-active:var(--secondary-active)] [--toggle-foreground:var(--secondary-foreground)] [--toggle-bg-subtle:var(--secondary-subtle)] [--toggle-foreground-subtle:var(--secondary-subtle-foreground)]",
-        info: "[--toggle-bg:var(--info)] [--toggle-bg-hover:var(--info-hover)]  [--toggle-bg-active:var(--info-active)] [--toggle-foreground:var(--info-foreground)] [--toggle-bg-subtle:var(--info-subtle)] [--toggle-foreground-subtle:var(--info-subtle-foreground)]",
-        destructive:
-          "[--toggle-bg:var(--destructive)] [--toggle-bg-hover:var(--destructive-hover)] [--toggle-bg-active:var(--destructive-active)] [--toggle-foreground:var(--destructive-foreground)] [--toggle-bg-subtle:var(--destructive-subtle)] [--toggle-foreground-subtle:var(--destructive-subtle-foreground)]",
-        success:
-          "[--toggle-bg:var(--success)] [--toggle-bg-hover:var(--success-hover)] [--toggle-bg-active:var(--success-active)] [--toggle-foreground:var(--success-foreground)] [--toggle-bg-subtle:var(--success-subtle)] [--toggle-foreground-subtle:var(--success-subtle-foreground)]",
+          "text-secondary-foreground hover:bg-secondary data-[state=on]:bg-secondary active:bg-secondary-hover",
+        primary:
+          "hover:bg-secondary-hover active:bg-secondary-active data-[state=on]:bg-primary data-[state=on]:text-primary-foreground bg-secondary text-secondary-foreground",
+        "primary-ghost":
+          "bg-transparent hover:bg-accent/50 hover:text-accent-foreground data-[state=on]:bg-primary data-[state=on]:text-primary-foreground",
+        mono: "text-white hover:bg-white/10 data-[state=on]:bg-white/15 hover:text-white data-[state=on]:text-white",
+        outline:
+          "border border-input bg-transparent hover:bg-accent/50 hover:text-accent-foreground",
       },
       size: {
         sm: "h-8 px-2.5",
@@ -92,16 +27,8 @@ const toggleVariants = cva(
         icon: "size-9",
       },
     },
-    compoundVariants: [
-      {
-        colorScheme: "primary",
-        variant: "outline",
-        className: "border-[hsl(var(--primary))]",
-      },
-    ],
     defaultVariants: {
-      variant: "solid",
-      colorScheme: "primary",
+      variant: "secondary",
       size: "md",
     },
   }
diff --git a/src/v2/components/ui/ToggleGroup.tsx b/src/v2/components/ui/ToggleGroup.tsx
index 0994858831..7d11d436eb 100644
--- a/src/v2/components/ui/ToggleGroup.tsx
+++ b/src/v2/components/ui/ToggleGroup.tsx
@@ -13,8 +13,8 @@ import {
 } from "react"
 
 const ToggleGroupContext = createContext<VariantProps<typeof toggleVariants>>({
-  size: "default",
-  variant: "default",
+  size: "md",
+  variant: "secondary",
 })
 
 const ToggleGroup = forwardRef<

From 8d8e26bd02d5a814f18ff0bf5c3845a72919af75 Mon Sep 17 00:00:00 2001
From: Dominik Stumpf <s.dominik.work@gmail.com>
Date: Tue, 30 Jul 2024 16:29:10 +0200
Subject: [PATCH 26/87] chore: adjust spacing and remove placeholder desc

---
 src/app/(marketing)/profile/[username]/page.tsx            | 2 +-
 src/app/(marketing)/profile/_components/RecentActivity.tsx | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/app/(marketing)/profile/[username]/page.tsx b/src/app/(marketing)/profile/[username]/page.tsx
index 8e5ff1ef80..14174f12a5 100644
--- a/src/app/(marketing)/profile/[username]/page.tsx
+++ b/src/app/(marketing)/profile/[username]/page.tsx
@@ -123,7 +123,7 @@ const Page = async ({
             </h1>
             <div className="text-lg text-muted-foreground">@{profile.username}</div>
             <p className="mt-6 max-w-md text-pretty text-center text-lg text-muted-foreground">
-              {profile.bio ?? "Write your bio"}
+              {profile.bio}
             </p>
             <div className="mt-8 flex flex-wrap items-center justify-center gap-x-8 gap-y-6">
               <div className="flex flex-col items-center leading-tight">
diff --git a/src/app/(marketing)/profile/_components/RecentActivity.tsx b/src/app/(marketing)/profile/_components/RecentActivity.tsx
index b20461a7e3..59bbcaa363 100644
--- a/src/app/(marketing)/profile/_components/RecentActivity.tsx
+++ b/src/app/(marketing)/profile/_components/RecentActivity.tsx
@@ -17,7 +17,7 @@ export const RecentActivity = () => {
       <ToggleGroup
         type="single"
         variant="primary"
-        className="mb-4"
+        className="mb-4 gap-1.5"
         onValueChange={(value) =>
           value && setActivityFilter(value as (typeof ACTIVITY_FILTERS)[number])
         }

From bd1e591bc5fd8363a05f92f370c626040743be01 Mon Sep 17 00:00:00 2001
From: Dominik Stumpf <s.dominik.work@gmail.com>
Date: Tue, 30 Jul 2024 17:44:55 +0200
Subject: [PATCH 27/87] feat: add LevelBadge

---
 .../profile/[username]/constants.ts           | 14 ++++++
 .../(marketing)/profile/[username]/page.tsx   | 47 +++---------------
 .../(marketing)/profile/[username]/types.ts   | 18 +++++++
 .../profile/_components/ContributionCard.tsx  |  2 +-
 .../profile/_components/LevelBadge.tsx        | 49 +++++++++++++++++++
 5 files changed, 90 insertions(+), 40 deletions(-)
 create mode 100644 src/app/(marketing)/profile/[username]/constants.ts
 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]/constants.ts b/src/app/(marketing)/profile/[username]/constants.ts
new file mode 100644
index 0000000000..34d7780ea0
--- /dev/null
+++ b/src/app/(marketing)/profile/[username]/constants.ts
@@ -0,0 +1,14 @@
+export const MAX_LEVEL = 100
+export const RANKS = [
+  { color: "#78c93d", title: "novice" },
+  { color: "#88d525", title: "learner" },
+  { color: "#f6ca45", title: "knight" },
+  { color: "#78c93d", title: "veteran" },
+  { color: "#ec5a53", title: "champion" },
+  { color: "#53adf0", title: "hero" },
+  { color: "#c385f8", title: "master" },
+  { color: "#3e6fc3", title: "grand master" },
+  { color: "#be4681", title: "legend" },
+  { color: "#000000", title: "mythic" },
+  { color: "linear-gradient(to left top, #00cbfa, #b9f2ff)", title: "???" },
+] as const
diff --git a/src/app/(marketing)/profile/[username]/page.tsx b/src/app/(marketing)/profile/[username]/page.tsx
index 14174f12a5..2a5cf4a7e7 100644
--- a/src/app/(marketing)/profile/[username]/page.tsx
+++ b/src/app/(marketing)/profile/[username]/page.tsx
@@ -18,29 +18,9 @@ import { ArrowRight, CircleWavyCheck } from "@phosphor-icons/react/dist/ssr"
 import { ActivityChart } from "../_components/ActivityChart"
 import { CircularProgressBar } from "../_components/CircularProgressBar"
 import { ContributionCard } from "../_components/ContributionCard"
+import { LevelBadge } from "../_components/LevelBadge"
 import { RecentActivity } from "../_components/RecentActivity"
-
-function generatePolygonClipPath(sides: number): string {
-  const angle = (2 * Math.PI) / sides
-  const path = Array.from({ length: sides }, (_, i) => {
-    const x = 50 + 50 * Math.cos(i * angle)
-    const y = 50 + 50 * Math.sin(i * angle)
-    return `${x}% ${y}%`
-  }).join(", ")
-
-  return `polygon(${path}, round 10px)`
-}
-
-const LevelPolygon = () => {
-  return (
-    <div
-      className="absolute right-0 bottom-0 flex size-12 items-center justify-center bg-primary-subtle font-extrabold text-xl shadow-lg"
-      style={{ clipPath: generatePolygonClipPath(5) }}
-    >
-      22
-    </div>
-  )
-}
+import { Profile } from "./types"
 
 async function getProfileData(username: string) {
   const req = `https://api.guild.xyz/v2/profiles/${username}`
@@ -69,25 +49,13 @@ async function getProfileData(username: string) {
   }
 }
 
-// TODO: try get this from the backend if not possible write zod validation
-interface Profile {
-  id: number
-  userId: number
-  username: string
-  name: string
-  bio: null | string
-  profileImageUrl: null | string
-  backgroundImageUrl: null | string
-  createdAt: string
-  updatedAt: string
-}
-
 const Page = async ({
   params: { username },
 }: {
   params: { username: string }
 }) => {
   const profile = await getProfileData(username)
+  const level = 100
 
   return (
     <Layout>
@@ -112,7 +80,7 @@ const Page = async ({
                 <AvatarFallback>#</AvatarFallback>
               </Avatar>
               <CircularProgressBar />
-              <LevelPolygon />
+              <LevelBadge level={level} className="absolute right-0 bottom-0" />
             </div>
             <h1 className="text-center font-bold text-4xl leading-normal tracking-tight">
               {profile.name}
@@ -149,9 +117,10 @@ const Page = async ({
           <div className="mb-16 grid grid-cols-1 gap-3 md:grid-cols-2">
             <Card className="p-6">
               <div className="grid grid-cols-[auto_1fr] grid-rows-[auto_auto_auto] items-center gap-x-3 gap-y-2">
-                <div className="row-span-3 flex size-12 items-center justify-center place-self-center self-start rounded-xl bg-primary font-extrabold text-xl shadow-lg">
-                  22
-                </div>
+                <LevelBadge
+                  level={level}
+                  className="row-span-3 size-14 self-start justify-self-center"
+                />
                 <div className="flex flex-col justify-between gap-2 sm:flex-row">
                   <h3 className="font-bold">Champion</h3>
                   <p className="text-muted-foreground">1322 / 9999 XP</p>
diff --git a/src/app/(marketing)/profile/[username]/types.ts b/src/app/(marketing)/profile/[username]/types.ts
new file mode 100644
index 0000000000..a323e75913
--- /dev/null
+++ b/src/app/(marketing)/profile/[username]/types.ts
@@ -0,0 +1,18 @@
+export type Profile = {
+  id: number
+  userId: number
+  username: string
+  name?: string
+  bio?: string
+  profileImageUrl?: string
+  backgroundImageUrl?: string
+  createdAt: Date
+  updatedAt: Date
+}
+
+export type ProfileContribution = {
+  id: number
+  profileId: number
+  guildId: number
+  roleId: number
+}
diff --git a/src/app/(marketing)/profile/_components/ContributionCard.tsx b/src/app/(marketing)/profile/_components/ContributionCard.tsx
index 78fe3ae20e..8780f612ae 100644
--- a/src/app/(marketing)/profile/_components/ContributionCard.tsx
+++ b/src/app/(marketing)/profile/_components/ContributionCard.tsx
@@ -38,7 +38,7 @@ export const ContributionCard = () => {
             COLLECTION:
           </div>
           <AvatarGroup imageUrls={["", "", ""]} count={87} size="lg" />
-          <Button size="icon" variant="ghost" className="ml-2 hidden md:block">
+          <Button size="icon" variant="ghost" className="ml-2 hidden md:flex">
             <CaretDown weight="bold" className="size-5" />
           </Button>
         </div>
diff --git a/src/app/(marketing)/profile/_components/LevelBadge.tsx b/src/app/(marketing)/profile/_components/LevelBadge.tsx
new file mode 100644
index 0000000000..e005d5088e
--- /dev/null
+++ b/src/app/(marketing)/profile/_components/LevelBadge.tsx
@@ -0,0 +1,49 @@
+import { cn } from "@/lib/utils"
+import { MAX_LEVEL, RANKS } from "../[username]/constants"
+
+type PolygonProps = {
+  sides: number
+  radius: number
+  color: string
+}
+
+const Polygon = ({ sides, radius, color }: PolygonProps) => {
+  const angleStep = (2 * Math.PI) / sides
+  const points = Array.from({ length: sides }, (_, i) => {
+    const x = 20 + radius * Math.cos(i * angleStep)
+    const y = 20 + radius * Math.sin(i * angleStep)
+    return `${x},${y}`
+  }).join(" ")
+
+  return (
+    <svg width={100} height={100}>
+      <polygon
+        points={points}
+        stroke={color}
+        fill={color}
+        strokeWidth="10"
+        strokeLinejoin="round"
+      />
+    </svg>
+  )
+}
+
+type LevelBadgeProps = {
+  level: number
+  className?: string
+}
+
+export const LevelBadge = ({ level, className }: LevelBadgeProps) => {
+  const rank =
+    RANKS[Math.min(Math.floor((level / MAX_LEVEL) * RANKS.length), RANKS.length - 1)]
+
+  return (
+    <div
+      className={cn("relative grid size-12 place-items-center shadow-lg", className)}
+    >
+      <div className="size-full rounded-full" style={{ background: rank.color }} />
+      <div className="absolute select-none font-extrabold text-xl">{level}</div>
+    </div>
+  )
+}
+// <Polygon sides={5} radius={20} color={"hsl(var(--primary))"} />

From 93fedb4195ff4f699aa148fc5bced70bc8f20d86 Mon Sep 17 00:00:00 2001
From: Dominik Stumpf <s.dominik.work@gmail.com>
Date: Tue, 30 Jul 2024 18:21:37 +0200
Subject: [PATCH 28/87] feat: start editprofile

---
 .../(marketing)/profile/[username]/page.tsx   |  8 ++--
 .../_components/CircularProgressBar.tsx       |  4 +-
 .../profile/_components/EditProfile.tsx       | 44 +++++++++++++++++++
 src/v2/components/ui/textarea.tsx             | 24 ++++++++++
 4 files changed, 75 insertions(+), 5 deletions(-)
 create mode 100644 src/app/(marketing)/profile/_components/EditProfile.tsx
 create mode 100644 src/v2/components/ui/textarea.tsx

diff --git a/src/app/(marketing)/profile/[username]/page.tsx b/src/app/(marketing)/profile/[username]/page.tsx
index 2a5cf4a7e7..7a7d5957fd 100644
--- a/src/app/(marketing)/profile/[username]/page.tsx
+++ b/src/app/(marketing)/profile/[username]/page.tsx
@@ -18,6 +18,7 @@ import { ArrowRight, CircleWavyCheck } from "@phosphor-icons/react/dist/ssr"
 import { ActivityChart } from "../_components/ActivityChart"
 import { CircularProgressBar } from "../_components/CircularProgressBar"
 import { ContributionCard } from "../_components/ContributionCard"
+import { EditProfile } from "../_components/EditProfile"
 import { LevelBadge } from "../_components/LevelBadge"
 import { RecentActivity } from "../_components/RecentActivity"
 import { Profile } from "./types"
@@ -55,7 +56,7 @@ const Page = async ({
   params: { username: string }
 }) => {
   const profile = await getProfileData(username)
-  const level = 100
+  const level = 50
 
   return (
     <Layout>
@@ -68,7 +69,8 @@ const Page = async ({
       </LayoutHero>
       <LayoutMain>
         <div className="mt-24">
-          <div className="mb-24 flex flex-col items-center">
+          <div className="relative mb-24 flex flex-col items-center">
+            <EditProfile />
             <div className="relative mb-12 flex items-center justify-center">
               <Avatar className="size-48">
                 <AvatarImage
@@ -79,7 +81,7 @@ const Page = async ({
                 />
                 <AvatarFallback>#</AvatarFallback>
               </Avatar>
-              <CircularProgressBar />
+              <CircularProgressBar progress={0.1} />
               <LevelBadge level={level} className="absolute right-0 bottom-0" />
             </div>
             <h1 className="text-center font-bold text-4xl leading-normal tracking-tight">
diff --git a/src/app/(marketing)/profile/_components/CircularProgressBar.tsx b/src/app/(marketing)/profile/_components/CircularProgressBar.tsx
index ac5b2bd7f5..329b2e608e 100644
--- a/src/app/(marketing)/profile/_components/CircularProgressBar.tsx
+++ b/src/app/(marketing)/profile/_components/CircularProgressBar.tsx
@@ -5,7 +5,7 @@ import { RadialBar, RadialBarChart } from "recharts"
 
 const chartData = [{ experience: 1, fill: "hsl(var(--primary))" }]
 
-export const CircularProgressBar = () => {
+export const CircularProgressBar = ({ progress }: { progress: number }) => {
   const size = 224
   const strokeWidth = 10
   return (
@@ -17,7 +17,7 @@ export const CircularProgressBar = () => {
       <RadialBarChart
         data={chartData}
         startAngle={0}
-        endAngle={280}
+        endAngle={360 * progress}
         innerRadius={106}
         outerRadius={116}
       >
diff --git a/src/app/(marketing)/profile/_components/EditProfile.tsx b/src/app/(marketing)/profile/_components/EditProfile.tsx
new file mode 100644
index 0000000000..35f5247658
--- /dev/null
+++ b/src/app/(marketing)/profile/_components/EditProfile.tsx
@@ -0,0 +1,44 @@
+"use client"
+
+import { Button } from "@/components/ui/Button"
+import {
+  Dialog,
+  DialogBody,
+  DialogCloseButton,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/components/ui/Dialog"
+import { Input } from "@/components/ui/Input"
+import { Label } from "@/components/ui/Label"
+import { Pencil } from "@phosphor-icons/react"
+
+export const EditProfile = () => {
+  return (
+    <Dialog>
+      <DialogTrigger asChild>
+        <Button className="-top-8 absolute right-0" variant="solid">
+          <Pencil weight="bold" />
+          Edit profile
+        </Button>
+      </DialogTrigger>
+      <DialogContent size="xl">
+        <DialogHeader>
+          <DialogTitle>Edit profile</DialogTitle>
+          <DialogCloseButton />
+        </DialogHeader>
+        <DialogBody>
+          <Label>
+            <div>Bio</div>
+            <Input />
+          </Label>
+        </DialogBody>
+        <DialogFooter>
+          <Button colorScheme="success">Save</Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  )
+}
diff --git a/src/v2/components/ui/textarea.tsx b/src/v2/components/ui/textarea.tsx
new file mode 100644
index 0000000000..9f9a6dc561
--- /dev/null
+++ b/src/v2/components/ui/textarea.tsx
@@ -0,0 +1,24 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+export interface TextareaProps
+  extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {}
+
+const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
+  ({ className, ...props }, ref) => {
+    return (
+      <textarea
+        className={cn(
+          "flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+          className
+        )}
+        ref={ref}
+        {...props}
+      />
+    )
+  }
+)
+Textarea.displayName = "Textarea"
+
+export { Textarea }

From 344fdddc0a1eb9f894da8ce27467dca5a0440c28 Mon Sep 17 00:00:00 2001
From: Dominik Stumpf <s.dominik.work@gmail.com>
Date: Tue, 30 Jul 2024 18:36:22 +0200
Subject: [PATCH 29/87] refactor(css): redo profile summary

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

diff --git a/src/app/(marketing)/profile/[username]/page.tsx b/src/app/(marketing)/profile/[username]/page.tsx
index 7a7d5957fd..77f0970cc9 100644
--- a/src/app/(marketing)/profile/[username]/page.tsx
+++ b/src/app/(marketing)/profile/[username]/page.tsx
@@ -95,7 +95,7 @@ const Page = async ({
             <p className="mt-6 max-w-md text-pretty text-center text-lg text-muted-foreground">
               {profile.bio}
             </p>
-            <div className="mt-8 flex flex-wrap items-center justify-center gap-x-8 gap-y-6">
+            <div className="mt-8 grid grid-cols-[repeat(3,auto)] gap-x-8 gap-y-6 sm:grid-cols-[repeat(5,auto)]">
               <div className="flex flex-col items-center leading-tight">
                 <div className="font-bold text-lg">3232</div>
                 <div className="text-muted-foreground">Guildmates</div>
@@ -106,7 +106,7 @@ const Page = async ({
                 <div className="text-muted-foreground">Followers</div>
               </div>
               <Separator orientation="vertical" className="hidden h-12 sm:block" />
-              <div className="flex items-center gap-2">
+              <div className="col-span-3 flex items-center gap-2 place-self-center sm:col-span-1">
                 <AvatarGroup imageUrls={["", ""]} count={8} />
                 <div className="text-muted-foreground leading-tight">
                   Followed by <span className="font-bold">Hoho</span>,<br />

From 1145d7e59a44d0a3d92e2fb3d20d8bb4d0ba34a9 Mon Sep 17 00:00:00 2001
From: Dominik Stumpf <s.dominik.work@gmail.com>
Date: Tue, 30 Jul 2024 18:47:57 +0200
Subject: [PATCH 30/87] refactor(css): improve contribution cards

---
 .../profile/_components/ContributionCard.tsx           |  2 +-
 .../(marketing)/profile/_components/RecentActivity.tsx | 10 +++-------
 2 files changed, 4 insertions(+), 8 deletions(-)

diff --git a/src/app/(marketing)/profile/_components/ContributionCard.tsx b/src/app/(marketing)/profile/_components/ContributionCard.tsx
index 8780f612ae..a30547b55b 100644
--- a/src/app/(marketing)/profile/_components/ContributionCard.tsx
+++ b/src/app/(marketing)/profile/_components/ContributionCard.tsx
@@ -28,7 +28,7 @@ export const ContributionCard = () => {
             Enter Farcaster
           </h3>
           <div className="flex items-center gap-2 text-muted-foreground">
-            <Users weight="bold" className="min-w-4" />
+            <Users weight="bold" className="min-w-min" />
             <p className="line-clamp-1 text-sm">Only 3.4% of users have this role</p>
           </div>
         </div>
diff --git a/src/app/(marketing)/profile/_components/RecentActivity.tsx b/src/app/(marketing)/profile/_components/RecentActivity.tsx
index 59bbcaa363..d8b2cba7ba 100644
--- a/src/app/(marketing)/profile/_components/RecentActivity.tsx
+++ b/src/app/(marketing)/profile/_components/RecentActivity.tsx
@@ -43,23 +43,19 @@ export const RecentActivity = () => {
             <div className="px-5 py-6">
               <h3 className="font-bold">
                 Acquire the{" "}
-                <Badge>
+                <Badge className="whitespace-nowrap">
                   <Rocket weight="fill" className="mr-1" />
                   Enter Farcaster
                 </Badge>{" "}
                 role
               </h3>
-              <div className="mt-1.5 flex flex-col sm:flex-row sm:items-center sm:gap-2">
+              <div className="mt-1.5 flex flex-wrap items-center gap-2">
                 <p className="text-muted-foreground">2 hours ago</p>
                 <Circle
                   className="hidden size-1.5 text-muted-foreground sm:block"
                   weight="fill"
                 />
-                <Badge
-                  colorScheme="blue"
-                  className="self-start sm:self-center"
-                  size="sm"
-                >
+                <Badge colorScheme="blue" size="sm">
                   +5 XP
                 </Badge>
               </div>

From b955176826f1c9850bfc82c1ab343bc87c7ba8e1 Mon Sep 17 00:00:00 2001
From: Dominik Stumpf <s.dominik.work@gmail.com>
Date: Wed, 31 Jul 2024 17:07:55 +0200
Subject: [PATCH 31/87] Revert "chore: remove providers and account"

This reverts commit 2c284531df00f6f47fffe04bd0fcb2bb239e7d6a.
---
 src/v2/components/Header/Header.tsx       |  3 +++
 src/v2/components/Providers/Providers.tsx | 32 ++++++++++++++++++++---
 2 files changed, 32 insertions(+), 3 deletions(-)

diff --git a/src/v2/components/Header/Header.tsx b/src/v2/components/Header/Header.tsx
index 77ba9a3951..b32aa8c806 100644
--- a/src/v2/components/Header/Header.tsx
+++ b/src/v2/components/Header/Header.tsx
@@ -1,9 +1,12 @@
 "use client"
+
+import { Account } from "../Account"
 import { NavMenu } from "./NavMenu"
 
 const Header = () => (
   <header className="relative flex h-16 w-full items-center justify-between p-2">
     <NavMenu />
+    <Account />
   </header>
 )
 
diff --git a/src/v2/components/Providers/Providers.tsx b/src/v2/components/Providers/Providers.tsx
index 26664b2e00..8295007a83 100644
--- a/src/v2/components/Providers/Providers.tsx
+++ b/src/v2/components/Providers/Providers.tsx
@@ -1,15 +1,24 @@
 "use client"
-import { QueryClient } from "@tanstack/react-query"
+
+import { FuelProvider } from "@fuels/react"
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query"
 import { env } from "env"
+import { fuelConfig } from "fuelConfig"
 import { useAtomValue } from "jotai"
 import { ThemeProvider } from "next-themes"
 import dynamic from "next/dynamic"
-import { ReactNode } from "react"
+import { ReactNode, Suspense } from "react"
 import { SWRConfig } from "swr"
 import { fetcherForSWR } from "utils/fetcher"
 import { shouldUseReCAPTCHAAtom } from "utils/recaptcha"
+import { WagmiProvider } from "wagmi"
+import { wagmiConfig } from "wagmiConfig"
+import { AccountModal } from "../Account/components/AccountModal"
+import { Web3ConnectionManager } from "../Web3ConnectionManager"
 import { Toaster } from "../ui/Toaster"
 import { TooltipProvider } from "../ui/Tooltip"
+import { IntercomProvider } from "./IntercomProvider"
+import { PostHogProvider } from "./PostHogProvider"
 
 const DynamicReCAPTCHA = dynamic(() => import("v2/components/ReCAPTCHA"))
 
@@ -28,7 +37,24 @@ export function Providers({ children }: { children: ReactNode }) {
         disableTransitionOnChange
       >
         <TooltipProvider>
-          <SWRConfig value={{ fetcher: fetcherForSWR }}>{children}</SWRConfig>
+          <SWRConfig value={{ fetcher: fetcherForSWR }}>
+            <WagmiProvider config={wagmiConfig} reconnectOnMount={false}>
+              <QueryClientProvider client={queryClient}>
+                <FuelProvider ui={false} fuelConfig={fuelConfig}>
+                  <PostHogProvider>
+                    <IntercomProvider>
+                      {children}
+                      <AccountModal />
+                      <Suspense>
+                        <Web3ConnectionManager />
+                      </Suspense>
+                    </IntercomProvider>
+                  </PostHogProvider>
+                </FuelProvider>
+              </QueryClientProvider>
+            </WagmiProvider>
+          </SWRConfig>
+
           <Toaster />
         </TooltipProvider>
       </ThemeProvider>

From 2b487abe4a7aa82683b706ea6104d908751f8d12 Mon Sep 17 00:00:00 2001
From: Dominik Stumpf <s.dominik.work@gmail.com>
Date: Wed, 31 Jul 2024 18:50:09 +0200
Subject: [PATCH 32/87] feat: add OperatedGuildCard

---
 .../(marketing)/profile/[username]/page.tsx   |  9 ++--
 .../(marketing)/profile/[username]/types.ts   | 18 -------
 .../profile/_components/OperatedGuildCard.tsx | 50 +++++++++++++++++++
 src/v2/components/ui/Avatar.tsx               |  1 +
 4 files changed, 57 insertions(+), 21 deletions(-)
 delete mode 100644 src/app/(marketing)/profile/[username]/types.ts
 create mode 100644 src/app/(marketing)/profile/_components/OperatedGuildCard.tsx

diff --git a/src/app/(marketing)/profile/[username]/page.tsx b/src/app/(marketing)/profile/[username]/page.tsx
index 77f0970cc9..3b73837bb3 100644
--- a/src/app/(marketing)/profile/[username]/page.tsx
+++ b/src/app/(marketing)/profile/[username]/page.tsx
@@ -14,14 +14,15 @@ import { Button } from "@/components/ui/Button"
 import { Card } from "@/components/ui/Card"
 import { Progress } from "@/components/ui/Progress"
 import { Separator } from "@/components/ui/Separator"
+import { Schemas } from "@guildxyz/types"
 import { ArrowRight, CircleWavyCheck } from "@phosphor-icons/react/dist/ssr"
 import { ActivityChart } from "../_components/ActivityChart"
 import { CircularProgressBar } from "../_components/CircularProgressBar"
 import { ContributionCard } from "../_components/ContributionCard"
 import { EditProfile } from "../_components/EditProfile"
 import { LevelBadge } from "../_components/LevelBadge"
+import { OperatedGuildCard } from "../_components/OperatedGuildCard"
 import { RecentActivity } from "../_components/RecentActivity"
-import { Profile } from "./types"
 
 async function getProfileData(username: string) {
   const req = `https://api.guild.xyz/v2/profiles/${username}`
@@ -30,7 +31,7 @@ async function getProfileData(username: string) {
     if (!res.ok) {
       throw new Error("Failed to fetch profile data")
     }
-    return res.json() as Promise<Profile>
+    return res.json() as Promise<Schemas["Profile"]>
   } catch (e) {
     // mocking for the time being if fetch fails
     console.error(e)
@@ -142,7 +143,9 @@ const Page = async ({
               <ActivityChart />
             </Card>
           </div>
-          <h2 className="mb-3 font-bold text-lg">Top contributions</h2>
+          <h2 className="mb-3 font-bold text-lg">Operated guilds</h2>
+          <OperatedGuildCard />
+          <h2 className="mt-8 mb-3 font-bold text-lg">Top contributions</h2>
           <div className="grid grid-cols-1 gap-3">
             <ContributionCard />
             <ContributionCard />
diff --git a/src/app/(marketing)/profile/[username]/types.ts b/src/app/(marketing)/profile/[username]/types.ts
deleted file mode 100644
index a323e75913..0000000000
--- a/src/app/(marketing)/profile/[username]/types.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-export type Profile = {
-  id: number
-  userId: number
-  username: string
-  name?: string
-  bio?: string
-  profileImageUrl?: string
-  backgroundImageUrl?: string
-  createdAt: Date
-  updatedAt: Date
-}
-
-export type ProfileContribution = {
-  id: number
-  profileId: number
-  guildId: number
-  roleId: number
-}
diff --git a/src/app/(marketing)/profile/_components/OperatedGuildCard.tsx b/src/app/(marketing)/profile/_components/OperatedGuildCard.tsx
new file mode 100644
index 0000000000..dae968272d
--- /dev/null
+++ b/src/app/(marketing)/profile/_components/OperatedGuildCard.tsx
@@ -0,0 +1,50 @@
+import { CheckMark } from "@/components/CheckMark"
+import { Avatar, AvatarFallback } from "@/components/ui/Avatar"
+import { Card } from "@/components/ui/Card"
+import { Skeleton } from "@/components/ui/Skeleton"
+import { User } from "@phosphor-icons/react/dist/ssr"
+import { AvatarImage } from "@radix-ui/react-avatar"
+import Image from "next/image"
+
+export const OperatedGuildCard = () => {
+  return (
+    <Card className="flex">
+      <div className="relative w-1/3">
+        <div className="absolute inset-0 bg-black" />
+        <Image
+          className="absolute inset-0 size-full object-cover opacity-30"
+          src="https://guild.xyz/_next/image?url=https%3A%2F%2Fguild-xyz.mypinata.cloud%2Fipfs%2FQmUo1uEc76KTmg1wJ52MJZNazcudPPY5HFMpLzTKLw9rL9&w=1080&q=75"
+          alt="guild banner"
+          width={419}
+          height={233}
+        />
+        <div className="relative flex h-full flex-col items-center justify-center gap-3">
+          <Avatar size="3xl">
+            <AvatarImage
+              src="https://guild.xyz/_next/image?url=https%3A%2F%2Fguild-xyz.mypinata.cloud%2Fipfs%2FQmQXeY1ZEtnLGqFPuJ4RZthYz8nKdTLhLVxBRfHGXweamx&w=256&q=70"
+              width={118}
+              height={118}
+              alt="guild image"
+            />
+            <AvatarFallback>
+              <Skeleton className="size-full" />
+            </AvatarFallback>
+          </Avatar>
+          <h3 className="text-center font-bold font-display text-xl">
+            The Guilded Age Guild
+            <CheckMark className="ml-2 inline-block size-6" />
+          </h3>
+        </div>
+      </div>
+      <div className="grid grow grid-cols-2 justify-stretch gap-2 px-6 py-5">
+        {Array(6).fill(
+          <Card className="flex items-center gap-2 bg-secondary p-5 font-extrabold text-lg">
+            <User weight="bold" className="min-w-min" />
+            123k
+            <span className="text-muted-foreground">members</span>
+          </Card>
+        )}
+      </div>
+    </Card>
+  )
+}
diff --git a/src/v2/components/ui/Avatar.tsx b/src/v2/components/ui/Avatar.tsx
index ca0c9f20f5..456056a758 100644
--- a/src/v2/components/ui/Avatar.tsx
+++ b/src/v2/components/ui/Avatar.tsx
@@ -15,6 +15,7 @@ export const avatarVariants = cva(
         lg: "size-12",
         xl: "size-16",
         "2xl": "size-20",
+        "3xl": "size-28",
       },
     },
     defaultVariants: {

From 4c584afeb5fee9199b888c436c00dfe91b83ec63 Mon Sep 17 00:00:00 2001
From: Dominik Stumpf <s.dominik.work@gmail.com>
Date: Wed, 31 Jul 2024 19:43:04 +0200
Subject: [PATCH 33/87] chore: add EditProfile

---
 .../(marketing)/profile/[username]/page.tsx   |   8 +-
 .../profile/_components/EditProfile.tsx       | 158 ++++++++++++++++--
 src/v2/components/CheckMark.tsx               |  12 +-
 3 files changed, 160 insertions(+), 18 deletions(-)

diff --git a/src/app/(marketing)/profile/[username]/page.tsx b/src/app/(marketing)/profile/[username]/page.tsx
index 3b73837bb3..076d80f4ac 100644
--- a/src/app/(marketing)/profile/[username]/page.tsx
+++ b/src/app/(marketing)/profile/[username]/page.tsx
@@ -1,3 +1,4 @@
+import { CheckMark } from "@/components/CheckMark"
 import {
   Layout,
   LayoutBanner,
@@ -15,7 +16,7 @@ import { Card } from "@/components/ui/Card"
 import { Progress } from "@/components/ui/Progress"
 import { Separator } from "@/components/ui/Separator"
 import { Schemas } from "@guildxyz/types"
-import { ArrowRight, CircleWavyCheck } from "@phosphor-icons/react/dist/ssr"
+import { ArrowRight } from "@phosphor-icons/react/dist/ssr"
 import { ActivityChart } from "../_components/ActivityChart"
 import { CircularProgressBar } from "../_components/CircularProgressBar"
 import { ContributionCard } from "../_components/ContributionCard"
@@ -87,10 +88,7 @@ const Page = async ({
             </div>
             <h1 className="text-center font-bold text-4xl leading-normal tracking-tight">
               {profile.name}
-              <CircleWavyCheck
-                weight="fill"
-                className="ml-4 inline size-6 fill-yellow-500"
-              />
+              <CheckMark className="ml-4 inline size-6 fill-yellow-500" size={24} />
             </h1>
             <div className="text-lg text-muted-foreground">@{profile.username}</div>
             <p className="mt-6 max-w-md text-pretty text-center text-lg text-muted-foreground">
diff --git a/src/app/(marketing)/profile/_components/EditProfile.tsx b/src/app/(marketing)/profile/_components/EditProfile.tsx
index 35f5247658..dcd1d70096 100644
--- a/src/app/(marketing)/profile/_components/EditProfile.tsx
+++ b/src/app/(marketing)/profile/_components/EditProfile.tsx
@@ -1,5 +1,6 @@
 "use client"
 
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/Avatar"
 import { Button } from "@/components/ui/Button"
 import {
   Dialog,
@@ -11,11 +12,75 @@ import {
   DialogTitle,
   DialogTrigger,
 } from "@/components/ui/Dialog"
+import {
+  FormControl,
+  FormErrorMessage,
+  FormField,
+  FormItem,
+  FormLabel,
+} from "@/components/ui/Form"
 import { Input } from "@/components/ui/Input"
 import { Label } from "@/components/ui/Label"
-import { Pencil } from "@phosphor-icons/react"
+import { toast } from "@/components/ui/hooks/useToast"
+import { Textarea } from "@/components/ui/textarea"
+import { cn } from "@/lib/utils"
+import { profileSchema } from "@/lib/validations/profileSchema"
+import { Schemas } from "@guildxyz/types"
+import { zodResolver } from "@hookform/resolvers/zod"
+import { Pencil, User } from "@phosphor-icons/react"
+import useDropzone from "hooks/useDropzone"
+import usePinata from "hooks/usePinata"
+import { useState } from "react"
+import { FormProvider, useForm } from "react-hook-form"
 
 export const EditProfile = () => {
+  const form = useForm<Schemas["ProfileUpdate"]>({
+    resolver: zodResolver(profileSchema),
+    defaultValues: {
+      name: "",
+      username: "",
+    },
+    mode: "onTouched",
+  })
+
+  // const createProfile = useCreateProfile()
+  async function onSubmit(values: Schemas["ProfileUpdate"]) {
+    console.log("edit profile submit", values)
+    // createProfile.onSubmit(values)
+  }
+
+  const { isUploading, onUpload } = usePinata({
+    control: form.control,
+    fieldToSetOnSuccess: "profileImageUrl",
+    onError: (error) => {
+      toast({
+        variant: "error",
+        title: "Failed to upload file",
+        description: error,
+      })
+    },
+  })
+
+  const [uploadProgress, setUploadProgress] = useState(0)
+  const { isDragActive, getRootProps } = useDropzone({
+    multiple: false,
+    noClick: false,
+    onDrop: (acceptedFiles) => {
+      if (!acceptedFiles[0]) return
+      onUpload({
+        data: [acceptedFiles[0]],
+        onProgress: setUploadProgress,
+      })
+    },
+    onError: (error) => {
+      toast({
+        variant: "error",
+        title: `Failed to upload file`,
+        description: error.message,
+      })
+    },
+  })
+
   return (
     <Dialog>
       <DialogTrigger asChild>
@@ -24,20 +89,91 @@ export const EditProfile = () => {
           Edit profile
         </Button>
       </DialogTrigger>
-      <DialogContent size="xl">
+      <DialogContent size="xl" className="bg-background">
         <DialogHeader>
           <DialogTitle>Edit profile</DialogTitle>
           <DialogCloseButton />
         </DialogHeader>
-        <DialogBody>
-          <Label>
-            <div>Bio</div>
-            <Input />
-          </Label>
-        </DialogBody>
-        <DialogFooter>
-          <Button colorScheme="success">Save</Button>
-        </DialogFooter>
+        <FormProvider {...form}>
+          <form onSubmit={form.handleSubmit(onSubmit)}>
+            <DialogBody>
+              <FormField
+                control={form.control}
+                name="profileImageUrl"
+                render={({ field }) => (
+                  <Button
+                    variant="unstyled"
+                    type="button"
+                    className={cn(
+                      "mb-8 size-36 self-center rounded-full border-2 border-dotted",
+                      { "border-solid": field.value }
+                    )}
+                    {...getRootProps()}
+                  >
+                    <Avatar className="size-36 bg-card-secondary">
+                      {field.value && (
+                        <AvatarImage
+                          src={field.value}
+                          width={144}
+                          height={144}
+                          alt="profile avatar"
+                        />
+                      )}
+                      <AvatarFallback className="bg-card-secondary">
+                        <User size={38} />
+                      </AvatarFallback>
+                    </Avatar>
+                  </Button>
+                )}
+              />
+
+              <>
+                <FormField
+                  control={form.control}
+                  name="name"
+                  render={({ field }) => (
+                    <FormItem>
+                      <FormLabel>Name</FormLabel>
+                      <FormControl>
+                        <Input placeholder="" {...field} />
+                      </FormControl>
+                      <FormErrorMessage />
+                    </FormItem>
+                  )}
+                />
+                <FormField
+                  control={form.control}
+                  name="username"
+                  render={({ field }) => (
+                    <FormItem className="pb-2">
+                      <FormLabel aria-required="true">Username</FormLabel>
+                      <FormControl>
+                        <Input placeholder="" required {...field} />
+                      </FormControl>
+                      <FormErrorMessage />
+                    </FormItem>
+                  )}
+                />
+                <Button
+                  className="w-full"
+                  type="submit"
+                  colorScheme="success"
+                  disabled={!form.formState.isValid}
+                >
+                  Start my profile
+                </Button>
+              </>
+
+              <Label>
+                <div>Bio</div>
+                <Textarea />
+              </Label>
+            </DialogBody>
+            <DialogFooter>
+              <Button colorScheme="success">Save</Button>
+            </DialogFooter>
+          </form>
+        </FormProvider>
       </DialogContent>
     </Dialog>
   )
diff --git a/src/v2/components/CheckMark.tsx b/src/v2/components/CheckMark.tsx
index 2115023d9d..e2c40d3755 100644
--- a/src/v2/components/CheckMark.tsx
+++ b/src/v2/components/CheckMark.tsx
@@ -1,9 +1,17 @@
 import { cn } from "@/lib/utils"
 import { CircleWavyCheck } from "@phosphor-icons/react/dist/ssr"
+import { ComponentProps } from "react"
 
-export const CheckMark = ({ className }: { className?: string }) => {
+export const CheckMark = ({
+  className,
+  props,
+}: ComponentProps<typeof CircleWavyCheck>) => {
   return (
-    <CircleWavyCheck weight="fill" className={cn("size-5 fill-blue-500", className)}>
+    <CircleWavyCheck
+      weight="fill"
+      className={cn("size-5 fill-blue-500", className)}
+      {...props}
+    >
       <circle cx="128" cy="128" r="80" fill="white" />
     </CircleWavyCheck>
   )

From e0bbddba6bbe4b7f5c2344fce5e126e08da9f75b Mon Sep 17 00:00:00 2001
From: Dominik Stumpf <s.dominik.work@gmail.com>
Date: Wed, 31 Jul 2024 20:55:36 +0200
Subject: [PATCH 34/87] feat: finish EditProfile presentation

---
 .../(marketing)/profile/[username]/page.tsx   |  13 +-
 .../profile/_components/EditProfile.tsx       | 171 +++++++++++-------
 .../ui/{textarea.tsx => Textarea.tsx}         |   2 +-
 3 files changed, 114 insertions(+), 72 deletions(-)
 rename src/v2/components/ui/{textarea.tsx => Textarea.tsx} (68%)

diff --git a/src/app/(marketing)/profile/[username]/page.tsx b/src/app/(marketing)/profile/[username]/page.tsx
index 076d80f4ac..48346948f3 100644
--- a/src/app/(marketing)/profile/[username]/page.tsx
+++ b/src/app/(marketing)/profile/[username]/page.tsx
@@ -15,6 +15,7 @@ import { Button } from "@/components/ui/Button"
 import { Card } from "@/components/ui/Card"
 import { Progress } from "@/components/ui/Progress"
 import { Separator } from "@/components/ui/Separator"
+import { Skeleton } from "@/components/ui/Skeleton"
 import { Schemas } from "@guildxyz/types"
 import { ArrowRight } from "@phosphor-icons/react/dist/ssr"
 import { ActivityChart } from "../_components/ActivityChart"
@@ -72,7 +73,13 @@ const Page = async ({
       <LayoutMain>
         <div className="mt-24">
           <div className="relative mb-24 flex flex-col items-center">
-            <EditProfile />
+            <EditProfile
+              profileImageUrl={profile.profileImageUrl}
+              name={profile.name}
+              bio={profile.bio ?? undefined}
+              backgroundImageUrl={profile.backgroundImageUrl ?? undefined}
+              username={profile.username}
+            />
             <div className="relative mb-12 flex items-center justify-center">
               <Avatar className="size-48">
                 <AvatarImage
@@ -81,7 +88,9 @@ const Page = async ({
                   width={192}
                   height={192}
                 />
-                <AvatarFallback>#</AvatarFallback>
+                <AvatarFallback>
+                  <Skeleton className="size-full" />
+                </AvatarFallback>
               </Avatar>
               <CircularProgressBar progress={0.1} />
               <LevelBadge level={level} className="absolute right-0 bottom-0" />
diff --git a/src/app/(marketing)/profile/_components/EditProfile.tsx b/src/app/(marketing)/profile/_components/EditProfile.tsx
index dcd1d70096..c8fdcccf4b 100644
--- a/src/app/(marketing)/profile/_components/EditProfile.tsx
+++ b/src/app/(marketing)/profile/_components/EditProfile.tsx
@@ -20,33 +20,31 @@ import {
   FormLabel,
 } from "@/components/ui/Form"
 import { Input } from "@/components/ui/Input"
-import { Label } from "@/components/ui/Label"
+import { Separator } from "@/components/ui/Separator"
+import { Textarea } from "@/components/ui/Textarea"
 import { toast } from "@/components/ui/hooks/useToast"
-import { Textarea } from "@/components/ui/textarea"
 import { cn } from "@/lib/utils"
 import { profileSchema } from "@/lib/validations/profileSchema"
 import { Schemas } from "@guildxyz/types"
 import { zodResolver } from "@hookform/resolvers/zod"
-import { Pencil, User } from "@phosphor-icons/react"
+import { Eyedropper, Image as ImageIcon, Pencil, User } from "@phosphor-icons/react"
 import useDropzone from "hooks/useDropzone"
 import usePinata from "hooks/usePinata"
+import Image from "next/image"
 import { useState } from "react"
 import { FormProvider, useForm } from "react-hook-form"
 
-export const EditProfile = () => {
+export const EditProfile = (profile: Schemas["ProfileUpdate"]) => {
   const form = useForm<Schemas["ProfileUpdate"]>({
     resolver: zodResolver(profileSchema),
     defaultValues: {
-      name: "",
-      username: "",
+      ...profile,
     },
     mode: "onTouched",
   })
 
-  // const createProfile = useCreateProfile()
   async function onSubmit(values: Schemas["ProfileUpdate"]) {
     console.log("edit profile submit", values)
-    // createProfile.onSubmit(values)
   }
 
   const { isUploading, onUpload } = usePinata({
@@ -89,7 +87,7 @@ export const EditProfile = () => {
           Edit profile
         </Button>
       </DialogTrigger>
-      <DialogContent size="xl" className="bg-background">
+      <DialogContent size="lg" className="bg-background">
         <DialogHeader>
           <DialogTitle>Edit profile</DialogTitle>
           <DialogCloseButton />
@@ -97,80 +95,115 @@ export const EditProfile = () => {
         <FormProvider {...form}>
           <form onSubmit={form.handleSubmit(onSubmit)}>
             <DialogBody>
-              <FormField
-                control={form.control}
-                name="profileImageUrl"
-                render={({ field }) => (
-                  <Button
-                    variant="unstyled"
-                    type="button"
-                    className={cn(
-                      "mb-8 size-36 self-center rounded-full border-2 border-dotted",
-                      { "border-solid": field.value }
-                    )}
-                    {...getRootProps()}
-                  >
-                    <Avatar className="size-36 bg-card-secondary">
-                      {field.value && (
-                        <AvatarImage
-                          src={field.value}
-                          width={144}
-                          height={144}
-                          alt="profile avatar"
-                        />
-                      )}
-                      <AvatarFallback className="bg-card-secondary">
-                        <User size={38} />
-                      </AvatarFallback>
-                    </Avatar>
-                  </Button>
-                )}
-              />
-
-              <>
+              <div className="relative mb-20">
                 <FormField
                   control={form.control}
-                  name="name"
+                  name="backgroundImageUrl"
                   render={({ field }) => (
-                    <FormItem>
-                      <FormLabel>Name</FormLabel>
-                      <FormControl>
-                        <Input placeholder="" {...field} />
-                      </FormControl>
-                      <FormErrorMessage />
+                    <FormItem className="relative flex h-32 items-center justify-center overflow-hidden rounded-xl border">
+                      <div className="absolute inset-0 size-full">
+                        {field.value ? (
+                          <Image
+                            src={field.value}
+                            width={144}
+                            height={144}
+                            alt="profile background"
+                          />
+                        ) : (
+                          <div className="size-full bg-purple-800" />
+                        )}
+                      </div>
+                      <div className="relative flex items-center gap-3">
+                        <Button size="icon" variant="ghost">
+                          <ImageIcon weight="bold" size={24} />
+                        </Button>
+                        <Separator orientation="vertical" className="h-6 w-0.5" />
+                        <Button size="icon" variant="ghost">
+                          <Eyedropper weight="bold" size={24} />
+                        </Button>
+                      </div>
                     </FormItem>
                   )}
                 />
                 <FormField
                   control={form.control}
-                  name="username"
+                  name="profileImageUrl"
                   render={({ field }) => (
-                    <FormItem className="pb-2">
-                      <FormLabel aria-required="true">Username</FormLabel>
-                      <FormControl>
-                        <Input placeholder="" required {...field} />
-                      </FormControl>
-                      <FormErrorMessage />
-                    </FormItem>
+                    <Button
+                      variant="unstyled"
+                      type="button"
+                      className={cn(
+                        "-bottom-2 absolute left-4 size-28 translate-y-1/2 rounded-full border-2 border-dotted",
+                        { "border-solid": field.value }
+                      )}
+                      {...getRootProps()}
+                    >
+                      <Avatar className="size-36 bg-card-secondary">
+                        {field.value && (
+                          <AvatarImage
+                            src={field.value}
+                            width={144}
+                            height={144}
+                            alt="profile avatar"
+                          />
+                        )}
+                        <AvatarFallback className="bg-card-secondary">
+                          <User size={38} />
+                        </AvatarFallback>
+                      </Avatar>
+                    </Button>
                   )}
                 />
-                <Button
-                  className="w-full"
-                  type="submit"
-                  colorScheme="success"
-                  disabled={!form.formState.isValid}
-                >
-                  Start my profile
-                </Button>
-              </>
+              </div>
 
-              <Label>
-                <div>Bio</div>
-                <Textarea />
-              </Label>
+              <FormField
+                control={form.control}
+                name="name"
+                render={({ field }) => (
+                  <FormItem className="pb-2">
+                    <FormLabel>Name</FormLabel>
+                    <FormControl>
+                      <Input placeholder="" {...field} />
+                    </FormControl>
+                    <FormErrorMessage />
+                  </FormItem>
+                )}
+              />
+              <FormField
+                control={form.control}
+                name="username"
+                render={({ field }) => (
+                  <FormItem className="pb-2">
+                    <FormLabel aria-required="true">Username</FormLabel>
+                    <FormControl>
+                      <Input placeholder="" required {...field} />
+                    </FormControl>
+                    <FormErrorMessage />
+                  </FormItem>
+                )}
+              />
+              <FormField
+                control={form.control}
+                name="bio"
+                render={({ field }) => (
+                  <FormItem className="pb-2">
+                    <FormLabel>Bio</FormLabel>
+                    <FormControl>
+                      <Textarea placeholder="" className="max-h-12" {...field} />
+                    </FormControl>
+                    <FormErrorMessage />
+                  </FormItem>
+                )}
+              />
             </DialogBody>
             <DialogFooter>
-              <Button colorScheme="success">Save</Button>
+              <Button
+                colorScheme="success"
+                type="submit"
+                disabled={!form.formState.isValid}
+              >
+                Save
+              </Button>
             </DialogFooter>
           </form>
         </FormProvider>
diff --git a/src/v2/components/ui/textarea.tsx b/src/v2/components/ui/Textarea.tsx
similarity index 68%
rename from src/v2/components/ui/textarea.tsx
rename to src/v2/components/ui/Textarea.tsx
index 9f9a6dc561..2ece3b6fff 100644
--- a/src/v2/components/ui/textarea.tsx
+++ b/src/v2/components/ui/Textarea.tsx
@@ -10,7 +10,7 @@ const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
     return (
       <textarea
         className={cn(
-          "flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+          "flex min-h-[80px] w-full rounded-md border border-input bg-card-secondary px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
           className
         )}
         ref={ref}

From 912abe4a3d419b70e54c7e0ee4e72fa825f19a52 Mon Sep 17 00:00:00 2001
From: Dominik Stumpf <s.dominik.work@gmail.com>
Date: Wed, 31 Jul 2024 20:56:41 +0200
Subject: [PATCH 35/87] chore: adjust spacing in EditProfile

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

diff --git a/src/app/(marketing)/profile/_components/EditProfile.tsx b/src/app/(marketing)/profile/_components/EditProfile.tsx
index c8fdcccf4b..bba219b337 100644
--- a/src/app/(marketing)/profile/_components/EditProfile.tsx
+++ b/src/app/(marketing)/profile/_components/EditProfile.tsx
@@ -186,7 +186,7 @@ export const EditProfile = (profile: Schemas["ProfileUpdate"]) => {
                 control={form.control}
                 name="bio"
                 render={({ field }) => (
-                  <FormItem className="pb-2">
+                  <FormItem className="">
                     <FormLabel>Bio</FormLabel>
                     <FormControl>
                       <Textarea placeholder="" className="max-h-12" {...field} />

From 50adb94db9f08efc1c370152b54b3fcdcce06c05 Mon Sep 17 00:00:00 2001
From: Dominik Stumpf <s.dominik.work@gmail.com>
Date: Wed, 31 Jul 2024 21:00:58 +0200
Subject: [PATCH 36/87] fix: spread props

---
 src/v2/components/CheckMark.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/v2/components/CheckMark.tsx b/src/v2/components/CheckMark.tsx
index e2c40d3755..c1d4c9083b 100644
--- a/src/v2/components/CheckMark.tsx
+++ b/src/v2/components/CheckMark.tsx
@@ -4,7 +4,7 @@ import { ComponentProps } from "react"
 
 export const CheckMark = ({
   className,
-  props,
+  ...props
 }: ComponentProps<typeof CircleWavyCheck>) => {
   return (
     <CircleWavyCheck

From 6d2d8891b665d9d2ca920db40869a91d293af2be Mon Sep 17 00:00:00 2001
From: Dominik Stumpf <s.dominik.work@gmail.com>
Date: Wed, 31 Jul 2024 21:01:16 +0200
Subject: [PATCH 37/87] feat: add delete profile view

---
 src/app/(marketing)/profile/_components/EditProfile.tsx | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/src/app/(marketing)/profile/_components/EditProfile.tsx b/src/app/(marketing)/profile/_components/EditProfile.tsx
index bba219b337..019f457065 100644
--- a/src/app/(marketing)/profile/_components/EditProfile.tsx
+++ b/src/app/(marketing)/profile/_components/EditProfile.tsx
@@ -197,6 +197,9 @@ export const EditProfile = (profile: Schemas["ProfileUpdate"]) => {
               />
             </DialogBody>
             <DialogFooter>
+              <Button colorScheme="destructive" type="submit">
+                Delete profile
+              </Button>
               <Button
                 colorScheme="success"
                 type="submit"

From 86e974d5ddb7d7d59251d0c2e3e5bef8749ebab8 Mon Sep 17 00:00:00 2001
From: Dominik Stumpf <s.dominik.work@gmail.com>
Date: Wed, 31 Jul 2024 21:31:59 +0200
Subject: [PATCH 38/87] feat: add EditContributions

---
 .../(marketing)/profile/[username]/page.tsx   |  8 ++-
 .../profile/_components/EditContributions.tsx | 61 +++++++++++++++++++
 2 files changed, 67 insertions(+), 2 deletions(-)
 create mode 100644 src/app/(marketing)/profile/_components/EditContributions.tsx

diff --git a/src/app/(marketing)/profile/[username]/page.tsx b/src/app/(marketing)/profile/[username]/page.tsx
index 48346948f3..2ce7313d47 100644
--- a/src/app/(marketing)/profile/[username]/page.tsx
+++ b/src/app/(marketing)/profile/[username]/page.tsx
@@ -21,6 +21,7 @@ import { ArrowRight } from "@phosphor-icons/react/dist/ssr"
 import { ActivityChart } from "../_components/ActivityChart"
 import { CircularProgressBar } from "../_components/CircularProgressBar"
 import { ContributionCard } from "../_components/ContributionCard"
+import { EditContributions } from "../_components/EditContributions"
 import { EditProfile } from "../_components/EditProfile"
 import { LevelBadge } from "../_components/LevelBadge"
 import { OperatedGuildCard } from "../_components/OperatedGuildCard"
@@ -152,7 +153,10 @@ const Page = async ({
           </div>
           <h2 className="mb-3 font-bold text-lg">Operated guilds</h2>
           <OperatedGuildCard />
-          <h2 className="mt-8 mb-3 font-bold text-lg">Top contributions</h2>
+          <div className="mt-8 mb-3 flex items-center justify-between">
+            <h2 className="font-bold text-lg">Top contributions</h2>
+            <EditContributions />
+          </div>
           <div className="grid grid-cols-1 gap-3">
             <ContributionCard />
             <ContributionCard />
@@ -165,7 +169,7 @@ const Page = async ({
             <h2 className="mb-3 font-bold text-lg">Recent activity</h2>
             <RecentActivity />
             <p className="mt-2 font-semibold text-muted-foreground">
-              ... only last 20 actions are shown
+              &hellip; only last 20 actions are shown
             </p>
           </div>
         </div>
diff --git a/src/app/(marketing)/profile/_components/EditContributions.tsx b/src/app/(marketing)/profile/_components/EditContributions.tsx
new file mode 100644
index 0000000000..0c7421f956
--- /dev/null
+++ b/src/app/(marketing)/profile/_components/EditContributions.tsx
@@ -0,0 +1,61 @@
+"use client"
+import { Button } from "@/components/ui/Button"
+import {
+  Dialog,
+  DialogBody,
+  DialogCloseButton,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/components/ui/Dialog"
+// import { profileSchema } from "@/lib/validations/profileSchema"
+import { Schemas } from "@guildxyz/types"
+// import { zodResolver } from "@hookform/resolvers/zod"
+import { Pencil } from "@phosphor-icons/react"
+import { FormProvider, useForm } from "react-hook-form"
+
+export const EditContributions = (
+  contribution: Schemas["ProfileContributionUpdate"]
+) => {
+  const form = useForm<Schemas["ProfileContributionUpdate"]>({
+    // resolver: zodResolver(profileSchema),
+    defaultValues: {
+      ...contribution,
+    },
+    mode: "onTouched",
+  })
+
+  async function onSubmit(values: Schemas["ProfileContributionUpdate"]) {
+    console.log("edit contributions submit", values)
+  }
+
+  return (
+    <Dialog>
+      <DialogTrigger asChild>
+        <Button variant="solid" size="icon">
+          <Pencil weight="bold" />
+        </Button>
+      </DialogTrigger>
+      <DialogContent size="lg" className="bg-background">
+        <DialogHeader>
+          <DialogTitle>Edit profile</DialogTitle>
+          <DialogCloseButton />
+        </DialogHeader>
+        <FormProvider {...form}>
+          <form onSubmit={form.handleSubmit(onSubmit)}>
+            <DialogBody>
+              <Button
+                colorScheme="success"
+                type="submit"
+                disabled={!form.formState.isValid}
+              >
+                Add
+              </Button>
+            </DialogBody>
+          </form>
+        </FormProvider>
+      </DialogContent>
+    </Dialog>
+  )
+}

From a9ff7d2120b7512eb6de7781b1432874ffc483bd Mon Sep 17 00:00:00 2001
From: Dominik Stumpf <s.dominik.work@gmail.com>
Date: Wed, 31 Jul 2024 21:39:18 +0200
Subject: [PATCH 39/87] refactor: remove cartesian grid from ActivityChart

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

diff --git a/src/app/(marketing)/profile/_components/ActivityChart.tsx b/src/app/(marketing)/profile/_components/ActivityChart.tsx
index 2f2395e5a2..6bb7e2bdaf 100644
--- a/src/app/(marketing)/profile/_components/ActivityChart.tsx
+++ b/src/app/(marketing)/profile/_components/ActivityChart.tsx
@@ -6,7 +6,7 @@ import {
   ChartTooltip,
   ChartTooltipContent,
 } from "@/components/ui/Chart"
-import { Bar, BarChart, CartesianGrid, XAxis } from "recharts"
+import { Bar, BarChart, XAxis } from "recharts"
 
 const chartData = [
   { date: "2024-06-19", experience: 341 },
@@ -64,7 +64,6 @@ export function ActivityChart() {
           right: 12,
         }}
       >
-        <CartesianGrid vertical={false} />
         <XAxis
           dataKey="date"
           tickLine={false}

From fba42282e4c3cc296406f3a443bd8e380f9145ac Mon Sep 17 00:00:00 2001
From: Dominik Stumpf <s.dominik.work@gmail.com>
Date: Wed, 31 Jul 2024 21:40:57 +0200
Subject: [PATCH 40/87] refactor: reduce spacing on CheckMark

---
 src/app/(marketing)/profile/[username]/page.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/app/(marketing)/profile/[username]/page.tsx b/src/app/(marketing)/profile/[username]/page.tsx
index 2ce7313d47..678f8d5cd9 100644
--- a/src/app/(marketing)/profile/[username]/page.tsx
+++ b/src/app/(marketing)/profile/[username]/page.tsx
@@ -98,7 +98,7 @@ const Page = async ({
             </div>
             <h1 className="text-center font-bold text-4xl leading-normal tracking-tight">
               {profile.name}
-              <CheckMark className="ml-4 inline size-6 fill-yellow-500" size={24} />
+              <CheckMark className="ml-2 inline size-6 fill-yellow-500" />
             </h1>
             <div className="text-lg text-muted-foreground">@{profile.username}</div>
             <p className="mt-6 max-w-md text-pretty text-center text-lg text-muted-foreground">

From 4497b846141ae70232166669a0615d03cdf25271 Mon Sep 17 00:00:00 2001
From: BrickheadJohnny <johnny.zgen@gmail.com>
Date: Thu, 1 Aug 2024 13:14:38 +0200
Subject: [PATCH 41/87] feat(LayoutFooter): accept children

---
 .../(marketing)/profile/[username]/page.tsx   |  2 +-
 src/v2/components/Layout/Layout.tsx           | 40 ++++++++++---------
 2 files changed, 22 insertions(+), 20 deletions(-)

diff --git a/src/app/(marketing)/profile/[username]/page.tsx b/src/app/(marketing)/profile/[username]/page.tsx
index dc21fa4f42..9dc7584b3f 100644
--- a/src/app/(marketing)/profile/[username]/page.tsx
+++ b/src/app/(marketing)/profile/[username]/page.tsx
@@ -175,7 +175,7 @@ const Page = async ({
         </div>
       </LayoutMain>
       <LayoutFooter>
-        <p className="mt-24 mb-12 text-center font-medium text-muted-foreground">
+        <p className="mb-12 text-center font-medium text-muted-foreground">
           Guild Profiles are currently in invite only early access, only available to{" "}
           <Anchor
             href={"#"}
diff --git a/src/v2/components/Layout/Layout.tsx b/src/v2/components/Layout/Layout.tsx
index c5a7fe8c60..22ecfd5b3a 100644
--- a/src/v2/components/Layout/Layout.tsx
+++ b/src/v2/components/Layout/Layout.tsx
@@ -87,27 +87,29 @@ const LayoutMain = ({ children, className, ...props }: LayoutContainerProps) =>
   </LayoutContainer>
 )
 
-const LayoutFooter = ({ className, ...props }: LayoutContainerProps) => (
+const LayoutFooter = ({ className, children, ...props }: LayoutContainerProps) => (
   <LayoutContainer className={cn("mt-auto", className)} {...props} asChild>
     <footer>
-      <p className="my-8 text-center text-muted-foreground text-sm">
-        {`This website is `}
-        <Anchor
-          href="https://github.com/guildxyz/guild.xyz"
-          target="_blank"
-          showExternal
-        >
-          open source
-        </Anchor>
-        {`, and built on the `}
-        <Anchor
-          target="_blank"
-          href="https://www.npmjs.com/package/@guildxyz/sdk"
-          showExternal
-        >
-          Guild SDK
-        </Anchor>
-      </p>
+      {children || (
+        <p className="my-8 text-center text-muted-foreground text-sm">
+          {`This website is `}
+          <Anchor
+            href="https://github.com/guildxyz/guild.xyz"
+            target="_blank"
+            showExternal
+          >
+            open source
+          </Anchor>
+          {`, and built on the `}
+          <Anchor
+            target="_blank"
+            href="https://www.npmjs.com/package/@guildxyz/sdk"
+            showExternal
+          >
+            Guild SDK
+          </Anchor>
+        </p>
+      )}
     </footer>
   </LayoutContainer>
 )

From 5c2eef89c30ccd767f4e9b34ba0663b4d45554d9 Mon Sep 17 00:00:00 2001
From: Dominik Stumpf <s.dominik.work@gmail.com>
Date: Thu, 1 Aug 2024 21:22:42 +0200
Subject: [PATCH 42/87] fix: remove shadow from LevelBadge

---
 src/app/(marketing)/profile/_components/LevelBadge.tsx | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/src/app/(marketing)/profile/_components/LevelBadge.tsx b/src/app/(marketing)/profile/_components/LevelBadge.tsx
index e005d5088e..b5aee17f17 100644
--- a/src/app/(marketing)/profile/_components/LevelBadge.tsx
+++ b/src/app/(marketing)/profile/_components/LevelBadge.tsx
@@ -38,9 +38,7 @@ export const LevelBadge = ({ level, className }: LevelBadgeProps) => {
     RANKS[Math.min(Math.floor((level / MAX_LEVEL) * RANKS.length), RANKS.length - 1)]
 
   return (
-    <div
-      className={cn("relative grid size-12 place-items-center shadow-lg", className)}
-    >
+    <div className={cn("relative grid size-12 place-items-center", className)}>
       <div className="size-full rounded-full" style={{ background: rank.color }} />
       <div className="absolute select-none font-extrabold text-xl">{level}</div>
     </div>

From 47ea6acd792ae6d9ce8abb04f75c478ed4e5eea7 Mon Sep 17 00:00:00 2001
From: Dominik Stumpf <s.dominik.work@gmail.com>
Date: Thu, 1 Aug 2024 21:51:24 +0200
Subject: [PATCH 43/87] fix(css): adjust styles

---
 .../profile/_components/EditProfile.tsx       | 19 +++++++++++++------
 .../profile/_components/OperatedGuildCard.tsx |  8 ++++----
 2 files changed, 17 insertions(+), 10 deletions(-)

diff --git a/src/app/(marketing)/profile/_components/EditProfile.tsx b/src/app/(marketing)/profile/_components/EditProfile.tsx
index 019f457065..369639a664 100644
--- a/src/app/(marketing)/profile/_components/EditProfile.tsx
+++ b/src/app/(marketing)/profile/_components/EditProfile.tsx
@@ -117,7 +117,10 @@ export const EditProfile = (profile: Schemas["ProfileUpdate"]) => {
                         <Button size="icon" variant="ghost">
                           <ImageIcon weight="bold" size={24} />
                         </Button>
-                        <Separator orientation="vertical" className="h-6 w-0.5" />
+                        <Separator
+                          orientation="vertical"
+                          className="h-6 w-0.5 bg-white/50"
+                        />
                         <Button size="icon" variant="ghost">
                           <Eyedropper weight="bold" size={24} />
                         </Button>
@@ -138,7 +141,7 @@ export const EditProfile = (profile: Schemas["ProfileUpdate"]) => {
                       )}
                       {...getRootProps()}
                     >
-                      <Avatar className="size-36 bg-card-secondary">
+                      <Avatar className="size-36 bg-muted">
                         {field.value && (
                           <AvatarImage
                             src={field.value}
@@ -147,7 +150,7 @@ export const EditProfile = (profile: Schemas["ProfileUpdate"]) => {
                             alt="profile avatar"
                           />
                         )}
-                        <AvatarFallback className="bg-card-secondary">
+                        <AvatarFallback className="bg-muted">
                           <User size={38} />
                         </AvatarFallback>
                       </Avatar>
@@ -163,7 +166,7 @@ export const EditProfile = (profile: Schemas["ProfileUpdate"]) => {
                   <FormItem className="pb-2">
                     <FormLabel>Name</FormLabel>
                     <FormControl>
-                      <Input placeholder="" {...field} />
+                      <Input placeholder="" variant="muted" {...field} />
                     </FormControl>
                     <FormErrorMessage />
                   </FormItem>
@@ -176,7 +179,7 @@ export const EditProfile = (profile: Schemas["ProfileUpdate"]) => {
                   <FormItem className="pb-2">
                     <FormLabel aria-required="true">Username</FormLabel>
                     <FormControl>
-                      <Input placeholder="" required {...field} />
+                      <Input placeholder="" variant="muted" required {...field} />
                     </FormControl>
                     <FormErrorMessage />
                   </FormItem>
@@ -189,7 +192,11 @@ export const EditProfile = (profile: Schemas["ProfileUpdate"]) => {
                   <FormItem className="">
                     <FormLabel>Bio</FormLabel>
                     <FormControl>
-                      <Textarea placeholder="" className="max-h-12" {...field} />
+                      <Textarea
+                        placeholder=""
+                        className="max-h-12 bg-muted"
+                        {...field}
+                      />
                     </FormControl>
                     <FormErrorMessage />
                   </FormItem>
diff --git a/src/app/(marketing)/profile/_components/OperatedGuildCard.tsx b/src/app/(marketing)/profile/_components/OperatedGuildCard.tsx
index dae968272d..68349d03d8 100644
--- a/src/app/(marketing)/profile/_components/OperatedGuildCard.tsx
+++ b/src/app/(marketing)/profile/_components/OperatedGuildCard.tsx
@@ -8,8 +8,8 @@ import Image from "next/image"
 
 export const OperatedGuildCard = () => {
   return (
-    <Card className="flex">
-      <div className="relative w-1/3">
+    <Card className="flex flex-col sm:flex-row">
+      <div className="relative w-full sm:w-1/3">
         <div className="absolute inset-0 bg-black" />
         <Image
           className="absolute inset-0 size-full object-cover opacity-30"
@@ -18,7 +18,7 @@ export const OperatedGuildCard = () => {
           width={419}
           height={233}
         />
-        <div className="relative flex h-full flex-col items-center justify-center gap-3">
+        <div className="relative flex h-full flex-col items-center justify-center gap-3 py-8">
           <Avatar size="3xl">
             <AvatarImage
               src="https://guild.xyz/_next/image?url=https%3A%2F%2Fguild-xyz.mypinata.cloud%2Fipfs%2FQmQXeY1ZEtnLGqFPuJ4RZthYz8nKdTLhLVxBRfHGXweamx&w=256&q=70"
@@ -36,7 +36,7 @@ export const OperatedGuildCard = () => {
           </h3>
         </div>
       </div>
-      <div className="grid grow grid-cols-2 justify-stretch gap-2 px-6 py-5">
+      <div className="grid grow justify-stretch gap-2 px-6 py-5 sm:grid-cols-2">
         {Array(6).fill(
           <Card className="flex items-center gap-2 bg-secondary p-5 font-extrabold text-lg">
             <User weight="bold" className="min-w-min" />

From 95e07c358b6ac55852575d8e07d053bc1058e423 Mon Sep 17 00:00:00 2001
From: Dominik Stumpf <s.dominik.work@gmail.com>
Date: Thu, 1 Aug 2024 21:58:45 +0200
Subject: [PATCH 44/87] fix(css): add padding to OperatedGuildCard

---
 .../(marketing)/profile/_components/OperatedGuildCard.tsx | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/app/(marketing)/profile/_components/OperatedGuildCard.tsx b/src/app/(marketing)/profile/_components/OperatedGuildCard.tsx
index 68349d03d8..2918358049 100644
--- a/src/app/(marketing)/profile/_components/OperatedGuildCard.tsx
+++ b/src/app/(marketing)/profile/_components/OperatedGuildCard.tsx
@@ -8,8 +8,8 @@ import Image from "next/image"
 
 export const OperatedGuildCard = () => {
   return (
-    <Card className="flex flex-col sm:flex-row">
-      <div className="relative w-full sm:w-1/3">
+    <Card className="flex flex-col md:flex-row">
+      <div className="relative w-full px-4 py-8 md:w-1/3">
         <div className="absolute inset-0 bg-black" />
         <Image
           className="absolute inset-0 size-full object-cover opacity-30"
@@ -18,7 +18,7 @@ export const OperatedGuildCard = () => {
           width={419}
           height={233}
         />
-        <div className="relative flex h-full flex-col items-center justify-center gap-3 py-8">
+        <div className="relative flex h-full flex-col items-center justify-center gap-3">
           <Avatar size="3xl">
             <AvatarImage
               src="https://guild.xyz/_next/image?url=https%3A%2F%2Fguild-xyz.mypinata.cloud%2Fipfs%2FQmQXeY1ZEtnLGqFPuJ4RZthYz8nKdTLhLVxBRfHGXweamx&w=256&q=70"
@@ -36,7 +36,7 @@ export const OperatedGuildCard = () => {
           </h3>
         </div>
       </div>
-      <div className="grid grow justify-stretch gap-2 px-6 py-5 sm:grid-cols-2">
+      <div className="grid grow justify-stretch gap-2 px-6 py-5 md:grid-cols-2">
         {Array(6).fill(
           <Card className="flex items-center gap-2 bg-secondary p-5 font-extrabold text-lg">
             <User weight="bold" className="min-w-min" />

From 28946abf05f2d573344159e5cb6ef90ce73fb7d0 Mon Sep 17 00:00:00 2001
From: Dominik Stumpf <s.dominik.work@gmail.com>
Date: Thu, 1 Aug 2024 22:20:54 +0200
Subject: [PATCH 45/87] fix(css): adjust styles to design

---
 src/app/(marketing)/profile/_components/EditContributions.tsx | 2 +-
 src/app/(marketing)/profile/_components/RecentActivity.tsx    | 1 +
 src/v2/components/ui/Textarea.tsx                             | 2 +-
 3 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/app/(marketing)/profile/_components/EditContributions.tsx b/src/app/(marketing)/profile/_components/EditContributions.tsx
index 0c7421f956..f15518f2cf 100644
--- a/src/app/(marketing)/profile/_components/EditContributions.tsx
+++ b/src/app/(marketing)/profile/_components/EditContributions.tsx
@@ -33,7 +33,7 @@ export const EditContributions = (
   return (
     <Dialog>
       <DialogTrigger asChild>
-        <Button variant="solid" size="icon">
+        <Button variant="solid" size="icon" className="rounded-full">
           <Pencil weight="bold" />
         </Button>
       </DialogTrigger>
diff --git a/src/app/(marketing)/profile/_components/RecentActivity.tsx b/src/app/(marketing)/profile/_components/RecentActivity.tsx
index d8b2cba7ba..6139cd8749 100644
--- a/src/app/(marketing)/profile/_components/RecentActivity.tsx
+++ b/src/app/(marketing)/profile/_components/RecentActivity.tsx
@@ -17,6 +17,7 @@ export const RecentActivity = () => {
       <ToggleGroup
         type="single"
         variant="primary"
+        size="sm"
         className="mb-4 gap-1.5"
         onValueChange={(value) =>
           value && setActivityFilter(value as (typeof ACTIVITY_FILTERS)[number])
diff --git a/src/v2/components/ui/Textarea.tsx b/src/v2/components/ui/Textarea.tsx
index 2ece3b6fff..7565514d0c 100644
--- a/src/v2/components/ui/Textarea.tsx
+++ b/src/v2/components/ui/Textarea.tsx
@@ -10,7 +10,7 @@ const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
     return (
       <textarea
         className={cn(
-          "flex min-h-[80px] w-full rounded-md border border-input bg-card-secondary px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+          "flex min-h-[80px] w-full rounded-lg border border-input bg-card-secondary px-3 py-2 placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
           className
         )}
         ref={ref}

From 066771bacf4d920ef9d59a16493effc1b1af5c28 Mon Sep 17 00:00:00 2001
From: Dominik Stumpf <s.dominik.work@gmail.com>
Date: Mon, 5 Aug 2024 21:38:05 +0200
Subject: [PATCH 46/87] chore: move profile to csr only temporarily

---
 .../(marketing)/profile/[username]/atoms.ts   |  5 ++
 .../(marketing)/profile/[username]/page.tsx   | 78 ++++++++++++-------
 .../profile/_components/ProfileSkeleton.tsx   | 70 +++++++++++++++++
 3 files changed, 124 insertions(+), 29 deletions(-)
 create mode 100644 src/app/(marketing)/profile/[username]/atoms.ts
 create mode 100644 src/app/(marketing)/profile/_components/ProfileSkeleton.tsx

diff --git a/src/app/(marketing)/profile/[username]/atoms.ts b/src/app/(marketing)/profile/[username]/atoms.ts
new file mode 100644
index 0000000000..58df821496
--- /dev/null
+++ b/src/app/(marketing)/profile/[username]/atoms.ts
@@ -0,0 +1,5 @@
+import { Schemas } from "@guildxyz/types"
+import { atom } from "jotai"
+
+// TODO: assertion here prevents WritableAtom type error, handle uninitialized atom with proper types
+export const profileAtom = atom(undefined as unknown as Schemas["Profile"])
diff --git a/src/app/(marketing)/profile/[username]/page.tsx b/src/app/(marketing)/profile/[username]/page.tsx
index 9dc7584b3f..37b0f59f0f 100644
--- a/src/app/(marketing)/profile/[username]/page.tsx
+++ b/src/app/(marketing)/profile/[username]/page.tsx
@@ -1,3 +1,5 @@
+"use client"
+
 import { CheckMark } from "@/components/CheckMark"
 import { Header } from "@/components/Header"
 import {
@@ -18,6 +20,10 @@ import { Separator } from "@/components/ui/Separator"
 import { Skeleton } from "@/components/ui/Skeleton"
 import { Schemas } from "@guildxyz/types"
 import { ArrowRight } from "@phosphor-icons/react/dist/ssr"
+import { useAtom } from "jotai"
+import { useEffect } from "react"
+import useSWR from "swr"
+import { fetcherForSWR } from "utils/fetcher"
 import { ActivityChart } from "../_components/ActivityChart"
 import { CircularProgressBar } from "../_components/CircularProgressBar"
 import { ContributionCard } from "../_components/ContributionCard"
@@ -25,42 +31,56 @@ import { EditContributions } from "../_components/EditContributions"
 import { EditProfile } from "../_components/EditProfile"
 import { LevelBadge } from "../_components/LevelBadge"
 import { OperatedGuildCard } from "../_components/OperatedGuildCard"
+import { ProfileSkeleton } from "../_components/ProfileSkeleton"
 import { RecentActivity } from "../_components/RecentActivity"
+import { profileAtom } from "./atoms"
 
-async function getProfileData(username: string) {
-  const req = `https://api.guild.xyz/v2/profiles/${username}`
-  try {
-    const res = await fetch(req)
-    if (!res.ok) {
-      throw new Error("Failed to fetch profile data")
-    }
-    return res.json() as Promise<Schemas["Profile"]>
-  } catch (e) {
-    // mocking for the time being if fetch fails
-    console.error(e)
-    const res = {
-      id: 4,
-      userId: 6027190,
-      username: "durumm",
-      name: "durum",
-      bio: null,
-      profileImageUrl:
-        "https://guild-xyz.mypinata.cloud/ipfs/QmWGdo6FkjSz22oDZFMJysx3hGKoVqtzTWVMx9tTSP7jvi",
-      backgroundImageUrl: null,
-      createdAt: "2024-07-25T10:04:20.781Z",
-      updatedAt: "2024-07-25T10:04:20.781Z",
-    }
-    return res
-  }
-}
+// async function getProfileData(username: string) {
+//   const req = `https://api.guild.xyz/v2/profiles/${username}`
+//   try {
+//     const res = await fetch(req)
+//     if (!res.ok) {
+//       throw new Error("Failed to fetch profile data")
+//     }
+//     return res.json() as Promise<Schemas["Profile"]>
+//   } catch (e) {
+//     // mocking for the time being if fetch fails
+//     console.error(e)
+//     const res = {
+//       id: 4,
+//       userId: 6027190,
+//       username: "durumm",
+//       name: "durum",
+//       bio: null,
+//       profileImageUrl:
+//         "https://guild-xyz.mypinata.cloud/ipfs/QmWGdo6FkjSz22oDZFMJysx3hGKoVqtzTWVMx9tTSP7jvi",
+//       backgroundImageUrl: null,
+//       createdAt: "2024-07-25T10:04:20.781Z",
+//       updatedAt: "2024-07-25T10:04:20.781Z",
+//     }
+//     return res
+//   }
+// }
 
-const Page = async ({
+const Page = ({
   params: { username },
 }: {
   params: { username: string }
 }) => {
-  const profile = await getProfileData(username)
-  const level = 50
+  const { data: fetchedProfile, isLoading } = useSWR<Schemas["Profile"]>(
+    `/v2/profiles/${username}`,
+    fetcherForSWR
+  )
+  const [profile, setProfile] = useAtom(profileAtom)
+  const level = 0
+
+  useEffect(() => {
+    setProfile(fetchedProfile)
+  }, [fetchedProfile, setProfile])
+
+  if (!profile || isLoading) {
+    return <ProfileSkeleton />
+  }
 
   return (
     <Layout>
diff --git a/src/app/(marketing)/profile/_components/ProfileSkeleton.tsx b/src/app/(marketing)/profile/_components/ProfileSkeleton.tsx
new file mode 100644
index 0000000000..dd91d0f3e0
--- /dev/null
+++ b/src/app/(marketing)/profile/_components/ProfileSkeleton.tsx
@@ -0,0 +1,70 @@
+import { Header } from "@/components/Header"
+import { Layout, LayoutBanner, LayoutHero, LayoutMain } from "@/components/Layout"
+import { Card } from "@/components/ui/Card"
+import { Separator } from "@/components/ui/Separator"
+import { Skeleton } from "@/components/ui/Skeleton"
+
+export const ProfileSkeleton = () => {
+  return (
+    <Layout>
+      <LayoutHero>
+        <Header />
+        <LayoutBanner className="-bottom-[500px]">
+          <div className="absolute inset-0 bg-[url('/banner.svg')] opacity-10" />
+          <div className="absolute inset-0 bg-gradient-to-t from-background" />
+        </LayoutBanner>
+      </LayoutHero>
+      <LayoutMain>
+        <div className="mt-24">
+          <div className="relative mb-24 flex flex-col items-center">
+            <div className="relative mb-12 flex items-center justify-center">
+              <Skeleton className="size-48 rounded-full" />
+            </div>
+            <Skeleton className="my-2 h-8 w-96" />
+            <div className="text-lg text-muted-foreground"></div>
+            <p className="mt-6 max-w-md text-pretty text-center text-lg text-muted-foreground"></p>
+            <div className="mt-8 grid grid-cols-[repeat(3,auto)] gap-x-8 gap-y-6 sm:grid-cols-[repeat(5,auto)]">
+              <div className="flex flex-col items-center leading-tight">
+                <Skeleton className="mb-2 h-5 w-16" />
+                <Skeleton className="h-6 w-20" />
+              </div>
+              <Separator orientation="vertical" className="h-12" />
+              <div className="flex flex-col items-center leading-tight">
+                <Skeleton className="mb-2 h-5 w-16" />
+                <Skeleton className="h-6 w-20" />
+              </div>
+              <Separator orientation="vertical" className="hidden h-12 sm:block" />
+              <div className="col-span-3 flex items-center gap-2 place-self-center sm:col-span-1">
+                <Skeleton className="mb-1 h-12 w-32" />
+              </div>
+            </div>
+          </div>
+          <Skeleton className="mb-3 h-8 w-40" />
+          <div className="mb-16 grid grid-cols-1 gap-3 md:grid-cols-2">
+            <Card>
+              <Skeleton className="size-full h-44" />
+            </Card>
+            <Card>
+              <Skeleton className="size-full" />
+            </Card>
+          </div>
+          <Skeleton className="mb-3 h-8 w-40" />
+          <div className="mb-16 grid grid-cols-1 gap-3 md:grid-cols-2">
+            <Card>
+              <Skeleton className="size-full h-44" />
+            </Card>
+            <Card>
+              <Skeleton className="size-full h-44" />
+            </Card>
+            <Card>
+              <Skeleton className="size-full h-44" />
+            </Card>
+            <Card>
+              <Skeleton className="size-full" />
+            </Card>
+          </div>
+        </div>
+      </LayoutMain>
+    </Layout>
+  )
+}

From 64276c895d7dd660ae3603c42bd06098e1a3c598 Mon Sep 17 00:00:00 2001
From: valid <valid@zgen.hu>
Date: Tue, 6 Aug 2024 15:04:03 +0200
Subject: [PATCH 47/87] UI(EditContributions): smaller button

---
 .../(marketing)/profile/_components/EditContributions.tsx   | 6 +++---
 src/v2/components/ui/Button.tsx                             | 1 +
 2 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/src/app/(marketing)/profile/_components/EditContributions.tsx b/src/app/(marketing)/profile/_components/EditContributions.tsx
index f15518f2cf..91c2d27c52 100644
--- a/src/app/(marketing)/profile/_components/EditContributions.tsx
+++ b/src/app/(marketing)/profile/_components/EditContributions.tsx
@@ -12,7 +12,7 @@ import {
 // import { profileSchema } from "@/lib/validations/profileSchema"
 import { Schemas } from "@guildxyz/types"
 // import { zodResolver } from "@hookform/resolvers/zod"
-import { Pencil } from "@phosphor-icons/react"
+import { PencilSimple } from "@phosphor-icons/react"
 import { FormProvider, useForm } from "react-hook-form"
 
 export const EditContributions = (
@@ -33,8 +33,8 @@ export const EditContributions = (
   return (
     <Dialog>
       <DialogTrigger asChild>
-        <Button variant="solid" size="icon" className="rounded-full">
-          <Pencil weight="bold" />
+        <Button variant="solid" size="icon-sm" className="rounded-full">
+          <PencilSimple weight="bold" />
         </Button>
       </DialogTrigger>
       <DialogContent size="lg" className="bg-background">
diff --git a/src/v2/components/ui/Button.tsx b/src/v2/components/ui/Button.tsx
index af798f8d07..4bf9a750dc 100644
--- a/src/v2/components/ui/Button.tsx
+++ b/src/v2/components/ui/Button.tsx
@@ -37,6 +37,7 @@ const buttonVariants = cva(
         md: "h-11 px-4 py-2",
         lg: "h-12 px-6 py-4 text-lg",
         xl: "h-14 px-6 py-4 text-lg gap-2",
+        "icon-sm": "h-8 w-8",
         icon: "h-10 w-10",
       },
     },

From 831a53997e4b3ade93415b2f5966bf9339e4262a Mon Sep 17 00:00:00 2001
From: valid <valid@zgen.hu>
Date: Tue, 6 Aug 2024 19:39:31 +0200
Subject: [PATCH 48/87] UI(EditProfile): adjust borders

---
 .../profile/_components/EditProfile.tsx       | 45 +++++++++++--------
 1 file changed, 27 insertions(+), 18 deletions(-)

diff --git a/src/app/(marketing)/profile/_components/EditProfile.tsx b/src/app/(marketing)/profile/_components/EditProfile.tsx
index 369639a664..eb11620064 100644
--- a/src/app/(marketing)/profile/_components/EditProfile.tsx
+++ b/src/app/(marketing)/profile/_components/EditProfile.tsx
@@ -87,20 +87,20 @@ export const EditProfile = (profile: Schemas["ProfileUpdate"]) => {
           Edit profile
         </Button>
       </DialogTrigger>
-      <DialogContent size="lg" className="bg-background">
-        <DialogHeader>
-          <DialogTitle>Edit profile</DialogTitle>
-          <DialogCloseButton />
-        </DialogHeader>
-        <FormProvider {...form}>
-          <form onSubmit={form.handleSubmit(onSubmit)}>
-            <DialogBody>
+      <FormProvider {...form}>
+        <form onSubmit={form.handleSubmit(onSubmit)}>
+          <DialogContent size="lg" className="bg-background" scrollBody>
+            <DialogHeader>
+              <DialogTitle>Edit profile</DialogTitle>
+              <DialogCloseButton />
+            </DialogHeader>
+            <DialogBody scroll>
               <div className="relative mb-20">
                 <FormField
                   control={form.control}
                   name="backgroundImageUrl"
                   render={({ field }) => (
-                    <FormItem className="relative flex h-32 items-center justify-center overflow-hidden rounded-xl border">
+                    <FormItem className="relative flex h-32 items-center justify-center overflow-hidden rounded-xl">
                       <div className="absolute inset-0 size-full">
                         {field.value ? (
                           <Image
@@ -136,7 +136,7 @@ export const EditProfile = (profile: Schemas["ProfileUpdate"]) => {
                       variant="unstyled"
                       type="button"
                       className={cn(
-                        "-bottom-2 absolute left-4 size-28 translate-y-1/2 rounded-full border-2 border-dotted",
+                        "-bottom-2 absolute left-4 size-28 translate-y-1/2 rounded-full border border-dotted",
                         { "border-solid": field.value }
                       )}
                       {...getRootProps()}
@@ -189,7 +189,7 @@ export const EditProfile = (profile: Schemas["ProfileUpdate"]) => {
                 control={form.control}
                 name="bio"
                 render={({ field }) => (
-                  <FormItem className="">
+                  <FormItem>
                     <FormLabel>Bio</FormLabel>
                     <FormControl>
                       <Textarea
@@ -202,11 +202,20 @@ export const EditProfile = (profile: Schemas["ProfileUpdate"]) => {
                   </FormItem>
                 )}
               />
+              <Separator className="mt-8 mb-4" />
+              <div>
+                <p className="mb-2 font-medium">Danger zone</p>
+                <Button
+                  variant="subtle"
+                  colorScheme="destructive"
+                  type="submit"
+                  size="sm"
+                >
+                  Delete profile
+                </Button>
+              </div>
             </DialogBody>
-            <DialogFooter>
-              <Button colorScheme="destructive" type="submit">
-                Delete profile
-              </Button>
+            <DialogFooter className="pt-5 pb-7">
               <Button
                 colorScheme="success"
                 type="submit"
@@ -215,9 +224,9 @@ export const EditProfile = (profile: Schemas["ProfileUpdate"]) => {
                 Save
               </Button>
             </DialogFooter>
-          </form>
-        </FormProvider>
-      </DialogContent>
+          </DialogContent>
+        </form>
+      </FormProvider>
     </Dialog>
   )
 }

From d13a28dcec469a72deec30e296ad190a3c93e5d1 Mon Sep 17 00:00:00 2001
From: valid <valid@zgen.hu>
Date: Tue, 6 Aug 2024 19:41:54 +0200
Subject: [PATCH 49/87] UI(Dialog): default footer styles

---
 src/v2/components/ui/Dialog.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/v2/components/ui/Dialog.tsx b/src/v2/components/ui/Dialog.tsx
index 8b4ee7888d..bbf3c85a82 100644
--- a/src/v2/components/ui/Dialog.tsx
+++ b/src/v2/components/ui/Dialog.tsx
@@ -128,7 +128,7 @@ DialogBody.displayName = "DialogBody"
 const DialogFooter = ({ className, ...props }: HTMLAttributes<HTMLDivElement>) => (
   <div
     className={cn(
-      "flex flex-col-reverse px-6 pt-8 pb-10 sm:flex-row sm:justify-end sm:space-x-2 sm:px-10",
+      "flex flex-row justify-end space-x-2 px-6 pt-8 pb-10 sm:px-10",
       className
     )}
     {...props}

From 7a47fed48aae92b088759b8f72a69fa5a9c0313f Mon Sep 17 00:00:00 2001
From: valid <valid@zgen.hu>
Date: Tue, 6 Aug 2024 19:42:43 +0200
Subject: [PATCH 50/87] cleanup: move const out of render function

---
 src/app/(marketing)/profile/_components/RecentActivity.tsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/app/(marketing)/profile/_components/RecentActivity.tsx b/src/app/(marketing)/profile/_components/RecentActivity.tsx
index 6139cd8749..804f2c3433 100644
--- a/src/app/(marketing)/profile/_components/RecentActivity.tsx
+++ b/src/app/(marketing)/profile/_components/RecentActivity.tsx
@@ -7,8 +7,9 @@ import { ToggleGroup, ToggleGroupItem } from "@/components/ui/ToggleGroup"
 import { Circle, Rocket } from "@phosphor-icons/react"
 import { useState } from "react"
 
+const ACTIVITY_FILTERS = ["All", "Editing", "Join", "NFTs"] as const
+
 export const RecentActivity = () => {
-  const ACTIVITY_FILTERS = ["All", "Editing", "Join", "NFTs"] as const
   const [activityFilter, setActivityFilter] =
     useState<(typeof ACTIVITY_FILTERS)[number]>("All")
 

From 2d752392ecd2aa3b611ec02df99a1599a9910933 Mon Sep 17 00:00:00 2001
From: valid <valid@zgen.hu>
Date: Tue, 6 Aug 2024 20:39:17 +0200
Subject: [PATCH 51/87] =?UTF-8?q?remove=20rechart=20&=C2=A0Experience=20se?=
 =?UTF-8?q?ction?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package-lock.json                             | 142 -------
 package.json                                  |   1 -
 .../(marketing)/profile/[username]/page.tsx   |   8 +-
 .../profile/_components/ActivityChart.tsx     | 100 -----
 .../_components/CircularProgressBar.tsx       |  30 +-
 src/v2/components/ui/Chart.tsx                | 351 ------------------
 6 files changed, 4 insertions(+), 628 deletions(-)
 delete mode 100644 src/app/(marketing)/profile/_components/ActivityChart.tsx
 delete mode 100644 src/v2/components/ui/Chart.tsx

diff --git a/package-lock.json b/package-lock.json
index d65e092fb6..7290570e88 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -99,7 +99,6 @@
         "react-markdown": "^8.0.7",
         "react-papaparse": "^4.4.0",
         "react-window": "^1.8.8",
-        "recharts": "^2.13.0-alpha.4",
         "remark-gfm": "^4.0.0",
         "slugify": "^1.6.5",
         "swr": "^2.2.4",
@@ -12807,11 +12806,6 @@
       "resolved": "https://registry.npmjs.org/@types/d3-delaunay/-/d3-delaunay-6.0.1.tgz",
       "integrity": "sha512-tLxQ2sfT0p6sxdG75c6f/ekqxjyYR0+LwPrsO1mbC9YDBzPJhs2HbJJRrn8Ez1DBoHRo2yx7YEATI+8V1nGMnQ=="
     },
-    "node_modules/@types/d3-ease": {
-      "version": "3.0.2",
-      "resolved": "https://registry.npmjs.org/@types/d3-ease/-/d3-ease-3.0.2.tgz",
-      "integrity": "sha512-NcV1JjO5oDzoK26oMzbILE6HW7uVXOHLQvHshBUW4UMdZGfiY6v5BeQwh9a9tCzv+CeefZQHJt5SRgK154RtiA=="
-    },
     "node_modules/@types/d3-format": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/@types/d3-format/-/d3-format-3.0.1.tgz",
@@ -12864,11 +12858,6 @@
       "resolved": "https://registry.npmjs.org/@types/d3-time-format/-/d3-time-format-2.1.0.tgz",
       "integrity": "sha512-/myT3I7EwlukNOX2xVdMzb8FRgNzRMpsZddwst9Ld/VFe6LyJyRp0s32l/V9XoUzk+Gqu56F/oGk6507+8BxrA=="
     },
-    "node_modules/@types/d3-timer": {
-      "version": "3.0.2",
-      "resolved": "https://registry.npmjs.org/@types/d3-timer/-/d3-timer-3.0.2.tgz",
-      "integrity": "sha512-Ps3T8E8dZDam6fUyNiMkekK3XUsaUEik+idO9/YjPtfj2qruF8tFBXS7XhtE4iIXBLxhmLjP3SXpLhVf21I9Lw=="
-    },
     "node_modules/@types/d3-voronoi": {
       "version": "1.1.12",
       "resolved": "https://registry.npmjs.org/@types/d3-voronoi/-/d3-voronoi-1.1.12.tgz",
@@ -18398,14 +18387,6 @@
         "node": ">=12"
       }
     },
-    "node_modules/d3-ease": {
-      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/d3-ease/-/d3-ease-3.0.1.tgz",
-      "integrity": "sha512-wR/XK3D3XcLIZwpbvQwQ5fK+8Ykds1ip7A2Txe0yxncXSdq1L9skcG7blcedkOX+ZcgxGAmLX1FrRGbADwzi0w==",
-      "engines": {
-        "node": ">=12"
-      }
-    },
     "node_modules/d3-format": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/d3-format/-/d3-format-3.1.0.tgz",
@@ -18491,14 +18472,6 @@
         "node": ">=12"
       }
     },
-    "node_modules/d3-timer": {
-      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/d3-timer/-/d3-timer-3.0.1.tgz",
-      "integrity": "sha512-ndfJ/JxxMd3nw31uyKoY2naivF+r29V+Lc0svZxe1JvvIRmi8hUsrMvdOwgS1o6uBHmiz91geQ0ylPP0aj1VUA==",
-      "engines": {
-        "node": ">=12"
-      }
-    },
     "node_modules/d3-voronoi": {
       "version": "1.1.4",
       "resolved": "https://registry.npmjs.org/d3-voronoi/-/d3-voronoi-1.1.4.tgz",
@@ -18599,11 +18572,6 @@
       "resolved": "https://registry.npmjs.org/decimal.js/-/decimal.js-10.4.3.tgz",
       "integrity": "sha512-VBBaLc1MgL5XpzgIP7ny5Z6Nx3UrRkIViUkPUdtl9aya5amy3De1gsUUSB1g3+3sExYNjCAsAznmukyxCb1GRA=="
     },
-    "node_modules/decimal.js-light": {
-      "version": "2.5.1",
-      "resolved": "https://registry.npmjs.org/decimal.js-light/-/decimal.js-light-2.5.1.tgz",
-      "integrity": "sha512-qIMFpTMZmny+MMIitAB6D7iVPEorVw6YQRWkvarTkT4tBeSLLiHzcwj6q0MmYSFCiVpiqPJTJEYIrpcPzVEIvg=="
-    },
     "node_modules/decode-named-character-reference": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/decode-named-character-reference/-/decode-named-character-reference-1.0.2.tgz",
@@ -19873,14 +19841,6 @@
       "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
       "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q=="
     },
-    "node_modules/fast-equals": {
-      "version": "5.0.1",
-      "resolved": "https://registry.npmjs.org/fast-equals/-/fast-equals-5.0.1.tgz",
-      "integrity": "sha512-WF1Wi8PwwSY7/6Kx0vKXtw8RwuSGoM1bvDaJbu7MxDlR1vovZjIAKrnzyrThgAjm6JDTu0fVgWXDlMGspodfoQ==",
-      "engines": {
-        "node": ">=6.0.0"
-      }
-    },
     "node_modules/fast-glob": {
       "version": "3.3.2",
       "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.3.2.tgz",
@@ -28384,20 +28344,6 @@
         "react-dom": "^16.8.0 || ^17 || ^18"
       }
     },
-    "node_modules/react-smooth": {
-      "version": "4.0.1",
-      "resolved": "https://registry.npmjs.org/react-smooth/-/react-smooth-4.0.1.tgz",
-      "integrity": "sha512-OE4hm7XqR0jNOq3Qmk9mFLyd6p2+j6bvbPJ7qlB7+oo0eNcL2l7WQzG6MBnT3EXY6xzkLMUBec3AfewJdA0J8w==",
-      "dependencies": {
-        "fast-equals": "^5.0.1",
-        "prop-types": "^15.8.1",
-        "react-transition-group": "^4.4.5"
-      },
-      "peerDependencies": {
-        "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
-        "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
-      }
-    },
     "node_modules/react-style-singleton": {
       "version": "2.2.1",
       "resolved": "https://registry.npmjs.org/react-style-singleton/-/react-style-singleton-2.2.1.tgz",
@@ -28649,46 +28595,6 @@
         "node": ">=0.10.0"
       }
     },
-    "node_modules/recharts": {
-      "version": "2.13.0-alpha.4",
-      "resolved": "https://registry.npmjs.org/recharts/-/recharts-2.13.0-alpha.4.tgz",
-      "integrity": "sha512-K9naL6F7pEcDYJE6yFQASSCQecSLPP0JagnvQ9hPtA/aHgsxsnIOjouLP5yrFZehxzfCkV5TEORr7/uNtSr7Qw==",
-      "dependencies": {
-        "clsx": "^2.0.0",
-        "eventemitter3": "^4.0.1",
-        "lodash": "^4.17.21",
-        "react-is": "^18.3.1",
-        "react-smooth": "^4.0.0",
-        "recharts-scale": "^0.4.4",
-        "tiny-invariant": "^1.3.1",
-        "victory-vendor": "^36.6.8"
-      },
-      "engines": {
-        "node": ">=14"
-      },
-      "peerDependencies": {
-        "react": "^16.0.0 || ^17.0.0 || ^18.0.0",
-        "react-dom": "^16.0.0 || ^17.0.0 || ^18.0.0"
-      }
-    },
-    "node_modules/recharts-scale": {
-      "version": "0.4.5",
-      "resolved": "https://registry.npmjs.org/recharts-scale/-/recharts-scale-0.4.5.tgz",
-      "integrity": "sha512-kivNFO+0OcUNu7jQquLXAxz1FIwZj8nrj+YkOKc5694NbjCvcT6aSZiIzNzd2Kul4o4rTto8QVR9lMNtxD4G1w==",
-      "dependencies": {
-        "decimal.js-light": "^2.4.1"
-      }
-    },
-    "node_modules/recharts/node_modules/eventemitter3": {
-      "version": "4.0.7",
-      "resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-4.0.7.tgz",
-      "integrity": "sha512-8guHBZCwKnFhYdHr2ysuRWErTwhoN2X8XELRlrRwpmfeY2jjuUN4taQMsULKUVo1K4DvZl+0pgfyoysHxvmvEw=="
-    },
-    "node_modules/recharts/node_modules/react-is": {
-      "version": "18.3.1",
-      "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.3.1.tgz",
-      "integrity": "sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg=="
-    },
     "node_modules/redent": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/redent/-/redent-3.0.0.tgz",
@@ -32772,54 +32678,6 @@
         "url": "https://opencollective.com/unified"
       }
     },
-    "node_modules/victory-vendor": {
-      "version": "36.9.2",
-      "resolved": "https://registry.npmjs.org/victory-vendor/-/victory-vendor-36.9.2.tgz",
-      "integrity": "sha512-PnpQQMuxlwYdocC8fIJqVXvkeViHYzotI+NJrCuav0ZYFoq912ZHBk3mCeuj+5/VpodOjPe1z0Fk2ihgzlXqjQ==",
-      "dependencies": {
-        "@types/d3-array": "^3.0.3",
-        "@types/d3-ease": "^3.0.0",
-        "@types/d3-interpolate": "^3.0.1",
-        "@types/d3-scale": "^4.0.2",
-        "@types/d3-shape": "^3.1.0",
-        "@types/d3-time": "^3.0.0",
-        "@types/d3-timer": "^3.0.0",
-        "d3-array": "^3.1.6",
-        "d3-ease": "^3.0.1",
-        "d3-interpolate": "^3.0.1",
-        "d3-scale": "^4.0.2",
-        "d3-shape": "^3.1.0",
-        "d3-time": "^3.0.0",
-        "d3-timer": "^3.0.1"
-      }
-    },
-    "node_modules/victory-vendor/node_modules/@types/d3-shape": {
-      "version": "3.1.6",
-      "resolved": "https://registry.npmjs.org/@types/d3-shape/-/d3-shape-3.1.6.tgz",
-      "integrity": "sha512-5KKk5aKGu2I+O6SONMYSNflgiP0WfZIQvVUMan50wHsLG1G94JlxEVnCpQARfTtzytuY0p/9PXXZb3I7giofIA==",
-      "dependencies": {
-        "@types/d3-path": "*"
-      }
-    },
-    "node_modules/victory-vendor/node_modules/d3-path": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/d3-path/-/d3-path-3.1.0.tgz",
-      "integrity": "sha512-p3KP5HCf/bvjBSSKuXid6Zqijx7wIfNW+J/maPs+iwR35at5JCbLUT0LzF1cnjbCHWhqzQTIN2Jpe8pRebIEFQ==",
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/victory-vendor/node_modules/d3-shape": {
-      "version": "3.2.0",
-      "resolved": "https://registry.npmjs.org/d3-shape/-/d3-shape-3.2.0.tgz",
-      "integrity": "sha512-SaLBuwGm3MOViRq2ABk3eLoxwZELpH6zhl3FbAoJ7Vm1gofKx6El1Ib5z23NUEhF9AsGl7y+dzLe5Cw2AArGTA==",
-      "dependencies": {
-        "d3-path": "^3.1.0"
-      },
-      "engines": {
-        "node": ">=12"
-      }
-    },
     "node_modules/viem": {
       "version": "2.17.4",
       "resolved": "https://registry.npmjs.org/viem/-/viem-2.17.4.tgz",
diff --git a/package.json b/package.json
index 1490b56721..3a9d24e52a 100644
--- a/package.json
+++ b/package.json
@@ -111,7 +111,6 @@
     "react-markdown": "^8.0.7",
     "react-papaparse": "^4.4.0",
     "react-window": "^1.8.8",
-    "recharts": "^2.13.0-alpha.4",
     "remark-gfm": "^4.0.0",
     "slugify": "^1.6.5",
     "swr": "^2.2.4",
diff --git a/src/app/(marketing)/profile/[username]/page.tsx b/src/app/(marketing)/profile/[username]/page.tsx
index 37b0f59f0f..e72aaaee88 100644
--- a/src/app/(marketing)/profile/[username]/page.tsx
+++ b/src/app/(marketing)/profile/[username]/page.tsx
@@ -12,10 +12,7 @@ import {
 import { Anchor } from "@/components/ui/Anchor"
 import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/Avatar"
 import { AvatarGroup } from "@/components/ui/AvatarGroup"
-import { Badge } from "@/components/ui/Badge"
 import { Button } from "@/components/ui/Button"
-import { Card } from "@/components/ui/Card"
-import { Progress } from "@/components/ui/Progress"
 import { Separator } from "@/components/ui/Separator"
 import { Skeleton } from "@/components/ui/Skeleton"
 import { Schemas } from "@guildxyz/types"
@@ -24,7 +21,6 @@ import { useAtom } from "jotai"
 import { useEffect } from "react"
 import useSWR from "swr"
 import { fetcherForSWR } from "utils/fetcher"
-import { ActivityChart } from "../_components/ActivityChart"
 import { CircularProgressBar } from "../_components/CircularProgressBar"
 import { ContributionCard } from "../_components/ContributionCard"
 import { EditContributions } from "../_components/EditContributions"
@@ -144,7 +140,7 @@ const Page = ({
               </div>
             </div>
           </div>
-          <h2 className="mb-3 font-bold text-lg">Experience</h2>
+          {/* <h2 className="mb-3 font-bold text-lg">Experience</h2>
           <div className="mb-16 grid grid-cols-1 gap-3 md:grid-cols-2">
             <Card className="p-6">
               <div className="grid grid-cols-[auto_1fr] grid-rows-[auto_auto_auto] items-center gap-x-3 gap-y-2">
@@ -170,7 +166,7 @@ const Page = ({
               </div>
               <ActivityChart />
             </Card>
-          </div>
+          </div> */}
           <h2 className="mb-3 font-bold text-lg">Operated guilds</h2>
           <OperatedGuildCard />
           <div className="mt-8 mb-3 flex items-center justify-between">
diff --git a/src/app/(marketing)/profile/_components/ActivityChart.tsx b/src/app/(marketing)/profile/_components/ActivityChart.tsx
deleted file mode 100644
index 6bb7e2bdaf..0000000000
--- a/src/app/(marketing)/profile/_components/ActivityChart.tsx
+++ /dev/null
@@ -1,100 +0,0 @@
-"use client"
-
-import {
-  ChartConfig,
-  ChartContainer,
-  ChartTooltip,
-  ChartTooltipContent,
-} from "@/components/ui/Chart"
-import { Bar, BarChart, XAxis } from "recharts"
-
-const chartData = [
-  { date: "2024-06-19", experience: 341 },
-  { date: "2024-06-20", experience: 408 },
-  { date: "2024-06-21", experience: 169 },
-  { date: "2024-06-22", experience: 317 },
-  { date: "2024-06-23", experience: 480 },
-  { date: "2024-06-24", experience: 132 },
-  { date: "2024-06-25", experience: 141 },
-  { date: "2024-06-26", experience: 434 },
-  { date: "2024-06-13", experience: 81 },
-  { date: "2024-06-14", experience: 426 },
-  { date: "2024-06-15", experience: 307 },
-  { date: "2024-06-16", experience: 371 },
-  { date: "2024-06-17", experience: 475 },
-  { date: "2024-06-18", experience: 107 },
-  { date: "2024-06-19", experience: 341 },
-  { date: "2024-06-20", experience: 408 },
-  { date: "2024-06-21", experience: 169 },
-  { date: "2024-06-22", experience: 317 },
-  { date: "2024-06-23", experience: 480 },
-  { date: "2024-06-24", experience: 132 },
-  { date: "2024-06-25", experience: 141 },
-  { date: "2024-06-26", experience: 434 },
-  { date: "2024-06-27", experience: 448 },
-  { date: "2024-06-28", experience: 149 },
-  { date: "2024-06-29", experience: 103 },
-  { date: "2024-06-30", experience: 446 },
-  { date: "2024-06-24", experience: 132 },
-  { date: "2024-06-25", experience: 141 },
-  { date: "2024-06-26", experience: 434 },
-  { date: "2024-06-27", experience: 448 },
-  { date: "2024-06-28", experience: 149 },
-  { date: "2024-06-29", experience: 103 },
-  { date: "2024-06-30", experience: 446 },
-]
-const chartConfig = {
-  views: {
-    label: "Gained XP",
-  },
-  experience: {
-    label: "experience",
-    color: "hsl(var(--primary))",
-  },
-} satisfies ChartConfig
-
-export function ActivityChart() {
-  return (
-    <ChartContainer config={chartConfig} className="aspect-auto h-[65px] w-full">
-      <BarChart
-        accessibilityLayer
-        data={chartData}
-        margin={{
-          left: 12,
-          right: 12,
-        }}
-      >
-        <XAxis
-          dataKey="date"
-          tickLine={false}
-          axisLine={false}
-          tick={false}
-          height={0}
-          tickFormatter={(value) => {
-            const date = new Date(value)
-            return date.toLocaleDateString("en-US", {
-              month: "short",
-              day: "numeric",
-            })
-          }}
-        />
-        <ChartTooltip
-          content={
-            <ChartTooltipContent
-              className="w-[150px]"
-              nameKey="views"
-              labelFormatter={(value) => {
-                return new Date(value).toLocaleDateString("en-US", {
-                  month: "short",
-                  day: "numeric",
-                  year: "numeric",
-                })
-              }}
-            />
-          }
-        />
-        <Bar dataKey="experience" fill="var(--color-experience)" radius={999} />
-      </BarChart>
-    </ChartContainer>
-  )
-}
diff --git a/src/app/(marketing)/profile/_components/CircularProgressBar.tsx b/src/app/(marketing)/profile/_components/CircularProgressBar.tsx
index 329b2e608e..0b590b219d 100644
--- a/src/app/(marketing)/profile/_components/CircularProgressBar.tsx
+++ b/src/app/(marketing)/profile/_components/CircularProgressBar.tsx
@@ -1,36 +1,10 @@
 "use client"
 
-import { ChartContainer } from "@/components/ui/Chart"
-import { RadialBar, RadialBarChart } from "recharts"
-
 const chartData = [{ experience: 1, fill: "hsl(var(--primary))" }]
 
+// TODO: use svg clip-path
 export const CircularProgressBar = ({ progress }: { progress: number }) => {
   const size = 224
   const strokeWidth = 10
-  return (
-    <ChartContainer
-      config={{}}
-      className="-scale-x-100 absolute aspect-square rotate-90"
-      style={{ minHeight: size }}
-    >
-      <RadialBarChart
-        data={chartData}
-        startAngle={0}
-        endAngle={360 * progress}
-        innerRadius={106}
-        outerRadius={116}
-      >
-        <circle
-          className="stroke-muted"
-          cx={size >> 1}
-          cy={size >> 1}
-          r={(size >> 1) - (strokeWidth >> 1) - 1}
-          strokeWidth={strokeWidth}
-          fill="none"
-        />
-        <RadialBar dataKey="experience" cornerRadius={10} />
-      </RadialBarChart>
-    </ChartContainer>
-  )
+  return null
 }
diff --git a/src/v2/components/ui/Chart.tsx b/src/v2/components/ui/Chart.tsx
deleted file mode 100644
index 642228c89c..0000000000
--- a/src/v2/components/ui/Chart.tsx
+++ /dev/null
@@ -1,351 +0,0 @@
-"use client"
-
-import * as React from "react"
-import * as RechartsPrimitive from "recharts"
-
-import { cn } from "@/lib/utils"
-
-// Format: { THEME_NAME: CSS_SELECTOR }
-const THEMES = { light: "", dark: ".dark" } as const
-
-export type ChartConfig = {
-  [k in string]: {
-    label?: React.ReactNode
-    icon?: React.ComponentType
-  } & (
-    | { color?: string; theme?: never }
-    | { color?: never; theme: Record<keyof typeof THEMES, string> }
-  )
-}
-
-type ChartContextProps = {
-  config: ChartConfig
-}
-
-const ChartContext = React.createContext<ChartContextProps | null>(null)
-
-function useChart() {
-  const context = React.useContext(ChartContext)
-
-  if (!context) {
-    throw new Error("useChart must be used within a <ChartContainer />")
-  }
-
-  return context
-}
-
-const ChartContainer = React.forwardRef<
-  HTMLDivElement,
-  React.ComponentProps<"div"> & {
-    config: ChartConfig
-    children: React.ComponentProps<
-      typeof RechartsPrimitive.ResponsiveContainer
-    >["children"]
-  }
->(({ id, className, children, config, ...props }, ref) => {
-  const uniqueId = React.useId()
-  const chartId = `chart-${id || uniqueId.replace(/:/g, "")}`
-
-  return (
-    <ChartContext.Provider value={{ config }}>
-      <div
-        data-chart={chartId}
-        ref={ref}
-        className={cn(
-          "flex aspect-video justify-center text-xs [&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-none [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_[stroke='#ccc']]:stroke-border [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-sector]:outline-none [&_.recharts-surface]:outline-none",
-          className
-        )}
-        {...props}
-      >
-        <ChartStyle id={chartId} config={config} />
-        <RechartsPrimitive.ResponsiveContainer>
-          {children}
-        </RechartsPrimitive.ResponsiveContainer>
-      </div>
-    </ChartContext.Provider>
-  )
-})
-ChartContainer.displayName = "Chart"
-
-const ChartStyle = ({ id, config }: { id: string; config: ChartConfig }) => {
-  const colorConfig = Object.entries(config).filter(
-    ([_, config]) => config.theme || config.color
-  )
-
-  if (!colorConfig.length) {
-    return null
-  }
-
-  return (
-    <style
-      dangerouslySetInnerHTML={{
-        __html: Object.entries(THEMES)
-          .map(
-            ([theme, prefix]) => `
-${prefix} [data-chart=${id}] {
-${colorConfig
-  .map(([key, itemConfig]) => {
-    const color =
-      itemConfig.theme?.[theme as keyof typeof itemConfig.theme] || itemConfig.color
-    return color ? `  --color-${key}: ${color};` : null
-  })
-  .join("\n")}
-}
-`
-          )
-          .join("\n"),
-      }}
-    />
-  )
-}
-
-const ChartTooltip = RechartsPrimitive.Tooltip
-
-const ChartTooltipContent = React.forwardRef<
-  HTMLDivElement,
-  React.ComponentProps<typeof RechartsPrimitive.Tooltip> &
-    React.ComponentProps<"div"> & {
-      hideLabel?: boolean
-      hideIndicator?: boolean
-      indicator?: "line" | "dot" | "dashed"
-      nameKey?: string
-      labelKey?: string
-    }
->(
-  (
-    {
-      active,
-      payload,
-      className,
-      indicator = "dot",
-      hideLabel = false,
-      hideIndicator = false,
-      label,
-      labelFormatter,
-      labelClassName,
-      formatter,
-      color,
-      nameKey,
-      labelKey,
-    },
-    ref
-  ) => {
-    const { config } = useChart()
-
-    const tooltipLabel = React.useMemo(() => {
-      if (hideLabel || !payload?.length) {
-        return null
-      }
-
-      const [item] = payload
-      const key = `${labelKey || item.dataKey || item.name || "value"}`
-      const itemConfig = getPayloadConfigFromPayload(config, item, key)
-      const value =
-        !labelKey && typeof label === "string"
-          ? config[label as keyof typeof config]?.label || label
-          : itemConfig?.label
-
-      if (labelFormatter) {
-        return (
-          <div className={cn("font-medium", labelClassName)}>
-            {labelFormatter(value, payload)}
-          </div>
-        )
-      }
-
-      if (!value) {
-        return null
-      }
-
-      return <div className={cn("font-medium", labelClassName)}>{value}</div>
-    }, [label, labelFormatter, payload, hideLabel, labelClassName, config, labelKey])
-
-    if (!active || !payload?.length) {
-      return null
-    }
-
-    const nestLabel = payload.length === 1 && indicator !== "dot"
-
-    return (
-      <div
-        ref={ref}
-        className={cn(
-          "grid min-w-[8rem] items-start gap-1.5 rounded-lg border border-border/50 bg-background px-2.5 py-1.5 text-xs shadow-xl",
-          className
-        )}
-      >
-        {!nestLabel ? tooltipLabel : null}
-        <div className="grid gap-1.5">
-          {payload.map((item, index) => {
-            const key = `${nameKey || item.name || item.dataKey || "value"}`
-            const itemConfig = getPayloadConfigFromPayload(config, item, key)
-            const indicatorColor = color || item.payload.fill || item.color
-
-            return (
-              <div
-                key={item.dataKey}
-                className={cn(
-                  "flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5 [&>svg]:text-muted-foreground",
-                  indicator === "dot" && "items-center"
-                )}
-              >
-                {formatter && item?.value !== undefined && item.name ? (
-                  formatter(item.value, item.name, item, index, item.payload)
-                ) : (
-                  <>
-                    {itemConfig?.icon ? (
-                      <itemConfig.icon />
-                    ) : (
-                      !hideIndicator && (
-                        <div
-                          className={cn(
-                            "shrink-0 rounded-[2px] border-[--color-border] bg-[--color-bg]",
-                            {
-                              "h-2.5 w-2.5": indicator === "dot",
-                              "w-1": indicator === "line",
-                              "w-0 border-[1.5px] border-dashed bg-transparent":
-                                indicator === "dashed",
-                              "my-0.5": nestLabel && indicator === "dashed",
-                            }
-                          )}
-                          style={
-                            {
-                              "--color-bg": indicatorColor,
-                              "--color-border": indicatorColor,
-                            } as React.CSSProperties
-                          }
-                        />
-                      )
-                    )}
-                    <div
-                      className={cn(
-                        "flex flex-1 justify-between leading-none",
-                        nestLabel ? "items-end" : "items-center"
-                      )}
-                    >
-                      <div className="grid gap-1.5">
-                        {nestLabel ? tooltipLabel : null}
-                        <span className="text-muted-foreground">
-                          {itemConfig?.label || item.name}
-                        </span>
-                      </div>
-                      {item.value && (
-                        <span className="font-medium font-mono text-foreground tabular-nums">
-                          {item.value.toLocaleString()}
-                        </span>
-                      )}
-                    </div>
-                  </>
-                )}
-              </div>
-            )
-          })}
-        </div>
-      </div>
-    )
-  }
-)
-ChartTooltipContent.displayName = "ChartTooltip"
-
-const ChartLegend = RechartsPrimitive.Legend
-
-const ChartLegendContent = React.forwardRef<
-  HTMLDivElement,
-  React.ComponentProps<"div"> &
-    Pick<RechartsPrimitive.LegendProps, "payload" | "verticalAlign"> & {
-      hideIcon?: boolean
-      nameKey?: string
-    }
->(
-  (
-    { className, hideIcon = false, payload, verticalAlign = "bottom", nameKey },
-    ref
-  ) => {
-    const { config } = useChart()
-
-    if (!payload?.length) {
-      return null
-    }
-
-    return (
-      <div
-        ref={ref}
-        className={cn(
-          "flex items-center justify-center gap-4",
-          verticalAlign === "top" ? "pb-3" : "pt-3",
-          className
-        )}
-      >
-        {payload.map((item) => {
-          const key = `${nameKey || item.dataKey || "value"}`
-          const itemConfig = getPayloadConfigFromPayload(config, item, key)
-
-          return (
-            <div
-              key={item.value}
-              className={cn(
-                "flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3 [&>svg]:text-muted-foreground"
-              )}
-            >
-              {itemConfig?.icon && !hideIcon ? (
-                <itemConfig.icon />
-              ) : (
-                <div
-                  className="h-2 w-2 shrink-0 rounded-[2px]"
-                  style={{
-                    backgroundColor: item.color,
-                  }}
-                />
-              )}
-              {itemConfig?.label}
-            </div>
-          )
-        })}
-      </div>
-    )
-  }
-)
-ChartLegendContent.displayName = "ChartLegend"
-
-// Helper to extract item config from a payload.
-function getPayloadConfigFromPayload(
-  config: ChartConfig,
-  payload: unknown,
-  key: string
-) {
-  if (typeof payload !== "object" || payload === null) {
-    return undefined
-  }
-
-  const payloadPayload =
-    "payload" in payload &&
-    typeof payload.payload === "object" &&
-    payload.payload !== null
-      ? payload.payload
-      : undefined
-
-  let configLabelKey: string = key
-
-  if (key in payload && typeof payload[key as keyof typeof payload] === "string") {
-    configLabelKey = payload[key as keyof typeof payload] as string
-  } else if (
-    payloadPayload &&
-    key in payloadPayload &&
-    typeof payloadPayload[key as keyof typeof payloadPayload] === "string"
-  ) {
-    configLabelKey = payloadPayload[key as keyof typeof payloadPayload] as string
-  }
-
-  return configLabelKey in config
-    ? config[configLabelKey]
-    : config[key as keyof typeof config]
-}
-
-export {
-  ChartContainer,
-  ChartTooltip,
-  ChartTooltipContent,
-  ChartLegend,
-  ChartLegendContent,
-  ChartStyle,
-}

From 124013ce8c5984ffaeaecef3e7e872156b4483d0 Mon Sep 17 00:00:00 2001
From: valid <valid@zgen.hu>
Date: Tue, 6 Aug 2024 20:50:50 +0200
Subject: [PATCH 52/87] UI: make borders muted

---
 src/app/(marketing)/profile/_components/EditProfile.tsx | 2 +-
 src/v2/components/ui/Input.tsx                          | 2 +-
 src/v2/components/ui/InputOTP.tsx                       | 2 +-
 src/v2/components/ui/Textarea.tsx                       | 2 +-
 4 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/app/(marketing)/profile/_components/EditProfile.tsx b/src/app/(marketing)/profile/_components/EditProfile.tsx
index eb11620064..4f52600eda 100644
--- a/src/app/(marketing)/profile/_components/EditProfile.tsx
+++ b/src/app/(marketing)/profile/_components/EditProfile.tsx
@@ -202,7 +202,7 @@ export const EditProfile = (profile: Schemas["ProfileUpdate"]) => {
                   </FormItem>
                 )}
               />
-              <Separator className="mt-8 mb-4" />
+              <Separator className="mt-8 mb-4 bg-border-muted" />
               <div>
                 <p className="mb-2 font-medium">Danger zone</p>
                 <Button
diff --git a/src/v2/components/ui/Input.tsx b/src/v2/components/ui/Input.tsx
index 8ef44004da..05c80fdb4f 100644
--- a/src/v2/components/ui/Input.tsx
+++ b/src/v2/components/ui/Input.tsx
@@ -3,7 +3,7 @@ import { VariantProps, cva } from "class-variance-authority"
 import { InputHTMLAttributes, forwardRef } from "react"
 
 const inputVariants = cva(
-  "flex w-full border border-input px-3 py-2 text-sm file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50 aria-[invalid=true]:bg-destructive/10 aria-[invalid=true]:border-destructive-subtle aria-[invalid=true]:placeholder:text-destructive-subtle/60",
+  "flex w-full border border-border-muted px-3 py-2 text-sm file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50 aria-[invalid=true]:bg-destructive/10 aria-[invalid=true]:border-destructive-subtle aria-[invalid=true]:placeholder:text-destructive-subtle/60",
   {
     variants: {
       variant: {
diff --git a/src/v2/components/ui/InputOTP.tsx b/src/v2/components/ui/InputOTP.tsx
index 4960111718..9f54360612 100644
--- a/src/v2/components/ui/InputOTP.tsx
+++ b/src/v2/components/ui/InputOTP.tsx
@@ -39,7 +39,7 @@ const InputOTPSlot = forwardRef<
     <div
       ref={ref}
       className={cn(
-        "relative flex h-9 w-9 items-center justify-center border-input border-y border-r text-sm transition-all first:rounded-l-md first:border-l last:rounded-r-md",
+        "relative flex h-9 w-9 items-center justify-center border-border-muted border-y border-r text-sm transition-all first:rounded-l-md first:border-l last:rounded-r-md",
         isActive && "z-10 ring-1 ring-ring",
         className
       )}
diff --git a/src/v2/components/ui/Textarea.tsx b/src/v2/components/ui/Textarea.tsx
index 7565514d0c..8f29acfa9d 100644
--- a/src/v2/components/ui/Textarea.tsx
+++ b/src/v2/components/ui/Textarea.tsx
@@ -10,7 +10,7 @@ const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
     return (
       <textarea
         className={cn(
-          "flex min-h-[80px] w-full rounded-lg border border-input bg-card-secondary px-3 py-2 placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
+          "flex min-h-[80px] w-full rounded-lg border border-border-muted bg-card-secondary px-3 py-2 placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
           className
         )}
         ref={ref}

From b26ea298435de2bb32a195f1325d94dc1c141d81 Mon Sep 17 00:00:00 2001
From: valid <valid@zgen.hu>
Date: Tue, 6 Aug 2024 21:30:29 +0200
Subject: [PATCH 53/87] OperatedGuildCard components

---
 .../profile/_components/OperatedGuildCard.tsx | 60 ++++++++++++++++---
 1 file changed, 52 insertions(+), 8 deletions(-)

diff --git a/src/app/(marketing)/profile/_components/OperatedGuildCard.tsx b/src/app/(marketing)/profile/_components/OperatedGuildCard.tsx
index 2918358049..e6d8cb80c1 100644
--- a/src/app/(marketing)/profile/_components/OperatedGuildCard.tsx
+++ b/src/app/(marketing)/profile/_components/OperatedGuildCard.tsx
@@ -2,9 +2,19 @@ import { CheckMark } from "@/components/CheckMark"
 import { Avatar, AvatarFallback } from "@/components/ui/Avatar"
 import { Card } from "@/components/ui/Card"
 import { Skeleton } from "@/components/ui/Skeleton"
+import {
+  ArrowFatUp,
+  Calendar,
+  FolderSimpleUser,
+  Icon,
+  ShootingStar,
+  Star,
+} from "@phosphor-icons/react"
 import { User } from "@phosphor-icons/react/dist/ssr"
 import { AvatarImage } from "@radix-ui/react-avatar"
+import { Separator } from "@radix-ui/react-separator"
 import Image from "next/image"
+import { PropsWithChildren } from "react"
 
 export const OperatedGuildCard = () => {
   return (
@@ -36,15 +46,49 @@ export const OperatedGuildCard = () => {
           </h3>
         </div>
       </div>
-      <div className="grid grow justify-stretch gap-2 px-6 py-5 md:grid-cols-2">
-        {Array(6).fill(
-          <Card className="flex items-center gap-2 bg-secondary p-5 font-extrabold text-lg">
-            <User weight="bold" className="min-w-min" />
-            123k
-            <span className="text-muted-foreground">members</span>
-          </Card>
-        )}
+      <Separator orientation="vertical" className="bg-border-muted" />
+      <div className="grid grow justify-stretch gap-2 p-5 md:grid-cols-2">
+        <OperatedGuildDetailCard Icon={User}>
+          <EmphasizedData>123k</EmphasizedData>
+          members
+        </OperatedGuildDetailCard>
+        <OperatedGuildDetailCard Icon={ArrowFatUp}>
+          Avg level of members:
+          <EmphasizedData>3.6</EmphasizedData>
+        </OperatedGuildDetailCard>
+        <OperatedGuildDetailCard Icon={FolderSimpleUser}>
+          <EmphasizedData>13</EmphasizedData>
+          roles
+        </OperatedGuildDetailCard>
+        <OperatedGuildDetailCard Icon={Star}>
+          <EmphasizedData>20</EmphasizedData>
+          rewards in total
+        </OperatedGuildDetailCard>
+        <OperatedGuildDetailCard Icon={ShootingStar}>
+          In the top
+          <EmphasizedData>5%</EmphasizedData>
+          of guilds
+        </OperatedGuildDetailCard>
+        <OperatedGuildDetailCard Icon={Calendar}>
+          Created
+          <EmphasizedData>a year</EmphasizedData>
+          ago
+        </OperatedGuildDetailCard>
       </div>
     </Card>
   )
 }
+
+const OperatedGuildDetailCard = ({
+  Icon,
+  children,
+}: PropsWithChildren<{ Icon: Icon }>) => (
+  <Card className="flex items-center gap-2 rounded-xl bg-secondary p-5 font-bold">
+    <Icon weight="bold" className="min-w-min" />
+    <span className="text-muted-foreground">{children}</span>
+  </Card>
+)
+
+const EmphasizedData = ({ children }: PropsWithChildren) => (
+  <span className="font-black text-foreground"> {children} </span>
+)

From 4d47e768bf72ffa0a5c0af18b26cfd5b37575cd8 Mon Sep 17 00:00:00 2001
From: Dominik Stumpf <s.dominik.work@gmail.com>
Date: Wed, 7 Aug 2024 21:39:59 +0200
Subject: [PATCH 54/87] chore: remove xp metagame related components

---
 .../profile/[username]/constants.ts           | 14 ------
 .../(marketing)/profile/[username]/page.tsx   | 32 -------------
 .../_components/CircularProgressBar.tsx       | 10 ----
 .../profile/_components/LevelBadge.tsx        | 47 -------------------
 .../profile/_components/RecentActivity.tsx    |  3 --
 5 files changed, 106 deletions(-)
 delete mode 100644 src/app/(marketing)/profile/[username]/constants.ts
 delete mode 100644 src/app/(marketing)/profile/_components/CircularProgressBar.tsx
 delete mode 100644 src/app/(marketing)/profile/_components/LevelBadge.tsx

diff --git a/src/app/(marketing)/profile/[username]/constants.ts b/src/app/(marketing)/profile/[username]/constants.ts
deleted file mode 100644
index 34d7780ea0..0000000000
--- a/src/app/(marketing)/profile/[username]/constants.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-export const MAX_LEVEL = 100
-export const RANKS = [
-  { color: "#78c93d", title: "novice" },
-  { color: "#88d525", title: "learner" },
-  { color: "#f6ca45", title: "knight" },
-  { color: "#78c93d", title: "veteran" },
-  { color: "#ec5a53", title: "champion" },
-  { color: "#53adf0", title: "hero" },
-  { color: "#c385f8", title: "master" },
-  { color: "#3e6fc3", title: "grand master" },
-  { color: "#be4681", title: "legend" },
-  { color: "#000000", title: "mythic" },
-  { color: "linear-gradient(to left top, #00cbfa, #b9f2ff)", title: "???" },
-] as const
diff --git a/src/app/(marketing)/profile/[username]/page.tsx b/src/app/(marketing)/profile/[username]/page.tsx
index e72aaaee88..3a01442b2a 100644
--- a/src/app/(marketing)/profile/[username]/page.tsx
+++ b/src/app/(marketing)/profile/[username]/page.tsx
@@ -21,11 +21,9 @@ import { useAtom } from "jotai"
 import { useEffect } from "react"
 import useSWR from "swr"
 import { fetcherForSWR } from "utils/fetcher"
-import { CircularProgressBar } from "../_components/CircularProgressBar"
 import { ContributionCard } from "../_components/ContributionCard"
 import { EditContributions } from "../_components/EditContributions"
 import { EditProfile } from "../_components/EditProfile"
-import { LevelBadge } from "../_components/LevelBadge"
 import { OperatedGuildCard } from "../_components/OperatedGuildCard"
 import { ProfileSkeleton } from "../_components/ProfileSkeleton"
 import { RecentActivity } from "../_components/RecentActivity"
@@ -68,7 +66,6 @@ const Page = ({
     fetcherForSWR
   )
   const [profile, setProfile] = useAtom(profileAtom)
-  const level = 0
 
   useEffect(() => {
     setProfile(fetchedProfile)
@@ -109,8 +106,6 @@ const Page = ({
                   <Skeleton className="size-full" />
                 </AvatarFallback>
               </Avatar>
-              <CircularProgressBar progress={0.1} />
-              <LevelBadge level={level} className="absolute right-0 bottom-0" />
             </div>
             <h1 className="text-center font-bold text-4xl leading-normal tracking-tight">
               {profile.name}
@@ -140,33 +135,6 @@ const Page = ({
               </div>
             </div>
           </div>
-          {/* <h2 className="mb-3 font-bold text-lg">Experience</h2>
-          <div className="mb-16 grid grid-cols-1 gap-3 md:grid-cols-2">
-            <Card className="p-6">
-              <div className="grid grid-cols-[auto_1fr] grid-rows-[auto_auto_auto] items-center gap-x-3 gap-y-2">
-                <LevelBadge
-                  level={level}
-                  className="row-span-3 size-14 self-start justify-self-center"
-                />
-                <div className="flex flex-col justify-between gap-2 sm:flex-row">
-                  <h3 className="font-bold">Champion</h3>
-                  <p className="text-muted-foreground">1322 / 9999 XP</p>
-                </div>
-                <Progress value={77} />
-                <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>
-              <ActivityChart />
-            </Card>
-          </div> */}
           <h2 className="mb-3 font-bold text-lg">Operated guilds</h2>
           <OperatedGuildCard />
           <div className="mt-8 mb-3 flex items-center justify-between">
diff --git a/src/app/(marketing)/profile/_components/CircularProgressBar.tsx b/src/app/(marketing)/profile/_components/CircularProgressBar.tsx
deleted file mode 100644
index 0b590b219d..0000000000
--- a/src/app/(marketing)/profile/_components/CircularProgressBar.tsx
+++ /dev/null
@@ -1,10 +0,0 @@
-"use client"
-
-const chartData = [{ experience: 1, fill: "hsl(var(--primary))" }]
-
-// TODO: use svg clip-path
-export const CircularProgressBar = ({ progress }: { progress: number }) => {
-  const size = 224
-  const strokeWidth = 10
-  return null
-}
diff --git a/src/app/(marketing)/profile/_components/LevelBadge.tsx b/src/app/(marketing)/profile/_components/LevelBadge.tsx
deleted file mode 100644
index b5aee17f17..0000000000
--- a/src/app/(marketing)/profile/_components/LevelBadge.tsx
+++ /dev/null
@@ -1,47 +0,0 @@
-import { cn } from "@/lib/utils"
-import { MAX_LEVEL, RANKS } from "../[username]/constants"
-
-type PolygonProps = {
-  sides: number
-  radius: number
-  color: string
-}
-
-const Polygon = ({ sides, radius, color }: PolygonProps) => {
-  const angleStep = (2 * Math.PI) / sides
-  const points = Array.from({ length: sides }, (_, i) => {
-    const x = 20 + radius * Math.cos(i * angleStep)
-    const y = 20 + radius * Math.sin(i * angleStep)
-    return `${x},${y}`
-  }).join(" ")
-
-  return (
-    <svg width={100} height={100}>
-      <polygon
-        points={points}
-        stroke={color}
-        fill={color}
-        strokeWidth="10"
-        strokeLinejoin="round"
-      />
-    </svg>
-  )
-}
-
-type LevelBadgeProps = {
-  level: number
-  className?: string
-}
-
-export const LevelBadge = ({ level, className }: LevelBadgeProps) => {
-  const rank =
-    RANKS[Math.min(Math.floor((level / MAX_LEVEL) * RANKS.length), RANKS.length - 1)]
-
-  return (
-    <div className={cn("relative grid size-12 place-items-center", className)}>
-      <div className="size-full rounded-full" style={{ background: rank.color }} />
-      <div className="absolute select-none font-extrabold text-xl">{level}</div>
-    </div>
-  )
-}
-// <Polygon sides={5} radius={20} color={"hsl(var(--primary))"} />
diff --git a/src/app/(marketing)/profile/_components/RecentActivity.tsx b/src/app/(marketing)/profile/_components/RecentActivity.tsx
index 804f2c3433..3f3d817e3d 100644
--- a/src/app/(marketing)/profile/_components/RecentActivity.tsx
+++ b/src/app/(marketing)/profile/_components/RecentActivity.tsx
@@ -57,9 +57,6 @@ export const RecentActivity = () => {
                   className="hidden size-1.5 text-muted-foreground sm:block"
                   weight="fill"
                 />
-                <Badge colorScheme="blue" size="sm">
-                  +5 XP
-                </Badge>
               </div>
             </div>
           </Card>

From 4a0a5c3f36d03616f7f7aab02366a4464a073659 Mon Sep 17 00:00:00 2001
From: Dominik Stumpf <122315398+dominik-stumpf@users.noreply.github.com>
Date: Wed, 7 Aug 2024 22:21:11 +0200
Subject: [PATCH 55/87] implement contribution container (#1430)

* feat: add useContribution

* feat: update contribution card

* chore: add EditContribution

* feat: add select contribution

* feat: add edit contribution

* chore: try adding EditContributionCard container

* feat: add image to select items

* chore: align select item padding with input

* chore: start adding swr smaller fetches

* feat: add delete update and create contribution

* feat: add create new contribution

* feat: cover contribution CRUD

* chore: remove revalidation from swr fetches

* feat: add delete loader and validation

* refactor: select placeholder fix, remove comments

* refactor: remove useAllUserRoles.tsx

* chore: use GuildLabel on ContributionCardView
---
 package-lock.json                             |  86 ++++++
 package.json                                  |   1 +
 .../(marketing)/profile/[username]/page.tsx   |  17 +-
 .../_components/CardWithGuildLabel.tsx        |  41 +++
 .../profile/_components/ContributionCard.tsx  |  58 +---
 .../_components/ContributionCardView.tsx      |  48 ++++
 .../profile/_components/EditContributions.tsx | 249 ++++++++++++++++--
 .../profile/_hooks/useContribution.tsx        |  10 +
 .../profile/_hooks/useCreateContribution.tsx  |  54 ++++
 .../profile/_hooks/useDeleteContribution.tsx  |  52 ++++
 .../profile/_hooks/useMemberships.tsx         |  10 +
 .../(marketing)/profile/_hooks/useProfile.tsx |  10 +
 .../profile/_hooks/useUpdateContribution.tsx  |  58 ++++
 src/v2/components/ui/Avatar.tsx               |   9 +-
 src/v2/components/ui/Form.tsx                 |   2 +-
 src/v2/components/ui/Select.tsx               | 153 +++++++++++
 16 files changed, 775 insertions(+), 83 deletions(-)
 create mode 100644 src/app/(marketing)/profile/_components/CardWithGuildLabel.tsx
 create mode 100644 src/app/(marketing)/profile/_components/ContributionCardView.tsx
 create mode 100644 src/app/(marketing)/profile/_hooks/useContribution.tsx
 create mode 100644 src/app/(marketing)/profile/_hooks/useCreateContribution.tsx
 create mode 100644 src/app/(marketing)/profile/_hooks/useDeleteContribution.tsx
 create mode 100644 src/app/(marketing)/profile/_hooks/useMemberships.tsx
 create mode 100644 src/app/(marketing)/profile/_hooks/useProfile.tsx
 create mode 100644 src/app/(marketing)/profile/_hooks/useUpdateContribution.tsx
 create mode 100644 src/v2/components/ui/Select.tsx

diff --git a/package-lock.json b/package-lock.json
index 7290570e88..cf71af1034 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -42,6 +42,7 @@
         "@radix-ui/react-label": "^2.1.0",
         "@radix-ui/react-popover": "^1.1.1",
         "@radix-ui/react-progress": "^1.1.0",
+        "@radix-ui/react-select": "^2.1.1",
         "@radix-ui/react-separator": "^1.1.0",
         "@radix-ui/react-slot": "^1.1.0",
         "@radix-ui/react-toast": "^1.2.1",
@@ -7807,6 +7808,11 @@
         "url": "https://opencollective.com/preact"
       }
     },
+    "node_modules/@radix-ui/number": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/number/-/number-1.1.0.tgz",
+      "integrity": "sha512-V3gRzhVNU1ldS5XhAPTom1fOIo4ccrjjJgmE+LI2h/WaFpHmx0MQApT+KZHnx8abG6Avtfcz4WoEciMnpFT3HQ=="
+    },
     "node_modules/@radix-ui/primitive": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/@radix-ui/primitive/-/primitive-1.1.0.tgz",
@@ -8477,6 +8483,72 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-select": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-select/-/react-select-2.1.1.tgz",
+      "integrity": "sha512-8iRDfyLtzxlprOo9IicnzvpsO1wNCkuwzzCM+Z5Rb5tNOpCdMvcc2AkzX0Fz+Tz9v6NJ5B/7EEgyZveo4FBRfQ==",
+      "dependencies": {
+        "@radix-ui/number": "1.1.0",
+        "@radix-ui/primitive": "1.1.0",
+        "@radix-ui/react-collection": "1.1.0",
+        "@radix-ui/react-compose-refs": "1.1.0",
+        "@radix-ui/react-context": "1.1.0",
+        "@radix-ui/react-direction": "1.1.0",
+        "@radix-ui/react-dismissable-layer": "1.1.0",
+        "@radix-ui/react-focus-guards": "1.1.0",
+        "@radix-ui/react-focus-scope": "1.1.0",
+        "@radix-ui/react-id": "1.1.0",
+        "@radix-ui/react-popper": "1.2.0",
+        "@radix-ui/react-portal": "1.1.1",
+        "@radix-ui/react-primitive": "2.0.0",
+        "@radix-ui/react-slot": "1.1.0",
+        "@radix-ui/react-use-callback-ref": "1.1.0",
+        "@radix-ui/react-use-controllable-state": "1.1.0",
+        "@radix-ui/react-use-layout-effect": "1.1.0",
+        "@radix-ui/react-use-previous": "1.1.0",
+        "@radix-ui/react-visually-hidden": "1.1.0",
+        "aria-hidden": "^1.1.1",
+        "react-remove-scroll": "2.5.7"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-select/node_modules/react-remove-scroll": {
+      "version": "2.5.7",
+      "resolved": "https://registry.npmjs.org/react-remove-scroll/-/react-remove-scroll-2.5.7.tgz",
+      "integrity": "sha512-FnrTWO4L7/Bhhf3CYBNArEG/yROV0tKmTv7/3h9QCFvH6sndeFf1wPqOcbFVu5VAulS5dV1wGT3GZZ/1GawqiA==",
+      "dependencies": {
+        "react-remove-scroll-bar": "^2.3.4",
+        "react-style-singleton": "^2.2.1",
+        "tslib": "^2.1.0",
+        "use-callback-ref": "^1.3.0",
+        "use-sidecar": "^1.1.2"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "@types/react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-separator": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-separator/-/react-separator-1.1.0.tgz",
@@ -8696,6 +8768,20 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-use-previous": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-previous/-/react-use-previous-1.1.0.tgz",
+      "integrity": "sha512-Z/e78qg2YFnnXcW88A4JmTtm4ADckLno6F7OXotmkQfeuCVaKuYzqAATPhVzl3delXE7CxIV8shofPn3jPc5Og==",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-use-rect": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-use-rect/-/react-use-rect-1.1.0.tgz",
diff --git a/package.json b/package.json
index 3a9d24e52a..237555df68 100644
--- a/package.json
+++ b/package.json
@@ -54,6 +54,7 @@
     "@radix-ui/react-label": "^2.1.0",
     "@radix-ui/react-popover": "^1.1.1",
     "@radix-ui/react-progress": "^1.1.0",
+    "@radix-ui/react-select": "^2.1.1",
     "@radix-ui/react-separator": "^1.1.0",
     "@radix-ui/react-slot": "^1.1.0",
     "@radix-ui/react-toast": "^1.2.1",
diff --git a/src/app/(marketing)/profile/[username]/page.tsx b/src/app/(marketing)/profile/[username]/page.tsx
index 3a01442b2a..79402ae371 100644
--- a/src/app/(marketing)/profile/[username]/page.tsx
+++ b/src/app/(marketing)/profile/[username]/page.tsx
@@ -12,9 +12,9 @@ import {
 import { Anchor } from "@/components/ui/Anchor"
 import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/Avatar"
 import { AvatarGroup } from "@/components/ui/AvatarGroup"
-import { Button } from "@/components/ui/Button"
 import { Separator } from "@/components/ui/Separator"
 import { Skeleton } from "@/components/ui/Skeleton"
+import { useUserPublic } from "@/hooks/useUserPublic"
 import { Schemas } from "@guildxyz/types"
 import { ArrowRight } from "@phosphor-icons/react/dist/ssr"
 import { useAtom } from "jotai"
@@ -27,6 +27,7 @@ import { EditProfile } from "../_components/EditProfile"
 import { OperatedGuildCard } from "../_components/OperatedGuildCard"
 import { ProfileSkeleton } from "../_components/ProfileSkeleton"
 import { RecentActivity } from "../_components/RecentActivity"
+import { useContribution } from "../_hooks/useContribution"
 import { profileAtom } from "./atoms"
 
 // async function getProfileData(username: string) {
@@ -66,7 +67,10 @@ const Page = ({
     fetcherForSWR
   )
   const [profile, setProfile] = useAtom(profileAtom)
+  const contributions = useContribution()
 
+  const { id: publicUserId } = useUserPublic()
+  const isProfileOwner = !!profile?.userId && publicUserId === profile.userId
   useEffect(() => {
     setProfile(fetchedProfile)
   }, [fetchedProfile, setProfile])
@@ -139,15 +143,12 @@ const Page = ({
           <OperatedGuildCard />
           <div className="mt-8 mb-3 flex items-center justify-between">
             <h2 className="font-bold text-lg">Top contributions</h2>
-            <EditContributions />
+            {isProfileOwner && <EditContributions />}
           </div>
           <div className="grid grid-cols-1 gap-3">
-            <ContributionCard />
-            <ContributionCard />
-            <ContributionCard />
-            <Button size="sm" variant="outline" className="place-self-center">
-              See more involvement
-            </Button>
+            {contributions.data?.map((contribution) => (
+              <ContributionCard contribution={contribution} key={contribution.id} />
+            ))}
           </div>
           <div className="mt-8">
             <h2 className="mb-3 font-bold text-lg">Recent activity</h2>
diff --git a/src/app/(marketing)/profile/_components/CardWithGuildLabel.tsx b/src/app/(marketing)/profile/_components/CardWithGuildLabel.tsx
new file mode 100644
index 0000000000..916a6b71af
--- /dev/null
+++ b/src/app/(marketing)/profile/_components/CardWithGuildLabel.tsx
@@ -0,0 +1,41 @@
+import { CheckMark } from "@/components/CheckMark"
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/Avatar"
+import { Card } from "@/components/ui/Card"
+import { Guild } from "@guildxyz/types"
+import { PropsWithChildren } from "react"
+
+export const CardWithGuildLabel = ({
+  guild,
+  children,
+}: PropsWithChildren<{ guild: Guild }>) => {
+  return (
+    <Card
+      className="relative flex border-2"
+      style={{ borderColor: guild.theme.color, background: guild.theme.color }}
+    >
+      <div
+        className="absolute inset-x-0 h-9 w-full px-2 sm:top-0 sm:h-full sm:w-8 sm:p-0"
+        style={{ background: guild.theme.color }}
+      >
+        <div className="sm:-translate-x-1/2 sm:-rotate-90 flex h-full items-center gap-1 sm:absolute sm:left-1/2 sm:justify-center">
+          <Avatar size="xs">
+            <AvatarImage
+              src={guild.imageUrl}
+              alt="guild avatar"
+              width={32}
+              height={32}
+            />
+            <AvatarFallback />
+          </Avatar>
+          <div className="truncate font-bold font-display sm:max-w-12">
+            {guild.name}
+          </div>
+          <CheckMark className="sm:hidden" />
+        </div>
+      </div>
+      <div className="mt-9 size-full rounded-2xl bg-card sm:mt-0 sm:ml-8">
+        {children}
+      </div>
+    </Card>
+  )
+}
diff --git a/src/app/(marketing)/profile/_components/ContributionCard.tsx b/src/app/(marketing)/profile/_components/ContributionCard.tsx
index a30547b55b..9032de9e78 100644
--- a/src/app/(marketing)/profile/_components/ContributionCard.tsx
+++ b/src/app/(marketing)/profile/_components/ContributionCard.tsx
@@ -1,48 +1,16 @@
-import { Avatar, AvatarFallback } from "@/components/ui/Avatar"
-import { AvatarGroup } from "@/components/ui/AvatarGroup"
-import { Button } from "@/components/ui/Button"
-import { Card } from "@/components/ui/Card"
-import { Separator } from "@/components/ui/Separator"
-import { CaretDown, Users } from "@phosphor-icons/react/dist/ssr"
+import { Guild, Role, Schemas } from "@guildxyz/types"
+import useSWR from "swr"
+import fetcher from "utils/fetcher"
+import { ContributionCardView } from "./ContributionCardView"
 
-export const ContributionCard = () => {
-  return (
-    <Card className="flex flex-col border-2 md:flex-row">
-      <div className="relative flex h-10 self-start rounded-br-2xl bg-border px-3 md:h-full md:w-10 md:rounded-br-none">
-        <div className="md:-translate-x-1/2 md:-rotate-90 flex items-center gap-1 md:absolute md:bottom-1/2 md:left-1/2 md:translate-y-1/2">
-          <Avatar size="sm">
-            <AvatarFallback>#</AvatarFallback>
-          </Avatar>
-          <div className="max-w-12 truncate font-bold font-display">Guild</div>
-        </div>
-      </div>
-      <div className="grid w-full grid-cols-[auto_1fr] items-center gap-4 p-6 md:grid-cols-[auto_auto_1fr]">
-        <Avatar className="size-16 sm:size-20">
-          <AvatarFallback>#</AvatarFallback>
-        </Avatar>
-        <div>
-          <div className="font-extrabold text-muted-foreground text-xs uppercase">
-            TOP ROLE
-          </div>
-          <h3 className="mb-1 font-bold font-display text-xl tracking-tight">
-            Enter Farcaster
-          </h3>
-          <div className="flex items-center gap-2 text-muted-foreground">
-            <Users weight="bold" className="min-w-min" />
-            <p className="line-clamp-1 text-sm">Only 3.4% of users have this role</p>
-          </div>
-        </div>
-        <div className="col-span-2 flex w-full flex-col gap-2 justify-self-end md:col-span-1 md:w-auto md:flex-row md:items-center">
-          <Separator className="mb-2 md:hidden" />
-          <div className="font-extrabold text-muted-foreground text-xs uppercase">
-            COLLECTION:
-          </div>
-          <AvatarGroup imageUrls={["", "", ""]} count={87} size="lg" />
-          <Button size="icon" variant="ghost" className="ml-2 hidden md:flex">
-            <CaretDown weight="bold" className="size-5" />
-          </Button>
-        </div>
-      </div>
-    </Card>
+export const ContributionCard = ({
+  contribution,
+}: { contribution: Schemas["ProfileContribution"] }) => {
+  const guild = useSWR<Guild>(`/v2/guilds/${contribution.guildId}`, fetcher)
+  const role = useSWR<Role>(
+    `/v2/guilds/${contribution.guildId}/roles/${contribution.roleId}`,
+    fetcher
   )
+  if (!role.data || !guild.data) return
+  return <ContributionCardView guild={guild.data} role={role.data} />
 }
diff --git a/src/app/(marketing)/profile/_components/ContributionCardView.tsx b/src/app/(marketing)/profile/_components/ContributionCardView.tsx
new file mode 100644
index 0000000000..bd5190acb0
--- /dev/null
+++ b/src/app/(marketing)/profile/_components/ContributionCardView.tsx
@@ -0,0 +1,48 @@
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/Avatar"
+import { AvatarGroup } from "@/components/ui/AvatarGroup"
+import { Button } from "@/components/ui/Button"
+import { Separator } from "@/components/ui/Separator"
+import { Guild, Role } from "@guildxyz/types"
+import { CaretDown, Users } from "@phosphor-icons/react/dist/ssr"
+import { CardWithGuildLabel } from "./CardWithGuildLabel"
+
+export const ContributionCardView = ({
+  guild,
+  role,
+}: { guild: Guild; role: Role }) => {
+  return (
+    <CardWithGuildLabel guild={guild}>
+      <div className="grid grid-cols-[auto_1fr] items-center gap-4 p-6 md:grid-cols-[auto_auto_1fr]">
+        <Avatar className="size-16 sm:size-20">
+          <AvatarImage src={role.imageUrl} alt={"role"} width={64} height={64} />
+          <AvatarFallback />
+        </Avatar>
+        <div>
+          <div className="font-extrabold text-muted-foreground text-xs uppercase">
+            TOP ROLE
+          </div>
+          <h3 className="mb-1 font-bold font-display text-xl tracking-tight">
+            {role.name}
+          </h3>
+          <div className="flex items-center gap-2 text-muted-foreground">
+            <Users weight="bold" className="min-w-min" />
+            <p className="line-clamp-1 text-sm">
+              Only {((role.memberCount / guild.memberCount) * 100).toFixed(1)}% of
+              members have this role
+            </p>
+          </div>
+        </div>
+        <div className="col-span-2 flex w-full flex-col gap-2 justify-self-end md:col-span-1 md:w-auto md:flex-row md:items-center">
+          <Separator className="mb-2 md:hidden" />
+          <div className="font-extrabold text-muted-foreground text-xs uppercase">
+            COLLECTION:
+          </div>
+          <AvatarGroup imageUrls={["", "", ""]} count={87} size="lg" />
+          <Button size="icon" variant="ghost" className="ml-2 hidden md:flex">
+            <CaretDown weight="bold" className="size-5" />
+          </Button>
+        </div>
+      </div>
+    </CardWithGuildLabel>
+  )
+}
diff --git a/src/app/(marketing)/profile/_components/EditContributions.tsx b/src/app/(marketing)/profile/_components/EditContributions.tsx
index 91c2d27c52..b864de727a 100644
--- a/src/app/(marketing)/profile/_components/EditContributions.tsx
+++ b/src/app/(marketing)/profile/_components/EditContributions.tsx
@@ -1,5 +1,8 @@
 "use client"
+
+import { Avatar, AvatarImage } from "@/components/ui/Avatar"
 import { Button } from "@/components/ui/Button"
+import { Card } from "@/components/ui/Card"
 import {
   Dialog,
   DialogBody,
@@ -9,26 +12,117 @@ import {
   DialogTitle,
   DialogTrigger,
 } from "@/components/ui/Dialog"
-// import { profileSchema } from "@/lib/validations/profileSchema"
-import { Schemas } from "@guildxyz/types"
-// import { zodResolver } from "@hookform/resolvers/zod"
+import { Label } from "@/components/ui/Label"
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/Select"
+import { useToast } from "@/components/ui/hooks/useToast"
+import { useYourGuilds } from "@/hooks/useYourGuilds"
+import { Guild, MembershipResult, Role, Schemas } from "@guildxyz/types"
+import { X } from "@phosphor-icons/react"
 import { PencilSimple } from "@phosphor-icons/react"
-import { FormProvider, useForm } from "react-hook-form"
-
-export const EditContributions = (
-  contribution: Schemas["ProfileContributionUpdate"]
-) => {
-  const form = useForm<Schemas["ProfileContributionUpdate"]>({
-    // resolver: zodResolver(profileSchema),
-    defaultValues: {
-      ...contribution,
-    },
-    mode: "onTouched",
+import { AvatarFallback } from "@radix-ui/react-avatar"
+import { DialogDescription } from "@radix-ui/react-dialog"
+import { useState } from "react"
+import useSWRImmutable from "swr/immutable"
+import fetcher from "utils/fetcher"
+import { useContribution } from "../_hooks/useContribution"
+import { useCreateContribution } from "../_hooks/useCreateContribution"
+import { useDeleteContribution } from "../_hooks/useDeleteContribution"
+import { useMemberships } from "../_hooks/useMemberships"
+import { useUpdateContribution } from "../_hooks/useUpdateContribution"
+import { CardWithGuildLabel } from "./CardWithGuildLabel"
+
+const guildFetcher = (urls: string[]) => {
+  return Promise.all(urls.map((url) => fetcher(url) as Promise<Guild>))
+}
+const useYourVerifiedGuild = () => {
+  const yourGuilds = useYourGuilds()
+  const requests = yourGuilds.data
+    ? yourGuilds.data.map((guild) => `/v2/guilds/${guild.id}`)
+    : null
+  return { guilds: useSWRImmutable(requests, guildFetcher), baseGuilds: yourGuilds }
+}
+
+const EditContributionCard = ({
+  contribution,
+}: { contribution: Schemas["ProfileContribution"] }) => {
+  const { data: guild } = useSWRImmutable<Guild>(
+    `/v2/guilds/${contribution.guildId}`,
+    fetcher
+  )
+  const memberships = useMemberships()
+  const editContribution = useUpdateContribution({ contributionId: contribution.id })
+  const deleteContribution = useDeleteContribution({
+    contributionId: contribution.id,
   })
+  if (!guild || !memberships.data) return
+  const roleIds = memberships.data.find(
+    (membership) => membership.guildId === guild.id
+  )?.roleIds
+
+  return (
+    <CardWithGuildLabel guild={guild}>
+      <div className="relative flex flex-col gap-2 p-6">
+        <Button
+          size="icon"
+          variant="ghost"
+          onClick={deleteContribution.onSubmit}
+          isLoading={deleteContribution.isLoading}
+          className="absolute top-2 right-2 size-7"
+        >
+          <X />
+        </Button>
+        <Label className="font-extrabold text-muted-foreground text-xs uppercase">
+          TOP ROLE
+        </Label>
+        <Select
+          defaultValue={contribution.roleId.toString()}
+          onValueChange={(value) => {
+            editContribution.onSubmit({ roleId: parseInt(value), guildId: guild.id })
+          }}
+        >
+          <SelectTrigger>
+            <SelectValue placeholder="Select from your guilds" />
+          </SelectTrigger>
+          <SelectContent>
+            {roleIds.map((roleId) => (
+              <RoleSelectItem roleId={roleId} guildId={guild.id} />
+            ))}
+          </SelectContent>
+        </Select>
+      </div>
+    </CardWithGuildLabel>
+  )
+}
+
+export const EditContributions = () => {
+  const contributions = useContribution()
+  const memberships = useMemberships()
+  const [guildId, setGuildId] = useState("")
+  const [roleId, setRoleId] = useState("")
+  const { toast } = useToast()
+
+  const {
+    guilds: { data: guildData },
+    baseGuilds,
+  } = useYourVerifiedGuild()
+  const guilds =
+    guildData &&
+    baseGuilds.data?.reduce<Guild[]>(
+      (acc, curr, i) =>
+        curr.tags.includes("VERIFIED") ? [...acc, guildData[i]] : acc,
+      []
+    )
 
-  async function onSubmit(values: Schemas["ProfileContributionUpdate"]) {
-    console.log("edit contributions submit", values)
-  }
+  const roleIds = memberships.data?.find(
+    (membership) => membership.guildId.toString() === guildId
+  )?.roleIds
+  const createContribution = useCreateContribution()
 
   return (
     <Dialog>
@@ -39,23 +133,126 @@ export const EditContributions = (
       </DialogTrigger>
       <DialogContent size="lg" className="bg-background">
         <DialogHeader>
-          <DialogTitle>Edit profile</DialogTitle>
+          <DialogTitle>Edit top contributions</DialogTitle>
+          <DialogDescription />
           <DialogCloseButton />
         </DialogHeader>
-        <FormProvider {...form}>
-          <form onSubmit={form.handleSubmit(onSubmit)}>
-            <DialogBody>
+        <DialogBody className="gap-7">
+          <div className="flex flex-col gap-3">
+            {contributions.data?.slice(0, 3).map((contribution) => (
+              <EditContributionCard
+                contribution={contribution}
+                key={contribution.id}
+              />
+            ))}
+          </div>
+          <div className="">
+            <h3 className="mb-3 font-semibold text-muted-foreground">
+              Add contribution
+            </h3>
+            <Card className="flex flex-col gap-2 border border-dashed bg-card-secondary p-5">
+              <div className="pb-2">
+                <Label>Guild</Label>
+                <Select
+                  onValueChange={(value) => {
+                    setGuildId(value)
+                    setRoleId("")
+                  }}
+                  value={guildId}
+                >
+                  <SelectTrigger>
+                    <SelectValue placeholder="Select from your guilds" />
+                  </SelectTrigger>
+                  <SelectContent>
+                    {guilds?.map((data) => (
+                      <SelectItem key={data.id} value={data.id.toString()}>
+                        <div className="flex gap-2">
+                          <Avatar size="xs">
+                            <AvatarImage
+                              src={data.imageUrl}
+                              width={32}
+                              height={32}
+                              alt="guild avatar"
+                            />
+                            <AvatarFallback />
+                          </Avatar>
+                          {data.name}
+                        </div>
+                      </SelectItem>
+                    ))}
+                  </SelectContent>
+                </Select>
+              </div>
+              <div className="pb-2">
+                <Label aria-disabled={!roleIds?.length}>Role</Label>
+                <Select
+                  onValueChange={setRoleId}
+                  value={roleId}
+                  disabled={!roleIds?.length || !guildId}
+                >
+                  <SelectTrigger>
+                    <SelectValue placeholder="Select from your roles" />
+                  </SelectTrigger>
+                  <SelectContent>
+                    {roleIds?.map((roleId) => (
+                      <RoleSelectItem roleId={roleId} guildId={parseInt(guildId)} />
+                    ))}
+                  </SelectContent>
+                </Select>
+              </div>
               <Button
                 colorScheme="success"
-                type="submit"
-                disabled={!form.formState.isValid}
+                className="self-end"
+                disabled={!roleId || !guildId}
+                isLoading={createContribution.isLoading}
+                onClick={() => {
+                  if (contributions.data && contributions.data.length >= 3) {
+                    toast({
+                      title: "Cannot add more than 3 contributions",
+                      description: "Please remove one first before adding a new one",
+                      variant: "error",
+                    })
+                    return
+                  }
+                  createContribution.onSubmit({
+                    guildId: parseInt(guildId),
+                    roleId: parseInt(roleId),
+                  })
+                }}
               >
                 Add
               </Button>
-            </DialogBody>
-          </form>
-        </FormProvider>
+            </Card>
+          </div>
+        </DialogBody>
       </DialogContent>
     </Dialog>
   )
 }
+const RoleSelectItem = ({
+  roleId,
+  guildId,
+}: Pick<MembershipResult, "guildId"> & {
+  roleId: MembershipResult["roleIds"][number]
+}) => {
+  const { data: data } = useSWRImmutable<Role>(
+    `/v2/guilds/${guildId}/roles/${roleId}`
+  )
+  if (!data) return
+  return (
+    <SelectItem key={data.id} value={data.id.toString()}>
+      <div className="flex gap-2">
+        <Avatar size="xs">
+          <AvatarImage
+            src={data.imageUrl}
+            width={32}
+            height={32}
+            alt="guild avatar"
+          />
+          <AvatarFallback />
+        </Avatar>
+        {data.name}
+      </div>
+    </SelectItem>
+  )
+}
diff --git a/src/app/(marketing)/profile/_hooks/useContribution.tsx b/src/app/(marketing)/profile/_hooks/useContribution.tsx
new file mode 100644
index 0000000000..add0bb92f6
--- /dev/null
+++ b/src/app/(marketing)/profile/_hooks/useContribution.tsx
@@ -0,0 +1,10 @@
+import { Schemas } from "@guildxyz/types"
+import useSWRImmutable from "swr/immutable"
+import { useProfile } from "./useProfile"
+
+export const useContribution = () => {
+  const { data: profileData } = useProfile()
+  return useSWRImmutable<Schemas["ProfileContribution"][]>(
+    profileData ? `/v2/profiles/${profileData.username}/contributions` : null
+  )
+}
diff --git a/src/app/(marketing)/profile/_hooks/useCreateContribution.tsx b/src/app/(marketing)/profile/_hooks/useCreateContribution.tsx
new file mode 100644
index 0000000000..877fcca714
--- /dev/null
+++ b/src/app/(marketing)/profile/_hooks/useCreateContribution.tsx
@@ -0,0 +1,54 @@
+import { useToast } from "@/components/ui/hooks/useToast"
+import { Schemas } from "@guildxyz/types"
+import { SignedValidation, useSubmitWithSign } from "hooks/useSubmit"
+import fetcher from "utils/fetcher"
+import { useContribution } from "./useContribution"
+import { useProfile } from "./useProfile"
+
+export type EditProfilePayload = Schemas["ProfileContributionUpdate"]
+
+export const useCreateContribution = () => {
+  const { toast } = useToast()
+  const { data: profile } = useProfile()
+  const contribution = useContribution()
+
+  const update = async (signedValidation: SignedValidation) => {
+    return fetcher(
+      `/v2/profiles/${(profile as Schemas["Profile"]).id}/contributions`,
+      {
+        method: "POST",
+        ...signedValidation,
+      }
+    )
+  }
+
+  const submitWithSign = useSubmitWithSign<Schemas["ProfileContribution"]>(update, {
+    onSuccess: (response) => {
+      contribution.mutate(
+        (prev) => {
+          // WARNING: should we validate here?
+          if (!prev) return
+          prev.push(response)
+          return prev
+        },
+        { revalidate: false }
+      )
+      toast({
+        variant: "success",
+        title: "Successfully created contribution",
+      })
+    },
+    onError: (response) => {
+      toast({
+        variant: "error",
+        title: "Failed to create contribution",
+        description: response.error,
+      })
+    },
+  })
+  return {
+    ...submitWithSign,
+    onSubmit: (payload: EditProfilePayload) =>
+      profile && submitWithSign.onSubmit(payload),
+  }
+}
diff --git a/src/app/(marketing)/profile/_hooks/useDeleteContribution.tsx b/src/app/(marketing)/profile/_hooks/useDeleteContribution.tsx
new file mode 100644
index 0000000000..f438d98554
--- /dev/null
+++ b/src/app/(marketing)/profile/_hooks/useDeleteContribution.tsx
@@ -0,0 +1,52 @@
+import { useToast } from "@/components/ui/hooks/useToast"
+import { Schemas } from "@guildxyz/types"
+import { SignedValidation, useSubmitWithSign } from "hooks/useSubmit"
+import fetcher from "utils/fetcher"
+import { useContribution } from "./useContribution"
+import { useProfile } from "./useProfile"
+
+export const useDeleteContribution = ({
+  contributionId,
+}: { contributionId: Schemas["ProfileContribution"]["id"] }) => {
+  const { toast } = useToast()
+  const { data: profile } = useProfile()
+  const contribution = useContribution()
+
+  const update = async (signedValidation: SignedValidation) => {
+    return fetcher(
+      `/v2/profiles/${(profile as Schemas["Profile"]).id}/contributions/${contributionId}`,
+      {
+        method: "DELETE",
+        ...signedValidation,
+      }
+    )
+  }
+
+  const submitWithSign = useSubmitWithSign<object>(update, {
+    onSuccess: (response) => {
+      contribution.mutate(
+        (prev) => {
+          if (!prev || !contribution.data) return
+          // WARNING: should we validate here?
+          return prev.filter((p) => p.id !== contributionId)
+        },
+        { revalidate: false }
+      )
+      toast({
+        variant: "success",
+        title: "Successfully deleted contribution",
+      })
+    },
+    onError: (response) => {
+      toast({
+        variant: "error",
+        title: "Failed to deleted contribution",
+        description: response.error,
+      })
+    },
+  })
+  return {
+    ...submitWithSign,
+    onSubmit: () => profile && submitWithSign.onSubmit(),
+  }
+}
diff --git a/src/app/(marketing)/profile/_hooks/useMemberships.tsx b/src/app/(marketing)/profile/_hooks/useMemberships.tsx
new file mode 100644
index 0000000000..e971f58f59
--- /dev/null
+++ b/src/app/(marketing)/profile/_hooks/useMemberships.tsx
@@ -0,0 +1,10 @@
+import { useUserPublic } from "@/hooks/useUserPublic"
+import { MembershipResult } from "@guildxyz/types"
+import useSWRImmutable from "swr/immutable"
+
+export const useMemberships = () => {
+  const { id: userId } = useUserPublic()
+  return useSWRImmutable<MembershipResult[]>(
+    userId === undefined ? null : `/v2/users/${userId}/memberships`
+  )
+}
diff --git a/src/app/(marketing)/profile/_hooks/useProfile.tsx b/src/app/(marketing)/profile/_hooks/useProfile.tsx
new file mode 100644
index 0000000000..5b1634e3fc
--- /dev/null
+++ b/src/app/(marketing)/profile/_hooks/useProfile.tsx
@@ -0,0 +1,10 @@
+import { Schemas } from "@guildxyz/types"
+import { useParams } from "next/navigation"
+import useSWRImmutable from "swr/immutable"
+
+export const useProfile = () => {
+  const params = useParams<{ username: string }>()
+  return useSWRImmutable<Schemas["Profile"]>(
+    params?.username ? `/v2/profiles/${params.username}` : null
+  )
+}
diff --git a/src/app/(marketing)/profile/_hooks/useUpdateContribution.tsx b/src/app/(marketing)/profile/_hooks/useUpdateContribution.tsx
new file mode 100644
index 0000000000..85b4b9ecfc
--- /dev/null
+++ b/src/app/(marketing)/profile/_hooks/useUpdateContribution.tsx
@@ -0,0 +1,58 @@
+import { useToast } from "@/components/ui/hooks/useToast"
+import { Schemas } from "@guildxyz/types"
+import { SignedValidation, useSubmitWithSign } from "hooks/useSubmit"
+import fetcher from "utils/fetcher"
+import { useContribution } from "./useContribution"
+import { useProfile } from "./useProfile"
+
+export const useUpdateContribution = ({
+  contributionId,
+}: { contributionId: Schemas["ProfileContribution"]["id"] }) => {
+  const { toast } = useToast()
+  const { data: profile } = useProfile()
+  const contribution = useContribution()
+
+  const update = async (signedValidation: SignedValidation) => {
+    return fetcher(
+      `/v2/profiles/${(profile as Schemas["Profile"]).id}/contributions/${contributionId}`,
+      {
+        method: "PUT",
+        ...signedValidation,
+      }
+    )
+  }
+
+  const submitWithSign = useSubmitWithSign<Schemas["ProfileContribution"]>(update, {
+    onSuccess: (response) => {
+      contribution.mutate(
+        (prev) => {
+          if (!prev || !contribution.data) return
+          // WARNING: should we validate here?
+          return prev.map((p) =>
+            p.id ===
+            (contribution.data as unknown as Schemas["ProfileContribution"]).id
+              ? response
+              : p
+          )
+        },
+        { revalidate: false }
+      )
+      toast({
+        variant: "success",
+        title: "Successfully updated contribution",
+      })
+    },
+    onError: (response) => {
+      toast({
+        variant: "error",
+        title: "Failed to update contribution",
+        description: response.error,
+      })
+    },
+  })
+  return {
+    ...submitWithSign,
+    onSubmit: (payload: Schemas["ProfileContributionUpdate"]) =>
+      profile && submitWithSign.onSubmit(payload),
+  }
+}
diff --git a/src/v2/components/ui/Avatar.tsx b/src/v2/components/ui/Avatar.tsx
index 456056a758..ab3698b7f7 100644
--- a/src/v2/components/ui/Avatar.tsx
+++ b/src/v2/components/ui/Avatar.tsx
@@ -3,6 +3,7 @@ import * as AvatarPrimitive from "@radix-ui/react-avatar"
 import { VariantProps, cva } from "class-variance-authority"
 import NextImage from "next/image"
 import { ComponentPropsWithoutRef, ElementRef, forwardRef } from "react"
+import { Skeleton } from "./Skeleton"
 
 export const avatarVariants = cva(
   "relative flex shrink-0 items-center justify-center overflow-hidden rounded-full bg-image",
@@ -21,7 +22,7 @@ export const avatarVariants = cva(
     defaultVariants: {
       size: "md",
     },
-  }
+  } as const
 )
 
 const Avatar = forwardRef<
@@ -69,7 +70,7 @@ AvatarImage.displayName = AvatarPrimitive.Image.displayName
 const AvatarFallback = forwardRef<
   ElementRef<typeof AvatarPrimitive.Fallback>,
   ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback>
->(({ className, ...props }, ref) => (
+>(({ className, children, ...props }, ref) => (
   <AvatarPrimitive.Fallback
     ref={ref}
     className={cn(
@@ -77,7 +78,9 @@ const AvatarFallback = forwardRef<
       className
     )}
     {...props}
-  />
+  >
+    {children || <Skeleton className="size-full" />}
+  </AvatarPrimitive.Fallback>
 ))
 AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName
 
diff --git a/src/v2/components/ui/Form.tsx b/src/v2/components/ui/Form.tsx
index 1507d95916..885c9501a0 100644
--- a/src/v2/components/ui/Form.tsx
+++ b/src/v2/components/ui/Form.tsx
@@ -96,7 +96,7 @@ const FormLabel = forwardRef<
   return (
     <Label
       ref={ref}
-      className={cn("group text-md", className)}
+      className={cn("group text-md aria-disabled:text-muted-foreground", className)}
       htmlFor={formItemId}
       {...props}
     >
diff --git a/src/v2/components/ui/Select.tsx b/src/v2/components/ui/Select.tsx
new file mode 100644
index 0000000000..fa014a3332
--- /dev/null
+++ b/src/v2/components/ui/Select.tsx
@@ -0,0 +1,153 @@
+"use client"
+
+import { CaretDown, CaretUp, Check } from "@phosphor-icons/react"
+import * as SelectPrimitive from "@radix-ui/react-select"
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+const Select = SelectPrimitive.Root
+
+const SelectGroup = SelectPrimitive.Group
+
+const SelectValue = SelectPrimitive.Value
+
+const SelectTrigger = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>
+>(({ className, children, ...props }, ref) => (
+  <SelectPrimitive.Trigger
+    ref={ref}
+    className={cn(
+      "flex h-10 w-full items-center justify-between rounded-lg border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
+      className
+    )}
+    {...props}
+  >
+    {children}
+    <SelectPrimitive.Icon asChild>
+      <CaretDown className="h-4 w-4 opacity-50" />
+    </SelectPrimitive.Icon>
+  </SelectPrimitive.Trigger>
+))
+SelectTrigger.displayName = SelectPrimitive.Trigger.displayName
+
+const SelectScrollUpButton = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.ScrollUpButton>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollUpButton>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.ScrollUpButton
+    ref={ref}
+    className={cn("flex cursor-default items-center justify-center py-1", className)}
+    {...props}
+  >
+    <CaretUp className="h-4 w-4" />
+  </SelectPrimitive.ScrollUpButton>
+))
+SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName
+
+const SelectScrollDownButton = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.ScrollDownButton>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollDownButton>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.ScrollDownButton
+    ref={ref}
+    className={cn("flex cursor-default items-center justify-center py-1", className)}
+    {...props}
+  >
+    <CaretDown className="h-4 w-4" />
+  </SelectPrimitive.ScrollDownButton>
+))
+SelectScrollDownButton.displayName = SelectPrimitive.ScrollDownButton.displayName
+
+const SelectContent = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content>
+>(({ className, children, position = "popper", ...props }, ref) => (
+  <SelectPrimitive.Portal>
+    <SelectPrimitive.Content
+      ref={ref}
+      className={cn(
+        "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative z-[2000] max-h-96 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=closed]:animate-out data-[state=open]:animate-in",
+        position === "popper" &&
+          "data-[side=left]:-translate-x-1 data-[side=top]:-translate-y-1 data-[side=right]:translate-x-1 data-[side=bottom]:translate-y-1",
+        className
+      )}
+      position={position}
+      {...props}
+    >
+      <SelectScrollUpButton />
+      <SelectPrimitive.Viewport
+        className={cn(
+          "py-2",
+          position === "popper" &&
+            "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]"
+        )}
+      >
+        {children}
+      </SelectPrimitive.Viewport>
+      <SelectScrollDownButton />
+    </SelectPrimitive.Content>
+  </SelectPrimitive.Portal>
+))
+SelectContent.displayName = SelectPrimitive.Content.displayName
+
+const SelectLabel = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Label>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Label>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.Label
+    ref={ref}
+    className={cn("py-1.5 pr-2 pl-8 font-semibold", className)}
+    {...props}
+  />
+))
+SelectLabel.displayName = SelectPrimitive.Label.displayName
+
+const SelectItem = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item>
+>(({ className, children, ...props }, ref) => (
+  <SelectPrimitive.Item
+    ref={ref}
+    className={cn(
+      "relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pr-8 pl-3 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      className
+    )}
+    {...props}
+  >
+    <span className="absolute right-2 flex h-3.5 w-3.5 items-center justify-center">
+      <SelectPrimitive.ItemIndicator>
+        <Check className="h-4 w-4" />
+      </SelectPrimitive.ItemIndicator>
+    </span>
+
+    <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
+  </SelectPrimitive.Item>
+))
+SelectItem.displayName = SelectPrimitive.Item.displayName
+
+const SelectSeparator = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Separator>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Separator>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.Separator
+    ref={ref}
+    className={cn("-mx-1 my-1 h-px bg-muted", className)}
+    {...props}
+  />
+))
+SelectSeparator.displayName = SelectPrimitive.Separator.displayName
+
+export {
+  Select,
+  SelectGroup,
+  SelectValue,
+  SelectTrigger,
+  SelectContent,
+  SelectLabel,
+  SelectItem,
+  SelectSeparator,
+  SelectScrollUpButton,
+  SelectScrollDownButton,
+}

From 4010f413fd29def31522298dc2ede159bb9e3b25 Mon Sep 17 00:00:00 2001
From: valid <valid@zgen.hu>
Date: Thu, 8 Aug 2024 12:55:10 +0200
Subject: [PATCH 56/87] UI(OperatedGuildCard): light mode

---
 .../(marketing)/profile/_components/OperatedGuildCard.tsx   | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/app/(marketing)/profile/_components/OperatedGuildCard.tsx b/src/app/(marketing)/profile/_components/OperatedGuildCard.tsx
index e6d8cb80c1..4229c68d78 100644
--- a/src/app/(marketing)/profile/_components/OperatedGuildCard.tsx
+++ b/src/app/(marketing)/profile/_components/OperatedGuildCard.tsx
@@ -18,7 +18,7 @@ import { PropsWithChildren } from "react"
 
 export const OperatedGuildCard = () => {
   return (
-    <Card className="flex flex-col md:flex-row">
+    <Card className="flex flex-col bg-gray-50 md:flex-row dark:bg-card">
       <div className="relative w-full px-4 py-8 md:w-1/3">
         <div className="absolute inset-0 bg-black" />
         <Image
@@ -40,7 +40,7 @@ export const OperatedGuildCard = () => {
               <Skeleton className="size-full" />
             </AvatarFallback>
           </Avatar>
-          <h3 className="text-center font-bold font-display text-xl">
+          <h3 className="text-center font-bold font-display text-white text-xl">
             The Guilded Age Guild
             <CheckMark className="ml-2 inline-block size-6" />
           </h3>
@@ -83,7 +83,7 @@ const OperatedGuildDetailCard = ({
   Icon,
   children,
 }: PropsWithChildren<{ Icon: Icon }>) => (
-  <Card className="flex items-center gap-2 rounded-xl bg-secondary p-5 font-bold">
+  <Card className="flex items-center gap-2 rounded-xl p-5 font-bold shadow dark:bg-secondary">
     <Icon weight="bold" className="min-w-min" />
     <span className="text-muted-foreground">{children}</span>
   </Card>

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

* feat: add delete profile hook

* feat: add profile editing

* fix: update Header import

* chore: remove sfx from confetti

* fix: update jotai type

* chore: add comment to assertion

* chore: add ts path alias for @app dir

* refactor: apply write-check

* feat: remove profile atom and add swr hooks

* feat: add ssr to page

* feat: add profile owner guard

* feat: add ssr with swr fallback

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

* chore: add note why use constant api url

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

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

From 1a9a79a6498bc640009f410b1a08de693a403f5a Mon Sep 17 00:00:00 2001
From: Dominik Stumpf <s.dominik.work@gmail.com>
Date: Thu, 8 Aug 2024 18:33:12 +0200
Subject: [PATCH 58/87] refactor: revalidate on profile deletion

---
 src/app/(marketing)/profile/[username]/page.tsx      | 12 ++++++------
 .../profile/_components/ContributionCard.tsx         |  6 ++----
 .../(marketing)/profile/_hooks/useDeleteProfile.ts   |  2 ++
 3 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/src/app/(marketing)/profile/[username]/page.tsx b/src/app/(marketing)/profile/[username]/page.tsx
index ae0ec696fe..915c751277 100644
--- a/src/app/(marketing)/profile/[username]/page.tsx
+++ b/src/app/(marketing)/profile/[username]/page.tsx
@@ -23,6 +23,12 @@ async function ssrFetcher<T>(...args: Parameters<typeof fetch>) {
 const fetchPublicProfileData = async ({ username }: { username: string }) => {
   const contributionsRequest = new URL(`v2/profiles/${username}/contributions`, api)
   const profileRequest = new URL(`v2/profiles/${username}`, api)
+  const profile = await ssrFetcher<Schemas["Profile"]>(profileRequest, {
+    next: {
+      tags: ["profile"],
+      revalidate: 600,
+    },
+  })
   const contributions = await ssrFetcher<Schemas["Contribution"][]>(
     contributionsRequest,
     {
@@ -32,12 +38,6 @@ const fetchPublicProfileData = async ({ username }: { username: string }) => {
       },
     }
   )
-  const profile = await ssrFetcher<Schemas["Profile"]>(profileRequest, {
-    next: {
-      tags: ["profile"],
-      revalidate: 600,
-    },
-  })
   const roleRequests = contributions.map(
     ({ roleId, guildId }) => new URL(`v2/guilds/${guildId}/roles/${roleId}`, api)
   )
diff --git a/src/app/(marketing)/profile/_components/ContributionCard.tsx b/src/app/(marketing)/profile/_components/ContributionCard.tsx
index e807ce8fe8..08347d0bde 100644
--- a/src/app/(marketing)/profile/_components/ContributionCard.tsx
+++ b/src/app/(marketing)/profile/_components/ContributionCard.tsx
@@ -2,16 +2,14 @@
 
 import { Guild, Role, Schemas } from "@guildxyz/types"
 import useSWRImmutable from "swr/immutable"
-import fetcher from "utils/fetcher"
 import { ContributionCardView } from "./ContributionCardView"
 
 export const ContributionCard = ({
   contribution,
 }: { contribution: Schemas["Contribution"] }) => {
-  const guild = useSWRImmutable<Guild>(`/v2/guilds/${contribution.guildId}`, fetcher)
+  const guild = useSWRImmutable<Guild>(`/v2/guilds/${contribution.guildId}`)
   const role = useSWRImmutable<Role>(
-    `/v2/guilds/${contribution.guildId}/roles/${contribution.roleId}`,
-    fetcher
+    `/v2/guilds/${contribution.guildId}/roles/${contribution.roleId}`
   )
   if (!role.data || !guild.data) return
   return <ContributionCardView guild={guild.data} role={role.data} />
diff --git a/src/app/(marketing)/profile/_hooks/useDeleteProfile.ts b/src/app/(marketing)/profile/_hooks/useDeleteProfile.ts
index cdae43aa81..1c2a3bc1c8 100644
--- a/src/app/(marketing)/profile/_hooks/useDeleteProfile.ts
+++ b/src/app/(marketing)/profile/_hooks/useDeleteProfile.ts
@@ -2,6 +2,7 @@ import { useToast } from "@/components/ui/hooks/useToast"
 import { SignedValidation, useSubmitWithSign } from "hooks/useSubmit"
 import { useParams, useRouter } from "next/navigation"
 import fetcher from "utils/fetcher"
+import { revalidateProfile } from "../_server_actions/revalidateProfile"
 
 export const useDeleteProfile = () => {
   const { toast } = useToast()
@@ -17,6 +18,7 @@ export const useDeleteProfile = () => {
 
   const submitWithSign = useSubmitWithSign<object>(createProfile, {
     onSuccess: () => {
+      revalidateProfile()
       router.replace("/create-profile")
       toast({
         variant: "success",

From 57623bdf37d2b3f45bf7f6820ef3861e8cdd7cab Mon Sep 17 00:00:00 2001
From: valid <valid@zgen.hu>
Date: Thu, 8 Aug 2024 18:37:00 +0200
Subject: [PATCH 59/87] UI(Avatar): smaller more count text

---
 src/v2/components/ui/Avatar.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/v2/components/ui/Avatar.tsx b/src/v2/components/ui/Avatar.tsx
index ab3698b7f7..fa0a3bafbf 100644
--- a/src/v2/components/ui/Avatar.tsx
+++ b/src/v2/components/ui/Avatar.tsx
@@ -74,7 +74,7 @@ const AvatarFallback = forwardRef<
   <AvatarPrimitive.Fallback
     ref={ref}
     className={cn(
-      "flex h-full w-full items-center justify-center rounded-full bg-muted",
+      "flex h-full w-full items-center justify-center rounded-full bg-muted text-sm",
       className
     )}
     {...props}

From 6984bbec143c4126f6d189004ac1f592e95538d5 Mon Sep 17 00:00:00 2001
From: valid <valid@zgen.hu>
Date: Thu, 8 Aug 2024 19:13:32 +0200
Subject: [PATCH 60/87] add FeaturedIcon to OperatedGuildCard

---
 .../profile/_components/OperatedGuildCard.tsx |  2 ++
 src/v2/components/FeaturedIcon.tsx            | 19 +++++++++++++++++++
 src/v2/components/ui/Tooltip.tsx              |  2 +-
 3 files changed, 22 insertions(+), 1 deletion(-)
 create mode 100644 src/v2/components/FeaturedIcon.tsx

diff --git a/src/app/(marketing)/profile/_components/OperatedGuildCard.tsx b/src/app/(marketing)/profile/_components/OperatedGuildCard.tsx
index 4ed2d386d1..18c6940cf3 100644
--- a/src/app/(marketing)/profile/_components/OperatedGuildCard.tsx
+++ b/src/app/(marketing)/profile/_components/OperatedGuildCard.tsx
@@ -1,4 +1,5 @@
 import { CheckMark } from "@/components/CheckMark"
+import { FeaturedIcon } from "@/components/FeaturedIcon"
 import { Avatar, AvatarFallback } from "@/components/ui/Avatar"
 import { Card } from "@/components/ui/Card"
 import { Skeleton } from "@/components/ui/Skeleton"
@@ -43,6 +44,7 @@ export const OperatedGuildCard = () => {
           <h3 className="text-center font-bold font-display text-white text-xl">
             The Guilded Age Guild
             <CheckMark className="ml-2 inline-block size-6" />
+            <FeaturedIcon className="ml-1 " />
           </h3>
         </div>
       </div>
diff --git a/src/v2/components/FeaturedIcon.tsx b/src/v2/components/FeaturedIcon.tsx
new file mode 100644
index 0000000000..1df61de730
--- /dev/null
+++ b/src/v2/components/FeaturedIcon.tsx
@@ -0,0 +1,19 @@
+import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/Tooltip"
+import { cn } from "@/lib/utils"
+import { PushPin } from "@phosphor-icons/react/dist/ssr"
+
+export const FeaturedIcon = ({ className }: { className?: string }) => (
+  <Tooltip>
+    <TooltipTrigger
+      className={cn(
+        "inline-flex size-6 cursor-default items-center justify-center rounded-md border border-neutral-500 bg-black align-middle",
+        className
+      )}
+    >
+      <PushPin className="size-3" weight="bold" />
+    </TooltipTrigger>
+    <TooltipContent className="!font-body text-sm">
+      This Guild is featured by the Guild.xyz team
+    </TooltipContent>
+  </Tooltip>
+)
diff --git a/src/v2/components/ui/Tooltip.tsx b/src/v2/components/ui/Tooltip.tsx
index ec6d195c26..306e2f3cef 100644
--- a/src/v2/components/ui/Tooltip.tsx
+++ b/src/v2/components/ui/Tooltip.tsx
@@ -34,7 +34,7 @@ const TooltipContent = forwardRef<
     ref={ref}
     sideOffset={sideOffset}
     className={cn(
-      "fade-in-0 zoom-in-95 data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-tooltip max-w-sm animate-in overflow-hidden rounded-xl bg-tooltip px-3 py-1.5 text-center font-medium text-sm text-tooltip-foreground shadow-md data-[state=closed]:animate-out",
+      "fade-in-0 zoom-in-95 data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-tooltip max-w-sm animate-in overflow-hidden rounded-xl bg-tooltip px-3 py-1.5 text-center font-medium font-sans text-sm text-tooltip-foreground shadow-md data-[state=closed]:animate-out",
       className
     )}
     {...props}

From 13c0b172cef834bb6f800ea4f147adcadf3053f6 Mon Sep 17 00:00:00 2001
From: Dominik Stumpf <s.dominik.work@gmail.com>
Date: Thu, 8 Aug 2024 19:15:44 +0200
Subject: [PATCH 61/87] chore: break profile name and remove caretdown

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

diff --git a/src/app/(marketing)/profile/_components/ContributionCardView.tsx b/src/app/(marketing)/profile/_components/ContributionCardView.tsx
index bd5190acb0..979d7dd47c 100644
--- a/src/app/(marketing)/profile/_components/ContributionCardView.tsx
+++ b/src/app/(marketing)/profile/_components/ContributionCardView.tsx
@@ -1,9 +1,8 @@
 import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/Avatar"
 import { AvatarGroup } from "@/components/ui/AvatarGroup"
-import { Button } from "@/components/ui/Button"
 import { Separator } from "@/components/ui/Separator"
 import { Guild, Role } from "@guildxyz/types"
-import { CaretDown, Users } from "@phosphor-icons/react/dist/ssr"
+import { Users } from "@phosphor-icons/react/dist/ssr"
 import { CardWithGuildLabel } from "./CardWithGuildLabel"
 
 export const ContributionCardView = ({
@@ -38,9 +37,6 @@ export const ContributionCardView = ({
             COLLECTION:
           </div>
           <AvatarGroup imageUrls={["", "", ""]} count={87} size="lg" />
-          <Button size="icon" variant="ghost" className="ml-2 hidden md:flex">
-            <CaretDown weight="bold" className="size-5" />
-          </Button>
         </div>
       </div>
     </CardWithGuildLabel>
diff --git a/src/app/(marketing)/profile/_components/Profile.tsx b/src/app/(marketing)/profile/_components/Profile.tsx
index 2b22a1cf11..99510c1cac 100644
--- a/src/app/(marketing)/profile/_components/Profile.tsx
+++ b/src/app/(marketing)/profile/_components/Profile.tsx
@@ -40,7 +40,7 @@ export const Profile = () => {
             </AvatarFallback>
           </Avatar>
         </div>
-        <h1 className="text-center font-bold text-4xl leading-normal tracking-tight">
+        <h1 className="break-all text-center font-bold text-4xl leading-tight tracking-tight">
           {profile.name}
           <CheckMark className="ml-2 inline size-6 fill-yellow-500" />
         </h1>

From 41101b4d951553b1ccc5ed511bb5ebe4100f598d Mon Sep 17 00:00:00 2001
From: valid <valid@zgen.hu>
Date: Thu, 8 Aug 2024 19:16:40 +0200
Subject: [PATCH 62/87] fix(CardWithGuildLabel): label in light mode

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

diff --git a/src/app/(marketing)/profile/_components/CardWithGuildLabel.tsx b/src/app/(marketing)/profile/_components/CardWithGuildLabel.tsx
index 916a6b71af..a9a617e96f 100644
--- a/src/app/(marketing)/profile/_components/CardWithGuildLabel.tsx
+++ b/src/app/(marketing)/profile/_components/CardWithGuildLabel.tsx
@@ -27,7 +27,7 @@ export const CardWithGuildLabel = ({
             />
             <AvatarFallback />
           </Avatar>
-          <div className="truncate font-bold font-display sm:max-w-12">
+          <div className="truncate font-bold font-display text-white sm:max-w-12">
             {guild.name}
           </div>
           <CheckMark className="sm:hidden" />

From bfb3965113118b42aca05da89b5b1280e22213be Mon Sep 17 00:00:00 2001
From: Dominik Stumpf <s.dominik.work@gmail.com>
Date: Thu, 8 Aug 2024 19:34:07 +0200
Subject: [PATCH 63/87] chore: add card behind edit profile

---
 .../(marketing)/profile/_components/EditProfile.tsx   | 11 +++++++----
 1 file changed, 7 insertions(+), 4 deletions(-)

diff --git a/src/app/(marketing)/profile/_components/EditProfile.tsx b/src/app/(marketing)/profile/_components/EditProfile.tsx
index aa1142ea1e..00df614a68 100644
--- a/src/app/(marketing)/profile/_components/EditProfile.tsx
+++ b/src/app/(marketing)/profile/_components/EditProfile.tsx
@@ -2,6 +2,7 @@
 
 import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/Avatar"
 import { Button } from "@/components/ui/Button"
+import { Card } from "@/components/ui/Card"
 import {
   Dialog,
   DialogBody,
@@ -95,10 +96,12 @@ export const EditProfile = () => {
   return (
     <Dialog onOpenChange={disclosure.setValue} open={disclosure.isOpen}>
       <DialogTrigger asChild>
-        <Button className="-top-8 absolute right-0" variant="solid">
-          <Pencil weight="bold" />
-          Edit profile
-        </Button>
+        <Card className="-top-8 absolute right-0 rounded-xl">
+          <Button variant="solid">
+            <Pencil weight="bold" />
+            Edit profile
+          </Button>
+        </Card>
       </DialogTrigger>
       <DialogContent size="lg" className="bg-background">
         <DialogHeader>

From b6af2de03b70811c21e8af79e5e366d7d3f2ad2e Mon Sep 17 00:00:00 2001
From: Dominik Stumpf <s.dominik.work@gmail.com>
Date: Thu, 8 Aug 2024 20:46:57 +0200
Subject: [PATCH 64/87] feat: add not found page

---
 .../profile/[username]/not-found.tsx          | 26 +++++++++++++++++++
 .../(marketing)/profile/[username]/page.tsx   |  7 ++++-
 2 files changed, 32 insertions(+), 1 deletion(-)
 create mode 100644 src/app/(marketing)/profile/[username]/not-found.tsx

diff --git a/src/app/(marketing)/profile/[username]/not-found.tsx b/src/app/(marketing)/profile/[username]/not-found.tsx
new file mode 100644
index 0000000000..9fd2f43c83
--- /dev/null
+++ b/src/app/(marketing)/profile/[username]/not-found.tsx
@@ -0,0 +1,26 @@
+import { Button } from "@/components/ui/Button"
+import { House } from "@phosphor-icons/react/dist/ssr"
+import GuildGhost from "static/avatars/58.svg"
+
+const NotFound = () => {
+  return (
+    <div className="flex min-h-screen flex-col items-center justify-center gap-8">
+      <GuildGhost className="size-24" />
+
+      <h2 className="font-black font-display text-6xl">Profile not found</h2>
+
+      <p className="font-medium"></p>
+
+      <div className="flex flex-col gap-4 sm:flex-row">
+        <a href="/explorer">
+          <Button colorScheme="primary" size="lg">
+            <House weight="bold" />
+            Go to home page
+          </Button>
+        </a>
+      </div>
+    </div>
+  )
+}
+
+export default NotFound
diff --git a/src/app/(marketing)/profile/[username]/page.tsx b/src/app/(marketing)/profile/[username]/page.tsx
index 915c751277..0d19f6e673 100644
--- a/src/app/(marketing)/profile/[username]/page.tsx
+++ b/src/app/(marketing)/profile/[username]/page.tsx
@@ -10,6 +10,7 @@ import { SWRProvider } from "@/components/SWRProvider"
 import { Anchor } from "@/components/ui/Anchor"
 import { Guild, Role, Schemas } from "@guildxyz/types"
 import { ArrowRight } from "@phosphor-icons/react/dist/ssr"
+import { notFound } from "next/navigation"
 import { Profile } from "../_components/Profile"
 
 // TODO: use env var for this url when it is changed to this value.
@@ -23,12 +24,16 @@ async function ssrFetcher<T>(...args: Parameters<typeof fetch>) {
 const fetchPublicProfileData = async ({ username }: { username: string }) => {
   const contributionsRequest = new URL(`v2/profiles/${username}/contributions`, api)
   const profileRequest = new URL(`v2/profiles/${username}`, api)
-  const profile = await ssrFetcher<Schemas["Profile"]>(profileRequest, {
+  const profileResponse = await fetch(profileRequest, {
     next: {
       tags: ["profile"],
       revalidate: 600,
     },
   })
+  if (profileResponse.status === 404) {
+    notFound()
+  }
+  const profile = (await profileResponse.json()) as Schemas["Profile"]
   const contributions = await ssrFetcher<Schemas["Contribution"][]>(
     contributionsRequest,
     {

From 7bc8fb87e33ed235d07785286f1d00a6abfb14de Mon Sep 17 00:00:00 2001
From: valid <valid@zgen.hu>
Date: Fri, 9 Aug 2024 01:30:32 +0200
Subject: [PATCH 65/87] feat: add color picker

---
 .../profile/_components/EditProfile.tsx       | 19 +++++---
 .../_components/ProfileColorPicker.tsx        | 47 +++++++++++++++++++
 2 files changed, 59 insertions(+), 7 deletions(-)
 create mode 100644 src/app/(marketing)/profile/_components/ProfileColorPicker.tsx

diff --git a/src/app/(marketing)/profile/_components/EditProfile.tsx b/src/app/(marketing)/profile/_components/EditProfile.tsx
index 00df614a68..fbbf15ac4e 100644
--- a/src/app/(marketing)/profile/_components/EditProfile.tsx
+++ b/src/app/(marketing)/profile/_components/EditProfile.tsx
@@ -30,7 +30,7 @@ import { cn } from "@/lib/utils"
 import { profileSchema } from "@/lib/validations/profileSchema"
 import { Schemas } from "@guildxyz/types"
 import { zodResolver } from "@hookform/resolvers/zod"
-import { Eyedropper, Image as ImageIcon, Pencil, User } from "@phosphor-icons/react"
+import { Image as ImageIcon, Pencil, User } from "@phosphor-icons/react"
 import useDropzone from "hooks/useDropzone"
 import usePinata from "hooks/usePinata"
 import Image from "next/image"
@@ -39,6 +39,7 @@ import { FormProvider, useForm } from "react-hook-form"
 import { useDeleteProfile } from "../_hooks/useDeleteProfile"
 import { useProfile } from "../_hooks/useProfile"
 import { useUpdateProfile } from "../_hooks/useUpdateProfile"
+import { ProfileColorPicker } from "./ProfileColorPicker"
 
 export const EditProfile = () => {
   const { data: profile } = useProfile()
@@ -49,7 +50,6 @@ export const EditProfile = () => {
     },
     mode: "onTouched",
   })
-
   const disclosure = useDisclosure()
   const editProfile = useUpdateProfile()
 
@@ -119,7 +119,8 @@ export const EditProfile = () => {
                   render={({ field }) => (
                     <FormItem className="relative flex h-32 items-center justify-center overflow-hidden rounded-xl border">
                       <div className="absolute inset-0 size-full">
-                        {field.value ? (
+                        {field.value?.startsWith("http") ||
+                        field.value?.startsWith("/") ? (
                           <Image
                             src={field.value}
                             width={144}
@@ -127,7 +128,13 @@ export const EditProfile = () => {
                             alt="profile background"
                           />
                         ) : (
-                          <div className="size-full bg-purple-800" />
+                          <div
+                            className={`size-full`}
+                            style={{
+                              background: field.value ?? "black",
+                              filter: "brightness(70%)",
+                            }}
+                          />
                         )}
                       </div>
                       <div className="relative flex items-center gap-3">
@@ -138,9 +145,7 @@ export const EditProfile = () => {
                           orientation="vertical"
                           className="h-6 w-0.5 bg-white/50"
                         />
-                        <Button size="icon" variant="ghost">
-                          <Eyedropper weight="bold" size={24} />
-                        </Button>
+                        <ProfileColorPicker />
                       </div>
                     </FormItem>
                   )}
diff --git a/src/app/(marketing)/profile/_components/ProfileColorPicker.tsx b/src/app/(marketing)/profile/_components/ProfileColorPicker.tsx
new file mode 100644
index 0000000000..4129c88869
--- /dev/null
+++ b/src/app/(marketing)/profile/_components/ProfileColorPicker.tsx
@@ -0,0 +1,47 @@
+import { Button } from "@/components/ui/Button"
+import { ColorPicker } from "@/components/ui/ColorPicker"
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/components/ui/DropdownMenu"
+import { Eyedropper } from "@phosphor-icons/react"
+import { useFormContext, useWatch } from "react-hook-form"
+import getColorByImage from "utils/getColorByImage"
+
+export const ProfileColorPicker = () => {
+  const { setValue } = useFormContext()
+
+  const profileImageUrl = useWatch({ name: "profileImageUrl" })
+
+  const setColorByProfilePic = async () => {
+    const color = await getColorByImage(profileImageUrl)
+    setValue("backgroundImageUrl", color)
+  }
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button type="button" size="icon" variant="ghost">
+          <Eyedropper weight="bold" size={24} />
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent>
+        <DropdownMenuLabel className="font-normal">
+          <ColorPicker fieldName="backgroundImageUrl" />
+        </DropdownMenuLabel>
+        <DropdownMenuSeparator />
+        <DropdownMenuItem
+          className="mt-2 flex items-center gap-2 px-4 font-semibold"
+          onClick={setColorByProfilePic}
+        >
+          <Eyedropper weight="bold" className="size-4" />
+          Get color from profile pic
+        </DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  )
+}

From b950348f0676c28bea38ec3d82d7bc458511c19d Mon Sep 17 00:00:00 2001
From: Dominik Stumpf <s.dominik.work@gmail.com>
Date: Fri, 9 Aug 2024 04:51:57 +0200
Subject: [PATCH 66/87] refactor: redirect to error and fetch per guild

---
 .../(marketing)/profile/[username]/page.tsx   |  9 +--
 .../profile/_components/EditContributions.tsx | 65 ++++++++-----------
 2 files changed, 31 insertions(+), 43 deletions(-)

diff --git a/src/app/(marketing)/profile/[username]/page.tsx b/src/app/(marketing)/profile/[username]/page.tsx
index 0d19f6e673..c06199516e 100644
--- a/src/app/(marketing)/profile/[username]/page.tsx
+++ b/src/app/(marketing)/profile/[username]/page.tsx
@@ -10,7 +10,7 @@ import { SWRProvider } from "@/components/SWRProvider"
 import { Anchor } from "@/components/ui/Anchor"
 import { Guild, Role, Schemas } from "@guildxyz/types"
 import { ArrowRight } from "@phosphor-icons/react/dist/ssr"
-import { notFound } from "next/navigation"
+import { notFound, redirect } from "next/navigation"
 import { Profile } from "../_components/Profile"
 
 // TODO: use env var for this url when it is changed to this value.
@@ -30,9 +30,10 @@ const fetchPublicProfileData = async ({ username }: { username: string }) => {
       revalidate: 600,
     },
   })
-  if (profileResponse.status === 404) {
-    notFound()
-  }
+
+  if (profileResponse.status === 404) notFound()
+  if (!profileResponse.ok) redirect("/error")
+
   const profile = (await profileResponse.json()) as Schemas["Profile"]
   const contributions = await ssrFetcher<Schemas["Contribution"][]>(
     contributionsRequest,
diff --git a/src/app/(marketing)/profile/_components/EditContributions.tsx b/src/app/(marketing)/profile/_components/EditContributions.tsx
index 1a5b7b8a79..cbc1617196 100644
--- a/src/app/(marketing)/profile/_components/EditContributions.tsx
+++ b/src/app/(marketing)/profile/_components/EditContributions.tsx
@@ -29,7 +29,6 @@ import { AvatarFallback } from "@radix-ui/react-avatar"
 import { DialogDescription } from "@radix-ui/react-dialog"
 import { useState } from "react"
 import useSWRImmutable from "swr/immutable"
-import fetcher from "utils/fetcher"
 import { useContribution } from "../_hooks/useContribution"
 import { useCreateContribution } from "../_hooks/useCreateContribution"
 import { useDeleteContribution } from "../_hooks/useDeleteContribution"
@@ -37,23 +36,11 @@ import { useMemberships } from "../_hooks/useMemberships"
 import { useUpdateContribution } from "../_hooks/useUpdateContribution"
 import { CardWithGuildLabel } from "./CardWithGuildLabel"
 
-const guildFetcher = (urls: string[]) => {
-  return Promise.all(urls.map((url) => fetcher(url) as Promise<Guild>))
-}
-const useYourVerifiedGuild = () => {
-  const yourGuilds = useYourGuilds()
-  const requests = yourGuilds.data
-    ? yourGuilds.data.map((guild) => `/v2/guilds/${guild.id}`)
-    : null
-  return { guilds: useSWRImmutable(requests, guildFetcher), baseGuilds: yourGuilds }
-}
-
 const EditContributionCard = ({
   contribution,
 }: { contribution: Schemas["Contribution"] }) => {
   const { data: guild } = useSWRImmutable<Guild>(
-    `/v2/guilds/${contribution.guildId}`,
-    fetcher
+    `/v2/guilds/${contribution.guildId}`
   )
   const memberships = useMemberships()
   const editContribution = useUpdateContribution({ contributionId: contribution.id })
@@ -107,17 +94,8 @@ export const EditContributions = () => {
   const [roleId, setRoleId] = useState("")
   const { toast } = useToast()
 
-  const {
-    guilds: { data: guildData },
-    baseGuilds,
-  } = useYourVerifiedGuild()
-  const guilds =
-    guildData &&
-    baseGuilds.data?.reduce<Guild[]>(
-      (acc, curr, i) =>
-        curr.tags.includes("VERIFIED") ? [...acc, guildData[i]] : acc,
-      []
-    )
+  const { data: baseGuilds } = useYourGuilds()
+  const guilds = baseGuilds?.filter(({ tags }) => tags.includes("VERIFIED"))
 
   const roleIds = memberships.data?.find(
     (membership) => membership.guildId.toString() === guildId
@@ -165,20 +143,7 @@ export const EditContributions = () => {
                   </SelectTrigger>
                   <SelectContent>
                     {guilds?.map((data) => (
-                      <SelectItem key={data.id} value={data.id.toString()}>
-                        <div className="flex gap-2">
-                          <Avatar size="xs">
-                            <AvatarImage
-                              src={data.imageUrl}
-                              width={32}
-                              height={32}
-                              alt="guild avatar"
-                            />
-                            <AvatarFallback />
-                          </Avatar>
-                          {data.name}
-                        </div>
-                      </SelectItem>
+                      <GuildSelectItem key={data.id} guildId={data.id} />
                     ))}
                   </SelectContent>
                 </Select>
@@ -233,6 +198,28 @@ export const EditContributions = () => {
     </Dialog>
   )
 }
+
+const GuildSelectItem = ({ guildId }: Pick<MembershipResult, "guildId">) => {
+  const { data } = useSWRImmutable<Guild>(`/v2/guilds/${guildId}`)
+  if (!data) return
+  return (
+    <SelectItem value={data.id.toString()}>
+      <div className="flex gap-2">
+        <Avatar size="xs">
+          <AvatarImage
+            src={data.imageUrl}
+            width={32}
+            height={32}
+            alt="guild avatar"
+          />
+          <AvatarFallback />
+        </Avatar>
+        {data.name}
+      </div>
+    </SelectItem>
+  )
+}
+
 const RoleSelectItem = ({
   roleId,
   guildId,

From 71b4ad0224250da38624dd71d829eede6d19742c Mon Sep 17 00:00:00 2001
From: Dominik Stumpf <122315398+dominik-stumpf@users.noreply.github.com>
Date: Fri, 9 Aug 2024 12:56:16 +0200
Subject: [PATCH 67/87] add optimistic update for edit contributions and
 profile (#1438)

* refactor: redirect to error and fetch per guild

* feat: add optimistic update to contributions

* feat: finish update contribution and polish

* feat: add optimistic update to profile

* chore: rename revalidateContribution and fix type error

* feat: memoize profile guard
---
 .../profile/_components/EditContributions.tsx |  4 +-
 .../profile/_components/Profile.tsx           |  4 +-
 .../profile/_components/ProfileOwnerGuard.tsx |  8 +--
 ...eContribution.tsx => useContributions.tsx} |  2 +-
 .../profile/_hooks/useCreateContribution.tsx  | 51 ++++++++++++-------
 .../profile/_hooks/useDeleteContribution.tsx  | 34 +++++++------
 .../profile/_hooks/useUpdateContribution.tsx  | 44 +++++++++-------
 .../profile/_hooks/useUpdateProfile.ts        | 24 +++++----
 ...ribution.ts => revalidateContributions.ts} |  2 +-
 src/hooks/useSetKeyPair.ts                    |  2 +
 src/hooks/useSubmit/types.ts                  |  1 +
 src/hooks/useSubmit/useSubmit.ts              | 13 +++--
 12 files changed, 115 insertions(+), 74 deletions(-)
 rename src/app/(marketing)/profile/_hooks/{useContribution.tsx => useContributions.tsx} (88%)
 rename src/app/(marketing)/profile/_server_actions/{revalidateContribution.ts => revalidateContributions.ts} (65%)

diff --git a/src/app/(marketing)/profile/_components/EditContributions.tsx b/src/app/(marketing)/profile/_components/EditContributions.tsx
index cbc1617196..e428d5c431 100644
--- a/src/app/(marketing)/profile/_components/EditContributions.tsx
+++ b/src/app/(marketing)/profile/_components/EditContributions.tsx
@@ -29,7 +29,7 @@ import { AvatarFallback } from "@radix-ui/react-avatar"
 import { DialogDescription } from "@radix-ui/react-dialog"
 import { useState } from "react"
 import useSWRImmutable from "swr/immutable"
-import { useContribution } from "../_hooks/useContribution"
+import { useContributions } from "../_hooks/useContributions"
 import { useCreateContribution } from "../_hooks/useCreateContribution"
 import { useDeleteContribution } from "../_hooks/useDeleteContribution"
 import { useMemberships } from "../_hooks/useMemberships"
@@ -88,7 +88,7 @@ const EditContributionCard = ({
 }
 
 export const EditContributions = () => {
-  const contributions = useContribution()
+  const contributions = useContributions()
   const memberships = useMemberships()
   const [guildId, setGuildId] = useState("")
   const [roleId, setRoleId] = useState("")
diff --git a/src/app/(marketing)/profile/_components/Profile.tsx b/src/app/(marketing)/profile/_components/Profile.tsx
index 99510c1cac..b626107250 100644
--- a/src/app/(marketing)/profile/_components/Profile.tsx
+++ b/src/app/(marketing)/profile/_components/Profile.tsx
@@ -11,13 +11,13 @@ import { EditProfile } from "../_components/EditProfile"
 import { OperatedGuildCard } from "../_components/OperatedGuildCard"
 import { ProfileOwnerGuard } from "../_components/ProfileOwnerGuard"
 import { RecentActivity } from "../_components/RecentActivity"
-import { useContribution } from "../_hooks/useContribution"
+import { useContributions } from "../_hooks/useContributions"
 import { useProfile } from "../_hooks/useProfile"
 import { ProfileSkeleton } from "./ProfileSkeleton"
 
 export const Profile = () => {
   const { data: profile } = useProfile()
-  const { data: contributions } = useContribution()
+  const { data: contributions } = useContributions()
 
   if (!profile || !contributions) return <ProfileSkeleton />
 
diff --git a/src/app/(marketing)/profile/_components/ProfileOwnerGuard.tsx b/src/app/(marketing)/profile/_components/ProfileOwnerGuard.tsx
index 6de4e15b1e..1788c4f967 100644
--- a/src/app/(marketing)/profile/_components/ProfileOwnerGuard.tsx
+++ b/src/app/(marketing)/profile/_components/ProfileOwnerGuard.tsx
@@ -1,14 +1,16 @@
 "use client"
 
 import { useUserPublic } from "@/hooks/useUserPublic"
-import { PropsWithChildren } from "react"
+import { PropsWithChildren, useMemo } from "react"
 import { useProfile } from "../_hooks/useProfile"
 
 export const ProfileOwnerGuard = ({ children }: PropsWithChildren) => {
   const { data: profile } = useProfile()
   const { id: publicUserId } = useUserPublic()
-  const isProfileOwner = !!profile?.userId && publicUserId === profile.userId
-
+  const isProfileOwner = useMemo(
+    () => !!profile?.userId && publicUserId === profile.userId,
+    [publicUserId]
+  )
   if (!isProfileOwner) return
   return children
 }
diff --git a/src/app/(marketing)/profile/_hooks/useContribution.tsx b/src/app/(marketing)/profile/_hooks/useContributions.tsx
similarity index 88%
rename from src/app/(marketing)/profile/_hooks/useContribution.tsx
rename to src/app/(marketing)/profile/_hooks/useContributions.tsx
index 88c4c01317..6c51947abf 100644
--- a/src/app/(marketing)/profile/_hooks/useContribution.tsx
+++ b/src/app/(marketing)/profile/_hooks/useContributions.tsx
@@ -2,7 +2,7 @@ import { Schemas } from "@guildxyz/types"
 import useSWRImmutable from "swr/immutable"
 import { useProfile } from "./useProfile"
 
-export const useContribution = () => {
+export const useContributions = () => {
   const { data: profileData } = useProfile()
   return useSWRImmutable<Schemas["Contribution"][]>(
     profileData ? `/v2/profiles/${profileData.username}/contributions` : null
diff --git a/src/app/(marketing)/profile/_hooks/useCreateContribution.tsx b/src/app/(marketing)/profile/_hooks/useCreateContribution.tsx
index abfbc22ee2..e7d840da46 100644
--- a/src/app/(marketing)/profile/_hooks/useCreateContribution.tsx
+++ b/src/app/(marketing)/profile/_hooks/useCreateContribution.tsx
@@ -2,16 +2,14 @@ import { useToast } from "@/components/ui/hooks/useToast"
 import { Schemas } from "@guildxyz/types"
 import { SignedValidation, useSubmitWithSign } from "hooks/useSubmit"
 import fetcher from "utils/fetcher"
-import { revalidateContribution } from "../_server_actions/revalidateContribution"
-import { useContribution } from "./useContribution"
+import { revalidateContributions } from "../_server_actions/revalidateContributions"
+import { useContributions } from "./useContributions"
 import { useProfile } from "./useProfile"
 
-export type EditProfilePayload = Schemas["ContributionUpdate"]
-
 export const useCreateContribution = () => {
   const { toast } = useToast()
   const { data: profile } = useProfile()
-  const contribution = useContribution()
+  const contributions = useContributions()
 
   const update = async (signedValidation: SignedValidation) => {
     return fetcher(
@@ -24,21 +22,36 @@ export const useCreateContribution = () => {
   }
 
   const submitWithSign = useSubmitWithSign<Schemas["Contribution"]>(update, {
-    onSuccess: (response) => {
-      contribution.mutate(
-        (prev) => {
-          // WARNING: should we validate here?
-          if (!prev) return
-          prev.push(response)
-          return prev
+    onOptimistic: (response, payload) => {
+      if (!profile?.userId) return
+      contributions.mutate(
+        async () => {
+          if (!contributions.data) return
+          const contribution = await response
+          contributions.data[
+            contributions.data.findLastIndex(({ id }) => id === -1)
+          ] = contribution
+          return contributions.data.filter(({ id }) => id !== -1)
         },
-        { revalidate: false }
+        {
+          revalidate: false,
+          rollbackOnError: true,
+          optimisticData: () => {
+            // @ts-expect-error: incorrect types coming from lib
+            const fakeContribution: Schemas["Contribution"] = {
+              ...(payload as Schemas["ContributionUpdate"]),
+              id: -1,
+              profileId: profile.userId,
+            }
+            if (!contributions.data) return [fakeContribution]
+            contributions.data.push(fakeContribution)
+            return contributions.data
+          },
+        }
       )
-      revalidateContribution()
-      toast({
-        variant: "success",
-        title: "Successfully created contribution",
-      })
+    },
+    onSuccess: () => {
+      revalidateContributions()
     },
     onError: (response) => {
       toast({
@@ -50,7 +63,7 @@ export const useCreateContribution = () => {
   })
   return {
     ...submitWithSign,
-    onSubmit: (payload: EditProfilePayload) =>
+    onSubmit: (payload: Schemas["ContributionUpdate"]) =>
       profile && submitWithSign.onSubmit(payload),
   }
 }
diff --git a/src/app/(marketing)/profile/_hooks/useDeleteContribution.tsx b/src/app/(marketing)/profile/_hooks/useDeleteContribution.tsx
index f69753505e..9a09b2e75e 100644
--- a/src/app/(marketing)/profile/_hooks/useDeleteContribution.tsx
+++ b/src/app/(marketing)/profile/_hooks/useDeleteContribution.tsx
@@ -2,8 +2,8 @@ import { useToast } from "@/components/ui/hooks/useToast"
 import { Schemas } from "@guildxyz/types"
 import { SignedValidation, useSubmitWithSign } from "hooks/useSubmit"
 import fetcher from "utils/fetcher"
-import { revalidateContribution } from "../_server_actions/revalidateContribution"
-import { useContribution } from "./useContribution"
+import { revalidateContributions } from "../_server_actions/revalidateContributions"
+import { useContributions } from "./useContributions"
 import { useProfile } from "./useProfile"
 
 export const useDeleteContribution = ({
@@ -11,7 +11,7 @@ export const useDeleteContribution = ({
 }: { contributionId: Schemas["Contribution"]["id"] }) => {
   const { toast } = useToast()
   const { data: profile } = useProfile()
-  const contribution = useContribution()
+  const contributions = useContributions()
 
   const update = async (signedValidation: SignedValidation) => {
     return fetcher(
@@ -24,20 +24,24 @@ export const useDeleteContribution = ({
   }
 
   const submitWithSign = useSubmitWithSign<object>(update, {
-    onSuccess: () => {
-      contribution.mutate(
-        (prev) => {
-          if (!prev || !contribution.data) return
-          // WARNING: should we validate here?
-          return prev.filter((p) => p.id !== contributionId)
+    onOptimistic: (response) => {
+      contributions.mutate(
+        async () => {
+          await response
+          return contributions.data?.filter((p) => p.id !== contributionId)
         },
-        { revalidate: false }
+        {
+          revalidate: false,
+          rollbackOnError: true,
+          optimisticData: () => {
+            if (!contributions.data) return []
+            return contributions.data.filter((p) => p.id !== contributionId)
+          },
+        }
       )
-      revalidateContribution()
-      toast({
-        variant: "success",
-        title: "Successfully deleted contribution",
-      })
+    },
+    onSuccess: () => {
+      revalidateContributions()
     },
     onError: (response) => {
       toast({
diff --git a/src/app/(marketing)/profile/_hooks/useUpdateContribution.tsx b/src/app/(marketing)/profile/_hooks/useUpdateContribution.tsx
index febe464054..cfc847d9d8 100644
--- a/src/app/(marketing)/profile/_hooks/useUpdateContribution.tsx
+++ b/src/app/(marketing)/profile/_hooks/useUpdateContribution.tsx
@@ -2,8 +2,8 @@ import { useToast } from "@/components/ui/hooks/useToast"
 import { Schemas } from "@guildxyz/types"
 import { SignedValidation, useSubmitWithSign } from "hooks/useSubmit"
 import fetcher from "utils/fetcher"
-import { revalidateContribution } from "../_server_actions/revalidateContribution"
-import { useContribution } from "./useContribution"
+import { revalidateContributions } from "../_server_actions/revalidateContributions"
+import { useContributions } from "./useContributions"
 import { useProfile } from "./useProfile"
 
 export const useUpdateContribution = ({
@@ -11,7 +11,7 @@ export const useUpdateContribution = ({
 }: { contributionId: Schemas["Contribution"]["id"] }) => {
   const { toast } = useToast()
   const { data: profile } = useProfile()
-  const contribution = useContribution()
+  const contributions = useContributions()
 
   const update = async (signedValidation: SignedValidation) => {
     return fetcher(
@@ -24,24 +24,32 @@ export const useUpdateContribution = ({
   }
 
   const submitWithSign = useSubmitWithSign<Schemas["Contribution"]>(update, {
-    onSuccess: (response) => {
-      contribution.mutate(
-        (prev) => {
-          if (!prev || !contribution.data) return
-          // WARNING: should we validate here?
-          return prev.map((p) =>
-            p.id === (contribution.data as unknown as Schemas["Contribution"]).id
-              ? response
-              : p
+    onOptimistic: (response, payload) => {
+      if (!profile?.userId) return
+      contributions.mutate(
+        async () => {
+          if (!contributions.data) return
+          const contribution = await response
+          return contributions.data.map((data) =>
+            data.id === contributionId ? contribution : data
           )
         },
-        { revalidate: false }
+        {
+          revalidate: false,
+          rollbackOnError: true,
+          optimisticData: () => {
+            if (!contributions.data) return []
+            return contributions.data.map((data) =>
+              data.id === contributionId
+                ? { ...data, ...(payload as Schemas["Contribution"]) }
+                : data
+            )
+          },
+        }
       )
-      revalidateContribution()
-      toast({
-        variant: "success",
-        title: "Successfully updated contribution",
-      })
+    },
+    onSuccess: () => {
+      revalidateContributions()
     },
     onError: (response) => {
       toast({
diff --git a/src/app/(marketing)/profile/_hooks/useUpdateProfile.ts b/src/app/(marketing)/profile/_hooks/useUpdateProfile.ts
index 8da9a9a059..fcd54d6263 100644
--- a/src/app/(marketing)/profile/_hooks/useUpdateProfile.ts
+++ b/src/app/(marketing)/profile/_hooks/useUpdateProfile.ts
@@ -3,6 +3,7 @@ import { Schemas } from "@guildxyz/types"
 import { SignedValidation, useSubmitWithSign } from "hooks/useSubmit"
 import { useParams, useRouter } from "next/navigation"
 import fetcher from "utils/fetcher"
+import { revalidateContributions } from "../_server_actions/revalidateContributions"
 import { revalidateProfile } from "../_server_actions/revalidateProfile"
 import { useProfile } from "./useProfile"
 
@@ -10,7 +11,7 @@ export const useUpdateProfile = () => {
   const { toast } = useToast()
   const router = useRouter()
   const params = useParams<{ username: string }>()
-  const { mutate } = useProfile()
+  const { mutate, data: profile } = useProfile()
 
   const updateProfile = async (signedValidation: SignedValidation) => {
     return fetcher(`/v2/profiles/${params?.username}`, {
@@ -20,18 +21,21 @@ export const useUpdateProfile = () => {
   }
 
   const submitWithSign = useSubmitWithSign<Schemas["Profile"]>(updateProfile, {
-    onSuccess: (response) => {
-      console.log("onSuccess", response)
-      router.replace(`/profile/${response.username}`)
-      mutate(() => response, { revalidate: false })
-      revalidateProfile()
-      toast({
-        variant: "success",
-        title: "Successfully updated profile",
+    onOptimistic: (response, payload) => {
+      mutate(() => response, {
+        revalidate: false,
+        rollbackOnError: true,
+        optimisticData: () => payload,
       })
     },
+    onSuccess: async (response) => {
+      await revalidateProfile()
+      if (profile?.username !== response.username) {
+        await revalidateContributions()
+        router.replace(`/profile/${response.username}`)
+      }
+    },
     onError: (response) => {
-      console.log("onError", response)
       toast({
         variant: "error",
         title: "Failed to update profile",
diff --git a/src/app/(marketing)/profile/_server_actions/revalidateContribution.ts b/src/app/(marketing)/profile/_server_actions/revalidateContributions.ts
similarity index 65%
rename from src/app/(marketing)/profile/_server_actions/revalidateContribution.ts
rename to src/app/(marketing)/profile/_server_actions/revalidateContributions.ts
index fa10ae1ed6..cbf800b1f7 100644
--- a/src/app/(marketing)/profile/_server_actions/revalidateContribution.ts
+++ b/src/app/(marketing)/profile/_server_actions/revalidateContributions.ts
@@ -2,6 +2,6 @@
 
 import { revalidateTag } from "next/cache"
 
-export async function revalidateContribution() {
+export async function revalidateContributions() {
   revalidateTag("contributions")
 }
diff --git a/src/hooks/useSetKeyPair.ts b/src/hooks/useSetKeyPair.ts
index b1ebf9503f..4b2cc6b55e 100644
--- a/src/hooks/useSetKeyPair.ts
+++ b/src/hooks/useSetKeyPair.ts
@@ -94,6 +94,7 @@ const useSetKeyPair = (submitOptions?: UseSubmitOptions) => {
   const recaptcha = useAtomValue(recaptchaAtom)
 
   const setSubmitResponse = useSubmit(
+    // @ts-ignore
     async ({
       signProps,
     }: {
@@ -175,6 +176,7 @@ const useSetKeyPair = (submitOptions?: UseSubmitOptions) => {
       return { keyPair: generatedKeys, user: userProfile }
     },
 
+    // @ts-ignore
     {
       ...submitOptions,
       onError: (error) => {
diff --git a/src/hooks/useSubmit/types.ts b/src/hooks/useSubmit/types.ts
index cffa07fd2a..6da8497725 100644
--- a/src/hooks/useSubmit/types.ts
+++ b/src/hooks/useSubmit/types.ts
@@ -40,6 +40,7 @@ export type MessageParams = {
 export type UseSubmitOptions<ResponseType = void> = {
   onSuccess?: (response: ResponseType) => void
   onError?: (error: any) => void
+  onOptimistic?: (response: Promise<ResponseType>, payload: any) => void
 
   // Use catefully! If this is set to true, a .onSubmit() call can reject!
   allowThrow?: boolean
diff --git a/src/hooks/useSubmit/useSubmit.ts b/src/hooks/useSubmit/useSubmit.ts
index 048e1c2007..75a5f630bb 100644
--- a/src/hooks/useSubmit/useSubmit.ts
+++ b/src/hooks/useSubmit/useSubmit.ts
@@ -21,7 +21,12 @@ type FetcherFunction<ResponseType> = ({
 
 const useSubmit = <DataType, ResponseType>(
   fetch: (data?: DataType) => Promise<ResponseType>,
-  { onSuccess, onError, allowThrow }: UseSubmitOptions<ResponseType> = {}
+  {
+    onSuccess,
+    onError,
+    allowThrow,
+    onOptimistic,
+  }: UseSubmitOptions<ResponseType> = {}
 ) => {
   const [isLoading, setIsLoading] = useState<boolean>(false)
   const [error, setError] = useState<any>(undefined)
@@ -31,7 +36,9 @@ const useSubmit = <DataType, ResponseType>(
     (data?: DataType): Promise<ResponseType> => {
       setIsLoading(true)
       setError(undefined)
-      return fetch(data)
+      const response = fetch(data)
+      onOptimistic?.(response, data)
+      return response
         .then((d) => {
           onSuccess?.(d)
           setResponse(d)
@@ -47,7 +54,7 @@ const useSubmit = <DataType, ResponseType>(
         })
         .finally(() => setIsLoading(false))
     },
-    [allowThrow, fetch, onError, onSuccess]
+    [allowThrow, fetch, onError, onSuccess, onOptimistic]
   )
 
   return {

From 9d3e16758a17796406ad61ed360e019cbf272d40 Mon Sep 17 00:00:00 2001
From: valid <valid@zgen.hu>
Date: Mon, 12 Aug 2024 15:48:08 +0200
Subject: [PATCH 68/87] static banner style base

---
 src/app/(marketing)/profile/[username]/page.tsx | 15 ++++++++++++++-
 1 file changed, 14 insertions(+), 1 deletion(-)

diff --git a/src/app/(marketing)/profile/[username]/page.tsx b/src/app/(marketing)/profile/[username]/page.tsx
index c06199516e..79515aa1ee 100644
--- a/src/app/(marketing)/profile/[username]/page.tsx
+++ b/src/app/(marketing)/profile/[username]/page.tsx
@@ -96,7 +96,20 @@ const Page = async ({ params: { username } }: { params: { username: string } })
         <LayoutHero>
           <Header />
           <LayoutBanner className="-bottom-[500px]">
-            <div className="absolute inset-0 bg-[url('/banner.svg')] opacity-10" />
+            <div
+              className="absolute inset-0 bg-[url('/banner.svg')] opacity-5"
+              style={{
+                backgroundSize: "auto 50%",
+                backgroundPosition: "top 5px right 0px",
+              }}
+            />
+            <div
+              className="absolute inset-0"
+              style={{
+                background:
+                  "radial-gradient(circle at center, transparent 5%, hsl(var(--banner)))",
+              }}
+            />
             <div className="absolute inset-0 bg-gradient-to-t from-background" />
           </LayoutBanner>
         </LayoutHero>

From c0ff920d2b0fe609153f7fca3dc5df3867c8a99e Mon Sep 17 00:00:00 2001
From: valid <valid@zgen.hu>
Date: Mon, 12 Aug 2024 16:36:13 +0200
Subject: [PATCH 69/87] =?UTF-8?q?UI:=20layout=20&=C2=A0responsivity=20impr?=
 =?UTF-8?q?os?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../(marketing)/profile/[username]/page.tsx   |  8 +++---
 .../profile/_components/EditProfile.tsx       |  2 +-
 .../profile/_components/Profile.tsx           | 26 +++++++++----------
 3 files changed, 18 insertions(+), 18 deletions(-)

diff --git a/src/app/(marketing)/profile/[username]/page.tsx b/src/app/(marketing)/profile/[username]/page.tsx
index 79515aa1ee..2cd39a6cb0 100644
--- a/src/app/(marketing)/profile/[username]/page.tsx
+++ b/src/app/(marketing)/profile/[username]/page.tsx
@@ -93,7 +93,7 @@ const Page = async ({ params: { username } }: { params: { username: string } })
       }}
     >
       <Layout>
-        <LayoutHero>
+        <LayoutHero className="pb-4 md:pb-10">
           <Header />
           <LayoutBanner className="-bottom-[500px]">
             <div
@@ -113,11 +113,11 @@ const Page = async ({ params: { username } }: { params: { username: string } })
             <div className="absolute inset-0 bg-gradient-to-t from-background" />
           </LayoutBanner>
         </LayoutHero>
-        <LayoutMain>
+        <LayoutMain className="top-0">
           <Profile />
         </LayoutMain>
-        <LayoutFooter>
-          <p className="mb-12 text-center font-medium text-muted-foreground">
+        <LayoutFooter className="pt-28 pb-5">
+          <p className="text-center font-medium text-muted-foreground">
             Guild Profiles are currently in invite only early access, only available
             to{" "}
             <Anchor
diff --git a/src/app/(marketing)/profile/_components/EditProfile.tsx b/src/app/(marketing)/profile/_components/EditProfile.tsx
index fbbf15ac4e..c7c8019b0c 100644
--- a/src/app/(marketing)/profile/_components/EditProfile.tsx
+++ b/src/app/(marketing)/profile/_components/EditProfile.tsx
@@ -96,7 +96,7 @@ export const EditProfile = () => {
   return (
     <Dialog onOpenChange={disclosure.setValue} open={disclosure.isOpen}>
       <DialogTrigger asChild>
-        <Card className="-top-8 absolute right-0 rounded-xl">
+        <Card className="absolute top-0 right-0 rounded-xl">
           <Button variant="solid">
             <Pencil weight="bold" />
             Edit profile
diff --git a/src/app/(marketing)/profile/_components/Profile.tsx b/src/app/(marketing)/profile/_components/Profile.tsx
index b626107250..1a9ba194d1 100644
--- a/src/app/(marketing)/profile/_components/Profile.tsx
+++ b/src/app/(marketing)/profile/_components/Profile.tsx
@@ -22,13 +22,13 @@ export const Profile = () => {
   if (!profile || !contributions) return <ProfileSkeleton />
 
   return (
-    <div className="mt-24">
-      <div className="relative mb-24 flex flex-col items-center">
+    <>
+      <div className="relative mb-12 flex flex-col items-center pt-12 md:mb-20 md:pt-14">
         <ProfileOwnerGuard>
           <EditProfile />
         </ProfileOwnerGuard>
-        <div className="relative mb-12 flex items-center justify-center">
-          <Avatar className="size-48">
+        <div className="relative mb-6 flex items-center justify-center">
+          <Avatar className="size-40 md:size-48">
             <AvatarImage
               src={profile.profileImageUrl ?? ""}
               alt="profile"
@@ -40,22 +40,22 @@ export const Profile = () => {
             </AvatarFallback>
           </Avatar>
         </div>
-        <h1 className="break-all text-center font-bold text-4xl leading-tight tracking-tight">
+        <h1 className="break-all text-center font-extrabold text-3xl leading-tight tracking-tight md:text-4xl">
           {profile.name}
-          <CheckMark className="ml-2 inline size-6 fill-yellow-500" />
+          <CheckMark className="ml-2 inline size-6 fill-yellow-500 align-baseline" />
         </h1>
-        <div className="text-lg text-muted-foreground">@{profile.username}</div>
-        <p className="mt-6 max-w-md text-pretty text-center text-lg text-muted-foreground">
+        <div className="font-medium text-muted-foreground">@{profile.username}</div>
+        <p className="mt-4 max-w-md text-pretty text-center text-lg text-muted-foreground md:mt-6">
           {profile.bio}
         </p>
-        <div className="mt-8 grid grid-cols-[repeat(3,auto)] gap-x-8 gap-y-6 sm:grid-cols-[repeat(5,auto)]">
+        <div className="mt-8 grid grid-cols-[repeat(3,auto)] gap-x-6 gap-y-4 sm:grid-cols-[repeat(5,auto)]">
           <div className="flex flex-col items-center leading-tight">
-            <div className="font-bold text-lg">3232</div>
+            <div className="font-bold md:text-lg">3232</div>
             <div className="text-muted-foreground">Guildmates</div>
           </div>
-          <Separator orientation="vertical" className="h-12" />
+          <Separator orientation="vertical" className="h-10 md:h-12" />
           <div className="flex flex-col items-center leading-tight">
-            <div className="font-bold text-lg">0</div>
+            <div className="font-bold md:text-lg">0</div>
             <div className="text-muted-foreground">Followers</div>
           </div>
           <Separator orientation="vertical" className="hidden h-12 sm:block" />
@@ -88,6 +88,6 @@ export const Profile = () => {
           &hellip; only last 20 actions are shown
         </p>
       </div>
-    </div>
+    </>
   )
 }

From 26223cf550286fb0b1adb3874701ac7d2b9e0aff Mon Sep 17 00:00:00 2001
From: valid <valid@zgen.hu>
Date: Mon, 12 Aug 2024 16:40:32 +0200
Subject: [PATCH 70/87] SectionTitle component & md size on mobile

---
 .../(marketing)/profile/_components/Profile.tsx   | 15 ++++++++++++---
 1 file changed, 12 insertions(+), 3 deletions(-)

diff --git a/src/app/(marketing)/profile/_components/Profile.tsx b/src/app/(marketing)/profile/_components/Profile.tsx
index 1a9ba194d1..9b83f5bb92 100644
--- a/src/app/(marketing)/profile/_components/Profile.tsx
+++ b/src/app/(marketing)/profile/_components/Profile.tsx
@@ -5,6 +5,8 @@ import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/Avatar"
 import { AvatarGroup } from "@/components/ui/AvatarGroup"
 import { Separator } from "@/components/ui/Separator"
 import { Skeleton } from "@/components/ui/Skeleton"
+import { cn } from "@/lib/utils"
+import { PropsWithChildren } from "react"
 import { ContributionCard } from "../_components/ContributionCard"
 import { EditContributions } from "../_components/EditContributions"
 import { EditProfile } from "../_components/EditProfile"
@@ -68,10 +70,10 @@ export const Profile = () => {
           </div>
         </div>
       </div>
-      <h2 className="mb-3 font-bold text-lg">Operated guilds</h2>
+      <SectionTitle className="mb-3">Operated guilds</SectionTitle>
       <OperatedGuildCard />
       <div className="mt-8 mb-3 flex items-center justify-between">
-        <h2 className="font-bold text-lg">Top contributions</h2>
+        <SectionTitle>Top contributions</SectionTitle>
         <ProfileOwnerGuard>
           <EditContributions />
         </ProfileOwnerGuard>
@@ -82,7 +84,7 @@ export const Profile = () => {
         ))}
       </div>
       <div className="mt-8">
-        <h2 className="mb-3 font-bold text-lg">Recent activity</h2>
+        <SectionTitle className="mb-3">Recent activity</SectionTitle>
         <RecentActivity />
         <p className="mt-2 font-semibold text-muted-foreground">
           &hellip; only last 20 actions are shown
@@ -91,3 +93,10 @@ export const Profile = () => {
     </>
   )
 }
+
+const SectionTitle = ({
+  className,
+  children,
+}: PropsWithChildren<{ className?: string }>) => (
+  <h2 className={cn("font-bold sm:text-lg", className)}>{children}</h2>
+)

From b984a815cf4b1540b94ebfcceab262ccdfa59f43 Mon Sep 17 00:00:00 2001
From: valid <valid@zgen.hu>
Date: Mon, 12 Aug 2024 17:00:28 +0200
Subject: [PATCH 71/87] UI(OperatedGuildCard): responsivity impros

---
 .../profile/_components/OperatedGuildCard.tsx        | 12 +++++-------
 1 file changed, 5 insertions(+), 7 deletions(-)

diff --git a/src/app/(marketing)/profile/_components/OperatedGuildCard.tsx b/src/app/(marketing)/profile/_components/OperatedGuildCard.tsx
index 18c6940cf3..c3554b37ff 100644
--- a/src/app/(marketing)/profile/_components/OperatedGuildCard.tsx
+++ b/src/app/(marketing)/profile/_components/OperatedGuildCard.tsx
@@ -13,14 +13,13 @@ import {
   User,
 } from "@phosphor-icons/react/dist/ssr"
 import { AvatarImage } from "@radix-ui/react-avatar"
-import { Separator } from "@radix-ui/react-separator"
 import Image from "next/image"
 import { PropsWithChildren } from "react"
 
 export const OperatedGuildCard = () => {
   return (
     <Card className="flex flex-col bg-gray-50 md:flex-row dark:bg-card">
-      <div className="relative w-full px-4 py-8 md:w-1/3">
+      <div className="relative w-full border-border-muted p-6 max-md:border-b md:w-1/3 md:border-r">
         <div className="absolute inset-0 bg-black" />
         <Image
           className="absolute inset-0 size-full object-cover opacity-30"
@@ -30,7 +29,7 @@ export const OperatedGuildCard = () => {
           height={233}
         />
         <div className="relative flex h-full flex-col items-center justify-center gap-3">
-          <Avatar size="3xl">
+          <Avatar className="size-20 lg:size-24">
             <AvatarImage
               src="https://guild.xyz/_next/image?url=https%3A%2F%2Fguild-xyz.mypinata.cloud%2Fipfs%2FQmQXeY1ZEtnLGqFPuJ4RZthYz8nKdTLhLVxBRfHGXweamx&w=256&q=70"
               width={118}
@@ -41,15 +40,14 @@ export const OperatedGuildCard = () => {
               <Skeleton className="size-full" />
             </AvatarFallback>
           </Avatar>
-          <h3 className="text-center font-bold font-display text-white text-xl">
+          <h3 className="text-center font-bold font-display text-lg text-white lg:text-xl">
             The Guilded Age Guild
             <CheckMark className="ml-2 inline-block size-6" />
             <FeaturedIcon className="ml-1 " />
           </h3>
         </div>
       </div>
-      <Separator orientation="vertical" className="bg-border-muted" />
-      <div className="grid grow justify-stretch gap-2 p-5 md:grid-cols-2">
+      <div className="grid grow justify-stretch gap-2 p-5 sm:grid-cols-2">
         <OperatedGuildDetailCard Icon={User}>
           <EmphasizedData>123k</EmphasizedData>
           members
@@ -85,7 +83,7 @@ const OperatedGuildDetailCard = ({
   Icon,
   children,
 }: PropsWithChildren<{ Icon: Icon }>) => (
-  <Card className="flex items-center gap-2 rounded-xl p-5 font-bold shadow dark:bg-secondary">
+  <Card className="flex items-center gap-2 rounded-xl p-4 font-bold shadow md:p-5 dark:bg-secondary">
     <Icon weight="bold" className="min-w-min" />
     <span className="text-muted-foreground">{children}</span>
   </Card>

From 863c7009b7057fb7dfdcc04946303d8a8d9103d5 Mon Sep 17 00:00:00 2001
From: Dominik Stumpf <s.dominik.work@gmail.com>
Date: Mon, 12 Aug 2024 20:18:19 +0200
Subject: [PATCH 72/87] chore: add bg to CardWithGuildLabel

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

diff --git a/src/app/(marketing)/profile/_components/CardWithGuildLabel.tsx b/src/app/(marketing)/profile/_components/CardWithGuildLabel.tsx
index a9a617e96f..591109429c 100644
--- a/src/app/(marketing)/profile/_components/CardWithGuildLabel.tsx
+++ b/src/app/(marketing)/profile/_components/CardWithGuildLabel.tsx
@@ -10,7 +10,7 @@ export const CardWithGuildLabel = ({
 }: PropsWithChildren<{ guild: Guild }>) => {
   return (
     <Card
-      className="relative flex border-2"
+      className="relative flex border-2 bg-accent"
       style={{ borderColor: guild.theme.color, background: guild.theme.color }}
     >
       <div

From bdad6bdb6816daa365efb61e9c8df90b93ba4012 Mon Sep 17 00:00:00 2001
From: valid <valid@zgen.hu>
Date: Mon, 12 Aug 2024 23:30:29 +0200
Subject: [PATCH 73/87] UI(ContributionCard): responsivity impros

---
 .../(marketing)/profile/_components/CardWithGuildLabel.tsx  | 4 ++--
 .../profile/_components/ContributionCardView.tsx            | 6 +++---
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/app/(marketing)/profile/_components/CardWithGuildLabel.tsx b/src/app/(marketing)/profile/_components/CardWithGuildLabel.tsx
index 591109429c..aa221d9494 100644
--- a/src/app/(marketing)/profile/_components/CardWithGuildLabel.tsx
+++ b/src/app/(marketing)/profile/_components/CardWithGuildLabel.tsx
@@ -10,7 +10,7 @@ export const CardWithGuildLabel = ({
 }: PropsWithChildren<{ guild: Guild }>) => {
   return (
     <Card
-      className="relative flex border-2 bg-accent"
+      className="relative flex border-4 bg-accent sm:border-2"
       style={{ borderColor: guild.theme.color, background: guild.theme.color }}
     >
       <div
@@ -27,7 +27,7 @@ export const CardWithGuildLabel = ({
             />
             <AvatarFallback />
           </Avatar>
-          <div className="truncate font-bold font-display text-white sm:max-w-12">
+          <div className="-mt-0.5 truncate font-bold font-display text-white max-sm:text-sm sm:max-w-12">
             {guild.name}
           </div>
           <CheckMark className="sm:hidden" />
diff --git a/src/app/(marketing)/profile/_components/ContributionCardView.tsx b/src/app/(marketing)/profile/_components/ContributionCardView.tsx
index 979d7dd47c..a2db59727d 100644
--- a/src/app/(marketing)/profile/_components/ContributionCardView.tsx
+++ b/src/app/(marketing)/profile/_components/ContributionCardView.tsx
@@ -11,8 +11,8 @@ export const ContributionCardView = ({
 }: { guild: Guild; role: Role }) => {
   return (
     <CardWithGuildLabel guild={guild}>
-      <div className="grid grid-cols-[auto_1fr] items-center gap-4 p-6 md:grid-cols-[auto_auto_1fr]">
-        <Avatar className="size-16 sm:size-20">
+      <div className="grid grid-cols-[auto_1fr] items-center gap-4 p-5 md:grid-cols-[auto_auto_1fr] md:p-6">
+        <Avatar className="size-16 md:size-20">
           <AvatarImage src={role.imageUrl} alt={"role"} width={64} height={64} />
           <AvatarFallback />
         </Avatar>
@@ -20,7 +20,7 @@ export const ContributionCardView = ({
           <div className="font-extrabold text-muted-foreground text-xs uppercase">
             TOP ROLE
           </div>
-          <h3 className="mb-1 font-bold font-display text-xl tracking-tight">
+          <h3 className="mb-1 font-bold font-display text-lg tracking-tight md:text-xl">
             {role.name}
           </h3>
           <div className="flex items-center gap-2 text-muted-foreground">

From bb3ad32c18f70a57848d5573656c6e981346d2ac Mon Sep 17 00:00:00 2001
From: valid <valid@zgen.hu>
Date: Tue, 13 Aug 2024 02:17:06 +0200
Subject: [PATCH 74/87] update to new types package & change profileId to
 userId

---
 package-lock.json                                         | 8 ++++----
 package.json                                              | 2 +-
 .../(marketing)/profile/_hooks/useCreateContribution.tsx  | 2 +-
 3 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 0f25d20e47..0025bf0ca7 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -19,7 +19,7 @@
         "@emotion/styled": "^11.11.0",
         "@fuels/connectors": "^0.5.0",
         "@fuels/react": "^0.20.0",
-        "@guildxyz/types": "^1.9.33",
+        "@guildxyz/types": "^1.9.35",
         "@hcaptcha/react-hcaptcha": "^1.4.4",
         "@hookform/resolvers": "^3.3.4",
         "@lexical/code": "^0.12.0",
@@ -5475,9 +5475,9 @@
       }
     },
     "node_modules/@guildxyz/types": {
-      "version": "1.9.33",
-      "resolved": "https://registry.npmjs.org/@guildxyz/types/-/types-1.9.33.tgz",
-      "integrity": "sha512-iekXya6x1D5nQufmNfw9NDpvjDHdDsNAuNF13/gf3yRbdp9jIJ7P+RIhJ/fGX4rX4tMomYauJ18BJNQTC/m6cQ==",
+      "version": "1.9.35",
+      "resolved": "https://registry.npmjs.org/@guildxyz/types/-/types-1.9.35.tgz",
+      "integrity": "sha512-QMpDuMQ7THkgeoG98Mntw+vbCXHAOR+32+7Yo3GzCI47qDt/eO9iYHQL+vK0vO6a1UeIXUC5UAp4F2Mips7UDA==",
       "dependencies": {
         "zod": "^3.22.4"
       }
diff --git a/package.json b/package.json
index 6040afc647..795859b9e5 100644
--- a/package.json
+++ b/package.json
@@ -31,7 +31,7 @@
     "@emotion/styled": "^11.11.0",
     "@fuels/connectors": "^0.5.0",
     "@fuels/react": "^0.20.0",
-    "@guildxyz/types": "^1.9.33",
+    "@guildxyz/types": "^1.9.35",
     "@hcaptcha/react-hcaptcha": "^1.4.4",
     "@hookform/resolvers": "^3.3.4",
     "@lexical/code": "^0.12.0",
diff --git a/src/app/(marketing)/profile/_hooks/useCreateContribution.tsx b/src/app/(marketing)/profile/_hooks/useCreateContribution.tsx
index e7d840da46..dc055bba46 100644
--- a/src/app/(marketing)/profile/_hooks/useCreateContribution.tsx
+++ b/src/app/(marketing)/profile/_hooks/useCreateContribution.tsx
@@ -41,7 +41,7 @@ export const useCreateContribution = () => {
             const fakeContribution: Schemas["Contribution"] = {
               ...(payload as Schemas["ContributionUpdate"]),
               id: -1,
-              profileId: profile.userId,
+              userId: profile.userId,
             }
             if (!contributions.data) return [fakeContribution]
             contributions.data.push(fakeContribution)

From 74e678b32d242116e9ba04c5d5375ca50689d335 Mon Sep 17 00:00:00 2001
From: valid <valid@zgen.hu>
Date: Tue, 13 Aug 2024 02:19:31 +0200
Subject: [PATCH 75/87] UI(EditProfile): subtle border for images too

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

diff --git a/src/app/(marketing)/profile/_components/EditProfile.tsx b/src/app/(marketing)/profile/_components/EditProfile.tsx
index c7c8019b0c..95af2e41b6 100644
--- a/src/app/(marketing)/profile/_components/EditProfile.tsx
+++ b/src/app/(marketing)/profile/_components/EditProfile.tsx
@@ -117,7 +117,7 @@ export const EditProfile = () => {
                   control={form.control}
                   name="backgroundImageUrl"
                   render={({ field }) => (
-                    <FormItem className="relative flex h-32 items-center justify-center overflow-hidden rounded-xl border">
+                    <FormItem className="relative flex h-32 items-center justify-center overflow-hidden rounded-xl border border-border-muted">
                       <div className="absolute inset-0 size-full">
                         {field.value?.startsWith("http") ||
                         field.value?.startsWith("/") ? (
@@ -158,7 +158,7 @@ export const EditProfile = () => {
                       variant="unstyled"
                       type="button"
                       className={cn(
-                        "-bottom-2 absolute left-4 size-28 translate-y-1/2 rounded-full border-2 border-dotted",
+                        "-bottom-2 absolute left-4 size-28 translate-y-1/2 rounded-full border border-dotted",
                         { "border-solid": field.value }
                       )}
                       {...getRootProps()}

From c3c7251f7c83e48d44eeb636ae3e4a0680969b77 Mon Sep 17 00:00:00 2001
From: valid <valid@zgen.hu>
Date: Tue, 13 Aug 2024 18:46:07 +0200
Subject: [PATCH 76/87] update to new types package

---
 package-lock.json | 8 ++++----
 package.json      | 2 +-
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 0025bf0ca7..ccad6ae918 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -19,7 +19,7 @@
         "@emotion/styled": "^11.11.0",
         "@fuels/connectors": "^0.5.0",
         "@fuels/react": "^0.20.0",
-        "@guildxyz/types": "^1.9.35",
+        "@guildxyz/types": "^1.9.37",
         "@hcaptcha/react-hcaptcha": "^1.4.4",
         "@hookform/resolvers": "^3.3.4",
         "@lexical/code": "^0.12.0",
@@ -5475,9 +5475,9 @@
       }
     },
     "node_modules/@guildxyz/types": {
-      "version": "1.9.35",
-      "resolved": "https://registry.npmjs.org/@guildxyz/types/-/types-1.9.35.tgz",
-      "integrity": "sha512-QMpDuMQ7THkgeoG98Mntw+vbCXHAOR+32+7Yo3GzCI47qDt/eO9iYHQL+vK0vO6a1UeIXUC5UAp4F2Mips7UDA==",
+      "version": "1.9.37",
+      "resolved": "https://registry.npmjs.org/@guildxyz/types/-/types-1.9.37.tgz",
+      "integrity": "sha512-xM2F0HodsxrBUZ+37QkI/41cLypifmHjnsQDXB1BRLHSdX/+Yz/nj8MW+KfxR6arCGVYbgC53qW22UANdAHF0Q==",
       "dependencies": {
         "zod": "^3.22.4"
       }
diff --git a/package.json b/package.json
index 795859b9e5..dafa8a4419 100644
--- a/package.json
+++ b/package.json
@@ -31,7 +31,7 @@
     "@emotion/styled": "^11.11.0",
     "@fuels/connectors": "^0.5.0",
     "@fuels/react": "^0.20.0",
-    "@guildxyz/types": "^1.9.35",
+    "@guildxyz/types": "^1.9.37",
     "@hcaptcha/react-hcaptcha": "^1.4.4",
     "@hookform/resolvers": "^3.3.4",
     "@lexical/code": "^0.12.0",

From c3dd58b93324d01f4846cfac304e62d6bc7b555f Mon Sep 17 00:00:00 2001
From: valid <valid@zgen.hu>
Date: Tue, 13 Aug 2024 21:39:34 +0200
Subject: [PATCH 77/87] feat: working color theming

---
 .../(marketing)/profile/[username]/page.tsx   | 32 ++++++--------
 .../_components/ProfileColorBanner.tsx        | 44 +++++++++++++++++++
 src/app/globals.css                           |  7 +--
 src/v2/lib/validations/profileSchema.ts       |  2 +
 tailwind.config.ts                            |  6 +--
 5 files changed, 67 insertions(+), 24 deletions(-)
 create mode 100644 src/app/(marketing)/profile/_components/ProfileColorBanner.tsx

diff --git a/src/app/(marketing)/profile/[username]/page.tsx b/src/app/(marketing)/profile/[username]/page.tsx
index 2cd39a6cb0..8f64ef666f 100644
--- a/src/app/(marketing)/profile/[username]/page.tsx
+++ b/src/app/(marketing)/profile/[username]/page.tsx
@@ -10,8 +10,10 @@ import { SWRProvider } from "@/components/SWRProvider"
 import { Anchor } from "@/components/ui/Anchor"
 import { Guild, Role, Schemas } from "@guildxyz/types"
 import { ArrowRight } from "@phosphor-icons/react/dist/ssr"
-import { notFound, redirect } from "next/navigation"
+import { redirect } from "next/navigation"
+import { notFound } from "next/navigation"
 import { Profile } from "../_components/Profile"
+import { ProfileColorBanner } from "../_components/ProfileColorBanner"
 
 // TODO: use env var for this url when it is changed to this value.
 // next-server throws fetch error if we modify the env var in memory
@@ -75,6 +77,7 @@ const fetchPublicProfileData = async ({ username }: { username: string }) => {
     roleRequests.map(({ pathname }, i) => [pathname, roles[i]])
   )
   return {
+    profile,
     fallback: {
       [profileRequest.pathname]: profile,
       [contributionsRequest.pathname]: contributions,
@@ -85,31 +88,24 @@ const fetchPublicProfileData = async ({ username }: { username: string }) => {
 }
 
 const Page = async ({ params: { username } }: { params: { username: string } }) => {
-  const { fallback } = await fetchPublicProfileData({ username })
+  const { fallback, profile } = await fetchPublicProfileData({ username })
+
+  const isBgColor = profile.backgroundImageUrl?.startsWith("#")
+
   return (
     <SWRProvider
       value={{
         fallback,
       }}
     >
-      <Layout>
+      <Layout
+        style={isBgColor ? ({ "--banner": profile.backgroundImageUrl } as any) : {}}
+      >
         <LayoutHero className="pb-4 md:pb-10">
           <Header />
-          <LayoutBanner className="-bottom-[500px]">
-            <div
-              className="absolute inset-0 bg-[url('/banner.svg')] opacity-5"
-              style={{
-                backgroundSize: "auto 50%",
-                backgroundPosition: "top 5px right 0px",
-              }}
-            />
-            <div
-              className="absolute inset-0"
-              style={{
-                background:
-                  "radial-gradient(circle at center, transparent 5%, hsl(var(--banner)))",
-              }}
-            />
+          <LayoutBanner className="-bottom-[600px]">
+            {/* todo: render image in the other case */}
+            {isBgColor ? <ProfileColorBanner /> : null}
             <div className="absolute inset-0 bg-gradient-to-t from-background" />
           </LayoutBanner>
         </LayoutHero>
diff --git a/src/app/(marketing)/profile/_components/ProfileColorBanner.tsx b/src/app/(marketing)/profile/_components/ProfileColorBanner.tsx
new file mode 100644
index 0000000000..037eb2c079
--- /dev/null
+++ b/src/app/(marketing)/profile/_components/ProfileColorBanner.tsx
@@ -0,0 +1,44 @@
+"use client"
+
+import { cn } from "@/lib/utils"
+import Color from "color"
+import { useProfile } from "../_hooks/useProfile"
+
+// This works great with most colors in dark mode (yellow / green shades not so much).
+// In light mode we could introduce a layered design so the header section is always dark,
+// and further optimize for bright vivid colors, for it to be a complete robust solution
+export const ProfileColorBanner = () => {
+  const { data: profile } = useProfile()
+
+  if (!profile?.backgroundImageUrl) return null
+
+  const color = Color(profile.backgroundImageUrl)
+  const patternOpacity =
+    color.lightness() > 90
+      ? "opacity-20"
+      : color.lightness() > 75
+        ? "opacity-15"
+        : color.lightness() > 60
+          ? "opacity-10"
+          : "opacity-5"
+
+  return (
+    <>
+      <div
+        className={cn("absolute inset-0 bg-[url('/banner.svg')]", patternOpacity)}
+        style={{
+          backgroundSize: "auto 50%",
+          backgroundPosition: "top 5px right 0px",
+        }}
+      />
+      <div
+        className="absolute inset-0"
+        style={{
+          background:
+            "radial-gradient(circle at center, transparent 5%, var(--banner))",
+          filter: "brightness(50%)",
+        }}
+      />
+    </>
+  )
+}
diff --git a/src/app/globals.css b/src/app/globals.css
index 722d98b3d7..cadc8c8481 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -56,9 +56,10 @@
     --success-subtle: 141 79% 85%;
     --success-subtle-foreground: var(--success);
 
-    --banner: 240 4% 16%;
-    --banner-dark: 240 2% 12%;
-    --banner-foreground: 210 20% 98%;
+    /* these are stored as hex so it's consistent with custom values on profiles with backgroundImageUrl. We plan to migrate all colors to hex values */
+    --banner: #27272a;
+    --banner-dark: #1e1e1f;
+    --banner-foreground: #f9fafb;
     --banner-opacity: 1;
 
     --muted: 0 0% 100%;
diff --git a/src/v2/lib/validations/profileSchema.ts b/src/v2/lib/validations/profileSchema.ts
index 5b5ca137d1..7f77257cad 100644
--- a/src/v2/lib/validations/profileSchema.ts
+++ b/src/v2/lib/validations/profileSchema.ts
@@ -3,6 +3,7 @@ import { z } from "zod"
 const nullToUndefined = <T extends z.ZodTypeAny>(schema: T) =>
   z.preprocess((value) => (value === null ? undefined : value), schema)
 
+// todo: remove this file and just use the schema from our types package
 export const profileSchema = z.object({
   name: nullToUndefined(
     z.string().max(100, { message: "Name cannot exceed 100 characters" }).optional()
@@ -38,5 +39,6 @@ export const profileSchema = z.object({
       .url({ message: "Background image must be a valid URL" })
       .max(500, { message: "Profile image URL cannot exceed 500 characters" })
       .optional()
+      .or(z.string().startsWith("#"))
   ),
 })
diff --git a/tailwind.config.ts b/tailwind.config.ts
index 708527b8a5..b37de0a927 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -24,9 +24,9 @@ const config = {
       },
       colors: {
         banner: {
-          DEFAULT: "hsl(var(--banner))",
-          dark: "hsl(var(--banner-dark))",
-          foreground: "hsl(var(--banner-foreground))"
+          DEFAULT: "var(--banner)",
+          dark: "var(--banner-dark)",
+          foreground: "var(--banner-foreground)"
         },
         border: "hsl(var(--border))",
         "border-muted": "hsl(var(--border-muted))",

From bd47ba7963afcb1d1ddc194c68617bba842b10ad Mon Sep 17 00:00:00 2001
From: valid <valid@zgen.hu>
Date: Tue, 13 Aug 2024 22:05:49 +0200
Subject: [PATCH 78/87] fix(ProfileColorPicker): dynamic icon color

---
 .../profile/_components/EditProfile.tsx           | 15 ++++++++++++---
 .../profile/_components/ProfileColorPicker.tsx    | 10 +++-------
 src/app/globals.css                               |  4 ++++
 src/v2/components/ui/ColorPicker.tsx              |  4 +++-
 4 files changed, 22 insertions(+), 11 deletions(-)

diff --git a/src/app/(marketing)/profile/_components/EditProfile.tsx b/src/app/(marketing)/profile/_components/EditProfile.tsx
index 95af2e41b6..62ba1c7152 100644
--- a/src/app/(marketing)/profile/_components/EditProfile.tsx
+++ b/src/app/(marketing)/profile/_components/EditProfile.tsx
@@ -30,7 +30,7 @@ import { cn } from "@/lib/utils"
 import { profileSchema } from "@/lib/validations/profileSchema"
 import { Schemas } from "@guildxyz/types"
 import { zodResolver } from "@hookform/resolvers/zod"
-import { Image as ImageIcon, Pencil, User } from "@phosphor-icons/react"
+import { Eyedropper, Image as ImageIcon, Pencil, User } from "@phosphor-icons/react"
 import useDropzone from "hooks/useDropzone"
 import usePinata from "hooks/usePinata"
 import Image from "next/image"
@@ -138,14 +138,23 @@ export const EditProfile = () => {
                         )}
                       </div>
                       <div className="relative flex items-center gap-3">
-                        <Button size="icon" variant="ghost">
+                        <Button size="icon" variant="ghost" className="text-white">
                           <ImageIcon weight="bold" size={24} />
                         </Button>
                         <Separator
                           orientation="vertical"
                           className="h-6 w-0.5 bg-white/50"
                         />
-                        <ProfileColorPicker />
+                        <ProfileColorPicker>
+                          <Button
+                            type="button"
+                            size="icon"
+                            variant="ghost"
+                            className="text-white"
+                          >
+                            <Eyedropper weight="bold" size={24} />
+                          </Button>
+                        </ProfileColorPicker>
                       </div>
                     </FormItem>
                   )}
diff --git a/src/app/(marketing)/profile/_components/ProfileColorPicker.tsx b/src/app/(marketing)/profile/_components/ProfileColorPicker.tsx
index 4129c88869..cd0d134c68 100644
--- a/src/app/(marketing)/profile/_components/ProfileColorPicker.tsx
+++ b/src/app/(marketing)/profile/_components/ProfileColorPicker.tsx
@@ -1,4 +1,3 @@
-import { Button } from "@/components/ui/Button"
 import { ColorPicker } from "@/components/ui/ColorPicker"
 import {
   DropdownMenu,
@@ -9,10 +8,11 @@ import {
   DropdownMenuTrigger,
 } from "@/components/ui/DropdownMenu"
 import { Eyedropper } from "@phosphor-icons/react"
+import { PropsWithChildren } from "react"
 import { useFormContext, useWatch } from "react-hook-form"
 import getColorByImage from "utils/getColorByImage"
 
-export const ProfileColorPicker = () => {
+export const ProfileColorPicker = ({ children }: PropsWithChildren<any>) => {
   const { setValue } = useFormContext()
 
   const profileImageUrl = useWatch({ name: "profileImageUrl" })
@@ -24,11 +24,7 @@ export const ProfileColorPicker = () => {
 
   return (
     <DropdownMenu>
-      <DropdownMenuTrigger asChild>
-        <Button type="button" size="icon" variant="ghost">
-          <Eyedropper weight="bold" size={24} />
-        </Button>
-      </DropdownMenuTrigger>
+      <DropdownMenuTrigger asChild>{children}</DropdownMenuTrigger>
       <DropdownMenuContent>
         <DropdownMenuLabel className="font-normal">
           <ColorPicker fieldName="backgroundImageUrl" />
diff --git a/src/app/globals.css b/src/app/globals.css
index cadc8c8481..6c2b317cf7 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -86,6 +86,10 @@
     --alert-error: 0 78% 98%;
     --alert-error-icon: 0 84% 60%;
 
+    /* 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);
+
     --discord: 233 78% 63%;
     --discord-hover: 243 75% 59%;
     --discord-active: 245 58% 51%;
diff --git a/src/v2/components/ui/ColorPicker.tsx b/src/v2/components/ui/ColorPicker.tsx
index 8dade1337f..6c93fc6d48 100644
--- a/src/v2/components/ui/ColorPicker.tsx
+++ b/src/v2/components/ui/ColorPicker.tsx
@@ -42,7 +42,9 @@ export const ColorPicker = ({ fieldName, onChange }: Props) => {
                   as={Palette}
                   pos="absolute"
                   pointerEvents={"none"}
-                  color={isIconLight ? "whiteAlpha.800" : "blackAlpha.800"}
+                  color={
+                    isIconLight ? "var(--whiteAlpha-800)" : "var(--blackAlpha-800)"
+                  }
                 />
               </div>
               <Input

From 2741c0c3b2a504d0950d69e506e2d8cb776411e6 Mon Sep 17 00:00:00 2001
From: valid <valid@zgen.hu>
Date: Wed, 14 Aug 2024 12:40:55 +0200
Subject: [PATCH 79/87] UI(EditProfile): inside scroll in modal

---
 .../profile/_components/EditProfile.tsx       | 294 +++++++++---------
 1 file changed, 145 insertions(+), 149 deletions(-)

diff --git a/src/app/(marketing)/profile/_components/EditProfile.tsx b/src/app/(marketing)/profile/_components/EditProfile.tsx
index 62ba1c7152..86b4565c29 100644
--- a/src/app/(marketing)/profile/_components/EditProfile.tsx
+++ b/src/app/(marketing)/profile/_components/EditProfile.tsx
@@ -8,7 +8,6 @@ import {
   DialogBody,
   DialogCloseButton,
   DialogContent,
-  DialogDescription,
   DialogFooter,
   DialogHeader,
   DialogTitle,
@@ -103,169 +102,166 @@ export const EditProfile = () => {
           </Button>
         </Card>
       </DialogTrigger>
-      <DialogContent size="lg" className="bg-background">
-        <DialogHeader>
-          <DialogTitle>Edit profile</DialogTitle>
-          <DialogDescription />
-          <DialogCloseButton />
-        </DialogHeader>
-        <FormProvider {...form}>
-          <form onSubmit={form.handleSubmit(onSubmit)}>
-            <DialogBody>
-              <div className="relative mb-20">
-                <FormField
-                  control={form.control}
-                  name="backgroundImageUrl"
-                  render={({ field }) => (
-                    <FormItem className="relative flex h-32 items-center justify-center overflow-hidden rounded-xl border border-border-muted">
-                      <div className="absolute inset-0 size-full">
-                        {field.value?.startsWith("http") ||
-                        field.value?.startsWith("/") ? (
-                          <Image
-                            src={field.value}
-                            width={144}
-                            height={144}
-                            alt="profile background"
-                          />
-                        ) : (
-                          <div
-                            className={`size-full`}
-                            style={{
-                              background: field.value ?? "black",
-                              filter: "brightness(70%)",
-                            }}
-                          />
-                        )}
-                      </div>
-                      <div className="relative flex items-center gap-3">
-                        <Button size="icon" variant="ghost" className="text-white">
-                          <ImageIcon weight="bold" size={24} />
-                        </Button>
-                        <Separator
-                          orientation="vertical"
-                          className="h-6 w-0.5 bg-white/50"
-                        />
-                        <ProfileColorPicker>
-                          <Button
-                            type="button"
-                            size="icon"
-                            variant="ghost"
-                            className="text-white"
-                          >
-                            <Eyedropper weight="bold" size={24} />
-                          </Button>
-                        </ProfileColorPicker>
-                      </div>
-                    </FormItem>
-                  )}
-                />
-                <FormField
-                  control={form.control}
-                  name="profileImageUrl"
-                  render={({ field }) => (
-                    <Button
-                      variant="unstyled"
-                      type="button"
-                      className={cn(
-                        "-bottom-2 absolute left-4 size-28 translate-y-1/2 rounded-full border border-dotted",
-                        { "border-solid": field.value }
-                      )}
-                      {...getRootProps()}
-                    >
-                      <Avatar className="size-36 bg-muted">
-                        {field.value && (
-                          <AvatarImage
-                            src={field.value}
-                            width={144}
-                            height={144}
-                            alt="profile avatar"
-                          />
-                        )}
-                        <AvatarFallback className="bg-muted">
-                          <User size={38} />
-                        </AvatarFallback>
-                      </Avatar>
-                    </Button>
-                  )}
-                />
-              </div>
-
+      <FormProvider {...form}>
+        <DialogContent size="lg" className="bg-background" scrollBody>
+          <DialogHeader>
+            <DialogTitle>Edit profile</DialogTitle>
+            <DialogCloseButton />
+          </DialogHeader>
+          <DialogBody scroll className="!pb-8">
+            <div className="relative mb-20">
               <FormField
                 control={form.control}
-                name="name"
+                name="backgroundImageUrl"
                 render={({ field }) => (
-                  <FormItem className="pb-2">
-                    <FormLabel>Name</FormLabel>
-                    <FormControl>
-                      <Input
-                        placeholder=""
-                        variant="muted"
-                        {...field}
-                        value={field.value ?? undefined}
+                  <FormItem className="relative flex h-32 items-center justify-center overflow-hidden rounded-xl border border-border-muted">
+                    <div className="absolute inset-0 size-full">
+                      {field.value?.startsWith("http") ||
+                      field.value?.startsWith("/") ? (
+                        <Image
+                          src={field.value}
+                          width={144}
+                          height={144}
+                          alt="profile background"
+                        />
+                      ) : (
+                        <div
+                          className={`size-full`}
+                          style={{
+                            background: field.value ?? "black",
+                            filter: "brightness(70%)",
+                          }}
+                        />
+                      )}
+                    </div>
+                    <div className="relative flex items-center gap-3">
+                      <Button size="icon" variant="ghost" className="text-white">
+                        <ImageIcon weight="bold" size={24} />
+                      </Button>
+                      <Separator
+                        orientation="vertical"
+                        className="h-6 w-0.5 bg-white/50"
                       />
-                    </FormControl>
-                    <FormErrorMessage />
-                  </FormItem>
-                )}
-              />
-              <FormField
-                control={form.control}
-                name="username"
-                render={({ field }) => (
-                  <FormItem className="pb-2">
-                    <FormLabel aria-required="true">Username</FormLabel>
-                    <FormControl>
-                      <Input placeholder="" variant="muted" required {...field} />
-                    </FormControl>
-                    <FormErrorMessage />
+                      <ProfileColorPicker>
+                        <Button
+                          type="button"
+                          size="icon"
+                          variant="ghost"
+                          className="text-white"
+                        >
+                          <Eyedropper weight="bold" size={24} />
+                        </Button>
+                      </ProfileColorPicker>
+                    </div>
                   </FormItem>
                 )}
               />
               <FormField
                 control={form.control}
-                name="bio"
+                name="profileImageUrl"
                 render={({ field }) => (
-                  <FormItem className="">
-                    <FormLabel>Bio</FormLabel>
-                    <FormControl>
-                      <Textarea
-                        placeholder=""
-                        className="max-h-12 bg-muted"
-                        {...field}
-                        value={field.value ?? undefined}
-                      />
-                    </FormControl>
-                    <FormErrorMessage />
-                  </FormItem>
+                  <Button
+                    variant="unstyled"
+                    type="button"
+                    className={cn(
+                      "-bottom-2 absolute left-4 size-28 translate-y-1/2 rounded-full border border-dotted",
+                      { "border-solid": field.value }
+                    )}
+                    {...getRootProps()}
+                  >
+                    <Avatar className="size-36 bg-muted">
+                      {field.value && (
+                        <AvatarImage
+                          src={field.value}
+                          width={144}
+                          height={144}
+                          alt="profile avatar"
+                        />
+                      )}
+                      <AvatarFallback className="bg-muted">
+                        <User size={38} />
+                      </AvatarFallback>
+                    </Avatar>
+                  </Button>
                 )}
               />
-              <Separator className="my-4" />
-              <div>
-                <p className="mb-2 font-medium">Danger zone</p>
-                <Button
-                  onClick={deleteProfile.onSubmit}
-                  variant="subtle"
-                  type="button"
-                  colorScheme="destructive"
-                  size="sm"
-                >
-                  Delete profile
-                </Button>
-              </div>
-            </DialogBody>
-            <DialogFooter>
+            </div>
+
+            <FormField
+              control={form.control}
+              name="name"
+              render={({ field }) => (
+                <FormItem className="pb-2">
+                  <FormLabel>Name</FormLabel>
+                  <FormControl>
+                    <Input
+                      placeholder=""
+                      variant="muted"
+                      {...field}
+                      value={field.value ?? undefined}
+                    />
+                  </FormControl>
+                  <FormErrorMessage />
+                </FormItem>
+              )}
+            />
+            <FormField
+              control={form.control}
+              name="username"
+              render={({ field }) => (
+                <FormItem className="pb-2">
+                  <FormLabel aria-required="true">Username</FormLabel>
+                  <FormControl>
+                    <Input placeholder="" variant="muted" required {...field} />
+                  </FormControl>
+                  <FormErrorMessage />
+                </FormItem>
+              )}
+            />
+            <FormField
+              control={form.control}
+              name="bio"
+              render={({ field }) => (
+                <FormItem className="">
+                  <FormLabel>Bio</FormLabel>
+                  <FormControl>
+                    <Textarea
+                      placeholder=""
+                      className="max-h-12 bg-muted"
+                      {...field}
+                      value={field.value ?? undefined}
+                    />
+                  </FormControl>
+                  <FormErrorMessage />
+                </FormItem>
+              )}
+            />
+            <Separator className="my-4" />
+            <div>
+              <p className="mb-2 font-medium">Danger zone</p>
               <Button
-                isLoading={editProfile.isLoading}
-                colorScheme="success"
-                type="submit"
-                disabled={!form.formState.isValid}
+                onClick={deleteProfile.onSubmit}
+                variant="subtle"
+                type="button"
+                colorScheme="destructive"
+                size="sm"
               >
-                Save
+                Delete profile
               </Button>
-            </DialogFooter>
-          </form>
-        </FormProvider>
-      </DialogContent>
+            </div>
+          </DialogBody>
+          <DialogFooter className="border-border-muted border-t py-4">
+            <Button
+              isLoading={editProfile.isLoading}
+              colorScheme="success"
+              onClick={form.handleSubmit(onSubmit)}
+              disabled={!form.formState.isValid}
+            >
+              Save
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </FormProvider>
     </Dialog>
   )
 }

From d168e4c8cf1fb21d8d819175667eb694bb4e3fb7 Mon Sep 17 00:00:00 2001
From: valid <valid@zgen.hu>
Date: Wed, 14 Aug 2024 13:32:01 +0200
Subject: [PATCH 80/87] refactor(EditProfile): batch components

---
 .../{ => EditProfile}/EditProfile.tsx         | 58 ++-----------------
 .../EditProfile/EditProfileBanner.tsx         | 52 +++++++++++++++++
 .../{ => EditProfile}/ProfileColorPicker.tsx  |  0
 .../profile/_components/Profile.tsx           |  2 +-
 4 files changed, 59 insertions(+), 53 deletions(-)
 rename src/app/(marketing)/profile/_components/{ => EditProfile}/EditProfile.tsx (74%)
 create mode 100644 src/app/(marketing)/profile/_components/EditProfile/EditProfileBanner.tsx
 rename src/app/(marketing)/profile/_components/{ => EditProfile}/ProfileColorPicker.tsx (100%)

diff --git a/src/app/(marketing)/profile/_components/EditProfile.tsx b/src/app/(marketing)/profile/_components/EditProfile/EditProfile.tsx
similarity index 74%
rename from src/app/(marketing)/profile/_components/EditProfile.tsx
rename to src/app/(marketing)/profile/_components/EditProfile/EditProfile.tsx
index 86b4565c29..4102df2bf6 100644
--- a/src/app/(marketing)/profile/_components/EditProfile.tsx
+++ b/src/app/(marketing)/profile/_components/EditProfile/EditProfile.tsx
@@ -29,16 +29,15 @@ import { cn } from "@/lib/utils"
 import { profileSchema } from "@/lib/validations/profileSchema"
 import { Schemas } from "@guildxyz/types"
 import { zodResolver } from "@hookform/resolvers/zod"
-import { Eyedropper, Image as ImageIcon, Pencil, User } from "@phosphor-icons/react"
+import { Pencil, User } from "@phosphor-icons/react"
 import useDropzone from "hooks/useDropzone"
 import usePinata from "hooks/usePinata"
-import Image from "next/image"
 import { useState } from "react"
 import { FormProvider, useForm } from "react-hook-form"
-import { useDeleteProfile } from "../_hooks/useDeleteProfile"
-import { useProfile } from "../_hooks/useProfile"
-import { useUpdateProfile } from "../_hooks/useUpdateProfile"
-import { ProfileColorPicker } from "./ProfileColorPicker"
+import { useDeleteProfile } from "../../_hooks/useDeleteProfile"
+import { useProfile } from "../../_hooks/useProfile"
+import { useUpdateProfile } from "../../_hooks/useUpdateProfile"
+import { EditProfileBanner } from "./EditProfileBanner"
 
 export const EditProfile = () => {
   const { data: profile } = useProfile()
@@ -110,52 +109,7 @@ export const EditProfile = () => {
           </DialogHeader>
           <DialogBody scroll className="!pb-8">
             <div className="relative mb-20">
-              <FormField
-                control={form.control}
-                name="backgroundImageUrl"
-                render={({ field }) => (
-                  <FormItem className="relative flex h-32 items-center justify-center overflow-hidden rounded-xl border border-border-muted">
-                    <div className="absolute inset-0 size-full">
-                      {field.value?.startsWith("http") ||
-                      field.value?.startsWith("/") ? (
-                        <Image
-                          src={field.value}
-                          width={144}
-                          height={144}
-                          alt="profile background"
-                        />
-                      ) : (
-                        <div
-                          className={`size-full`}
-                          style={{
-                            background: field.value ?? "black",
-                            filter: "brightness(70%)",
-                          }}
-                        />
-                      )}
-                    </div>
-                    <div className="relative flex items-center gap-3">
-                      <Button size="icon" variant="ghost" className="text-white">
-                        <ImageIcon weight="bold" size={24} />
-                      </Button>
-                      <Separator
-                        orientation="vertical"
-                        className="h-6 w-0.5 bg-white/50"
-                      />
-                      <ProfileColorPicker>
-                        <Button
-                          type="button"
-                          size="icon"
-                          variant="ghost"
-                          className="text-white"
-                        >
-                          <Eyedropper weight="bold" size={24} />
-                        </Button>
-                      </ProfileColorPicker>
-                    </div>
-                  </FormItem>
-                )}
-              />
+              <EditProfileBanner />
               <FormField
                 control={form.control}
                 name="profileImageUrl"
diff --git a/src/app/(marketing)/profile/_components/EditProfile/EditProfileBanner.tsx b/src/app/(marketing)/profile/_components/EditProfile/EditProfileBanner.tsx
new file mode 100644
index 0000000000..e3820bdb00
--- /dev/null
+++ b/src/app/(marketing)/profile/_components/EditProfile/EditProfileBanner.tsx
@@ -0,0 +1,52 @@
+import { Button } from "@/components/ui/Button"
+import { FormField, FormItem } from "@/components/ui/Form"
+import { Separator } from "@/components/ui/Separator"
+import { Eyedropper, Image as ImageIcon } from "@phosphor-icons/react"
+import Image from "next/image"
+import { ProfileColorPicker } from "./ProfileColorPicker"
+
+export const EditProfileBanner = () => {
+  return (
+    <FormField
+      name="backgroundImageUrl"
+      render={({ field }) => (
+        <FormItem className="relative flex h-32 items-center justify-center overflow-hidden rounded-xl border border-border-muted">
+          <div className="absolute inset-0 size-full">
+            {field.value?.startsWith("http") || field.value?.startsWith("/") ? (
+              <Image
+                src={field.value}
+                width={144}
+                height={144}
+                alt="profile background"
+              />
+            ) : (
+              <div
+                className={`size-full`}
+                style={{
+                  background: field.value ?? "black",
+                  filter: "brightness(70%)",
+                }}
+              />
+            )}
+          </div>
+          <div className="relative flex items-center gap-3">
+            <Button size="icon" variant="ghost" className="text-white">
+              <ImageIcon weight="bold" size={24} />
+            </Button>
+            <Separator orientation="vertical" className="h-6 w-0.5 bg-white/50" />
+            <ProfileColorPicker>
+              <Button
+                type="button"
+                size="icon"
+                variant="ghost"
+                className="text-white"
+              >
+                <Eyedropper weight="bold" size={24} />
+              </Button>
+            </ProfileColorPicker>
+          </div>
+        </FormItem>
+      )}
+    />
+  )
+}
diff --git a/src/app/(marketing)/profile/_components/ProfileColorPicker.tsx b/src/app/(marketing)/profile/_components/EditProfile/ProfileColorPicker.tsx
similarity index 100%
rename from src/app/(marketing)/profile/_components/ProfileColorPicker.tsx
rename to src/app/(marketing)/profile/_components/EditProfile/ProfileColorPicker.tsx
diff --git a/src/app/(marketing)/profile/_components/Profile.tsx b/src/app/(marketing)/profile/_components/Profile.tsx
index 9b83f5bb92..a7dbc22568 100644
--- a/src/app/(marketing)/profile/_components/Profile.tsx
+++ b/src/app/(marketing)/profile/_components/Profile.tsx
@@ -9,12 +9,12 @@ import { cn } from "@/lib/utils"
 import { PropsWithChildren } from "react"
 import { ContributionCard } from "../_components/ContributionCard"
 import { EditContributions } from "../_components/EditContributions"
-import { EditProfile } from "../_components/EditProfile"
 import { OperatedGuildCard } from "../_components/OperatedGuildCard"
 import { ProfileOwnerGuard } from "../_components/ProfileOwnerGuard"
 import { RecentActivity } from "../_components/RecentActivity"
 import { useContributions } from "../_hooks/useContributions"
 import { useProfile } from "../_hooks/useProfile"
+import { EditProfile } from "./EditProfile/EditProfile"
 import { ProfileSkeleton } from "./ProfileSkeleton"
 
 export const Profile = () => {

From e8c27cafbcc6d23ecaa8d4df6af187ca0830b368 Mon Sep 17 00:00:00 2001
From: valid <valid@zgen.hu>
Date: Wed, 14 Aug 2024 15:44:40 +0200
Subject: [PATCH 81/87] feat: background image

---
 .../(marketing)/profile/[username]/page.tsx   | 17 +++++-
 .../EditProfile/EditProfileBanner.tsx         | 35 +++++++++---
 .../ProfileBackgroundImageUploader.tsx        | 54 +++++++++++++++++++
 .../_components/ProfileColorBanner.tsx        |  2 +-
 src/v2/components/ui/Button.tsx               |  2 +-
 src/v2/components/ui/ColorPicker.tsx          |  1 +
 6 files changed, 100 insertions(+), 11 deletions(-)
 create mode 100644 src/app/(marketing)/profile/_components/EditProfile/ProfileBackgroundImageUploader.tsx

diff --git a/src/app/(marketing)/profile/[username]/page.tsx b/src/app/(marketing)/profile/[username]/page.tsx
index 8f64ef666f..067acab376 100644
--- a/src/app/(marketing)/profile/[username]/page.tsx
+++ b/src/app/(marketing)/profile/[username]/page.tsx
@@ -10,6 +10,7 @@ import { SWRProvider } from "@/components/SWRProvider"
 import { Anchor } from "@/components/ui/Anchor"
 import { Guild, Role, Schemas } from "@guildxyz/types"
 import { ArrowRight } from "@phosphor-icons/react/dist/ssr"
+import Image from "next/image"
 import { redirect } from "next/navigation"
 import { notFound } from "next/navigation"
 import { Profile } from "../_components/Profile"
@@ -104,8 +105,20 @@ const Page = async ({ params: { username } }: { params: { username: string } })
         <LayoutHero className="pb-4 md:pb-10">
           <Header />
           <LayoutBanner className="-bottom-[600px]">
-            {/* todo: render image in the other case */}
-            {isBgColor ? <ProfileColorBanner /> : null}
+            {isBgColor ? (
+              <ProfileColorBanner />
+            ) : (
+              <Image
+                src={profile.backgroundImageUrl as string}
+                fill
+                sizes="100vw"
+                alt="profile background image"
+                style={{
+                  filter: "brightness(50%)",
+                  objectFit: "cover",
+                }}
+              />
+            )}
             <div className="absolute inset-0 bg-gradient-to-t from-background" />
           </LayoutBanner>
         </LayoutHero>
diff --git a/src/app/(marketing)/profile/_components/EditProfile/EditProfileBanner.tsx b/src/app/(marketing)/profile/_components/EditProfile/EditProfileBanner.tsx
index e3820bdb00..d0e0a66539 100644
--- a/src/app/(marketing)/profile/_components/EditProfile/EditProfileBanner.tsx
+++ b/src/app/(marketing)/profile/_components/EditProfile/EditProfileBanner.tsx
@@ -1,23 +1,39 @@
 import { Button } from "@/components/ui/Button"
 import { FormField, FormItem } from "@/components/ui/Form"
 import { Separator } from "@/components/ui/Separator"
+import { useToast } from "@/components/ui/hooks/useToast"
 import { Eyedropper, Image as ImageIcon } from "@phosphor-icons/react"
-import Image from "next/image"
+import usePinata from "hooks/usePinata"
+import { ProfileBackgroundImageUploader } from "./ProfileBackgroundImageUploader"
 import { ProfileColorPicker } from "./ProfileColorPicker"
 
 export const EditProfileBanner = () => {
+  const { toast } = useToast()
+
+  // todo: move this up to the wrapper component & disable the save button while loading
+  const backgroundUploader = usePinata({
+    fieldToSetOnSuccess: "backgroundImageUrl",
+    onError: (err) =>
+      toast({
+        variant: "error",
+        title: "Error",
+        description: err,
+      }),
+  })
+
   return (
     <FormField
       name="backgroundImageUrl"
       render={({ field }) => (
         <FormItem className="relative flex h-32 items-center justify-center overflow-hidden rounded-xl border border-border-muted">
-          <div className="absolute inset-0 size-full">
+          <div className="absolute inset-0 flex size-full items-center">
             {field.value?.startsWith("http") || field.value?.startsWith("/") ? (
-              <Image
+              <img
                 src={field.value}
-                width={144}
-                height={144}
                 alt="profile background"
+                style={{
+                  filter: "brightness(50%)",
+                }}
               />
             ) : (
               <div
@@ -30,9 +46,14 @@ export const EditProfileBanner = () => {
             )}
           </div>
           <div className="relative flex items-center gap-3">
-            <Button size="icon" variant="ghost" className="text-white">
+            <ProfileBackgroundImageUploader
+              uploader={backgroundUploader}
+              size="icon"
+              variant="ghost"
+              className="text-white"
+            >
               <ImageIcon weight="bold" size={24} />
-            </Button>
+            </ProfileBackgroundImageUploader>
             <Separator orientation="vertical" className="h-6 w-0.5 bg-white/50" />
             <ProfileColorPicker>
               <Button
diff --git a/src/app/(marketing)/profile/_components/EditProfile/ProfileBackgroundImageUploader.tsx b/src/app/(marketing)/profile/_components/EditProfile/ProfileBackgroundImageUploader.tsx
new file mode 100644
index 0000000000..d1c9ec9f09
--- /dev/null
+++ b/src/app/(marketing)/profile/_components/EditProfile/ProfileBackgroundImageUploader.tsx
@@ -0,0 +1,54 @@
+import { ButtonProps, buttonVariants } from "@/components/ui/Button"
+import { useToast } from "@/components/ui/hooks/useToast"
+import { UploadSimple } from "@phosphor-icons/react"
+import Button from "components/common/Button"
+import useDropzone from "hooks/useDropzone"
+import { Uploader } from "hooks/usePinata/usePinata"
+import { PropsWithChildren, useState } from "react"
+
+type Props = {
+  uploader: Uploader
+} & ButtonProps
+
+export const ProfileBackgroundImageUploader = ({
+  uploader: { isUploading, onUpload },
+  children,
+  ...buttonProps
+}: PropsWithChildren<Props>): JSX.Element => {
+  const [progress, setProgress] = useState<number>(0)
+  const { toast } = useToast()
+
+  // todo: error handling doesn't work for some reason yet
+  const { isDragActive, getRootProps, getInputProps } = useDropzone({
+    multiple: false,
+    noClick: false,
+    onDrop: (accepted, fileRejections) => {
+      console.log(accepted, fileRejections)
+      if (accepted.length > 0) {
+        onUpload({ data: [accepted[0]], onProgress: setProgress })
+      }
+    },
+    onError: (err) => {
+      console.log(err)
+      toast({
+        variant: "error",
+        title: "Couldn't upload image",
+        description: err.message,
+      })
+    },
+  })
+
+  if (isUploading)
+    return (
+      <Button {...buttonProps} isDisabled>
+        {(progress * 100).toFixed(0)}%
+      </Button>
+    )
+
+  return (
+    <label {...getRootProps()} className={buttonVariants(buttonProps as any)}>
+      <input {...getInputProps()} hidden />
+      {isDragActive ? <UploadSimple weight="bold" size={24} /> : children}
+    </label>
+  )
+}
diff --git a/src/app/(marketing)/profile/_components/ProfileColorBanner.tsx b/src/app/(marketing)/profile/_components/ProfileColorBanner.tsx
index 037eb2c079..83736a40c1 100644
--- a/src/app/(marketing)/profile/_components/ProfileColorBanner.tsx
+++ b/src/app/(marketing)/profile/_components/ProfileColorBanner.tsx
@@ -10,7 +10,7 @@ import { useProfile } from "../_hooks/useProfile"
 export const ProfileColorBanner = () => {
   const { data: profile } = useProfile()
 
-  if (!profile?.backgroundImageUrl) return null
+  if (!profile?.backgroundImageUrl?.startsWith("#")) return null
 
   const color = Color(profile.backgroundImageUrl)
   const patternOpacity =
diff --git a/src/v2/components/ui/Button.tsx b/src/v2/components/ui/Button.tsx
index 4bf9a750dc..21c171e994 100644
--- a/src/v2/components/ui/Button.tsx
+++ b/src/v2/components/ui/Button.tsx
@@ -5,7 +5,7 @@ import { type VariantProps, cva } from "class-variance-authority"
 import { ButtonHTMLAttributes, forwardRef } from "react"
 
 const buttonVariants = cva(
-  "font-semibold inline-flex items-center justify-center whitespace-nowrap transition-colors focus-visible:outline-none focus-visible:ring-4 focus:ring-ring disabled:pointer-events-none disabled:opacity-50 rounded-xl text-base text-ellipsis overflow-hidden gap-1.5",
+  "font-semibold inline-flex items-center justify-center whitespace-nowrap transition-colors focus-visible:outline-none focus-visible:ring-4 focus:ring-ring disabled:pointer-events-none disabled:opacity-50 rounded-xl text-base text-ellipsis overflow-hidden gap-1.5 cursor-pointer",
   {
     variants: {
       variant: {
diff --git a/src/v2/components/ui/ColorPicker.tsx b/src/v2/components/ui/ColorPicker.tsx
index 6c93fc6d48..18f38715b6 100644
--- a/src/v2/components/ui/ColorPicker.tsx
+++ b/src/v2/components/ui/ColorPicker.tsx
@@ -51,6 +51,7 @@ export const ColorPicker = ({ fieldName, onChange }: Props) => {
                 className="h-10 max-w-40"
                 placeholder="Pick a color"
                 {...field}
+                value={CSS.supports("color", field.value) ? field.value : undefined}
               />
             </div>
           </FormControl>

From 2f9a6092ef43cbdfe9dd287da6a1fd62378c46dc Mon Sep 17 00:00:00 2001
From: Dominik Stumpf <s.dominik.work@gmail.com>
Date: Thu, 15 Aug 2024 20:38:01 +0200
Subject: [PATCH 82/87] fix: address client side error and remove type
 assertions

---
 .../(marketing)/profile/[username]/page.tsx   | 26 +++++++++++--------
 1 file changed, 15 insertions(+), 11 deletions(-)

diff --git a/src/app/(marketing)/profile/[username]/page.tsx b/src/app/(marketing)/profile/[username]/page.tsx
index 067acab376..bd149e9e1d 100644
--- a/src/app/(marketing)/profile/[username]/page.tsx
+++ b/src/app/(marketing)/profile/[username]/page.tsx
@@ -100,7 +100,9 @@ const Page = async ({ params: { username } }: { params: { username: string } })
       }}
     >
       <Layout
-        style={isBgColor ? ({ "--banner": profile.backgroundImageUrl } as any) : {}}
+        style={
+          isBgColor ? { ["--banner" as string]: profile.backgroundImageUrl } : {}
+        }
       >
         <LayoutHero className="pb-4 md:pb-10">
           <Header />
@@ -108,16 +110,18 @@ const Page = async ({ params: { username } }: { params: { username: string } })
             {isBgColor ? (
               <ProfileColorBanner />
             ) : (
-              <Image
-                src={profile.backgroundImageUrl as string}
-                fill
-                sizes="100vw"
-                alt="profile background image"
-                style={{
-                  filter: "brightness(50%)",
-                  objectFit: "cover",
-                }}
-              />
+              profile.backgroundImageUrl && (
+                <Image
+                  src={profile.backgroundImageUrl}
+                  fill
+                  sizes="100vw"
+                  alt="profile background image"
+                  style={{
+                    filter: "brightness(50%)",
+                    objectFit: "cover",
+                  }}
+                />
+              )
             )}
             <div className="absolute inset-0 bg-gradient-to-t from-background" />
           </LayoutBanner>

From 0f49be5659f13ce7def51f825759f9cee74ea0f5 Mon Sep 17 00:00:00 2001
From: Dominik Stumpf <s.dominik.work@gmail.com>
Date: Thu, 15 Aug 2024 20:55:42 +0200
Subject: [PATCH 83/87] feat: add referred users

---
 src/app/(marketing)/profile/_components/Profile.tsx     | 6 ++++--
 src/app/(marketing)/profile/_hooks/useReferredUsers.tsx | 9 +++++++++
 2 files changed, 13 insertions(+), 2 deletions(-)
 create mode 100644 src/app/(marketing)/profile/_hooks/useReferredUsers.tsx

diff --git a/src/app/(marketing)/profile/_components/Profile.tsx b/src/app/(marketing)/profile/_components/Profile.tsx
index a7dbc22568..6be1abce6a 100644
--- a/src/app/(marketing)/profile/_components/Profile.tsx
+++ b/src/app/(marketing)/profile/_components/Profile.tsx
@@ -14,14 +14,16 @@ import { ProfileOwnerGuard } from "../_components/ProfileOwnerGuard"
 import { RecentActivity } from "../_components/RecentActivity"
 import { useContributions } from "../_hooks/useContributions"
 import { useProfile } from "../_hooks/useProfile"
+import { useReferredUsers } from "../_hooks/useReferredUsers"
 import { EditProfile } from "./EditProfile/EditProfile"
 import { ProfileSkeleton } from "./ProfileSkeleton"
 
 export const Profile = () => {
   const { data: profile } = useProfile()
   const { data: contributions } = useContributions()
+  const { data: referredUsers } = useReferredUsers()
 
-  if (!profile || !contributions) return <ProfileSkeleton />
+  if (!profile || !contributions || !referredUsers) return <ProfileSkeleton />
 
   return (
     <>
@@ -52,7 +54,7 @@ export const Profile = () => {
         </p>
         <div className="mt-8 grid grid-cols-[repeat(3,auto)] gap-x-6 gap-y-4 sm:grid-cols-[repeat(5,auto)]">
           <div className="flex flex-col items-center leading-tight">
-            <div className="font-bold md:text-lg">3232</div>
+            <div className="font-bold text-lg">{referredUsers.length}</div>
             <div className="text-muted-foreground">Guildmates</div>
           </div>
           <Separator orientation="vertical" className="h-10 md:h-12" />
diff --git a/src/app/(marketing)/profile/_hooks/useReferredUsers.tsx b/src/app/(marketing)/profile/_hooks/useReferredUsers.tsx
new file mode 100644
index 0000000000..21414384f6
--- /dev/null
+++ b/src/app/(marketing)/profile/_hooks/useReferredUsers.tsx
@@ -0,0 +1,9 @@
+import useSWRImmutable from "swr/immutable"
+import { useProfile } from "./useProfile"
+
+export const useReferredUsers = () => {
+  const { data: profile } = useProfile()
+  return useSWRImmutable(
+    profile ? `/v2/profiles/${profile.username}/referred-users` : null
+  )
+}

From 750d195063a576a9b46b2bc2176abd3e65f9491e Mon Sep 17 00:00:00 2001
From: Dominik Stumpf <s.dominik.work@gmail.com>
Date: Thu, 15 Aug 2024 21:17:58 +0200
Subject: [PATCH 84/87] chore: switch to dev backend, cache activities

---
 .env                                          | 14 +++++------
 .../(marketing)/profile/[username]/page.tsx   | 25 ++++++++++++-------
 2 files changed, 23 insertions(+), 16 deletions(-)

diff --git a/.env b/.env
index d466608671..14a18012aa 100644
--- a/.env
+++ b/.env
@@ -1,15 +1,15 @@
-NEXT_PUBLIC_API=https://api.guild.xyz/v1
-NEXT_PUBLIC_DISCORD_CLIENT_ID=868172385000509460
+NEXT_PUBLIC_API=https://api.dev.guild-api.xyz/v1
+NEXT_PUBLIC_DISCORD_CLIENT_ID=1118173473676722258
 NEXT_PUBLIC_IPFS_GATEWAY=https://guild-xyz.mypinata.cloud/ipfs/
 NEXT_PUBLIC_PINATA_API=https://api.pinata.cloud
 NEXT_PUBLIC_BALANCY_API=https://balancy.guild.xyz/api
-NEXT_PUBLIC_TG_BOT_USERNAME=guildxyz_bot
-NEXT_PUBLIC_GOOGLE_CLIENT_ID=639132320574-9v9b8d9mq7rjctmjmolsjeklkl2rlcsh.apps.googleusercontent.com
-NEXT_PUBLIC_GOOGLE_SERVICE_ACCOUNT_EMAIL=guild-xyz@guildxyz.iam.gserviceaccount.com
+NEXT_PUBLIC_TG_BOT_USERNAME=Guildxyz_dev_gcp_bot
+NEXT_PUBLIC_GOOGLE_CLIENT_ID=829004986756-f5b265m0hscpaa0ah9cgqht02o8qea15.apps.googleusercontent.com
+NEXT_PUBLIC_GOOGLE_SERVICE_ACCOUNT_EMAIL=bvz-test-service-account@bvz-test-project.iam.gserviceaccount.com
 NEXT_PUBLIC_POSTHOG_KEY=phc_Pu6Xv72B95fHVTAKT5Xs2FPgNxrsNP4LecBqPiVAAxi
 NEXT_PUBLIC_WALLETCONNECT_PROJECT_ID=d851f25304d67fc8e2dd3b354223e4fa
 NEXT_PUBLIC_EDGE_CONFIG_ID=ecfg_buc5l6124c4koymyvseasbd1k3hs
 NEXT_PUBLIC_EDGE_CONFIG_READ_ACCESS_TOKEN=8b337e65-3aa6-4949-97b8-c7eab7151128
-NEXT_PUBLIC_RECAPTCHA_SITE_KEY=6LcQm4onAAAAAOcoqkw9A5txg5SbuddONchMZKrF
+NEXT_PUBLIC_RECAPTCHA_SITE_KEY=6LcMe3knAAAAAJjUyeMh1LbUcrh5k0aG0fJIZaJR
 NEXT_PUBLIC_POLYGONID_API=https://guild-privacy.s.guild.xyz
-NEXT_PUBLIC_BUGSNAG_KEY=4bd5799ac2cb4a34887513b80b845554
\ No newline at end of file
+NEXT_PUBLIC_BUGSNAG_KEY=4bd5799ac2cb4a34887513b80b845554
diff --git a/src/app/(marketing)/profile/[username]/page.tsx b/src/app/(marketing)/profile/[username]/page.tsx
index bd149e9e1d..69239ef3ec 100644
--- a/src/app/(marketing)/profile/[username]/page.tsx
+++ b/src/app/(marketing)/profile/[username]/page.tsx
@@ -10,27 +10,27 @@ import { SWRProvider } from "@/components/SWRProvider"
 import { Anchor } from "@/components/ui/Anchor"
 import { Guild, Role, Schemas } from "@guildxyz/types"
 import { ArrowRight } from "@phosphor-icons/react/dist/ssr"
+import { ActivityLogAction } from "components/[guild]/activity/constants"
+import { env } from "env"
 import Image from "next/image"
-import { redirect } from "next/navigation"
-import { notFound } from "next/navigation"
+import { notFound, redirect } from "next/navigation"
 import { Profile } from "../_components/Profile"
 import { ProfileColorBanner } from "../_components/ProfileColorBanner"
 
-// TODO: use env var for this url when it is changed to this value.
-// next-server throws fetch error if we modify the env var in memory
-const api = "https://api.guild.xyz"
+const api = env.NEXT_PUBLIC_API
 
 async function ssrFetcher<T>(...args: Parameters<typeof fetch>) {
   return (await fetch(...args)).json() as T
 }
 
 const fetchPublicProfileData = async ({ username }: { username: string }) => {
+  const activitiesRequest = new URL(`v2/profiles/${username}/activity`, api)
   const contributionsRequest = new URL(`v2/profiles/${username}/contributions`, api)
   const profileRequest = new URL(`v2/profiles/${username}`, api)
   const profileResponse = await fetch(profileRequest, {
     next: {
       tags: ["profile"],
-      revalidate: 600,
+      revalidate: 3600,
     },
   })
 
@@ -43,10 +43,16 @@ const fetchPublicProfileData = async ({ username }: { username: string }) => {
     {
       next: {
         tags: ["contributions"],
-        revalidate: 600,
+        revalidate: 3600,
       },
     }
   )
+  const activities = await ssrFetcher<ActivityLogAction[]>(activitiesRequest, {
+    next: {
+      tags: ["contributions"],
+      revalidate: 60,
+    },
+  })
   const roleRequests = contributions.map(
     ({ roleId, guildId }) => new URL(`v2/guilds/${guildId}/roles/${roleId}`, api)
   )
@@ -57,7 +63,7 @@ const fetchPublicProfileData = async ({ username }: { username: string }) => {
     guildRequests.map((req) =>
       ssrFetcher<Guild>(req, {
         next: {
-          revalidate: 3600,
+          revalidate: 3 * 3600,
         },
       })
     )
@@ -66,7 +72,7 @@ const fetchPublicProfileData = async ({ username }: { username: string }) => {
     roleRequests.map((req) =>
       ssrFetcher<Role>(req, {
         next: {
-          revalidate: 3600,
+          revalidate: 3 * 3600,
         },
       })
     )
@@ -80,6 +86,7 @@ const fetchPublicProfileData = async ({ username }: { username: string }) => {
   return {
     profile,
     fallback: {
+      [activitiesRequest.pathname]: activities,
       [profileRequest.pathname]: profile,
       [contributionsRequest.pathname]: contributions,
       ...guildsZipped,

From 6aecd65f6adeac5885b2f9a1dc080e6f0a119cdd Mon Sep 17 00:00:00 2001
From: valid <valid@zgen.hu>
Date: Thu, 15 Aug 2024 23:25:54 +0200
Subject: [PATCH 85/87] cleanup chart colors

---
 src/app/globals.css | 12 ------------
 1 file changed, 12 deletions(-)

diff --git a/src/app/globals.css b/src/app/globals.css
index 72a082e3ef..7d7fa82228 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -124,12 +124,6 @@
     --md: 768px;
     --lg: 1024px;
     --xl: 1280px;
-
-    --chart-1: 12 76% 61%;
-    --chart-2: 173 58% 39%;
-    --chart-3: 197 37% 24%;
-    --chart-4: 43 74% 66%;
-    --chart-5: 27 87% 67%;
   }
 
   :root[data-theme="dark"] {
@@ -228,12 +222,6 @@
     --polygonid-active: 262 81% 77%;
     --farcaster-hover: 239 75% 75%;
     --farcaster-active: 238 76% 81%;
-
-    --chart-1: 220 70% 50%;
-    --chart-2: 160 60% 45%;
-    --chart-3: 30 80% 55%;
-    --chart-4: 280 65% 60%;
-    --chart-5: 340 75% 55%;
   }
 }
 

From 7207684026665b4a2a1f3d027c6f8b9737a3e8c2 Mon Sep 17 00:00:00 2001
From: Dominik Stumpf <s.dominik.work@gmail.com>
Date: Fri, 16 Aug 2024 10:18:41 +0200
Subject: [PATCH 86/87] refactor: use backend schemas

---
 .../_components/StartProfile.tsx              |  5 +--
 src/v2/lib/validations/profileSchema.ts       | 37 -------------------
 2 files changed, 2 insertions(+), 40 deletions(-)
 delete mode 100644 src/v2/lib/validations/profileSchema.ts

diff --git a/src/app/(marketing)/create-profile/_components/StartProfile.tsx b/src/app/(marketing)/create-profile/_components/StartProfile.tsx
index 3a0f974276..195d3f210a 100644
--- a/src/app/(marketing)/create-profile/_components/StartProfile.tsx
+++ b/src/app/(marketing)/create-profile/_components/StartProfile.tsx
@@ -14,8 +14,7 @@ import {
 import { Input } from "@/components/ui/Input"
 import { useToast } from "@/components/ui/hooks/useToast"
 import { cn } from "@/lib/utils"
-import { profileSchema } from "@/lib/validations/profileSchema"
-import { Schemas } from "@guildxyz/types"
+import { Schemas, schemas } from "@guildxyz/types"
 import { zodResolver } from "@hookform/resolvers/zod"
 import { Spinner, UploadSimple, User } from "@phosphor-icons/react"
 import { ArrowRight } from "@phosphor-icons/react/dist/ssr"
@@ -54,7 +53,7 @@ export const StartProfile: OnboardingChain = () => {
   }, [farcasterProfile])
 
   const form = useForm<Schemas["ProfileCreation"]>({
-    resolver: zodResolver(profileSchema),
+    resolver: zodResolver(schemas.ProfileCreationSchema),
     defaultValues: {
       name: "",
       username: "",
diff --git a/src/v2/lib/validations/profileSchema.ts b/src/v2/lib/validations/profileSchema.ts
deleted file mode 100644
index db17dd94c1..0000000000
--- a/src/v2/lib/validations/profileSchema.ts
+++ /dev/null
@@ -1,37 +0,0 @@
-import { z } from "zod"
-
-export const profileSchema = z.object({
-  name: z
-    .string()
-    .max(100, { message: "Name cannot exceed 100 characters" })
-    .optional(),
-  username: z
-    .string()
-    .min(1, { message: "Username is required" })
-    .max(100, { message: "Username cannot exceed 100 characters" })
-    .superRefine((value, ctx) => {
-      const pattern = /^[\w\-.]+$/
-      const isValid = pattern.test(value)
-      if (!isValid) {
-        ctx.addIssue({
-          code: z.ZodIssueCode.custom,
-          message:
-            "Username must only contain either alphanumeric, hyphen, underscore or dot characters",
-        })
-      }
-    }),
-  bio: z
-    .string()
-    .max(1000, { message: "Bio cannot exceed 1000 characters" })
-    .optional(),
-  profileImageUrl: z
-    .string()
-    .url({ message: "Profile image must be a valid URL" })
-    .max(500, { message: "Profile image URL cannot exceed 500 characters" })
-    .optional(),
-  backgroundImageUrl: z
-    .string()
-    .url({ message: "Background image must be a valid URL" })
-    .max(500, { message: "Profile image URL cannot exceed 500 characters" })
-    .optional(),
-})

From 5be36db35ae92a69a9901feb45fccaa513030848 Mon Sep 17 00:00:00 2001
From: valid <valid@zgen.hu>
Date: Fri, 16 Aug 2024 11:40:33 +0200
Subject: [PATCH 87/87] fix: broken banner styles

---
 src/app/(marketing)/create-profile/page.tsx | 5 +++--
 src/app/create-guild/page.tsx               | 2 +-
 src/app/globals.css                         | 2 +-
 3 files changed, 5 insertions(+), 4 deletions(-)

diff --git a/src/app/(marketing)/create-profile/page.tsx b/src/app/(marketing)/create-profile/page.tsx
index 45b71c987b..9c5a0710bb 100644
--- a/src/app/(marketing)/create-profile/page.tsx
+++ b/src/app/(marketing)/create-profile/page.tsx
@@ -9,6 +9,7 @@ export const metadata: Metadata = {
 }
 
 const Page = () => {
+  // todo: get finetuned layout from new create-guild
   return (
     <Layout className="relative min-h-screen">
       <div
@@ -21,13 +22,13 @@ const Page = () => {
       />
       <LayoutHero>
         <Header />
-        <LayoutBanner className="-bottom-[206px] border-border border-b border-dashed">
+        <LayoutBanner className="-bottom-[206px] border-border border-b border-dashed dark:bg-banner-dark">
           <div className="absolute inset-0 bg-[auto_115%] bg-[top_5px_right_0] bg-[url('/banner.svg')] bg-repeat opacity-10" />
           <div
             className="absolute inset-0"
             style={{
               background:
-                "radial-gradient(circle at bottom, transparent 5%, hsl(var(--banner)))",
+                "radial-gradient(circle at bottom, transparent 5%, var(--banner-dark))",
             }}
           />
         </LayoutBanner>
diff --git a/src/app/create-guild/page.tsx b/src/app/create-guild/page.tsx
index 0210554ca8..c0c9fa5e9b 100644
--- a/src/app/create-guild/page.tsx
+++ b/src/app/create-guild/page.tsx
@@ -23,7 +23,7 @@ const Page = () => (
       <LayoutHero className="pb-52">
         <LayoutBanner className="border-border-muted border-b border-dashed dark:bg-banner-dark">
           <div className="absolute inset-0 bg-[auto_115%] bg-[top_5px_right_0] bg-[url('/banner.svg')] bg-repeat opacity-5" />
-          <div className="absolute inset-0 bg-[radial-gradient(circle_at_bottom,transparent_5%,hsl(var(--banner)))] dark:bg-[radial-gradient(circle_at_bottom,transparent_5%,hsl(var(--banner-dark)))]" />
+          <div className="absolute inset-0 bg-[radial-gradient(circle_at_bottom,transparent_5%,var(--banner))] dark:bg-[radial-gradient(circle_at_bottom,transparent_5%,var(--banner-dark))]" />
         </LayoutBanner>
 
         <Header />
diff --git a/src/app/globals.css b/src/app/globals.css
index 7d7fa82228..f659d4c34a 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -179,7 +179,7 @@
     --success-subtle: 141 79% 85%;
     --success-subtle-foreground: var(--success-subtle);
 
-    --banner: 240 2% 12%;
+    --banner: #36363a;
 
     --muted: 240 3% 13%;
     --muted-foreground: 240 5% 60%;