From 3a8874c3fb742d84b8a325adb4f159dd2a496ebc Mon Sep 17 00:00:00 2001
From: Dominik Stumpf <s.dominik.work@gmail.com>
Date: Sat, 23 Nov 2024 00:02:40 +0100
Subject: [PATCH 01/93] feat: add guild page routes

---
 guild.d.ts                                    | 33 --------
 .../[guildId]/[roleGroupId]/page.tsx          | 53 ++++++++++++
 .../_components/RoleGroupNavLink.tsx          | 25 ++++++
 src/app/(dashboard)/[guildId]/layout.tsx      | 74 +++++++++++++++++
 src/app/(dashboard)/[guildId]/page.tsx        |  3 +
 src/app/explorer/components/GuildCard.tsx     |  1 +
 src/app/explorer/fetchers.ts                  |  1 +
 src/app/explorer/page.tsx                     |  1 +
 src/app/page.tsx                              | 10 ---
 src/components/DashboardContainer.tsx         | 27 +++++++
 src/lib/types.ts                              | 80 +++++++++++++++++++
 11 files changed, 265 insertions(+), 43 deletions(-)
 delete mode 100644 guild.d.ts
 create mode 100644 src/app/(dashboard)/[guildId]/[roleGroupId]/page.tsx
 create mode 100644 src/app/(dashboard)/[guildId]/_components/RoleGroupNavLink.tsx
 create mode 100644 src/app/(dashboard)/[guildId]/layout.tsx
 create mode 100644 src/app/(dashboard)/[guildId]/page.tsx
 delete mode 100644 src/app/page.tsx
 create mode 100644 src/components/DashboardContainer.tsx
 create mode 100644 src/lib/types.ts

diff --git a/guild.d.ts b/guild.d.ts
deleted file mode 100644
index 58eafbad35..0000000000
--- a/guild.d.ts
+++ /dev/null
@@ -1,33 +0,0 @@
-// dumping here types util it comes down properly
-
-export {}
-
-declare global {
-  type Guild = {
-    name: string;
-    id: string;
-    urlName: string;
-    createdAt: number;
-    updatedAt: number;
-    description: string;
-    imageUrl: string;
-    backgroundImageUrl: string;
-    visibility: Record<string, string>;
-    settings: Record<string, string>;
-    searchTags: string[];
-    categoryTags: string[];
-    socialLinks: Record<string, string>;
-    owner: string;
-  };
-
-  type PaginatedResponse<Item extends any> = {
-    page: number;
-    pageSize: number;
-    sortBy: string;
-    reverse: boolean;
-    searchQuery: string;
-    query: string;
-    items: Item[];
-    total: number;
-  };
-}
diff --git a/src/app/(dashboard)/[guildId]/[roleGroupId]/page.tsx b/src/app/(dashboard)/[guildId]/[roleGroupId]/page.tsx
new file mode 100644
index 0000000000..c3dd83fec7
--- /dev/null
+++ b/src/app/(dashboard)/[guildId]/[roleGroupId]/page.tsx
@@ -0,0 +1,53 @@
+import { Card } from "@/components/ui/Card";
+import { env } from "@/lib/env";
+import type {
+  DynamicRoute,
+  Guild,
+  PaginatedResponse,
+  Role,
+  RoleGroup,
+} from "@/lib/types";
+
+const RoleGroupPage = async ({
+  params,
+}: DynamicRoute<{ roleGroupId: string; guildId: string }>) => {
+  const { roleGroupId: roleGroupIdParam, guildId: guildIdParam } = await params;
+  const _guild = (await (
+    await fetch(`${env.NEXT_PUBLIC_API}/guild/urlName/${guildIdParam}`)
+  ).json()) as Guild;
+  const paginatedRoleGroup = (await (
+    await fetch(
+      `${env.NEXT_PUBLIC_API}/role-group/search?custumQuery=@guildId:{${guildIdParam}}`,
+    )
+  ).json()) as PaginatedResponse<RoleGroup>;
+  const roleGroups = paginatedRoleGroup.items;
+  const roleGroup = roleGroups.find((rg) => rg.urlName === roleGroupIdParam);
+
+  const paginatedRole = (await (
+    await fetch(
+      `${env.NEXT_PUBLIC_API}/role/search?custumQuery=@guildId:{${guildIdParam}} @roleGroupId:{${roleGroup}}`,
+    )
+  ).json()) as PaginatedResponse<Role>;
+  const roles = paginatedRole.items;
+  console.log(roles);
+
+  return (
+    <div className="my-4 space-y-4">
+      {roles.map((role) => (
+        <Card className="p-4" key={role.id}>
+          <div className="flex items-center">
+            <img
+              className="size-12 rounded-full"
+              src={role.imageUrl}
+              alt="role avatar"
+            />
+            <h3 className="font-bold text-xl tracking-tight">{role.name}</h3>
+          </div>
+          <p className="">{role.description}</p>
+        </Card>
+      ))}
+    </div>
+  );
+};
+
+export default RoleGroupPage;
diff --git a/src/app/(dashboard)/[guildId]/_components/RoleGroupNavLink.tsx b/src/app/(dashboard)/[guildId]/_components/RoleGroupNavLink.tsx
new file mode 100644
index 0000000000..a681f4f8da
--- /dev/null
+++ b/src/app/(dashboard)/[guildId]/_components/RoleGroupNavLink.tsx
@@ -0,0 +1,25 @@
+"use client";
+
+import { buttonVariants } from "@/components/ui/Button";
+import Link from "next/link";
+import { useSelectedLayoutSegment } from "next/navigation";
+
+export const RoleGroupNavLink = ({
+  tab,
+}: { tab: { label: string; path: string; segment: string } }) => {
+  const layoutSegment = useSelectedLayoutSegment();
+  const isActive = tab.segment === layoutSegment;
+
+  return (
+    <Link
+      key={tab.label + tab.path}
+      className={buttonVariants({
+        variant: "subtle",
+        colorScheme: isActive ? "primary" : "secondary",
+      })}
+      href={tab.path}
+    >
+      {tab.label}
+    </Link>
+  );
+};
diff --git a/src/app/(dashboard)/[guildId]/layout.tsx b/src/app/(dashboard)/[guildId]/layout.tsx
new file mode 100644
index 0000000000..940e431d16
--- /dev/null
+++ b/src/app/(dashboard)/[guildId]/layout.tsx
@@ -0,0 +1,74 @@
+import { DashboardContainer } from "@/components/DashboardContainer";
+import { Button } from "@/components/ui/Button";
+import { ScrollArea, ScrollBar } from "@/components/ui/ScrollArea";
+import { env } from "@/lib/env";
+import type {
+  DynamicRoute,
+  Guild,
+  PaginatedResponse,
+  RoleGroup,
+} from "@/lib/types";
+import type { PropsWithChildren } from "react";
+import { RoleGroupNavLink } from "./_components/RoleGroupNavLink";
+
+const GuildPage = async ({
+  params,
+  children,
+}: PropsWithChildren<DynamicRoute<{ guildId: string }>>) => {
+  const { guildId: guildIdParam } = await params;
+  const guild = (await (
+    await fetch(`${env.NEXT_PUBLIC_API}/guild/urlName/${guildIdParam}`)
+  ).json()) as Guild;
+  const paginatedRoleGroup = (await (
+    await fetch(
+      `${env.NEXT_PUBLIC_API}/role-group/search?custumQuery=@guildId:{${guildIdParam}}`,
+    )
+  ).json()) as PaginatedResponse<RoleGroup>;
+  const roleGroups = paginatedRoleGroup.items;
+
+  return (
+    <DashboardContainer>
+      <main className="py-16">
+        <div className="flex flex-col items-stretch md:flex-row md:justify-between">
+          <div className="space-y-4">
+            <div className="flex max-w-prose items-center gap-4">
+              <img
+                src={guild.imageUrl}
+                className="size-20 rounded-full border"
+                alt="avatar"
+              />
+              <h1 className="text-pretty font-bold font-display text-5xl tracking-tight">
+                {guild.name}
+              </h1>
+              <Button colorScheme="success" size="lg">
+                Join Guild
+              </Button>
+            </div>
+            <p className="text-balance text-lg leading-relaxed">
+              {guild.description}
+            </p>
+          </div>
+        </div>
+
+        <ScrollArea>
+          <div className="mt-32 mb-3 flex gap-3">
+            {roleGroups.map((rg) => (
+              <RoleGroupNavLink
+                key={rg.id}
+                tab={{
+                  path: `/${guildIdParam}/${rg.urlName}`,
+                  segment: rg.urlName,
+                  label: rg.name,
+                }}
+              />
+            ))}
+          </div>
+          <ScrollBar orientation="horizontal" />
+        </ScrollArea>
+        {children}
+      </main>
+    </DashboardContainer>
+  );
+};
+
+export default GuildPage;
diff --git a/src/app/(dashboard)/[guildId]/page.tsx b/src/app/(dashboard)/[guildId]/page.tsx
new file mode 100644
index 0000000000..9ef0175edf
--- /dev/null
+++ b/src/app/(dashboard)/[guildId]/page.tsx
@@ -0,0 +1,3 @@
+const DefaultGuildPage = () => "default guild page";
+
+export default DefaultGuildPage;
diff --git a/src/app/explorer/components/GuildCard.tsx b/src/app/explorer/components/GuildCard.tsx
index cef6659310..5457f1284c 100644
--- a/src/app/explorer/components/GuildCard.tsx
+++ b/src/app/explorer/components/GuildCard.tsx
@@ -1,6 +1,7 @@
 import { Badge } from "@/components/ui/Badge";
 import { Card } from "@/components/ui/Card";
 import { Skeleton } from "@/components/ui/Skeleton";
+import type { Guild } from "@/lib/types";
 import { ImageSquare, Users } from "@phosphor-icons/react/dist/ssr";
 import { Avatar, AvatarFallback, AvatarImage } from "@radix-ui/react-avatar";
 import Link from "next/link";
diff --git a/src/app/explorer/fetchers.ts b/src/app/explorer/fetchers.ts
index f2ce54db18..2157d158a8 100644
--- a/src/app/explorer/fetchers.ts
+++ b/src/app/explorer/fetchers.ts
@@ -1,4 +1,5 @@
 import { env } from "@/lib/env";
+import type { Guild, PaginatedResponse } from "@/lib/types";
 import { PAGE_SIZE } from "./constants";
 
 export const getGuildSearch =
diff --git a/src/app/explorer/page.tsx b/src/app/explorer/page.tsx
index 34803c5bed..e9ac5a8fca 100644
--- a/src/app/explorer/page.tsx
+++ b/src/app/explorer/page.tsx
@@ -1,6 +1,7 @@
 import { AuthBoundary } from "@/components/AuthBoundary";
 import { SignInButton } from "@/components/SignInButton";
 import { env } from "@/lib/env";
+import type { Guild, PaginatedResponse } from "@/lib/types";
 import {
   HydrationBoundary,
   QueryClient,
diff --git a/src/app/page.tsx b/src/app/page.tsx
deleted file mode 100644
index 3fc5d94a16..0000000000
--- a/src/app/page.tsx
+++ /dev/null
@@ -1,10 +0,0 @@
-const Home = () => {
-  return (
-    <main>
-      <h1 className="font-display">Hello, Guild!</h1>
-      <p>Test, one, two, three...</p>
-    </main>
-  );
-};
-
-export default Home;
diff --git a/src/components/DashboardContainer.tsx b/src/components/DashboardContainer.tsx
new file mode 100644
index 0000000000..143cdd4dbe
--- /dev/null
+++ b/src/components/DashboardContainer.tsx
@@ -0,0 +1,27 @@
+import { cn } from "@/lib/cssUtils";
+import { Slot } from "@radix-ui/react-slot";
+import type { HTMLAttributes } from "react";
+
+interface DashboardContainerProps extends HTMLAttributes<HTMLDivElement> {
+  asChild?: boolean;
+}
+
+export const DashboardContainer = ({
+  children,
+  className,
+  asChild = false,
+  ...props
+}: DashboardContainerProps) => {
+  const Comp = asChild ? Slot : "div";
+  return (
+    <Comp
+      className={cn(
+        "mx-auto w-full max-w-screen-lg px-4 sm:px-8 md:px-10",
+        className,
+      )}
+      {...props}
+    >
+      {children}
+    </Comp>
+  );
+};
diff --git a/src/lib/types.ts b/src/lib/types.ts
new file mode 100644
index 0000000000..ed901c252e
--- /dev/null
+++ b/src/lib/types.ts
@@ -0,0 +1,80 @@
+export type PaginatedResponse<Item = unknown> = {
+  page: number;
+  pageSize: number;
+  sortBy: string;
+  reverse: boolean;
+  searchQuery: string;
+  query: string;
+  items: Item[];
+  total: number;
+};
+
+export type DynamicRoute<T extends Record<string, string>> = {
+  params: T;
+};
+
+const G = {
+  id: "8dcc0fc6-31e6-4e6c-b24b-19b5a4f244ca",
+  createdAt: 1732304836273,
+  updatedAt: 1732304836273,
+  name: "Basic Template",
+  urlName: "basic-template",
+  description: "This template provides basic functionality for...",
+  imageUrl: "https://example.com/images/template.jpg",
+  backgroundImageUrl: "https://example.com/images/background.jpg",
+  visibility: {},
+  settings: {},
+  searchTags: [],
+  categoryTags: [],
+  socialLinks: {},
+};
+
+const RG = {
+  id: "ff3b37ed-727e-5ab3-a202-32f9e3387e5a",
+  legacyId: "1024",
+  createdAt: "1725848548765",
+  updatedAt: "1725848548765",
+  name: "#RR",
+  urlName: "rr",
+  description: "",
+  imageUrl:
+    "https://guild-xyz.mypinata.cloud/ipfs/QmfVFG6mFMtFzNYsKXyN3FffBmpZzrqWcycBgDYjLzg14C",
+  visibility: {
+    hideFromGuildPage: false,
+  },
+  settings: {
+    position: 0,
+  },
+  guildId: "32feb189-9b03-59c8-a1ef-7b296cbc42e6",
+  type: "CATEGORY",
+};
+
+const R = {
+  id: "85afa420-f3d6-5113-a978-1eea9f2ef543",
+  legacyId: "17184",
+  createdAt: "1664067944168",
+  updatedAt: "1677588151210",
+  system: {
+    lastSyncedAt: null,
+  },
+  name: '"Loser" Skellie Chimps',
+  urlName: "loser-skellie-chimps",
+  description: "hold Loser from Skellie Chimps",
+  imageUrl: "/guildLogos/213.svg",
+  visibility: {
+    hidden: false,
+    hideFromEyes: false,
+  },
+  settings: {
+    position: 0,
+    anyOfNum: 0,
+    logic: "AND",
+  },
+  guildId: "30c83783-db7e-58b3-b890-3afd77ad8af3",
+  groupId: "",
+  members: "0",
+};
+
+export type Guild = typeof G;
+export type RoleGroup = typeof RG;
+export type Role = typeof R;

From bbf915de44a2832d9c24fc36f22238dc4e399b49 Mon Sep 17 00:00:00 2001
From: Dominik Stumpf <s.dominik.work@gmail.com>
Date: Sat, 23 Nov 2024 00:10:09 +0100
Subject: [PATCH 02/93] chore: center join guild button

---
 src/app/(dashboard)/[guildId]/layout.tsx | 22 ++++++++++++----------
 1 file changed, 12 insertions(+), 10 deletions(-)

diff --git a/src/app/(dashboard)/[guildId]/layout.tsx b/src/app/(dashboard)/[guildId]/layout.tsx
index 940e431d16..ef5b2e976d 100644
--- a/src/app/(dashboard)/[guildId]/layout.tsx
+++ b/src/app/(dashboard)/[guildId]/layout.tsx
@@ -30,16 +30,18 @@ const GuildPage = async ({
     <DashboardContainer>
       <main className="py-16">
         <div className="flex flex-col items-stretch md:flex-row md:justify-between">
-          <div className="space-y-4">
-            <div className="flex max-w-prose items-center gap-4">
-              <img
-                src={guild.imageUrl}
-                className="size-20 rounded-full border"
-                alt="avatar"
-              />
-              <h1 className="text-pretty font-bold font-display text-5xl tracking-tight">
-                {guild.name}
-              </h1>
+          <div className="w-full space-y-4">
+            <div className="flex w-full flex-col items-stretch justify-between gap-8 md:flex-row md:items-center">
+              <div className="flex max-w-prose items-center gap-4">
+                <img
+                  src={guild.imageUrl}
+                  className="size-20 rounded-full border"
+                  alt="avatar"
+                />
+                <h1 className="text-pretty font-bold font-display text-3xl tracking-tight sm:text-4xl lg:text-5xl">
+                  {guild.name}
+                </h1>
+              </div>
               <Button colorScheme="success" size="lg">
                 Join Guild
               </Button>

From e6df6f71afbc9a08d82e07a93961cdb5d1ddd343 Mon Sep 17 00:00:00 2001
From: Dominik Stumpf <s.dominik.work@gmail.com>
Date: Sat, 23 Nov 2024 02:41:56 +0100
Subject: [PATCH 03/93] feat: add requirement ui

---
 .../[guildId]/[roleGroupId]/page.tsx          | 68 ++++++++++++++-----
 src/app/(dashboard)/[guildId]/layout.tsx      |  4 +-
 src/app/(dashboard)/[guildId]/page.tsx        | 29 +++++++-
 src/styles/globals.css                        |  6 +-
 4 files changed, 87 insertions(+), 20 deletions(-)

diff --git a/src/app/(dashboard)/[guildId]/[roleGroupId]/page.tsx b/src/app/(dashboard)/[guildId]/[roleGroupId]/page.tsx
index c3dd83fec7..c5b6943135 100644
--- a/src/app/(dashboard)/[guildId]/[roleGroupId]/page.tsx
+++ b/src/app/(dashboard)/[guildId]/[roleGroupId]/page.tsx
@@ -1,3 +1,4 @@
+import { Button } from "@/components/ui/Button";
 import { Card } from "@/components/ui/Card";
 import { env } from "@/lib/env";
 import type {
@@ -7,43 +8,78 @@ import type {
   Role,
   RoleGroup,
 } from "@/lib/types";
+import { Lock } from "@phosphor-icons/react/dist/ssr";
+import { ScrollArea } from "@radix-ui/react-scroll-area";
+import { Fragment } from "react";
 
 const RoleGroupPage = async ({
   params,
 }: DynamicRoute<{ roleGroupId: string; guildId: string }>) => {
   const { roleGroupId: roleGroupIdParam, guildId: guildIdParam } = await params;
-  const _guild = (await (
+  const guild = (await (
     await fetch(`${env.NEXT_PUBLIC_API}/guild/urlName/${guildIdParam}`)
   ).json()) as Guild;
   const paginatedRoleGroup = (await (
     await fetch(
-      `${env.NEXT_PUBLIC_API}/role-group/search?custumQuery=@guildId:{${guildIdParam}}`,
+      `${env.NEXT_PUBLIC_API}/role-group/search?customQuery=@guildId:{${guild.id}}&pageSize=${Number.MAX_SAFE_INTEGER}`,
     )
   ).json()) as PaginatedResponse<RoleGroup>;
   const roleGroups = paginatedRoleGroup.items;
-  const roleGroup = roleGroups.find((rg) => rg.urlName === roleGroupIdParam);
-
+  const roleGroup = roleGroups.find((rg) => rg.urlName === roleGroupIdParam)!;
+  console.log(
+    `${env.NEXT_PUBLIC_API}/role/search?customQuery=@guildId:{${guild.id}}&pageSize=${Number.MAX_SAFE_INTEGER}`,
+  );
   const paginatedRole = (await (
     await fetch(
-      `${env.NEXT_PUBLIC_API}/role/search?custumQuery=@guildId:{${guildIdParam}} @roleGroupId:{${roleGroup}}`,
+      `${env.NEXT_PUBLIC_API}/role/search?customQuery=@guildId:{${guild.id}}&pageSize=${Number.MAX_SAFE_INTEGER}`,
     )
   ).json()) as PaginatedResponse<Role>;
-  const roles = paginatedRole.items;
-  console.log(roles);
+  const roles = paginatedRole.items.filter((r) => r.groupId === roleGroup.id);
 
   return (
     <div className="my-4 space-y-4">
       {roles.map((role) => (
-        <Card className="p-4" key={role.id}>
-          <div className="flex items-center">
-            <img
-              className="size-12 rounded-full"
-              src={role.imageUrl}
-              alt="role avatar"
-            />
-            <h3 className="font-bold text-xl tracking-tight">{role.name}</h3>
+        <Card className="flex border" key={role.id}>
+          <div className="w-1/2 border-r-2 p-6">
+            <div className="flex items-center gap-3">
+              <img
+                className="size-14 rounded-full border"
+                src={role.imageUrl}
+                alt="role avatar"
+              />
+              <h3 className="font-bold text-xl tracking-tight">{role.name}</h3>
+            </div>
+            <p className="mt-4 leading-relaxed">{role.description}</p>
+          </div>
+          <div className="w-1/2 bg-background p-6">
+            <div className="flex items-center justify-between">
+              <span className="font-bold text-foreground-secondary text-xs">
+                REQUIREMENTS
+              </span>
+              <Button size="sm">
+                <Lock />
+                Join Guild to collect rewards
+              </Button>
+            </div>
+            <ScrollArea className="mt-6 h-32">
+              <div className="flex flex-col gap-6">
+                {Array.from({ length: 16 }, (_, i) => (
+                  <Fragment key={i}>
+                    {i > 0 && <div className="h-px w-full bg-border" />}
+                    <div className="flex items-center gap-3">
+                      <div className="size-10 rounded-full bg-image" />
+                      <div className="">
+                        <h4 className="font-medium">Requirement name</h4>
+                        <p className="text-foreground-secondary text-sm">
+                          description, additional info
+                        </p>
+                      </div>
+                    </div>
+                  </Fragment>
+                ))}
+              </div>
+            </ScrollArea>
           </div>
-          <p className="">{role.description}</p>
         </Card>
       ))}
     </div>
diff --git a/src/app/(dashboard)/[guildId]/layout.tsx b/src/app/(dashboard)/[guildId]/layout.tsx
index ef5b2e976d..9ba26ee1b8 100644
--- a/src/app/(dashboard)/[guildId]/layout.tsx
+++ b/src/app/(dashboard)/[guildId]/layout.tsx
@@ -21,7 +21,7 @@ const GuildPage = async ({
   ).json()) as Guild;
   const paginatedRoleGroup = (await (
     await fetch(
-      `${env.NEXT_PUBLIC_API}/role-group/search?custumQuery=@guildId:{${guildIdParam}}`,
+      `${env.NEXT_PUBLIC_API}/role-group/search?customQuery=@guildId:{${guild.id}}`,
     )
   ).json()) as PaginatedResponse<RoleGroup>;
   const roleGroups = paginatedRoleGroup.items;
@@ -46,7 +46,7 @@ const GuildPage = async ({
                 Join Guild
               </Button>
             </div>
-            <p className="text-balance text-lg leading-relaxed">
+            <p className="line-clamp-3 max-w-prose text-balance text-lg leading-relaxed">
               {guild.description}
             </p>
           </div>
diff --git a/src/app/(dashboard)/[guildId]/page.tsx b/src/app/(dashboard)/[guildId]/page.tsx
index 9ef0175edf..37adb52139 100644
--- a/src/app/(dashboard)/[guildId]/page.tsx
+++ b/src/app/(dashboard)/[guildId]/page.tsx
@@ -1,3 +1,30 @@
-const DefaultGuildPage = () => "default guild page";
+import { env } from "@/lib/env";
+import type {
+  DynamicRoute,
+  Guild,
+  PaginatedResponse,
+  RoleGroup,
+} from "@/lib/types";
+import { redirect } from "next/navigation";
+
+const DefaultGuildPage = async ({
+  params,
+}: DynamicRoute<{ guildId: string }>) => {
+  const { guildId: guildIdParam } = await params;
+  const guild = (await (
+    await fetch(`${env.NEXT_PUBLIC_API}/guild/urlName/${guildIdParam}`)
+  ).json()) as Guild;
+  const paginatedRoleGroup = (await (
+    await fetch(
+      `${env.NEXT_PUBLIC_API}/role-group/search?customQuery=@guildId:{${guild.id}}`,
+    )
+  ).json()) as PaginatedResponse<RoleGroup>;
+  const roleGroups = paginatedRoleGroup.items;
+  const roleGroup = roleGroups.at(0);
+  if (roleGroup) {
+    redirect(`/${guildIdParam}/${roleGroup.urlName}`);
+  }
+  return "default guild page";
+};
 
 export default DefaultGuildPage;
diff --git a/src/styles/globals.css b/src/styles/globals.css
index 37f0070839..4bf3b317c0 100644
--- a/src/styles/globals.css
+++ b/src/styles/globals.css
@@ -83,7 +83,7 @@ html {
   --image: var(--gray-700);
   --skeleton: var(--gray-300);
   --border: var(--gray-300);
-  
+
   --input-border: var(--gray-200);
   --input-border-accent: var(--gray-300);
   --input-border-invalid: var(--red-500);
@@ -179,3 +179,7 @@ html {
 body {
   @apply bg-background text-foreground font-sans min-h-screen antialiased selection:bg-foreground selection:text-background;
 }
+
+* {
+  border-color: var(--border);
+}

From 43937103d0c5537bf4b5e6c4569cae30d9ecd797 Mon Sep 17 00:00:00 2001
From: BrickheadJohnny <johnny.zgen@gmail.com>
Date: Tue, 26 Nov 2024 15:25:43 +0100
Subject: [PATCH 04/93] fix: remove the `[guild]` directory

---
 src/app/(dashboard)/[guild]/page.tsx | 27 ---------------------------
 1 file changed, 27 deletions(-)
 delete mode 100644 src/app/(dashboard)/[guild]/page.tsx

diff --git a/src/app/(dashboard)/[guild]/page.tsx b/src/app/(dashboard)/[guild]/page.tsx
deleted file mode 100644
index b31d944b7e..0000000000
--- a/src/app/(dashboard)/[guild]/page.tsx
+++ /dev/null
@@ -1,27 +0,0 @@
-import type { Metadata } from "next";
-
-type Props = {
-  params: Promise<{ guild: string }>;
-  searchParams: Promise<{ [key: string]: string | string[] | undefined }>;
-};
-
-export async function generateMetadata({ params }: Props): Promise<Metadata> {
-  const urlName = (await params).guild;
-
-  return {
-    title: urlName,
-  };
-}
-
-const GuildPage = async ({ params }: Props) => {
-  const urlName = (await params).guild;
-
-  return (
-    <div className="grid gap-4">
-      <p>Guild page</p>
-      <p>{`URL name: ${urlName}`}</p>
-    </div>
-  );
-};
-
-export default GuildPage;

From 008047f5b9e24410154da66d4850b4cd9f2090cc Mon Sep 17 00:00:00 2001
From: BrickheadJohnny <johnny.zgen@gmail.com>
Date: Tue, 26 Nov 2024 17:02:07 +0100
Subject: [PATCH 05/93] feat: GuildImage component

---
 src/app/(dashboard)/[guildId]/layout.tsx      | 76 +++++++++----------
 .../explorer/components/GuildCard.tsx         | 24 ++----
 src/components/GuildImage.tsx                 | 30 ++++++++
 3 files changed, 74 insertions(+), 56 deletions(-)
 create mode 100644 src/components/GuildImage.tsx

diff --git a/src/app/(dashboard)/[guildId]/layout.tsx b/src/app/(dashboard)/[guildId]/layout.tsx
index 0d03fcd36c..d87df77ee5 100644
--- a/src/app/(dashboard)/[guildId]/layout.tsx
+++ b/src/app/(dashboard)/[guildId]/layout.tsx
@@ -1,4 +1,4 @@
-import { DashboardContainer } from "@/components/DashboardContainer";
+import { GuildImage } from "@/components/GuildImage";
 import { Button } from "@/components/ui/Button";
 import { ScrollArea, ScrollBar } from "@/components/ui/ScrollArea";
 import { env } from "@/lib/env";
@@ -24,49 +24,45 @@ const GuildPage = async ({
   const roleGroups = paginatedRoleGroup.items;
 
   return (
-    <DashboardContainer>
-      <main className="py-16">
-        <div className="flex flex-col items-stretch md:flex-row md:justify-between">
-          <div className="w-full space-y-4">
-            <div className="flex w-full flex-col items-stretch justify-between gap-8 md:flex-row md:items-center">
-              <div className="flex max-w-prose items-center gap-4">
-                <img
-                  src={guild.imageUrl}
-                  className="size-20 rounded-full border"
-                  alt="avatar"
-                />
-                <h1 className="text-pretty font-bold font-display text-3xl tracking-tight sm:text-4xl lg:text-5xl">
-                  {guild.name}
-                </h1>
-              </div>
-              <Button colorScheme="success" size="lg">
-                Join Guild
-              </Button>
+    <main className="py-16">
+      <div className="flex flex-col items-stretch md:flex-row md:justify-between">
+        <div className="w-full space-y-4">
+          <div className="flex w-full flex-col items-stretch justify-between gap-8 md:flex-row md:items-center">
+            <div className="flex max-w-prose items-center gap-4">
+              <GuildImage
+                name={guild.name}
+                imageUrl={guild.imageUrl}
+                className="size-20 rounded-full border"
+              />
+              <h1 className="text-pretty font-bold font-display text-3xl tracking-tight sm:text-4xl lg:text-5xl">
+                {guild.name}
+              </h1>
             </div>
-            <p className="line-clamp-3 max-w-prose text-balance text-lg leading-relaxed">
-              {guild.description}
-            </p>
+            <Button colorScheme="success">Join Guild</Button>
           </div>
+          <p className="line-clamp-3 max-w-prose text-balance text-lg leading-relaxed">
+            {guild.description}
+          </p>
         </div>
+      </div>
 
-        <ScrollArea>
-          <div className="mt-32 mb-3 flex gap-3">
-            {roleGroups.map((rg) => (
-              <RoleGroupNavLink
-                key={rg.id}
-                tab={{
-                  path: `/${guildIdParam}/${rg.urlName}`,
-                  segment: rg.urlName,
-                  label: rg.name,
-                }}
-              />
-            ))}
-          </div>
-          <ScrollBar orientation="horizontal" />
-        </ScrollArea>
-        {children}
-      </main>
-    </DashboardContainer>
+      <ScrollArea>
+        <div className="mt-32 mb-3 flex gap-3">
+          {roleGroups.map((rg) => (
+            <RoleGroupNavLink
+              key={rg.id}
+              tab={{
+                path: `/${guildIdParam}/${rg.urlName}`,
+                segment: rg.urlName,
+                label: rg.name,
+              }}
+            />
+          ))}
+        </div>
+        <ScrollBar orientation="horizontal" />
+      </ScrollArea>
+      {children}
+    </main>
   );
 };
 
diff --git a/src/app/(dashboard)/explorer/components/GuildCard.tsx b/src/app/(dashboard)/explorer/components/GuildCard.tsx
index bc19365ba9..c62c7db5f1 100644
--- a/src/app/(dashboard)/explorer/components/GuildCard.tsx
+++ b/src/app/(dashboard)/explorer/components/GuildCard.tsx
@@ -1,9 +1,10 @@
+import { GuildImage } from "@/components/GuildImage";
 import { Badge } from "@/components/ui/Badge";
 import { Card } from "@/components/ui/Card";
 import { Skeleton } from "@/components/ui/Skeleton";
 import type { Guild } from "@/lib/schemas/guild";
-import { ImageSquare, Users } from "@phosphor-icons/react/dist/ssr";
-import { Avatar, AvatarFallback, AvatarImage } from "@radix-ui/react-avatar";
+import { Users } from "@phosphor-icons/react/dist/ssr";
+
 import Link from "next/link";
 import type { FunctionComponent } from "react";
 
@@ -14,20 +15,11 @@ export const GuildCard: FunctionComponent<{ guild: Guild }> = ({ guild }) => {
       className="relative rounded-2xl outline-none focus-visible:ring-4"
     >
       <Card className="relative grid grid-cols-[theme(space.12)_1fr] grid-rows-2 items-center gap-x-4 gap-y-0.5 overflow-hidden rounded-2xl px-6 py-7 shadow-md before:absolute before:inset-0 before:bg-black/5 before:opacity-0 before:transition-opacity before:duration-200 before:content-[''] hover:before:opacity-55 active:before:opacity-85 dark:before:bg-white/5">
-        <Avatar className="row-span-2 grid size-12 place-items-center overflow-hidden rounded-full bg-image text-white">
-          <AvatarImage
-            src={
-              !!guild.imageUrl && !guild.imageUrl.startsWith("/guildLogos")
-                ? guild.imageUrl
-                : undefined
-            }
-            className="size-full"
-            alt="guild avatar"
-          />
-          <AvatarFallback>
-            <ImageSquare weight="duotone" className="size-6" />
-          </AvatarFallback>
-        </Avatar>
+        <GuildImage
+          name={guild.name}
+          imageUrl={guild.imageUrl}
+          className="row-span-2"
+        />
 
         <h3 className="line-clamp-1 font-black font-display text-lg">
           {guild.name}
diff --git a/src/components/GuildImage.tsx b/src/components/GuildImage.tsx
new file mode 100644
index 0000000000..3ee8f5e1d3
--- /dev/null
+++ b/src/components/GuildImage.tsx
@@ -0,0 +1,30 @@
+import { cn } from "@/lib/cssUtils";
+import type { Guild } from "@/lib/schemas/guild";
+import { ImageSquare } from "@phosphor-icons/react/dist/ssr";
+import { Avatar, AvatarFallback, AvatarImage } from "@radix-ui/react-avatar";
+
+type Props = {
+  className?: string;
+  name: Guild["name"];
+  imageUrl: Guild["imageUrl"];
+};
+
+export const GuildImage = ({ name, imageUrl, className }: Props) => (
+  <Avatar
+    className={cn(
+      "grid size-12 place-items-center overflow-hidden rounded-full bg-image text-white",
+      className,
+    )}
+  >
+    <AvatarImage
+      src={
+        !!imageUrl && !imageUrl.startsWith("/guildLogos") ? imageUrl : undefined
+      }
+      className="size-full"
+      alt={`${name} logo`}
+    />
+    <AvatarFallback className="grid size-full place-items-center">
+      <ImageSquare weight="duotone" className="size-2/5" />
+    </AvatarFallback>
+  </Avatar>
+);

From 70da86d38c27a0ad12feba0d2ce3c2c598753ebc Mon Sep 17 00:00:00 2001
From: BrickheadJohnny <johnny.zgen@gmail.com>
Date: Wed, 27 Nov 2024 08:44:41 +0100
Subject: [PATCH 06/93] cleanup: remove playground and rename the components
 folder

---
 .../RoleGroupNavLink.tsx                      |  0
 src/app/(dashboard)/[guildId]/layout.tsx      |  2 +-
 src/app/playground/page.tsx                   | 19 -------------------
 3 files changed, 1 insertion(+), 20 deletions(-)
 rename src/app/(dashboard)/[guildId]/{_components => components}/RoleGroupNavLink.tsx (100%)
 delete mode 100644 src/app/playground/page.tsx

diff --git a/src/app/(dashboard)/[guildId]/_components/RoleGroupNavLink.tsx b/src/app/(dashboard)/[guildId]/components/RoleGroupNavLink.tsx
similarity index 100%
rename from src/app/(dashboard)/[guildId]/_components/RoleGroupNavLink.tsx
rename to src/app/(dashboard)/[guildId]/components/RoleGroupNavLink.tsx
diff --git a/src/app/(dashboard)/[guildId]/layout.tsx b/src/app/(dashboard)/[guildId]/layout.tsx
index d87df77ee5..39398852ea 100644
--- a/src/app/(dashboard)/[guildId]/layout.tsx
+++ b/src/app/(dashboard)/[guildId]/layout.tsx
@@ -6,7 +6,7 @@ import type { Guild } from "@/lib/schemas/guild";
 import type { RoleGroup } from "@/lib/schemas/roleGroup";
 import type { DynamicRoute, PaginatedResponse } from "@/lib/types";
 import type { PropsWithChildren } from "react";
-import { RoleGroupNavLink } from "./_components/RoleGroupNavLink";
+import { RoleGroupNavLink } from "./components/RoleGroupNavLink";
 
 const GuildPage = async ({
   params,
diff --git a/src/app/playground/page.tsx b/src/app/playground/page.tsx
deleted file mode 100644
index 9bf4132b81..0000000000
--- a/src/app/playground/page.tsx
+++ /dev/null
@@ -1,19 +0,0 @@
-const Playground = () => {
-  return (
-    <main className="text-8xl">
-      <h1 className="font-display">
-        Hello, Guild!, page for testing frameworks, configs
-      </h1>
-      <h2 className="font-bold font-display">Hello, Guild!</h2>
-      <p>Test, one, two, three...</p>
-      <p className="border font-sans">
-        Test, <strong>one</strong>, <em>two</em>, three...
-      </p>
-      <p className="font-bold text-rose-500 dark:text-violet-500">
-        In dark mode I appear violet, in light we go rose
-      </p>
-    </main>
-  );
-};
-
-export default Playground;

From 87c34e21ff235b253b125b26d13cc0b715e99254 Mon Sep 17 00:00:00 2001
From: BrickheadJohnny <johnny.zgen@gmail.com>
Date: Wed, 27 Nov 2024 09:25:33 +0100
Subject: [PATCH 07/93] feat: role group navigation menu

---
 .../[guildId]/components/RoleGroupNavLink.tsx | 55 +++++++++++++------
 src/app/(dashboard)/[guildId]/layout.tsx      | 38 +++++++++----
 2 files changed, 65 insertions(+), 28 deletions(-)

diff --git a/src/app/(dashboard)/[guildId]/components/RoleGroupNavLink.tsx b/src/app/(dashboard)/[guildId]/components/RoleGroupNavLink.tsx
index a681f4f8da..851ee253a7 100644
--- a/src/app/(dashboard)/[guildId]/components/RoleGroupNavLink.tsx
+++ b/src/app/(dashboard)/[guildId]/components/RoleGroupNavLink.tsx
@@ -1,25 +1,48 @@
 "use client";
 
-import { buttonVariants } from "@/components/ui/Button";
+import {
+  Button,
+  type ButtonProps,
+  buttonVariants,
+} from "@/components/ui/Button";
+import { Card } from "@/components/ui/Card";
 import Link from "next/link";
-import { useSelectedLayoutSegment } from "next/navigation";
+import { usePathname } from "next/navigation";
+import type { PropsWithChildren } from "react";
 
 export const RoleGroupNavLink = ({
-  tab,
-}: { tab: { label: string; path: string; segment: string } }) => {
-  const layoutSegment = useSelectedLayoutSegment();
-  const isActive = tab.segment === layoutSegment;
+  href,
+  children,
+}: PropsWithChildren<{ href: string }>) => {
+  const pathname = usePathname();
+  const isActive = pathname === href;
 
   return (
-    <Link
-      key={tab.label + tab.path}
-      className={buttonVariants({
-        variant: "subtle",
-        colorScheme: isActive ? "primary" : "secondary",
-      })}
-      href={tab.path}
-    >
-      {tab.label}
-    </Link>
+    <Card className="bg-card-secondary">
+      <Link
+        href={href}
+        className={buttonVariants({
+          variant: "ghost",
+          className: [
+            "focus-visible:bg-[var(--button-bg-hover)]",
+            { "bg-[var(--button-bg-active)]": isActive },
+          ],
+        })}
+      >
+        {children}
+      </Link>
+    </Card>
   );
 };
+
+export const RoleGroupNavButton = ({
+  children,
+  leftIcon,
+  className,
+}: PropsWithChildren<Pick<ButtonProps, "leftIcon" | "className">>) => (
+  <Card className="bg-card-secondary">
+    <Button variant="ghost" leftIcon={leftIcon} className={className}>
+      {children}
+    </Button>
+  </Card>
+);
diff --git a/src/app/(dashboard)/[guildId]/layout.tsx b/src/app/(dashboard)/[guildId]/layout.tsx
index 39398852ea..758545452c 100644
--- a/src/app/(dashboard)/[guildId]/layout.tsx
+++ b/src/app/(dashboard)/[guildId]/layout.tsx
@@ -5,8 +5,12 @@ import { env } from "@/lib/env";
 import type { Guild } from "@/lib/schemas/guild";
 import type { RoleGroup } from "@/lib/schemas/roleGroup";
 import type { DynamicRoute, PaginatedResponse } from "@/lib/types";
+import { Plus } from "@phosphor-icons/react/dist/ssr";
 import type { PropsWithChildren } from "react";
-import { RoleGroupNavLink } from "./components/RoleGroupNavLink";
+import {
+  RoleGroupNavButton,
+  RoleGroupNavLink,
+} from "./components/RoleGroupNavLink";
 
 const GuildPage = async ({
   params,
@@ -25,7 +29,7 @@ const GuildPage = async ({
 
   return (
     <main className="py-16">
-      <div className="flex flex-col items-stretch md:flex-row md:justify-between">
+      <div className="flex flex-col items-stretch pb-4 md:flex-row md:justify-between">
         <div className="w-full space-y-4">
           <div className="flex w-full flex-col items-stretch justify-between gap-8 md:flex-row md:items-center">
             <div className="flex max-w-prose items-center gap-4">
@@ -38,7 +42,9 @@ const GuildPage = async ({
                 {guild.name}
               </h1>
             </div>
-            <Button colorScheme="success">Join Guild</Button>
+            <Button colorScheme="success" className="rounded-2xl">
+              Join Guild
+            </Button>
           </div>
           <p className="line-clamp-3 max-w-prose text-balance text-lg leading-relaxed">
             {guild.description}
@@ -46,20 +52,28 @@ const GuildPage = async ({
         </div>
       </div>
 
-      <ScrollArea>
-        <div className="mt-32 mb-3 flex gap-3">
+      <ScrollArea
+        className="-ml-8 w-[calc(100%+theme(space.8))]"
+        style={{
+          maskImage:
+            "linear-gradient(to right, transparent 0%, black 32px, black calc(100% - 32px), transparent 100%)",
+        }}
+      >
+        <div className="my-4 flex gap-3 px-8">
+          <RoleGroupNavLink href={`/${guildIdParam}`}>Home</RoleGroupNavLink>
           {roleGroups.map((rg) => (
             <RoleGroupNavLink
               key={rg.id}
-              tab={{
-                path: `/${guildIdParam}/${rg.urlName}`,
-                segment: rg.urlName,
-                label: rg.name,
-              }}
-            />
+              href={`/${guildIdParam}/${rg.urlName}`}
+            >
+              {rg.name}
+            </RoleGroupNavLink>
           ))}
+          <RoleGroupNavButton leftIcon={<Plus weight="bold" />}>
+            Create page
+          </RoleGroupNavButton>
         </div>
-        <ScrollBar orientation="horizontal" />
+        <ScrollBar orientation="horizontal" className="hidden" />
       </ScrollArea>
       {children}
     </main>

From 8ef76fabca43a2bda5187b4fdaee7ec80bbef4b8 Mon Sep 17 00:00:00 2001
From: BrickheadJohnny <johnny.zgen@gmail.com>
Date: Wed, 27 Nov 2024 11:13:55 +0100
Subject: [PATCH 08/93] feat: simple create page form

---
 .../[guildId]/components/CreateRoleGroup.tsx  | 166 ++++++++++++++++++
 .../[guildId]/components/RoleGroupNavLink.tsx |  20 +--
 src/app/(dashboard)/[guildId]/layout.tsx      |  11 +-
 src/components/ImageUploader.tsx              |   4 +-
 src/components/ui/Drawer.tsx                  |   2 +-
 src/components/ui/Form.tsx                    |   2 +
 src/components/ui/ResponsiveDialog.tsx        |  10 +-
 src/lib/schemas/roleGroup.ts                  |   3 +-
 8 files changed, 186 insertions(+), 32 deletions(-)
 create mode 100644 src/app/(dashboard)/[guildId]/components/CreateRoleGroup.tsx

diff --git a/src/app/(dashboard)/[guildId]/components/CreateRoleGroup.tsx b/src/app/(dashboard)/[guildId]/components/CreateRoleGroup.tsx
new file mode 100644
index 0000000000..7330ea9104
--- /dev/null
+++ b/src/app/(dashboard)/[guildId]/components/CreateRoleGroup.tsx
@@ -0,0 +1,166 @@
+"use client";
+
+import { ImageUploader } from "@/components/ImageUploader";
+import { Button } from "@/components/ui/Button";
+import { Card } from "@/components/ui/Card";
+import {
+  FormControl,
+  FormErrorMessage,
+  FormField,
+  FormItem,
+  FormLabel,
+} from "@/components/ui/Form";
+import { Input } from "@/components/ui/Input";
+import { Label } from "@/components/ui/Label";
+import {
+  ResponsiveDialog,
+  ResponsiveDialogBody,
+  ResponsiveDialogContent,
+  ResponsiveDialogFooter,
+  ResponsiveDialogHeader,
+  ResponsiveDialogTitle,
+  ResponsiveDialogTrigger,
+} from "@/components/ui/ResponsiveDialog";
+import { Textarea } from "@/components/ui/Textarea";
+import { GUILD_AUTH_COOKIE_NAME } from "@/config/constants";
+import { env } from "@/lib/env";
+import { fetcher } from "@/lib/fetcher";
+import { getCookie } from "@/lib/getCookie";
+import {
+  type CreateRoleGroupForm,
+  CreateRoleGroupSchema,
+  type RoleGroup,
+} from "@/lib/schemas/roleGroup";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { CheckCircle, Plus, XCircle } from "@phosphor-icons/react/dist/ssr";
+import { useMutation } from "@tanstack/react-query";
+import { FormProvider, useForm } from "react-hook-form";
+import { toast } from "sonner";
+
+type Props = {
+  guildId: string;
+};
+
+export const CreateRoleGroup = ({ guildId }: Props) => (
+  <ResponsiveDialog>
+    <Card className="bg-card-secondary">
+      <ResponsiveDialogTrigger asChild>
+        <Button variant="ghost" leftIcon={<Plus weight="bold" />}>
+          Create page
+        </Button>
+      </ResponsiveDialogTrigger>
+    </Card>
+
+    <ResponsiveDialogContent size="lg">
+      <ResponsiveDialogHeader>
+        <ResponsiveDialogTitle>Create page</ResponsiveDialogTitle>
+      </ResponsiveDialogHeader>
+
+      <CreateRoleGroupDialogForm guildId={guildId} />
+    </ResponsiveDialogContent>
+  </ResponsiveDialog>
+);
+
+const CreateRoleGroupDialogForm = ({ guildId }: Props) => {
+  const form = useForm<CreateRoleGroupForm>({
+    mode: "onTouched",
+    resolver: zodResolver(CreateRoleGroupSchema),
+    defaultValues: {
+      guildId,
+      imageUrl: "",
+      name: "",
+      description: "",
+    },
+  });
+
+  const { mutate: onSubmit, isPending } = useMutation({
+    mutationFn: async (data: CreateRoleGroupForm) => {
+      const token = getCookie(GUILD_AUTH_COOKIE_NAME);
+
+      if (!token) throw new Error("Unauthorized"); // TODO: custom errors?
+
+      return fetcher<RoleGroup>(`${env.NEXT_PUBLIC_API}/role-group`, {
+        method: "POST",
+        headers: {
+          "X-Auth-Token": token,
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify(data),
+      });
+    },
+    onError: (error) => {
+      // TODO: parse the error and display it in a user-friendly way
+      toast("An error occurred", {
+        icon: <XCircle weight="fill" className="text-icon-error" />,
+      });
+      console.error(error);
+    },
+    onSuccess: (res) => {
+      console.log("RESPONSE", res);
+      toast("Page successfully created", {
+        description: "You're being redirected to it",
+        icon: <CheckCircle weight="fill" className="text-icon-success" />,
+      });
+      // router.push(`/${res.urlName}`);
+    },
+  });
+
+  console.log(form);
+
+  return (
+    <FormProvider {...form}>
+      <ResponsiveDialogBody className="pb-px">
+        <div className="grid gap-4">
+          <div className="grid grid-cols-[theme(space.12)_1fr] gap-2">
+            <Label className="col-span-2">Image and name</Label>
+            <div className="size-12 rounded-full bg-input-background">
+              <ImageUploader
+                onSuccess={(imageUrl) => form.setValue("imageUrl", imageUrl)}
+              />
+            </div>
+            <FormField
+              control={form.control}
+              name="name"
+              render={({ field }) => (
+                <FormItem>
+                  <FormControl>
+                    <Input {...field} size="lg" />
+                  </FormControl>
+                  <FormErrorMessage />
+                </FormItem>
+              )}
+            />
+          </div>
+
+          <FormField
+            control={form.control}
+            name="description"
+            render={({ field: { value, ...field } }) => (
+              <FormItem>
+                <FormLabel>Description</FormLabel>
+                <FormControl>
+                  <Textarea {...field} value={value ?? ""} />
+                </FormControl>
+                <FormErrorMessage />
+              </FormItem>
+            )}
+          />
+        </div>
+      </ResponsiveDialogBody>
+
+      <ResponsiveDialogFooter>
+        <Button
+          colorScheme="success"
+          onClick={form.handleSubmit(
+            (data) => onSubmit(data),
+            (error) => console.log(error),
+          )}
+          isLoading={isPending}
+          loadingText="Creating page"
+        >
+          Create page
+        </Button>
+      </ResponsiveDialogFooter>
+    </FormProvider>
+  );
+};
diff --git a/src/app/(dashboard)/[guildId]/components/RoleGroupNavLink.tsx b/src/app/(dashboard)/[guildId]/components/RoleGroupNavLink.tsx
index 851ee253a7..dedfdb1cb0 100644
--- a/src/app/(dashboard)/[guildId]/components/RoleGroupNavLink.tsx
+++ b/src/app/(dashboard)/[guildId]/components/RoleGroupNavLink.tsx
@@ -1,10 +1,6 @@
 "use client";
 
-import {
-  Button,
-  type ButtonProps,
-  buttonVariants,
-} from "@/components/ui/Button";
+import { buttonVariants } from "@/components/ui/Button";
 import { Card } from "@/components/ui/Card";
 import Link from "next/link";
 import { usePathname } from "next/navigation";
@@ -25,7 +21,7 @@ export const RoleGroupNavLink = ({
           variant: "ghost",
           className: [
             "focus-visible:bg-[var(--button-bg-hover)]",
-            { "bg-[var(--button-bg-active)]": isActive },
+            { "bg-[var(--button-bg-hover)]": isActive },
           ],
         })}
       >
@@ -34,15 +30,3 @@ export const RoleGroupNavLink = ({
     </Card>
   );
 };
-
-export const RoleGroupNavButton = ({
-  children,
-  leftIcon,
-  className,
-}: PropsWithChildren<Pick<ButtonProps, "leftIcon" | "className">>) => (
-  <Card className="bg-card-secondary">
-    <Button variant="ghost" leftIcon={leftIcon} className={className}>
-      {children}
-    </Button>
-  </Card>
-);
diff --git a/src/app/(dashboard)/[guildId]/layout.tsx b/src/app/(dashboard)/[guildId]/layout.tsx
index 758545452c..e00c08f6e0 100644
--- a/src/app/(dashboard)/[guildId]/layout.tsx
+++ b/src/app/(dashboard)/[guildId]/layout.tsx
@@ -5,12 +5,9 @@ import { env } from "@/lib/env";
 import type { Guild } from "@/lib/schemas/guild";
 import type { RoleGroup } from "@/lib/schemas/roleGroup";
 import type { DynamicRoute, PaginatedResponse } from "@/lib/types";
-import { Plus } from "@phosphor-icons/react/dist/ssr";
 import type { PropsWithChildren } from "react";
-import {
-  RoleGroupNavButton,
-  RoleGroupNavLink,
-} from "./components/RoleGroupNavLink";
+import { CreateRoleGroup } from "./components/CreateRoleGroup";
+import { RoleGroupNavLink } from "./components/RoleGroupNavLink";
 
 const GuildPage = async ({
   params,
@@ -69,9 +66,7 @@ const GuildPage = async ({
               {rg.name}
             </RoleGroupNavLink>
           ))}
-          <RoleGroupNavButton leftIcon={<Plus weight="bold" />}>
-            Create page
-          </RoleGroupNavButton>
+          <CreateRoleGroup guildId={guild.id} />
         </div>
         <ScrollBar orientation="horizontal" className="hidden" />
       </ScrollArea>
diff --git a/src/components/ImageUploader.tsx b/src/components/ImageUploader.tsx
index 115cd7eb11..37120b4df0 100644
--- a/src/components/ImageUploader.tsx
+++ b/src/components/ImageUploader.tsx
@@ -79,12 +79,12 @@ export const ImageUploader = ({
   return (
     <Button
       className={cn(
-        "size-12 rounded-full border border-input-border",
+        "size-12 rounded-full border border-input-border p-0",
         className,
       )}
       variant="ghost"
       onClick={() => fileInputRef.current?.click()}
-      isLoading={isPending}
+      disabled={isPending}
       style={
         uploadedImage
           ? {
diff --git a/src/components/ui/Drawer.tsx b/src/components/ui/Drawer.tsx
index f919a9c440..1302926c3d 100644
--- a/src/components/ui/Drawer.tsx
+++ b/src/components/ui/Drawer.tsx
@@ -87,7 +87,7 @@ const DrawerFooter = ({
   ...props
 }: HTMLAttributes<HTMLDivElement>) => (
   <div
-    className={cn("mt-auto flex flex-col gap-2 p-4", className)}
+    className={cn("mt-auto flex flex-col gap-2 px-6 pb-6", className)}
     {...props}
   />
 );
diff --git a/src/components/ui/Form.tsx b/src/components/ui/Form.tsx
index 0168c3c754..5d457da3f2 100644
--- a/src/components/ui/Form.tsx
+++ b/src/components/ui/Form.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 import type * as LabelPrimitive from "@radix-ui/react-label";
 import { Slot } from "@radix-ui/react-slot";
 import { useDebouncedState } from "foxact/use-debounced-state";
diff --git a/src/components/ui/ResponsiveDialog.tsx b/src/components/ui/ResponsiveDialog.tsx
index 2f0b81e4bd..c970d3b181 100644
--- a/src/components/ui/ResponsiveDialog.tsx
+++ b/src/components/ui/ResponsiveDialog.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 import { useMediaQuery } from "foxact/use-media-query";
 import type { ComponentProps } from "react";
 import {
@@ -73,15 +75,19 @@ export const ResponsiveDialogOverlay = (
 };
 ResponsiveDialogOverlay.displayName = "ResponsiveDialogOverlay";
 
+/**
+ * We don't use the DialogDescription & DrawerDescription components, that's why we apply the `aria-describedby={undefined}` attribute here.
+ */
 export const ResponsiveDialogContent = (
   props: ComponentProps<typeof DialogContent> &
     ComponentProps<typeof DrawerContent>,
 ) => {
   const isMobile = useIsMobile();
 
-  if (isMobile) return <DrawerContent {...props} />;
+  if (isMobile)
+    return <DrawerContent aria-describedby={undefined} {...props} />;
 
-  return <DialogContent {...props} />;
+  return <DialogContent aria-describedby={undefined} {...props} />;
 };
 ResponsiveDialogContent.displayName = "ResponsiveDialogContent";
 
diff --git a/src/lib/schemas/roleGroup.ts b/src/lib/schemas/roleGroup.ts
index c91c6f1670..ca96f20dd4 100644
--- a/src/lib/schemas/roleGroup.ts
+++ b/src/lib/schemas/roleGroup.ts
@@ -1,7 +1,8 @@
 import { z } from "zod";
 import { DateLike, ImageUrlSchema, NameSchema } from "./common";
 
-const CreateRoleGroupSchema = z.object({
+export const CreateRoleGroupSchema = z.object({
+  guildId: z.string().uuid(),
   name: NameSchema.min(1, "You must specify a name for the role group"),
   urlName: z.string().max(255).optional(),
   description: z.string().nullish(),

From c1c78f561f5903e4cdac12f911840735b928ea6a Mon Sep 17 00:00:00 2001
From: BrickheadJohnny <johnny.zgen@gmail.com>
Date: Wed, 27 Nov 2024 11:54:51 +0100
Subject: [PATCH 09/93] refactor: extract the `GuildTabs` component and
 `getGuild` function

---
 .../[guildId]/components/GuildTabs.tsx        | 65 +++++++++++++++++++
 src/app/(dashboard)/[guildId]/fetchers.ts     | 10 +++
 src/app/(dashboard)/[guildId]/layout.tsx      | 49 +++-----------
 src/app/(dashboard)/[guildId]/page.tsx        | 35 +++++-----
 4 files changed, 100 insertions(+), 59 deletions(-)
 create mode 100644 src/app/(dashboard)/[guildId]/components/GuildTabs.tsx
 create mode 100644 src/app/(dashboard)/[guildId]/fetchers.ts

diff --git a/src/app/(dashboard)/[guildId]/components/GuildTabs.tsx b/src/app/(dashboard)/[guildId]/components/GuildTabs.tsx
new file mode 100644
index 0000000000..864c19a8fd
--- /dev/null
+++ b/src/app/(dashboard)/[guildId]/components/GuildTabs.tsx
@@ -0,0 +1,65 @@
+import { Card } from "@/components/ui/Card";
+import { ScrollArea, ScrollBar } from "@/components/ui/ScrollArea";
+import { Skeleton } from "@/components/ui/Skeleton";
+import { cn } from "@/lib/cssUtils";
+import { env } from "@/lib/env";
+import type { Guild } from "@/lib/schemas/guild";
+import type { RoleGroup } from "@/lib/schemas/roleGroup";
+import type { PaginatedResponse } from "@/lib/types";
+import { CreateRoleGroup } from "./CreateRoleGroup";
+import { RoleGroupNavLink } from "./RoleGroupNavLink";
+
+type Props = {
+  guild: Guild;
+};
+
+const getRoleGroups = async (guildId: string) => {
+  const res = await fetch(
+    `${env.NEXT_PUBLIC_API}/role-group/search?customQuery=@guildId:{${guildId}}`,
+  );
+  const data: PaginatedResponse<RoleGroup> = await res.json();
+  return data.items;
+};
+
+export const GuildTabs = async ({ guild }: Props) => {
+  const roleGroups = await getRoleGroups(guild.id);
+
+  return (
+    <ScrollArea
+      className="-ml-8 w-[calc(100%+theme(space.8))]"
+      style={{
+        maskImage:
+          "linear-gradient(to right, transparent 0%, black 32px, black calc(100% - 32px), transparent 100%)",
+      }}
+    >
+      <div className="my-4 flex gap-3 px-8">
+        <RoleGroupNavLink href={`/${guild.urlName}`}>Home</RoleGroupNavLink>
+        {roleGroups.map((rg) => (
+          <RoleGroupNavLink
+            key={rg.id}
+            href={`/${guild.urlName}/${rg.urlName}`}
+          >
+            {rg.name}
+          </RoleGroupNavLink>
+        ))}
+        <CreateRoleGroup guildId={guild.id} />
+      </div>
+      <ScrollBar orientation="horizontal" className="hidden" />
+    </ScrollArea>
+  );
+};
+
+const SKELETON_SIZES = ["w-20", "w-36", "w-28"];
+export const GuildTabsSkeleton = () => (
+  <div className="my-4 flex gap-3">
+    {[...Array(3)].map((_, i) => (
+      <Card
+        // biome-ignore lint: it's safe to use index as key in this case
+        key={i}
+        className={cn("flex h-11 items-center px-4", SKELETON_SIZES[i])}
+      >
+        <Skeleton className="h-4 w-full" />
+      </Card>
+    ))}
+  </div>
+);
diff --git a/src/app/(dashboard)/[guildId]/fetchers.ts b/src/app/(dashboard)/[guildId]/fetchers.ts
new file mode 100644
index 0000000000..bafe2f6d4e
--- /dev/null
+++ b/src/app/(dashboard)/[guildId]/fetchers.ts
@@ -0,0 +1,10 @@
+import { env } from "@/lib/env";
+import type { Guild } from "@/lib/schemas/guild";
+import { unstable_cache } from "next/cache";
+
+// TODO: `unstable_cache` is deprecated, we should use the `"use cache"` directive instead
+export const getGuild = unstable_cache(async (urlName: string) => {
+  const res = await fetch(`${env.NEXT_PUBLIC_API}/guild/urlName/${urlName}`);
+  const data: Guild = await res.json();
+  return data;
+});
diff --git a/src/app/(dashboard)/[guildId]/layout.tsx b/src/app/(dashboard)/[guildId]/layout.tsx
index e00c08f6e0..6ee4f8d856 100644
--- a/src/app/(dashboard)/[guildId]/layout.tsx
+++ b/src/app/(dashboard)/[guildId]/layout.tsx
@@ -1,28 +1,16 @@
 import { GuildImage } from "@/components/GuildImage";
 import { Button } from "@/components/ui/Button";
-import { ScrollArea, ScrollBar } from "@/components/ui/ScrollArea";
-import { env } from "@/lib/env";
-import type { Guild } from "@/lib/schemas/guild";
-import type { RoleGroup } from "@/lib/schemas/roleGroup";
-import type { DynamicRoute, PaginatedResponse } from "@/lib/types";
-import type { PropsWithChildren } from "react";
-import { CreateRoleGroup } from "./components/CreateRoleGroup";
-import { RoleGroupNavLink } from "./components/RoleGroupNavLink";
+import type { DynamicRoute } from "@/lib/types";
+import { type PropsWithChildren, Suspense } from "react";
+import { GuildTabs, GuildTabsSkeleton } from "./components/GuildTabs";
+import { getGuild } from "./fetchers";
 
 const GuildPage = async ({
   params,
   children,
 }: PropsWithChildren<DynamicRoute<{ guildId: string }>>) => {
-  const { guildId: guildIdParam } = await params;
-  const guild = (await (
-    await fetch(`${env.NEXT_PUBLIC_API}/guild/urlName/${guildIdParam}`)
-  ).json()) as Guild;
-  const paginatedRoleGroup = (await (
-    await fetch(
-      `${env.NEXT_PUBLIC_API}/role-group/search?customQuery=@guildId:{${guild.id}}`,
-    )
-  ).json()) as PaginatedResponse<RoleGroup>;
-  const roleGroups = paginatedRoleGroup.items;
+  const { guildId: urlName } = await params;
+  const guild = await getGuild(urlName);
 
   return (
     <main className="py-16">
@@ -49,27 +37,10 @@ const GuildPage = async ({
         </div>
       </div>
 
-      <ScrollArea
-        className="-ml-8 w-[calc(100%+theme(space.8))]"
-        style={{
-          maskImage:
-            "linear-gradient(to right, transparent 0%, black 32px, black calc(100% - 32px), transparent 100%)",
-        }}
-      >
-        <div className="my-4 flex gap-3 px-8">
-          <RoleGroupNavLink href={`/${guildIdParam}`}>Home</RoleGroupNavLink>
-          {roleGroups.map((rg) => (
-            <RoleGroupNavLink
-              key={rg.id}
-              href={`/${guildIdParam}/${rg.urlName}`}
-            >
-              {rg.name}
-            </RoleGroupNavLink>
-          ))}
-          <CreateRoleGroup guildId={guild.id} />
-        </div>
-        <ScrollBar orientation="horizontal" className="hidden" />
-      </ScrollArea>
+      <Suspense fallback={<GuildTabsSkeleton />}>
+        <GuildTabs guild={guild} />
+      </Suspense>
+
       {children}
     </main>
   );
diff --git a/src/app/(dashboard)/[guildId]/page.tsx b/src/app/(dashboard)/[guildId]/page.tsx
index 4a6acd49d8..097d6417e5 100644
--- a/src/app/(dashboard)/[guildId]/page.tsx
+++ b/src/app/(dashboard)/[guildId]/page.tsx
@@ -1,27 +1,22 @@
-import { env } from "@/lib/env";
-import type { Guild } from "@/lib/schemas/guild";
-import type { RoleGroup } from "@/lib/schemas/roleGroup";
-import type { DynamicRoute, PaginatedResponse } from "@/lib/types";
-import { redirect } from "next/navigation";
+import type { DynamicRoute } from "@/lib/types";
+import { getGuild } from "./fetchers";
 
 const DefaultGuildPage = async ({
   params,
 }: DynamicRoute<{ guildId: string }>) => {
-  const { guildId: guildIdParam } = await params;
-  const guild = (await (
-    await fetch(`${env.NEXT_PUBLIC_API}/guild/urlName/${guildIdParam}`)
-  ).json()) as Guild;
-  const paginatedRoleGroup = (await (
-    await fetch(
-      `${env.NEXT_PUBLIC_API}/role-group/search?customQuery=@guildId:{${guild.id}}`,
-    )
-  ).json()) as PaginatedResponse<RoleGroup>;
-  const roleGroups = paginatedRoleGroup.items;
-  const roleGroup = roleGroups.at(0);
-  if (roleGroup) {
-    redirect(`/${guildIdParam}/${roleGroup.urlName}`);
-  }
-  return "default guild page";
+  const { guildId: urlName } = await params;
+  const guild = await getGuild(urlName);
+  // const paginatedRoleGroup = (await (
+  //   await fetch(
+  //     `${env.NEXT_PUBLIC_API}/role-group/search?customQuery=@guildId:{${guild.id}}`,
+  //   )
+  // ).json()) as PaginatedResponse<RoleGroup>;
+  // const roleGroups = paginatedRoleGroup.items;
+  // const roleGroup = roleGroups.at(0);
+  // if (roleGroup) {
+  //   redirect(`/${guildIdParam}/${roleGroup.urlName}`);
+  // }
+  return `Default guild page - ${guild.name}`;
 };
 
 export default DefaultGuildPage;

From 29a0ed42757c8ec7199ecb267d877fce20d1f926 Mon Sep 17 00:00:00 2001
From: BrickheadJohnny <johnny.zgen@gmail.com>
Date: Wed, 27 Nov 2024 12:19:50 +0100
Subject: [PATCH 10/93] fix(CreateGuildButton): increase toast duration

---
 .../(dashboard)/create-guild/components/CreateGuildButton.tsx    | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/app/(dashboard)/create-guild/components/CreateGuildButton.tsx b/src/app/(dashboard)/create-guild/components/CreateGuildButton.tsx
index 741ca7725f..e6cbada344 100644
--- a/src/app/(dashboard)/create-guild/components/CreateGuildButton.tsx
+++ b/src/app/(dashboard)/create-guild/components/CreateGuildButton.tsx
@@ -59,6 +59,7 @@ const CreateGuildButton = () => {
       toast("Guild successfully created", {
         description: "You're being redirected to its page",
         icon: <CheckCircle weight="fill" className="text-icon-success" />,
+        duration: 5_000,
       });
       router.push(`/${res.urlName}`);
     },

From e1db931712167bf4e9bedbb44d57f30a368c35b9 Mon Sep 17 00:00:00 2001
From: BrickheadJohnny <johnny.zgen@gmail.com>
Date: Wed, 27 Nov 2024 12:42:56 +0100
Subject: [PATCH 11/93] feat: revalidate role groups after creation

---
 .../[guildId]/[roleGroupId]/page.tsx          |  3 -
 src/app/(dashboard)/[guildId]/actions.ts      |  6 ++
 .../[guildId]/components/CreateRoleGroup.tsx  | 62 ++++++++++++-------
 .../[guildId]/components/GuildTabs.tsx        | 12 +---
 src/app/(dashboard)/[guildId]/fetchers.ts     | 27 ++++++--
 5 files changed, 69 insertions(+), 41 deletions(-)
 create mode 100644 src/app/(dashboard)/[guildId]/actions.ts

diff --git a/src/app/(dashboard)/[guildId]/[roleGroupId]/page.tsx b/src/app/(dashboard)/[guildId]/[roleGroupId]/page.tsx
index 26041a2eed..dfff8a2cbc 100644
--- a/src/app/(dashboard)/[guildId]/[roleGroupId]/page.tsx
+++ b/src/app/(dashboard)/[guildId]/[roleGroupId]/page.tsx
@@ -23,9 +23,6 @@ const RoleGroupPage = async ({
   ).json()) as PaginatedResponse<RoleGroup>;
   const roleGroups = paginatedRoleGroup.items;
   const roleGroup = roleGroups.find((rg) => rg.urlName === roleGroupIdParam)!;
-  console.log(
-    `${env.NEXT_PUBLIC_API}/role/search?customQuery=@guildId:{${guild.id}}&pageSize=${Number.MAX_SAFE_INTEGER}`,
-  );
   const paginatedRole = (await (
     await fetch(
       `${env.NEXT_PUBLIC_API}/role/search?customQuery=@guildId:{${guild.id}}&pageSize=${Number.MAX_SAFE_INTEGER}`,
diff --git a/src/app/(dashboard)/[guildId]/actions.ts b/src/app/(dashboard)/[guildId]/actions.ts
new file mode 100644
index 0000000000..0454391739
--- /dev/null
+++ b/src/app/(dashboard)/[guildId]/actions.ts
@@ -0,0 +1,6 @@
+"use server";
+import { revalidateTag } from "next/cache";
+
+export const revalidateRoleGroups = async (guildId: string) => {
+  revalidateTag(`role-groups-${guildId}`);
+};
diff --git a/src/app/(dashboard)/[guildId]/components/CreateRoleGroup.tsx b/src/app/(dashboard)/[guildId]/components/CreateRoleGroup.tsx
index 7330ea9104..7079bbc4df 100644
--- a/src/app/(dashboard)/[guildId]/components/CreateRoleGroup.tsx
+++ b/src/app/(dashboard)/[guildId]/components/CreateRoleGroup.tsx
@@ -34,34 +34,50 @@ import {
 import { zodResolver } from "@hookform/resolvers/zod";
 import { CheckCircle, Plus, XCircle } from "@phosphor-icons/react/dist/ssr";
 import { useMutation } from "@tanstack/react-query";
+import { useParams, useRouter } from "next/navigation";
+import { useState } from "react";
 import { FormProvider, useForm } from "react-hook-form";
 import { toast } from "sonner";
+import { revalidateRoleGroups } from "../actions";
 
 type Props = {
   guildId: string;
 };
 
-export const CreateRoleGroup = ({ guildId }: Props) => (
-  <ResponsiveDialog>
-    <Card className="bg-card-secondary">
-      <ResponsiveDialogTrigger asChild>
-        <Button variant="ghost" leftIcon={<Plus weight="bold" />}>
-          Create page
-        </Button>
-      </ResponsiveDialogTrigger>
-    </Card>
+export const CreateRoleGroup = ({ guildId }: Props) => {
+  const [open, onOpenChange] = useState(false);
+
+  return (
+    <ResponsiveDialog open={open} onOpenChange={onOpenChange}>
+      <Card className="bg-card-secondary">
+        <ResponsiveDialogTrigger asChild>
+          <Button variant="ghost" leftIcon={<Plus weight="bold" />}>
+            Create page
+          </Button>
+        </ResponsiveDialogTrigger>
+      </Card>
 
-    <ResponsiveDialogContent size="lg">
-      <ResponsiveDialogHeader>
-        <ResponsiveDialogTitle>Create page</ResponsiveDialogTitle>
-      </ResponsiveDialogHeader>
+      <ResponsiveDialogContent size="lg">
+        <ResponsiveDialogHeader>
+          <ResponsiveDialogTitle>Create page</ResponsiveDialogTitle>
+        </ResponsiveDialogHeader>
 
-      <CreateRoleGroupDialogForm guildId={guildId} />
-    </ResponsiveDialogContent>
-  </ResponsiveDialog>
-);
+        <CreateRoleGroupDialogForm
+          guildId={guildId}
+          onSuccess={() => onOpenChange(false)}
+        />
+      </ResponsiveDialogContent>
+    </ResponsiveDialog>
+  );
+};
 
-const CreateRoleGroupDialogForm = ({ guildId }: Props) => {
+const CreateRoleGroupDialogForm = ({
+  guildId,
+  onSuccess,
+}: {
+  guildId: Props["guildId"];
+  onSuccess: () => void;
+}) => {
   const form = useForm<CreateRoleGroupForm>({
     mode: "onTouched",
     resolver: zodResolver(CreateRoleGroupSchema),
@@ -73,6 +89,9 @@ const CreateRoleGroupDialogForm = ({ guildId }: Props) => {
     },
   });
 
+  const router = useRouter();
+  const { guildId: guildIdRouteParam } = useParams();
+
   const { mutate: onSubmit, isPending } = useMutation({
     mutationFn: async (data: CreateRoleGroupForm) => {
       const token = getCookie(GUILD_AUTH_COOKIE_NAME);
@@ -96,17 +115,16 @@ const CreateRoleGroupDialogForm = ({ guildId }: Props) => {
       console.error(error);
     },
     onSuccess: (res) => {
-      console.log("RESPONSE", res);
+      revalidateRoleGroups(res.guildId);
+      onSuccess();
       toast("Page successfully created", {
         description: "You're being redirected to it",
         icon: <CheckCircle weight="fill" className="text-icon-success" />,
       });
-      // router.push(`/${res.urlName}`);
+      router.push(`/${guildIdRouteParam}/${res.urlName}`);
     },
   });
 
-  console.log(form);
-
   return (
     <FormProvider {...form}>
       <ResponsiveDialogBody className="pb-px">
diff --git a/src/app/(dashboard)/[guildId]/components/GuildTabs.tsx b/src/app/(dashboard)/[guildId]/components/GuildTabs.tsx
index 864c19a8fd..d17a3419e6 100644
--- a/src/app/(dashboard)/[guildId]/components/GuildTabs.tsx
+++ b/src/app/(dashboard)/[guildId]/components/GuildTabs.tsx
@@ -2,10 +2,8 @@ import { Card } from "@/components/ui/Card";
 import { ScrollArea, ScrollBar } from "@/components/ui/ScrollArea";
 import { Skeleton } from "@/components/ui/Skeleton";
 import { cn } from "@/lib/cssUtils";
-import { env } from "@/lib/env";
 import type { Guild } from "@/lib/schemas/guild";
-import type { RoleGroup } from "@/lib/schemas/roleGroup";
-import type { PaginatedResponse } from "@/lib/types";
+import { getRoleGroups } from "../fetchers";
 import { CreateRoleGroup } from "./CreateRoleGroup";
 import { RoleGroupNavLink } from "./RoleGroupNavLink";
 
@@ -13,14 +11,6 @@ type Props = {
   guild: Guild;
 };
 
-const getRoleGroups = async (guildId: string) => {
-  const res = await fetch(
-    `${env.NEXT_PUBLIC_API}/role-group/search?customQuery=@guildId:{${guildId}}`,
-  );
-  const data: PaginatedResponse<RoleGroup> = await res.json();
-  return data.items;
-};
-
 export const GuildTabs = async ({ guild }: Props) => {
   const roleGroups = await getRoleGroups(guild.id);
 
diff --git a/src/app/(dashboard)/[guildId]/fetchers.ts b/src/app/(dashboard)/[guildId]/fetchers.ts
index bafe2f6d4e..cc8f1e1117 100644
--- a/src/app/(dashboard)/[guildId]/fetchers.ts
+++ b/src/app/(dashboard)/[guildId]/fetchers.ts
@@ -1,10 +1,27 @@
 import { env } from "@/lib/env";
 import type { Guild } from "@/lib/schemas/guild";
-import { unstable_cache } from "next/cache";
+import type { RoleGroup } from "@/lib/schemas/roleGroup";
+import type { PaginatedResponse } from "@/lib/types";
 
-// TODO: `unstable_cache` is deprecated, we should use the `"use cache"` directive instead
-export const getGuild = unstable_cache(async (urlName: string) => {
-  const res = await fetch(`${env.NEXT_PUBLIC_API}/guild/urlName/${urlName}`);
+export const getGuild = async (urlName: string) => {
+  const res = await fetch(`${env.NEXT_PUBLIC_API}/guild/urlName/${urlName}`, {
+    next: {
+      tags: [`guild-${urlName}`],
+    },
+  });
   const data: Guild = await res.json();
   return data;
-});
+};
+
+export const getRoleGroups = async (guildId: string) => {
+  const res = await fetch(
+    `${env.NEXT_PUBLIC_API}/role-group/search?customQuery=@guildId:{${guildId}}`,
+    {
+      next: {
+        tags: [`role-groups-${guildId}`],
+      },
+    },
+  );
+  const data: PaginatedResponse<RoleGroup> = await res.json();
+  return data.items;
+};

From 81ee35d6234fd0c45d4d6e500a6025a54ed67ef2 Mon Sep 17 00:00:00 2001
From: BrickheadJohnny <johnny.zgen@gmail.com>
Date: Wed, 27 Nov 2024 12:43:21 +0100
Subject: [PATCH 12/93] cleanup(CreateRoleGroup): remove console.log

---
 src/app/(dashboard)/[guildId]/components/CreateRoleGroup.tsx | 5 +----
 1 file changed, 1 insertion(+), 4 deletions(-)

diff --git a/src/app/(dashboard)/[guildId]/components/CreateRoleGroup.tsx b/src/app/(dashboard)/[guildId]/components/CreateRoleGroup.tsx
index 7079bbc4df..3018d1d0ea 100644
--- a/src/app/(dashboard)/[guildId]/components/CreateRoleGroup.tsx
+++ b/src/app/(dashboard)/[guildId]/components/CreateRoleGroup.tsx
@@ -169,10 +169,7 @@ const CreateRoleGroupDialogForm = ({
       <ResponsiveDialogFooter>
         <Button
           colorScheme="success"
-          onClick={form.handleSubmit(
-            (data) => onSubmit(data),
-            (error) => console.log(error),
-          )}
+          onClick={form.handleSubmit((data) => onSubmit(data))}
           isLoading={isPending}
           loadingText="Creating page"
         >

From 2908f052a64f9e7dc29ca5f9ced471481aa46a1b Mon Sep 17 00:00:00 2001
From: BrickheadJohnny <johnny.zgen@gmail.com>
Date: Wed, 27 Nov 2024 13:34:33 +0100
Subject: [PATCH 13/93] feat: cache role groups

---
 src/app/(dashboard)/[guildId]/fetchers.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/app/(dashboard)/[guildId]/fetchers.ts b/src/app/(dashboard)/[guildId]/fetchers.ts
index cc8f1e1117..f0fe83f477 100644
--- a/src/app/(dashboard)/[guildId]/fetchers.ts
+++ b/src/app/(dashboard)/[guildId]/fetchers.ts
@@ -19,6 +19,7 @@ export const getRoleGroups = async (guildId: string) => {
     {
       next: {
         tags: [`role-groups-${guildId}`],
+        revalidate: 3600,
       },
     },
   );

From e68b835c134f88ef5e5695ae4255d06f36cb003f Mon Sep 17 00:00:00 2001
From: Dominik Stumpf <s.dominik.work@gmail.com>
Date: Wed, 27 Nov 2024 23:13:54 +0100
Subject: [PATCH 14/93] feat: align to new backend responses

---
 .../[guildId]/[roleGroupId]/page.tsx            | 10 ++++++----
 .../[guildId]/components/GuildTabs.tsx          | 11 +++++------
 src/app/(dashboard)/[guildId]/fetchers.ts       |  2 +-
 src/app/(dashboard)/[guildId]/page.tsx          | 17 ++++-------------
 4 files changed, 16 insertions(+), 24 deletions(-)

diff --git a/src/app/(dashboard)/[guildId]/[roleGroupId]/page.tsx b/src/app/(dashboard)/[guildId]/[roleGroupId]/page.tsx
index dfff8a2cbc..52538eda7c 100644
--- a/src/app/(dashboard)/[guildId]/[roleGroupId]/page.tsx
+++ b/src/app/(dashboard)/[guildId]/[roleGroupId]/page.tsx
@@ -7,7 +7,6 @@ import type { RoleGroup } from "@/lib/schemas/roleGroup";
 import type { DynamicRoute, PaginatedResponse } from "@/lib/types";
 import { Lock } from "@phosphor-icons/react/dist/ssr";
 import { ScrollArea } from "@radix-ui/react-scroll-area";
-import { Fragment } from "react";
 
 const RoleGroupPage = async ({
   params,
@@ -22,7 +21,10 @@ const RoleGroupPage = async ({
     )
   ).json()) as PaginatedResponse<RoleGroup>;
   const roleGroups = paginatedRoleGroup.items;
-  const roleGroup = roleGroups.find((rg) => rg.urlName === roleGroupIdParam)!;
+  const roleGroup = roleGroups.find(
+    // @ts-expect-error
+    (rg) => rg.urlName === roleGroupIdParam || rg.id === guild.homeRoleGroupId,
+  )!;
   const paginatedRole = (await (
     await fetch(
       `${env.NEXT_PUBLIC_API}/role/search?customQuery=@guildId:{${guild.id}}&pageSize=${Number.MAX_SAFE_INTEGER}`,
@@ -57,7 +59,7 @@ const RoleGroupPage = async ({
             </div>
             <ScrollArea className="mt-6 h-32">
               <div className="flex flex-col gap-6">
-                {Array.from({ length: 16 }, (_, i) => (
+                {/*Array.from({ length: 16 }, (_, i) => (
                   <Fragment key={i}>
                     {i > 0 && <div className="h-px w-full bg-border" />}
                     <div className="flex items-center gap-3">
@@ -70,7 +72,7 @@ const RoleGroupPage = async ({
                       </div>
                     </div>
                   </Fragment>
-                ))}
+                ))*/}
               </div>
             </ScrollArea>
           </div>
diff --git a/src/app/(dashboard)/[guildId]/components/GuildTabs.tsx b/src/app/(dashboard)/[guildId]/components/GuildTabs.tsx
index d17a3419e6..f59715dee5 100644
--- a/src/app/(dashboard)/[guildId]/components/GuildTabs.tsx
+++ b/src/app/(dashboard)/[guildId]/components/GuildTabs.tsx
@@ -4,7 +4,6 @@ import { Skeleton } from "@/components/ui/Skeleton";
 import { cn } from "@/lib/cssUtils";
 import type { Guild } from "@/lib/schemas/guild";
 import { getRoleGroups } from "../fetchers";
-import { CreateRoleGroup } from "./CreateRoleGroup";
 import { RoleGroupNavLink } from "./RoleGroupNavLink";
 
 type Props = {
@@ -23,16 +22,17 @@ export const GuildTabs = async ({ guild }: Props) => {
       }}
     >
       <div className="my-4 flex gap-3 px-8">
-        <RoleGroupNavLink href={`/${guild.urlName}`}>Home</RoleGroupNavLink>
         {roleGroups.map((rg) => (
           <RoleGroupNavLink
             key={rg.id}
-            href={`/${guild.urlName}/${rg.urlName}`}
+            href={[guild.urlName, rg.urlName]
+              .filter(Boolean)
+              .map((s) => `/${s}`)
+              .join()}
           >
             {rg.name}
           </RoleGroupNavLink>
         ))}
-        <CreateRoleGroup guildId={guild.id} />
       </div>
       <ScrollBar orientation="horizontal" className="hidden" />
     </ScrollArea>
@@ -44,8 +44,7 @@ export const GuildTabsSkeleton = () => (
   <div className="my-4 flex gap-3">
     {[...Array(3)].map((_, i) => (
       <Card
-        // biome-ignore lint: it's safe to use index as key in this case
-        key={i}
+        key={`${SKELETON_SIZES[i]}${i}`}
         className={cn("flex h-11 items-center px-4", SKELETON_SIZES[i])}
       >
         <Skeleton className="h-4 w-full" />
diff --git a/src/app/(dashboard)/[guildId]/fetchers.ts b/src/app/(dashboard)/[guildId]/fetchers.ts
index f0fe83f477..fa162d6237 100644
--- a/src/app/(dashboard)/[guildId]/fetchers.ts
+++ b/src/app/(dashboard)/[guildId]/fetchers.ts
@@ -15,7 +15,7 @@ export const getGuild = async (urlName: string) => {
 
 export const getRoleGroups = async (guildId: string) => {
   const res = await fetch(
-    `${env.NEXT_PUBLIC_API}/role-group/search?customQuery=@guildId:{${guildId}}`,
+    `${env.NEXT_PUBLIC_API}/role-group/search?customQuery=@guildId:{${guildId}}&pageSize=${Number.MAX_SAFE_INTEGER}`,
     {
       next: {
         tags: [`role-groups-${guildId}`],
diff --git a/src/app/(dashboard)/[guildId]/page.tsx b/src/app/(dashboard)/[guildId]/page.tsx
index 097d6417e5..e0640bc9bb 100644
--- a/src/app/(dashboard)/[guildId]/page.tsx
+++ b/src/app/(dashboard)/[guildId]/page.tsx
@@ -1,22 +1,13 @@
 import type { DynamicRoute } from "@/lib/types";
-import { getGuild } from "./fetchers";
+import GuildPage from "./[roleGroupId]/page";
 
 const DefaultGuildPage = async ({
   params,
 }: DynamicRoute<{ guildId: string }>) => {
   const { guildId: urlName } = await params;
-  const guild = await getGuild(urlName);
-  // const paginatedRoleGroup = (await (
-  //   await fetch(
-  //     `${env.NEXT_PUBLIC_API}/role-group/search?customQuery=@guildId:{${guild.id}}`,
-  //   )
-  // ).json()) as PaginatedResponse<RoleGroup>;
-  // const roleGroups = paginatedRoleGroup.items;
-  // const roleGroup = roleGroups.at(0);
-  // if (roleGroup) {
-  //   redirect(`/${guildIdParam}/${roleGroup.urlName}`);
-  // }
-  return `Default guild page - ${guild.name}`;
+  //const guild = await getGuild(urlName);
+  //return `Default guild page - ${guild.name}`;
+  return <GuildPage params={{ guildId: urlName, roleGroupId: "" }} />;
 };
 
 export default DefaultGuildPage;

From 5e30e14743dc1dae4be2e532f00d1e33ec68dba1 Mon Sep 17 00:00:00 2001
From: Dominik Stumpf <s.dominik.work@gmail.com>
Date: Wed, 27 Nov 2024 23:34:22 +0100
Subject: [PATCH 15/93] chore: get guild using fetcher util

---
 src/app/(dashboard)/[guildId]/[roleGroupId]/page.tsx | 12 +++++++-----
 src/app/(dashboard)/[guildId]/layout.tsx             | 10 +++++++---
 2 files changed, 14 insertions(+), 8 deletions(-)

diff --git a/src/app/(dashboard)/[guildId]/[roleGroupId]/page.tsx b/src/app/(dashboard)/[guildId]/[roleGroupId]/page.tsx
index 52538eda7c..9e92901e46 100644
--- a/src/app/(dashboard)/[guildId]/[roleGroupId]/page.tsx
+++ b/src/app/(dashboard)/[guildId]/[roleGroupId]/page.tsx
@@ -38,11 +38,13 @@ const RoleGroupPage = async ({
         <Card className="flex border" key={role.id}>
           <div className="w-1/2 border-r-2 p-6">
             <div className="flex items-center gap-3">
-              <img
-                className="size-14 rounded-full border"
-                src={role.imageUrl ?? ""} // TODO: fallback image
-                alt="role avatar"
-              />
+              {role.imageUrl && (
+                <img
+                  className="size-14 rounded-full border"
+                  src={role.imageUrl} // TODO: fallback image
+                  alt="role avatar"
+                />
+              )}
               <h3 className="font-bold text-xl tracking-tight">{role.name}</h3>
             </div>
             <p className="mt-4 leading-relaxed">{role.description}</p>
diff --git a/src/app/(dashboard)/[guildId]/layout.tsx b/src/app/(dashboard)/[guildId]/layout.tsx
index 6ee4f8d856..c57b36b150 100644
--- a/src/app/(dashboard)/[guildId]/layout.tsx
+++ b/src/app/(dashboard)/[guildId]/layout.tsx
@@ -1,16 +1,20 @@
 import { GuildImage } from "@/components/GuildImage";
 import { Button } from "@/components/ui/Button";
+import { env } from "@/lib/env";
+import { fetcher } from "@/lib/fetcher";
+import type { Guild } from "@/lib/schemas/guild";
 import type { DynamicRoute } from "@/lib/types";
 import { type PropsWithChildren, Suspense } from "react";
 import { GuildTabs, GuildTabsSkeleton } from "./components/GuildTabs";
-import { getGuild } from "./fetchers";
 
 const GuildPage = async ({
   params,
   children,
 }: PropsWithChildren<DynamicRoute<{ guildId: string }>>) => {
-  const { guildId: urlName } = await params;
-  const guild = await getGuild(urlName);
+  const { guildId: guildIdParam } = await params;
+  const guild = await fetcher<Guild>(
+    `${env.NEXT_PUBLIC_API}/guild/urlName/${guildIdParam}`,
+  );
 
   return (
     <main className="py-16">

From e058d5c410b5e9e86c2124c9ef1de48e4d96dfbd Mon Sep 17 00:00:00 2001
From: Dominik Stumpf <s.dominik.work@gmail.com>
Date: Thu, 28 Nov 2024 20:41:50 +0100
Subject: [PATCH 16/93] chore: remove console.log

---
 src/app/(dashboard)/explorer/page.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/app/(dashboard)/explorer/page.tsx b/src/app/(dashboard)/explorer/page.tsx
index 94c5b1c95c..b29945d79b 100644
--- a/src/app/(dashboard)/explorer/page.tsx
+++ b/src/app/(dashboard)/explorer/page.tsx
@@ -22,7 +22,6 @@ import { getGuildSearch } from "./fetchers";
 
 const getAssociatedGuilds = async ({ userId }: { userId: string }) => {
   const request = `${env.NEXT_PUBLIC_API}/guild/search?page=1&pageSize=${Number.MAX_SAFE_INTEGER}&sortBy=name&reverse=false&customQuery=@owner:{${userId}}`;
-  console.log(request);
   return fetcher<PaginatedResponse<Guild>>(request);
 };
 

From d768d0557f6cb1c078fbacdb3dc4ba183409ac4e Mon Sep 17 00:00:00 2001
From: Dominik Stumpf <s.dominik.work@gmail.com>
Date: Thu, 28 Nov 2024 20:45:48 +0100
Subject: [PATCH 17/93] fix: dont put comma between url segments

---
 src/app/(dashboard)/[guildId]/components/GuildTabs.tsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/app/(dashboard)/[guildId]/components/GuildTabs.tsx b/src/app/(dashboard)/[guildId]/components/GuildTabs.tsx
index f59715dee5..a57b5a52a5 100644
--- a/src/app/(dashboard)/[guildId]/components/GuildTabs.tsx
+++ b/src/app/(dashboard)/[guildId]/components/GuildTabs.tsx
@@ -12,6 +12,7 @@ type Props = {
 
 export const GuildTabs = async ({ guild }: Props) => {
   const roleGroups = await getRoleGroups(guild.id);
+  console.log(roleGroups);
 
   return (
     <ScrollArea
@@ -28,7 +29,7 @@ export const GuildTabs = async ({ guild }: Props) => {
             href={[guild.urlName, rg.urlName]
               .filter(Boolean)
               .map((s) => `/${s}`)
-              .join()}
+              .join("")}
           >
             {rg.name}
           </RoleGroupNavLink>

From 89080a834832a6f0e4249eaf1af9a91de5e45aa1 Mon Sep 17 00:00:00 2001
From: Dominik Stumpf <s.dominik.work@gmail.com>
Date: Thu, 28 Nov 2024 21:32:24 +0100
Subject: [PATCH 18/93] feat: create sort for roleGroup tabs

---
 .../[guildId]/components/GuildTabs.tsx        | 32 ++++++++++++-------
 1 file changed, 20 insertions(+), 12 deletions(-)

diff --git a/src/app/(dashboard)/[guildId]/components/GuildTabs.tsx b/src/app/(dashboard)/[guildId]/components/GuildTabs.tsx
index a57b5a52a5..c9abb337bd 100644
--- a/src/app/(dashboard)/[guildId]/components/GuildTabs.tsx
+++ b/src/app/(dashboard)/[guildId]/components/GuildTabs.tsx
@@ -10,9 +10,10 @@ type Props = {
   guild: Guild;
 };
 
+const roleGroupOrder = ["Home", "Admin"].reverse();
+
 export const GuildTabs = async ({ guild }: Props) => {
   const roleGroups = await getRoleGroups(guild.id);
-  console.log(roleGroups);
 
   return (
     <ScrollArea
@@ -23,17 +24,24 @@ export const GuildTabs = async ({ guild }: Props) => {
       }}
     >
       <div className="my-4 flex gap-3 px-8">
-        {roleGroups.map((rg) => (
-          <RoleGroupNavLink
-            key={rg.id}
-            href={[guild.urlName, rg.urlName]
-              .filter(Boolean)
-              .map((s) => `/${s}`)
-              .join("")}
-          >
-            {rg.name}
-          </RoleGroupNavLink>
-        ))}
+        {roleGroups
+          .sort((a, b) => {
+            const [aIndex, bIndex] = [a, b].map((val) =>
+              roleGroupOrder.findIndex((pred) => pred === val.name),
+            );
+            return bIndex - aIndex;
+          })
+          .map((rg) => (
+            <RoleGroupNavLink
+              key={rg.id}
+              href={[guild.urlName, rg.urlName]
+                .filter(Boolean)
+                .map((s) => `/${s}`)
+                .join("")}
+            >
+              {rg.name}
+            </RoleGroupNavLink>
+          ))}
       </div>
       <ScrollBar orientation="horizontal" className="hidden" />
     </ScrollArea>

From 3849ec58462c96b767df14523b6db2db186ca3bb Mon Sep 17 00:00:00 2001
From: Dominik Stumpf <s.dominik.work@gmail.com>
Date: Thu, 28 Nov 2024 23:15:11 +0100
Subject: [PATCH 19/93] feat: display rewards

---
 .../[guildId]/[roleGroupId]/page.tsx          | 142 ++++++++++++------
 1 file changed, 92 insertions(+), 50 deletions(-)

diff --git a/src/app/(dashboard)/[guildId]/[roleGroupId]/page.tsx b/src/app/(dashboard)/[guildId]/[roleGroupId]/page.tsx
index 9e92901e46..66688be8a5 100644
--- a/src/app/(dashboard)/[guildId]/[roleGroupId]/page.tsx
+++ b/src/app/(dashboard)/[guildId]/[roleGroupId]/page.tsx
@@ -1,12 +1,13 @@
 import { Button } from "@/components/ui/Button";
 import { Card } from "@/components/ui/Card";
+import { ScrollArea } from "@/components/ui/ScrollArea";
 import { env } from "@/lib/env";
+import { fetcher } from "@/lib/fetcher";
 import type { Guild } from "@/lib/schemas/guild";
 import type { Role } from "@/lib/schemas/role";
 import type { RoleGroup } from "@/lib/schemas/roleGroup";
 import type { DynamicRoute, PaginatedResponse } from "@/lib/types";
 import { Lock } from "@phosphor-icons/react/dist/ssr";
-import { ScrollArea } from "@radix-ui/react-scroll-area";
 
 const RoleGroupPage = async ({
   params,
@@ -25,63 +26,104 @@ const RoleGroupPage = async ({
     // @ts-expect-error
     (rg) => rg.urlName === roleGroupIdParam || rg.id === guild.homeRoleGroupId,
   )!;
-  const paginatedRole = (await (
-    await fetch(
-      `${env.NEXT_PUBLIC_API}/role/search?customQuery=@guildId:{${guild.id}}&pageSize=${Number.MAX_SAFE_INTEGER}`,
-    )
-  ).json()) as PaginatedResponse<Role>;
+  const paginatedRole = await fetcher<PaginatedResponse<Role>>(
+    `${env.NEXT_PUBLIC_API}/role/search?customQuery=@guildId:{${guild.id}}&pageSize=${Number.MAX_SAFE_INTEGER}`,
+  );
   const roles = paginatedRole.items.filter((r) => r.groupId === roleGroup.id);
 
   return (
     <div className="my-4 space-y-4">
       {roles.map((role) => (
-        <Card className="flex border" key={role.id}>
-          <div className="w-1/2 border-r-2 p-6">
-            <div className="flex items-center gap-3">
-              {role.imageUrl && (
-                <img
-                  className="size-14 rounded-full border"
-                  src={role.imageUrl} // TODO: fallback image
-                  alt="role avatar"
-                />
-              )}
-              <h3 className="font-bold text-xl tracking-tight">{role.name}</h3>
-            </div>
-            <p className="mt-4 leading-relaxed">{role.description}</p>
-          </div>
-          <div className="w-1/2 bg-background p-6">
-            <div className="flex items-center justify-between">
-              <span className="font-bold text-foreground-secondary text-xs">
-                REQUIREMENTS
-              </span>
-              <Button size="sm">
-                <Lock />
-                Join Guild to collect rewards
-              </Button>
-            </div>
-            <ScrollArea className="mt-6 h-32">
-              <div className="flex flex-col gap-6">
-                {/*Array.from({ length: 16 }, (_, i) => (
-                  <Fragment key={i}>
-                    {i > 0 && <div className="h-px w-full bg-border" />}
-                    <div className="flex items-center gap-3">
-                      <div className="size-10 rounded-full bg-image" />
-                      <div className="">
-                        <h4 className="font-medium">Requirement name</h4>
-                        <p className="text-foreground-secondary text-sm">
-                          description, additional info
-                        </p>
-                      </div>
-                    </div>
-                  </Fragment>
-                ))*/}
-              </div>
-            </ScrollArea>
-          </div>
-        </Card>
+        <RoleCard role={role} key={role.id} />
       ))}
     </div>
   );
 };
 
+const RE = {
+  id: "aca776be-5a7b-4618-bb7c-1130de066257",
+  createdAt: 1732825819745,
+  updatedAt: 1732825819745,
+  name: "Home - delete",
+  guildId: "2b3330e4-05fa-4949-a80c-2deeb99d100e",
+  urlName: "stars-guild-delete",
+  foreignEntity: "role-group",
+  foreignIdentifier: "1b06e1e7-5bf8-4f55-8e7b-16c5542d10c3",
+  description:
+    'Grants delete access to the "Home" role group in the "Stars Guild" guild',
+  type: "GUILD",
+  permissions: {
+    read: "b62cda4f-27d6-40dc-9625-34a6ce74912a",
+    update: "78ac4c72-cc44-4336-b5cd-e73e93fd86e7",
+    delete: "d713b547-135d-49ab-a9b1-e670ad1871a7",
+  },
+};
+type Reward = typeof RE;
+
+const RoleCard = async ({ role }: { role: Role }) => {
+  const rewards = (await Promise.all(
+    role.rewards?.map(({ rewardId }) => {
+      const req = `${env.NEXT_PUBLIC_API}/reward/id/${rewardId}`;
+      try {
+        return fetcher<Reward>(req);
+      } catch {
+        console.error({ rewardId, req });
+      }
+    }) ?? [],
+  )) as Reward[];
+  //console.log(rewards);
+
+  return (
+    <Card className="flex border" key={role.id}>
+      <div className="w-1/2 border-r-2 p-6">
+        <div className="flex items-center gap-3">
+          {role.imageUrl && (
+            <img
+              className="size-14 rounded-full border"
+              src={role.imageUrl} // TODO: fallback image
+              alt="role avatar"
+            />
+          )}
+          <h3 className="font-bold text-xl tracking-tight">{role.name}</h3>
+        </div>
+        <p className="mt-4 text-foreground-dimmed leading-relaxed">
+          {role.description}
+        </p>
+        {!!rewards.length && (
+          <ScrollArea className="mt-8 h-64 rounded-lg border-2 pr-3">
+            <div className="flex flex-col gap-4">
+              {rewards.map((reward) => (
+                <Reward reward={reward} key={reward.id} />
+              ))}
+            </div>
+          </ScrollArea>
+        )}
+      </div>
+      <div className="w-1/2 bg-background p-6">
+        <div className="flex items-center justify-between">
+          <span className="font-bold text-foreground-secondary text-xs">
+            REQUIREMENTS
+          </span>
+          <Button size="sm">
+            <Lock />
+            Join Guild to collect rewards
+          </Button>
+        </div>
+      </div>
+    </Card>
+  );
+};
+
+const Reward = ({ reward }: { reward: Reward }) => {
+  return (
+    <div className="border-b p-4">
+      <div className="mb-2 font-medium">{reward.name}</div>
+      <div className="text-foreground-dimmed text-sm">{reward.description}</div>
+      <pre className="mt-3 text-foreground-secondary text-xs">
+        <code>{JSON.stringify(reward.permissions, null, 2)}</code>
+      </pre>
+    </div>
+  );
+};
+
 export default RoleGroupPage;

From f37aa2e60d53717756eb57d85e255ae77a728844 Mon Sep 17 00:00:00 2001
From: Dominik Stumpf <s.dominik.work@gmail.com>
Date: Thu, 28 Nov 2024 23:16:23 +0100
Subject: [PATCH 20/93] chore: make role card horizontal on small

---
 src/app/(dashboard)/[guildId]/[roleGroupId]/page.tsx | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/src/app/(dashboard)/[guildId]/[roleGroupId]/page.tsx b/src/app/(dashboard)/[guildId]/[roleGroupId]/page.tsx
index 66688be8a5..7ffa806b1f 100644
--- a/src/app/(dashboard)/[guildId]/[roleGroupId]/page.tsx
+++ b/src/app/(dashboard)/[guildId]/[roleGroupId]/page.tsx
@@ -62,6 +62,7 @@ type Reward = typeof RE;
 
 const RoleCard = async ({ role }: { role: Role }) => {
   const rewards = (await Promise.all(
+    // @ts-ignore
     role.rewards?.map(({ rewardId }) => {
       const req = `${env.NEXT_PUBLIC_API}/reward/id/${rewardId}`;
       try {
@@ -74,8 +75,8 @@ const RoleCard = async ({ role }: { role: Role }) => {
   //console.log(rewards);
 
   return (
-    <Card className="flex border" key={role.id}>
-      <div className="w-1/2 border-r-2 p-6">
+    <Card className="flex flex-col border md:flex-row" key={role.id}>
+      <div className="border-r-2 p-6 md:w-1/2">
         <div className="flex items-center gap-3">
           {role.imageUrl && (
             <img
@@ -99,7 +100,7 @@ const RoleCard = async ({ role }: { role: Role }) => {
           </ScrollArea>
         )}
       </div>
-      <div className="w-1/2 bg-background p-6">
+      <div className="bg-background p-6 md:w-1/2">
         <div className="flex items-center justify-between">
           <span className="font-bold text-foreground-secondary text-xs">
             REQUIREMENTS

From e1daf6bdb8ecce957f858ffb9be2d0698900fb8e Mon Sep 17 00:00:00 2001
From: Dominik Stumpf <s.dominik.work@gmail.com>
Date: Fri, 29 Nov 2024 00:28:41 +0100
Subject: [PATCH 21/93] feat: add join guild logic

---
 .../[guildId]/[roleGroupId]/page.tsx          |  6 ++--
 .../[guildId]/components/JoinButton.tsx       | 35 +++++++++++++++++++
 src/app/(dashboard)/[guildId]/layout.tsx      | 10 +++---
 3 files changed, 44 insertions(+), 7 deletions(-)
 create mode 100644 src/app/(dashboard)/[guildId]/components/JoinButton.tsx

diff --git a/src/app/(dashboard)/[guildId]/[roleGroupId]/page.tsx b/src/app/(dashboard)/[guildId]/[roleGroupId]/page.tsx
index 7ffa806b1f..171800d0d7 100644
--- a/src/app/(dashboard)/[guildId]/[roleGroupId]/page.tsx
+++ b/src/app/(dashboard)/[guildId]/[roleGroupId]/page.tsx
@@ -91,8 +91,8 @@ const RoleCard = async ({ role }: { role: Role }) => {
           {role.description}
         </p>
         {!!rewards.length && (
-          <ScrollArea className="mt-8 h-64 rounded-lg border-2 pr-3">
-            <div className="flex flex-col gap-4">
+          <ScrollArea className="mt-8 h-64 rounded-lg border-2">
+            <div className="flex flex-col">
               {rewards.map((reward) => (
                 <Reward reward={reward} key={reward.id} />
               ))}
@@ -117,7 +117,7 @@ const RoleCard = async ({ role }: { role: Role }) => {
 
 const Reward = ({ reward }: { reward: Reward }) => {
   return (
-    <div className="border-b p-4">
+    <div className="border-b p-6">
       <div className="mb-2 font-medium">{reward.name}</div>
       <div className="text-foreground-dimmed text-sm">{reward.description}</div>
       <pre className="mt-3 text-foreground-secondary text-xs">
diff --git a/src/app/(dashboard)/[guildId]/components/JoinButton.tsx b/src/app/(dashboard)/[guildId]/components/JoinButton.tsx
new file mode 100644
index 0000000000..bd22b778c4
--- /dev/null
+++ b/src/app/(dashboard)/[guildId]/components/JoinButton.tsx
@@ -0,0 +1,35 @@
+"use client";
+
+import { Button } from "@/components/ui/Button";
+import { GUILD_AUTH_COOKIE_NAME } from "@/config/constants";
+import { env } from "@/lib/env";
+import { fetcher } from "@/lib/fetcher";
+import { getCookie } from "@/lib/getCookie";
+import type { Guild } from "@/lib/schemas/guild";
+
+const joinGuild = ({ guildId }: { guildId: string }) => {
+  const token = getCookie(GUILD_AUTH_COOKIE_NAME);
+  return (
+    token &&
+    fetcher(`${env.NEXT_PUBLIC_API}/guild/${guildId}/join`, {
+      method: "POST",
+      headers: {
+        "X-Auth-Token": token,
+      },
+    })
+  );
+};
+
+export const JoinButton = ({ guild }: { guild: Guild }) => {
+  return (
+    <Button
+      colorScheme="success"
+      className="rounded-2xl"
+      onClick={() => {
+        joinGuild({ guildId: guild.id });
+      }}
+    >
+      Join Guild
+    </Button>
+  );
+};
diff --git a/src/app/(dashboard)/[guildId]/layout.tsx b/src/app/(dashboard)/[guildId]/layout.tsx
index c57b36b150..fa9f353669 100644
--- a/src/app/(dashboard)/[guildId]/layout.tsx
+++ b/src/app/(dashboard)/[guildId]/layout.tsx
@@ -1,11 +1,13 @@
+import { AuthBoundary } from "@/components/AuthBoundary";
 import { GuildImage } from "@/components/GuildImage";
-import { Button } from "@/components/ui/Button";
+import { SignInButton } from "@/components/SignInButton";
 import { env } from "@/lib/env";
 import { fetcher } from "@/lib/fetcher";
 import type { Guild } from "@/lib/schemas/guild";
 import type { DynamicRoute } from "@/lib/types";
 import { type PropsWithChildren, Suspense } from "react";
 import { GuildTabs, GuildTabsSkeleton } from "./components/GuildTabs";
+import { JoinButton } from "./components/JoinButton";
 
 const GuildPage = async ({
   params,
@@ -31,9 +33,9 @@ const GuildPage = async ({
                 {guild.name}
               </h1>
             </div>
-            <Button colorScheme="success" className="rounded-2xl">
-              Join Guild
-            </Button>
+            <AuthBoundary fallback={<SignInButton />}>
+              <JoinButton guild={guild} />
+            </AuthBoundary>
           </div>
           <p className="line-clamp-3 max-w-prose text-balance text-lg leading-relaxed">
             {guild.description}

From c2a9f52431e22fe78ac98aa89bf8b80fcc81e847 Mon Sep 17 00:00:00 2001
From: BrickheadJohnny <johnny.zgen@gmail.com>
Date: Fri, 29 Nov 2024 10:30:05 +0100
Subject: [PATCH 22/93] fix(RoleCard): use the old design

---
 src/app/(dashboard)/[guildId]/[roleGroupId]/page.tsx | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/app/(dashboard)/[guildId]/[roleGroupId]/page.tsx b/src/app/(dashboard)/[guildId]/[roleGroupId]/page.tsx
index 7ffa806b1f..3a38da759e 100644
--- a/src/app/(dashboard)/[guildId]/[roleGroupId]/page.tsx
+++ b/src/app/(dashboard)/[guildId]/[roleGroupId]/page.tsx
@@ -75,8 +75,8 @@ const RoleCard = async ({ role }: { role: Role }) => {
   //console.log(rewards);
 
   return (
-    <Card className="flex flex-col border md:flex-row" key={role.id}>
-      <div className="border-r-2 p-6 md:w-1/2">
+    <Card className="flex flex-col md:flex-row" key={role.id}>
+      <div className="border-r p-6 md:w-1/2">
         <div className="flex items-center gap-3">
           {role.imageUrl && (
             <img
@@ -91,7 +91,7 @@ const RoleCard = async ({ role }: { role: Role }) => {
           {role.description}
         </p>
         {!!rewards.length && (
-          <ScrollArea className="mt-8 h-64 rounded-lg border-2 pr-3">
+          <ScrollArea className="mt-8 h-64 rounded-lg border pr-3">
             <div className="flex flex-col gap-4">
               {rewards.map((reward) => (
                 <Reward reward={reward} key={reward.id} />
@@ -100,7 +100,7 @@ const RoleCard = async ({ role }: { role: Role }) => {
           </ScrollArea>
         )}
       </div>
-      <div className="bg-background p-6 md:w-1/2">
+      <div className="bg-card-secondary p-6 md:w-1/2">
         <div className="flex items-center justify-between">
           <span className="font-bold text-foreground-secondary text-xs">
             REQUIREMENTS
@@ -117,7 +117,7 @@ const RoleCard = async ({ role }: { role: Role }) => {
 
 const Reward = ({ reward }: { reward: Reward }) => {
   return (
-    <div className="border-b p-4">
+    <div className="border-b p-4 last:border-b-0">
       <div className="mb-2 font-medium">{reward.name}</div>
       <div className="text-foreground-dimmed text-sm">{reward.description}</div>
       <pre className="mt-3 text-foreground-secondary text-xs">

From 799b90af59788fcf2b0ac603d4c92dad43c5561c Mon Sep 17 00:00:00 2001
From: Dominik Stumpf <s.dominik.work@gmail.com>
Date: Fri, 29 Nov 2024 11:55:34 +0100
Subject: [PATCH 23/93] feat: add logout action

---
 package.json                                  |  1 +
 src/actions/auth.ts                           | 14 +-----
 .../[guildId]/components/JoinButton.tsx       | 48 ++++++++++++++++++-
 src/lib/schemas/user.ts                       | 13 +++++
 4 files changed, 62 insertions(+), 14 deletions(-)
 create mode 100644 src/lib/schemas/user.ts

diff --git a/package.json b/package.json
index 0dfc2cae6a..44d83679a6 100644
--- a/package.json
+++ b/package.json
@@ -13,6 +13,7 @@
     "build-storybook": "storybook build"
   },
   "dependencies": {
+    "@guildxyz/bev3": "^0.0.4",
     "@hookform/resolvers": "^3.9.1",
     "@phosphor-icons/react": "^2.1.7",
     "@radix-ui/react-avatar": "^1.1.1",
diff --git a/src/actions/auth.ts b/src/actions/auth.ts
index 80bc7158ef..62f761b130 100644
--- a/src/actions/auth.ts
+++ b/src/actions/auth.ts
@@ -2,22 +2,10 @@
 
 import { GUILD_AUTH_COOKIE_NAME } from "@/config/constants";
 import { env } from "@/lib/env";
+import { authSchema, tokenSchema } from "@/lib/schemas/user";
 import { jwtDecode } from "jwt-decode";
 import { cookies } from "next/headers";
 import { redirect } from "next/navigation";
-import { z } from "zod";
-
-const authSchema = z.object({
-  message: z.string(),
-  token: z.string(),
-  userId: z.string().uuid(),
-});
-
-const tokenSchema = z.object({
-  userId: z.string().uuid(),
-  exp: z.number().positive().int(),
-  iat: z.number().positive().int(),
-});
 
 export const signIn = async ({
   message,
diff --git a/src/app/(dashboard)/[guildId]/components/JoinButton.tsx b/src/app/(dashboard)/[guildId]/components/JoinButton.tsx
index bd22b778c4..53e37f6386 100644
--- a/src/app/(dashboard)/[guildId]/components/JoinButton.tsx
+++ b/src/app/(dashboard)/[guildId]/components/JoinButton.tsx
@@ -1,11 +1,15 @@
 "use client";
 
 import { Button } from "@/components/ui/Button";
+import { Skeleton } from "@/components/ui/Skeleton";
 import { GUILD_AUTH_COOKIE_NAME } from "@/config/constants";
 import { env } from "@/lib/env";
 import { fetcher } from "@/lib/fetcher";
 import { getCookie } from "@/lib/getCookie";
 import type { Guild } from "@/lib/schemas/guild";
+import { tokenSchema } from "@/lib/schemas/user";
+import { useQuery } from "@tanstack/react-query";
+import { jwtDecode } from "jwt-decode";
 
 const joinGuild = ({ guildId }: { guildId: string }) => {
   const token = getCookie(GUILD_AUTH_COOKIE_NAME);
@@ -20,8 +24,50 @@ const joinGuild = ({ guildId }: { guildId: string }) => {
   );
 };
 
-export const JoinButton = ({ guild }: { guild: Guild }) => {
+const leaveGuild = ({ guildId }: { guildId: string }) => {
+  const token = getCookie(GUILD_AUTH_COOKIE_NAME);
   return (
+    token &&
+    fetcher(`${env.NEXT_PUBLIC_API}/guild/${guildId}/leave`, {
+      method: "POST",
+      headers: {
+        "X-Auth-Token": token,
+      },
+    })
+  );
+};
+
+export const JoinButton = ({ guild }: { guild: Guild }) => {
+  const token = getCookie(GUILD_AUTH_COOKIE_NAME);
+  const userId = token && tokenSchema.parse(jwtDecode(token)).userId;
+
+  const user = useQuery<object>({
+    queryKey: ["user", userId],
+    queryFn: () => fetcher(`${env.NEXT_PUBLIC_API}/user/id/${userId}`),
+    enabled: !!userId,
+  });
+
+  if (!user.data) {
+    return <Skeleton className="h-[44px] w-[108px] rounded-lg" />;
+  }
+
+  // @ts-ignore
+  const isJoined = !!user.data.guilds?.some(
+    // @ts-ignore
+    ({ guildId }) => guildId === guild.id,
+  );
+
+  return isJoined ? (
+    <Button
+      colorScheme="destructive"
+      className="rounded-2xl"
+      onClick={() => {
+        leaveGuild({ guildId: guild.id });
+      }}
+    >
+      Leave Guild
+    </Button>
+  ) : (
     <Button
       colorScheme="success"
       className="rounded-2xl"
diff --git a/src/lib/schemas/user.ts b/src/lib/schemas/user.ts
new file mode 100644
index 0000000000..a8cb2c4eff
--- /dev/null
+++ b/src/lib/schemas/user.ts
@@ -0,0 +1,13 @@
+import { z } from "zod";
+
+export const authSchema = z.object({
+  message: z.string(),
+  token: z.string(),
+  userId: z.string().uuid(),
+});
+
+export const tokenSchema = z.object({
+  userId: z.string().uuid(),
+  exp: z.number().positive().int(),
+  iat: z.number().positive().int(),
+});

From 6358a529c801e2a0d7a248c3241b3184e1060cf3 Mon Sep 17 00:00:00 2001
From: Dominik Stumpf <s.dominik.work@gmail.com>
Date: Mon, 2 Dec 2024 09:30:11 +0100
Subject: [PATCH 24/93] feat: add guild join and leave without revalidation

---
 package.json                                  |  2 +-
 src/actions/auth.ts                           | 25 +++++++--
 src/app/(dashboard)/[guildId]/actions.ts      | 14 +++++
 .../[guildId]/components/JoinButton.tsx       | 53 ++-----------------
 src/app/(dashboard)/[guildId]/layout.tsx      | 11 +++-
 src/app/(dashboard)/explorer/page.tsx         | 12 ++---
 6 files changed, 57 insertions(+), 60 deletions(-)

diff --git a/package.json b/package.json
index c225ec9ff3..e591a6979e 100644
--- a/package.json
+++ b/package.json
@@ -13,7 +13,7 @@
     "build-storybook": "storybook build"
   },
   "dependencies": {
-    "@guildxyz/bev3": "^0.0.4",
+    "@guildxyz/types": "3.0.4",
     "@hookform/resolvers": "^3.9.1",
     "@phosphor-icons/react": "^2.1.7",
     "@radix-ui/react-avatar": "^1.1.1",
diff --git a/src/actions/auth.ts b/src/actions/auth.ts
index 62f761b130..88f35a49a2 100644
--- a/src/actions/auth.ts
+++ b/src/actions/auth.ts
@@ -2,6 +2,7 @@
 
 import { GUILD_AUTH_COOKIE_NAME } from "@/config/constants";
 import { env } from "@/lib/env";
+import { fetcher } from "@/lib/fetcher";
 import { authSchema, tokenSchema } from "@/lib/schemas/user";
 import { jwtDecode } from "jwt-decode";
 import { cookies } from "next/headers";
@@ -58,8 +59,24 @@ export const signOut = async (redirectTo?: string) => {
   redirect(redirectTo ?? "/explorer");
 };
 
-export const getAuthCookie = async () => {
-  const cookieStore = await cookies();
-  const authCookie = cookieStore.get(GUILD_AUTH_COOKIE_NAME);
-  return authCookie && tokenSchema.parse(jwtDecode(authCookie.value));
+export const getToken = async () => {
+  return (await cookies()).get(GUILD_AUTH_COOKIE_NAME)?.value;
+};
+
+export const getParsedToken = async () => {
+  const token = await getToken();
+  return token ? tokenSchema.parse(jwtDecode(token)) : undefined;
+};
+
+export const fetcherWithAuth = async <Data = unknown, Error = unknown>(
+  ...[resource, requestInit]: Parameters<typeof fetcher>
+) => {
+  const token = await getToken();
+  if (!token) {
+    throw new Error("failed to retrieve jwt token");
+  }
+  return fetcher<Data, Error>(resource, {
+    ...requestInit,
+    headers: { ...requestInit?.headers, "X-Auth-Token": token },
+  });
 };
diff --git a/src/app/(dashboard)/[guildId]/actions.ts b/src/app/(dashboard)/[guildId]/actions.ts
index 0454391739..50f0392fc3 100644
--- a/src/app/(dashboard)/[guildId]/actions.ts
+++ b/src/app/(dashboard)/[guildId]/actions.ts
@@ -1,6 +1,20 @@
 "use server";
+import { fetcherWithAuth } from "@/actions/auth";
+import { env } from "@/lib/env";
 import { revalidateTag } from "next/cache";
 
 export const revalidateRoleGroups = async (guildId: string) => {
   revalidateTag(`role-groups-${guildId}`);
 };
+
+export const joinGuild = async ({ guildId }: { guildId: string }) => {
+  return fetcherWithAuth(`${env.NEXT_PUBLIC_API}/guild/${guildId}/join`, {
+    method: "POST",
+  });
+};
+
+export const leaveGuild = async ({ guildId }: { guildId: string }) => {
+  return fetcherWithAuth(`${env.NEXT_PUBLIC_API}/guild/${guildId}/leave`, {
+    method: "POST",
+  });
+};
diff --git a/src/app/(dashboard)/[guildId]/components/JoinButton.tsx b/src/app/(dashboard)/[guildId]/components/JoinButton.tsx
index 53e37f6386..cf309fd9bc 100644
--- a/src/app/(dashboard)/[guildId]/components/JoinButton.tsx
+++ b/src/app/(dashboard)/[guildId]/components/JoinButton.tsx
@@ -1,56 +1,13 @@
 "use client";
 
 import { Button } from "@/components/ui/Button";
-import { Skeleton } from "@/components/ui/Skeleton";
-import { GUILD_AUTH_COOKIE_NAME } from "@/config/constants";
-import { env } from "@/lib/env";
-import { fetcher } from "@/lib/fetcher";
-import { getCookie } from "@/lib/getCookie";
 import type { Guild } from "@/lib/schemas/guild";
-import { tokenSchema } from "@/lib/schemas/user";
-import { useQuery } from "@tanstack/react-query";
-import { jwtDecode } from "jwt-decode";
-
-const joinGuild = ({ guildId }: { guildId: string }) => {
-  const token = getCookie(GUILD_AUTH_COOKIE_NAME);
-  return (
-    token &&
-    fetcher(`${env.NEXT_PUBLIC_API}/guild/${guildId}/join`, {
-      method: "POST",
-      headers: {
-        "X-Auth-Token": token,
-      },
-    })
-  );
-};
-
-const leaveGuild = ({ guildId }: { guildId: string }) => {
-  const token = getCookie(GUILD_AUTH_COOKIE_NAME);
-  return (
-    token &&
-    fetcher(`${env.NEXT_PUBLIC_API}/guild/${guildId}/leave`, {
-      method: "POST",
-      headers: {
-        "X-Auth-Token": token,
-      },
-    })
-  );
-};
-
-export const JoinButton = ({ guild }: { guild: Guild }) => {
-  const token = getCookie(GUILD_AUTH_COOKIE_NAME);
-  const userId = token && tokenSchema.parse(jwtDecode(token)).userId;
-
-  const user = useQuery<object>({
-    queryKey: ["user", userId],
-    queryFn: () => fetcher(`${env.NEXT_PUBLIC_API}/user/id/${userId}`),
-    enabled: !!userId,
-  });
-
-  if (!user.data) {
-    return <Skeleton className="h-[44px] w-[108px] rounded-lg" />;
-  }
+import type { Schemas } from "@guildxyz/types";
+import { joinGuild, leaveGuild } from "../actions";
 
+export const JoinButton = ({
+  guild,
+}: { guild: Guild; user: Schemas["UserFull"] }) => {
   // @ts-ignore
   const isJoined = !!user.data.guilds?.some(
     // @ts-ignore
diff --git a/src/app/(dashboard)/[guildId]/layout.tsx b/src/app/(dashboard)/[guildId]/layout.tsx
index fa9f353669..ae10acd8a4 100644
--- a/src/app/(dashboard)/[guildId]/layout.tsx
+++ b/src/app/(dashboard)/[guildId]/layout.tsx
@@ -1,3 +1,4 @@
+import { getParsedToken } from "@/actions/auth";
 import { AuthBoundary } from "@/components/AuthBoundary";
 import { GuildImage } from "@/components/GuildImage";
 import { SignInButton } from "@/components/SignInButton";
@@ -5,6 +6,7 @@ import { env } from "@/lib/env";
 import { fetcher } from "@/lib/fetcher";
 import type { Guild } from "@/lib/schemas/guild";
 import type { DynamicRoute } from "@/lib/types";
+import type { Schemas } from "@guildxyz/types";
 import { type PropsWithChildren, Suspense } from "react";
 import { GuildTabs, GuildTabsSkeleton } from "./components/GuildTabs";
 import { JoinButton } from "./components/JoinButton";
@@ -17,6 +19,13 @@ const GuildPage = async ({
   const guild = await fetcher<Guild>(
     `${env.NEXT_PUBLIC_API}/guild/urlName/${guildIdParam}`,
   );
+  const token = await getParsedToken();
+  if (!token) {
+    throw new Error("Failed to authenticate");
+  }
+  const user = await fetcher<Schemas["UserFull"]>(
+    `${env.NEXT_PUBLIC_API}/user/id/${token.userId}`,
+  );
 
   return (
     <main className="py-16">
@@ -34,7 +43,7 @@ const GuildPage = async ({
               </h1>
             </div>
             <AuthBoundary fallback={<SignInButton />}>
-              <JoinButton guild={guild} />
+              <JoinButton guild={guild} user={user} />
             </AuthBoundary>
           </div>
           <p className="line-clamp-3 max-w-prose text-balance text-lg leading-relaxed">
diff --git a/src/app/(dashboard)/explorer/page.tsx b/src/app/(dashboard)/explorer/page.tsx
index 5ae4ba52b2..0e4a4e07ef 100644
--- a/src/app/(dashboard)/explorer/page.tsx
+++ b/src/app/(dashboard)/explorer/page.tsx
@@ -1,4 +1,4 @@
-import { getAuthCookie as getTokenFromCookie } from "@/actions/auth";
+import { getToken } from "@/actions/auth";
 import { AuthBoundary } from "@/components/AuthBoundary";
 import { SignInButton } from "@/components/SignInButton";
 import { env } from "@/lib/env";
@@ -109,16 +109,16 @@ async function YourGuildsSection() {
 }
 
 async function YourGuilds() {
-  const auth = await getTokenFromCookie();
+  const auth = await getToken();
   if (!auth) return;
 
-  const { items: myGuilds } = await getAssociatedGuilds({
-    userId: auth.userId,
+  const { items: associatedGuilds } = await getAssociatedGuilds({
+    userId: auth,
   });
 
-  return myGuilds && myGuilds.length > 0 ? (
+  return associatedGuilds.length > 0 ? (
     <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
-      {myGuilds.map((guild) => (
+      {associatedGuilds.map((guild) => (
         <GuildCard key={guild.id} guild={guild} />
       ))}
     </div>

From e6aac61b8635ba66c74aba321b41b36a4d3d1dfd Mon Sep 17 00:00:00 2001
From: Dominik Stumpf <s.dominik.work@gmail.com>
Date: Mon, 2 Dec 2024 11:40:05 +0100
Subject: [PATCH 25/93] chore: migrate from role-group to page, rename route
 params

---
 src/app/(dashboard)/[guildId]/fetchers.ts     | 28 --------------
 src/app/(dashboard)/[guildId]/page.tsx        | 13 -------
 .../[roleGroupUrlName]}/page.tsx              | 37 +++++--------------
 .../{[guildId] => [guildUrlName]}/actions.ts  |  2 +-
 .../components/CreateRoleGroup.tsx            |  2 +-
 .../components/GuildTabs.tsx                  |  0
 .../components/JoinButton.tsx                 |  0
 .../components/RoleGroupNavLink.tsx           |  0
 .../(dashboard)/[guildUrlName]/fetchers.ts    | 29 +++++++++++++++
 .../{[guildId] => [guildUrlName]}/layout.tsx  | 19 +++++-----
 src/app/(dashboard)/[guildUrlName]/page.tsx   | 10 +++++
 src/lib/fetcher.ts                            |  7 ++++
 12 files changed, 66 insertions(+), 81 deletions(-)
 delete mode 100644 src/app/(dashboard)/[guildId]/fetchers.ts
 delete mode 100644 src/app/(dashboard)/[guildId]/page.tsx
 rename src/app/(dashboard)/{[guildId]/[roleGroupId] => [guildUrlName]/[roleGroupUrlName]}/page.tsx (74%)
 rename src/app/(dashboard)/{[guildId] => [guildUrlName]}/actions.ts (92%)
 rename src/app/(dashboard)/{[guildId] => [guildUrlName]}/components/CreateRoleGroup.tsx (98%)
 rename src/app/(dashboard)/{[guildId] => [guildUrlName]}/components/GuildTabs.tsx (100%)
 rename src/app/(dashboard)/{[guildId] => [guildUrlName]}/components/JoinButton.tsx (100%)
 rename src/app/(dashboard)/{[guildId] => [guildUrlName]}/components/RoleGroupNavLink.tsx (100%)
 create mode 100644 src/app/(dashboard)/[guildUrlName]/fetchers.ts
 rename src/app/(dashboard)/{[guildId] => [guildUrlName]}/layout.tsx (82%)
 create mode 100644 src/app/(dashboard)/[guildUrlName]/page.tsx

diff --git a/src/app/(dashboard)/[guildId]/fetchers.ts b/src/app/(dashboard)/[guildId]/fetchers.ts
deleted file mode 100644
index fa162d6237..0000000000
--- a/src/app/(dashboard)/[guildId]/fetchers.ts
+++ /dev/null
@@ -1,28 +0,0 @@
-import { env } from "@/lib/env";
-import type { Guild } from "@/lib/schemas/guild";
-import type { RoleGroup } from "@/lib/schemas/roleGroup";
-import type { PaginatedResponse } from "@/lib/types";
-
-export const getGuild = async (urlName: string) => {
-  const res = await fetch(`${env.NEXT_PUBLIC_API}/guild/urlName/${urlName}`, {
-    next: {
-      tags: [`guild-${urlName}`],
-    },
-  });
-  const data: Guild = await res.json();
-  return data;
-};
-
-export const getRoleGroups = async (guildId: string) => {
-  const res = await fetch(
-    `${env.NEXT_PUBLIC_API}/role-group/search?customQuery=@guildId:{${guildId}}&pageSize=${Number.MAX_SAFE_INTEGER}`,
-    {
-      next: {
-        tags: [`role-groups-${guildId}`],
-        revalidate: 3600,
-      },
-    },
-  );
-  const data: PaginatedResponse<RoleGroup> = await res.json();
-  return data.items;
-};
diff --git a/src/app/(dashboard)/[guildId]/page.tsx b/src/app/(dashboard)/[guildId]/page.tsx
deleted file mode 100644
index e0640bc9bb..0000000000
--- a/src/app/(dashboard)/[guildId]/page.tsx
+++ /dev/null
@@ -1,13 +0,0 @@
-import type { DynamicRoute } from "@/lib/types";
-import GuildPage from "./[roleGroupId]/page";
-
-const DefaultGuildPage = async ({
-  params,
-}: DynamicRoute<{ guildId: string }>) => {
-  const { guildId: urlName } = await params;
-  //const guild = await getGuild(urlName);
-  //return `Default guild page - ${guild.name}`;
-  return <GuildPage params={{ guildId: urlName, roleGroupId: "" }} />;
-};
-
-export default DefaultGuildPage;
diff --git a/src/app/(dashboard)/[guildId]/[roleGroupId]/page.tsx b/src/app/(dashboard)/[guildUrlName]/[roleGroupUrlName]/page.tsx
similarity index 74%
rename from src/app/(dashboard)/[guildId]/[roleGroupId]/page.tsx
rename to src/app/(dashboard)/[guildUrlName]/[roleGroupUrlName]/page.tsx
index a3ddc0d062..c95dc40ad2 100644
--- a/src/app/(dashboard)/[guildId]/[roleGroupId]/page.tsx
+++ b/src/app/(dashboard)/[guildUrlName]/[roleGroupUrlName]/page.tsx
@@ -7,24 +7,25 @@ import type { Guild } from "@/lib/schemas/guild";
 import type { Role } from "@/lib/schemas/role";
 import type { RoleGroup } from "@/lib/schemas/roleGroup";
 import type { DynamicRoute, PaginatedResponse } from "@/lib/types";
+import type { Schemas } from "@guildxyz/types";
 import { Lock } from "@phosphor-icons/react/dist/ssr";
 
 const RoleGroupPage = async ({
   params,
-}: DynamicRoute<{ roleGroupId: string; guildId: string }>) => {
-  const { roleGroupId: roleGroupIdParam, guildId: guildIdParam } = await params;
+}: DynamicRoute<{ roleGroupUrlName: string; guildUrlName: string }>) => {
+  const { roleGroupUrlName, guildUrlName } = await params;
   const guild = (await (
-    await fetch(`${env.NEXT_PUBLIC_API}/guild/urlName/${guildIdParam}`)
+    await fetch(`${env.NEXT_PUBLIC_API}/guild/urlName/${guildUrlName}`)
   ).json()) as Guild;
   const paginatedRoleGroup = (await (
     await fetch(
-      `${env.NEXT_PUBLIC_API}/role-group/search?customQuery=@guildId:{${guild.id}}&pageSize=${Number.MAX_SAFE_INTEGER}`,
+      `${env.NEXT_PUBLIC_API}/page/search?customQuery=@guildId:{${guild.id}}&pageSize=${Number.MAX_SAFE_INTEGER}`,
     )
   ).json()) as PaginatedResponse<RoleGroup>;
   const roleGroups = paginatedRoleGroup.items;
   const roleGroup = roleGroups.find(
     // @ts-expect-error
-    (rg) => rg.urlName === roleGroupIdParam || rg.id === guild.homeRoleGroupId,
+    (rg) => rg.urlName === roleGroupUrlName || rg.id === guild.homeRoleGroupId,
   )!;
   const paginatedRole = await fetcher<PaginatedResponse<Role>>(
     `${env.NEXT_PUBLIC_API}/role/search?customQuery=@guildId:{${guild.id}}&pageSize=${Number.MAX_SAFE_INTEGER}`,
@@ -40,38 +41,18 @@ const RoleGroupPage = async ({
   );
 };
 
-const RE = {
-  id: "aca776be-5a7b-4618-bb7c-1130de066257",
-  createdAt: 1732825819745,
-  updatedAt: 1732825819745,
-  name: "Home - delete",
-  guildId: "2b3330e4-05fa-4949-a80c-2deeb99d100e",
-  urlName: "stars-guild-delete",
-  foreignEntity: "role-group",
-  foreignIdentifier: "1b06e1e7-5bf8-4f55-8e7b-16c5542d10c3",
-  description:
-    'Grants delete access to the "Home" role group in the "Stars Guild" guild',
-  type: "GUILD",
-  permissions: {
-    read: "b62cda4f-27d6-40dc-9625-34a6ce74912a",
-    update: "78ac4c72-cc44-4336-b5cd-e73e93fd86e7",
-    delete: "d713b547-135d-49ab-a9b1-e670ad1871a7",
-  },
-};
-type Reward = typeof RE;
-
 const RoleCard = async ({ role }: { role: Role }) => {
   const rewards = (await Promise.all(
     // @ts-ignore
     role.rewards?.map(({ rewardId }) => {
       const req = `${env.NEXT_PUBLIC_API}/reward/id/${rewardId}`;
       try {
-        return fetcher<Reward>(req);
+        return fetcher<Schemas["RewardFull"]>(req);
       } catch {
         console.error({ rewardId, req });
       }
     }) ?? [],
-  )) as Reward[];
+  )) as Schemas["RewardFull"][];
 
   return (
     <Card className="flex flex-col md:flex-row" key={role.id}>
@@ -114,7 +95,7 @@ const RoleCard = async ({ role }: { role: Role }) => {
   );
 };
 
-const Reward = ({ reward }: { reward: Reward }) => {
+const Reward = ({ reward }: { reward: Schemas["RewardFull"] }) => {
   return (
     <div className="border-b p-4 last:border-b-0">
       <div className="mb-2 font-medium">{reward.name}</div>
diff --git a/src/app/(dashboard)/[guildId]/actions.ts b/src/app/(dashboard)/[guildUrlName]/actions.ts
similarity index 92%
rename from src/app/(dashboard)/[guildId]/actions.ts
rename to src/app/(dashboard)/[guildUrlName]/actions.ts
index 50f0392fc3..910c3c1b0f 100644
--- a/src/app/(dashboard)/[guildId]/actions.ts
+++ b/src/app/(dashboard)/[guildUrlName]/actions.ts
@@ -4,7 +4,7 @@ import { env } from "@/lib/env";
 import { revalidateTag } from "next/cache";
 
 export const revalidateRoleGroups = async (guildId: string) => {
-  revalidateTag(`role-groups-${guildId}`);
+  revalidateTag(`page-${guildId}`);
 };
 
 export const joinGuild = async ({ guildId }: { guildId: string }) => {
diff --git a/src/app/(dashboard)/[guildId]/components/CreateRoleGroup.tsx b/src/app/(dashboard)/[guildUrlName]/components/CreateRoleGroup.tsx
similarity index 98%
rename from src/app/(dashboard)/[guildId]/components/CreateRoleGroup.tsx
rename to src/app/(dashboard)/[guildUrlName]/components/CreateRoleGroup.tsx
index 3018d1d0ea..adbe056497 100644
--- a/src/app/(dashboard)/[guildId]/components/CreateRoleGroup.tsx
+++ b/src/app/(dashboard)/[guildUrlName]/components/CreateRoleGroup.tsx
@@ -98,7 +98,7 @@ const CreateRoleGroupDialogForm = ({
 
       if (!token) throw new Error("Unauthorized"); // TODO: custom errors?
 
-      return fetcher<RoleGroup>(`${env.NEXT_PUBLIC_API}/role-group`, {
+      return fetcher<RoleGroup>(`${env.NEXT_PUBLIC_API}/page`, {
         method: "POST",
         headers: {
           "X-Auth-Token": token,
diff --git a/src/app/(dashboard)/[guildId]/components/GuildTabs.tsx b/src/app/(dashboard)/[guildUrlName]/components/GuildTabs.tsx
similarity index 100%
rename from src/app/(dashboard)/[guildId]/components/GuildTabs.tsx
rename to src/app/(dashboard)/[guildUrlName]/components/GuildTabs.tsx
diff --git a/src/app/(dashboard)/[guildId]/components/JoinButton.tsx b/src/app/(dashboard)/[guildUrlName]/components/JoinButton.tsx
similarity index 100%
rename from src/app/(dashboard)/[guildId]/components/JoinButton.tsx
rename to src/app/(dashboard)/[guildUrlName]/components/JoinButton.tsx
diff --git a/src/app/(dashboard)/[guildId]/components/RoleGroupNavLink.tsx b/src/app/(dashboard)/[guildUrlName]/components/RoleGroupNavLink.tsx
similarity index 100%
rename from src/app/(dashboard)/[guildId]/components/RoleGroupNavLink.tsx
rename to src/app/(dashboard)/[guildUrlName]/components/RoleGroupNavLink.tsx
diff --git a/src/app/(dashboard)/[guildUrlName]/fetchers.ts b/src/app/(dashboard)/[guildUrlName]/fetchers.ts
new file mode 100644
index 0000000000..3d91b4805f
--- /dev/null
+++ b/src/app/(dashboard)/[guildUrlName]/fetchers.ts
@@ -0,0 +1,29 @@
+import { env } from "@/lib/env";
+import { fetcher } from "@/lib/fetcher";
+import type { PaginatedResponse } from "@/lib/types";
+import type { Schemas } from "@guildxyz/types";
+
+export const getGuild = async (urlName: string) => {
+  return await fetcher<Schemas["GuildFull"]>(
+    `${env.NEXT_PUBLIC_API}/guild/urlName/${urlName}`,
+    {
+      next: {
+        tags: [`guild-${urlName}`],
+      },
+    },
+  );
+};
+
+export const getRoleGroups = async (guildId: string) => {
+  return (
+    await fetcher<PaginatedResponse<Schemas["RoleGroupFull"]>>(
+      `${env.NEXT_PUBLIC_API}/page/search?customQuery=@guildId:{${guildId}}&pageSize=${Number.MAX_SAFE_INTEGER}`,
+      {
+        next: {
+          tags: [`page-${guildId}`],
+          revalidate: 3600,
+        },
+      },
+    )
+  ).items;
+};
diff --git a/src/app/(dashboard)/[guildId]/layout.tsx b/src/app/(dashboard)/[guildUrlName]/layout.tsx
similarity index 82%
rename from src/app/(dashboard)/[guildId]/layout.tsx
rename to src/app/(dashboard)/[guildUrlName]/layout.tsx
index ae10acd8a4..e50e749c1d 100644
--- a/src/app/(dashboard)/[guildId]/layout.tsx
+++ b/src/app/(dashboard)/[guildUrlName]/layout.tsx
@@ -14,18 +14,17 @@ import { JoinButton } from "./components/JoinButton";
 const GuildPage = async ({
   params,
   children,
-}: PropsWithChildren<DynamicRoute<{ guildId: string }>>) => {
-  const { guildId: guildIdParam } = await params;
+}: PropsWithChildren<DynamicRoute<{ guildUrlName: string }>>) => {
+  const { guildUrlName } = await params;
   const guild = await fetcher<Guild>(
-    `${env.NEXT_PUBLIC_API}/guild/urlName/${guildIdParam}`,
+    `${env.NEXT_PUBLIC_API}/guild/urlName/${guildUrlName}`,
   );
   const token = await getParsedToken();
-  if (!token) {
-    throw new Error("Failed to authenticate");
-  }
-  const user = await fetcher<Schemas["UserFull"]>(
-    `${env.NEXT_PUBLIC_API}/user/id/${token.userId}`,
-  );
+  const user =
+    token &&
+    (await fetcher<Schemas["UserFull"]>(
+      `${env.NEXT_PUBLIC_API}/user/id/${token.userId}`,
+    ));
 
   return (
     <main className="py-16">
@@ -43,7 +42,7 @@ const GuildPage = async ({
               </h1>
             </div>
             <AuthBoundary fallback={<SignInButton />}>
-              <JoinButton guild={guild} user={user} />
+              {user && <JoinButton guild={guild} user={user} />}
             </AuthBoundary>
           </div>
           <p className="line-clamp-3 max-w-prose text-balance text-lg leading-relaxed">
diff --git a/src/app/(dashboard)/[guildUrlName]/page.tsx b/src/app/(dashboard)/[guildUrlName]/page.tsx
new file mode 100644
index 0000000000..e3516b20f6
--- /dev/null
+++ b/src/app/(dashboard)/[guildUrlName]/page.tsx
@@ -0,0 +1,10 @@
+import type { DynamicRoute } from "@/lib/types";
+import GuildPage from "./[roleGroupUrlName]/page";
+
+const DefaultGuildPage = async ({
+  params,
+}: DynamicRoute<{ guildUrlName: string }>) => {
+  return <GuildPage params={{ ...(await params), roleGroupUrlName: "" }} />;
+};
+
+export default DefaultGuildPage;
diff --git a/src/lib/fetcher.ts b/src/lib/fetcher.ts
index 2a3340bc48..64393cc420 100644
--- a/src/lib/fetcher.ts
+++ b/src/lib/fetcher.ts
@@ -11,6 +11,13 @@ export const fetcher = async <Data = unknown, Error = unknown>(
       ? await response.json()
       : await response.text();
 
+    if (process.env.NODE_ENV === "development") {
+      console.info(
+        `[${new Date().toLocaleTimeString()} - fetcher]: ${resource}`,
+        res,
+      );
+    }
+
     if (!response.ok) {
       if (resource.includes(env.NEXT_PUBLIC_API)) {
         return Promise.reject({

From 915509c6bb825b0711a29689aad8265d0b5b92b4 Mon Sep 17 00:00:00 2001
From: Dominik Stumpf <s.dominik.work@gmail.com>
Date: Mon, 2 Dec 2024 14:27:30 +0100
Subject: [PATCH 26/93] chore: update guild types

---
 package.json                                                | 2 +-
 src/app/(dashboard)/[guildUrlName]/components/GuildTabs.tsx | 4 ++--
 src/app/(dashboard)/[guildUrlName]/fetchers.ts              | 4 ++--
 3 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/package.json b/package.json
index b2c363bc30..f341cf448c 100644
--- a/package.json
+++ b/package.json
@@ -13,7 +13,7 @@
     "build-storybook": "storybook build"
   },
   "dependencies": {
-    "@guildxyz/types": "3.0.4",
+    "@guildxyz/types": "^3.0.8",
     "@hookform/resolvers": "^3.9.1",
     "@phosphor-icons/react": "^2.1.7",
     "@radix-ui/react-avatar": "^1.1.1",
diff --git a/src/app/(dashboard)/[guildUrlName]/components/GuildTabs.tsx b/src/app/(dashboard)/[guildUrlName]/components/GuildTabs.tsx
index c9abb337bd..a806c37835 100644
--- a/src/app/(dashboard)/[guildUrlName]/components/GuildTabs.tsx
+++ b/src/app/(dashboard)/[guildUrlName]/components/GuildTabs.tsx
@@ -3,7 +3,7 @@ import { ScrollArea, ScrollBar } from "@/components/ui/ScrollArea";
 import { Skeleton } from "@/components/ui/Skeleton";
 import { cn } from "@/lib/cssUtils";
 import type { Guild } from "@/lib/schemas/guild";
-import { getRoleGroups } from "../fetchers";
+import { getPages } from "../fetchers";
 import { RoleGroupNavLink } from "./RoleGroupNavLink";
 
 type Props = {
@@ -13,7 +13,7 @@ type Props = {
 const roleGroupOrder = ["Home", "Admin"].reverse();
 
 export const GuildTabs = async ({ guild }: Props) => {
-  const roleGroups = await getRoleGroups(guild.id);
+  const roleGroups = await getPages(guild.id);
 
   return (
     <ScrollArea
diff --git a/src/app/(dashboard)/[guildUrlName]/fetchers.ts b/src/app/(dashboard)/[guildUrlName]/fetchers.ts
index 3d91b4805f..ad86f41cb0 100644
--- a/src/app/(dashboard)/[guildUrlName]/fetchers.ts
+++ b/src/app/(dashboard)/[guildUrlName]/fetchers.ts
@@ -14,9 +14,9 @@ export const getGuild = async (urlName: string) => {
   );
 };
 
-export const getRoleGroups = async (guildId: string) => {
+export const getPages = async (guildId: string) => {
   return (
-    await fetcher<PaginatedResponse<Schemas["RoleGroupFull"]>>(
+    await fetcher<PaginatedResponse<Schemas["PageFull"]>>(
       `${env.NEXT_PUBLIC_API}/page/search?customQuery=@guildId:{${guildId}}&pageSize=${Number.MAX_SAFE_INTEGER}`,
       {
         next: {

From 89415fec7394e8d1fa01195de10eb92747fee891 Mon Sep 17 00:00:00 2001
From: Dominik Stumpf <s.dominik.work@gmail.com>
Date: Mon, 2 Dec 2024 14:30:56 +0100
Subject: [PATCH 27/93] chore: rename roleGroup to page

---
 .../{[roleGroupUrlName] => [pageUrlName]}/page.tsx     | 10 +++++-----
 .../[guildUrlName]/components/GuildTabs.tsx            |  6 +++---
 .../[guildUrlName]/components/RoleGroupNavLink.tsx     |  2 +-
 src/app/(dashboard)/[guildUrlName]/page.tsx            |  4 ++--
 4 files changed, 11 insertions(+), 11 deletions(-)
 rename src/app/(dashboard)/[guildUrlName]/{[roleGroupUrlName] => [pageUrlName]}/page.tsx (92%)

diff --git a/src/app/(dashboard)/[guildUrlName]/[roleGroupUrlName]/page.tsx b/src/app/(dashboard)/[guildUrlName]/[pageUrlName]/page.tsx
similarity index 92%
rename from src/app/(dashboard)/[guildUrlName]/[roleGroupUrlName]/page.tsx
rename to src/app/(dashboard)/[guildUrlName]/[pageUrlName]/page.tsx
index c95dc40ad2..16644c66f6 100644
--- a/src/app/(dashboard)/[guildUrlName]/[roleGroupUrlName]/page.tsx
+++ b/src/app/(dashboard)/[guildUrlName]/[pageUrlName]/page.tsx
@@ -10,10 +10,10 @@ import type { DynamicRoute, PaginatedResponse } from "@/lib/types";
 import type { Schemas } from "@guildxyz/types";
 import { Lock } from "@phosphor-icons/react/dist/ssr";
 
-const RoleGroupPage = async ({
+const GuildPage = async ({
   params,
-}: DynamicRoute<{ roleGroupUrlName: string; guildUrlName: string }>) => {
-  const { roleGroupUrlName, guildUrlName } = await params;
+}: DynamicRoute<{ pageUrlName: string; guildUrlName: string }>) => {
+  const { pageUrlName, guildUrlName } = await params;
   const guild = (await (
     await fetch(`${env.NEXT_PUBLIC_API}/guild/urlName/${guildUrlName}`)
   ).json()) as Guild;
@@ -25,7 +25,7 @@ const RoleGroupPage = async ({
   const roleGroups = paginatedRoleGroup.items;
   const roleGroup = roleGroups.find(
     // @ts-expect-error
-    (rg) => rg.urlName === roleGroupUrlName || rg.id === guild.homeRoleGroupId,
+    (rg) => rg.urlName === pageUrlName || rg.id === guild.homeRoleGroupId,
   )!;
   const paginatedRole = await fetcher<PaginatedResponse<Role>>(
     `${env.NEXT_PUBLIC_API}/role/search?customQuery=@guildId:{${guild.id}}&pageSize=${Number.MAX_SAFE_INTEGER}`,
@@ -107,4 +107,4 @@ const Reward = ({ reward }: { reward: Schemas["RewardFull"] }) => {
   );
 };
 
-export default RoleGroupPage;
+export default GuildPage;
diff --git a/src/app/(dashboard)/[guildUrlName]/components/GuildTabs.tsx b/src/app/(dashboard)/[guildUrlName]/components/GuildTabs.tsx
index a806c37835..24164590aa 100644
--- a/src/app/(dashboard)/[guildUrlName]/components/GuildTabs.tsx
+++ b/src/app/(dashboard)/[guildUrlName]/components/GuildTabs.tsx
@@ -4,7 +4,7 @@ import { Skeleton } from "@/components/ui/Skeleton";
 import { cn } from "@/lib/cssUtils";
 import type { Guild } from "@/lib/schemas/guild";
 import { getPages } from "../fetchers";
-import { RoleGroupNavLink } from "./RoleGroupNavLink";
+import { PageNavLink } from "./RoleGroupNavLink";
 
 type Props = {
   guild: Guild;
@@ -32,7 +32,7 @@ export const GuildTabs = async ({ guild }: Props) => {
             return bIndex - aIndex;
           })
           .map((rg) => (
-            <RoleGroupNavLink
+            <PageNavLink
               key={rg.id}
               href={[guild.urlName, rg.urlName]
                 .filter(Boolean)
@@ -40,7 +40,7 @@ export const GuildTabs = async ({ guild }: Props) => {
                 .join("")}
             >
               {rg.name}
-            </RoleGroupNavLink>
+            </PageNavLink>
           ))}
       </div>
       <ScrollBar orientation="horizontal" className="hidden" />
diff --git a/src/app/(dashboard)/[guildUrlName]/components/RoleGroupNavLink.tsx b/src/app/(dashboard)/[guildUrlName]/components/RoleGroupNavLink.tsx
index dedfdb1cb0..32b327ea29 100644
--- a/src/app/(dashboard)/[guildUrlName]/components/RoleGroupNavLink.tsx
+++ b/src/app/(dashboard)/[guildUrlName]/components/RoleGroupNavLink.tsx
@@ -6,7 +6,7 @@ import Link from "next/link";
 import { usePathname } from "next/navigation";
 import type { PropsWithChildren } from "react";
 
-export const RoleGroupNavLink = ({
+export const PageNavLink = ({
   href,
   children,
 }: PropsWithChildren<{ href: string }>) => {
diff --git a/src/app/(dashboard)/[guildUrlName]/page.tsx b/src/app/(dashboard)/[guildUrlName]/page.tsx
index e3516b20f6..7687289661 100644
--- a/src/app/(dashboard)/[guildUrlName]/page.tsx
+++ b/src/app/(dashboard)/[guildUrlName]/page.tsx
@@ -1,10 +1,10 @@
 import type { DynamicRoute } from "@/lib/types";
-import GuildPage from "./[roleGroupUrlName]/page";
+import GuildPage from "./[pageUrlName]/page";
 
 const DefaultGuildPage = async ({
   params,
 }: DynamicRoute<{ guildUrlName: string }>) => {
-  return <GuildPage params={{ ...(await params), roleGroupUrlName: "" }} />;
+  return <GuildPage params={{ ...(await params), pageUrlName: "" }} />;
 };
 
 export default DefaultGuildPage;

From f7d1e80672626bf6134dce58435cc6a767bb0492 Mon Sep 17 00:00:00 2001
From: Dominik Stumpf <s.dominik.work@gmail.com>
Date: Mon, 2 Dec 2024 15:13:42 +0100
Subject: [PATCH 28/93] chore: delete create role group

---
 .../components/CreateRoleGroup.tsx            | 181 ------------------
 1 file changed, 181 deletions(-)
 delete mode 100644 src/app/(dashboard)/[guildUrlName]/components/CreateRoleGroup.tsx

diff --git a/src/app/(dashboard)/[guildUrlName]/components/CreateRoleGroup.tsx b/src/app/(dashboard)/[guildUrlName]/components/CreateRoleGroup.tsx
deleted file mode 100644
index adbe056497..0000000000
--- a/src/app/(dashboard)/[guildUrlName]/components/CreateRoleGroup.tsx
+++ /dev/null
@@ -1,181 +0,0 @@
-"use client";
-
-import { ImageUploader } from "@/components/ImageUploader";
-import { Button } from "@/components/ui/Button";
-import { Card } from "@/components/ui/Card";
-import {
-  FormControl,
-  FormErrorMessage,
-  FormField,
-  FormItem,
-  FormLabel,
-} from "@/components/ui/Form";
-import { Input } from "@/components/ui/Input";
-import { Label } from "@/components/ui/Label";
-import {
-  ResponsiveDialog,
-  ResponsiveDialogBody,
-  ResponsiveDialogContent,
-  ResponsiveDialogFooter,
-  ResponsiveDialogHeader,
-  ResponsiveDialogTitle,
-  ResponsiveDialogTrigger,
-} from "@/components/ui/ResponsiveDialog";
-import { Textarea } from "@/components/ui/Textarea";
-import { GUILD_AUTH_COOKIE_NAME } from "@/config/constants";
-import { env } from "@/lib/env";
-import { fetcher } from "@/lib/fetcher";
-import { getCookie } from "@/lib/getCookie";
-import {
-  type CreateRoleGroupForm,
-  CreateRoleGroupSchema,
-  type RoleGroup,
-} from "@/lib/schemas/roleGroup";
-import { zodResolver } from "@hookform/resolvers/zod";
-import { CheckCircle, Plus, XCircle } from "@phosphor-icons/react/dist/ssr";
-import { useMutation } from "@tanstack/react-query";
-import { useParams, useRouter } from "next/navigation";
-import { useState } from "react";
-import { FormProvider, useForm } from "react-hook-form";
-import { toast } from "sonner";
-import { revalidateRoleGroups } from "../actions";
-
-type Props = {
-  guildId: string;
-};
-
-export const CreateRoleGroup = ({ guildId }: Props) => {
-  const [open, onOpenChange] = useState(false);
-
-  return (
-    <ResponsiveDialog open={open} onOpenChange={onOpenChange}>
-      <Card className="bg-card-secondary">
-        <ResponsiveDialogTrigger asChild>
-          <Button variant="ghost" leftIcon={<Plus weight="bold" />}>
-            Create page
-          </Button>
-        </ResponsiveDialogTrigger>
-      </Card>
-
-      <ResponsiveDialogContent size="lg">
-        <ResponsiveDialogHeader>
-          <ResponsiveDialogTitle>Create page</ResponsiveDialogTitle>
-        </ResponsiveDialogHeader>
-
-        <CreateRoleGroupDialogForm
-          guildId={guildId}
-          onSuccess={() => onOpenChange(false)}
-        />
-      </ResponsiveDialogContent>
-    </ResponsiveDialog>
-  );
-};
-
-const CreateRoleGroupDialogForm = ({
-  guildId,
-  onSuccess,
-}: {
-  guildId: Props["guildId"];
-  onSuccess: () => void;
-}) => {
-  const form = useForm<CreateRoleGroupForm>({
-    mode: "onTouched",
-    resolver: zodResolver(CreateRoleGroupSchema),
-    defaultValues: {
-      guildId,
-      imageUrl: "",
-      name: "",
-      description: "",
-    },
-  });
-
-  const router = useRouter();
-  const { guildId: guildIdRouteParam } = useParams();
-
-  const { mutate: onSubmit, isPending } = useMutation({
-    mutationFn: async (data: CreateRoleGroupForm) => {
-      const token = getCookie(GUILD_AUTH_COOKIE_NAME);
-
-      if (!token) throw new Error("Unauthorized"); // TODO: custom errors?
-
-      return fetcher<RoleGroup>(`${env.NEXT_PUBLIC_API}/page`, {
-        method: "POST",
-        headers: {
-          "X-Auth-Token": token,
-          "Content-Type": "application/json",
-        },
-        body: JSON.stringify(data),
-      });
-    },
-    onError: (error) => {
-      // TODO: parse the error and display it in a user-friendly way
-      toast("An error occurred", {
-        icon: <XCircle weight="fill" className="text-icon-error" />,
-      });
-      console.error(error);
-    },
-    onSuccess: (res) => {
-      revalidateRoleGroups(res.guildId);
-      onSuccess();
-      toast("Page successfully created", {
-        description: "You're being redirected to it",
-        icon: <CheckCircle weight="fill" className="text-icon-success" />,
-      });
-      router.push(`/${guildIdRouteParam}/${res.urlName}`);
-    },
-  });
-
-  return (
-    <FormProvider {...form}>
-      <ResponsiveDialogBody className="pb-px">
-        <div className="grid gap-4">
-          <div className="grid grid-cols-[theme(space.12)_1fr] gap-2">
-            <Label className="col-span-2">Image and name</Label>
-            <div className="size-12 rounded-full bg-input-background">
-              <ImageUploader
-                onSuccess={(imageUrl) => form.setValue("imageUrl", imageUrl)}
-              />
-            </div>
-            <FormField
-              control={form.control}
-              name="name"
-              render={({ field }) => (
-                <FormItem>
-                  <FormControl>
-                    <Input {...field} size="lg" />
-                  </FormControl>
-                  <FormErrorMessage />
-                </FormItem>
-              )}
-            />
-          </div>
-
-          <FormField
-            control={form.control}
-            name="description"
-            render={({ field: { value, ...field } }) => (
-              <FormItem>
-                <FormLabel>Description</FormLabel>
-                <FormControl>
-                  <Textarea {...field} value={value ?? ""} />
-                </FormControl>
-                <FormErrorMessage />
-              </FormItem>
-            )}
-          />
-        </div>
-      </ResponsiveDialogBody>
-
-      <ResponsiveDialogFooter>
-        <Button
-          colorScheme="success"
-          onClick={form.handleSubmit((data) => onSubmit(data))}
-          isLoading={isPending}
-          loadingText="Creating page"
-        >
-          Create page
-        </Button>
-      </ResponsiveDialogFooter>
-    </FormProvider>
-  );
-};

From 7f8800d8cece585322c530149c03a73ad29af188 Mon Sep 17 00:00:00 2001
From: BrickheadJohnny <92519134+BrickheadJohnny@users.noreply.github.com>
Date: Mon, 2 Dec 2024 17:08:51 +0100
Subject: [PATCH 29/93] feat: RewardCard component (#1574)

* feat: RewardCard component

* cleanup: remove unnecessary space
---
 src/components/rewards/RewardCard.tsx      | 54 ++++++++++++++++++++++
 src/stories/rewards/RewardCard.stories.tsx | 31 +++++++++++++
 2 files changed, 85 insertions(+)
 create mode 100644 src/components/rewards/RewardCard.tsx
 create mode 100644 src/stories/rewards/RewardCard.stories.tsx

diff --git a/src/components/rewards/RewardCard.tsx b/src/components/rewards/RewardCard.tsx
new file mode 100644
index 0000000000..402ba807ac
--- /dev/null
+++ b/src/components/rewards/RewardCard.tsx
@@ -0,0 +1,54 @@
+import { cn } from "@/lib/cssUtils";
+import { QuestionMark } from "@phosphor-icons/react/dist/ssr";
+import type { PropsWithChildren, ReactNode } from "react";
+import { Button, type ButtonProps } from "../ui/Button";
+import { Card } from "../ui/Card";
+
+export const RewardCard = ({
+  image,
+  title,
+  description,
+  className,
+  children,
+}: PropsWithChildren<{
+  image?: ReactNode | string;
+  title: string;
+  description?: string;
+  className?: string;
+}>) => (
+  <Card
+    className={cn("flex flex-col gap-4 border-2 p-4 shadow-none", className)}
+  >
+    <div className="grid grid-cols-[theme(space.9)_1fr] items-center gap-x-2 gap-y-0">
+      <div className="row-span-2 flex size-9 shrink-0 items-center justify-center overflow-hidden rounded-full bg-blackAlpha dark:bg-blackAlpha-hard">
+        {!image ? (
+          <QuestionMark weight="bold" className="size-4" />
+        ) : typeof image === "string" ? (
+          <img src={image} alt="Reward icon" />
+        ) : (
+          image
+        )}
+      </div>
+
+      <span
+        className={cn("font-bold text-sm", {
+          "row-span-2": !description,
+        })}
+      >
+        {title}
+      </span>
+
+      {description && (
+        <span className="text-foreground-secondary text-xs">{description}</span>
+      )}
+    </div>
+    {children}
+  </Card>
+);
+
+export const RewardCardButton = ({
+  className,
+  ...props
+}: Omit<ButtonProps, "size">) => (
+  <Button className={cn("mt-auto", className)} size="sm" {...props} />
+);
diff --git a/src/stories/rewards/RewardCard.stories.tsx b/src/stories/rewards/RewardCard.stories.tsx
new file mode 100644
index 0000000000..1cec2709db
--- /dev/null
+++ b/src/stories/rewards/RewardCard.stories.tsx
@@ -0,0 +1,31 @@
+import { RewardCard, RewardCardButton } from "@/components/rewards/RewardCard";
+import { TooltipProvider } from "@/components/ui/Tooltip";
+import type { Meta, StoryObj } from "@storybook/react";
+
+const RewardCardExample = () => (
+  <RewardCard
+    title="Sample reward"
+    description="Description"
+    className="border-cyan-500"
+  >
+    <RewardCardButton className="bg-cyan-500 hover:bg-cyan-600 active:bg-cyan-700 dark:active:bg-cyan-300 dark:hover:bg-cyan-400">
+      Reward card button
+    </RewardCardButton>
+  </RewardCard>
+);
+
+const meta: Meta<typeof RewardCardExample> = {
+  title: "Rewards/RewardCard",
+  component: RewardCardExample,
+  decorators: (Story) => (
+    <TooltipProvider>
+      <Story />
+    </TooltipProvider>
+  ),
+};
+
+export default meta;
+
+type Story = StoryObj<typeof RewardCardExample>;
+
+export const Default: Story = {};

From 27cbb679668ef4c9cff31876dea4795f1bf51021 Mon Sep 17 00:00:00 2001
From: Dominik Stumpf <s.dominik.work@gmail.com>
Date: Mon, 2 Dec 2024 17:54:25 +0100
Subject: [PATCH 30/93] chore: replace search with batch requests

---
 .../[guildUrlName]/[pageUrlName]/page.tsx     | 71 ++++++++++---------
 src/app/(dashboard)/[guildUrlName]/actions.ts | 16 +++--
 .../[guildUrlName]/components/GuildTabs.tsx   |  8 +--
 .../[guildUrlName]/components/JoinButton.tsx  |  3 +-
 src/app/(dashboard)/[guildUrlName]/layout.tsx |  3 +-
 5 files changed, 54 insertions(+), 47 deletions(-)

diff --git a/src/app/(dashboard)/[guildUrlName]/[pageUrlName]/page.tsx b/src/app/(dashboard)/[guildUrlName]/[pageUrlName]/page.tsx
index 16644c66f6..f1b75889f9 100644
--- a/src/app/(dashboard)/[guildUrlName]/[pageUrlName]/page.tsx
+++ b/src/app/(dashboard)/[guildUrlName]/[pageUrlName]/page.tsx
@@ -3,10 +3,7 @@ import { Card } from "@/components/ui/Card";
 import { ScrollArea } from "@/components/ui/ScrollArea";
 import { env } from "@/lib/env";
 import { fetcher } from "@/lib/fetcher";
-import type { Guild } from "@/lib/schemas/guild";
-import type { Role } from "@/lib/schemas/role";
-import type { RoleGroup } from "@/lib/schemas/roleGroup";
-import type { DynamicRoute, PaginatedResponse } from "@/lib/types";
+import type { DynamicRoute } from "@/lib/types";
 import type { Schemas } from "@guildxyz/types";
 import { Lock } from "@phosphor-icons/react/dist/ssr";
 
@@ -14,23 +11,32 @@ const GuildPage = async ({
   params,
 }: DynamicRoute<{ pageUrlName: string; guildUrlName: string }>) => {
   const { pageUrlName, guildUrlName } = await params;
-  const guild = (await (
-    await fetch(`${env.NEXT_PUBLIC_API}/guild/urlName/${guildUrlName}`)
-  ).json()) as Guild;
-  const paginatedRoleGroup = (await (
-    await fetch(
-      `${env.NEXT_PUBLIC_API}/page/search?customQuery=@guildId:{${guild.id}}&pageSize=${Number.MAX_SAFE_INTEGER}`,
-    )
-  ).json()) as PaginatedResponse<RoleGroup>;
-  const roleGroups = paginatedRoleGroup.items;
-  const roleGroup = roleGroups.find(
-    // @ts-expect-error
-    (rg) => rg.urlName === pageUrlName || rg.id === guild.homeRoleGroupId,
-  )!;
-  const paginatedRole = await fetcher<PaginatedResponse<Role>>(
-    `${env.NEXT_PUBLIC_API}/role/search?customQuery=@guildId:{${guild.id}}&pageSize=${Number.MAX_SAFE_INTEGER}`,
+  const guild = await fetcher<Schemas["GuildFull"]>(
+    `${env.NEXT_PUBLIC_API}/guild/urlName/${guildUrlName}`,
+  );
+  const pages = await fetcher<Schemas["PageFull"][]>(
+    `${env.NEXT_PUBLIC_API}/page/batch`,
+    {
+      method: "POST",
+      body: JSON.stringify({ ids: guild.pages?.map((p) => p.pageId!) ?? [] }),
+      headers: {
+        "Content-Type": "application/json",
+      },
+    },
+  );
+  const page = pages.find((p) => p.urlName === pageUrlName)!;
+  const roles = await fetcher<Schemas["RoleFull"][]>(
+    `${env.NEXT_PUBLIC_API}/role/batch`,
+    {
+      method: "POST",
+      body: JSON.stringify({
+        ids: page.roles?.map((r) => r.roleId!) ?? [],
+      }),
+      headers: {
+        "Content-Type": "application/json",
+      },
+    },
   );
-  const roles = paginatedRole.items.filter((r) => r.groupId === roleGroup.id);
 
   return (
     <div className="my-4 space-y-4">
@@ -41,18 +47,19 @@ const GuildPage = async ({
   );
 };
 
-const RoleCard = async ({ role }: { role: Role }) => {
-  const rewards = (await Promise.all(
-    // @ts-ignore
-    role.rewards?.map(({ rewardId }) => {
-      const req = `${env.NEXT_PUBLIC_API}/reward/id/${rewardId}`;
-      try {
-        return fetcher<Schemas["RewardFull"]>(req);
-      } catch {
-        console.error({ rewardId, req });
-      }
-    }) ?? [],
-  )) as Schemas["RewardFull"][];
+const RoleCard = async ({ role }: { role: Schemas["RoleFull"] }) => {
+  const rewards = await fetcher<Schemas["RewardFull"][]>(
+    `${env.NEXT_PUBLIC_API}/reward/batch`,
+    {
+      method: "POST",
+      body: JSON.stringify({
+        ids: role.rewards?.map((r) => r.rewardId!) ?? [],
+      }),
+      headers: {
+        "Content-Type": "application/json",
+      },
+    },
+  );
 
   return (
     <Card className="flex flex-col md:flex-row" key={role.id}>
diff --git a/src/app/(dashboard)/[guildUrlName]/actions.ts b/src/app/(dashboard)/[guildUrlName]/actions.ts
index 910c3c1b0f..d99e81c650 100644
--- a/src/app/(dashboard)/[guildUrlName]/actions.ts
+++ b/src/app/(dashboard)/[guildUrlName]/actions.ts
@@ -1,13 +1,11 @@
 "use server";
+
 import { fetcherWithAuth } from "@/actions/auth";
 import { env } from "@/lib/env";
-import { revalidateTag } from "next/cache";
-
-export const revalidateRoleGroups = async (guildId: string) => {
-  revalidateTag(`page-${guildId}`);
-};
+import { fetcher } from "@/lib/fetcher";
 
 export const joinGuild = async ({ guildId }: { guildId: string }) => {
+  // the response type might not be suitable for this fetcher
   return fetcherWithAuth(`${env.NEXT_PUBLIC_API}/guild/${guildId}/join`, {
     method: "POST",
   });
@@ -18,3 +16,11 @@ export const leaveGuild = async ({ guildId }: { guildId: string }) => {
     method: "POST",
   });
 };
+
+export const getGuild = async () => {
+  return fetcher(`${env.NEXT_PUBLIC_API}/guild`);
+};
+
+export const getUser = async () => {
+  return fetcherWithAuth(`${env.NEXT_PUBLIC_API}/guild`);
+};
diff --git a/src/app/(dashboard)/[guildUrlName]/components/GuildTabs.tsx b/src/app/(dashboard)/[guildUrlName]/components/GuildTabs.tsx
index 24164590aa..2ef6d4ac97 100644
--- a/src/app/(dashboard)/[guildUrlName]/components/GuildTabs.tsx
+++ b/src/app/(dashboard)/[guildUrlName]/components/GuildTabs.tsx
@@ -2,17 +2,13 @@ import { Card } from "@/components/ui/Card";
 import { ScrollArea, ScrollBar } from "@/components/ui/ScrollArea";
 import { Skeleton } from "@/components/ui/Skeleton";
 import { cn } from "@/lib/cssUtils";
-import type { Guild } from "@/lib/schemas/guild";
+import type { Schemas } from "@guildxyz/types";
 import { getPages } from "../fetchers";
 import { PageNavLink } from "./RoleGroupNavLink";
 
-type Props = {
-  guild: Guild;
-};
-
 const roleGroupOrder = ["Home", "Admin"].reverse();
 
-export const GuildTabs = async ({ guild }: Props) => {
+export const GuildTabs = async ({ guild }: { guild: Schemas["GuildFull"] }) => {
   const roleGroups = await getPages(guild.id);
 
   return (
diff --git a/src/app/(dashboard)/[guildUrlName]/components/JoinButton.tsx b/src/app/(dashboard)/[guildUrlName]/components/JoinButton.tsx
index cf309fd9bc..d1dcffaba5 100644
--- a/src/app/(dashboard)/[guildUrlName]/components/JoinButton.tsx
+++ b/src/app/(dashboard)/[guildUrlName]/components/JoinButton.tsx
@@ -1,13 +1,12 @@
 "use client";
 
 import { Button } from "@/components/ui/Button";
-import type { Guild } from "@/lib/schemas/guild";
 import type { Schemas } from "@guildxyz/types";
 import { joinGuild, leaveGuild } from "../actions";
 
 export const JoinButton = ({
   guild,
-}: { guild: Guild; user: Schemas["UserFull"] }) => {
+}: { guild: Schemas["GuildFull"]; user: Schemas["UserFull"] }) => {
   // @ts-ignore
   const isJoined = !!user.data.guilds?.some(
     // @ts-ignore
diff --git a/src/app/(dashboard)/[guildUrlName]/layout.tsx b/src/app/(dashboard)/[guildUrlName]/layout.tsx
index e50e749c1d..1abf780b88 100644
--- a/src/app/(dashboard)/[guildUrlName]/layout.tsx
+++ b/src/app/(dashboard)/[guildUrlName]/layout.tsx
@@ -4,7 +4,6 @@ import { GuildImage } from "@/components/GuildImage";
 import { SignInButton } from "@/components/SignInButton";
 import { env } from "@/lib/env";
 import { fetcher } from "@/lib/fetcher";
-import type { Guild } from "@/lib/schemas/guild";
 import type { DynamicRoute } from "@/lib/types";
 import type { Schemas } from "@guildxyz/types";
 import { type PropsWithChildren, Suspense } from "react";
@@ -16,7 +15,7 @@ const GuildPage = async ({
   children,
 }: PropsWithChildren<DynamicRoute<{ guildUrlName: string }>>) => {
   const { guildUrlName } = await params;
-  const guild = await fetcher<Guild>(
+  const guild = await fetcher<Schemas["GuildFull"]>(
     `${env.NEXT_PUBLIC_API}/guild/urlName/${guildUrlName}`,
   );
   const token = await getParsedToken();

From bf249a8eb63779c5a8c897e87e62ee384b97073f Mon Sep 17 00:00:00 2001
From: Dominik Stumpf <s.dominik.work@gmail.com>
Date: Mon, 2 Dec 2024 19:04:44 +0100
Subject: [PATCH 31/93] feat: add hydration boundary to guild page

---
 src/app/(dashboard)/[guildUrlName]/actions.ts | 22 +++++--
 .../[guildUrlName]/components/GuildTabs.tsx   |  6 +-
 .../(dashboard)/[guildUrlName]/fetchers.ts    | 29 ---------
 src/app/(dashboard)/[guildUrlName]/layout.tsx | 64 +++++++++++--------
 src/app/(dashboard)/explorer/page.tsx         |  9 +--
 src/lib/getQueryClient.ts                     | 36 +++++++++++
 6 files changed, 97 insertions(+), 69 deletions(-)
 delete mode 100644 src/app/(dashboard)/[guildUrlName]/fetchers.ts
 create mode 100644 src/lib/getQueryClient.ts

diff --git a/src/app/(dashboard)/[guildUrlName]/actions.ts b/src/app/(dashboard)/[guildUrlName]/actions.ts
index d99e81c650..4595c90737 100644
--- a/src/app/(dashboard)/[guildUrlName]/actions.ts
+++ b/src/app/(dashboard)/[guildUrlName]/actions.ts
@@ -3,6 +3,7 @@
 import { fetcherWithAuth } from "@/actions/auth";
 import { env } from "@/lib/env";
 import { fetcher } from "@/lib/fetcher";
+import type { Schemas } from "@guildxyz/types";
 
 export const joinGuild = async ({ guildId }: { guildId: string }) => {
   // the response type might not be suitable for this fetcher
@@ -17,10 +18,23 @@ export const leaveGuild = async ({ guildId }: { guildId: string }) => {
   });
 };
 
-export const getGuild = async () => {
-  return fetcher(`${env.NEXT_PUBLIC_API}/guild`);
+export const getGuild = async ({ guildId }: { guildId: string }) => {
+  return fetcher<Schemas["GuildFull"]>(
+    `${env.NEXT_PUBLIC_API}/guild/id/${guildId}`,
+  );
 };
 
-export const getUser = async () => {
-  return fetcherWithAuth(`${env.NEXT_PUBLIC_API}/guild`);
+export const getPages = async ({ guildId }: { guildId: string }) => {
+  const guild = await getGuild({ guildId });
+  return fetcher<Schemas["PageFull"][]>(`${env.NEXT_PUBLIC_API}/page/batch`, {
+    method: "POST",
+    body: JSON.stringify({ ids: guild.pages?.map((p) => p.pageId!) ?? [] }),
+    headers: {
+      "Content-Type": "application/json",
+    },
+  });
 };
+
+//export const getUser = async () => {
+//  return fetcherWithAuth<Schemas["UserFull"]>(`${env.NEXT_PUBLIC_API}/user`);
+//};
diff --git a/src/app/(dashboard)/[guildUrlName]/components/GuildTabs.tsx b/src/app/(dashboard)/[guildUrlName]/components/GuildTabs.tsx
index 2ef6d4ac97..c7d0fc7cd5 100644
--- a/src/app/(dashboard)/[guildUrlName]/components/GuildTabs.tsx
+++ b/src/app/(dashboard)/[guildUrlName]/components/GuildTabs.tsx
@@ -3,13 +3,13 @@ import { ScrollArea, ScrollBar } from "@/components/ui/ScrollArea";
 import { Skeleton } from "@/components/ui/Skeleton";
 import { cn } from "@/lib/cssUtils";
 import type { Schemas } from "@guildxyz/types";
-import { getPages } from "../fetchers";
+import { getPages } from "../actions";
 import { PageNavLink } from "./RoleGroupNavLink";
 
 const roleGroupOrder = ["Home", "Admin"].reverse();
 
 export const GuildTabs = async ({ guild }: { guild: Schemas["GuildFull"] }) => {
-  const roleGroups = await getPages(guild.id);
+  const pages = await getPages({ guildId: guild.id });
 
   return (
     <ScrollArea
@@ -20,7 +20,7 @@ export const GuildTabs = async ({ guild }: { guild: Schemas["GuildFull"] }) => {
       }}
     >
       <div className="my-4 flex gap-3 px-8">
-        {roleGroups
+        {pages
           .sort((a, b) => {
             const [aIndex, bIndex] = [a, b].map((val) =>
               roleGroupOrder.findIndex((pred) => pred === val.name),
diff --git a/src/app/(dashboard)/[guildUrlName]/fetchers.ts b/src/app/(dashboard)/[guildUrlName]/fetchers.ts
deleted file mode 100644
index ad86f41cb0..0000000000
--- a/src/app/(dashboard)/[guildUrlName]/fetchers.ts
+++ /dev/null
@@ -1,29 +0,0 @@
-import { env } from "@/lib/env";
-import { fetcher } from "@/lib/fetcher";
-import type { PaginatedResponse } from "@/lib/types";
-import type { Schemas } from "@guildxyz/types";
-
-export const getGuild = async (urlName: string) => {
-  return await fetcher<Schemas["GuildFull"]>(
-    `${env.NEXT_PUBLIC_API}/guild/urlName/${urlName}`,
-    {
-      next: {
-        tags: [`guild-${urlName}`],
-      },
-    },
-  );
-};
-
-export const getPages = async (guildId: string) => {
-  return (
-    await fetcher<PaginatedResponse<Schemas["PageFull"]>>(
-      `${env.NEXT_PUBLIC_API}/page/search?customQuery=@guildId:{${guildId}}&pageSize=${Number.MAX_SAFE_INTEGER}`,
-      {
-        next: {
-          tags: [`page-${guildId}`],
-          revalidate: 3600,
-        },
-      },
-    )
-  ).items;
-};
diff --git a/src/app/(dashboard)/[guildUrlName]/layout.tsx b/src/app/(dashboard)/[guildUrlName]/layout.tsx
index 1abf780b88..9448c636ed 100644
--- a/src/app/(dashboard)/[guildUrlName]/layout.tsx
+++ b/src/app/(dashboard)/[guildUrlName]/layout.tsx
@@ -4,13 +4,15 @@ import { GuildImage } from "@/components/GuildImage";
 import { SignInButton } from "@/components/SignInButton";
 import { env } from "@/lib/env";
 import { fetcher } from "@/lib/fetcher";
+import { getQueryClient } from "@/lib/getQueryClient";
 import type { DynamicRoute } from "@/lib/types";
 import type { Schemas } from "@guildxyz/types";
+import { HydrationBoundary, dehydrate } from "@tanstack/react-query";
 import { type PropsWithChildren, Suspense } from "react";
 import { GuildTabs, GuildTabsSkeleton } from "./components/GuildTabs";
 import { JoinButton } from "./components/JoinButton";
 
-const GuildPage = async ({
+const GuildLayout = async ({
   params,
   children,
 }: PropsWithChildren<DynamicRoute<{ guildUrlName: string }>>) => {
@@ -25,38 +27,46 @@ const GuildPage = async ({
       `${env.NEXT_PUBLIC_API}/user/id/${token.userId}`,
     ));
 
+  const queryClient = getQueryClient();
+  void queryClient.prefetchQuery({
+    queryKey: ["catch"],
+    queryFn: () => ({ test: 32 }),
+  });
+
   return (
-    <main className="py-16">
-      <div className="flex flex-col items-stretch pb-4 md:flex-row md:justify-between">
-        <div className="w-full space-y-4">
-          <div className="flex w-full flex-col items-stretch justify-between gap-8 md:flex-row md:items-center">
-            <div className="flex max-w-prose items-center gap-4">
-              <GuildImage
-                name={guild.name}
-                imageUrl={guild.imageUrl}
-                className="size-20 rounded-full border"
-              />
-              <h1 className="text-pretty font-bold font-display text-3xl tracking-tight sm:text-4xl lg:text-5xl">
-                {guild.name}
-              </h1>
+    <HydrationBoundary state={dehydrate(queryClient)}>
+      <main className="py-16">
+        <div className="flex flex-col items-stretch pb-4 md:flex-row md:justify-between">
+          <div className="w-full space-y-4">
+            <div className="flex w-full flex-col items-stretch justify-between gap-8 md:flex-row md:items-center">
+              <div className="flex max-w-prose items-center gap-4">
+                <GuildImage
+                  name={guild.name}
+                  imageUrl={guild.imageUrl}
+                  className="size-20 rounded-full border"
+                />
+                <h1 className="text-pretty font-bold font-display text-3xl tracking-tight sm:text-4xl lg:text-5xl">
+                  {guild.name}
+                </h1>
+              </div>
+              <AuthBoundary fallback={<SignInButton />}>
+                {user && <JoinButton guild={guild} user={user} />}
+              </AuthBoundary>
             </div>
-            <AuthBoundary fallback={<SignInButton />}>
-              {user && <JoinButton guild={guild} user={user} />}
-            </AuthBoundary>
+            <p className="line-clamp-3 max-w-prose text-balance text-lg leading-relaxed">
+              {guild.description}
+            </p>
           </div>
-          <p className="line-clamp-3 max-w-prose text-balance text-lg leading-relaxed">
-            {guild.description}
-          </p>
         </div>
-      </div>
 
-      <Suspense fallback={<GuildTabsSkeleton />}>
-        <GuildTabs guild={guild} />
-      </Suspense>
+        <Suspense fallback={<GuildTabsSkeleton />}>
+          <GuildTabs guild={guild} />
+        </Suspense>
 
-      {children}
-    </main>
+        {children}
+      </main>
+    </HydrationBoundary>
   );
 };
 
-export default GuildPage;
+export default GuildLayout;
diff --git a/src/app/(dashboard)/explorer/page.tsx b/src/app/(dashboard)/explorer/page.tsx
index 0e4a4e07ef..dbe486d584 100644
--- a/src/app/(dashboard)/explorer/page.tsx
+++ b/src/app/(dashboard)/explorer/page.tsx
@@ -3,13 +3,10 @@ import { AuthBoundary } from "@/components/AuthBoundary";
 import { SignInButton } from "@/components/SignInButton";
 import { env } from "@/lib/env";
 import { fetcher } from "@/lib/fetcher";
+import { getQueryClient } from "@/lib/getQueryClient";
 import type { Guild } from "@/lib/schemas/guild";
 import type { PaginatedResponse } from "@/lib/types";
-import {
-  HydrationBoundary,
-  QueryClient,
-  dehydrate,
-} from "@tanstack/react-query";
+import { HydrationBoundary, dehydrate } from "@tanstack/react-query";
 import { Suspense } from "react";
 import { CreateGuildLink } from "./components/CreateGuildLink";
 import { GuildCard, GuildCardSkeleton } from "./components/GuildCard";
@@ -26,7 +23,7 @@ const getAssociatedGuilds = async ({ userId }: { userId: string }) => {
 };
 
 export default async function Explorer() {
-  const queryClient = new QueryClient();
+  const queryClient = getQueryClient();
   await queryClient.prefetchInfiniteQuery({
     queryKey: ["guilds", ""],
     initialPageParam: 1,
diff --git a/src/lib/getQueryClient.ts b/src/lib/getQueryClient.ts
new file mode 100644
index 0000000000..53ca7b26c9
--- /dev/null
+++ b/src/lib/getQueryClient.ts
@@ -0,0 +1,36 @@
+import {
+  QueryClient,
+  defaultShouldDehydrateQuery,
+  isServer,
+} from "@tanstack/react-query";
+
+function makeQueryClient() {
+  return new QueryClient({
+    defaultOptions: {
+      queries: {
+        staleTime: 60 * 1000,
+      },
+      dehydrate: {
+        // include pending queries in dehydration
+        shouldDehydrateQuery: (query) =>
+          defaultShouldDehydrateQuery(query) ||
+          query.state.status === "pending",
+      },
+    },
+  });
+}
+
+let browserQueryClient: QueryClient | undefined = undefined;
+
+export function getQueryClient() {
+  if (isServer) {
+    // Server: always make a new query client
+    return makeQueryClient();
+  }
+  // Browser: make a new query client if we don't already have one
+  // This is very important, so we don't re-make a new client if React
+  // suspends during the initial render. This may not be needed if we
+  // have a suspense boundary BELOW the creation of the query client
+  if (!browserQueryClient) browserQueryClient = makeQueryClient();
+  return browserQueryClient;
+}

From cfc5ed4e7efd04331c2865a060a14f3635468d70 Mon Sep 17 00:00:00 2001
From: Dominik Stumpf <s.dominik.work@gmail.com>
Date: Mon, 2 Dec 2024 19:17:37 +0100
Subject: [PATCH 32/93] refactor: move explorer fetchers to server actions

---
 src/app/(dashboard)/explorer/actions.ts          | 16 ++++++++++++++++
 .../explorer/components/InfiniteScrollGuilds.tsx |  5 +++--
 src/app/(dashboard)/explorer/fetchers.ts         | 13 -------------
 src/app/(dashboard)/explorer/page.tsx            |  4 ++--
 4 files changed, 21 insertions(+), 17 deletions(-)
 create mode 100644 src/app/(dashboard)/explorer/actions.ts
 delete mode 100644 src/app/(dashboard)/explorer/fetchers.ts

diff --git a/src/app/(dashboard)/explorer/actions.ts b/src/app/(dashboard)/explorer/actions.ts
new file mode 100644
index 0000000000..aeba138354
--- /dev/null
+++ b/src/app/(dashboard)/explorer/actions.ts
@@ -0,0 +1,16 @@
+"use server";
+
+import { env } from "@/lib/env";
+import type { Guild } from "@/lib/schemas/guild";
+import type { PaginatedResponse } from "@/lib/types";
+import { fetcher } from "../../../lib/fetcher";
+import { PAGE_SIZE } from "./constants";
+
+export const getGuildSearch = async ({
+  pageParam,
+  search,
+}: { pageParam: number; search: string }) => {
+  return fetcher<PaginatedResponse<Guild>>(
+    `${env.NEXT_PUBLIC_API}/guild/search?page=${pageParam}&pageSize=${PAGE_SIZE}&search=${search}`,
+  );
+};
diff --git a/src/app/(dashboard)/explorer/components/InfiniteScrollGuilds.tsx b/src/app/(dashboard)/explorer/components/InfiniteScrollGuilds.tsx
index 6c565bb219..dc3df58e4b 100644
--- a/src/app/(dashboard)/explorer/components/InfiniteScrollGuilds.tsx
+++ b/src/app/(dashboard)/explorer/components/InfiniteScrollGuilds.tsx
@@ -4,9 +4,9 @@ import { useInfiniteQuery } from "@tanstack/react-query";
 import { useIntersection } from "foxact/use-intersection";
 import { useAtomValue } from "jotai";
 import { useCallback, useEffect } from "react";
+import { getGuildSearch } from "../actions";
 import { searchAtom } from "../atoms";
 import { PAGE_SIZE } from "../constants";
-import { getGuildSearch } from "../fetchers";
 import { GuildCard, GuildCardSkeleton } from "./GuildCard";
 
 export const InfiniteScrollGuilds = () => {
@@ -14,7 +14,8 @@ export const InfiniteScrollGuilds = () => {
   const { data, fetchNextPage, hasNextPage, isFetchingNextPage, isLoading } =
     useInfiniteQuery({
       queryKey: ["guilds", search || ""],
-      queryFn: getGuildSearch(search),
+      queryFn: ({ pageParam }) =>
+        getGuildSearch({ search: search || "", pageParam }),
       initialPageParam: 1,
       staleTime: Number.POSITIVE_INFINITY,
       enabled: search !== undefined,
diff --git a/src/app/(dashboard)/explorer/fetchers.ts b/src/app/(dashboard)/explorer/fetchers.ts
deleted file mode 100644
index b783b5281b..0000000000
--- a/src/app/(dashboard)/explorer/fetchers.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-import { env } from "@/lib/env";
-import type { Guild } from "@/lib/schemas/guild";
-import type { PaginatedResponse } from "@/lib/types";
-import { fetcher } from "../../../lib/fetcher";
-import { PAGE_SIZE } from "./constants";
-
-export const getGuildSearch =
-  (search = "") =>
-  async ({ pageParam }: { pageParam: number }) => {
-    return fetcher<PaginatedResponse<Guild>>(
-      `${env.NEXT_PUBLIC_API}/guild/search?page=${pageParam}&pageSize=${PAGE_SIZE}&search=${search}`,
-    );
-  };
diff --git a/src/app/(dashboard)/explorer/page.tsx b/src/app/(dashboard)/explorer/page.tsx
index dbe486d584..be11b96bca 100644
--- a/src/app/(dashboard)/explorer/page.tsx
+++ b/src/app/(dashboard)/explorer/page.tsx
@@ -8,6 +8,7 @@ import type { Guild } from "@/lib/schemas/guild";
 import type { PaginatedResponse } from "@/lib/types";
 import { HydrationBoundary, dehydrate } from "@tanstack/react-query";
 import { Suspense } from "react";
+import { getGuildSearch } from "./actions";
 import { CreateGuildLink } from "./components/CreateGuildLink";
 import { GuildCard, GuildCardSkeleton } from "./components/GuildCard";
 import { HeaderBackground } from "./components/HeaderBackground";
@@ -15,7 +16,6 @@ import { InfiniteScrollGuilds } from "./components/InfiniteScrollGuilds";
 import { StickyNavbar } from "./components/StickyNavbar";
 import { StickySearch } from "./components/StickySearch";
 import { ACTIVE_SECTION } from "./constants";
-import { getGuildSearch } from "./fetchers";
 
 const getAssociatedGuilds = async ({ userId }: { userId: string }) => {
   const request = `${env.NEXT_PUBLIC_API}/guild/search?page=1&pageSize=${Number.MAX_SAFE_INTEGER}&sortBy=name&reverse=false&customQuery=@owner:{${userId}}`;
@@ -27,7 +27,7 @@ export default async function Explorer() {
   await queryClient.prefetchInfiniteQuery({
     queryKey: ["guilds", ""],
     initialPageParam: 1,
-    queryFn: getGuildSearch(""),
+    queryFn: () => getGuildSearch({ search: "", pageParam: 1 }),
   });
 
   return (

From 5da0b6e737ccc7fc2d9dab33ce5dd85ddcf016ea Mon Sep 17 00:00:00 2001
From: Dominik Stumpf <s.dominik.work@gmail.com>
Date: Mon, 2 Dec 2024 20:41:51 +0100
Subject: [PATCH 33/93] feat: add guild fetcher

---
 package.json                                  |  1 +
 src/actions/auth.ts                           | 14 ----
 .../components/CreateGuildButton.tsx          |  4 +-
 src/lib/env.ts                                |  2 +
 src/lib/fetcher.ts                            | 66 +++++++++++++++++++
 .../{getCookie.ts => getCookieClientSide.ts}  |  4 +-
 6 files changed, 74 insertions(+), 17 deletions(-)
 rename src/lib/{getCookie.ts => getCookieClientSide.ts} (82%)

diff --git a/package.json b/package.json
index f341cf448c..7d11270d1b 100644
--- a/package.json
+++ b/package.json
@@ -85,6 +85,7 @@
     "postcss": "^8",
     "storybook": "^8.4.4",
     "tailwindcss": "^3.4.1",
+    "type-fest": "^4.29.1",
     "typescript": "^5"
   },
   "overrides": {
diff --git a/src/actions/auth.ts b/src/actions/auth.ts
index 88f35a49a2..cef74aaee9 100644
--- a/src/actions/auth.ts
+++ b/src/actions/auth.ts
@@ -2,7 +2,6 @@
 
 import { GUILD_AUTH_COOKIE_NAME } from "@/config/constants";
 import { env } from "@/lib/env";
-import { fetcher } from "@/lib/fetcher";
 import { authSchema, tokenSchema } from "@/lib/schemas/user";
 import { jwtDecode } from "jwt-decode";
 import { cookies } from "next/headers";
@@ -67,16 +66,3 @@ export const getParsedToken = async () => {
   const token = await getToken();
   return token ? tokenSchema.parse(jwtDecode(token)) : undefined;
 };
-
-export const fetcherWithAuth = async <Data = unknown, Error = unknown>(
-  ...[resource, requestInit]: Parameters<typeof fetcher>
-) => {
-  const token = await getToken();
-  if (!token) {
-    throw new Error("failed to retrieve jwt token");
-  }
-  return fetcher<Data, Error>(resource, {
-    ...requestInit,
-    headers: { ...requestInit?.headers, "X-Auth-Token": token },
-  });
-};
diff --git a/src/app/(dashboard)/create-guild/components/CreateGuildButton.tsx b/src/app/(dashboard)/create-guild/components/CreateGuildButton.tsx
index 0295bf9764..a2b969157f 100644
--- a/src/app/(dashboard)/create-guild/components/CreateGuildButton.tsx
+++ b/src/app/(dashboard)/create-guild/components/CreateGuildButton.tsx
@@ -5,7 +5,7 @@ import { Button } from "@/components/ui/Button";
 import { GUILD_AUTH_COOKIE_NAME } from "@/config/constants";
 import { env } from "@/lib/env";
 import { fetcher } from "@/lib/fetcher";
-import { getCookie } from "@/lib/getCookie";
+import { getCookieClientSide } from "@/lib/getCookieClientSide";
 import type { CreateGuildForm, Guild } from "@/lib/schemas/guild";
 import { CheckCircle, XCircle } from "@phosphor-icons/react/dist/ssr";
 import { useMutation } from "@tanstack/react-query";
@@ -22,7 +22,7 @@ const CreateGuildButton = () => {
 
   const { mutate: onSubmit, isPending } = useMutation({
     mutationFn: async (data: CreateGuildForm) => {
-      const token = getCookie(GUILD_AUTH_COOKIE_NAME);
+      const token = getCookieClientSide(GUILD_AUTH_COOKIE_NAME);
 
       if (!token) throw new Error("Unauthorized"); // TODO: custom errors?
 
diff --git a/src/lib/env.ts b/src/lib/env.ts
index bbbe856ad7..c534652a65 100644
--- a/src/lib/env.ts
+++ b/src/lib/env.ts
@@ -4,6 +4,7 @@ import { z } from "zod";
 export const env = createEnv({
   server: {
     PINATA_ADMIN_JWT: z.string(),
+    LOGGING: z.coerce.boolean(),
   },
   client: {
     NEXT_PUBLIC_API: z.string(),
@@ -13,5 +14,6 @@ export const env = createEnv({
     NEXT_PUBLIC_API: process.env.NEXT_PUBLIC_API_V3,
     PINATA_ADMIN_JWT: process.env.PINATA_ADMIN_JWT,
     NEXT_PUBLIC_PINATA_GATEWAY_URL: process.env.NEXT_PUBLIC_PINATA_GATEWAY_URL,
+    LOGGING: process.env.LOGGING,
   },
 });
diff --git a/src/lib/fetcher.ts b/src/lib/fetcher.ts
index 64393cc420..9bcd1d46a7 100644
--- a/src/lib/fetcher.ts
+++ b/src/lib/fetcher.ts
@@ -1,6 +1,72 @@
+import { getToken } from "@/actions/auth";
+import { GUILD_AUTH_COOKIE_NAME } from "@/config/constants";
+import { isServer } from "@tanstack/react-query";
 import { env } from "./env";
+import { getCookieClientSide } from "./getCookieClientSide";
 import type { ErrorLike } from "./types";
 
+// TODO: include a dedicated logger with severity channels
+const logger = {
+  info: (...args: Parameters<typeof console.info>) => {
+    if (process.env.NODE_ENV === "development" && env.LOGGING) {
+      console.info(`[${new Date().toLocaleTimeString()} - fetcher]:`, ...args);
+    }
+  },
+};
+
+export const fetchGuildApi = async <Data = object, Error = ErrorLike>(
+  ...[pathName, requestInit = {}]: [string, RequestInit]
+) => {
+  if (pathName.startsWith("/")) {
+    throw new Error("`pathName` must not start with slash");
+  }
+  if (pathName.endsWith("/")) {
+    throw new Error("`pathName` must not end with slash");
+  }
+
+  //if (requestInit.auth) {
+  //  const token = isServer
+  //    ? await getToken()
+  //    : getCookieClientSide(GUILD_AUTH_COOKIE_NAME);
+  //  if (!token) {
+  //    throw new Error(
+  //      "failed to retrieve jwt token on auth request initialization",
+  //    );
+  //  }
+  //}
+
+  const token = isServer
+    ? await getToken()
+    : getCookieClientSide(GUILD_AUTH_COOKIE_NAME);
+  if (!token) {
+    throw new Error(
+      "failed to retrieve jwt token on auth request initialization",
+    );
+  }
+
+  const url = new URL(`api/${pathName}`, env.NEXT_PUBLIC_API);
+
+  return fetch(url, {
+    ...requestInit,
+    headers: { ...requestInit?.headers, "X-Auth-Token": token },
+  }).then(async (response: Response) => {
+    const contentType = response.headers.get("content-type");
+    if (!contentType?.includes("application/json")) {
+      Promise.reject({ message: "Guild API failed respond with json" });
+    }
+    const res = await response.json();
+    logger.info(url.toString(), res);
+    if (!response.ok) {
+      return Promise.reject(res as Error);
+    }
+    return res as Data;
+  });
+};
+
+//const fetchGuildApiAuth = (...[pathName, requestInit = {}]: Parameters<typeof fetchGuildApi>) => {
+//  return fetchGuildApi()
+//};
+
 export const fetcher = async <Data = unknown, Error = unknown>(
   resource: string,
   requestInit: RequestInit = {},
diff --git a/src/lib/getCookie.ts b/src/lib/getCookieClientSide.ts
similarity index 82%
rename from src/lib/getCookie.ts
rename to src/lib/getCookieClientSide.ts
index 84b6dea857..c9bdc54c36 100644
--- a/src/lib/getCookie.ts
+++ b/src/lib/getCookieClientSide.ts
@@ -1,4 +1,6 @@
-export const getCookie = (name: string) => {
+"use client";
+
+export const getCookieClientSide = (name: string) => {
   const decodedCookie = decodeURIComponent(document.cookie);
   const cookiesArray = decodedCookie.split(";");
 

From d315dd659ffce908c903ef55d95eb3012906b593 Mon Sep 17 00:00:00 2001
From: Dominik Stumpf <s.dominik.work@gmail.com>
Date: Mon, 2 Dec 2024 20:45:22 +0100
Subject: [PATCH 34/93] chore: add auth fetcher

---
 src/lib/fetcher.ts | 65 ++++++++++++----------------------------------
 1 file changed, 17 insertions(+), 48 deletions(-)

diff --git a/src/lib/fetcher.ts b/src/lib/fetcher.ts
index 9bcd1d46a7..825a4297dc 100644
--- a/src/lib/fetcher.ts
+++ b/src/lib/fetcher.ts
@@ -24,17 +24,6 @@ export const fetchGuildApi = async <Data = object, Error = ErrorLike>(
     throw new Error("`pathName` must not end with slash");
   }
 
-  //if (requestInit.auth) {
-  //  const token = isServer
-  //    ? await getToken()
-  //    : getCookieClientSide(GUILD_AUTH_COOKIE_NAME);
-  //  if (!token) {
-  //    throw new Error(
-  //      "failed to retrieve jwt token on auth request initialization",
-  //    );
-  //  }
-  //}
-
   const token = isServer
     ? await getToken()
     : getCookieClientSide(GUILD_AUTH_COOKIE_NAME);
@@ -46,10 +35,7 @@ export const fetchGuildApi = async <Data = object, Error = ErrorLike>(
 
   const url = new URL(`api/${pathName}`, env.NEXT_PUBLIC_API);
 
-  return fetch(url, {
-    ...requestInit,
-    headers: { ...requestInit?.headers, "X-Auth-Token": token },
-  }).then(async (response: Response) => {
+  return fetch(url, requestInit).then(async (response: Response) => {
     const contentType = response.headers.get("content-type");
     if (!contentType?.includes("application/json")) {
       Promise.reject({ message: "Guild API failed respond with json" });
@@ -59,40 +45,23 @@ export const fetchGuildApi = async <Data = object, Error = ErrorLike>(
     if (!response.ok) {
       return Promise.reject(res as Error);
     }
-    return res as Data;
+    return Promise.resolve(res) as Data;
   });
 };
 
-//const fetchGuildApiAuth = (...[pathName, requestInit = {}]: Parameters<typeof fetchGuildApi>) => {
-//  return fetchGuildApi()
-//};
-
-export const fetcher = async <Data = unknown, Error = unknown>(
-  resource: string,
-  requestInit: RequestInit = {},
-) =>
-  fetch(resource, requestInit).then(async (response: Response) => {
-    const contentType = response.headers.get("content-type");
-    const res = contentType?.includes("json")
-      ? await response.json()
-      : await response.text();
-
-    if (process.env.NODE_ENV === "development") {
-      console.info(
-        `[${new Date().toLocaleTimeString()} - fetcher]: ${resource}`,
-        res,
-      );
-    }
-
-    if (!response.ok) {
-      if (resource.includes(env.NEXT_PUBLIC_API)) {
-        return Promise.reject({
-          error: (res as ErrorLike).error || (res as ErrorLike).message,
-        });
-      }
-
-      return Promise.reject(res as Error);
-    }
-
-    return res as Data;
+export const fetchGuildApiAuth = async (
+  ...[pathName, requestInit = {}]: Parameters<typeof fetchGuildApi>
+) => {
+  const token = isServer
+    ? await getToken()
+    : getCookieClientSide(GUILD_AUTH_COOKIE_NAME);
+  if (!token) {
+    throw new Error(
+      "Failed to retrieve JWT token on auth request initialization.",
+    );
+  }
+  return fetchGuildApi(pathName, {
+    ...requestInit,
+    headers: { ...requestInit?.headers, "X-Auth-Token": token },
   });
+};

From c65bf03407cb41421b4c693bf121814fadf7a082 Mon Sep 17 00:00:00 2001
From: Dominik Stumpf <s.dominik.work@gmail.com>
Date: Mon, 2 Dec 2024 21:19:48 +0100
Subject: [PATCH 35/93] refactor: replace old fetchers

---
 src/actions/auth.ts                           |  10 +-
 src/actions/me.ts                             |  14 ---
 .../[guildUrlName]/[pageUrlName]/page.tsx     |  16 +--
 src/app/(dashboard)/[guildUrlName]/actions.ts |  18 +---
 src/app/(dashboard)/[guildUrlName]/layout.tsx |   6 +-
 .../components/CreateGuildButton.tsx          |   9 +-
 src/app/(dashboard)/explorer/actions.ts       |   6 +-
 src/app/(dashboard)/explorer/page.tsx         |  12 +--
 src/lib/fetchGuildApi.ts                      | 102 ++++++++++++++++++
 src/lib/fetcher.ts                            |  67 ------------
 10 files changed, 127 insertions(+), 133 deletions(-)
 delete mode 100644 src/actions/me.ts
 create mode 100644 src/lib/fetchGuildApi.ts
 delete mode 100644 src/lib/fetcher.ts

diff --git a/src/actions/auth.ts b/src/actions/auth.ts
index cef74aaee9..6e6c0ef4f5 100644
--- a/src/actions/auth.ts
+++ b/src/actions/auth.ts
@@ -2,6 +2,7 @@
 
 import { GUILD_AUTH_COOKIE_NAME } from "@/config/constants";
 import { env } from "@/lib/env";
+import { fetchGuildApi } from "@/lib/fetchGuildApi";
 import { authSchema, tokenSchema } from "@/lib/schemas/user";
 import { jwtDecode } from "jwt-decode";
 import { cookies } from "next/headers";
@@ -18,20 +19,13 @@ export const signIn = async ({
 
   const requestInit = {
     method: "POST",
-    credentials: "include",
-    headers: {
-      "Content-Type": "application/json",
-    },
     body: JSON.stringify({
       message,
       signature,
     }),
   } satisfies RequestInit;
 
-  const signInRes = await fetch(
-    `${env.NEXT_PUBLIC_API}/auth/siwe/login`,
-    requestInit,
-  );
+  const signInRes = await fetchGuildApi("auth/siwe/login", requestInit);
 
   let json: unknown;
   if (signInRes.status === 401) {
diff --git a/src/actions/me.ts b/src/actions/me.ts
deleted file mode 100644
index 21cec9c513..0000000000
--- a/src/actions/me.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-"use server";
-
-import { GUILD_AUTH_COOKIE_NAME } from "@/config/constants";
-import { env } from "@/lib/env";
-import { cookies } from "next/headers";
-
-export async function me() {
-  const token = (await cookies()).get(GUILD_AUTH_COOKIE_NAME);
-  const response = await fetch(`${env.NEXT_PUBLIC_API}/auth/me`, {
-    headers: { "X-Auth-Token": token?.value || "" },
-  });
-
-  return response.json();
-}
diff --git a/src/app/(dashboard)/[guildUrlName]/[pageUrlName]/page.tsx b/src/app/(dashboard)/[guildUrlName]/[pageUrlName]/page.tsx
index f1b75889f9..54fd2a4830 100644
--- a/src/app/(dashboard)/[guildUrlName]/[pageUrlName]/page.tsx
+++ b/src/app/(dashboard)/[guildUrlName]/[pageUrlName]/page.tsx
@@ -2,7 +2,7 @@ import { Button } from "@/components/ui/Button";
 import { Card } from "@/components/ui/Card";
 import { ScrollArea } from "@/components/ui/ScrollArea";
 import { env } from "@/lib/env";
-import { fetcher } from "@/lib/fetcher";
+import { fetchGuildApi } from "@/lib/fetchGuildApi";
 import type { DynamicRoute } from "@/lib/types";
 import type { Schemas } from "@guildxyz/types";
 import { Lock } from "@phosphor-icons/react/dist/ssr";
@@ -11,30 +11,24 @@ const GuildPage = async ({
   params,
 }: DynamicRoute<{ pageUrlName: string; guildUrlName: string }>) => {
   const { pageUrlName, guildUrlName } = await params;
-  const guild = await fetcher<Schemas["GuildFull"]>(
+  const guild = await fetchGuildApi<Schemas["GuildFull"]>(
     `${env.NEXT_PUBLIC_API}/guild/urlName/${guildUrlName}`,
   );
-  const pages = await fetcher<Schemas["PageFull"][]>(
+  const pages = await fetchGuildApi<Schemas["PageFull"][]>(
     `${env.NEXT_PUBLIC_API}/page/batch`,
     {
       method: "POST",
       body: JSON.stringify({ ids: guild.pages?.map((p) => p.pageId!) ?? [] }),
-      headers: {
-        "Content-Type": "application/json",
-      },
     },
   );
   const page = pages.find((p) => p.urlName === pageUrlName)!;
-  const roles = await fetcher<Schemas["RoleFull"][]>(
+  const roles = await fetchGuildApi<Schemas["RoleFull"][]>(
     `${env.NEXT_PUBLIC_API}/role/batch`,
     {
       method: "POST",
       body: JSON.stringify({
         ids: page.roles?.map((r) => r.roleId!) ?? [],
       }),
-      headers: {
-        "Content-Type": "application/json",
-      },
     },
   );
 
@@ -48,7 +42,7 @@ const GuildPage = async ({
 };
 
 const RoleCard = async ({ role }: { role: Schemas["RoleFull"] }) => {
-  const rewards = await fetcher<Schemas["RewardFull"][]>(
+  const rewards = await fetchGuildApi<Schemas["RewardFull"][]>(
     `${env.NEXT_PUBLIC_API}/reward/batch`,
     {
       method: "POST",
diff --git a/src/app/(dashboard)/[guildUrlName]/actions.ts b/src/app/(dashboard)/[guildUrlName]/actions.ts
index 4595c90737..8308f96200 100644
--- a/src/app/(dashboard)/[guildUrlName]/actions.ts
+++ b/src/app/(dashboard)/[guildUrlName]/actions.ts
@@ -1,32 +1,28 @@
 "use server";
 
-import { fetcherWithAuth } from "@/actions/auth";
-import { env } from "@/lib/env";
-import { fetcher } from "@/lib/fetcher";
+import { fetchGuildApiAuth, fetchGuildApi } from "@/lib/fetchGuildApi";
 import type { Schemas } from "@guildxyz/types";
 
 export const joinGuild = async ({ guildId }: { guildId: string }) => {
   // the response type might not be suitable for this fetcher
-  return fetcherWithAuth(`${env.NEXT_PUBLIC_API}/guild/${guildId}/join`, {
+  return fetchGuildApiAuth(`guild/${guildId}/join`, {
     method: "POST",
   });
 };
 
 export const leaveGuild = async ({ guildId }: { guildId: string }) => {
-  return fetcherWithAuth(`${env.NEXT_PUBLIC_API}/guild/${guildId}/leave`, {
+  return fetchGuildApiAuth(`guild/${guildId}/leave`, {
     method: "POST",
   });
 };
 
 export const getGuild = async ({ guildId }: { guildId: string }) => {
-  return fetcher<Schemas["GuildFull"]>(
-    `${env.NEXT_PUBLIC_API}/guild/id/${guildId}`,
-  );
+  return fetchGuildApi<Schemas["GuildFull"]>(`guild/id/${guildId}`);
 };
 
 export const getPages = async ({ guildId }: { guildId: string }) => {
   const guild = await getGuild({ guildId });
-  return fetcher<Schemas["PageFull"][]>(`${env.NEXT_PUBLIC_API}/page/batch`, {
+  return fetchGuildApi<Schemas["PageFull"][]>("page/batch", {
     method: "POST",
     body: JSON.stringify({ ids: guild.pages?.map((p) => p.pageId!) ?? [] }),
     headers: {
@@ -34,7 +30,3 @@ export const getPages = async ({ guildId }: { guildId: string }) => {
     },
   });
 };
-
-//export const getUser = async () => {
-//  return fetcherWithAuth<Schemas["UserFull"]>(`${env.NEXT_PUBLIC_API}/user`);
-//};
diff --git a/src/app/(dashboard)/[guildUrlName]/layout.tsx b/src/app/(dashboard)/[guildUrlName]/layout.tsx
index 9448c636ed..69d9215d74 100644
--- a/src/app/(dashboard)/[guildUrlName]/layout.tsx
+++ b/src/app/(dashboard)/[guildUrlName]/layout.tsx
@@ -3,7 +3,7 @@ import { AuthBoundary } from "@/components/AuthBoundary";
 import { GuildImage } from "@/components/GuildImage";
 import { SignInButton } from "@/components/SignInButton";
 import { env } from "@/lib/env";
-import { fetcher } from "@/lib/fetcher";
+import { fetchGuildApi } from "@/lib/fetchGuildApi";
 import { getQueryClient } from "@/lib/getQueryClient";
 import type { DynamicRoute } from "@/lib/types";
 import type { Schemas } from "@guildxyz/types";
@@ -17,13 +17,13 @@ const GuildLayout = async ({
   children,
 }: PropsWithChildren<DynamicRoute<{ guildUrlName: string }>>) => {
   const { guildUrlName } = await params;
-  const guild = await fetcher<Schemas["GuildFull"]>(
+  const guild = await fetchGuildApi<Schemas["GuildFull"]>(
     `${env.NEXT_PUBLIC_API}/guild/urlName/${guildUrlName}`,
   );
   const token = await getParsedToken();
   const user =
     token &&
-    (await fetcher<Schemas["UserFull"]>(
+    (await fetchGuildApi<Schemas["UserFull"]>(
       `${env.NEXT_PUBLIC_API}/user/id/${token.userId}`,
     ));
 
diff --git a/src/app/(dashboard)/create-guild/components/CreateGuildButton.tsx b/src/app/(dashboard)/create-guild/components/CreateGuildButton.tsx
index a2b969157f..3fa75ca94c 100644
--- a/src/app/(dashboard)/create-guild/components/CreateGuildButton.tsx
+++ b/src/app/(dashboard)/create-guild/components/CreateGuildButton.tsx
@@ -3,8 +3,7 @@
 import { useConfetti } from "@/components/ConfettiProvider";
 import { Button } from "@/components/ui/Button";
 import { GUILD_AUTH_COOKIE_NAME } from "@/config/constants";
-import { env } from "@/lib/env";
-import { fetcher } from "@/lib/fetcher";
+import { fetchGuildApiAuth } from "@/lib/fetchGuildApi";
 import { getCookieClientSide } from "@/lib/getCookieClientSide";
 import type { CreateGuildForm, Guild } from "@/lib/schemas/guild";
 import { CheckCircle, XCircle } from "@phosphor-icons/react/dist/ssr";
@@ -31,12 +30,8 @@ const CreateGuildButton = () => {
         contact: undefined,
       };
 
-      return fetcher<Guild>(`${env.NEXT_PUBLIC_API}/guild`, {
+      return fetchGuildApiAuth<Guild>("guild", {
         method: "POST",
-        headers: {
-          "X-Auth-Token": token,
-          "Content-Type": "application/json",
-        },
         body: JSON.stringify(guild),
       });
     },
diff --git a/src/app/(dashboard)/explorer/actions.ts b/src/app/(dashboard)/explorer/actions.ts
index aeba138354..077ea3f017 100644
--- a/src/app/(dashboard)/explorer/actions.ts
+++ b/src/app/(dashboard)/explorer/actions.ts
@@ -3,14 +3,14 @@
 import { env } from "@/lib/env";
 import type { Guild } from "@/lib/schemas/guild";
 import type { PaginatedResponse } from "@/lib/types";
-import { fetcher } from "../../../lib/fetcher";
 import { PAGE_SIZE } from "./constants";
+import { fetchGuildApi } from "@/lib/fetchGuildApi";
 
 export const getGuildSearch = async ({
   pageParam,
   search,
 }: { pageParam: number; search: string }) => {
-  return fetcher<PaginatedResponse<Guild>>(
-    `${env.NEXT_PUBLIC_API}/guild/search?page=${pageParam}&pageSize=${PAGE_SIZE}&search=${search}`,
+  return fetchGuildApi<PaginatedResponse<Guild>>(
+    `guild/search?page=${pageParam}&pageSize=${PAGE_SIZE}&search=${search}`,
   );
 };
diff --git a/src/app/(dashboard)/explorer/page.tsx b/src/app/(dashboard)/explorer/page.tsx
index be11b96bca..14b2e1ab68 100644
--- a/src/app/(dashboard)/explorer/page.tsx
+++ b/src/app/(dashboard)/explorer/page.tsx
@@ -1,8 +1,6 @@
 import { getToken } from "@/actions/auth";
 import { AuthBoundary } from "@/components/AuthBoundary";
 import { SignInButton } from "@/components/SignInButton";
-import { env } from "@/lib/env";
-import { fetcher } from "@/lib/fetcher";
 import { getQueryClient } from "@/lib/getQueryClient";
 import type { Guild } from "@/lib/schemas/guild";
 import type { PaginatedResponse } from "@/lib/types";
@@ -16,10 +14,12 @@ import { InfiniteScrollGuilds } from "./components/InfiniteScrollGuilds";
 import { StickyNavbar } from "./components/StickyNavbar";
 import { StickySearch } from "./components/StickySearch";
 import { ACTIVE_SECTION } from "./constants";
+import { fetchGuildApi } from "@/lib/fetchGuildApi";
 
 const getAssociatedGuilds = async ({ userId }: { userId: string }) => {
-  const request = `${env.NEXT_PUBLIC_API}/guild/search?page=1&pageSize=${Number.MAX_SAFE_INTEGER}&sortBy=name&reverse=false&customQuery=@owner:{${userId}}`;
-  return fetcher<PaginatedResponse<Guild>>(request);
+  return fetchGuildApi<PaginatedResponse<Guild>>(
+    `guild/search?page=1&pageSize=${Number.MAX_SAFE_INTEGER}&sortBy=name&reverse=false&customQuery=@owner:{${userId}}`,
+  );
 };
 
 export default async function Explorer() {
@@ -136,9 +136,7 @@ async function YourGuilds() {
 function YourGuildsSkeleton() {
   return (
     <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
-      {[...Array(3)].map((_, i) => (
-        <GuildCardSkeleton key={i} />
-      ))}
+      {Array(3).fill(<GuildCardSkeleton />)}
     </div>
   );
 }
diff --git a/src/lib/fetchGuildApi.ts b/src/lib/fetchGuildApi.ts
new file mode 100644
index 0000000000..7ff904e94a
--- /dev/null
+++ b/src/lib/fetchGuildApi.ts
@@ -0,0 +1,102 @@
+import { getToken } from "@/actions/auth";
+import { GUILD_AUTH_COOKIE_NAME } from "@/config/constants";
+import { isServer } from "@tanstack/react-query";
+import { env } from "./env";
+import { getCookieClientSide } from "./getCookieClientSide";
+import type { ErrorLike } from "./types";
+
+// TODO: include a dedicated logger with severity channels
+const logger = {
+  info: (...args: Parameters<typeof console.info>) => {
+    if (process.env.NODE_ENV === "development" && env.LOGGING) {
+      console.info(
+        `[${new Date().toLocaleTimeString()} - fetchGuildApi]:`,
+        ...args,
+      );
+    }
+  },
+};
+
+export const fetchGuildApi = async <Data = object, Error = ErrorLike>(
+  pathName: string,
+  requestInit?: RequestInit,
+) => {
+  if (pathName.startsWith("/")) {
+    throw new Error("`pathName` must not start with slash");
+  }
+  if (pathName.endsWith("/")) {
+    throw new Error("`pathName` must not end with slash");
+  }
+
+  const url = new URL(`api/${pathName}`, env.NEXT_PUBLIC_API);
+  return fetch(url, {
+    ...requestInit,
+    headers: {
+      "Content-Type": "application/json",
+      ...requestInit?.headers,
+    },
+  }).then(async (response: Response) => {
+    const contentType = response.headers.get("content-type");
+    if (!contentType?.includes("application/json")) {
+      Promise.reject({ message: "Guild API failed respond with json" });
+    }
+    const json = await response.json();
+    logger.info(url.toString(), json);
+    if (!response.ok) {
+      return Promise.reject(json as Error);
+    }
+    return Promise.resolve(json as Data);
+  });
+};
+
+export const fetchGuildApiData = async <Data = object, Error = ErrorLike>(
+  pathName: string,
+  requestInit?: RequestInit,
+) => {
+  if (pathName.startsWith("/")) {
+    throw new Error("`pathName` must not start with slash");
+  }
+  if (pathName.endsWith("/")) {
+    throw new Error("`pathName` must not end with slash");
+  }
+
+  const url = new URL(`api/${pathName}`, env.NEXT_PUBLIC_API);
+  return fetch(url, {
+    ...requestInit,
+    headers: {
+      "Content-Type": "application/json",
+      ...requestInit?.headers,
+    },
+  }).then(async (response: Response) => {
+    const contentType = response.headers.get("content-type");
+    if (!contentType?.includes("application/json")) {
+      Promise.reject({ message: "Guild API failed respond with json" });
+    }
+    const json = await response.json();
+    logger.info(url.toString(), json);
+    if (!response.ok) {
+      return Promise.reject(json as Error);
+    }
+    return Promise.resolve(json as Data);
+  });
+};
+
+export const fetchGuildApiAuth = async <Data = object, Error = ErrorLike>(
+  ...[pathName, requestInit = {}]: Parameters<typeof fetchGuildApi>
+) => {
+  const token = isServer
+    ? await getToken()
+    : getCookieClientSide(GUILD_AUTH_COOKIE_NAME);
+  if (!token) {
+    throw new Error(
+      "Failed to retrieve JWT token on auth request initialization.",
+    );
+  }
+  return fetchGuildApi<Data, Error>(pathName, {
+    ...requestInit,
+    headers: {
+      ...requestInit?.headers,
+      "X-Auth-Token": token,
+    },
+  });
+};
diff --git a/src/lib/fetcher.ts b/src/lib/fetcher.ts
deleted file mode 100644
index 825a4297dc..0000000000
--- a/src/lib/fetcher.ts
+++ /dev/null
@@ -1,67 +0,0 @@
-import { getToken } from "@/actions/auth";
-import { GUILD_AUTH_COOKIE_NAME } from "@/config/constants";
-import { isServer } from "@tanstack/react-query";
-import { env } from "./env";
-import { getCookieClientSide } from "./getCookieClientSide";
-import type { ErrorLike } from "./types";
-
-// TODO: include a dedicated logger with severity channels
-const logger = {
-  info: (...args: Parameters<typeof console.info>) => {
-    if (process.env.NODE_ENV === "development" && env.LOGGING) {
-      console.info(`[${new Date().toLocaleTimeString()} - fetcher]:`, ...args);
-    }
-  },
-};
-
-export const fetchGuildApi = async <Data = object, Error = ErrorLike>(
-  ...[pathName, requestInit = {}]: [string, RequestInit]
-) => {
-  if (pathName.startsWith("/")) {
-    throw new Error("`pathName` must not start with slash");
-  }
-  if (pathName.endsWith("/")) {
-    throw new Error("`pathName` must not end with slash");
-  }
-
-  const token = isServer
-    ? await getToken()
-    : getCookieClientSide(GUILD_AUTH_COOKIE_NAME);
-  if (!token) {
-    throw new Error(
-      "failed to retrieve jwt token on auth request initialization",
-    );
-  }
-
-  const url = new URL(`api/${pathName}`, env.NEXT_PUBLIC_API);
-
-  return fetch(url, requestInit).then(async (response: Response) => {
-    const contentType = response.headers.get("content-type");
-    if (!contentType?.includes("application/json")) {
-      Promise.reject({ message: "Guild API failed respond with json" });
-    }
-    const res = await response.json();
-    logger.info(url.toString(), res);
-    if (!response.ok) {
-      return Promise.reject(res as Error);
-    }
-    return Promise.resolve(res) as Data;
-  });
-};
-
-export const fetchGuildApiAuth = async (
-  ...[pathName, requestInit = {}]: Parameters<typeof fetchGuildApi>
-) => {
-  const token = isServer
-    ? await getToken()
-    : getCookieClientSide(GUILD_AUTH_COOKIE_NAME);
-  if (!token) {
-    throw new Error(
-      "Failed to retrieve JWT token on auth request initialization.",
-    );
-  }
-  return fetchGuildApi(pathName, {
-    ...requestInit,
-    headers: { ...requestInit?.headers, "X-Auth-Token": token },
-  });
-};

From 3ed89fcab583c98c183f8b536e2d763744080e5a Mon Sep 17 00:00:00 2001
From: Dominik Stumpf <s.dominik.work@gmail.com>
Date: Mon, 2 Dec 2024 22:04:37 +0100
Subject: [PATCH 36/93] feat: implement fetcher with response

---
 src/lib/fetchGuildApi.ts | 75 +++++++++++++++++++++++++---------------
 1 file changed, 48 insertions(+), 27 deletions(-)

diff --git a/src/lib/fetchGuildApi.ts b/src/lib/fetchGuildApi.ts
index 7ff904e94a..98191e974c 100644
--- a/src/lib/fetchGuildApi.ts
+++ b/src/lib/fetchGuildApi.ts
@@ -17,50 +17,71 @@ const logger = {
   },
 };
 
+type FetchResult<Data, Error> =
+  | { status: "error"; data: Error; response: Response }
+  | { status: "success"; data: Data; response: Response };
+
 export const fetchGuildApi = async <Data = object, Error = ErrorLike>(
-  pathName: string,
+  pathname: string,
   requestInit?: RequestInit,
-) => {
-  if (pathName.startsWith("/")) {
-    throw new Error("`pathName` must not start with slash");
+): Promise<FetchResult<Data, Error>> => {
+  if (pathname.startsWith("/")) {
+    throw new Error("`pathname` must not start with slash");
   }
-  if (pathName.endsWith("/")) {
-    throw new Error("`pathName` must not end with slash");
+  if (pathname.endsWith("/")) {
+    throw new Error("`pathname` must not end with slash");
   }
 
-  const url = new URL(`api/${pathName}`, env.NEXT_PUBLIC_API);
-  return fetch(url, {
+  const url = new URL(`api/${pathname}`, env.NEXT_PUBLIC_API);
+  const response = await fetch(url, {
     ...requestInit,
     headers: {
       "Content-Type": "application/json",
       ...requestInit?.headers,
     },
-  }).then(async (response: Response) => {
-    const contentType = response.headers.get("content-type");
-    if (!contentType?.includes("application/json")) {
-      Promise.reject({ message: "Guild API failed respond with json" });
-    }
-    const json = await response.json();
-    logger.info(url.toString(), json);
-    if (!response.ok) {
-      return Promise.reject(json as Error);
-    }
-    return Promise.resolve(json as Data);
   });
+
+  const contentType = response.headers.get("content-type");
+
+  if (!contentType?.includes("application/json")) {
+    throw new Error("Guild API failed respond with json");
+  }
+
+  let json: unknown;
+  try {
+    json = await response.json();
+  } catch {
+    throw new Error("Failed to parse json from response");
+  }
+
+  logger.info(url.toString(), response.status, json);
+
+  if (!response.ok) {
+    return {
+      status: "error",
+      data: json as Error,
+      response,
+    };
+  }
+  return {
+    status: "success",
+    data: json as Data,
+    response,
+  };
 };
 
 export const fetchGuildApiData = async <Data = object, Error = ErrorLike>(
-  pathName: string,
+  pathname: string,
   requestInit?: RequestInit,
 ) => {
-  if (pathName.startsWith("/")) {
-    throw new Error("`pathName` must not start with slash");
+  if (pathname.startsWith("/")) {
+    throw new Error("`pathname` must not start with slash");
   }
-  if (pathName.endsWith("/")) {
-    throw new Error("`pathName` must not end with slash");
+  if (pathname.endsWith("/")) {
+    throw new Error("`pathname` must not end with slash");
   }
 
-  const url = new URL(`api/${pathName}`, env.NEXT_PUBLIC_API);
+  const url = new URL(`api/${pathname}`, env.NEXT_PUBLIC_API);
   return fetch(url, {
     ...requestInit,
     headers: {
@@ -82,7 +103,7 @@ export const fetchGuildApiData = async <Data = object, Error = ErrorLike>(
 };
 
 export const fetchGuildApiAuth = async <Data = object, Error = ErrorLike>(
-  ...[pathName, requestInit = {}]: Parameters<typeof fetchGuildApi>
+  ...[pathname, requestInit = {}]: Parameters<typeof fetchGuildApi>
 ) => {
   const token = isServer
     ? await getToken()
@@ -92,7 +113,7 @@ export const fetchGuildApiAuth = async <Data = object, Error = ErrorLike>(
       "Failed to retrieve JWT token on auth request initialization.",
     );
   }
-  return fetchGuildApi<Data, Error>(pathName, {
+  return fetchGuildApi<Data, Error>(pathname, {
     ...requestInit,
     headers: {
       ...requestInit?.headers,

From db0db1afe62a851356a38001c2d61f1a9dc02854 Mon Sep 17 00:00:00 2001
From: Dominik Stumpf <s.dominik.work@gmail.com>
Date: Mon, 2 Dec 2024 22:09:28 +0100
Subject: [PATCH 37/93] feat: create different fetch utilities using
 composition

---
 src/lib/fetchGuildApi.ts | 52 +++++++++++++---------------------------
 1 file changed, 16 insertions(+), 36 deletions(-)

diff --git a/src/lib/fetchGuildApi.ts b/src/lib/fetchGuildApi.ts
index 98191e974c..3a9db6c8ff 100644
--- a/src/lib/fetchGuildApi.ts
+++ b/src/lib/fetchGuildApi.ts
@@ -5,6 +5,10 @@ import { env } from "./env";
 import { getCookieClientSide } from "./getCookieClientSide";
 import type { ErrorLike } from "./types";
 
+type FetchResult<Data, Error> =
+  | { status: "error"; data: Error; response: Response }
+  | { status: "success"; data: Data; response: Response };
+
 // TODO: include a dedicated logger with severity channels
 const logger = {
   info: (...args: Parameters<typeof console.info>) => {
@@ -17,10 +21,6 @@ const logger = {
   },
 };
 
-type FetchResult<Data, Error> =
-  | { status: "error"; data: Error; response: Response }
-  | { status: "success"; data: Data; response: Response };
-
 export const fetchGuildApi = async <Data = object, Error = ErrorLike>(
   pathname: string,
   requestInit?: RequestInit,
@@ -70,38 +70,6 @@ export const fetchGuildApi = async <Data = object, Error = ErrorLike>(
   };
 };
 
-export const fetchGuildApiData = async <Data = object, Error = ErrorLike>(
-  pathname: string,
-  requestInit?: RequestInit,
-) => {
-  if (pathname.startsWith("/")) {
-    throw new Error("`pathname` must not start with slash");
-  }
-  if (pathname.endsWith("/")) {
-    throw new Error("`pathname` must not end with slash");
-  }
-
-  const url = new URL(`api/${pathname}`, env.NEXT_PUBLIC_API);
-  return fetch(url, {
-    ...requestInit,
-    headers: {
-      "Content-Type": "application/json",
-      ...requestInit?.headers,
-    },
-  }).then(async (response: Response) => {
-    const contentType = response.headers.get("content-type");
-    if (!contentType?.includes("application/json")) {
-      Promise.reject({ message: "Guild API failed respond with json" });
-    }
-    const json = await response.json();
-    logger.info(url.toString(), json);
-    if (!response.ok) {
-      return Promise.reject(json as Error);
-    }
-    return Promise.resolve(json as Data);
-  });
-};
-
 export const fetchGuildApiAuth = async <Data = object, Error = ErrorLike>(
   ...[pathname, requestInit = {}]: Parameters<typeof fetchGuildApi>
 ) => {
@@ -121,3 +89,15 @@ export const fetchGuildApiAuth = async <Data = object, Error = ErrorLike>(
     },
   });
 };
+
+export const fetchGuildApiData = async <Data = object, Error = ErrorLike>(
+  ...args: Parameters<typeof fetchGuildApi>
+) => {
+  return (await fetchGuildApi<Data, Error>(...args)).data;
+};
+
+export const fetchGuildApiAuthData = async <Data = object, Error = ErrorLike>(
+  ...args: Parameters<typeof fetchGuildApi>
+) => {
+  return (await fetchGuildApiAuth<Data, Error>(...args)).data;
+};

From a4c6cc272548c1d47580bf5711ac09fbf2a8aa64 Mon Sep 17 00:00:00 2001
From: Dominik Stumpf <s.dominik.work@gmail.com>
Date: Mon, 2 Dec 2024 23:13:45 +0100
Subject: [PATCH 38/93] docs: add jsdoc to fetchers

---
 src/lib/fetchGuildApi.ts | 86 +++++++++++++++++++++++++++++++++++-----
 1 file changed, 76 insertions(+), 10 deletions(-)

diff --git a/src/lib/fetchGuildApi.ts b/src/lib/fetchGuildApi.ts
index 3a9db6c8ff..8d57160fd0 100644
--- a/src/lib/fetchGuildApi.ts
+++ b/src/lib/fetchGuildApi.ts
@@ -21,6 +21,36 @@ const logger = {
   },
 };
 
+/**
+ * Fetcher used for creating requests to the v3 backend API.
+ *
+ * This function sends a request to the specified `pathname` of the API and returns
+ * a structured result containing the response, status, and data. It ensures that the API transmission is with valid JSON.
+ *
+ * @template Data - The expected shape of the success response data.
+ * @template Error - The expected shape of the error response data.
+ *
+ * @param pathname - The API endpoint to fetch, without leading or trailing slashes.
+ * @param requestInit - Optional configuration for the fetch request.
+ *
+ * @returns A promise resolving to the fetch result,
+ * containing `status`, `data`, and `response`.
+ *
+ * @example
+ * ```ts
+ * const { data, status, response } = await fetchGuildApi<{ name: string }>('guild');
+ *
+ * if (status === 'error') {
+ *   assert(!response.ok);
+ * } else {
+ *   console.log(data.name);
+ * }
+ * ```
+ *
+ * @throws If `pathname` starts or ends with a slash.
+ * @throws If the API does not respond with JSON.
+ * @throws If the response JSON cannot be parsed.
+ */
 export const fetchGuildApi = async <Data = object, Error = ErrorLike>(
   pathname: string,
   requestInit?: RequestInit,
@@ -70,9 +100,45 @@ export const fetchGuildApi = async <Data = object, Error = ErrorLike>(
   };
 };
 
+/**
+ * Fetcher used for creating authenticated requests to the v3 backend API.
+ *
+ * This function extends `fetchGuildApi` by automatically including an authentication
+ * token in the request headers. The token is retrieved either server-side or client-side
+ * depending on the runtime environment.
+ *
+ * @template Data - The expected shape of the success response data.
+ * @template Error - The expected shape of the error response data.
+ *
+ * @param pathname - The API endpoint to fetch, without leading or trailing slashes.
+ * @param requestInit - Optional configuration for the fetch request.
+ *
+ * @returns A promise resolving to the fetch result,
+ * containing `status`, `data`, and `response`.
+ *
+ * @example
+ * ```ts
+ * const { data, status, response } = await fetchGuildApiAuth<{ user: string }>('user', {
+ *  method: "POST",
+ *  body: JSON.stringify({name: string}),
+ * });
+ *
+ * if (status === 'error') {
+ *   assert(!response.ok);
+ *   console.error(data.message);
+ * } else {
+ *   console.log(data.user);
+ * }
+ * ```
+ *
+ * @throws If `pathname` starts or ends with a slash.
+ * @throws If the API does not respond with JSON.
+ * @throws If the response JSON cannot be parsed.
+ * @throws If the JWT token cannot be retrieved.
+ */
 export const fetchGuildApiAuth = async <Data = object, Error = ErrorLike>(
   ...[pathname, requestInit = {}]: Parameters<typeof fetchGuildApi>
-) => {
+): Promise<FetchResult<Data, Error>> => {
   const token = isServer
     ? await getToken()
     : getCookieClientSide(GUILD_AUTH_COOKIE_NAME);
@@ -90,14 +156,14 @@ export const fetchGuildApiAuth = async <Data = object, Error = ErrorLike>(
   });
 };
 
-export const fetchGuildApiData = async <Data = object, Error = ErrorLike>(
-  ...args: Parameters<typeof fetchGuildApi>
-) => {
-  return (await fetchGuildApi<Data, Error>(...args)).data;
+const unpackFetcher = (fetcher: typeof fetchGuildApi) => {
+  return async <Data = object, Error = ErrorLike>(
+    ...args: Parameters<typeof fetchGuildApi>
+  ) => {
+    const { data, status } = await fetcher<Data, Error>(...args);
+    return status === "error" ? Promise.reject(data) : data;
+  };
 };
 
-export const fetchGuildApiAuthData = async <Data = object, Error = ErrorLike>(
-  ...args: Parameters<typeof fetchGuildApi>
-) => {
-  return (await fetchGuildApiAuth<Data, Error>(...args)).data;
-};
+export const fetchGuildApiData = unpackFetcher(fetchGuildApi);
+export const fetchGuildApiAuthData = unpackFetcher(fetchGuildApiAuth);

From 730d90fe523dbd9c2035c688d780a5f1cbbc1af3 Mon Sep 17 00:00:00 2001
From: Dominik Stumpf <s.dominik.work@gmail.com>
Date: Mon, 2 Dec 2024 23:45:53 +0100
Subject: [PATCH 39/93] refactor: replace all fetcher

---
 src/actions/auth.ts                           | 15 ++------
 .../[guildUrlName]/[pageUrlName]/page.tsx     | 37 ++++++++-----------
 src/app/(dashboard)/[guildUrlName]/actions.ts | 10 ++---
 src/app/(dashboard)/[guildUrlName]/layout.tsx | 11 ++----
 .../components/CreateGuildButton.tsx          |  4 +-
 src/app/(dashboard)/explorer/actions.ts       |  6 +--
 src/app/(dashboard)/explorer/page.tsx         |  4 +-
 src/components/SignInDialog.tsx               |  8 ++--
 8 files changed, 38 insertions(+), 57 deletions(-)

diff --git a/src/actions/auth.ts b/src/actions/auth.ts
index 6e6c0ef4f5..0e5e51838a 100644
--- a/src/actions/auth.ts
+++ b/src/actions/auth.ts
@@ -1,7 +1,6 @@
 "use server";
 
 import { GUILD_AUTH_COOKIE_NAME } from "@/config/constants";
-import { env } from "@/lib/env";
 import { fetchGuildApi } from "@/lib/fetchGuildApi";
 import { authSchema, tokenSchema } from "@/lib/schemas/user";
 import { jwtDecode } from "jwt-decode";
@@ -26,16 +25,10 @@ export const signIn = async ({
   } satisfies RequestInit;
 
   const signInRes = await fetchGuildApi("auth/siwe/login", requestInit);
-
-  let json: unknown;
-  if (signInRes.status === 401) {
-    const registerRes = await fetch(
-      `${env.NEXT_PUBLIC_API}/auth/siwe/register`,
-      requestInit,
-    );
-    json = await registerRes.json();
-  } else {
-    json = await signInRes.json();
+  let json = signInRes.data;
+  if (signInRes.response.status === 401) {
+    const registerRes = await fetchGuildApi("auth/siwe/register", requestInit);
+    json = registerRes.data;
   }
   const authData = authSchema.parse(json);
   const { exp } = tokenSchema.parse(jwtDecode(authData.token));
diff --git a/src/app/(dashboard)/[guildUrlName]/[pageUrlName]/page.tsx b/src/app/(dashboard)/[guildUrlName]/[pageUrlName]/page.tsx
index 54fd2a4830..7883680487 100644
--- a/src/app/(dashboard)/[guildUrlName]/[pageUrlName]/page.tsx
+++ b/src/app/(dashboard)/[guildUrlName]/[pageUrlName]/page.tsx
@@ -1,8 +1,7 @@
 import { Button } from "@/components/ui/Button";
 import { Card } from "@/components/ui/Card";
 import { ScrollArea } from "@/components/ui/ScrollArea";
-import { env } from "@/lib/env";
-import { fetchGuildApi } from "@/lib/fetchGuildApi";
+import { fetchGuildApiData } from "@/lib/fetchGuildApi";
 import type { DynamicRoute } from "@/lib/types";
 import type { Schemas } from "@guildxyz/types";
 import { Lock } from "@phosphor-icons/react/dist/ssr";
@@ -11,26 +10,20 @@ const GuildPage = async ({
   params,
 }: DynamicRoute<{ pageUrlName: string; guildUrlName: string }>) => {
   const { pageUrlName, guildUrlName } = await params;
-  const guild = await fetchGuildApi<Schemas["GuildFull"]>(
-    `${env.NEXT_PUBLIC_API}/guild/urlName/${guildUrlName}`,
-  );
-  const pages = await fetchGuildApi<Schemas["PageFull"][]>(
-    `${env.NEXT_PUBLIC_API}/page/batch`,
-    {
-      method: "POST",
-      body: JSON.stringify({ ids: guild.pages?.map((p) => p.pageId!) ?? [] }),
-    },
+  const guild = await fetchGuildApiData<Schemas["GuildFull"]>(
+    `guild/urlName/${guildUrlName}`,
   );
+  const pages = await fetchGuildApiData<Schemas["PageFull"][]>("page/batch", {
+    method: "POST",
+    body: JSON.stringify({ ids: guild.pages?.map((p) => p.pageId!) ?? [] }),
+  });
   const page = pages.find((p) => p.urlName === pageUrlName)!;
-  const roles = await fetchGuildApi<Schemas["RoleFull"][]>(
-    `${env.NEXT_PUBLIC_API}/role/batch`,
-    {
-      method: "POST",
-      body: JSON.stringify({
-        ids: page.roles?.map((r) => r.roleId!) ?? [],
-      }),
-    },
-  );
+  const roles = await fetchGuildApiData<Schemas["RoleFull"][]>("role/batch", {
+    method: "POST",
+    body: JSON.stringify({
+      ids: page.roles?.map((r) => r.roleId!) ?? [],
+    }),
+  });
 
   return (
     <div className="my-4 space-y-4">
@@ -42,8 +35,8 @@ const GuildPage = async ({
 };
 
 const RoleCard = async ({ role }: { role: Schemas["RoleFull"] }) => {
-  const rewards = await fetchGuildApi<Schemas["RewardFull"][]>(
-    `${env.NEXT_PUBLIC_API}/reward/batch`,
+  const rewards = await fetchGuildApiData<Schemas["RewardFull"][]>(
+    "reward/batch",
     {
       method: "POST",
       body: JSON.stringify({
diff --git a/src/app/(dashboard)/[guildUrlName]/actions.ts b/src/app/(dashboard)/[guildUrlName]/actions.ts
index 8308f96200..4e61f45ed0 100644
--- a/src/app/(dashboard)/[guildUrlName]/actions.ts
+++ b/src/app/(dashboard)/[guildUrlName]/actions.ts
@@ -1,28 +1,28 @@
 "use server";
 
-import { fetchGuildApiAuth, fetchGuildApi } from "@/lib/fetchGuildApi";
+import { fetchGuildApiAuthData, fetchGuildApiData } from "@/lib/fetchGuildApi";
 import type { Schemas } from "@guildxyz/types";
 
 export const joinGuild = async ({ guildId }: { guildId: string }) => {
   // the response type might not be suitable for this fetcher
-  return fetchGuildApiAuth(`guild/${guildId}/join`, {
+  return fetchGuildApiAuthData(`guild/${guildId}/join`, {
     method: "POST",
   });
 };
 
 export const leaveGuild = async ({ guildId }: { guildId: string }) => {
-  return fetchGuildApiAuth(`guild/${guildId}/leave`, {
+  return fetchGuildApiAuthData(`guild/${guildId}/leave`, {
     method: "POST",
   });
 };
 
 export const getGuild = async ({ guildId }: { guildId: string }) => {
-  return fetchGuildApi<Schemas["GuildFull"]>(`guild/id/${guildId}`);
+  return fetchGuildApiData<Schemas["GuildFull"]>(`guild/id/${guildId}`);
 };
 
 export const getPages = async ({ guildId }: { guildId: string }) => {
   const guild = await getGuild({ guildId });
-  return fetchGuildApi<Schemas["PageFull"][]>("page/batch", {
+  return fetchGuildApiData<Schemas["PageFull"][]>("page/batch", {
     method: "POST",
     body: JSON.stringify({ ids: guild.pages?.map((p) => p.pageId!) ?? [] }),
     headers: {
diff --git a/src/app/(dashboard)/[guildUrlName]/layout.tsx b/src/app/(dashboard)/[guildUrlName]/layout.tsx
index 69d9215d74..dd7fae9798 100644
--- a/src/app/(dashboard)/[guildUrlName]/layout.tsx
+++ b/src/app/(dashboard)/[guildUrlName]/layout.tsx
@@ -2,8 +2,7 @@ import { getParsedToken } from "@/actions/auth";
 import { AuthBoundary } from "@/components/AuthBoundary";
 import { GuildImage } from "@/components/GuildImage";
 import { SignInButton } from "@/components/SignInButton";
-import { env } from "@/lib/env";
-import { fetchGuildApi } from "@/lib/fetchGuildApi";
+import { fetchGuildApiData } from "@/lib/fetchGuildApi";
 import { getQueryClient } from "@/lib/getQueryClient";
 import type { DynamicRoute } from "@/lib/types";
 import type { Schemas } from "@guildxyz/types";
@@ -17,15 +16,13 @@ const GuildLayout = async ({
   children,
 }: PropsWithChildren<DynamicRoute<{ guildUrlName: string }>>) => {
   const { guildUrlName } = await params;
-  const guild = await fetchGuildApi<Schemas["GuildFull"]>(
-    `${env.NEXT_PUBLIC_API}/guild/urlName/${guildUrlName}`,
+  const guild = await fetchGuildApiData<Schemas["GuildFull"]>(
+    `guild/urlName/${guildUrlName}`,
   );
   const token = await getParsedToken();
   const user =
     token &&
-    (await fetchGuildApi<Schemas["UserFull"]>(
-      `${env.NEXT_PUBLIC_API}/user/id/${token.userId}`,
-    ));
+    (await fetchGuildApiData<Schemas["UserFull"]>(`user/id/${token.userId}`));
 
   const queryClient = getQueryClient();
   void queryClient.prefetchQuery({
diff --git a/src/app/(dashboard)/create-guild/components/CreateGuildButton.tsx b/src/app/(dashboard)/create-guild/components/CreateGuildButton.tsx
index 3fa75ca94c..8647a7c512 100644
--- a/src/app/(dashboard)/create-guild/components/CreateGuildButton.tsx
+++ b/src/app/(dashboard)/create-guild/components/CreateGuildButton.tsx
@@ -3,7 +3,7 @@
 import { useConfetti } from "@/components/ConfettiProvider";
 import { Button } from "@/components/ui/Button";
 import { GUILD_AUTH_COOKIE_NAME } from "@/config/constants";
-import { fetchGuildApiAuth } from "@/lib/fetchGuildApi";
+import { fetchGuildApiAuthData } from "@/lib/fetchGuildApi";
 import { getCookieClientSide } from "@/lib/getCookieClientSide";
 import type { CreateGuildForm, Guild } from "@/lib/schemas/guild";
 import { CheckCircle, XCircle } from "@phosphor-icons/react/dist/ssr";
@@ -30,7 +30,7 @@ const CreateGuildButton = () => {
         contact: undefined,
       };
 
-      return fetchGuildApiAuth<Guild>("guild", {
+      return fetchGuildApiAuthData<Guild>("guild", {
         method: "POST",
         body: JSON.stringify(guild),
       });
diff --git a/src/app/(dashboard)/explorer/actions.ts b/src/app/(dashboard)/explorer/actions.ts
index 077ea3f017..6e0334e3b4 100644
--- a/src/app/(dashboard)/explorer/actions.ts
+++ b/src/app/(dashboard)/explorer/actions.ts
@@ -1,16 +1,14 @@
 "use server";
-
-import { env } from "@/lib/env";
+import { fetchGuildApiData } from "@/lib/fetchGuildApi";
 import type { Guild } from "@/lib/schemas/guild";
 import type { PaginatedResponse } from "@/lib/types";
 import { PAGE_SIZE } from "./constants";
-import { fetchGuildApi } from "@/lib/fetchGuildApi";
 
 export const getGuildSearch = async ({
   pageParam,
   search,
 }: { pageParam: number; search: string }) => {
-  return fetchGuildApi<PaginatedResponse<Guild>>(
+  return fetchGuildApiData<PaginatedResponse<Guild>>(
     `guild/search?page=${pageParam}&pageSize=${PAGE_SIZE}&search=${search}`,
   );
 };
diff --git a/src/app/(dashboard)/explorer/page.tsx b/src/app/(dashboard)/explorer/page.tsx
index 14b2e1ab68..1f18c16353 100644
--- a/src/app/(dashboard)/explorer/page.tsx
+++ b/src/app/(dashboard)/explorer/page.tsx
@@ -1,6 +1,7 @@
 import { getToken } from "@/actions/auth";
 import { AuthBoundary } from "@/components/AuthBoundary";
 import { SignInButton } from "@/components/SignInButton";
+import { fetchGuildApiData } from "@/lib/fetchGuildApi";
 import { getQueryClient } from "@/lib/getQueryClient";
 import type { Guild } from "@/lib/schemas/guild";
 import type { PaginatedResponse } from "@/lib/types";
@@ -14,10 +15,9 @@ import { InfiniteScrollGuilds } from "./components/InfiniteScrollGuilds";
 import { StickyNavbar } from "./components/StickyNavbar";
 import { StickySearch } from "./components/StickySearch";
 import { ACTIVE_SECTION } from "./constants";
-import { fetchGuildApi } from "@/lib/fetchGuildApi";
 
 const getAssociatedGuilds = async ({ userId }: { userId: string }) => {
-  return fetchGuildApi<PaginatedResponse<Guild>>(
+  return fetchGuildApiData<PaginatedResponse<Guild>>(
     `guild/search?page=1&pageSize=${Number.MAX_SAFE_INTEGER}&sortBy=name&reverse=false&customQuery=@owner:{${userId}}`,
   );
 };
diff --git a/src/components/SignInDialog.tsx b/src/components/SignInDialog.tsx
index f3bfc40c55..332c5c39b0 100644
--- a/src/components/SignInDialog.tsx
+++ b/src/components/SignInDialog.tsx
@@ -2,7 +2,7 @@
 
 import { signIn } from "@/actions/auth";
 import { signInDialogOpenAtom } from "@/config/atoms";
-import { env } from "@/lib/env";
+import { fetchGuildApi } from "@/lib/fetchGuildApi";
 import { SignIn, User, Wallet, XCircle } from "@phosphor-icons/react/dist/ssr";
 import { DialogDescription } from "@radix-ui/react-dialog";
 import { useMutation } from "@tanstack/react-query";
@@ -124,9 +124,9 @@ const SignInWithEthereum = () => {
   const { mutate: signInWithEthereum, isPending } = useMutation({
     mutationKey: ["SIWE"],
     mutationFn: async () => {
-      const { nonce } = await fetch(`${env.NEXT_PUBLIC_API}/auth/siwe/nonce`)
-        .then((res) => res.json())
-        .then((data) => z.object({ nonce: z.string() }).parse(data));
+      const { nonce } = await fetchGuildApi("auth/siwe/nonce").then((data) =>
+        z.object({ nonce: z.string() }).parse(data),
+      );
 
       const url = new URL(window.location.href);
 

From dc1becab83270f484acfc1d66aa43ee910a04668 Mon Sep 17 00:00:00 2001
From: Dominik Stumpf <s.dominik.work@gmail.com>
Date: Mon, 2 Dec 2024 23:58:01 +0100
Subject: [PATCH 40/93] feat: add more control over logging

---
 src/app/(dashboard)/[guildUrlName]/[pageUrlName]/page.tsx | 2 +-
 src/lib/env.ts                                            | 6 +++---
 src/lib/fetchGuildApi.ts                                  | 2 +-
 3 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/app/(dashboard)/[guildUrlName]/[pageUrlName]/page.tsx b/src/app/(dashboard)/[guildUrlName]/[pageUrlName]/page.tsx
index 7883680487..14511a2218 100644
--- a/src/app/(dashboard)/[guildUrlName]/[pageUrlName]/page.tsx
+++ b/src/app/(dashboard)/[guildUrlName]/[pageUrlName]/page.tsx
@@ -17,7 +17,7 @@ const GuildPage = async ({
     method: "POST",
     body: JSON.stringify({ ids: guild.pages?.map((p) => p.pageId!) ?? [] }),
   });
-  const page = pages.find((p) => p.urlName === pageUrlName)!;
+  const page = pages?.find((p) => p.urlName === pageUrlName)!;
   const roles = await fetchGuildApiData<Schemas["RoleFull"][]>("role/batch", {
     method: "POST",
     body: JSON.stringify({
diff --git a/src/lib/env.ts b/src/lib/env.ts
index c534652a65..2ae12f90e9 100644
--- a/src/lib/env.ts
+++ b/src/lib/env.ts
@@ -4,11 +4,11 @@ import { z } from "zod";
 export const env = createEnv({
   server: {
     PINATA_ADMIN_JWT: z.string(),
-    LOGGING: z.coerce.boolean(),
+    LOGGING: z.coerce.number().nonnegative().int().max(1),
   },
   client: {
-    NEXT_PUBLIC_API: z.string(),
-    NEXT_PUBLIC_PINATA_GATEWAY_URL: z.string(),
+    NEXT_PUBLIC_API: z.string().url(),
+    NEXT_PUBLIC_PINATA_GATEWAY_URL: z.string().url(),
   },
   runtimeEnv: {
     NEXT_PUBLIC_API: process.env.NEXT_PUBLIC_API_V3,
diff --git a/src/lib/fetchGuildApi.ts b/src/lib/fetchGuildApi.ts
index 8d57160fd0..64763f9adc 100644
--- a/src/lib/fetchGuildApi.ts
+++ b/src/lib/fetchGuildApi.ts
@@ -12,7 +12,7 @@ type FetchResult<Data, Error> =
 // TODO: include a dedicated logger with severity channels
 const logger = {
   info: (...args: Parameters<typeof console.info>) => {
-    if (process.env.NODE_ENV === "development" && env.LOGGING) {
+    if (process.env.NODE_ENV === "development" && env.LOGGING > 0) {
       console.info(
         `[${new Date().toLocaleTimeString()} - fetchGuildApi]:`,
         ...args,

From 957c2ad9e78eb34b06359c67d37102180c7e9828 Mon Sep 17 00:00:00 2001
From: Dominik Stumpf <s.dominik.work@gmail.com>
Date: Tue, 3 Dec 2024 00:05:18 +0100
Subject: [PATCH 41/93] chore: remove useless optional chain

---
 src/app/(dashboard)/[guildUrlName]/[pageUrlName]/page.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/app/(dashboard)/[guildUrlName]/[pageUrlName]/page.tsx b/src/app/(dashboard)/[guildUrlName]/[pageUrlName]/page.tsx
index 14511a2218..7883680487 100644
--- a/src/app/(dashboard)/[guildUrlName]/[pageUrlName]/page.tsx
+++ b/src/app/(dashboard)/[guildUrlName]/[pageUrlName]/page.tsx
@@ -17,7 +17,7 @@ const GuildPage = async ({
     method: "POST",
     body: JSON.stringify({ ids: guild.pages?.map((p) => p.pageId!) ?? [] }),
   });
-  const page = pages?.find((p) => p.urlName === pageUrlName)!;
+  const page = pages.find((p) => p.urlName === pageUrlName)!;
   const roles = await fetchGuildApiData<Schemas["RoleFull"][]>("role/batch", {
     method: "POST",
     body: JSON.stringify({

From 6517ff59eafdd66a07aaf837c3def1ecf934af91 Mon Sep 17 00:00:00 2001
From: Dominik Stumpf <s.dominik.work@gmail.com>
Date: Tue, 3 Dec 2024 02:07:06 +0100
Subject: [PATCH 42/93] feat: add hydration for user and guild

---
 src/actions/auth.ts                           | 12 +++---
 src/app/(dashboard)/[guildUrlName]/actions.ts | 36 ++++++++++++++++--
 src/app/(dashboard)/[guildUrlName]/layout.tsx | 37 +++++++++++--------
 src/app/(dashboard)/[guildUrlName]/options.ts | 29 +++++++++++++++
 src/app/(dashboard)/explorer/page.tsx         |  4 +-
 src/lib/fetchGuildApi.ts                      |  4 +-
 src/lib/types.ts                              |  7 ++++
 7 files changed, 101 insertions(+), 28 deletions(-)
 create mode 100644 src/app/(dashboard)/[guildUrlName]/options.ts

diff --git a/src/actions/auth.ts b/src/actions/auth.ts
index 0e5e51838a..d2b0e9c9d5 100644
--- a/src/actions/auth.ts
+++ b/src/actions/auth.ts
@@ -45,11 +45,13 @@ export const signOut = async (redirectTo?: string) => {
   redirect(redirectTo ?? "/explorer");
 };
 
-export const getToken = async () => {
-  return (await cookies()).get(GUILD_AUTH_COOKIE_NAME)?.value;
+export const tryGetToken = async () => {
+  const token = (await cookies()).get(GUILD_AUTH_COOKIE_NAME)?.value;
+  if (!token) throw new Error("Failed to retrieve token");
+  return token;
 };
 
-export const getParsedToken = async () => {
-  const token = await getToken();
-  return token ? tokenSchema.parse(jwtDecode(token)) : undefined;
+export const tryGetParsedToken = async () => {
+  const token = await tryGetToken();
+  return tokenSchema.parse(jwtDecode(token));
 };
diff --git a/src/app/(dashboard)/[guildUrlName]/actions.ts b/src/app/(dashboard)/[guildUrlName]/actions.ts
index 4e61f45ed0..07e33e795e 100644
--- a/src/app/(dashboard)/[guildUrlName]/actions.ts
+++ b/src/app/(dashboard)/[guildUrlName]/actions.ts
@@ -1,7 +1,15 @@
 "use server";
 
+import { tryGetParsedToken } from "@/actions/auth";
 import { fetchGuildApiAuthData, fetchGuildApiData } from "@/lib/fetchGuildApi";
+import type { ErrorLike, WithIdLike } from "@/lib/types";
 import type { Schemas } from "@guildxyz/types";
+import z from "zod";
+
+const resolveIdLikeRequest = (idLike: string) => {
+  const isId = z.string().uuid().safeParse(idLike).success;
+  return `${isId ? "id" : "urlName"}/${idLike}`;
+};
 
 export const joinGuild = async ({ guildId }: { guildId: string }) => {
   // the response type might not be suitable for this fetcher
@@ -16,12 +24,34 @@ export const leaveGuild = async ({ guildId }: { guildId: string }) => {
   });
 };
 
-export const getGuild = async ({ guildId }: { guildId: string }) => {
-  return fetchGuildApiData<Schemas["GuildFull"]>(`guild/id/${guildId}`);
+export const getGuild = async ({ idLike }: WithIdLike) => {
+  return fetchGuildApiData<Schemas["GuildFull"]>(
+    `guild/${resolveIdLikeRequest(idLike)}`,
+  );
+};
+
+export const getEntity = async <Data = object, Error = ErrorLike>({
+  idLike,
+  entity,
+  auth = false,
+}: { entity: string; idLike: string; auth?: boolean }) => {
+  const pathname = `${entity}/${resolveIdLikeRequest(idLike)}`;
+  return auth
+    ? fetchGuildApiAuthData<Data, Error>(pathname)
+    : fetchGuildApiData<Data, Error>(pathname);
+};
+
+export const getUser = async () => {
+  const { userId } = await tryGetParsedToken();
+  return getEntity<Schemas["UserFull"]>({
+    entity: "user",
+    idLike: userId,
+    auth: true,
+  });
 };
 
 export const getPages = async ({ guildId }: { guildId: string }) => {
-  const guild = await getGuild({ guildId });
+  const guild = await getGuild({ idLike: guildId });
   return fetchGuildApiData<Schemas["PageFull"][]>("page/batch", {
     method: "POST",
     body: JSON.stringify({ ids: guild.pages?.map((p) => p.pageId!) ?? [] }),
diff --git a/src/app/(dashboard)/[guildUrlName]/layout.tsx b/src/app/(dashboard)/[guildUrlName]/layout.tsx
index dd7fae9798..554a92a22a 100644
--- a/src/app/(dashboard)/[guildUrlName]/layout.tsx
+++ b/src/app/(dashboard)/[guildUrlName]/layout.tsx
@@ -1,34 +1,39 @@
-import { getParsedToken } from "@/actions/auth";
 import { AuthBoundary } from "@/components/AuthBoundary";
 import { GuildImage } from "@/components/GuildImage";
 import { SignInButton } from "@/components/SignInButton";
-import { fetchGuildApiData } from "@/lib/fetchGuildApi";
 import { getQueryClient } from "@/lib/getQueryClient";
 import type { DynamicRoute } from "@/lib/types";
-import type { Schemas } from "@guildxyz/types";
 import { HydrationBoundary, dehydrate } from "@tanstack/react-query";
 import { type PropsWithChildren, Suspense } from "react";
 import { GuildTabs, GuildTabsSkeleton } from "./components/GuildTabs";
 import { JoinButton } from "./components/JoinButton";
+import { guildOptions, userOptions } from "./options";
 
 const GuildLayout = async ({
   params,
   children,
 }: PropsWithChildren<DynamicRoute<{ guildUrlName: string }>>) => {
   const { guildUrlName } = await params;
-  const guild = await fetchGuildApiData<Schemas["GuildFull"]>(
-    `guild/urlName/${guildUrlName}`,
-  );
-  const token = await getParsedToken();
-  const user =
-    token &&
-    (await fetchGuildApiData<Schemas["UserFull"]>(`user/id/${token.userId}`));
-
   const queryClient = getQueryClient();
-  void queryClient.prefetchQuery({
-    queryKey: ["catch"],
-    queryFn: () => ({ test: 32 }),
-  });
+
+  await Promise.all([
+    queryClient.prefetchQuery(userOptions()),
+    queryClient.prefetchQuery(
+      guildOptions({
+        idLike: guildUrlName,
+      }),
+    ),
+  ]);
+
+  const guild = queryClient.getQueryData(
+    guildOptions({
+      idLike: guildUrlName,
+    }).queryKey,
+  );
+  if (!guild) {
+    throw new Error("Failed to fetch guild");
+  }
+  const user = queryClient.getQueryState(userOptions().queryKey);
 
   return (
     <HydrationBoundary state={dehydrate(queryClient)}>
@@ -47,7 +52,7 @@ const GuildLayout = async ({
                 </h1>
               </div>
               <AuthBoundary fallback={<SignInButton />}>
-                {user && <JoinButton guild={guild} user={user} />}
+                {user?.data && <JoinButton guild={guild} user={user.data} />}
               </AuthBoundary>
             </div>
             <p className="line-clamp-3 max-w-prose text-balance text-lg leading-relaxed">
diff --git a/src/app/(dashboard)/[guildUrlName]/options.ts b/src/app/(dashboard)/[guildUrlName]/options.ts
new file mode 100644
index 0000000000..9cc252fa29
--- /dev/null
+++ b/src/app/(dashboard)/[guildUrlName]/options.ts
@@ -0,0 +1,29 @@
+import type { ErrorLike } from "@/lib/types";
+import type { Schemas } from "@guildxyz/types";
+import { queryOptions } from "@tanstack/react-query";
+import { getEntity, getUser } from "./actions";
+
+export const entityOptions = <Data = object, Error = ErrorLike>({
+  entity,
+  idLike,
+  ...rest
+}: Parameters<typeof getEntity>[0]) => {
+  return queryOptions<Data, Error>({
+    queryKey: [entity, idLike],
+    queryFn: () => getEntity({ entity, idLike, ...rest }),
+  });
+};
+
+export const guildOptions = ({ idLike }: { idLike: string }) => {
+  return entityOptions<Schemas["GuildFull"]>({
+    entity: "guild",
+    idLike,
+  });
+};
+
+export const userOptions = () => {
+  return queryOptions<Schemas["UserFull"]>({
+    queryKey: ["user"],
+    queryFn: () => getUser(),
+  });
+};
diff --git a/src/app/(dashboard)/explorer/page.tsx b/src/app/(dashboard)/explorer/page.tsx
index 1f18c16353..f92869b9d2 100644
--- a/src/app/(dashboard)/explorer/page.tsx
+++ b/src/app/(dashboard)/explorer/page.tsx
@@ -1,4 +1,4 @@
-import { getToken } from "@/actions/auth";
+import { tryGetToken } from "@/actions/auth";
 import { AuthBoundary } from "@/components/AuthBoundary";
 import { SignInButton } from "@/components/SignInButton";
 import { fetchGuildApiData } from "@/lib/fetchGuildApi";
@@ -106,7 +106,7 @@ async function YourGuildsSection() {
 }
 
 async function YourGuilds() {
-  const auth = await getToken();
+  const auth = await tryGetToken();
   if (!auth) return;
 
   const { items: associatedGuilds } = await getAssociatedGuilds({
diff --git a/src/lib/fetchGuildApi.ts b/src/lib/fetchGuildApi.ts
index 64763f9adc..ec69b01042 100644
--- a/src/lib/fetchGuildApi.ts
+++ b/src/lib/fetchGuildApi.ts
@@ -1,4 +1,4 @@
-import { getToken } from "@/actions/auth";
+import { tryGetToken } from "@/actions/auth";
 import { GUILD_AUTH_COOKIE_NAME } from "@/config/constants";
 import { isServer } from "@tanstack/react-query";
 import { env } from "./env";
@@ -140,7 +140,7 @@ export const fetchGuildApiAuth = async <Data = object, Error = ErrorLike>(
   ...[pathname, requestInit = {}]: Parameters<typeof fetchGuildApi>
 ): Promise<FetchResult<Data, Error>> => {
   const token = isServer
-    ? await getToken()
+    ? await tryGetToken()
     : getCookieClientSide(GUILD_AUTH_COOKIE_NAME);
   if (!token) {
     throw new Error(
diff --git a/src/lib/types.ts b/src/lib/types.ts
index 57b5ecc82c..f8864ff6c4 100644
--- a/src/lib/types.ts
+++ b/src/lib/types.ts
@@ -25,3 +25,10 @@ export type ErrorLike = {
   status?: string;
   error?: string;
 };
+
+/**
+ * Loose type for describing either a
+ * - `urlName`: uri safe identifier alias
+ * - `id`: uuid v4 identifier
+ */
+export type WithIdLike<T = unknown> = T & { idLike: string };

From b215b4eb7ed16668bc693cae2075c63e14515b78 Mon Sep 17 00:00:00 2001
From: Dominik Stumpf <s.dominik.work@gmail.com>
Date: Tue, 3 Dec 2024 02:07:31 +0100
Subject: [PATCH 43/93] chore: expose LOGGING env var to client

---
 src/lib/env.ts | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/lib/env.ts b/src/lib/env.ts
index 2ae12f90e9..a1e70dc329 100644
--- a/src/lib/env.ts
+++ b/src/lib/env.ts
@@ -9,11 +9,13 @@ export const env = createEnv({
   client: {
     NEXT_PUBLIC_API: z.string().url(),
     NEXT_PUBLIC_PINATA_GATEWAY_URL: z.string().url(),
+    NEXT_PUBLIC_LOGGING: z.coerce.number().nonnegative().int().max(1),
   },
   runtimeEnv: {
     NEXT_PUBLIC_API: process.env.NEXT_PUBLIC_API_V3,
     PINATA_ADMIN_JWT: process.env.PINATA_ADMIN_JWT,
     NEXT_PUBLIC_PINATA_GATEWAY_URL: process.env.NEXT_PUBLIC_PINATA_GATEWAY_URL,
+    NEXT_PUBLIC_LOGGING: process.env.LOGGING,
     LOGGING: process.env.LOGGING,
   },
 });

From 2cec819462fbdec48104a0c06258e91184da1e30 Mon Sep 17 00:00:00 2001
From: Dominik Stumpf <s.dominik.work@gmail.com>
Date: Tue, 3 Dec 2024 02:14:53 +0100
Subject: [PATCH 44/93] fix: add default for LOGGING env var and make it shared

---
 src/lib/env.ts | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/lib/env.ts b/src/lib/env.ts
index a1e70dc329..17cd757fc7 100644
--- a/src/lib/env.ts
+++ b/src/lib/env.ts
@@ -4,18 +4,18 @@ import { z } from "zod";
 export const env = createEnv({
   server: {
     PINATA_ADMIN_JWT: z.string(),
-    LOGGING: z.coerce.number().nonnegative().int().max(1),
+  },
+  shared: {
+    LOGGING: z.coerce.number().nonnegative().int().max(1).default(0),
   },
   client: {
     NEXT_PUBLIC_API: z.string().url(),
     NEXT_PUBLIC_PINATA_GATEWAY_URL: z.string().url(),
-    NEXT_PUBLIC_LOGGING: z.coerce.number().nonnegative().int().max(1),
   },
   runtimeEnv: {
     NEXT_PUBLIC_API: process.env.NEXT_PUBLIC_API_V3,
     PINATA_ADMIN_JWT: process.env.PINATA_ADMIN_JWT,
     NEXT_PUBLIC_PINATA_GATEWAY_URL: process.env.NEXT_PUBLIC_PINATA_GATEWAY_URL,
-    NEXT_PUBLIC_LOGGING: process.env.LOGGING,
     LOGGING: process.env.LOGGING,
   },
 });

From 119452b44996014c2f3e5e85b28a316ce2cebd93 Mon Sep 17 00:00:00 2001
From: Dominik Stumpf <s.dominik.work@gmail.com>
Date: Tue, 3 Dec 2024 02:23:54 +0100
Subject: [PATCH 45/93] fix: use data on SignInDialog

---
 src/components/SignInDialog.tsx | 7 ++++---
 src/lib/fetchGuildApi.ts        | 6 ++++--
 2 files changed, 8 insertions(+), 5 deletions(-)

diff --git a/src/components/SignInDialog.tsx b/src/components/SignInDialog.tsx
index 332c5c39b0..cb75cb13ba 100644
--- a/src/components/SignInDialog.tsx
+++ b/src/components/SignInDialog.tsx
@@ -124,9 +124,10 @@ const SignInWithEthereum = () => {
   const { mutate: signInWithEthereum, isPending } = useMutation({
     mutationKey: ["SIWE"],
     mutationFn: async () => {
-      const { nonce } = await fetchGuildApi("auth/siwe/nonce").then((data) =>
-        z.object({ nonce: z.string() }).parse(data),
-      );
+      const nonceResponse = await fetchGuildApi("auth/siwe/nonce");
+      const { nonce } = z
+        .object({ nonce: z.string() })
+        .parse(nonceResponse.data);
 
       const url = new URL(window.location.href);
 
diff --git a/src/lib/fetchGuildApi.ts b/src/lib/fetchGuildApi.ts
index ec69b01042..5a9fc9a318 100644
--- a/src/lib/fetchGuildApi.ts
+++ b/src/lib/fetchGuildApi.ts
@@ -66,7 +66,7 @@ export const fetchGuildApi = async <Data = object, Error = ErrorLike>(
   const response = await fetch(url, {
     ...requestInit,
     headers: {
-      "Content-Type": "application/json",
+      ...(requestInit?.body && { "Content-Type": "application/json" }),
       ...requestInit?.headers,
     },
   });
@@ -77,6 +77,8 @@ export const fetchGuildApi = async <Data = object, Error = ErrorLike>(
     throw new Error("Guild API failed respond with json");
   }
 
+  logger.info("\n", url.toString(), response.status);
+
   let json: unknown;
   try {
     json = await response.json();
@@ -84,7 +86,7 @@ export const fetchGuildApi = async <Data = object, Error = ErrorLike>(
     throw new Error("Failed to parse json from response");
   }
 
-  logger.info(url.toString(), response.status, json);
+  logger.info(json, "\n");
 
   if (!response.ok) {
     return {

From 7d8c2eff4d53074b27689cf0ca8272ff531e46dc Mon Sep 17 00:00:00 2001
From: Dominik Stumpf <s.dominik.work@gmail.com>
Date: Tue, 3 Dec 2024 05:15:43 +0100
Subject: [PATCH 46/93] feat: add join and leave using tanstack

---
 src/app/(dashboard)/[guildUrlName]/actions.ts | 22 ++++--
 .../[guildUrlName]/components/JoinButton.tsx  | 76 ++++++++++++++++---
 src/app/(dashboard)/[guildUrlName]/layout.tsx |  4 +-
 3 files changed, 84 insertions(+), 18 deletions(-)

diff --git a/src/app/(dashboard)/[guildUrlName]/actions.ts b/src/app/(dashboard)/[guildUrlName]/actions.ts
index 07e33e795e..4be05989cc 100644
--- a/src/app/(dashboard)/[guildUrlName]/actions.ts
+++ b/src/app/(dashboard)/[guildUrlName]/actions.ts
@@ -4,6 +4,7 @@ import { tryGetParsedToken } from "@/actions/auth";
 import { fetchGuildApiAuthData, fetchGuildApiData } from "@/lib/fetchGuildApi";
 import type { ErrorLike, WithIdLike } from "@/lib/types";
 import type { Schemas } from "@guildxyz/types";
+import { revalidateTag } from "next/cache";
 import z from "zod";
 
 const resolveIdLikeRequest = (idLike: string) => {
@@ -13,12 +14,14 @@ const resolveIdLikeRequest = (idLike: string) => {
 
 export const joinGuild = async ({ guildId }: { guildId: string }) => {
   // the response type might not be suitable for this fetcher
-  return fetchGuildApiAuthData(`guild/${guildId}/join`, {
-    method: "POST",
-  });
+  revalidateTag("user");
+  //return fetchGuildApiAuthData(`guild/${guildId}/join`, {
+  //  method: "POST",
+  //});
 };
 
 export const leaveGuild = async ({ guildId }: { guildId: string }) => {
+  revalidateTag("user");
   return fetchGuildApiAuthData(`guild/${guildId}/leave`, {
     method: "POST",
   });
@@ -33,12 +36,18 @@ export const getGuild = async ({ idLike }: WithIdLike) => {
 export const getEntity = async <Data = object, Error = ErrorLike>({
   idLike,
   entity,
+  responseInit,
   auth = false,
-}: { entity: string; idLike: string; auth?: boolean }) => {
+}: {
+  entity: string;
+  idLike: string;
+  auth?: boolean;
+  responseInit?: Parameters<typeof fetch>[1];
+}) => {
   const pathname = `${entity}/${resolveIdLikeRequest(idLike)}`;
   return auth
-    ? fetchGuildApiAuthData<Data, Error>(pathname)
-    : fetchGuildApiData<Data, Error>(pathname);
+    ? fetchGuildApiAuthData<Data, Error>(pathname, responseInit)
+    : fetchGuildApiData<Data, Error>(pathname, responseInit);
 };
 
 export const getUser = async () => {
@@ -47,6 +56,7 @@ export const getUser = async () => {
     entity: "user",
     idLike: userId,
     auth: true,
+    responseInit: { next: { tags: ["user"] } },
   });
 };
 
diff --git a/src/app/(dashboard)/[guildUrlName]/components/JoinButton.tsx b/src/app/(dashboard)/[guildUrlName]/components/JoinButton.tsx
index d1dcffaba5..9bbf3f44a4 100644
--- a/src/app/(dashboard)/[guildUrlName]/components/JoinButton.tsx
+++ b/src/app/(dashboard)/[guildUrlName]/components/JoinButton.tsx
@@ -1,25 +1,79 @@
 "use client";
 
 import { Button } from "@/components/ui/Button";
-import type { Schemas } from "@guildxyz/types";
+import { GUILD_AUTH_COOKIE_NAME } from "@/config/constants";
+import { env } from "@/lib/env";
+import { getCookieClientSide } from "@/lib/getCookieClientSide";
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import { useParams } from "next/navigation";
 import { joinGuild, leaveGuild } from "../actions";
+import { guildOptions, userOptions } from "../options";
 
-export const JoinButton = ({
-  guild,
-}: { guild: Schemas["GuildFull"]; user: Schemas["UserFull"] }) => {
-  // @ts-ignore
-  const isJoined = !!user.data.guilds?.some(
-    // @ts-ignore
-    ({ guildId }) => guildId === guild.id,
+export const JoinButton = () => {
+  const { guildUrlName } = useParams<{ guildUrlName: string }>();
+  const user = useQuery(userOptions());
+  const guild = useQuery(guildOptions({ idLike: guildUrlName }));
+  const queryClient = useQueryClient();
+
+  if (!guild.data) {
+    throw new Error("Failed to fetch guild");
+  }
+
+  const isJoined = !!user.data?.guilds?.some(
+    ({ guildId }) => guildId === guild.data.id,
   );
 
+  const joinMutation = useMutation({
+    mutationFn: async () => {
+      const token = getCookieClientSide(GUILD_AUTH_COOKIE_NAME)!;
+      const url = new URL(
+        `api/guild/${guild.data.id}/join`,
+        env.NEXT_PUBLIC_API,
+      );
+      const response = await fetch(url, {
+        method: "POST",
+        headers: {
+          "x-auth-token": token,
+          "Content-Type": "text/event-stream",
+        },
+      });
+
+      const reader = response.body
+        ?.pipeThrough(new TextDecoderStream())
+        .getReader();
+
+      if (reader) {
+        while (true) {
+          const res = await reader.read();
+          if (res.done) break;
+          console.log(res.value);
+          //toast(res.value?.status, { description: res.value?.message });
+        }
+      }
+
+      joinGuild({ guildId: guild.data.id });
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["user"] });
+    },
+  });
+
+  const leaveMutation = useMutation({
+    mutationFn: () => leaveGuild({ guildId: guild.data.id }),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["user"] });
+    },
+  });
+
   return isJoined ? (
     <Button
       colorScheme="destructive"
       className="rounded-2xl"
       onClick={() => {
-        leaveGuild({ guildId: guild.id });
+        leaveMutation.mutate();
       }}
+      isLoading={leaveMutation.isPending}
+      loadingText="Leaving Guild"
     >
       Leave Guild
     </Button>
@@ -28,8 +82,10 @@ export const JoinButton = ({
       colorScheme="success"
       className="rounded-2xl"
       onClick={() => {
-        joinGuild({ guildId: guild.id });
+        joinMutation.mutate();
       }}
+      isLoading={joinMutation.isPending}
+      loadingText="Joining Guild"
     >
       Join Guild
     </Button>
diff --git a/src/app/(dashboard)/[guildUrlName]/layout.tsx b/src/app/(dashboard)/[guildUrlName]/layout.tsx
index 554a92a22a..91d50f6502 100644
--- a/src/app/(dashboard)/[guildUrlName]/layout.tsx
+++ b/src/app/(dashboard)/[guildUrlName]/layout.tsx
@@ -33,7 +33,7 @@ const GuildLayout = async ({
   if (!guild) {
     throw new Error("Failed to fetch guild");
   }
-  const user = queryClient.getQueryState(userOptions().queryKey);
+  const _user = queryClient.getQueryState(userOptions().queryKey);
 
   return (
     <HydrationBoundary state={dehydrate(queryClient)}>
@@ -52,7 +52,7 @@ const GuildLayout = async ({
                 </h1>
               </div>
               <AuthBoundary fallback={<SignInButton />}>
-                {user?.data && <JoinButton guild={guild} user={user.data} />}
+                <JoinButton />
               </AuthBoundary>
             </div>
             <p className="line-clamp-3 max-w-prose text-balance text-lg leading-relaxed">

From 2a051dce6bff17884b47beab8332136052c03aac Mon Sep 17 00:00:00 2001
From: Dominik Stumpf <s.dominik.work@gmail.com>
Date: Tue, 3 Dec 2024 05:30:33 +0100
Subject: [PATCH 47/93] fix: close nav menu after navigating

---
 src/components/NavMenu.tsx | 202 +++++++++++++++++++++----------------
 1 file changed, 115 insertions(+), 87 deletions(-)

diff --git a/src/components/NavMenu.tsx b/src/components/NavMenu.tsx
index 72749fa951..58decd17f1 100644
--- a/src/components/NavMenu.tsx
+++ b/src/components/NavMenu.tsx
@@ -22,99 +22,127 @@ import {
 import { useIsClient } from "foxact/use-is-client";
 import { useTheme } from "next-themes";
 import { usePathname } from "next/navigation";
-import type { ComponentProps, ReactNode } from "react";
+import { type ComponentProps, type ReactNode, useState } from "react";
 import GuildLogo from "static/logo.svg";
 import { Anchor } from "./ui/Anchor";
 import { Button, buttonVariants } from "./ui/Button";
 import { Popover, PopoverContent, PopoverTrigger } from "./ui/Popover";
 import { ToggleGroup, ToggleGroupItem } from "./ui/ToggleGroup";
 
-export const NavMenu = () => (
-  <Popover>
-    <PopoverTrigger asChild>
-      <Button variant="ghost" className="rounded-2xl">
-        <GuildLogo className="size-4" />
-        <span className="font-bold font-display text-base">Guild</span>
-        <List weight="bold" className="ml-1" />
-      </Button>
-    </PopoverTrigger>
-    <PopoverContent
-      align="start"
-      className="mt-1 w-auto min-w-[300px] origin-top-left overflow-hidden p-0"
-    >
-      <nav className="flex flex-col gap-2 px-3 py-4 sm:flex-row sm:gap-12">
-        <NavGroup title="Navigation">
-          <NavButton href="/explorer">
-            <House weight="bold" />
-            Explore guilds
-          </NavButton>
-
-          <NavButton href="/create-guild">
-            <Plus weight="bold" />
-            Create guild
-          </NavButton>
-
-          <NavButton href="https://help.guild.xyz">
-            <Info weight="bold" />
-            Guide
-          </NavButton>
-
-          <NavButton href="https://help.guild.xyz/en/collections/9537762-case-studies">
-            <Book weight="bold" />
-            Case studies
-          </NavButton>
-
-          <NavButton href="/privacy-policy">
-            <Shield weight="bold" />
-            Privacy Policy
-          </NavButton>
-
-          <NavButton href="/terms-of-use">
-            <File weight="bold" />
-            Terms of Use
-          </NavButton>
-        </NavGroup>
-
-        <NavGroup title="Other">
-          <NavButton href="https://discord.gg/KUkghUdk2G">
-            <DiscordLogo weight="bold" />
-            Discord
-          </NavButton>
-
-          <NavButton href="https://twitter.com/guildxyz">
-            <XLogo weight="bold" />
-            Twitter
-          </NavButton>
-
-          <NavButton href="https://github.com/guildxyz/guild.xyz">
-            <Code weight="bold" />
-            Code
-          </NavButton>
-
-          <NavButton href="https://github.com/guildxyz/guild-sdk">
-            <Package weight="bold" />
-            Guild SDK
-          </NavButton>
-
-          <NavButton href="https://careers.guild.xyz">
-            <UsersThree weight="bold" />
-            Team
-          </NavButton>
-
-          <NavButton href="https://guild.xyz/guild-xyz-brand-kit.zip">
-            <Palette weight="bold" />
-            Brand kit
-          </NavButton>
-        </NavGroup>
-      </nav>
-
-      <div className="flex items-center justify-between bg-card-secondary px-7 py-4 text-foreground text-sm">
-        <span>Theme:</span>
-        <ThemeToggle />
-      </div>
-    </PopoverContent>
-  </Popover>
-);
+export const NavMenu = () => {
+  const [open, setOpen] = useState(false);
+
+  return (
+    <Popover onOpenChange={setOpen} open={open}>
+      <PopoverTrigger asChild>
+        <Button variant="ghost" className="rounded-2xl">
+          <GuildLogo className="size-4" />
+          <span className="font-bold font-display text-base">Guild</span>
+          <List weight="bold" className="ml-1" />
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent
+        align="start"
+        className="mt-1 w-auto min-w-[300px] origin-top-left overflow-hidden p-0"
+      >
+        <nav className="flex flex-col gap-2 px-3 py-4 sm:flex-row sm:gap-12">
+          <NavGroup title="Navigation">
+            <NavButton href="/explorer" onClick={() => setOpen(false)}>
+              <House weight="bold" />
+              Explore guilds
+            </NavButton>
+
+            <NavButton href="/create-guild" onClick={() => setOpen(false)}>
+              <Plus weight="bold" />
+              Create guild
+            </NavButton>
+
+            <NavButton
+              href="https://help.guild.xyz"
+              onClick={() => setOpen(false)}
+            >
+              <Info weight="bold" />
+              Guide
+            </NavButton>
+
+            <NavButton
+              href="https://help.guild.xyz/en/collections/9537762-case-studies"
+              onClick={() => setOpen(false)}
+            >
+              <Book weight="bold" />
+              Case studies
+            </NavButton>
+
+            <NavButton href="/privacy-policy" onClick={() => setOpen(false)}>
+              <Shield weight="bold" />
+              Privacy Policy
+            </NavButton>
+
+            <NavButton href="/terms-of-use" onClick={() => setOpen(false)}>
+              <File weight="bold" />
+              Terms of Use
+            </NavButton>
+          </NavGroup>
+
+          <NavGroup title="Other">
+            <NavButton
+              href="https://discord.gg/KUkghUdk2G"
+              onClick={() => setOpen(false)}
+            >
+              <DiscordLogo weight="bold" />
+              Discord
+            </NavButton>
+
+            <NavButton
+              href="https://twitter.com/guildxyz"
+              onClick={() => setOpen(false)}
+            >
+              <XLogo weight="bold" />
+              Twitter
+            </NavButton>
+
+            <NavButton
+              href="https://github.com/guildxyz/guild.xyz"
+              onClick={() => setOpen(false)}
+            >
+              <Code weight="bold" />
+              Code
+            </NavButton>
+
+            <NavButton
+              href="https://github.com/guildxyz/guild-sdk"
+              onClick={() => setOpen(false)}
+            >
+              <Package weight="bold" />
+              Guild SDK
+            </NavButton>
+
+            <NavButton
+              href="https://careers.guild.xyz"
+              onClick={() => setOpen(false)}
+            >
+              <UsersThree weight="bold" />
+              Team
+            </NavButton>
+
+            <NavButton
+              href="https://guild.xyz/guild-xyz-brand-kit.zip"
+              onClick={() => setOpen(false)}
+            >
+              <Palette weight="bold" />
+              Brand kit
+            </NavButton>
+          </NavGroup>
+        </nav>
+
+        <div className="flex items-center justify-between bg-card-secondary px-7 py-4 text-foreground text-sm">
+          <span>Theme:</span>
+          <ThemeToggle />
+        </div>
+      </PopoverContent>
+    </Popover>
+  );
+};
 
 const NavGroup = ({
   title,

From cb51eae826a324c6cb3a0d6383b0e2db4c8fe519 Mon Sep 17 00:00:00 2001
From: Dominik Stumpf <s.dominik.work@gmail.com>
Date: Tue, 3 Dec 2024 05:35:01 +0100
Subject: [PATCH 48/93] fix: address unique index error

---
 src/app/(dashboard)/explorer/page.tsx | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/app/(dashboard)/explorer/page.tsx b/src/app/(dashboard)/explorer/page.tsx
index f92869b9d2..007d55fcc9 100644
--- a/src/app/(dashboard)/explorer/page.tsx
+++ b/src/app/(dashboard)/explorer/page.tsx
@@ -136,7 +136,10 @@ async function YourGuilds() {
 function YourGuildsSkeleton() {
   return (
     <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
-      {Array(3).fill(<GuildCardSkeleton />)}
+      {Array.from({ length: 3 }, (_, i) => (
+        // biome-ignore lint/suspicious/noArrayIndexKey: <explanation>
+        <GuildCardSkeleton key={i} />
+      ))}
     </div>
   );
 }

From a00c64cd512da4067a4b2898de111cfe90ed78d5 Mon Sep 17 00:00:00 2001
From: Dominik Stumpf <s.dominik.work@gmail.com>
Date: Tue, 3 Dec 2024 19:15:18 +0100
Subject: [PATCH 49/93] chore: move request to client side, mutate cache on
 success

---
 src/app/(dashboard)/[guildUrlName]/actions.ts | 18 +++++--------
 .../[guildUrlName]/components/JoinButton.tsx  | 27 ++++++++++++++-----
 2 files changed, 27 insertions(+), 18 deletions(-)

diff --git a/src/app/(dashboard)/[guildUrlName]/actions.ts b/src/app/(dashboard)/[guildUrlName]/actions.ts
index 4be05989cc..86cf7221a1 100644
--- a/src/app/(dashboard)/[guildUrlName]/actions.ts
+++ b/src/app/(dashboard)/[guildUrlName]/actions.ts
@@ -1,10 +1,7 @@
-"use server";
-
 import { tryGetParsedToken } from "@/actions/auth";
 import { fetchGuildApiAuthData, fetchGuildApiData } from "@/lib/fetchGuildApi";
 import type { ErrorLike, WithIdLike } from "@/lib/types";
 import type { Schemas } from "@guildxyz/types";
-import { revalidateTag } from "next/cache";
 import z from "zod";
 
 const resolveIdLikeRequest = (idLike: string) => {
@@ -12,16 +9,14 @@ const resolveIdLikeRequest = (idLike: string) => {
   return `${isId ? "id" : "urlName"}/${idLike}`;
 };
 
-export const joinGuild = async ({ guildId }: { guildId: string }) => {
-  // the response type might not be suitable for this fetcher
-  revalidateTag("user");
-  //return fetchGuildApiAuthData(`guild/${guildId}/join`, {
-  //  method: "POST",
-  //});
-};
+//export const joinGuild = async ({ guildId }: { guildId: string }) => {
+//   // the response type might not be suitable for this fetcher
+//  return fetchGuildApiAuthData(`guild/${guildId}/join`, {
+//    method: "POST",
+//  });
+//};
 
 export const leaveGuild = async ({ guildId }: { guildId: string }) => {
-  revalidateTag("user");
   return fetchGuildApiAuthData(`guild/${guildId}/leave`, {
     method: "POST",
   });
@@ -56,7 +51,6 @@ export const getUser = async () => {
     entity: "user",
     idLike: userId,
     auth: true,
-    responseInit: { next: { tags: ["user"] } },
   });
 };
 
diff --git a/src/app/(dashboard)/[guildUrlName]/components/JoinButton.tsx b/src/app/(dashboard)/[guildUrlName]/components/JoinButton.tsx
index 9bbf3f44a4..25ae39d224 100644
--- a/src/app/(dashboard)/[guildUrlName]/components/JoinButton.tsx
+++ b/src/app/(dashboard)/[guildUrlName]/components/JoinButton.tsx
@@ -6,7 +6,7 @@ import { env } from "@/lib/env";
 import { getCookieClientSide } from "@/lib/getCookieClientSide";
 import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
 import { useParams } from "next/navigation";
-import { joinGuild, leaveGuild } from "../actions";
+import { leaveGuild } from "../actions";
 import { guildOptions, userOptions } from "../options";
 
 export const JoinButton = () => {
@@ -25,6 +25,7 @@ export const JoinButton = () => {
 
   const joinMutation = useMutation({
     mutationFn: async () => {
+      // TODO: Handle error here, throw error in funciton if needed
       const token = getCookieClientSide(GUILD_AUTH_COOKIE_NAME)!;
       const url = new URL(
         `api/guild/${guild.data.id}/join`,
@@ -51,17 +52,31 @@ export const JoinButton = () => {
         }
       }
 
-      joinGuild({ guildId: guild.data.id });
+      //joinGuild({ guildId: guild.data.id });
     },
-    onSuccess: () => {
-      queryClient.invalidateQueries({ queryKey: ["user"] });
+    onSuccess: async () => {
+      const prev = queryClient.getQueryData(userOptions().queryKey);
+      if (prev) {
+        queryClient.setQueryData(userOptions().queryKey, {
+          ...prev,
+          guilds: prev?.guilds?.concat({ guildId: guild.data.id }),
+        });
+      }
     },
   });
 
   const leaveMutation = useMutation({
     mutationFn: () => leaveGuild({ guildId: guild.data.id }),
-    onSuccess: () => {
-      queryClient.invalidateQueries({ queryKey: ["user"] });
+    onSuccess: async () => {
+      const prev = queryClient.getQueryData(userOptions().queryKey);
+      if (prev) {
+        queryClient.setQueryData(userOptions().queryKey, {
+          ...prev,
+          guilds: prev?.guilds?.filter(
+            ({ guildId }) => guildId !== guild.data.id,
+          ),
+        });
+      }
     },
   });
 

From 82ad90979e55466d4c15a21831104b5a34cfcf8c Mon Sep 17 00:00:00 2001
From: Dominik Stumpf <s.dominik.work@gmail.com>
Date: Tue, 3 Dec 2024 20:36:15 +0100
Subject: [PATCH 50/93] feat: show join progress using toasts and event stream

---
 package.json                                  |  1 +
 .../[guildUrlName]/components/JoinButton.tsx  | 46 +++++++++++--------
 2 files changed, 29 insertions(+), 18 deletions(-)

diff --git a/package.json b/package.json
index 7d11270d1b..b8bf563ff6 100644
--- a/package.json
+++ b/package.json
@@ -37,6 +37,7 @@
     "autoprefixer": "^10.4.20",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",
+    "event-source-plus": "^0.1.8",
     "foxact": "^0.2.41",
     "jotai": "^2.10.2",
     "jwt-decode": "^4.0.0",
diff --git a/src/app/(dashboard)/[guildUrlName]/components/JoinButton.tsx b/src/app/(dashboard)/[guildUrlName]/components/JoinButton.tsx
index 25ae39d224..21e8cab7d4 100644
--- a/src/app/(dashboard)/[guildUrlName]/components/JoinButton.tsx
+++ b/src/app/(dashboard)/[guildUrlName]/components/JoinButton.tsx
@@ -5,7 +5,9 @@ import { GUILD_AUTH_COOKIE_NAME } from "@/config/constants";
 import { env } from "@/lib/env";
 import { getCookieClientSide } from "@/lib/getCookieClientSide";
 import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import { EventSourcePlus } from "event-source-plus";
 import { useParams } from "next/navigation";
+import { toast } from "sonner";
 import { leaveGuild } from "../actions";
 import { guildOptions, userOptions } from "../options";
 
@@ -25,36 +27,43 @@ export const JoinButton = () => {
 
   const joinMutation = useMutation({
     mutationFn: async () => {
-      // TODO: Handle error here, throw error in funciton if needed
+      //TODO: Handle error here, throw error in funciton if needed
       const token = getCookieClientSide(GUILD_AUTH_COOKIE_NAME)!;
       const url = new URL(
         `api/guild/${guild.data.id}/join`,
         env.NEXT_PUBLIC_API,
       );
-      const response = await fetch(url, {
-        method: "POST",
+      console.log("running mutation");
+      const eventSource = new EventSourcePlus(url.toString(), {
+        retryStrategy: "on-error",
+        method: "post",
+        keepalive: true,
+        maxRetryCount: 3,
         headers: {
           "x-auth-token": token,
-          "Content-Type": "text/event-stream",
+          "content-type": "application/json",
         },
       });
 
-      const reader = response.body
-        ?.pipeThrough(new TextDecoderStream())
-        .getReader();
-
-      if (reader) {
-        while (true) {
-          const res = await reader.read();
-          if (res.done) break;
-          console.log(res.value);
-          //toast(res.value?.status, { description: res.value?.message });
-        }
-      }
-
-      //joinGuild({ guildId: guild.data.id });
+      eventSource.listen({
+        onMessage: (sseMessage) => {
+          try {
+            // biome-ignore lint/suspicious/noExplicitAny: TODO: fill missing types
+            const { status, message } = JSON.parse(sseMessage.data) as any;
+            const toastFunction =
+              status === "complete" ? toast.success : toast.info;
+            toastFunction(status, {
+              description: message,
+              richColors: status === "complete",
+            });
+          } catch (e) {
+            console.log(e);
+          }
+        },
+      });
     },
     onSuccess: async () => {
+      await queryClient.cancelQueries(userOptions());
       const prev = queryClient.getQueryData(userOptions().queryKey);
       if (prev) {
         queryClient.setQueryData(userOptions().queryKey, {
@@ -68,6 +77,7 @@ export const JoinButton = () => {
   const leaveMutation = useMutation({
     mutationFn: () => leaveGuild({ guildId: guild.data.id }),
     onSuccess: async () => {
+      await queryClient.cancelQueries(userOptions());
       const prev = queryClient.getQueryData(userOptions().queryKey);
       if (prev) {
         queryClient.setQueryData(userOptions().queryKey, {

From ae82d839c6dd4f5392c46875aaf14715e7395d69 Mon Sep 17 00:00:00 2001
From: Dominik Stumpf <s.dominik.work@gmail.com>
Date: Tue, 3 Dec 2024 20:40:38 +0100
Subject: [PATCH 51/93] chore: disable retry on error

---
 src/app/(dashboard)/[guildUrlName]/components/JoinButton.tsx | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/src/app/(dashboard)/[guildUrlName]/components/JoinButton.tsx b/src/app/(dashboard)/[guildUrlName]/components/JoinButton.tsx
index 21e8cab7d4..53696bcd48 100644
--- a/src/app/(dashboard)/[guildUrlName]/components/JoinButton.tsx
+++ b/src/app/(dashboard)/[guildUrlName]/components/JoinButton.tsx
@@ -33,12 +33,11 @@ export const JoinButton = () => {
         `api/guild/${guild.data.id}/join`,
         env.NEXT_PUBLIC_API,
       );
-      console.log("running mutation");
       const eventSource = new EventSourcePlus(url.toString(), {
         retryStrategy: "on-error",
         method: "post",
         keepalive: true,
-        maxRetryCount: 3,
+        maxRetryCount: 1,
         headers: {
           "x-auth-token": token,
           "content-type": "application/json",
@@ -57,7 +56,7 @@ export const JoinButton = () => {
               richColors: status === "complete",
             });
           } catch (e) {
-            console.log(e);
+            console.log("json parsing failed on join event stream", e);
           }
         },
       });

From e58ea8eeaf014f89800855a9777d34bc84142b8a Mon Sep 17 00:00:00 2001
From: Dominik Stumpf <s.dominik.work@gmail.com>
Date: Tue, 3 Dec 2024 21:14:38 +0100
Subject: [PATCH 52/93] chore: disable retry on error

---
 src/app/(dashboard)/[guildUrlName]/components/JoinButton.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/app/(dashboard)/[guildUrlName]/components/JoinButton.tsx b/src/app/(dashboard)/[guildUrlName]/components/JoinButton.tsx
index 53696bcd48..bbc13c8c8f 100644
--- a/src/app/(dashboard)/[guildUrlName]/components/JoinButton.tsx
+++ b/src/app/(dashboard)/[guildUrlName]/components/JoinButton.tsx
@@ -37,7 +37,7 @@ export const JoinButton = () => {
         retryStrategy: "on-error",
         method: "post",
         keepalive: true,
-        maxRetryCount: 1,
+        maxRetryCount: 0,
         headers: {
           "x-auth-token": token,
           "content-type": "application/json",

From c2fa6c6de00cc8da998b4785db9b36e13f859778 Mon Sep 17 00:00:00 2001
From: Dominik Stumpf <s.dominik.work@gmail.com>
Date: Tue, 3 Dec 2024 23:18:57 +0100
Subject: [PATCH 53/93] refactor: remove unused code

---
 src/app/(dashboard)/[guildUrlName]/actions.ts | 10 ------
 .../[guildUrlName]/components/GuildTabs.tsx   | 31 +++++++------------
 .../[guildUrlName]/components/JoinButton.tsx  |  1 -
 src/app/(dashboard)/[guildUrlName]/layout.tsx | 18 +++++------
 4 files changed, 20 insertions(+), 40 deletions(-)

diff --git a/src/app/(dashboard)/[guildUrlName]/actions.ts b/src/app/(dashboard)/[guildUrlName]/actions.ts
index 86cf7221a1..1f8355757c 100644
--- a/src/app/(dashboard)/[guildUrlName]/actions.ts
+++ b/src/app/(dashboard)/[guildUrlName]/actions.ts
@@ -9,13 +9,6 @@ const resolveIdLikeRequest = (idLike: string) => {
   return `${isId ? "id" : "urlName"}/${idLike}`;
 };
 
-//export const joinGuild = async ({ guildId }: { guildId: string }) => {
-//   // the response type might not be suitable for this fetcher
-//  return fetchGuildApiAuthData(`guild/${guildId}/join`, {
-//    method: "POST",
-//  });
-//};
-
 export const leaveGuild = async ({ guildId }: { guildId: string }) => {
   return fetchGuildApiAuthData(`guild/${guildId}/leave`, {
     method: "POST",
@@ -59,8 +52,5 @@ export const getPages = async ({ guildId }: { guildId: string }) => {
   return fetchGuildApiData<Schemas["PageFull"][]>("page/batch", {
     method: "POST",
     body: JSON.stringify({ ids: guild.pages?.map((p) => p.pageId!) ?? [] }),
-    headers: {
-      "Content-Type": "application/json",
-    },
   });
 };
diff --git a/src/app/(dashboard)/[guildUrlName]/components/GuildTabs.tsx b/src/app/(dashboard)/[guildUrlName]/components/GuildTabs.tsx
index c7d0fc7cd5..6038b8ee46 100644
--- a/src/app/(dashboard)/[guildUrlName]/components/GuildTabs.tsx
+++ b/src/app/(dashboard)/[guildUrlName]/components/GuildTabs.tsx
@@ -6,8 +6,6 @@ import type { Schemas } from "@guildxyz/types";
 import { getPages } from "../actions";
 import { PageNavLink } from "./RoleGroupNavLink";
 
-const roleGroupOrder = ["Home", "Admin"].reverse();
-
 export const GuildTabs = async ({ guild }: { guild: Schemas["GuildFull"] }) => {
   const pages = await getPages({ guildId: guild.id });
 
@@ -20,24 +18,17 @@ export const GuildTabs = async ({ guild }: { guild: Schemas["GuildFull"] }) => {
       }}
     >
       <div className="my-4 flex gap-3 px-8">
-        {pages
-          .sort((a, b) => {
-            const [aIndex, bIndex] = [a, b].map((val) =>
-              roleGroupOrder.findIndex((pred) => pred === val.name),
-            );
-            return bIndex - aIndex;
-          })
-          .map((rg) => (
-            <PageNavLink
-              key={rg.id}
-              href={[guild.urlName, rg.urlName]
-                .filter(Boolean)
-                .map((s) => `/${s}`)
-                .join("")}
-            >
-              {rg.name}
-            </PageNavLink>
-          ))}
+        {pages.map((rg) => (
+          <PageNavLink
+            key={rg.id}
+            href={[guild.urlName, rg.urlName]
+              .filter(Boolean)
+              .map((s) => `/${s}`)
+              .join("")}
+          >
+            {rg.name}
+          </PageNavLink>
+        ))}
       </div>
       <ScrollBar orientation="horizontal" className="hidden" />
     </ScrollArea>
diff --git a/src/app/(dashboard)/[guildUrlName]/components/JoinButton.tsx b/src/app/(dashboard)/[guildUrlName]/components/JoinButton.tsx
index bbc13c8c8f..d53fe4fa48 100644
--- a/src/app/(dashboard)/[guildUrlName]/components/JoinButton.tsx
+++ b/src/app/(dashboard)/[guildUrlName]/components/JoinButton.tsx
@@ -36,7 +36,6 @@ export const JoinButton = () => {
       const eventSource = new EventSourcePlus(url.toString(), {
         retryStrategy: "on-error",
         method: "post",
-        keepalive: true,
         maxRetryCount: 0,
         headers: {
           "x-auth-token": token,
diff --git a/src/app/(dashboard)/[guildUrlName]/layout.tsx b/src/app/(dashboard)/[guildUrlName]/layout.tsx
index 91d50f6502..ddabcabbad 100644
--- a/src/app/(dashboard)/[guildUrlName]/layout.tsx
+++ b/src/app/(dashboard)/[guildUrlName]/layout.tsx
@@ -25,15 +25,15 @@ const GuildLayout = async ({
     ),
   ]);
 
-  const guild = queryClient.getQueryData(
+  const guild = queryClient.getQueryState(
     guildOptions({
       idLike: guildUrlName,
     }).queryKey,
   );
-  if (!guild) {
-    throw new Error("Failed to fetch guild");
+
+  if (guild?.error || !guild?.data) {
+    throw new Error(`Failed to fetch guild ${guild?.error?.status || ""}`);
   }
-  const _user = queryClient.getQueryState(userOptions().queryKey);
 
   return (
     <HydrationBoundary state={dehydrate(queryClient)}>
@@ -43,12 +43,12 @@ const GuildLayout = async ({
             <div className="flex w-full flex-col items-stretch justify-between gap-8 md:flex-row md:items-center">
               <div className="flex max-w-prose items-center gap-4">
                 <GuildImage
-                  name={guild.name}
-                  imageUrl={guild.imageUrl}
+                  name={guild.data.name}
+                  imageUrl={guild.data.imageUrl}
                   className="size-20 rounded-full border"
                 />
                 <h1 className="text-pretty font-bold font-display text-3xl tracking-tight sm:text-4xl lg:text-5xl">
-                  {guild.name}
+                  {guild.data.name}
                 </h1>
               </div>
               <AuthBoundary fallback={<SignInButton />}>
@@ -56,13 +56,13 @@ const GuildLayout = async ({
               </AuthBoundary>
             </div>
             <p className="line-clamp-3 max-w-prose text-balance text-lg leading-relaxed">
-              {guild.description}
+              {guild.data.description}
             </p>
           </div>
         </div>
 
         <Suspense fallback={<GuildTabsSkeleton />}>
-          <GuildTabs guild={guild} />
+          <GuildTabs guild={guild.data} />
         </Suspense>
 
         {children}

From 6053a91b18ea097a267e295293e8d594fee4f8d6 Mon Sep 17 00:00:00 2001
From: Dominik Stumpf <s.dominik.work@gmail.com>
Date: Wed, 4 Dec 2024 00:47:04 +0100
Subject: [PATCH 54/93] refactor: move auth into main fetcher, renamings

---
 src/actions/auth.ts                           | 11 +--
 src/actions/token.ts                          | 21 +++++
 src/app/(dashboard)/[guildUrlName]/actions.ts | 13 +--
 .../components/CreateGuildButton.tsx          |  4 +-
 src/app/(dashboard)/explorer/atoms.ts         |  2 +-
 .../explorer/components/StickyNavbar.tsx      |  4 +-
 src/app/(dashboard)/explorer/constants.ts     |  2 +-
 src/app/(dashboard)/explorer/page.tsx         | 21 +++--
 src/lib/fetchGuildApi.ts                      | 90 +++++--------------
 src/lib/getCookieClientSide.ts                |  6 ++
 10 files changed, 71 insertions(+), 103 deletions(-)
 create mode 100644 src/actions/token.ts

diff --git a/src/actions/auth.ts b/src/actions/auth.ts
index d2b0e9c9d5..1b1e92f368 100644
--- a/src/actions/auth.ts
+++ b/src/actions/auth.ts
@@ -45,13 +45,6 @@ export const signOut = async (redirectTo?: string) => {
   redirect(redirectTo ?? "/explorer");
 };
 
-export const tryGetToken = async () => {
-  const token = (await cookies()).get(GUILD_AUTH_COOKIE_NAME)?.value;
-  if (!token) throw new Error("Failed to retrieve token");
-  return token;
-};
-
-export const tryGetParsedToken = async () => {
-  const token = await tryGetToken();
-  return tokenSchema.parse(jwtDecode(token));
+export const getTokenServerSide = async () => {
+  return (await cookies()).get(GUILD_AUTH_COOKIE_NAME)?.value;
 };
diff --git a/src/actions/token.ts b/src/actions/token.ts
new file mode 100644
index 0000000000..9fdb0dd6cd
--- /dev/null
+++ b/src/actions/token.ts
@@ -0,0 +1,21 @@
+import { getTokenClientSide } from "@/lib/getCookieClientSide";
+import { tokenSchema } from "@/lib/schemas/user";
+import { isServer } from "@tanstack/react-query";
+import { jwtDecode } from "jwt-decode";
+import { getTokenServerSide } from "./auth";
+
+export const tryGetToken = async () => {
+  const token = isServer ? await getTokenServerSide() : getTokenClientSide();
+
+  if (!token) {
+    throw new Error(
+      "Failed to retrieve JWT token on auth request initialization.",
+    );
+  }
+  return token;
+};
+
+export const tryGetParsedToken = async () => {
+  const token = await tryGetToken();
+  return tokenSchema.parse(jwtDecode(token));
+};
diff --git a/src/app/(dashboard)/[guildUrlName]/actions.ts b/src/app/(dashboard)/[guildUrlName]/actions.ts
index 1f8355757c..017785b412 100644
--- a/src/app/(dashboard)/[guildUrlName]/actions.ts
+++ b/src/app/(dashboard)/[guildUrlName]/actions.ts
@@ -1,5 +1,5 @@
-import { tryGetParsedToken } from "@/actions/auth";
-import { fetchGuildApiAuthData, fetchGuildApiData } from "@/lib/fetchGuildApi";
+import { tryGetParsedToken } from "@/actions/token";
+import { fetchGuildApiData } from "@/lib/fetchGuildApi";
 import type { ErrorLike, WithIdLike } from "@/lib/types";
 import type { Schemas } from "@guildxyz/types";
 import z from "zod";
@@ -10,7 +10,7 @@ const resolveIdLikeRequest = (idLike: string) => {
 };
 
 export const leaveGuild = async ({ guildId }: { guildId: string }) => {
-  return fetchGuildApiAuthData(`guild/${guildId}/leave`, {
+  return fetchGuildApiData(`guild/${guildId}/leave`, {
     method: "POST",
   });
 };
@@ -25,17 +25,13 @@ export const getEntity = async <Data = object, Error = ErrorLike>({
   idLike,
   entity,
   responseInit,
-  auth = false,
 }: {
   entity: string;
   idLike: string;
-  auth?: boolean;
   responseInit?: Parameters<typeof fetch>[1];
 }) => {
   const pathname = `${entity}/${resolveIdLikeRequest(idLike)}`;
-  return auth
-    ? fetchGuildApiAuthData<Data, Error>(pathname, responseInit)
-    : fetchGuildApiData<Data, Error>(pathname, responseInit);
+  return fetchGuildApiData<Data, Error>(pathname, responseInit);
 };
 
 export const getUser = async () => {
@@ -43,7 +39,6 @@ export const getUser = async () => {
   return getEntity<Schemas["UserFull"]>({
     entity: "user",
     idLike: userId,
-    auth: true,
   });
 };
 
diff --git a/src/app/(dashboard)/create-guild/components/CreateGuildButton.tsx b/src/app/(dashboard)/create-guild/components/CreateGuildButton.tsx
index 8647a7c512..441b0c21c9 100644
--- a/src/app/(dashboard)/create-guild/components/CreateGuildButton.tsx
+++ b/src/app/(dashboard)/create-guild/components/CreateGuildButton.tsx
@@ -3,7 +3,7 @@
 import { useConfetti } from "@/components/ConfettiProvider";
 import { Button } from "@/components/ui/Button";
 import { GUILD_AUTH_COOKIE_NAME } from "@/config/constants";
-import { fetchGuildApiAuthData } from "@/lib/fetchGuildApi";
+import { fetchGuildApiData } from "@/lib/fetchGuildApi";
 import { getCookieClientSide } from "@/lib/getCookieClientSide";
 import type { CreateGuildForm, Guild } from "@/lib/schemas/guild";
 import { CheckCircle, XCircle } from "@phosphor-icons/react/dist/ssr";
@@ -30,7 +30,7 @@ const CreateGuildButton = () => {
         contact: undefined,
       };
 
-      return fetchGuildApiAuthData<Guild>("guild", {
+      return fetchGuildApiData<Guild>("guild", {
         method: "POST",
         body: JSON.stringify(guild),
       });
diff --git a/src/app/(dashboard)/explorer/atoms.ts b/src/app/(dashboard)/explorer/atoms.ts
index f354b9ac36..aaf9137784 100644
--- a/src/app/(dashboard)/explorer/atoms.ts
+++ b/src/app/(dashboard)/explorer/atoms.ts
@@ -6,4 +6,4 @@ export const isNavStuckAtom = atom(false);
 export const isSearchStuckAtom = atom(false);
 export const activeSectionAtom = atom<
   (typeof ACTIVE_SECTION)[keyof typeof ACTIVE_SECTION]
->(ACTIVE_SECTION.yourGuilds);
+>(ACTIVE_SECTION.associatedGuilds);
diff --git a/src/app/(dashboard)/explorer/components/StickyNavbar.tsx b/src/app/(dashboard)/explorer/components/StickyNavbar.tsx
index 3f0ed56433..b6f20881a7 100644
--- a/src/app/(dashboard)/explorer/components/StickyNavbar.tsx
+++ b/src/app/(dashboard)/explorer/components/StickyNavbar.tsx
@@ -34,13 +34,13 @@ const Nav = () => {
       value={activeSection}
     >
       <ToggleGroupItem
-        value={ACTIVE_SECTION.yourGuilds}
+        value={ACTIVE_SECTION.associatedGuilds}
         className={cn("rounded-xl transition-all", {
           "rounded-lg": isSearchStuck,
         })}
         asChild
       >
-        <a href={`#${ACTIVE_SECTION.yourGuilds}`}>Your guilds</a>
+        <a href={`#${ACTIVE_SECTION.associatedGuilds}`}>Your guilds</a>
       </ToggleGroupItem>
       <ToggleGroupItem
         value={ACTIVE_SECTION.exploreGuilds}
diff --git a/src/app/(dashboard)/explorer/constants.ts b/src/app/(dashboard)/explorer/constants.ts
index 0548d43ce2..a9042cb86f 100644
--- a/src/app/(dashboard)/explorer/constants.ts
+++ b/src/app/(dashboard)/explorer/constants.ts
@@ -1,5 +1,5 @@
 export const PAGE_SIZE = 24;
 export const ACTIVE_SECTION = {
-  yourGuilds: "your-guilds",
+  associatedGuilds: "associated-guilds",
   exploreGuilds: "explore-guilds",
 } as const;
diff --git a/src/app/(dashboard)/explorer/page.tsx b/src/app/(dashboard)/explorer/page.tsx
index 007d55fcc9..e2f3dcd827 100644
--- a/src/app/(dashboard)/explorer/page.tsx
+++ b/src/app/(dashboard)/explorer/page.tsx
@@ -1,4 +1,4 @@
-import { tryGetToken } from "@/actions/auth";
+import { tryGetParsedToken } from "@/actions/token";
 import { AuthBoundary } from "@/components/AuthBoundary";
 import { SignInButton } from "@/components/SignInButton";
 import { fetchGuildApiData } from "@/lib/fetchGuildApi";
@@ -44,7 +44,7 @@ export default async function Explorer() {
         <section className="pt-6 pb-8">
           <h1
             className="font-black font-display text-5xl tracking-tight"
-            id={ACTIVE_SECTION.yourGuilds}
+            id={ACTIVE_SECTION.associatedGuilds}
           >
             Guildhall
           </h1>
@@ -57,7 +57,7 @@ export default async function Explorer() {
           </AuthBoundary>
         </StickyNavbar>
 
-        <YourGuildsSection />
+        <AssociatedGuildsSection />
 
         <h2
           className="mt-12 font-bold text-lg tracking-tight"
@@ -75,7 +75,7 @@ export default async function Explorer() {
   );
 }
 
-async function YourGuildsSection() {
+async function AssociatedGuildsSection() {
   return (
     <section className="grid gap-2">
       <AuthBoundary
@@ -97,20 +97,19 @@ async function YourGuildsSection() {
           </div>
         }
       >
-        <Suspense fallback={<YourGuildsSkeleton />}>
-          <YourGuilds />
+        <Suspense fallback={<AssociatedGuildsSkeleton />}>
+          <AssociatedGuilds />
         </Suspense>
       </AuthBoundary>
     </section>
   );
 }
 
-async function YourGuilds() {
-  const auth = await tryGetToken();
-  if (!auth) return;
+async function AssociatedGuilds() {
+  const { userId } = await tryGetParsedToken();
 
   const { items: associatedGuilds } = await getAssociatedGuilds({
-    userId: auth,
+    userId,
   });
 
   return associatedGuilds.length > 0 ? (
@@ -133,7 +132,7 @@ async function YourGuilds() {
   );
 }
 
-function YourGuildsSkeleton() {
+function AssociatedGuildsSkeleton() {
   return (
     <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
       {Array.from({ length: 3 }, (_, i) => (
diff --git a/src/lib/fetchGuildApi.ts b/src/lib/fetchGuildApi.ts
index 5a9fc9a318..112f89b36c 100644
--- a/src/lib/fetchGuildApi.ts
+++ b/src/lib/fetchGuildApi.ts
@@ -1,8 +1,5 @@
-import { tryGetToken } from "@/actions/auth";
-import { GUILD_AUTH_COOKIE_NAME } from "@/config/constants";
-import { isServer } from "@tanstack/react-query";
+import { tryGetToken } from "@/actions/token";
 import { env } from "./env";
-import { getCookieClientSide } from "./getCookieClientSide";
 import type { ErrorLike } from "./types";
 
 type FetchResult<Data, Error> =
@@ -27,6 +24,9 @@ const logger = {
  * This function sends a request to the specified `pathname` of the API and returns
  * a structured result containing the response, status, and data. It ensures that the API transmission is with valid JSON.
  *
+ * Authentication token is retrieved and automatically included in the request headers. The token is retrieved either server-side or client-side
+ * depending on the runtime environment.
+ *
  * @template Data - The expected shape of the success response data.
  * @template Error - The expected shape of the error response data.
  *
@@ -61,20 +61,31 @@ export const fetchGuildApi = async <Data = object, Error = ErrorLike>(
   if (pathname.endsWith("/")) {
     throw new Error("`pathname` must not end with slash");
   }
-
   const url = new URL(`api/${pathname}`, env.NEXT_PUBLIC_API);
+
+  let token: string | undefined;
+  try {
+    token = await tryGetToken();
+  } catch (_) {
+    //logger.info(e);
+  }
+
+  const headers = new Headers(requestInit?.headers);
+  if (token) {
+    headers.set("X-Auth-Token", token);
+  }
+  if (requestInit?.body) {
+    headers.set("Content-Type", "application/json");
+  }
+
   const response = await fetch(url, {
     ...requestInit,
-    headers: {
-      ...(requestInit?.body && { "Content-Type": "application/json" }),
-      ...requestInit?.headers,
-    },
+    headers,
   });
 
   const contentType = response.headers.get("content-type");
-
   if (!contentType?.includes("application/json")) {
-    throw new Error("Guild API failed respond with json");
+    throw new Error("Guild API failed to respond with json");
   }
 
   logger.info("\n", url.toString(), response.status);
@@ -102,62 +113,6 @@ export const fetchGuildApi = async <Data = object, Error = ErrorLike>(
   };
 };
 
-/**
- * Fetcher used for creating authenticated requests to the v3 backend API.
- *
- * This function extends `fetchGuildApi` by automatically including an authentication
- * token in the request headers. The token is retrieved either server-side or client-side
- * depending on the runtime environment.
- *
- * @template Data - The expected shape of the success response data.
- * @template Error - The expected shape of the error response data.
- *
- * @param pathname - The API endpoint to fetch, without leading or trailing slashes.
- * @param requestInit - Optional configuration for the fetch request.
- *
- * @returns A promise resolving to the fetch result,
- * containing `status`, `data`, and `response`.
- *
- * @example
- * ```ts
- * const { data, status, response } = await fetchGuildApiAuth<{ user: string }>('user', {
- *  method: "POST",
- *  body: JSON.stringify({name: string}),
- * });
- *
- * if (status === 'error') {
- *   assert(!response.ok);
- *   console.error(data.message);
- * } else {
- *   console.log(data.user);
- * }
- * ```
- *
- * @throws If `pathname` starts or ends with a slash.
- * @throws If the API does not respond with JSON.
- * @throws If the response JSON cannot be parsed.
- * @throws If the JWT token cannot be retrieved.
- */
-export const fetchGuildApiAuth = async <Data = object, Error = ErrorLike>(
-  ...[pathname, requestInit = {}]: Parameters<typeof fetchGuildApi>
-): Promise<FetchResult<Data, Error>> => {
-  const token = isServer
-    ? await tryGetToken()
-    : getCookieClientSide(GUILD_AUTH_COOKIE_NAME);
-  if (!token) {
-    throw new Error(
-      "Failed to retrieve JWT token on auth request initialization.",
-    );
-  }
-  return fetchGuildApi<Data, Error>(pathname, {
-    ...requestInit,
-    headers: {
-      ...requestInit?.headers,
-      "X-Auth-Token": token,
-    },
-  });
-};
-
 const unpackFetcher = (fetcher: typeof fetchGuildApi) => {
   return async <Data = object, Error = ErrorLike>(
     ...args: Parameters<typeof fetchGuildApi>
@@ -168,4 +123,3 @@ const unpackFetcher = (fetcher: typeof fetchGuildApi) => {
 };
 
 export const fetchGuildApiData = unpackFetcher(fetchGuildApi);
-export const fetchGuildApiAuthData = unpackFetcher(fetchGuildApiAuth);
diff --git a/src/lib/getCookieClientSide.ts b/src/lib/getCookieClientSide.ts
index c9bdc54c36..40ca44e1eb 100644
--- a/src/lib/getCookieClientSide.ts
+++ b/src/lib/getCookieClientSide.ts
@@ -1,5 +1,7 @@
 "use client";
 
+import { GUILD_AUTH_COOKIE_NAME } from "@/config/constants";
+
 export const getCookieClientSide = (name: string) => {
   const decodedCookie = decodeURIComponent(document.cookie);
   const cookiesArray = decodedCookie.split(";");
@@ -13,3 +15,7 @@ export const getCookieClientSide = (name: string) => {
 
   return undefined;
 };
+
+export const getTokenClientSide = () => {
+  return getCookieClientSide(GUILD_AUTH_COOKIE_NAME);
+};

From 4cbbfdec57a25a362ea39a27e0532be46200e6da Mon Sep 17 00:00:00 2001
From: Dominik Stumpf <s.dominik.work@gmail.com>
Date: Wed, 4 Dec 2024 00:49:33 +0100
Subject: [PATCH 55/93] refactor: move token into associated guilds

---
 src/app/(dashboard)/explorer/page.tsx | 10 ++++------
 1 file changed, 4 insertions(+), 6 deletions(-)

diff --git a/src/app/(dashboard)/explorer/page.tsx b/src/app/(dashboard)/explorer/page.tsx
index e2f3dcd827..a0918ae079 100644
--- a/src/app/(dashboard)/explorer/page.tsx
+++ b/src/app/(dashboard)/explorer/page.tsx
@@ -16,7 +16,9 @@ import { StickyNavbar } from "./components/StickyNavbar";
 import { StickySearch } from "./components/StickySearch";
 import { ACTIVE_SECTION } from "./constants";
 
-const getAssociatedGuilds = async ({ userId }: { userId: string }) => {
+const getAssociatedGuilds = async () => {
+  const { userId } = await tryGetParsedToken();
+
   return fetchGuildApiData<PaginatedResponse<Guild>>(
     `guild/search?page=1&pageSize=${Number.MAX_SAFE_INTEGER}&sortBy=name&reverse=false&customQuery=@owner:{${userId}}`,
   );
@@ -106,11 +108,7 @@ async function AssociatedGuildsSection() {
 }
 
 async function AssociatedGuilds() {
-  const { userId } = await tryGetParsedToken();
-
-  const { items: associatedGuilds } = await getAssociatedGuilds({
-    userId,
-  });
+  const { items: associatedGuilds } = await getAssociatedGuilds();
 
   return associatedGuilds.length > 0 ? (
     <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">

From a832ed5d2ad70d6229ac45612ecc72f8cfeedc56 Mon Sep 17 00:00:00 2001
From: Dominik Stumpf <s.dominik.work@gmail.com>
Date: Wed, 4 Dec 2024 00:58:46 +0100
Subject: [PATCH 56/93] feat: add form data option for fetcher

---
 src/lib/fetchGuildApi.ts | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/lib/fetchGuildApi.ts b/src/lib/fetchGuildApi.ts
index 112f89b36c..4b70fadc1c 100644
--- a/src/lib/fetchGuildApi.ts
+++ b/src/lib/fetchGuildApi.ts
@@ -74,7 +74,9 @@ export const fetchGuildApi = async <Data = object, Error = ErrorLike>(
   if (token) {
     headers.set("X-Auth-Token", token);
   }
-  if (requestInit?.body) {
+  if (requestInit?.body instanceof FormData) {
+    headers.set("Content-Type", "multipart/form-data");
+  } else if (requestInit?.body) {
     headers.set("Content-Type", "application/json");
   }
 

From 038ffc8cbe86acb573f745290fc7f7cb14f8b879 Mon Sep 17 00:00:00 2001
From: Dominik Stumpf <s.dominik.work@gmail.com>
Date: Wed, 4 Dec 2024 02:02:14 +0100
Subject: [PATCH 57/93] refactor: move and rename fetchers, options

---
 src/actions/token.ts                          | 21 ---------
 src/app/(dashboard)/[guildUrlName]/actions.ts | 23 ++++------
 .../[guildUrlName]/components/GuildTabs.tsx   |  4 +-
 .../[guildUrlName]/components/JoinButton.tsx  |  6 +--
 src/app/(dashboard)/[guildUrlName]/layout.tsx |  2 +-
 src/app/(dashboard)/explorer/actions.ts       |  5 +-
 .../explorer/components/GuildCard.tsx         |  6 ++-
 src/app/(dashboard)/explorer/page.tsx         | 13 ++++--
 src/lib/fetchGuildApi.ts                      |  2 +-
 src/lib/fetchers.ts                           | 46 +++++++++++++++++++
 .../[guildUrlName] => lib}/options.ts         |  8 ++--
 src/lib/resolveIdLikeRequest.ts               |  6 +++
 src/lib/token.ts                              | 21 +++++++++
 src/v2/components/ui/Button.tsx               |  0
 14 files changed, 108 insertions(+), 55 deletions(-)
 create mode 100644 src/lib/fetchers.ts
 rename src/{app/(dashboard)/[guildUrlName] => lib}/options.ts (75%)
 create mode 100644 src/lib/resolveIdLikeRequest.ts
 create mode 100644 src/lib/token.ts
 create mode 100644 src/v2/components/ui/Button.tsx

diff --git a/src/actions/token.ts b/src/actions/token.ts
index 9fdb0dd6cd..e69de29bb2 100644
--- a/src/actions/token.ts
+++ b/src/actions/token.ts
@@ -1,21 +0,0 @@
-import { getTokenClientSide } from "@/lib/getCookieClientSide";
-import { tokenSchema } from "@/lib/schemas/user";
-import { isServer } from "@tanstack/react-query";
-import { jwtDecode } from "jwt-decode";
-import { getTokenServerSide } from "./auth";
-
-export const tryGetToken = async () => {
-  const token = isServer ? await getTokenServerSide() : getTokenClientSide();
-
-  if (!token) {
-    throw new Error(
-      "Failed to retrieve JWT token on auth request initialization.",
-    );
-  }
-  return token;
-};
-
-export const tryGetParsedToken = async () => {
-  const token = await tryGetToken();
-  return tokenSchema.parse(jwtDecode(token));
-};
diff --git a/src/app/(dashboard)/[guildUrlName]/actions.ts b/src/app/(dashboard)/[guildUrlName]/actions.ts
index 017785b412..5247218483 100644
--- a/src/app/(dashboard)/[guildUrlName]/actions.ts
+++ b/src/app/(dashboard)/[guildUrlName]/actions.ts
@@ -1,27 +1,22 @@
-import { tryGetParsedToken } from "@/actions/token";
 import { fetchGuildApiData } from "@/lib/fetchGuildApi";
+import { resolveIdLikeRequest } from "@/lib/resolveIdLikeRequest";
+import { tryGetParsedToken } from "@/lib/token";
 import type { ErrorLike, WithIdLike } from "@/lib/types";
 import type { Schemas } from "@guildxyz/types";
-import z from "zod";
 
-const resolveIdLikeRequest = (idLike: string) => {
-  const isId = z.string().uuid().safeParse(idLike).success;
-  return `${isId ? "id" : "urlName"}/${idLike}`;
-};
-
-export const leaveGuild = async ({ guildId }: { guildId: string }) => {
+export const fetchGuildLeave = async ({ guildId }: { guildId: string }) => {
   return fetchGuildApiData(`guild/${guildId}/leave`, {
     method: "POST",
   });
 };
 
-export const getGuild = async ({ idLike }: WithIdLike) => {
+export const fetchGuild = async ({ idLike }: WithIdLike) => {
   return fetchGuildApiData<Schemas["GuildFull"]>(
     `guild/${resolveIdLikeRequest(idLike)}`,
   );
 };
 
-export const getEntity = async <Data = object, Error = ErrorLike>({
+export const fetchEntity = async <Data = object, Error = ErrorLike>({
   idLike,
   entity,
   responseInit,
@@ -34,16 +29,16 @@ export const getEntity = async <Data = object, Error = ErrorLike>({
   return fetchGuildApiData<Data, Error>(pathname, responseInit);
 };
 
-export const getUser = async () => {
+export const fetchUser = async () => {
   const { userId } = await tryGetParsedToken();
-  return getEntity<Schemas["UserFull"]>({
+  return fetchEntity<Schemas["UserFull"]>({
     entity: "user",
     idLike: userId,
   });
 };
 
-export const getPages = async ({ guildId }: { guildId: string }) => {
-  const guild = await getGuild({ idLike: guildId });
+export const fetchPages = async ({ guildId }: { guildId: string }) => {
+  const guild = await fetchGuild({ idLike: guildId });
   return fetchGuildApiData<Schemas["PageFull"][]>("page/batch", {
     method: "POST",
     body: JSON.stringify({ ids: guild.pages?.map((p) => p.pageId!) ?? [] }),
diff --git a/src/app/(dashboard)/[guildUrlName]/components/GuildTabs.tsx b/src/app/(dashboard)/[guildUrlName]/components/GuildTabs.tsx
index 6038b8ee46..d4b918f9ac 100644
--- a/src/app/(dashboard)/[guildUrlName]/components/GuildTabs.tsx
+++ b/src/app/(dashboard)/[guildUrlName]/components/GuildTabs.tsx
@@ -2,12 +2,12 @@ import { Card } from "@/components/ui/Card";
 import { ScrollArea, ScrollBar } from "@/components/ui/ScrollArea";
 import { Skeleton } from "@/components/ui/Skeleton";
 import { cn } from "@/lib/cssUtils";
+import { fetchPages } from "@/lib/fetchers";
 import type { Schemas } from "@guildxyz/types";
-import { getPages } from "../actions";
 import { PageNavLink } from "./RoleGroupNavLink";
 
 export const GuildTabs = async ({ guild }: { guild: Schemas["GuildFull"] }) => {
-  const pages = await getPages({ guildId: guild.id });
+  const pages = await fetchPages({ guildId: guild.id });
 
   return (
     <ScrollArea
diff --git a/src/app/(dashboard)/[guildUrlName]/components/JoinButton.tsx b/src/app/(dashboard)/[guildUrlName]/components/JoinButton.tsx
index d53fe4fa48..0636180cbf 100644
--- a/src/app/(dashboard)/[guildUrlName]/components/JoinButton.tsx
+++ b/src/app/(dashboard)/[guildUrlName]/components/JoinButton.tsx
@@ -4,12 +4,12 @@ import { Button } from "@/components/ui/Button";
 import { GUILD_AUTH_COOKIE_NAME } from "@/config/constants";
 import { env } from "@/lib/env";
 import { getCookieClientSide } from "@/lib/getCookieClientSide";
+import { guildOptions, userOptions } from "@/lib/options";
 import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
 import { EventSourcePlus } from "event-source-plus";
 import { useParams } from "next/navigation";
 import { toast } from "sonner";
-import { leaveGuild } from "../actions";
-import { guildOptions, userOptions } from "../options";
+import { fetchGuildLeave } from "../actions";
 
 export const JoinButton = () => {
   const { guildUrlName } = useParams<{ guildUrlName: string }>();
@@ -73,7 +73,7 @@ export const JoinButton = () => {
   });
 
   const leaveMutation = useMutation({
-    mutationFn: () => leaveGuild({ guildId: guild.data.id }),
+    mutationFn: () => fetchGuildLeave({ guildId: guild.data.id }),
     onSuccess: async () => {
       await queryClient.cancelQueries(userOptions());
       const prev = queryClient.getQueryData(userOptions().queryKey);
diff --git a/src/app/(dashboard)/[guildUrlName]/layout.tsx b/src/app/(dashboard)/[guildUrlName]/layout.tsx
index ddabcabbad..bfce7733da 100644
--- a/src/app/(dashboard)/[guildUrlName]/layout.tsx
+++ b/src/app/(dashboard)/[guildUrlName]/layout.tsx
@@ -2,12 +2,12 @@ import { AuthBoundary } from "@/components/AuthBoundary";
 import { GuildImage } from "@/components/GuildImage";
 import { SignInButton } from "@/components/SignInButton";
 import { getQueryClient } from "@/lib/getQueryClient";
+import { guildOptions, userOptions } from "@/lib/options";
 import type { DynamicRoute } from "@/lib/types";
 import { HydrationBoundary, dehydrate } from "@tanstack/react-query";
 import { type PropsWithChildren, Suspense } from "react";
 import { GuildTabs, GuildTabsSkeleton } from "./components/GuildTabs";
 import { JoinButton } from "./components/JoinButton";
-import { guildOptions, userOptions } from "./options";
 
 const GuildLayout = async ({
   params,
diff --git a/src/app/(dashboard)/explorer/actions.ts b/src/app/(dashboard)/explorer/actions.ts
index 6e0334e3b4..0714e4e668 100644
--- a/src/app/(dashboard)/explorer/actions.ts
+++ b/src/app/(dashboard)/explorer/actions.ts
@@ -1,14 +1,13 @@
-"use server";
 import { fetchGuildApiData } from "@/lib/fetchGuildApi";
-import type { Guild } from "@/lib/schemas/guild";
 import type { PaginatedResponse } from "@/lib/types";
+import type { Schemas } from "@guildxyz/types";
 import { PAGE_SIZE } from "./constants";
 
 export const getGuildSearch = async ({
   pageParam,
   search,
 }: { pageParam: number; search: string }) => {
-  return fetchGuildApiData<PaginatedResponse<Guild>>(
+  return fetchGuildApiData<PaginatedResponse<Schemas["GuildFull"]>>(
     `guild/search?page=${pageParam}&pageSize=${PAGE_SIZE}&search=${search}`,
   );
 };
diff --git a/src/app/(dashboard)/explorer/components/GuildCard.tsx b/src/app/(dashboard)/explorer/components/GuildCard.tsx
index 911eba4937..344e8d60a9 100644
--- a/src/app/(dashboard)/explorer/components/GuildCard.tsx
+++ b/src/app/(dashboard)/explorer/components/GuildCard.tsx
@@ -2,13 +2,15 @@ import { GuildImage } from "@/components/GuildImage";
 import { Badge } from "@/components/ui/Badge";
 import { Card } from "@/components/ui/Card";
 import { Skeleton } from "@/components/ui/Skeleton";
-import type { Guild } from "@/lib/schemas/guild";
+import type { Schemas } from "@guildxyz/types";
 import { Users } from "@phosphor-icons/react/dist/ssr";
 
 import Link from "next/link";
 import type { FunctionComponent } from "react";
 
-export const GuildCard: FunctionComponent<{ guild: Guild }> = ({ guild }) => {
+export const GuildCard: FunctionComponent<{ guild: Schemas["GuildFull"] }> = ({
+  guild,
+}) => {
   return (
     <Link
       href={`/${guild.urlName}`}
diff --git a/src/app/(dashboard)/explorer/page.tsx b/src/app/(dashboard)/explorer/page.tsx
index a0918ae079..24825f186f 100644
--- a/src/app/(dashboard)/explorer/page.tsx
+++ b/src/app/(dashboard)/explorer/page.tsx
@@ -1,10 +1,10 @@
-import { tryGetParsedToken } from "@/actions/token";
 import { AuthBoundary } from "@/components/AuthBoundary";
 import { SignInButton } from "@/components/SignInButton";
 import { fetchGuildApiData } from "@/lib/fetchGuildApi";
 import { getQueryClient } from "@/lib/getQueryClient";
-import type { Guild } from "@/lib/schemas/guild";
+import { tryGetParsedToken } from "@/lib/token";
 import type { PaginatedResponse } from "@/lib/types";
+import type { Schemas } from "@guildxyz/types";
 import { HydrationBoundary, dehydrate } from "@tanstack/react-query";
 import { Suspense } from "react";
 import { getGuildSearch } from "./actions";
@@ -19,7 +19,7 @@ import { ACTIVE_SECTION } from "./constants";
 const getAssociatedGuilds = async () => {
   const { userId } = await tryGetParsedToken();
 
-  return fetchGuildApiData<PaginatedResponse<Guild>>(
+  return fetchGuildApiData<PaginatedResponse<Schemas["GuildFull"]>>(
     `guild/search?page=1&pageSize=${Number.MAX_SAFE_INTEGER}&sortBy=name&reverse=false&customQuery=@owner:{${userId}}`,
   );
 };
@@ -108,7 +108,12 @@ async function AssociatedGuildsSection() {
 }
 
 async function AssociatedGuilds() {
-  const { items: associatedGuilds } = await getAssociatedGuilds();
+  let associatedGuilds: Schemas["GuildFull"][];
+  try {
+    associatedGuilds = (await getAssociatedGuilds()).items;
+  } catch {
+    return;
+  }
 
   return associatedGuilds.length > 0 ? (
     <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
diff --git a/src/lib/fetchGuildApi.ts b/src/lib/fetchGuildApi.ts
index 4b70fadc1c..b34565dedb 100644
--- a/src/lib/fetchGuildApi.ts
+++ b/src/lib/fetchGuildApi.ts
@@ -1,4 +1,4 @@
-import { tryGetToken } from "@/actions/token";
+import { tryGetToken } from "@/lib/token";
 import { env } from "./env";
 import type { ErrorLike } from "./types";
 
diff --git a/src/lib/fetchers.ts b/src/lib/fetchers.ts
new file mode 100644
index 0000000000..5247218483
--- /dev/null
+++ b/src/lib/fetchers.ts
@@ -0,0 +1,46 @@
+import { fetchGuildApiData } from "@/lib/fetchGuildApi";
+import { resolveIdLikeRequest } from "@/lib/resolveIdLikeRequest";
+import { tryGetParsedToken } from "@/lib/token";
+import type { ErrorLike, WithIdLike } from "@/lib/types";
+import type { Schemas } from "@guildxyz/types";
+
+export const fetchGuildLeave = async ({ guildId }: { guildId: string }) => {
+  return fetchGuildApiData(`guild/${guildId}/leave`, {
+    method: "POST",
+  });
+};
+
+export const fetchGuild = async ({ idLike }: WithIdLike) => {
+  return fetchGuildApiData<Schemas["GuildFull"]>(
+    `guild/${resolveIdLikeRequest(idLike)}`,
+  );
+};
+
+export const fetchEntity = async <Data = object, Error = ErrorLike>({
+  idLike,
+  entity,
+  responseInit,
+}: {
+  entity: string;
+  idLike: string;
+  responseInit?: Parameters<typeof fetch>[1];
+}) => {
+  const pathname = `${entity}/${resolveIdLikeRequest(idLike)}`;
+  return fetchGuildApiData<Data, Error>(pathname, responseInit);
+};
+
+export const fetchUser = async () => {
+  const { userId } = await tryGetParsedToken();
+  return fetchEntity<Schemas["UserFull"]>({
+    entity: "user",
+    idLike: userId,
+  });
+};
+
+export const fetchPages = async ({ guildId }: { guildId: string }) => {
+  const guild = await fetchGuild({ idLike: guildId });
+  return fetchGuildApiData<Schemas["PageFull"][]>("page/batch", {
+    method: "POST",
+    body: JSON.stringify({ ids: guild.pages?.map((p) => p.pageId!) ?? [] }),
+  });
+};
diff --git a/src/app/(dashboard)/[guildUrlName]/options.ts b/src/lib/options.ts
similarity index 75%
rename from src/app/(dashboard)/[guildUrlName]/options.ts
rename to src/lib/options.ts
index 9cc252fa29..1901a057d0 100644
--- a/src/app/(dashboard)/[guildUrlName]/options.ts
+++ b/src/lib/options.ts
@@ -1,16 +1,16 @@
+import { fetchEntity, fetchUser } from "@/lib/fetchers";
 import type { ErrorLike } from "@/lib/types";
 import type { Schemas } from "@guildxyz/types";
 import { queryOptions } from "@tanstack/react-query";
-import { getEntity, getUser } from "./actions";
 
 export const entityOptions = <Data = object, Error = ErrorLike>({
   entity,
   idLike,
   ...rest
-}: Parameters<typeof getEntity>[0]) => {
+}: Parameters<typeof fetchEntity>[0]) => {
   return queryOptions<Data, Error>({
     queryKey: [entity, idLike],
-    queryFn: () => getEntity({ entity, idLike, ...rest }),
+    queryFn: () => fetchEntity({ entity, idLike, ...rest }),
   });
 };
 
@@ -24,6 +24,6 @@ export const guildOptions = ({ idLike }: { idLike: string }) => {
 export const userOptions = () => {
   return queryOptions<Schemas["UserFull"]>({
     queryKey: ["user"],
-    queryFn: () => getUser(),
+    queryFn: () => fetchUser(),
   });
 };
diff --git a/src/lib/resolveIdLikeRequest.ts b/src/lib/resolveIdLikeRequest.ts
new file mode 100644
index 0000000000..46cc0d4c38
--- /dev/null
+++ b/src/lib/resolveIdLikeRequest.ts
@@ -0,0 +1,6 @@
+import z from "zod";
+
+export const resolveIdLikeRequest = (idLike: string) => {
+  const isId = z.string().uuid().safeParse(idLike).success;
+  return `${isId ? "id" : "urlName"}/${idLike}`;
+};
diff --git a/src/lib/token.ts b/src/lib/token.ts
new file mode 100644
index 0000000000..0c144c08c5
--- /dev/null
+++ b/src/lib/token.ts
@@ -0,0 +1,21 @@
+import { getTokenServerSide } from "@/actions/auth";
+import { getTokenClientSide } from "@/lib/getCookieClientSide";
+import { tokenSchema } from "@/lib/schemas/user";
+import { isServer } from "@tanstack/react-query";
+import { jwtDecode } from "jwt-decode";
+
+export const tryGetToken = async () => {
+  const token = isServer ? await getTokenServerSide() : getTokenClientSide();
+
+  if (!token) {
+    throw new Error(
+      "Failed to retrieve JWT token on auth request initialization.",
+    );
+  }
+  return token;
+};
+
+export const tryGetParsedToken = async () => {
+  const token = await tryGetToken();
+  return tokenSchema.parse(jwtDecode(token));
+};
diff --git a/src/v2/components/ui/Button.tsx b/src/v2/components/ui/Button.tsx
new file mode 100644
index 0000000000..e69de29bb2

From 34a917774df3f436306d2439bdd981975aa54c71 Mon Sep 17 00:00:00 2001
From: Dominik Stumpf <s.dominik.work@gmail.com>
Date: Wed, 4 Dec 2024 09:37:58 +0100
Subject: [PATCH 58/93] chore: remove token on 401, remove empty file

---
 src/actions/token.ts     | 0
 src/lib/fetchGuildApi.ts | 5 +++++
 2 files changed, 5 insertions(+)
 delete mode 100644 src/actions/token.ts

diff --git a/src/actions/token.ts b/src/actions/token.ts
deleted file mode 100644
index e69de29bb2..0000000000
diff --git a/src/lib/fetchGuildApi.ts b/src/lib/fetchGuildApi.ts
index b34565dedb..43852f6a63 100644
--- a/src/lib/fetchGuildApi.ts
+++ b/src/lib/fetchGuildApi.ts
@@ -1,3 +1,4 @@
+import { signOut } from "@/actions/auth";
 import { tryGetToken } from "@/lib/token";
 import { env } from "./env";
 import type { ErrorLike } from "./types";
@@ -85,6 +86,10 @@ export const fetchGuildApi = async <Data = object, Error = ErrorLike>(
     headers,
   });
 
+  if (response.status === 401) {
+    signOut();
+  }
+
   const contentType = response.headers.get("content-type");
   if (!contentType?.includes("application/json")) {
     throw new Error("Guild API failed to respond with json");

From b8e12cd83a9d945ef4501ad485dfd9170527b4c3 Mon Sep 17 00:00:00 2001
From: Dominik Stumpf <s.dominik.work@gmail.com>
Date: Wed, 4 Dec 2024 09:39:53 +0100
Subject: [PATCH 59/93] chore: update types package

---
 package.json                                  |  2 +-
 .../[guildUrlName]/[pageUrlName]/page.tsx     | 29 +++++++++----------
 src/app/(dashboard)/[guildUrlName]/actions.ts |  6 ++--
 .../[guildUrlName]/components/GuildTabs.tsx   |  2 +-
 src/app/(dashboard)/explorer/actions.ts       |  2 +-
 .../explorer/components/GuildCard.tsx         |  2 +-
 src/app/(dashboard)/explorer/page.tsx         |  4 +--
 src/lib/fetchers.ts                           |  6 ++--
 src/lib/options.ts                            |  4 +--
 9 files changed, 27 insertions(+), 30 deletions(-)

diff --git a/package.json b/package.json
index b8bf563ff6..e55151a33d 100644
--- a/package.json
+++ b/package.json
@@ -13,7 +13,7 @@
     "build-storybook": "storybook build"
   },
   "dependencies": {
-    "@guildxyz/types": "^3.0.8",
+    "@guildxyz/types": "^3.0.9",
     "@hookform/resolvers": "^3.9.1",
     "@phosphor-icons/react": "^2.1.7",
     "@radix-ui/react-avatar": "^1.1.1",
diff --git a/src/app/(dashboard)/[guildUrlName]/[pageUrlName]/page.tsx b/src/app/(dashboard)/[guildUrlName]/[pageUrlName]/page.tsx
index 7883680487..ac2b9d02f0 100644
--- a/src/app/(dashboard)/[guildUrlName]/[pageUrlName]/page.tsx
+++ b/src/app/(dashboard)/[guildUrlName]/[pageUrlName]/page.tsx
@@ -10,15 +10,15 @@ const GuildPage = async ({
   params,
 }: DynamicRoute<{ pageUrlName: string; guildUrlName: string }>) => {
   const { pageUrlName, guildUrlName } = await params;
-  const guild = await fetchGuildApiData<Schemas["GuildFull"]>(
+  const guild = await fetchGuildApiData<Schemas["Guild"]>(
     `guild/urlName/${guildUrlName}`,
   );
-  const pages = await fetchGuildApiData<Schemas["PageFull"][]>("page/batch", {
+  const pages = await fetchGuildApiData<Schemas["Page"][]>("page/batch", {
     method: "POST",
     body: JSON.stringify({ ids: guild.pages?.map((p) => p.pageId!) ?? [] }),
   });
   const page = pages.find((p) => p.urlName === pageUrlName)!;
-  const roles = await fetchGuildApiData<Schemas["RoleFull"][]>("role/batch", {
+  const roles = await fetchGuildApiData<Schemas["Role"][]>("role/batch", {
     method: "POST",
     body: JSON.stringify({
       ids: page.roles?.map((r) => r.roleId!) ?? [],
@@ -34,19 +34,16 @@ const GuildPage = async ({
   );
 };
 
-const RoleCard = async ({ role }: { role: Schemas["RoleFull"] }) => {
-  const rewards = await fetchGuildApiData<Schemas["RewardFull"][]>(
-    "reward/batch",
-    {
-      method: "POST",
-      body: JSON.stringify({
-        ids: role.rewards?.map((r) => r.rewardId!) ?? [],
-      }),
-      headers: {
-        "Content-Type": "application/json",
-      },
+const RoleCard = async ({ role }: { role: Schemas["Role"] }) => {
+  const rewards = await fetchGuildApiData<Schemas["Reward"][]>("reward/batch", {
+    method: "POST",
+    body: JSON.stringify({
+      ids: role.rewards?.map((r) => r.rewardId!) ?? [],
+    }),
+    headers: {
+      "Content-Type": "application/json",
     },
-  );
+  });
 
   return (
     <Card className="flex flex-col md:flex-row" key={role.id}>
@@ -89,7 +86,7 @@ const RoleCard = async ({ role }: { role: Schemas["RoleFull"] }) => {
   );
 };
 
-const Reward = ({ reward }: { reward: Schemas["RewardFull"] }) => {
+const Reward = ({ reward }: { reward: Schemas["Reward"] }) => {
   return (
     <div className="border-b p-4 last:border-b-0">
       <div className="mb-2 font-medium">{reward.name}</div>
diff --git a/src/app/(dashboard)/[guildUrlName]/actions.ts b/src/app/(dashboard)/[guildUrlName]/actions.ts
index 5247218483..6f15e7399e 100644
--- a/src/app/(dashboard)/[guildUrlName]/actions.ts
+++ b/src/app/(dashboard)/[guildUrlName]/actions.ts
@@ -11,7 +11,7 @@ export const fetchGuildLeave = async ({ guildId }: { guildId: string }) => {
 };
 
 export const fetchGuild = async ({ idLike }: WithIdLike) => {
-  return fetchGuildApiData<Schemas["GuildFull"]>(
+  return fetchGuildApiData<Schemas["Guild"]>(
     `guild/${resolveIdLikeRequest(idLike)}`,
   );
 };
@@ -31,7 +31,7 @@ export const fetchEntity = async <Data = object, Error = ErrorLike>({
 
 export const fetchUser = async () => {
   const { userId } = await tryGetParsedToken();
-  return fetchEntity<Schemas["UserFull"]>({
+  return fetchEntity<Schemas["User"]>({
     entity: "user",
     idLike: userId,
   });
@@ -39,7 +39,7 @@ export const fetchUser = async () => {
 
 export const fetchPages = async ({ guildId }: { guildId: string }) => {
   const guild = await fetchGuild({ idLike: guildId });
-  return fetchGuildApiData<Schemas["PageFull"][]>("page/batch", {
+  return fetchGuildApiData<Schemas["Page"][]>("page/batch", {
     method: "POST",
     body: JSON.stringify({ ids: guild.pages?.map((p) => p.pageId!) ?? [] }),
   });
diff --git a/src/app/(dashboard)/[guildUrlName]/components/GuildTabs.tsx b/src/app/(dashboard)/[guildUrlName]/components/GuildTabs.tsx
index d4b918f9ac..6245a41ed8 100644
--- a/src/app/(dashboard)/[guildUrlName]/components/GuildTabs.tsx
+++ b/src/app/(dashboard)/[guildUrlName]/components/GuildTabs.tsx
@@ -6,7 +6,7 @@ import { fetchPages } from "@/lib/fetchers";
 import type { Schemas } from "@guildxyz/types";
 import { PageNavLink } from "./RoleGroupNavLink";
 
-export const GuildTabs = async ({ guild }: { guild: Schemas["GuildFull"] }) => {
+export const GuildTabs = async ({ guild }: { guild: Schemas["Guild"] }) => {
   const pages = await fetchPages({ guildId: guild.id });
 
   return (
diff --git a/src/app/(dashboard)/explorer/actions.ts b/src/app/(dashboard)/explorer/actions.ts
index 0714e4e668..c7f1184f5b 100644
--- a/src/app/(dashboard)/explorer/actions.ts
+++ b/src/app/(dashboard)/explorer/actions.ts
@@ -7,7 +7,7 @@ export const getGuildSearch = async ({
   pageParam,
   search,
 }: { pageParam: number; search: string }) => {
-  return fetchGuildApiData<PaginatedResponse<Schemas["GuildFull"]>>(
+  return fetchGuildApiData<PaginatedResponse<Schemas["Guild"]>>(
     `guild/search?page=${pageParam}&pageSize=${PAGE_SIZE}&search=${search}`,
   );
 };
diff --git a/src/app/(dashboard)/explorer/components/GuildCard.tsx b/src/app/(dashboard)/explorer/components/GuildCard.tsx
index 344e8d60a9..7f2901b4ed 100644
--- a/src/app/(dashboard)/explorer/components/GuildCard.tsx
+++ b/src/app/(dashboard)/explorer/components/GuildCard.tsx
@@ -8,7 +8,7 @@ import { Users } from "@phosphor-icons/react/dist/ssr";
 import Link from "next/link";
 import type { FunctionComponent } from "react";
 
-export const GuildCard: FunctionComponent<{ guild: Schemas["GuildFull"] }> = ({
+export const GuildCard: FunctionComponent<{ guild: Schemas["Guild"] }> = ({
   guild,
 }) => {
   return (
diff --git a/src/app/(dashboard)/explorer/page.tsx b/src/app/(dashboard)/explorer/page.tsx
index 24825f186f..e429bbab0e 100644
--- a/src/app/(dashboard)/explorer/page.tsx
+++ b/src/app/(dashboard)/explorer/page.tsx
@@ -19,7 +19,7 @@ import { ACTIVE_SECTION } from "./constants";
 const getAssociatedGuilds = async () => {
   const { userId } = await tryGetParsedToken();
 
-  return fetchGuildApiData<PaginatedResponse<Schemas["GuildFull"]>>(
+  return fetchGuildApiData<PaginatedResponse<Schemas["Guild"]>>(
     `guild/search?page=1&pageSize=${Number.MAX_SAFE_INTEGER}&sortBy=name&reverse=false&customQuery=@owner:{${userId}}`,
   );
 };
@@ -108,7 +108,7 @@ async function AssociatedGuildsSection() {
 }
 
 async function AssociatedGuilds() {
-  let associatedGuilds: Schemas["GuildFull"][];
+  let associatedGuilds: Schemas["Guild"][];
   try {
     associatedGuilds = (await getAssociatedGuilds()).items;
   } catch {
diff --git a/src/lib/fetchers.ts b/src/lib/fetchers.ts
index 5247218483..6f15e7399e 100644
--- a/src/lib/fetchers.ts
+++ b/src/lib/fetchers.ts
@@ -11,7 +11,7 @@ export const fetchGuildLeave = async ({ guildId }: { guildId: string }) => {
 };
 
 export const fetchGuild = async ({ idLike }: WithIdLike) => {
-  return fetchGuildApiData<Schemas["GuildFull"]>(
+  return fetchGuildApiData<Schemas["Guild"]>(
     `guild/${resolveIdLikeRequest(idLike)}`,
   );
 };
@@ -31,7 +31,7 @@ export const fetchEntity = async <Data = object, Error = ErrorLike>({
 
 export const fetchUser = async () => {
   const { userId } = await tryGetParsedToken();
-  return fetchEntity<Schemas["UserFull"]>({
+  return fetchEntity<Schemas["User"]>({
     entity: "user",
     idLike: userId,
   });
@@ -39,7 +39,7 @@ export const fetchUser = async () => {
 
 export const fetchPages = async ({ guildId }: { guildId: string }) => {
   const guild = await fetchGuild({ idLike: guildId });
-  return fetchGuildApiData<Schemas["PageFull"][]>("page/batch", {
+  return fetchGuildApiData<Schemas["Page"][]>("page/batch", {
     method: "POST",
     body: JSON.stringify({ ids: guild.pages?.map((p) => p.pageId!) ?? [] }),
   });
diff --git a/src/lib/options.ts b/src/lib/options.ts
index 1901a057d0..4ac8c44e38 100644
--- a/src/lib/options.ts
+++ b/src/lib/options.ts
@@ -15,14 +15,14 @@ export const entityOptions = <Data = object, Error = ErrorLike>({
 };
 
 export const guildOptions = ({ idLike }: { idLike: string }) => {
-  return entityOptions<Schemas["GuildFull"]>({
+  return entityOptions<Schemas["Guild"]>({
     entity: "guild",
     idLike,
   });
 };
 
 export const userOptions = () => {
-  return queryOptions<Schemas["UserFull"]>({
+  return queryOptions<Schemas["User"]>({
     queryKey: ["user"],
     queryFn: () => fetchUser(),
   });

From debff3c311e7ca1718d4bf4690a610c9dea484d9 Mon Sep 17 00:00:00 2001
From: Dominik Stumpf <s.dominik.work@gmail.com>
Date: Wed, 4 Dec 2024 09:44:41 +0100
Subject: [PATCH 60/93] fix: use QueryClient wrapper on provider, invalidate on
 join

---
 src/app/(dashboard)/[guildUrlName]/components/JoinButton.tsx | 1 +
 src/components/Providers.tsx                                 | 5 +++--
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/app/(dashboard)/[guildUrlName]/components/JoinButton.tsx b/src/app/(dashboard)/[guildUrlName]/components/JoinButton.tsx
index 0636180cbf..f50dd78fe3 100644
--- a/src/app/(dashboard)/[guildUrlName]/components/JoinButton.tsx
+++ b/src/app/(dashboard)/[guildUrlName]/components/JoinButton.tsx
@@ -69,6 +69,7 @@ export const JoinButton = () => {
           guilds: prev?.guilds?.concat({ guildId: guild.data.id }),
         });
       }
+      queryClient.invalidateQueries(userOptions());
     },
   });
 
diff --git a/src/components/Providers.tsx b/src/components/Providers.tsx
index 4e3f8a2e22..4f326bf438 100644
--- a/src/components/Providers.tsx
+++ b/src/components/Providers.tsx
@@ -1,7 +1,8 @@
 "use client";
 
 import { wagmiConfig } from "@/config/wagmi";
-import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { getQueryClient } from "@/lib/getQueryClient";
+import { QueryClientProvider } from "@tanstack/react-query";
 import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
 import { Provider as JotaiProvider } from "jotai";
 import { ThemeProvider } from "next-themes";
@@ -9,7 +10,7 @@ import type { FunctionComponent, PropsWithChildren } from "react";
 import { WagmiProvider } from "wagmi";
 import { TooltipProvider } from "./ui/Tooltip";
 
-const queryClient = new QueryClient();
+const queryClient = getQueryClient();
 
 export const Providers: FunctionComponent<PropsWithChildren> = ({
   children,

From ed7e5e0f2acd32f1d0140478937f3266d6dc6a2b Mon Sep 17 00:00:00 2001
From: Dominik Stumpf <s.dominik.work@gmail.com>
Date: Wed, 4 Dec 2024 09:54:05 +0100
Subject: [PATCH 61/93] fix: move query client retrieval inside component

---
 src/components/Providers.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/Providers.tsx b/src/components/Providers.tsx
index 4f326bf438..51c80a8193 100644
--- a/src/components/Providers.tsx
+++ b/src/components/Providers.tsx
@@ -10,11 +10,11 @@ import type { FunctionComponent, PropsWithChildren } from "react";
 import { WagmiProvider } from "wagmi";
 import { TooltipProvider } from "./ui/Tooltip";
 
-const queryClient = getQueryClient();
-
 export const Providers: FunctionComponent<PropsWithChildren> = ({
   children,
 }) => {
+  const queryClient = getQueryClient();
+
   return (
     <JotaiProvider>
       <ThemeProvider

From cbd681ff40bafedb8cbaa4c14b18952f7b6da571 Mon Sep 17 00:00:00 2001
From: BrickheadJohnny <johnny.zgen@gmail.com>
Date: Wed, 4 Dec 2024 11:04:47 +0100
Subject: [PATCH 62/93] cleanup: remove empty Button component

---
 src/v2/components/ui/Button.tsx | 0
 1 file changed, 0 insertions(+), 0 deletions(-)
 delete mode 100644 src/v2/components/ui/Button.tsx

diff --git a/src/v2/components/ui/Button.tsx b/src/v2/components/ui/Button.tsx
deleted file mode 100644
index e69de29bb2..0000000000

From 5c7d3108cc04ee5d2abb985e3171e8f8752b84cd Mon Sep 17 00:00:00 2001
From: Dominik Stumpf <s.dominik.work@gmail.com>
Date: Wed, 4 Dec 2024 11:19:45 +0100
Subject: [PATCH 63/93] fix: validate join flow using event stream

---
 .../[guildUrlName]/components/JoinButton.tsx  | 35 +++++++++++++------
 1 file changed, 24 insertions(+), 11 deletions(-)

diff --git a/src/app/(dashboard)/[guildUrlName]/components/JoinButton.tsx b/src/app/(dashboard)/[guildUrlName]/components/JoinButton.tsx
index f50dd78fe3..bdaf1a5aa5 100644
--- a/src/app/(dashboard)/[guildUrlName]/components/JoinButton.tsx
+++ b/src/app/(dashboard)/[guildUrlName]/components/JoinButton.tsx
@@ -5,6 +5,7 @@ import { GUILD_AUTH_COOKIE_NAME } from "@/config/constants";
 import { env } from "@/lib/env";
 import { getCookieClientSide } from "@/lib/getCookieClientSide";
 import { guildOptions, userOptions } from "@/lib/options";
+import type { Schemas } from "@guildxyz/types";
 import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
 import { EventSourcePlus } from "event-source-plus";
 import { useParams } from "next/navigation";
@@ -43,11 +44,25 @@ export const JoinButton = () => {
         },
       });
 
+      const { resolve, reject, promise } =
+        Promise.withResolvers<Schemas["User"]>();
       eventSource.listen({
         onMessage: (sseMessage) => {
           try {
-            // biome-ignore lint/suspicious/noExplicitAny: TODO: fill missing types
-            const { status, message } = JSON.parse(sseMessage.data) as any;
+            const { status, message, data } = JSON.parse(
+              sseMessage.data,
+              // biome-ignore lint/suspicious/noExplicitAny: TODO: fill missing types
+            ) as any;
+            if (status === "complete") {
+              if (data === undefined) {
+                throw new Error(
+                  "Server responded with success, but returned no user",
+                );
+              }
+              resolve(data);
+            } else if (status === "error") {
+              reject();
+            }
             const toastFunction =
               status === "complete" ? toast.success : toast.info;
             toastFunction(status, {
@@ -55,20 +70,18 @@ export const JoinButton = () => {
               richColors: status === "complete",
             });
           } catch (e) {
-            console.log("json parsing failed on join event stream", e);
+            console.warn("JSON parsing failed on join event stream", e);
           }
         },
       });
+
+      return promise;
     },
-    onSuccess: async () => {
+    onSuccess: async (user) => {
       await queryClient.cancelQueries(userOptions());
-      const prev = queryClient.getQueryData(userOptions().queryKey);
-      if (prev) {
-        queryClient.setQueryData(userOptions().queryKey, {
-          ...prev,
-          guilds: prev?.guilds?.concat({ guildId: guild.data.id }),
-        });
-      }
+      queryClient.setQueryData(userOptions().queryKey, user);
+    },
+    onSettled: () => {
       queryClient.invalidateQueries(userOptions());
     },
   });

From d9c46d2431b9e5911ae45b4639735b42a88730a3 Mon Sep 17 00:00:00 2001
From: Dominik Stumpf <s.dominik.work@gmail.com>
Date: Wed, 4 Dec 2024 15:38:12 +0100
Subject: [PATCH 64/93] refactor: use tanstack query on explorer

---
 .../explorer/components/AssociatedGuilds.tsx  | 40 ++++++++++
 .../components/InfiniteScrollGuilds.tsx       | 15 +---
 .../explorer/{actions.ts => fetchers.ts}      | 10 ++-
 src/app/(dashboard)/explorer/layout.tsx       | 21 ++++++
 src/app/(dashboard)/explorer/options.ts       | 23 ++++++
 src/app/(dashboard)/explorer/page.tsx         | 74 ++-----------------
 6 files changed, 103 insertions(+), 80 deletions(-)
 create mode 100644 src/app/(dashboard)/explorer/components/AssociatedGuilds.tsx
 rename src/app/(dashboard)/explorer/{actions.ts => fetchers.ts} (52%)
 create mode 100644 src/app/(dashboard)/explorer/layout.tsx
 create mode 100644 src/app/(dashboard)/explorer/options.ts

diff --git a/src/app/(dashboard)/explorer/components/AssociatedGuilds.tsx b/src/app/(dashboard)/explorer/components/AssociatedGuilds.tsx
new file mode 100644
index 0000000000..2d278c316b
--- /dev/null
+++ b/src/app/(dashboard)/explorer/components/AssociatedGuilds.tsx
@@ -0,0 +1,40 @@
+"use client";
+
+import { useSuspenseQuery } from "@tanstack/react-query";
+import { associatedGuildsOption } from "../options";
+import { CreateGuildLink } from "./CreateGuildLink";
+import { GuildCard, GuildCardSkeleton } from "./GuildCard";
+
+export const AssociatedGuilds = () => {
+  const { data: associatedGuilds } = useSuspenseQuery(associatedGuildsOption());
+
+  return associatedGuilds.length > 0 ? (
+    <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
+      {associatedGuilds.map((guild) => (
+        <GuildCard key={guild.id} guild={guild} />
+      ))}
+    </div>
+  ) : (
+    <div className="flex items-center gap-4 rounded-2xl bg-card px-5 py-6">
+      <img src="/images/robot.svg" alt="Guild Robot" className="size-8" />
+
+      <p className="font-semibold">
+        You&apos;re not a member of any guilds yet. Explore and join some below,
+        or create your own!
+      </p>
+
+      <CreateGuildLink className="ml-auto" />
+    </div>
+  );
+};
+
+export const AssociatedGuildsSkeleton = () => {
+  return (
+    <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
+      {Array.from({ length: 3 }, (_, i) => (
+        // biome-ignore lint/suspicious/noArrayIndexKey: <explanation>
+        <GuildCardSkeleton key={i} />
+      ))}
+    </div>
+  );
+};
diff --git a/src/app/(dashboard)/explorer/components/InfiniteScrollGuilds.tsx b/src/app/(dashboard)/explorer/components/InfiniteScrollGuilds.tsx
index dc3df58e4b..4078a7b89d 100644
--- a/src/app/(dashboard)/explorer/components/InfiniteScrollGuilds.tsx
+++ b/src/app/(dashboard)/explorer/components/InfiniteScrollGuilds.tsx
@@ -4,26 +4,15 @@ import { useInfiniteQuery } from "@tanstack/react-query";
 import { useIntersection } from "foxact/use-intersection";
 import { useAtomValue } from "jotai";
 import { useCallback, useEffect } from "react";
-import { getGuildSearch } from "../actions";
 import { searchAtom } from "../atoms";
 import { PAGE_SIZE } from "../constants";
+import { guildSearchOptions } from "../options";
 import { GuildCard, GuildCardSkeleton } from "./GuildCard";
 
 export const InfiniteScrollGuilds = () => {
   const search = useAtomValue(searchAtom);
   const { data, fetchNextPage, hasNextPage, isFetchingNextPage, isLoading } =
-    useInfiniteQuery({
-      queryKey: ["guilds", search || ""],
-      queryFn: ({ pageParam }) =>
-        getGuildSearch({ search: search || "", pageParam }),
-      initialPageParam: 1,
-      staleTime: Number.POSITIVE_INFINITY,
-      enabled: search !== undefined,
-      getNextPageParam: (lastPage) =>
-        lastPage.total / lastPage.pageSize <= lastPage.page
-          ? undefined
-          : lastPage.page + 1,
-    });
+    useInfiniteQuery(guildSearchOptions({ search }));
 
   const [setIntersection, isIntersected, resetIsIntersected] = useIntersection({
     rootMargin: "700px",
diff --git a/src/app/(dashboard)/explorer/actions.ts b/src/app/(dashboard)/explorer/fetchers.ts
similarity index 52%
rename from src/app/(dashboard)/explorer/actions.ts
rename to src/app/(dashboard)/explorer/fetchers.ts
index c7f1184f5b..f9e275d2f1 100644
--- a/src/app/(dashboard)/explorer/actions.ts
+++ b/src/app/(dashboard)/explorer/fetchers.ts
@@ -1,9 +1,17 @@
 import { fetchGuildApiData } from "@/lib/fetchGuildApi";
+import { tryGetParsedToken } from "@/lib/token";
 import type { PaginatedResponse } from "@/lib/types";
 import type { Schemas } from "@guildxyz/types";
 import { PAGE_SIZE } from "./constants";
 
-export const getGuildSearch = async ({
+export const fetchAssociatedGuilds = async () => {
+  const { userId } = await tryGetParsedToken();
+  return fetchGuildApiData<PaginatedResponse<Schemas["Guild"]>>(
+    `guild/search?page=1&pageSize=${Number.MAX_SAFE_INTEGER}&sortBy=name&reverse=false&customQuery=@owner:{${userId}}`,
+  );
+};
+
+export const fetchGuildSearch = async ({
   pageParam,
   search,
 }: { pageParam: number; search: string }) => {
diff --git a/src/app/(dashboard)/explorer/layout.tsx b/src/app/(dashboard)/explorer/layout.tsx
new file mode 100644
index 0000000000..8937d8e7f1
--- /dev/null
+++ b/src/app/(dashboard)/explorer/layout.tsx
@@ -0,0 +1,21 @@
+import { getQueryClient } from "@/lib/getQueryClient";
+import { HydrationBoundary, dehydrate } from "@tanstack/react-query";
+import type { PropsWithChildren } from "react";
+import { associatedGuildsOption, guildSearchOptions } from "./options";
+
+const ExplorerLayout = async ({ children }: PropsWithChildren) => {
+  const queryClient = getQueryClient();
+  void queryClient.prefetchInfiniteQuery(
+    guildSearchOptions({}),
+    //queryFn: () => fetchGuildSearch({ search: "", pageParam: 1 }),
+  );
+  void queryClient.prefetchQuery(associatedGuildsOption());
+
+  return (
+    <HydrationBoundary state={dehydrate(queryClient)}>
+      {children}
+    </HydrationBoundary>
+  );
+};
+
+export default ExplorerLayout;
diff --git a/src/app/(dashboard)/explorer/options.ts b/src/app/(dashboard)/explorer/options.ts
new file mode 100644
index 0000000000..95e3cad38e
--- /dev/null
+++ b/src/app/(dashboard)/explorer/options.ts
@@ -0,0 +1,23 @@
+import { infiniteQueryOptions, queryOptions } from "@tanstack/react-query";
+import { fetchAssociatedGuilds, fetchGuildSearch } from "./fetchers";
+
+export const associatedGuildsOption = () => {
+  return queryOptions({
+    queryKey: ["associatedGuilds"],
+    queryFn: () => fetchAssociatedGuilds(),
+    select: (data) => data.items,
+  });
+};
+
+export const guildSearchOptions = ({ search = "" }: { search?: string }) => {
+  return infiniteQueryOptions({
+    queryKey: ["guilds", search],
+    queryFn: ({ pageParam }) => fetchGuildSearch({ search: search, pageParam }),
+    initialPageParam: 1,
+    enabled: search !== undefined,
+    getNextPageParam: (lastPage) =>
+      lastPage.total / lastPage.pageSize <= lastPage.page
+        ? undefined
+        : lastPage.page + 1,
+  });
+};
diff --git a/src/app/(dashboard)/explorer/page.tsx b/src/app/(dashboard)/explorer/page.tsx
index e429bbab0e..4359238757 100644
--- a/src/app/(dashboard)/explorer/page.tsx
+++ b/src/app/(dashboard)/explorer/page.tsx
@@ -1,37 +1,18 @@
 import { AuthBoundary } from "@/components/AuthBoundary";
 import { SignInButton } from "@/components/SignInButton";
-import { fetchGuildApiData } from "@/lib/fetchGuildApi";
-import { getQueryClient } from "@/lib/getQueryClient";
-import { tryGetParsedToken } from "@/lib/token";
-import type { PaginatedResponse } from "@/lib/types";
-import type { Schemas } from "@guildxyz/types";
-import { HydrationBoundary, dehydrate } from "@tanstack/react-query";
 import { Suspense } from "react";
-import { getGuildSearch } from "./actions";
+import {
+  AssociatedGuilds,
+  AssociatedGuildsSkeleton,
+} from "./components/AssociatedGuilds";
 import { CreateGuildLink } from "./components/CreateGuildLink";
-import { GuildCard, GuildCardSkeleton } from "./components/GuildCard";
 import { HeaderBackground } from "./components/HeaderBackground";
 import { InfiniteScrollGuilds } from "./components/InfiniteScrollGuilds";
 import { StickyNavbar } from "./components/StickyNavbar";
 import { StickySearch } from "./components/StickySearch";
 import { ACTIVE_SECTION } from "./constants";
 
-const getAssociatedGuilds = async () => {
-  const { userId } = await tryGetParsedToken();
-
-  return fetchGuildApiData<PaginatedResponse<Schemas["Guild"]>>(
-    `guild/search?page=1&pageSize=${Number.MAX_SAFE_INTEGER}&sortBy=name&reverse=false&customQuery=@owner:{${userId}}`,
-  );
-};
-
-export default async function Explorer() {
-  const queryClient = getQueryClient();
-  await queryClient.prefetchInfiniteQuery({
-    queryKey: ["guilds", ""],
-    initialPageParam: 1,
-    queryFn: () => getGuildSearch({ search: "", pageParam: 1 }),
-  });
-
+const Explorer = async () => {
   return (
     <>
       <div
@@ -69,13 +50,11 @@ export default async function Explorer() {
         </h2>
         <StickySearch />
 
-        <HydrationBoundary state={dehydrate(queryClient)}>
-          <InfiniteScrollGuilds />
-        </HydrationBoundary>
+        <InfiniteScrollGuilds />
       </main>
     </>
   );
-}
+};
 
 async function AssociatedGuildsSection() {
   return (
@@ -107,41 +86,4 @@ async function AssociatedGuildsSection() {
   );
 }
 
-async function AssociatedGuilds() {
-  let associatedGuilds: Schemas["Guild"][];
-  try {
-    associatedGuilds = (await getAssociatedGuilds()).items;
-  } catch {
-    return;
-  }
-
-  return associatedGuilds.length > 0 ? (
-    <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
-      {associatedGuilds.map((guild) => (
-        <GuildCard key={guild.id} guild={guild} />
-      ))}
-    </div>
-  ) : (
-    <div className="flex items-center gap-4 rounded-2xl bg-card px-5 py-6">
-      <img src="/images/robot.svg" alt="Guild Robot" className="size-8" />
-
-      <p className="font-semibold">
-        You&apos;re not a member of any guilds yet. Explore and join some below,
-        or create your own!
-      </p>
-
-      <CreateGuildLink className="ml-auto" />
-    </div>
-  );
-}
-
-function AssociatedGuildsSkeleton() {
-  return (
-    <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
-      {Array.from({ length: 3 }, (_, i) => (
-        // biome-ignore lint/suspicious/noArrayIndexKey: <explanation>
-        <GuildCardSkeleton key={i} />
-      ))}
-    </div>
-  );
-}
+export default Explorer;

From 4529d6cf27d2f32eacc960bf234a53bad5398115 Mon Sep 17 00:00:00 2001
From: BrickheadJohnny <92519134+BrickheadJohnny@users.noreply.github.com>
Date: Wed, 4 Dec 2024 17:25:38 +0100
Subject: [PATCH 65/93] feat: requirements (#1572)

* wip: first working solution

* feat: role and rule schemas

* feat: RequirementDisplayComponent

* fix(RoleSchema): remove unused props

* cleanup: remove the unused `LogicSchema`

* feat: fallback for unsupported nodes

* cleanup: move out constants to a `constants.ts` filee
---
 .../[guildUrlName]/[pageUrlName]/page.tsx     |  20 ++-
 .../RequirementDisplayComponent.tsx           | 151 ++++++++++++++++++
 src/components/requirements/constants.ts      |   2 +
 src/lib/schemas/common.ts                     |   2 -
 src/lib/schemas/role.ts                       |  25 +--
 src/lib/schemas/rule.ts                       |  63 ++++++++
 6 files changed, 246 insertions(+), 17 deletions(-)
 create mode 100644 src/components/requirements/RequirementDisplayComponent.tsx
 create mode 100644 src/components/requirements/constants.ts
 create mode 100644 src/lib/schemas/rule.ts

diff --git a/src/app/(dashboard)/[guildUrlName]/[pageUrlName]/page.tsx b/src/app/(dashboard)/[guildUrlName]/[pageUrlName]/page.tsx
index ac2b9d02f0..0694c23e2b 100644
--- a/src/app/(dashboard)/[guildUrlName]/[pageUrlName]/page.tsx
+++ b/src/app/(dashboard)/[guildUrlName]/[pageUrlName]/page.tsx
@@ -1,7 +1,9 @@
+import { RequirementDisplayComponent } from "@/components/requirements/RequirementDisplayComponent";
 import { Button } from "@/components/ui/Button";
 import { Card } from "@/components/ui/Card";
 import { ScrollArea } from "@/components/ui/ScrollArea";
 import { fetchGuildApiData } from "@/lib/fetchGuildApi";
+import type { Role } from "@/lib/schemas/role";
 import type { DynamicRoute } from "@/lib/types";
 import type { Schemas } from "@guildxyz/types";
 import { Lock } from "@phosphor-icons/react/dist/ssr";
@@ -18,7 +20,7 @@ const GuildPage = async ({
     body: JSON.stringify({ ids: guild.pages?.map((p) => p.pageId!) ?? [] }),
   });
   const page = pages.find((p) => p.urlName === pageUrlName)!;
-  const roles = await fetchGuildApiData<Schemas["Role"][]>("role/batch", {
+  const roles = await fetchGuildApiData<Role[]>("role/batch", {
     method: "POST",
     body: JSON.stringify({
       ids: page.roles?.map((r) => r.roleId!) ?? [],
@@ -34,7 +36,7 @@ const GuildPage = async ({
   );
 };
 
-const RoleCard = async ({ role }: { role: Schemas["Role"] }) => {
+const RoleCard = async ({ role }: { role: Role }) => {
   const rewards = await fetchGuildApiData<Schemas["Reward"][]>("reward/batch", {
     method: "POST",
     body: JSON.stringify({
@@ -71,8 +73,8 @@ const RoleCard = async ({ role }: { role: Schemas["Role"] }) => {
           </ScrollArea>
         )}
       </div>
-      <div className="bg-card-secondary p-6 md:w-1/2">
-        <div className="flex items-center justify-between">
+      <div className="bg-card-secondary md:w-1/2">
+        <div className="flex items-center justify-between p-5">
           <span className="font-bold text-foreground-secondary text-xs">
             REQUIREMENTS
           </span>
@@ -81,6 +83,16 @@ const RoleCard = async ({ role }: { role: Schemas["Role"] }) => {
             Join Guild to collect rewards
           </Button>
         </div>
+
+        {/* TODO group rules by access groups */}
+        <div className="grid px-5 pb-5">
+          {role.accessGroups[0].rules.map((rule) => (
+            <RequirementDisplayComponent
+              key={rule.accessRuleId}
+              requirement={rule}
+            />
+          ))}
+        </div>
       </div>
     </Card>
   );
diff --git a/src/components/requirements/RequirementDisplayComponent.tsx b/src/components/requirements/RequirementDisplayComponent.tsx
new file mode 100644
index 0000000000..b22d2ddf06
--- /dev/null
+++ b/src/components/requirements/RequirementDisplayComponent.tsx
@@ -0,0 +1,151 @@
+import { ChainIndicator } from "@/components/requirements/ChainIndicator";
+import { RequirementLink } from "@/components/requirements/RequirementLink";
+import { CHAINS, type SupportedChainID } from "@/config/chains";
+import { GearSix, Warning } from "@phosphor-icons/react/dist/ssr";
+import {
+  Requirement,
+  RequirementContent,
+  RequirementFooter,
+  RequirementImage,
+} from "./Requirement";
+
+import type { Rule } from "@/lib/schemas/rule";
+import { shortenHex } from "@/lib/shortenHex";
+import { Fragment } from "react";
+import { Badge } from "../ui/Badge";
+import { DataBlockWithCopy } from "./DataBlockWithCopy";
+import { ADDRESS_REGEX, PLACEHOLDER_REGEX } from "./constants";
+
+const convertTemplateText = (templateText: string, requirement: Rule) =>
+  templateText.replace(PLACEHOLDER_REGEX, (_match, rawKey) => {
+    const key = rawKey.trim() as keyof typeof requirement.config &
+      keyof typeof requirement.integration;
+
+    const usableKeyValues = {
+      ...requirement.config,
+      ...requirement.integration,
+    };
+
+    return key in usableKeyValues ? usableKeyValues[key] : key;
+  });
+
+const isSupportedChain = (chainId?: number): chainId is SupportedChainID =>
+  chainId ? !!CHAINS[chainId as SupportedChainID] : false;
+
+const RequirementNode = ({
+  node,
+  requirement,
+}: {
+  node: Rule["ui"]["nodes"][number];
+  requirement: Rule;
+}) => {
+  switch (node.type) {
+    case "TEXT":
+      return (
+        <span key={node.id}>
+          {convertTemplateText(node.value, requirement)}
+        </span>
+      );
+    case "CHAIN_INDICATOR":
+      // @ts-expect-error - TODO: create a map for chainId - chainName (uppercase) pairs
+      return isSupportedChain(node.value) ? (
+        <ChainIndicator key={node.id} chain={node.value} />
+      ) : null;
+    case "EXTERNAL_LINK":
+      return (
+        <RequirementLink
+          key={node.id}
+          href={convertTemplateText(node.href, requirement)}
+        >
+          {node.value}
+        </RequirementLink>
+      );
+    default:
+      return (
+        <Badge>
+          <Warning className="text-icon-warning" />
+          <span>Unsupported node</span>
+        </Badge>
+      );
+  }
+};
+
+export const RequirementDisplayComponent = ({
+  requirement,
+}: { requirement: Rule }) => {
+  const headerNodes = requirement.ui.nodes.filter(
+    (node) => node.position === "HEADER",
+  );
+  const footerNodes = requirement.ui.nodes.filter(
+    (node) => node.position === "FOOTER",
+  );
+
+  if (requirement.ui.nodes?.length > 0) {
+    return (
+      <Requirement>
+        <RequirementImage />
+        <RequirementContent>
+          <p>
+            {headerNodes.map((node) => (
+              <RequirementNode
+                key={node.id}
+                node={node}
+                requirement={requirement}
+              />
+            ))}
+          </p>
+          {footerNodes?.length > 0 && (
+            <RequirementFooter>
+              {footerNodes.map((node) => (
+                <RequirementNode
+                  key={node.id}
+                  node={node}
+                  requirement={requirement}
+                />
+              ))}
+            </RequirementFooter>
+          )}
+        </RequirementContent>
+      </Requirement>
+    );
+  }
+
+  const integrationConfigArray = Object.entries(requirement.config);
+
+  return (
+    <Requirement className="rounded-2xl border border-border bg-card-secondary p-5">
+      <RequirementImage>
+        <GearSix className="size-6" />
+      </RequirementImage>
+      <RequirementContent>
+        <p>
+          <span>{`${requirement.integration.displayName} (`}</span>
+          {integrationConfigArray.map(([key, value], index) => (
+            <Fragment key={key}>
+              <span>{`${key}: `}</span>
+              {typeof value === "string" && ADDRESS_REGEX.test(value) ? (
+                <DataBlockWithCopy text={value}>
+                  {shortenHex(value)}
+                </DataBlockWithCopy>
+              ) : (
+                <span>
+                  {typeof value === "object" ? JSON.stringify(value) : value}
+                </span>
+              )}
+              {index < integrationConfigArray.length - 1 && <span>{", "}</span>}
+            </Fragment>
+          ))}
+          <span>)</span>
+        </p>
+        {typeof requirement.config.data !== "string" &&
+          "chain" in requirement.config.data &&
+          typeof requirement.config.data.chain === "number" &&
+          isSupportedChain(requirement.config.data.chain) && (
+            <RequirementFooter>
+              <ChainIndicator chain={requirement.config.data.chain} />
+            </RequirementFooter>
+          )}
+      </RequirementContent>
+    </Requirement>
+  );
+};
diff --git a/src/components/requirements/constants.ts b/src/components/requirements/constants.ts
new file mode 100644
index 0000000000..c279b1feb5
--- /dev/null
+++ b/src/components/requirements/constants.ts
@@ -0,0 +1,2 @@
+export const PLACEHOLDER_REGEX = /\{\{([^{}]+)\}\}/g;
+export const ADDRESS_REGEX = /^0x[a-f0-9]{40}$/i;
diff --git a/src/lib/schemas/common.ts b/src/lib/schemas/common.ts
index 43f6779f29..6e966e343f 100644
--- a/src/lib/schemas/common.ts
+++ b/src/lib/schemas/common.ts
@@ -6,6 +6,4 @@ export const NameSchema = z
 
 export const ImageUrlSchema = z.literal("").or(z.string().url().max(255));
 
-export const LogicSchema = z.enum(["AND", "OR", "ANY_OF"]);
-
 export const DateLike = z.date().or(z.string().datetime());
diff --git a/src/lib/schemas/role.ts b/src/lib/schemas/role.ts
index a2ccb12209..e521dba871 100644
--- a/src/lib/schemas/role.ts
+++ b/src/lib/schemas/role.ts
@@ -1,20 +1,11 @@
 import { z } from "zod";
-import { DateLike, ImageUrlSchema, LogicSchema, NameSchema } from "./common";
+import { DateLike, ImageUrlSchema, NameSchema } from "./common";
+import { RuleSchema } from "./rule";
 
 export const CreateRoleSchema = z.object({
   name: NameSchema.min(1, "You must specify a name for the role"),
   description: z.string().nullish(),
   imageUrl: ImageUrlSchema.nullish(),
-  settings: z
-    .object({
-      logic: LogicSchema,
-      position: z.number().positive().nullish(),
-      anyOfNum: z.number().positive().optional(),
-    })
-    .default({
-      logic: "AND",
-      anyOfNum: 1,
-    }),
   groupId: z.string().uuid(),
 });
 
@@ -25,6 +16,18 @@ const RoleSchema = CreateRoleSchema.extend({
   createdAt: DateLike,
   updatedAt: DateLike,
   memberCount: z.number().nonnegative(),
+  topLevelAccessGroupId: z.string().uuid(),
+  accessGroups: z.array(
+    z.object({
+      gate: z.enum(["AND", "OR", "ANY_OF"]),
+      rules: z.array(RuleSchema),
+    }),
+  ),
+  rewards: z.array(
+    z.object({
+      rewardId: z.string().uuid(),
+    }),
+  ),
 });
 
 export type Role = z.infer<typeof RoleSchema>;
diff --git a/src/lib/schemas/rule.ts b/src/lib/schemas/rule.ts
new file mode 100644
index 0000000000..1e9c24a261
--- /dev/null
+++ b/src/lib/schemas/rule.ts
@@ -0,0 +1,63 @@
+import { z } from "zod";
+
+const CreateRuleSchema = z.object({
+  /**
+   * TODO
+   * - I don't know how will we create rules
+   */
+});
+
+const TextNodeSchema = z.object({
+  id: z.string().uuid(),
+  type: z.literal("TEXT"),
+  position: z.literal("HEADER"),
+  value: z.string().min(1),
+});
+
+const ChainIndicatorNodeSchema = z.object({
+  id: z.string().uuid(),
+  type: z.literal("CHAIN_INDICATOR"),
+  position: z.literal("FOOTER"),
+  value: z.string(), // TODO: maybe allow supported chains only?
+});
+
+const ExternalLinkNodeSchema = z.object({
+  id: z.string().uuid(),
+  type: z.literal("EXTERNAL_LINK"),
+  position: z.literal("FOOTER"),
+  value: z.string().min(1),
+  href: z.string().url(),
+});
+
+const RequirementNodeSchema = z.discriminatedUnion("type", [
+  TextNodeSchema,
+  ChainIndicatorNodeSchema,
+  ExternalLinkNodeSchema,
+]);
+
+export const RuleSchema = CreateRuleSchema.extend({
+  accessRuleId: z.string().uuid(),
+  integration: z.object({
+    id: z.string(),
+    displayName: z.string(),
+    identityType: z.string(), // TODO: identity schema
+  }),
+  config: z
+    .object({
+      platform: z.string(), // TODO: platform schema
+      type: z.string(), // TODO: maybe this isn't a fixed property?
+      id: z.string(),
+    })
+    .and(z.record(z.string().or(z.record(z.string())))),
+  params: z.object({
+    op: z.enum(["greater", "less", "equal"]),
+    field: z.string(), // TODO: I'm not sure if field & value are fixed props
+    value: z.string(),
+  }),
+  ui: z.object({
+    imageUrl: z.literal("").or(z.string().url().optional()),
+    nodes: z.array(RequirementNodeSchema),
+  }),
+});
+
+export type Rule = z.infer<typeof RuleSchema>;

From 8347a7e1c5d0d498fce28cf627d2103fbfbc2559 Mon Sep 17 00:00:00 2001
From: Dominik Stumpf <s.dominik.work@gmail.com>
Date: Wed, 4 Dec 2024 20:32:57 +0100
Subject: [PATCH 66/93] refactor: use rq in guild tabs

---
 src/app/(dashboard)/[guildUrlName]/actions.ts | 46 -------------------
 .../[guildUrlName]/components/GuildTabs.tsx   | 17 +++++--
 .../[guildUrlName]/components/JoinButton.tsx  |  4 +-
 src/app/(dashboard)/[guildUrlName]/layout.tsx |  9 ++--
 src/lib/fetchGuildApi.ts                      | 19 +++++---
 src/lib/fetchers.ts                           | 32 ++++++-------
 src/lib/options.ts                            | 21 ++++++---
 src/lib/types.ts                              | 11 ++++-
 8 files changed, 69 insertions(+), 90 deletions(-)
 delete mode 100644 src/app/(dashboard)/[guildUrlName]/actions.ts

diff --git a/src/app/(dashboard)/[guildUrlName]/actions.ts b/src/app/(dashboard)/[guildUrlName]/actions.ts
deleted file mode 100644
index 6f15e7399e..0000000000
--- a/src/app/(dashboard)/[guildUrlName]/actions.ts
+++ /dev/null
@@ -1,46 +0,0 @@
-import { fetchGuildApiData } from "@/lib/fetchGuildApi";
-import { resolveIdLikeRequest } from "@/lib/resolveIdLikeRequest";
-import { tryGetParsedToken } from "@/lib/token";
-import type { ErrorLike, WithIdLike } from "@/lib/types";
-import type { Schemas } from "@guildxyz/types";
-
-export const fetchGuildLeave = async ({ guildId }: { guildId: string }) => {
-  return fetchGuildApiData(`guild/${guildId}/leave`, {
-    method: "POST",
-  });
-};
-
-export const fetchGuild = async ({ idLike }: WithIdLike) => {
-  return fetchGuildApiData<Schemas["Guild"]>(
-    `guild/${resolveIdLikeRequest(idLike)}`,
-  );
-};
-
-export const fetchEntity = async <Data = object, Error = ErrorLike>({
-  idLike,
-  entity,
-  responseInit,
-}: {
-  entity: string;
-  idLike: string;
-  responseInit?: Parameters<typeof fetch>[1];
-}) => {
-  const pathname = `${entity}/${resolveIdLikeRequest(idLike)}`;
-  return fetchGuildApiData<Data, Error>(pathname, responseInit);
-};
-
-export const fetchUser = async () => {
-  const { userId } = await tryGetParsedToken();
-  return fetchEntity<Schemas["User"]>({
-    entity: "user",
-    idLike: userId,
-  });
-};
-
-export const fetchPages = async ({ guildId }: { guildId: string }) => {
-  const guild = await fetchGuild({ idLike: guildId });
-  return fetchGuildApiData<Schemas["Page"][]>("page/batch", {
-    method: "POST",
-    body: JSON.stringify({ ids: guild.pages?.map((p) => p.pageId!) ?? [] }),
-  });
-};
diff --git a/src/app/(dashboard)/[guildUrlName]/components/GuildTabs.tsx b/src/app/(dashboard)/[guildUrlName]/components/GuildTabs.tsx
index 6245a41ed8..f6c0cae90a 100644
--- a/src/app/(dashboard)/[guildUrlName]/components/GuildTabs.tsx
+++ b/src/app/(dashboard)/[guildUrlName]/components/GuildTabs.tsx
@@ -1,13 +1,22 @@
+"use client";
+
 import { Card } from "@/components/ui/Card";
 import { ScrollArea, ScrollBar } from "@/components/ui/ScrollArea";
 import { Skeleton } from "@/components/ui/Skeleton";
 import { cn } from "@/lib/cssUtils";
-import { fetchPages } from "@/lib/fetchers";
-import type { Schemas } from "@guildxyz/types";
+import { guildOptions, pageBatchOptions } from "@/lib/options";
+import { useSuspenseQuery } from "@tanstack/react-query";
+import { useParams } from "next/navigation";
 import { PageNavLink } from "./RoleGroupNavLink";
 
-export const GuildTabs = async ({ guild }: { guild: Schemas["Guild"] }) => {
-  const pages = await fetchPages({ guildId: guild.id });
+export const GuildTabs = () => {
+  const { guildUrlName } = useParams<{ guildUrlName: string }>();
+  const { data: guild } = useSuspenseQuery(
+    guildOptions({ guildIdLike: guildUrlName }),
+  );
+  const { data: pages } = useSuspenseQuery(
+    pageBatchOptions({ guildIdLike: guildUrlName }),
+  );
 
   return (
     <ScrollArea
diff --git a/src/app/(dashboard)/[guildUrlName]/components/JoinButton.tsx b/src/app/(dashboard)/[guildUrlName]/components/JoinButton.tsx
index bdaf1a5aa5..cf980a7501 100644
--- a/src/app/(dashboard)/[guildUrlName]/components/JoinButton.tsx
+++ b/src/app/(dashboard)/[guildUrlName]/components/JoinButton.tsx
@@ -3,6 +3,7 @@
 import { Button } from "@/components/ui/Button";
 import { GUILD_AUTH_COOKIE_NAME } from "@/config/constants";
 import { env } from "@/lib/env";
+import { fetchGuildLeave } from "@/lib/fetchers";
 import { getCookieClientSide } from "@/lib/getCookieClientSide";
 import { guildOptions, userOptions } from "@/lib/options";
 import type { Schemas } from "@guildxyz/types";
@@ -10,12 +11,11 @@ import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
 import { EventSourcePlus } from "event-source-plus";
 import { useParams } from "next/navigation";
 import { toast } from "sonner";
-import { fetchGuildLeave } from "../actions";
 
 export const JoinButton = () => {
   const { guildUrlName } = useParams<{ guildUrlName: string }>();
   const user = useQuery(userOptions());
-  const guild = useQuery(guildOptions({ idLike: guildUrlName }));
+  const guild = useQuery(guildOptions({ guildIdLike: guildUrlName }));
   const queryClient = useQueryClient();
 
   if (!guild.data) {
diff --git a/src/app/(dashboard)/[guildUrlName]/layout.tsx b/src/app/(dashboard)/[guildUrlName]/layout.tsx
index bfce7733da..03385add07 100644
--- a/src/app/(dashboard)/[guildUrlName]/layout.tsx
+++ b/src/app/(dashboard)/[guildUrlName]/layout.tsx
@@ -2,7 +2,7 @@ import { AuthBoundary } from "@/components/AuthBoundary";
 import { GuildImage } from "@/components/GuildImage";
 import { SignInButton } from "@/components/SignInButton";
 import { getQueryClient } from "@/lib/getQueryClient";
-import { guildOptions, userOptions } from "@/lib/options";
+import { guildOptions, pageBatchOptions, userOptions } from "@/lib/options";
 import type { DynamicRoute } from "@/lib/types";
 import { HydrationBoundary, dehydrate } from "@tanstack/react-query";
 import { type PropsWithChildren, Suspense } from "react";
@@ -18,16 +18,17 @@ const GuildLayout = async ({
 
   await Promise.all([
     queryClient.prefetchQuery(userOptions()),
+    queryClient.prefetchQuery(pageBatchOptions({ guildIdLike: guildUrlName })),
     queryClient.prefetchQuery(
       guildOptions({
-        idLike: guildUrlName,
+        guildIdLike: guildUrlName,
       }),
     ),
   ]);
 
   const guild = queryClient.getQueryState(
     guildOptions({
-      idLike: guildUrlName,
+      guildIdLike: guildUrlName,
     }).queryKey,
   );
 
@@ -62,7 +63,7 @@ const GuildLayout = async ({
         </div>
 
         <Suspense fallback={<GuildTabsSkeleton />}>
-          <GuildTabs guild={guild.data} />
+          <GuildTabs />
         </Suspense>
 
         {children}
diff --git a/src/lib/fetchGuildApi.ts b/src/lib/fetchGuildApi.ts
index 43852f6a63..62005f2488 100644
--- a/src/lib/fetchGuildApi.ts
+++ b/src/lib/fetchGuildApi.ts
@@ -9,8 +9,15 @@ type FetchResult<Data, Error> =
 
 // TODO: include a dedicated logger with severity channels
 const logger = {
-  info: (...args: Parameters<typeof console.info>) => {
-    if (process.env.NODE_ENV === "development" && env.LOGGING > 0) {
+  info: (
+    { response }: { response: Response },
+    ...args: Parameters<typeof console.info>
+  ) => {
+    if (
+      process.env.NODE_ENV === "development" &&
+      env.LOGGING > 0 &&
+      !response.ok
+    ) {
       console.info(
         `[${new Date().toLocaleTimeString()} - fetchGuildApi]:`,
         ...args,
@@ -67,9 +74,7 @@ export const fetchGuildApi = async <Data = object, Error = ErrorLike>(
   let token: string | undefined;
   try {
     token = await tryGetToken();
-  } catch (_) {
-    //logger.info(e);
-  }
+  } catch (_) {}
 
   const headers = new Headers(requestInit?.headers);
   if (token) {
@@ -95,7 +100,7 @@ export const fetchGuildApi = async <Data = object, Error = ErrorLike>(
     throw new Error("Guild API failed to respond with json");
   }
 
-  logger.info("\n", url.toString(), response.status);
+  logger.info({ response }, "\n", url.toString(), response.status);
 
   let json: unknown;
   try {
@@ -104,7 +109,7 @@ export const fetchGuildApi = async <Data = object, Error = ErrorLike>(
     throw new Error("Failed to parse json from response");
   }
 
-  logger.info(json, "\n");
+  logger.info({ response }, json, "\n");
 
   if (!response.ok) {
     return {
diff --git a/src/lib/fetchers.ts b/src/lib/fetchers.ts
index 6f15e7399e..45f0508632 100644
--- a/src/lib/fetchers.ts
+++ b/src/lib/fetchers.ts
@@ -1,44 +1,38 @@
 import { fetchGuildApiData } from "@/lib/fetchGuildApi";
 import { resolveIdLikeRequest } from "@/lib/resolveIdLikeRequest";
 import { tryGetParsedToken } from "@/lib/token";
-import type { ErrorLike, WithIdLike } from "@/lib/types";
+import type { Entity, EntitySchema, ErrorLike, WithIdLike } from "@/lib/types";
 import type { Schemas } from "@guildxyz/types";
 
-export const fetchGuildLeave = async ({ guildId }: { guildId: string }) => {
-  return fetchGuildApiData(`guild/${guildId}/leave`, {
-    method: "POST",
-  });
-};
-
-export const fetchGuild = async ({ idLike }: WithIdLike) => {
-  return fetchGuildApiData<Schemas["Guild"]>(
-    `guild/${resolveIdLikeRequest(idLike)}`,
-  );
-};
-
-export const fetchEntity = async <Data = object, Error = ErrorLike>({
+export const fetchEntity = async <T extends Entity, Error = ErrorLike>({
   idLike,
   entity,
   responseInit,
 }: {
-  entity: string;
+  entity: T;
   idLike: string;
   responseInit?: Parameters<typeof fetch>[1];
 }) => {
   const pathname = `${entity}/${resolveIdLikeRequest(idLike)}`;
-  return fetchGuildApiData<Data, Error>(pathname, responseInit);
+  return fetchGuildApiData<EntitySchema<T>, Error>(pathname, responseInit);
 };
 
 export const fetchUser = async () => {
   const { userId } = await tryGetParsedToken();
-  return fetchEntity<Schemas["User"]>({
+  return fetchEntity({
     entity: "user",
     idLike: userId,
   });
 };
 
-export const fetchPages = async ({ guildId }: { guildId: string }) => {
-  const guild = await fetchGuild({ idLike: guildId });
+export const fetchGuildLeave = async ({ guildId }: { guildId: string }) => {
+  return fetchGuildApiData(`guild/${guildId}/leave`, {
+    method: "POST",
+  });
+};
+
+export const fetchPageBatch = async ({ guildIdLike }: WithIdLike<"guild">) => {
+  const guild = await fetchEntity({ entity: "guild", idLike: guildIdLike });
   return fetchGuildApiData<Schemas["Page"][]>("page/batch", {
     method: "POST",
     body: JSON.stringify({ ids: guild.pages?.map((p) => p.pageId!) ?? [] }),
diff --git a/src/lib/options.ts b/src/lib/options.ts
index 4ac8c44e38..4b474c4aab 100644
--- a/src/lib/options.ts
+++ b/src/lib/options.ts
@@ -1,23 +1,30 @@
-import { fetchEntity, fetchUser } from "@/lib/fetchers";
-import type { ErrorLike } from "@/lib/types";
+import { fetchEntity, fetchPageBatch, fetchUser } from "@/lib/fetchers";
+import type { WithIdLike } from "@/lib/types";
 import type { Schemas } from "@guildxyz/types";
 import { queryOptions } from "@tanstack/react-query";
 
-export const entityOptions = <Data = object, Error = ErrorLike>({
+export const entityOptions = ({
   entity,
   idLike,
   ...rest
 }: Parameters<typeof fetchEntity>[0]) => {
-  return queryOptions<Data, Error>({
+  return queryOptions({
     queryKey: [entity, idLike],
     queryFn: () => fetchEntity({ entity, idLike, ...rest }),
   });
 };
 
-export const guildOptions = ({ idLike }: { idLike: string }) => {
-  return entityOptions<Schemas["Guild"]>({
+export const guildOptions = ({ guildIdLike }: WithIdLike<"guild">) => {
+  return entityOptions({
     entity: "guild",
-    idLike,
+    idLike: guildIdLike,
+  });
+};
+
+export const pageBatchOptions = ({ guildIdLike }: WithIdLike<"guild">) => {
+  return queryOptions({
+    queryKey: ["page", "batch", guildIdLike],
+    queryFn: () => fetchPageBatch({ guildIdLike }),
   });
 };
 
diff --git a/src/lib/types.ts b/src/lib/types.ts
index f8864ff6c4..8ba9766e96 100644
--- a/src/lib/types.ts
+++ b/src/lib/types.ts
@@ -1,3 +1,5 @@
+import type { Schemas } from "@guildxyz/types";
+
 export type PaginatedResponse<Item = unknown> = {
   page: number;
   pageSize: number;
@@ -31,4 +33,11 @@ export type ErrorLike = {
  * - `urlName`: uri safe identifier alias
  * - `id`: uuid v4 identifier
  */
-export type WithIdLike<T = unknown> = T & { idLike: string };
+export type WithIdLike<E extends Entity> = {
+  [key in `${E}IdLike`]: string;
+};
+
+// TODO: move to @guildxyz/types
+export type Entity = "guild" | "role" | "page" | "user" | "reward";
+
+export type EntitySchema<T extends Entity> = Schemas[Capitalize<T>];

From bb235751f91b03d14e11c9a085f9414578dd75cb Mon Sep 17 00:00:00 2001
From: Dominik Stumpf <s.dominik.work@gmail.com>
Date: Wed, 4 Dec 2024 21:18:26 +0100
Subject: [PATCH 67/93] feat: add tq to role and reward

---
 .../[guildUrlName]/[pageUrlName]/page.tsx     | 68 +++++++++++--------
 src/app/(dashboard)/[guildUrlName]/layout.tsx | 19 +++++-
 src/app/(dashboard)/[guildUrlName]/page.tsx   |  7 +-
 src/lib/fetchGuildApi.ts                      |  4 +-
 src/lib/fetchers.ts                           | 18 +++++
 src/lib/options.ts                            | 17 ++++-
 6 files changed, 92 insertions(+), 41 deletions(-)

diff --git a/src/app/(dashboard)/[guildUrlName]/[pageUrlName]/page.tsx b/src/app/(dashboard)/[guildUrlName]/[pageUrlName]/page.tsx
index 0694c23e2b..64d46a4008 100644
--- a/src/app/(dashboard)/[guildUrlName]/[pageUrlName]/page.tsx
+++ b/src/app/(dashboard)/[guildUrlName]/[pageUrlName]/page.tsx
@@ -1,50 +1,57 @@
+"use client";
+
 import { RequirementDisplayComponent } from "@/components/requirements/RequirementDisplayComponent";
 import { Button } from "@/components/ui/Button";
 import { Card } from "@/components/ui/Card";
 import { ScrollArea } from "@/components/ui/ScrollArea";
+import { Skeleton } from "@/components/ui/Skeleton";
 import { fetchGuildApiData } from "@/lib/fetchGuildApi";
-import type { Role } from "@/lib/schemas/role";
-import type { DynamicRoute } from "@/lib/types";
+import { roleBatchOptions } from "@/lib/options";
 import type { Schemas } from "@guildxyz/types";
 import { Lock } from "@phosphor-icons/react/dist/ssr";
+import { useSuspenseQuery } from "@tanstack/react-query";
+import { useParams } from "next/navigation";
+import { Suspense } from "react";
 
-const GuildPage = async ({
-  params,
-}: DynamicRoute<{ pageUrlName: string; guildUrlName: string }>) => {
-  const { pageUrlName, guildUrlName } = await params;
-  const guild = await fetchGuildApiData<Schemas["Guild"]>(
-    `guild/urlName/${guildUrlName}`,
-  );
-  const pages = await fetchGuildApiData<Schemas["Page"][]>("page/batch", {
-    method: "POST",
-    body: JSON.stringify({ ids: guild.pages?.map((p) => p.pageId!) ?? [] }),
-  });
-  const page = pages.find((p) => p.urlName === pageUrlName)!;
-  const roles = await fetchGuildApiData<Role[]>("role/batch", {
-    method: "POST",
-    body: JSON.stringify({
-      ids: page.roles?.map((r) => r.roleId!) ?? [],
+const GuildPage = () => {
+  const { pageUrlName, guildUrlName } = useParams<{
+    pageUrlName: string;
+    guildUrlName: string;
+  }>();
+  const { data: roles } = useSuspenseQuery(
+    roleBatchOptions({
+      guildIdLike: guildUrlName,
+      pageIdLike: pageUrlName,
     }),
-  });
+  );
 
   return (
     <div className="my-4 space-y-4">
       {roles.map((role) => (
-        <RoleCard role={role} key={role.id} />
+        <Suspense
+          fallback={<Skeleton className="h-40 w-full rounded-xl" />}
+          key={role.id}
+        >
+          <RoleCard role={role} />
+        </Suspense>
       ))}
     </div>
   );
 };
 
-const RoleCard = async ({ role }: { role: Role }) => {
-  const rewards = await fetchGuildApiData<Schemas["Reward"][]>("reward/batch", {
-    method: "POST",
-    body: JSON.stringify({
-      ids: role.rewards?.map((r) => r.rewardId!) ?? [],
-    }),
-    headers: {
-      "Content-Type": "application/json",
-    },
+const RoleCard = ({ role }: { role: Schemas["Role"] }) => {
+  const { data: rewards } = useSuspenseQuery<Schemas["Reward"][]>({
+    queryKey: ["reward", "batch", role.id],
+    queryFn: () =>
+      fetchGuildApiData("reward/batch", {
+        method: "POST",
+        body: JSON.stringify({
+          ids: role.rewards?.map((r) => r.rewardId!) ?? [],
+        }),
+        headers: {
+          "Content-Type": "application/json",
+        },
+      }),
   });
 
   return (
@@ -86,9 +93,10 @@ const RoleCard = async ({ role }: { role: Role }) => {
 
         {/* TODO group rules by access groups */}
         <div className="grid px-5 pb-5">
-          {role.accessGroups[0].rules.map((rule) => (
+          {role.accessGroups[0].rules?.map((rule) => (
             <RequirementDisplayComponent
               key={rule.accessRuleId}
+              // @ts-expect-error: incomplete type
               requirement={rule}
             />
           ))}
diff --git a/src/app/(dashboard)/[guildUrlName]/layout.tsx b/src/app/(dashboard)/[guildUrlName]/layout.tsx
index 03385add07..b7b31a029f 100644
--- a/src/app/(dashboard)/[guildUrlName]/layout.tsx
+++ b/src/app/(dashboard)/[guildUrlName]/layout.tsx
@@ -2,7 +2,12 @@ import { AuthBoundary } from "@/components/AuthBoundary";
 import { GuildImage } from "@/components/GuildImage";
 import { SignInButton } from "@/components/SignInButton";
 import { getQueryClient } from "@/lib/getQueryClient";
-import { guildOptions, pageBatchOptions, userOptions } from "@/lib/options";
+import {
+  guildOptions,
+  pageBatchOptions,
+  roleBatchOptions,
+  userOptions,
+} from "@/lib/options";
 import type { DynamicRoute } from "@/lib/types";
 import { HydrationBoundary, dehydrate } from "@tanstack/react-query";
 import { type PropsWithChildren, Suspense } from "react";
@@ -12,13 +17,21 @@ import { JoinButton } from "./components/JoinButton";
 const GuildLayout = async ({
   params,
   children,
-}: PropsWithChildren<DynamicRoute<{ guildUrlName: string }>>) => {
-  const { guildUrlName } = await params;
+}: PropsWithChildren<
+  DynamicRoute<{ guildUrlName: string; pageUrlName?: string }>
+>) => {
+  const { guildUrlName, pageUrlName } = await params;
   const queryClient = getQueryClient();
 
   await Promise.all([
     queryClient.prefetchQuery(userOptions()),
     queryClient.prefetchQuery(pageBatchOptions({ guildIdLike: guildUrlName })),
+    queryClient.prefetchQuery(
+      roleBatchOptions({
+        pageIdLike: pageUrlName || "",
+        guildIdLike: guildUrlName,
+      }),
+    ),
     queryClient.prefetchQuery(
       guildOptions({
         guildIdLike: guildUrlName,
diff --git a/src/app/(dashboard)/[guildUrlName]/page.tsx b/src/app/(dashboard)/[guildUrlName]/page.tsx
index 7687289661..dd1db1e2bd 100644
--- a/src/app/(dashboard)/[guildUrlName]/page.tsx
+++ b/src/app/(dashboard)/[guildUrlName]/page.tsx
@@ -1,10 +1,7 @@
-import type { DynamicRoute } from "@/lib/types";
 import GuildPage from "./[pageUrlName]/page";
 
-const DefaultGuildPage = async ({
-  params,
-}: DynamicRoute<{ guildUrlName: string }>) => {
-  return <GuildPage params={{ ...(await params), pageUrlName: "" }} />;
+const DefaultGuildPage = async () => {
+  return <GuildPage />;
 };
 
 export default DefaultGuildPage;
diff --git a/src/lib/fetchGuildApi.ts b/src/lib/fetchGuildApi.ts
index 62005f2488..1449d0a650 100644
--- a/src/lib/fetchGuildApi.ts
+++ b/src/lib/fetchGuildApi.ts
@@ -64,10 +64,10 @@ export const fetchGuildApi = async <Data = object, Error = ErrorLike>(
   requestInit?: RequestInit,
 ): Promise<FetchResult<Data, Error>> => {
   if (pathname.startsWith("/")) {
-    throw new Error("`pathname` must not start with slash");
+    throw new Error(`"pathname" must not start with slash: ${pathname}`);
   }
   if (pathname.endsWith("/")) {
-    throw new Error("`pathname` must not end with slash");
+    throw new Error(`"pathname" must not end with slash: ${pathname}`);
   }
   const url = new URL(`api/${pathname}`, env.NEXT_PUBLIC_API);
 
diff --git a/src/lib/fetchers.ts b/src/lib/fetchers.ts
index 45f0508632..74f3cecd8d 100644
--- a/src/lib/fetchers.ts
+++ b/src/lib/fetchers.ts
@@ -38,3 +38,21 @@ export const fetchPageBatch = async ({ guildIdLike }: WithIdLike<"guild">) => {
     body: JSON.stringify({ ids: guild.pages?.map((p) => p.pageId!) ?? [] }),
   });
 };
+
+export const fetchRoleBatch = async ({
+  pageIdLike,
+  guildIdLike,
+}: WithIdLike<"page"> & WithIdLike<"guild">) => {
+  const guild = await fetchEntity({ entity: "guild", idLike: guildIdLike });
+  const isHomePageUrl = !pageIdLike;
+  const pageIdLikeWithHome = isHomePageUrl ? guild.homePageId! : pageIdLike;
+  const page = await fetchEntity({
+    entity: "page",
+    idLike: pageIdLikeWithHome,
+  });
+
+  return fetchGuildApiData<Schemas["Role"][]>("role/batch", {
+    method: "POST",
+    body: JSON.stringify({ ids: page.roles?.map((p) => p.roleId!) ?? [] }),
+  });
+};
diff --git a/src/lib/options.ts b/src/lib/options.ts
index 4b474c4aab..3de147c4b3 100644
--- a/src/lib/options.ts
+++ b/src/lib/options.ts
@@ -1,4 +1,9 @@
-import { fetchEntity, fetchPageBatch, fetchUser } from "@/lib/fetchers";
+import {
+  fetchEntity,
+  fetchPageBatch,
+  fetchRoleBatch,
+  fetchUser,
+} from "@/lib/fetchers";
 import type { WithIdLike } from "@/lib/types";
 import type { Schemas } from "@guildxyz/types";
 import { queryOptions } from "@tanstack/react-query";
@@ -28,6 +33,16 @@ export const pageBatchOptions = ({ guildIdLike }: WithIdLike<"guild">) => {
   });
 };
 
+export const roleBatchOptions = ({
+  pageIdLike,
+  guildIdLike,
+}: WithIdLike<"page"> & WithIdLike<"guild">) => {
+  return queryOptions({
+    queryKey: ["role", "batch", pageIdLike || "home", guildIdLike],
+    queryFn: () => fetchRoleBatch({ pageIdLike, guildIdLike }),
+  });
+};
+
 export const userOptions = () => {
   return queryOptions<Schemas["User"]>({
     queryKey: ["user"],

From 6f6d33a2c46c10cce7b4bf39b0bd7b6f9c8a3f09 Mon Sep 17 00:00:00 2001
From: Dominik Stumpf <s.dominik.work@gmail.com>
Date: Wed, 4 Dec 2024 22:22:46 +0100
Subject: [PATCH 68/93] refactor: fetch guild on demand

---
 src/lib/fetchers.ts | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/src/lib/fetchers.ts b/src/lib/fetchers.ts
index 74f3cecd8d..4e52a71e04 100644
--- a/src/lib/fetchers.ts
+++ b/src/lib/fetchers.ts
@@ -43,9 +43,15 @@ export const fetchRoleBatch = async ({
   pageIdLike,
   guildIdLike,
 }: WithIdLike<"page"> & WithIdLike<"guild">) => {
-  const guild = await fetchEntity({ entity: "guild", idLike: guildIdLike });
   const isHomePageUrl = !pageIdLike;
-  const pageIdLikeWithHome = isHomePageUrl ? guild.homePageId! : pageIdLike;
+  let pageIdLikeWithHome = pageIdLike;
+  if (isHomePageUrl) {
+    const { homePageId } = await fetchEntity({
+      entity: "guild",
+      idLike: guildIdLike,
+    });
+    pageIdLikeWithHome = homePageId!;
+  }
   const page = await fetchEntity({
     entity: "page",
     idLike: pageIdLikeWithHome,

From 755af6dba050d6e67f64f8e71b7bc6d6b8f81079 Mon Sep 17 00:00:00 2001
From: BrickheadJohnny <johnny.zgen@gmail.com>
Date: Thu, 5 Dec 2024 10:06:34 +0100
Subject: [PATCH 69/93] fix: await `prefetchInfiniteQuery` call

---
 src/app/(dashboard)/explorer/layout.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/app/(dashboard)/explorer/layout.tsx b/src/app/(dashboard)/explorer/layout.tsx
index ac55280d95..2ba50a5015 100644
--- a/src/app/(dashboard)/explorer/layout.tsx
+++ b/src/app/(dashboard)/explorer/layout.tsx
@@ -5,8 +5,8 @@ import { guildSearchOptions } from "./options";
 
 const ExplorerLayout = async ({ children }: PropsWithChildren) => {
   const queryClient = getQueryClient();
-  void queryClient.prefetchInfiniteQuery(guildSearchOptions({}));
-  //void queryClient.prefetchQuery(associatedGuildsOption());
+  await queryClient.prefetchInfiniteQuery(guildSearchOptions({}));
+  // await queryClient.prefetchQuery(associatedGuildsOption());
 
   return (
     <HydrationBoundary state={dehydrate(queryClient)}>

From 99798ef7637dab3fb9a928e36848d50c5aac2bfa Mon Sep 17 00:00:00 2001
From: BrickheadJohnny <johnny.zgen@gmail.com>
Date: Thu, 5 Dec 2024 10:21:37 +0100
Subject: [PATCH 70/93] fix(JoinButton): simplify toast and fix the join flow

---
 .../(dashboard)/[guildUrlName]/components/JoinButton.tsx  | 8 +++-----
 1 file changed, 3 insertions(+), 5 deletions(-)

diff --git a/src/app/(dashboard)/[guildUrlName]/components/JoinButton.tsx b/src/app/(dashboard)/[guildUrlName]/components/JoinButton.tsx
index cf980a7501..3e5ea14a43 100644
--- a/src/app/(dashboard)/[guildUrlName]/components/JoinButton.tsx
+++ b/src/app/(dashboard)/[guildUrlName]/components/JoinButton.tsx
@@ -53,7 +53,7 @@ export const JoinButton = () => {
               sseMessage.data,
               // biome-ignore lint/suspicious/noExplicitAny: TODO: fill missing types
             ) as any;
-            if (status === "complete") {
+            if (status === "Completed") {
               if (data === undefined) {
                 throw new Error(
                   "Server responded with success, but returned no user",
@@ -63,11 +63,9 @@ export const JoinButton = () => {
             } else if (status === "error") {
               reject();
             }
-            const toastFunction =
-              status === "complete" ? toast.success : toast.info;
-            toastFunction(status, {
+
+            toast(status, {
               description: message,
-              richColors: status === "complete",
             });
           } catch (e) {
             console.warn("JSON parsing failed on join event stream", e);

From 3d4459e1fadf82cbd21c44b983c595a21ed8606d Mon Sep 17 00:00:00 2001
From: BrickheadJohnny <johnny.zgen@gmail.com>
Date: Thu, 5 Dec 2024 10:28:01 +0100
Subject: [PATCH 71/93] feat(JoinButton): add icon to success toast

---
 src/app/(dashboard)/[guildUrlName]/components/JoinButton.tsx | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/src/app/(dashboard)/[guildUrlName]/components/JoinButton.tsx b/src/app/(dashboard)/[guildUrlName]/components/JoinButton.tsx
index 3e5ea14a43..a70e443f86 100644
--- a/src/app/(dashboard)/[guildUrlName]/components/JoinButton.tsx
+++ b/src/app/(dashboard)/[guildUrlName]/components/JoinButton.tsx
@@ -7,6 +7,7 @@ import { fetchGuildLeave } from "@/lib/fetchers";
 import { getCookieClientSide } from "@/lib/getCookieClientSide";
 import { guildOptions, userOptions } from "@/lib/options";
 import type { Schemas } from "@guildxyz/types";
+import { CheckCircle } from "@phosphor-icons/react/dist/ssr";
 import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
 import { EventSourcePlus } from "event-source-plus";
 import { useParams } from "next/navigation";
@@ -66,6 +67,10 @@ export const JoinButton = () => {
 
             toast(status, {
               description: message,
+              icon:
+                status === "Completed" ? (
+                  <CheckCircle weight="fill" className="text-icon-success" />
+                ) : undefined,
             });
           } catch (e) {
             console.warn("JSON parsing failed on join event stream", e);

From 2e1b6465a74ae8da9faeadef34c4cfab118aacd3 Mon Sep 17 00:00:00 2001
From: BrickheadJohnny <johnny.zgen@gmail.com>
Date: Thu, 5 Dec 2024 10:30:24 +0100
Subject: [PATCH 72/93] fix(JoinButton): don't fallback to a sign in button

---
 src/app/(dashboard)/[guildUrlName]/layout.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/app/(dashboard)/[guildUrlName]/layout.tsx b/src/app/(dashboard)/[guildUrlName]/layout.tsx
index b7b31a029f..83de2a8385 100644
--- a/src/app/(dashboard)/[guildUrlName]/layout.tsx
+++ b/src/app/(dashboard)/[guildUrlName]/layout.tsx
@@ -1,6 +1,5 @@
 import { AuthBoundary } from "@/components/AuthBoundary";
 import { GuildImage } from "@/components/GuildImage";
-import { SignInButton } from "@/components/SignInButton";
 import { getQueryClient } from "@/lib/getQueryClient";
 import {
   guildOptions,
@@ -65,7 +64,8 @@ const GuildLayout = async ({
                   {guild.data.name}
                 </h1>
               </div>
-              <AuthBoundary fallback={<SignInButton />}>
+              {/* TODO: JoinButton should open a modal where the user can sign in and also connect the required platforms. So we won't need an AuthBoundary here. */}
+              <AuthBoundary fallback={null}>
                 <JoinButton />
               </AuthBoundary>
             </div>

From 0075ebbdc99d85120c0acf0618cae8c6a695ec97 Mon Sep 17 00:00:00 2001
From: BrickheadJohnny <johnny.zgen@gmail.com>
Date: Thu, 5 Dec 2024 10:40:26 +0100
Subject: [PATCH 73/93] fix: more discreet leave button

---
 .../[guildUrlName]/components/JoinButton.tsx  | 35 ++++++++++++-------
 1 file changed, 23 insertions(+), 12 deletions(-)

diff --git a/src/app/(dashboard)/[guildUrlName]/components/JoinButton.tsx b/src/app/(dashboard)/[guildUrlName]/components/JoinButton.tsx
index a70e443f86..2468544274 100644
--- a/src/app/(dashboard)/[guildUrlName]/components/JoinButton.tsx
+++ b/src/app/(dashboard)/[guildUrlName]/components/JoinButton.tsx
@@ -1,13 +1,18 @@
 "use client";
 
 import { Button } from "@/components/ui/Button";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@/components/ui/Tooltip";
 import { GUILD_AUTH_COOKIE_NAME } from "@/config/constants";
 import { env } from "@/lib/env";
 import { fetchGuildLeave } from "@/lib/fetchers";
 import { getCookieClientSide } from "@/lib/getCookieClientSide";
 import { guildOptions, userOptions } from "@/lib/options";
 import type { Schemas } from "@guildxyz/types";
-import { CheckCircle } from "@phosphor-icons/react/dist/ssr";
+import { CheckCircle, SignOut } from "@phosphor-icons/react/dist/ssr";
 import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
 import { EventSourcePlus } from "event-source-plus";
 import { useParams } from "next/navigation";
@@ -106,17 +111,23 @@ export const JoinButton = () => {
   });
 
   return isJoined ? (
-    <Button
-      colorScheme="destructive"
-      className="rounded-2xl"
-      onClick={() => {
-        leaveMutation.mutate();
-      }}
-      isLoading={leaveMutation.isPending}
-      loadingText="Leaving Guild"
-    >
-      Leave Guild
-    </Button>
+    <Tooltip>
+      <TooltipTrigger asChild>
+        {/* TODO: IconButton component */}
+        <Button
+          className="size-11 rounded-full"
+          onClick={() => {
+            leaveMutation.mutate();
+          }}
+          isLoading={leaveMutation.isPending}
+          leftIcon={<SignOut weight="bold" />}
+        />
+      </TooltipTrigger>
+
+      <TooltipContent>
+        <p>Leave guild</p>
+      </TooltipContent>
+    </Tooltip>
   ) : (
     <Button
       colorScheme="success"

From 01cf3c306eb56e11a3823154cb8ab57057a12d47 Mon Sep 17 00:00:00 2001
From: Dominik Stumpf <s.dominik.work@gmail.com>
Date: Fri, 6 Dec 2024 16:00:07 +0100
Subject: [PATCH 74/93] fix: add type package and update deprecated types

---
 package.json                                  | 52 +++++++++----------
 src/components/requirements/DataBlock.tsx     |  4 +-
 .../requirements/DataBlockWithCopy.tsx        |  4 +-
 3 files changed, 30 insertions(+), 30 deletions(-)

diff --git a/package.json b/package.json
index e55151a33d..9b2c388d12 100644
--- a/package.json
+++ b/package.json
@@ -32,18 +32,18 @@
     "@radix-ui/react-tooltip": "^1.1.4",
     "@t3-oss/env-nextjs": "^0.11.1",
     "@tailwindcss/typography": "^0.5.15",
-    "@tanstack/react-query": "^5.60.2",
-    "@tanstack/react-query-devtools": "^5.61.0",
+    "@tanstack/react-query": "^5.62.2",
+    "@tanstack/react-query-devtools": "^5.62.2",
     "autoprefixer": "^10.4.20",
-    "class-variance-authority": "^0.7.0",
+    "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "event-source-plus": "^0.1.8",
-    "foxact": "^0.2.41",
-    "jotai": "^2.10.2",
+    "foxact": "^0.2.43",
+    "jotai": "^2.10.3",
     "jwt-decode": "^4.0.0",
     "mini-svg-data-uri": "^1.4.4",
     "next": "15.0.3",
-    "next-themes": "^0.4.3",
+    "next-themes": "^0.4.4",
     "pinata-web3": "^0.5.2",
     "react": "19.0.0-rc-66855b96-20241106",
     "react-canvas-confetti": "^2.0.7",
@@ -56,38 +56,38 @@
     "remark-textr": "^6.1.0",
     "server-only": "^0.0.1",
     "sonner": "^1.7.0",
-    "tailwind-merge": "^2.5.4",
+    "tailwind-merge": "^2.5.5",
     "tailwindcss-animate": "^1.0.7",
     "typographic-base": "^1.0.4",
     "vaul": "^1.1.1",
-    "viem": "^2.21.45",
-    "wagmi": "^2.12.32",
+    "viem": "^2.21.54",
+    "wagmi": "^2.13.3",
     "zod": "^3.23.8"
   },
   "devDependencies": {
     "@biomejs/biome": "1.9.0",
     "@chromatic-com/storybook": "^3.2.2",
-    "@storybook/addon-essentials": "^8.4.4",
-    "@storybook/addon-interactions": "^8.4.4",
-    "@storybook/addon-onboarding": "^8.4.4",
+    "@storybook/addon-essentials": "^8.4.7",
+    "@storybook/addon-interactions": "^8.4.7",
+    "@storybook/addon-onboarding": "^8.4.7",
     "@storybook/addon-styling-webpack": "^1.0.1",
-    "@storybook/addon-themes": "^8.4.4",
-    "@storybook/blocks": "^8.4.4",
-    "@storybook/nextjs": "^8.4.4",
-    "@storybook/react": "^8.4.4",
-    "@storybook/test": "^8.4.4",
+    "@storybook/addon-themes": "^8.4.7",
+    "@storybook/blocks": "^8.4.7",
+    "@storybook/nextjs": "^8.4.7",
+    "@storybook/react": "^8.4.7",
+    "@storybook/test": "^8.4.7",
     "@svgr/webpack": "^8.1.0",
     "@total-typescript/ts-reset": "^0.6.1",
-    "@types/node": "^20",
-    "@types/react": "^18",
-    "@types/react-dom": "^18",
-    "husky": "^9.1.6",
+    "@types/node": "^20.17.9",
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.1",
+    "husky": "^9.1.7",
     "lint-staged": "^15.2.10",
-    "postcss": "^8",
-    "storybook": "^8.4.4",
-    "tailwindcss": "^3.4.1",
-    "type-fest": "^4.29.1",
-    "typescript": "^5"
+    "postcss": "^8.4.49",
+    "storybook": "^8.4.7",
+    "tailwindcss": "^3.4.16",
+    "type-fest": "^4.30.0",
+    "typescript": "^5.7.2"
   },
   "overrides": {
     "react": "19.0.0-rc-66855b96-20241106",
diff --git a/src/components/requirements/DataBlock.tsx b/src/components/requirements/DataBlock.tsx
index cb9f1ad7c0..75959f51ef 100644
--- a/src/components/requirements/DataBlock.tsx
+++ b/src/components/requirements/DataBlock.tsx
@@ -1,6 +1,6 @@
-import type { PropsWithChildren } from "react";
+import type { PropsWithChildren, ReactElement } from "react";
 
-export const DataBlock = ({ children }: PropsWithChildren): JSX.Element => {
+export const DataBlock = ({ children }: PropsWithChildren): ReactElement => {
   return (
     <span className="h-6 break-words rounded-md bg-blackAlpha px-1.5 py-0.5 font-mono text-sm dark:bg-blackAlpha-hard">
       {children}
diff --git a/src/components/requirements/DataBlockWithCopy.tsx b/src/components/requirements/DataBlockWithCopy.tsx
index cee1806e0b..fc71f7a37d 100644
--- a/src/components/requirements/DataBlockWithCopy.tsx
+++ b/src/components/requirements/DataBlockWithCopy.tsx
@@ -9,7 +9,7 @@ import {
 import { Check } from "@phosphor-icons/react/dist/ssr";
 import { useClipboard } from "foxact/use-clipboard";
 import { useDebouncedState } from "foxact/use-debounced-state";
-import { type PropsWithChildren, useEffect } from "react";
+import { type PropsWithChildren, type ReactElement, useEffect } from "react";
 import { DataBlock } from "./DataBlock";
 
 type Props = {
@@ -19,7 +19,7 @@ type Props = {
 export const DataBlockWithCopy = ({
   text,
   children,
-}: PropsWithChildren<Props>): JSX.Element => {
+}: PropsWithChildren<Props>): ReactElement => {
   const { copied, copy } = useClipboard({
     timeout: 1500,
   });

From 99759064c3d2c2a0c36c11aec14a53cb83ab8a41 Mon Sep 17 00:00:00 2001
From: Dominik Stumpf <s.dominik.work@gmail.com>
Date: Fri, 6 Dec 2024 18:12:31 +0100
Subject: [PATCH 75/93] feat: add prefetch to all entities

---
 .../[guildUrlName]/[pageUrlName]/page.tsx     | 19 ++-------
 src/app/(dashboard)/[guildUrlName]/layout.tsx | 41 ++++++++++++++-----
 src/lib/fetchers.ts                           | 24 +++++++++--
 src/lib/options.ts                            | 14 ++++++-
 src/lib/types.ts                              |  4 ++
 5 files changed, 72 insertions(+), 30 deletions(-)

diff --git a/src/app/(dashboard)/[guildUrlName]/[pageUrlName]/page.tsx b/src/app/(dashboard)/[guildUrlName]/[pageUrlName]/page.tsx
index 64d46a4008..e11b50a273 100644
--- a/src/app/(dashboard)/[guildUrlName]/[pageUrlName]/page.tsx
+++ b/src/app/(dashboard)/[guildUrlName]/[pageUrlName]/page.tsx
@@ -5,8 +5,7 @@ import { Button } from "@/components/ui/Button";
 import { Card } from "@/components/ui/Card";
 import { ScrollArea } from "@/components/ui/ScrollArea";
 import { Skeleton } from "@/components/ui/Skeleton";
-import { fetchGuildApiData } from "@/lib/fetchGuildApi";
-import { roleBatchOptions } from "@/lib/options";
+import { rewardBatchOptions, roleBatchOptions } from "@/lib/options";
 import type { Schemas } from "@guildxyz/types";
 import { Lock } from "@phosphor-icons/react/dist/ssr";
 import { useSuspenseQuery } from "@tanstack/react-query";
@@ -40,19 +39,9 @@ const GuildPage = () => {
 };
 
 const RoleCard = ({ role }: { role: Schemas["Role"] }) => {
-  const { data: rewards } = useSuspenseQuery<Schemas["Reward"][]>({
-    queryKey: ["reward", "batch", role.id],
-    queryFn: () =>
-      fetchGuildApiData("reward/batch", {
-        method: "POST",
-        body: JSON.stringify({
-          ids: role.rewards?.map((r) => r.rewardId!) ?? [],
-        }),
-        headers: {
-          "Content-Type": "application/json",
-        },
-      }),
-  });
+  const { data: rewards } = useSuspenseQuery(
+    rewardBatchOptions({ roleId: role.id }),
+  );
 
   return (
     <Card className="flex flex-col md:flex-row" key={role.id}>
diff --git a/src/app/(dashboard)/[guildUrlName]/layout.tsx b/src/app/(dashboard)/[guildUrlName]/layout.tsx
index 83de2a8385..a02183106e 100644
--- a/src/app/(dashboard)/[guildUrlName]/layout.tsx
+++ b/src/app/(dashboard)/[guildUrlName]/layout.tsx
@@ -4,6 +4,7 @@ import { getQueryClient } from "@/lib/getQueryClient";
 import {
   guildOptions,
   pageBatchOptions,
+  rewardBatchOptions,
   roleBatchOptions,
   userOptions,
 } from "@/lib/options";
@@ -16,21 +17,14 @@ import { JoinButton } from "./components/JoinButton";
 const GuildLayout = async ({
   params,
   children,
-}: PropsWithChildren<
-  DynamicRoute<{ guildUrlName: string; pageUrlName?: string }>
->) => {
-  const { guildUrlName, pageUrlName } = await params;
+}: PropsWithChildren<DynamicRoute<{ guildUrlName: string }>>) => {
+  const { guildUrlName } = await params;
   const queryClient = getQueryClient();
 
+  // TODO: handle possible request failures
   await Promise.all([
     queryClient.prefetchQuery(userOptions()),
     queryClient.prefetchQuery(pageBatchOptions({ guildIdLike: guildUrlName })),
-    queryClient.prefetchQuery(
-      roleBatchOptions({
-        pageIdLike: pageUrlName || "",
-        guildIdLike: guildUrlName,
-      }),
-    ),
     queryClient.prefetchQuery(
       guildOptions({
         guildIdLike: guildUrlName,
@@ -38,6 +32,33 @@ const GuildLayout = async ({
     ),
   ]);
 
+  const pageBatch = queryClient.getQueryData(
+    pageBatchOptions({ guildIdLike: guildUrlName }).queryKey,
+  );
+  const roleBatchOptionsCollection = pageBatch?.map((page) => {
+    return roleBatchOptions({
+      pageIdLike: page.urlName!,
+      guildIdLike: guildUrlName,
+    });
+  });
+
+  if (roleBatchOptionsCollection) {
+    await Promise.all(
+      roleBatchOptionsCollection.map((c) => queryClient.prefetchQuery(c)),
+    );
+    const rewardBatchOptionsCollection = [];
+    for (const options of roleBatchOptionsCollection) {
+      const roles = queryClient.getQueryData(options.queryKey);
+      if (!roles) continue;
+      for (const { id } of roles) {
+        rewardBatchOptionsCollection.push(rewardBatchOptions({ roleId: id }));
+      }
+    }
+    await Promise.all(
+      rewardBatchOptionsCollection.map((c) => queryClient.prefetchQuery(c)),
+    );
+  }
+
   const guild = queryClient.getQueryState(
     guildOptions({
       guildIdLike: guildUrlName,
diff --git a/src/lib/fetchers.ts b/src/lib/fetchers.ts
index 4e52a71e04..6d16bcfe23 100644
--- a/src/lib/fetchers.ts
+++ b/src/lib/fetchers.ts
@@ -1,8 +1,15 @@
 import { fetchGuildApiData } from "@/lib/fetchGuildApi";
 import { resolveIdLikeRequest } from "@/lib/resolveIdLikeRequest";
 import { tryGetParsedToken } from "@/lib/token";
-import type { Entity, EntitySchema, ErrorLike, WithIdLike } from "@/lib/types";
+import type {
+  Entity,
+  EntitySchema,
+  ErrorLike,
+  WithId,
+  WithIdLike,
+} from "@/lib/types";
 import type { Schemas } from "@guildxyz/types";
+import { z } from "zod";
 
 export const fetchEntity = async <T extends Entity, Error = ErrorLike>({
   idLike,
@@ -42,7 +49,7 @@ export const fetchPageBatch = async ({ guildIdLike }: WithIdLike<"guild">) => {
 export const fetchRoleBatch = async ({
   pageIdLike,
   guildIdLike,
-}: WithIdLike<"page"> & WithIdLike<"guild">) => {
+}: Partial<WithIdLike<"page">> & WithIdLike<"guild">) => {
   const isHomePageUrl = !pageIdLike;
   let pageIdLikeWithHome = pageIdLike;
   if (isHomePageUrl) {
@@ -54,7 +61,7 @@ export const fetchRoleBatch = async ({
   }
   const page = await fetchEntity({
     entity: "page",
-    idLike: pageIdLikeWithHome,
+    idLike: pageIdLikeWithHome!,
   });
 
   return fetchGuildApiData<Schemas["Role"][]>("role/batch", {
@@ -62,3 +69,14 @@ export const fetchRoleBatch = async ({
     body: JSON.stringify({ ids: page.roles?.map((p) => p.roleId!) ?? [] }),
   });
 };
+
+export const fetchRewardBatch = async ({ roleId }: WithId<"role">) => {
+  z.string().uuid().parse(roleId);
+  const role = await fetchEntity({ entity: "role", idLike: roleId });
+  return fetchGuildApiData<Schemas["Reward"][]>("reward/batch", {
+    method: "POST",
+    body: JSON.stringify({
+      ids: role.rewards?.map((r) => r.rewardId!) ?? [],
+    }),
+  });
+};
diff --git a/src/lib/options.ts b/src/lib/options.ts
index 3de147c4b3..275836d712 100644
--- a/src/lib/options.ts
+++ b/src/lib/options.ts
@@ -1,12 +1,14 @@
 import {
   fetchEntity,
   fetchPageBatch,
+  fetchRewardBatch,
   fetchRoleBatch,
   fetchUser,
 } from "@/lib/fetchers";
-import type { WithIdLike } from "@/lib/types";
+import type { WithId, WithIdLike } from "@/lib/types";
 import type { Schemas } from "@guildxyz/types";
 import { queryOptions } from "@tanstack/react-query";
+import { z } from "zod";
 
 export const entityOptions = ({
   entity,
@@ -36,13 +38,21 @@ export const pageBatchOptions = ({ guildIdLike }: WithIdLike<"guild">) => {
 export const roleBatchOptions = ({
   pageIdLike,
   guildIdLike,
-}: WithIdLike<"page"> & WithIdLike<"guild">) => {
+}: Partial<WithIdLike<"page">> & WithIdLike<"guild">) => {
   return queryOptions({
     queryKey: ["role", "batch", pageIdLike || "home", guildIdLike],
     queryFn: () => fetchRoleBatch({ pageIdLike, guildIdLike }),
   });
 };
 
+export const rewardBatchOptions = ({ roleId }: WithId<"role">) => {
+  z.string().uuid().parse(roleId);
+  return queryOptions({
+    queryKey: ["reward", "batch", roleId],
+    queryFn: () => fetchRewardBatch({ roleId }),
+  });
+};
+
 export const userOptions = () => {
   return queryOptions<Schemas["User"]>({
     queryKey: ["user"],
diff --git a/src/lib/types.ts b/src/lib/types.ts
index 8ba9766e96..2faafb886c 100644
--- a/src/lib/types.ts
+++ b/src/lib/types.ts
@@ -37,6 +37,10 @@ export type WithIdLike<E extends Entity> = {
   [key in `${E}IdLike`]: string;
 };
 
+export type WithId<E extends Entity> = {
+  [key in `${E}Id`]: string;
+};
+
 // TODO: move to @guildxyz/types
 export type Entity = "guild" | "role" | "page" | "user" | "reward";
 

From 8f10e63e5ec1fe88e986a31ba966b2e0726e2afa Mon Sep 17 00:00:00 2001
From: BrickheadJohnny <92519134+BrickheadJohnny@users.noreply.github.com>
Date: Thu, 12 Dec 2024 12:40:57 +0100
Subject: [PATCH 76/93] feat: rewards (#1579)

* feat(RewardCard): change layout with container queries

* chore: update schemas

* feat: custom reward cards for permissions and points

* feat: fetch real rewards data and add a simple reward leaderboard

* fix: remove points name for now

* feat: separate join and leave guild components

* feat: useGuild hook

* fix: add missing use client directives

* feat: auth rework (#1581)

* feat: use `https` in development

* feat: use httpOnly cookie for authenticated requests

* feat: third party auth (#1582)

* feat: 3rd party auth flow

* feat(ConnectResultToast): add toast icons

* chore: update readme

* cleanup: remove unnecessary components

* fix: invalidate queries when signing in/out

* feat: join modal

* feat: DiscordRewardCard

* cleanup(RoleCard): remove unnecessary TODO comments

* feat: better identity-related types

* fix(DiscordRewardCard): disabled state

* fix(ConnectResultToast): show toast only after platform connection

* fix(PointsRewardCard): don't use pathname for navigation

* fix(rewardCards): add proper types

* feat(leaderboard): display points' name

* feat(leaderboard): display user addresses & "Your position" section

* feat(DiscordRewardCard): more detailed tooltip message
---
 .gitignore                                    |   2 +
 README.md                                     |   7 +-
 package.json                                  |   4 +-
 src/actions/auth.ts                           |  52 ----
 .../[guildUrlName]/[pageUrlName]/page.tsx     | 158 +++++++-----
 .../components/ActionButton.tsx               |  29 +++
 .../[guildUrlName]/components/GuildTabs.tsx   |  11 +-
 .../[guildUrlName]/components/JoinButton.tsx  | 144 -----------
 .../[guildUrlName]/components/JoinGuild.tsx   | 232 ++++++++++++++++++
 .../[guildUrlName]/components/LeaveGuild.tsx  |  51 ++++
 .../[guildUrlName]/hooks/useGuild.ts          |  15 ++
 .../[guildUrlName]/hooks/useGuildUrlName.ts   |   7 +
 src/app/(dashboard)/[guildUrlName]/layout.tsx |  23 +-
 .../[rewardId]/components/Leaderboard.tsx     |  47 ++++
 .../components/LeaderboardUserCard.tsx        |  38 +++
 .../leaderboard/[rewardId]/options.ts         |  32 +++
 .../leaderboard/[rewardId]/page.tsx           |  26 ++
 .../components/CreateGuildButton.tsx          |   6 -
 src/app/(dashboard)/explorer/fetchers.ts      |  19 +-
 src/app/(dashboard)/explorer/layout.tsx       |   4 +-
 src/app/layout.tsx                            |  16 +-
 src/components/AuthBoundary.tsx               |  18 +-
 src/components/ConnectResultToast.tsx         |  57 +++++
 src/components/PrefetchUserBoundary.tsx       |  15 ++
 src/components/SignInButton.tsx               |   8 +-
 src/components/SignInDialog.tsx               |  36 ++-
 src/components/SignOutButton.tsx              |  25 +-
 src/components/rewards/DiscordRewardCard.tsx  | 106 ++++++++
 .../rewards/GuildPermissionRewardCard.tsx     |  15 ++
 src/components/rewards/PointsRewardCard.tsx   |  38 +++
 src/components/rewards/RewardCard.tsx         |  56 +++--
 src/components/rewards/rewardCards.ts         |  15 ++
 src/components/rewards/types.ts               |  10 +
 src/config/constants.ts                       |  22 +-
 src/lib/fetchGuildApi.ts                      |  24 +-
 src/lib/fetchers.ts                           |  10 +-
 src/lib/getCookieClientSide.ts                |  21 --
 src/lib/options.ts                            |  13 +-
 src/lib/schemas/guildReward.ts                |  83 +++++++
 src/lib/schemas/identity.ts                   |   9 +
 src/lib/schemas/leaderboard.ts                |  19 ++
 src/lib/schemas/role.ts                       |   7 +-
 src/lib/schemas/roleReward.ts                 |  34 +++
 src/lib/schemas/rule.ts                       |   3 +-
 src/lib/token.ts                              |  27 --
 tailwind.config.ts                            |   5 +-
 46 files changed, 1160 insertions(+), 439 deletions(-)
 delete mode 100644 src/actions/auth.ts
 create mode 100644 src/app/(dashboard)/[guildUrlName]/components/ActionButton.tsx
 delete mode 100644 src/app/(dashboard)/[guildUrlName]/components/JoinButton.tsx
 create mode 100644 src/app/(dashboard)/[guildUrlName]/components/JoinGuild.tsx
 create mode 100644 src/app/(dashboard)/[guildUrlName]/components/LeaveGuild.tsx
 create mode 100644 src/app/(dashboard)/[guildUrlName]/hooks/useGuild.ts
 create mode 100644 src/app/(dashboard)/[guildUrlName]/hooks/useGuildUrlName.ts
 create mode 100644 src/app/(dashboard)/[guildUrlName]/leaderboard/[rewardId]/components/Leaderboard.tsx
 create mode 100644 src/app/(dashboard)/[guildUrlName]/leaderboard/[rewardId]/components/LeaderboardUserCard.tsx
 create mode 100644 src/app/(dashboard)/[guildUrlName]/leaderboard/[rewardId]/options.ts
 create mode 100644 src/app/(dashboard)/[guildUrlName]/leaderboard/[rewardId]/page.tsx
 create mode 100644 src/components/ConnectResultToast.tsx
 create mode 100644 src/components/PrefetchUserBoundary.tsx
 create mode 100644 src/components/rewards/DiscordRewardCard.tsx
 create mode 100644 src/components/rewards/GuildPermissionRewardCard.tsx
 create mode 100644 src/components/rewards/PointsRewardCard.tsx
 create mode 100644 src/components/rewards/rewardCards.ts
 create mode 100644 src/components/rewards/types.ts
 delete mode 100644 src/lib/getCookieClientSide.ts
 create mode 100644 src/lib/schemas/guildReward.ts
 create mode 100644 src/lib/schemas/identity.ts
 create mode 100644 src/lib/schemas/leaderboard.ts
 create mode 100644 src/lib/schemas/roleReward.ts
 delete mode 100644 src/lib/token.ts

diff --git a/.gitignore b/.gitignore
index 1fffb8e724..d1a75623fe 100644
--- a/.gitignore
+++ b/.gitignore
@@ -43,3 +43,5 @@ bun.lockb
 /playwright/.cache/
 /playwright/.auth/
 /playwright/results
+
+certificates
\ No newline at end of file
diff --git a/README.md b/README.md
index 1997db2a30..da0c30ee85 100644
--- a/README.md
+++ b/README.md
@@ -37,10 +37,11 @@ Open source interface for Guild.xyz -- a tool for platformless membership manage
 ### Running the interface locally
 
 1. `bun i`
-2. `bun run dev`
-3. If you don't have the secret environment variables, copy the `.env.example` as `.env.local`.
+2. Append `127.0.0.1  local.openguild.xyz` to `/etc/hosts`
+3. If you don't have the secret environment variables, copy the `.env.example` as `.env.local`
+4. Run `bun dev`, create certificate if prompted
+5. Open `https://local.openguild.xyz:3000` and dismiss the unsecure site warning
 
-Open [http://localhost:3000](http://localhost:3000) in your browser to see the result.
 
 ### Getting secret environment variables (for core team members):
 
diff --git a/package.json b/package.json
index 9b2c388d12..883536d381 100644
--- a/package.json
+++ b/package.json
@@ -4,7 +4,7 @@
   "private": true,
   "scripts": {
     "prepare": "husky",
-    "dev": "next dev --turbo",
+    "dev": "next dev --turbo --experimental-https",
     "build": "next build",
     "start": "next start",
     "type-check": "tsc --pretty --noEmit --incremental false",
@@ -31,6 +31,7 @@
     "@radix-ui/react-toggle-group": "^1.1.0",
     "@radix-ui/react-tooltip": "^1.1.4",
     "@t3-oss/env-nextjs": "^0.11.1",
+    "@tailwindcss/container-queries": "^0.1.1",
     "@tailwindcss/typography": "^0.5.15",
     "@tanstack/react-query": "^5.62.2",
     "@tanstack/react-query-devtools": "^5.62.2",
@@ -40,7 +41,6 @@
     "event-source-plus": "^0.1.8",
     "foxact": "^0.2.43",
     "jotai": "^2.10.3",
-    "jwt-decode": "^4.0.0",
     "mini-svg-data-uri": "^1.4.4",
     "next": "15.0.3",
     "next-themes": "^0.4.4",
diff --git a/src/actions/auth.ts b/src/actions/auth.ts
deleted file mode 100644
index 8ef8f78b97..0000000000
--- a/src/actions/auth.ts
+++ /dev/null
@@ -1,52 +0,0 @@
-"use server";
-
-import { associatedGuildsOption } from "@/app/(dashboard)/explorer/options";
-import { GUILD_AUTH_COOKIE_NAME } from "@/config/constants";
-import { fetchGuildApi } from "@/lib/fetchGuildApi";
-import { getQueryClient } from "@/lib/getQueryClient";
-import { userOptions } from "@/lib/options";
-import { authSchema, tokenSchema } from "@/lib/schemas/user";
-import { jwtDecode } from "jwt-decode";
-import { cookies } from "next/headers";
-import { redirect } from "next/navigation";
-
-export const signIn = async ({
-  message,
-  signature,
-}: {
-  message: string;
-  signature: string;
-}) => {
-  const cookieStore = await cookies();
-
-  const requestInit = {
-    method: "POST",
-    body: JSON.stringify({
-      message,
-      signature,
-    }),
-  } satisfies RequestInit;
-
-  const signInRes = await fetchGuildApi("auth/siwe/login", requestInit);
-  let json = signInRes.data;
-  if (signInRes.response.status === 401) {
-    const registerRes = await fetchGuildApi("auth/siwe/register", requestInit);
-    json = registerRes.data;
-  }
-  const authData = authSchema.parse(json);
-  const { exp } = tokenSchema.parse(jwtDecode(authData.token));
-
-  cookieStore.set(GUILD_AUTH_COOKIE_NAME, authData.token, {
-    expires: new Date(exp * 1000),
-  });
-  return authData;
-};
-
-export const signOut = async (redirectTo?: string) => {
-  const cookieStore = await cookies();
-  cookieStore.delete(GUILD_AUTH_COOKIE_NAME);
-  const queryClient = getQueryClient();
-  queryClient.removeQueries(associatedGuildsOption());
-  queryClient.removeQueries(userOptions());
-  redirect(redirectTo ?? "/explorer");
-};
diff --git a/src/app/(dashboard)/[guildUrlName]/[pageUrlName]/page.tsx b/src/app/(dashboard)/[guildUrlName]/[pageUrlName]/page.tsx
index e11b50a273..9e0cf3b3a0 100644
--- a/src/app/(dashboard)/[guildUrlName]/[pageUrlName]/page.tsx
+++ b/src/app/(dashboard)/[guildUrlName]/[pageUrlName]/page.tsx
@@ -1,16 +1,19 @@
 "use client";
 
 import { RequirementDisplayComponent } from "@/components/requirements/RequirementDisplayComponent";
+import { rewardCards } from "@/components/rewards/rewardCards";
 import { Button } from "@/components/ui/Button";
 import { Card } from "@/components/ui/Card";
-import { ScrollArea } from "@/components/ui/ScrollArea";
 import { Skeleton } from "@/components/ui/Skeleton";
-import { rewardBatchOptions, roleBatchOptions } from "@/lib/options";
-import type { Schemas } from "@guildxyz/types";
-import { Lock } from "@phosphor-icons/react/dist/ssr";
+import { fetchGuildApiData } from "@/lib/fetchGuildApi";
+import { roleBatchOptions } from "@/lib/options";
+import type { GuildReward, GuildRewardType } from "@/lib/schemas/guildReward";
+import type { Role } from "@/lib/schemas/role";
+import { ImageSquare, Lock } from "@phosphor-icons/react/dist/ssr";
 import { useSuspenseQuery } from "@tanstack/react-query";
 import { useParams } from "next/navigation";
 import { Suspense } from "react";
+import { useGuild } from "../hooks/useGuild";
 
 const GuildPage = () => {
   const { pageUrlName, guildUrlName } = useParams<{
@@ -38,73 +41,98 @@ const GuildPage = () => {
   );
 };
 
-const RoleCard = ({ role }: { role: Schemas["Role"] }) => {
-  const { data: rewards } = useSuspenseQuery(
-    rewardBatchOptions({ roleId: role.id }),
-  );
-
-  return (
-    <Card className="flex flex-col md:flex-row" key={role.id}>
-      <div className="border-r p-6 md:w-1/2">
-        <div className="flex items-center gap-3">
-          {role.imageUrl && (
-            <img
-              className="size-14 rounded-full border"
-              src={role.imageUrl} // TODO: fallback image
-              alt="role avatar"
-            />
-          )}
-          <h3 className="font-bold text-xl tracking-tight">{role.name}</h3>
-        </div>
-        <p className="mt-4 text-foreground-dimmed leading-relaxed">
-          {role.description}
-        </p>
-        {!!rewards.length && (
-          <ScrollArea className="mt-8 h-64 rounded-lg border pr-3">
-            <div className="flex flex-col gap-4">
-              {rewards.map((reward) => (
-                <Reward reward={reward} key={reward.id} />
-              ))}
-            </div>
-          </ScrollArea>
+const RoleCard = ({ role }: { role: Role }) => (
+  <Card className="flex flex-col md:flex-row" key={role.id}>
+    <div className="@container flex flex-col border-r p-5 md:w-1/2">
+      <div className="mb-2 flex items-center gap-3">
+        {role.imageUrl ? (
+          <img
+            className="size-14 rounded-full border"
+            src={role.imageUrl}
+            alt="role avatar"
+          />
+        ) : (
+          <div className="flex size-14 items-center justify-center rounded-full bg-image">
+            <ImageSquare weight="duotone" className="size-6" />
+          </div>
         )}
+        <h3 className="font-extrabold text-xl">{role.name}</h3>
       </div>
-      <div className="bg-card-secondary md:w-1/2">
-        <div className="flex items-center justify-between p-5">
-          <span className="font-bold text-foreground-secondary text-xs">
-            REQUIREMENTS
-          </span>
-          <Button size="sm">
-            <Lock />
-            Join Guild to collect rewards
-          </Button>
-        </div>
+      <p className="mb-4 text-foreground-dimmed leading-relaxed">
+        {role.description}
+      </p>
+
+      <Suspense fallback={<p>Loading rewards...</p>}>
+        <RoleRewards roleId={role.id} roleRewards={role.rewards} />
+      </Suspense>
+    </div>
 
-        {/* TODO group rules by access groups */}
-        <div className="grid px-5 pb-5">
-          {role.accessGroups[0].rules?.map((rule) => (
-            <RequirementDisplayComponent
-              key={rule.accessRuleId}
-              // @ts-expect-error: incomplete type
-              requirement={rule}
-            />
-          ))}
-        </div>
+    <div className="bg-card-secondary md:w-1/2">
+      <div className="flex items-center justify-between p-5">
+        <span className="font-bold text-foreground-secondary text-xs">
+          REQUIREMENTS
+        </span>
+        <Button size="sm">
+          <Lock />
+          Join Guild to collect rewards
+        </Button>
       </div>
-    </Card>
-  );
-};
 
-const Reward = ({ reward }: { reward: Schemas["Reward"] }) => {
-  return (
-    <div className="border-b p-4 last:border-b-0">
-      <div className="mb-2 font-medium">{reward.name}</div>
-      <div className="text-foreground-dimmed text-sm">{reward.description}</div>
-      <pre className="mt-3 text-foreground-secondary text-xs">
-        <code>{JSON.stringify(reward.permissions, null, 2)}</code>
-      </pre>
+      {/* TODO group rules by access groups */}
+      <div className="grid px-5 pb-5">
+        {role.accessGroups[0].rules?.map((rule) => (
+          <RequirementDisplayComponent
+            key={rule.accessRuleId}
+            requirement={rule}
+          />
+        ))}
+      </div>
     </div>
-  );
+  </Card>
+);
+
+const RoleRewards = ({
+  roleId,
+  roleRewards,
+}: { roleId: string; roleRewards: Role["rewards"] }) => {
+  const { data: guild } = useGuild();
+  const { data: rewards } = useSuspenseQuery<GuildReward[]>({
+    queryKey: ["reward", "search", guild.id],
+    queryFn: () =>
+      fetchGuildApiData<{ items: GuildReward[] }>(
+        `reward/search?customQuery=@guildId:{${guild.id}}`,
+      ).then((data) => data.items), // TODO: we shouldn't do this, we should just get back an array on this endpoint in my opinion
+  });
+
+  return roleRewards?.length > 0 && rewards?.length > 0 ? (
+    <div className="mt-auto grid @[26rem]:grid-cols-2 gap-2">
+      {roleRewards.map((roleReward) => {
+        const guildReward = rewards.find((gr) => gr.id === roleReward.rewardId);
+        if (!guildReward) return null;
+
+        const hasRewardCard = (
+          rewardType: GuildRewardType,
+        ): rewardType is keyof typeof rewardCards => rewardType in rewardCards;
+
+        const RewardCard = hasRewardCard(guildReward.type)
+          ? rewardCards[guildReward.type]
+          : null;
+
+        if (!RewardCard) return null;
+
+        return (
+          <RewardCard
+            key={roleReward.rewardId}
+            roleId={roleId}
+            reward={{
+              guildReward,
+              roleReward,
+            }}
+          />
+        );
+      })}
+    </div>
+  ) : null;
 };
 
 export default GuildPage;
diff --git a/src/app/(dashboard)/[guildUrlName]/components/ActionButton.tsx b/src/app/(dashboard)/[guildUrlName]/components/ActionButton.tsx
new file mode 100644
index 0000000000..306f14c6ba
--- /dev/null
+++ b/src/app/(dashboard)/[guildUrlName]/components/ActionButton.tsx
@@ -0,0 +1,29 @@
+"use client";
+
+import { Button } from "@/components/ui/Button";
+import { userOptions } from "@/lib/options";
+import { useQuery } from "@tanstack/react-query";
+import { useGuild } from "../hooks/useGuild";
+import { JoinGuild } from "./JoinGuild";
+import { LeaveGuild } from "./LeaveGuild";
+
+export const ActionButton = () => {
+  const user = useQuery(userOptions());
+  const guild = useGuild();
+
+  if (!guild.data) {
+    throw new Error("Failed to fetch guild");
+  }
+
+  const isJoined = !!user.data?.guilds?.some(
+    ({ guildId }) => guildId === guild.data.id,
+  );
+
+  return isJoined ? <LeaveGuild /> : <JoinGuild />;
+};
+
+export const ActionButtonSkeleton = () => (
+  <Button isLoading loadingText="Loading">
+    Join guild
+  </Button>
+);
diff --git a/src/app/(dashboard)/[guildUrlName]/components/GuildTabs.tsx b/src/app/(dashboard)/[guildUrlName]/components/GuildTabs.tsx
index f6c0cae90a..bf2cb70921 100644
--- a/src/app/(dashboard)/[guildUrlName]/components/GuildTabs.tsx
+++ b/src/app/(dashboard)/[guildUrlName]/components/GuildTabs.tsx
@@ -4,16 +4,15 @@ import { Card } from "@/components/ui/Card";
 import { ScrollArea, ScrollBar } from "@/components/ui/ScrollArea";
 import { Skeleton } from "@/components/ui/Skeleton";
 import { cn } from "@/lib/cssUtils";
-import { guildOptions, pageBatchOptions } from "@/lib/options";
+import { pageBatchOptions } from "@/lib/options";
 import { useSuspenseQuery } from "@tanstack/react-query";
-import { useParams } from "next/navigation";
+import { useGuild } from "../hooks/useGuild";
+import { useGuildUrlName } from "../hooks/useGuildUrlName";
 import { PageNavLink } from "./RoleGroupNavLink";
 
 export const GuildTabs = () => {
-  const { guildUrlName } = useParams<{ guildUrlName: string }>();
-  const { data: guild } = useSuspenseQuery(
-    guildOptions({ guildIdLike: guildUrlName }),
-  );
+  const guildUrlName = useGuildUrlName();
+  const { data: guild } = useGuild();
   const { data: pages } = useSuspenseQuery(
     pageBatchOptions({ guildIdLike: guildUrlName }),
   );
diff --git a/src/app/(dashboard)/[guildUrlName]/components/JoinButton.tsx b/src/app/(dashboard)/[guildUrlName]/components/JoinButton.tsx
deleted file mode 100644
index 2468544274..0000000000
--- a/src/app/(dashboard)/[guildUrlName]/components/JoinButton.tsx
+++ /dev/null
@@ -1,144 +0,0 @@
-"use client";
-
-import { Button } from "@/components/ui/Button";
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipTrigger,
-} from "@/components/ui/Tooltip";
-import { GUILD_AUTH_COOKIE_NAME } from "@/config/constants";
-import { env } from "@/lib/env";
-import { fetchGuildLeave } from "@/lib/fetchers";
-import { getCookieClientSide } from "@/lib/getCookieClientSide";
-import { guildOptions, userOptions } from "@/lib/options";
-import type { Schemas } from "@guildxyz/types";
-import { CheckCircle, SignOut } from "@phosphor-icons/react/dist/ssr";
-import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
-import { EventSourcePlus } from "event-source-plus";
-import { useParams } from "next/navigation";
-import { toast } from "sonner";
-
-export const JoinButton = () => {
-  const { guildUrlName } = useParams<{ guildUrlName: string }>();
-  const user = useQuery(userOptions());
-  const guild = useQuery(guildOptions({ guildIdLike: guildUrlName }));
-  const queryClient = useQueryClient();
-
-  if (!guild.data) {
-    throw new Error("Failed to fetch guild");
-  }
-
-  const isJoined = !!user.data?.guilds?.some(
-    ({ guildId }) => guildId === guild.data.id,
-  );
-
-  const joinMutation = useMutation({
-    mutationFn: async () => {
-      //TODO: Handle error here, throw error in funciton if needed
-      const token = getCookieClientSide(GUILD_AUTH_COOKIE_NAME)!;
-      const url = new URL(
-        `api/guild/${guild.data.id}/join`,
-        env.NEXT_PUBLIC_API,
-      );
-      const eventSource = new EventSourcePlus(url.toString(), {
-        retryStrategy: "on-error",
-        method: "post",
-        maxRetryCount: 0,
-        headers: {
-          "x-auth-token": token,
-          "content-type": "application/json",
-        },
-      });
-
-      const { resolve, reject, promise } =
-        Promise.withResolvers<Schemas["User"]>();
-      eventSource.listen({
-        onMessage: (sseMessage) => {
-          try {
-            const { status, message, data } = JSON.parse(
-              sseMessage.data,
-              // biome-ignore lint/suspicious/noExplicitAny: TODO: fill missing types
-            ) as any;
-            if (status === "Completed") {
-              if (data === undefined) {
-                throw new Error(
-                  "Server responded with success, but returned no user",
-                );
-              }
-              resolve(data);
-            } else if (status === "error") {
-              reject();
-            }
-
-            toast(status, {
-              description: message,
-              icon:
-                status === "Completed" ? (
-                  <CheckCircle weight="fill" className="text-icon-success" />
-                ) : undefined,
-            });
-          } catch (e) {
-            console.warn("JSON parsing failed on join event stream", e);
-          }
-        },
-      });
-
-      return promise;
-    },
-    onSuccess: async (user) => {
-      await queryClient.cancelQueries(userOptions());
-      queryClient.setQueryData(userOptions().queryKey, user);
-    },
-    onSettled: () => {
-      queryClient.invalidateQueries(userOptions());
-    },
-  });
-
-  const leaveMutation = useMutation({
-    mutationFn: () => fetchGuildLeave({ guildId: guild.data.id }),
-    onSuccess: async () => {
-      await queryClient.cancelQueries(userOptions());
-      const prev = queryClient.getQueryData(userOptions().queryKey);
-      if (prev) {
-        queryClient.setQueryData(userOptions().queryKey, {
-          ...prev,
-          guilds: prev?.guilds?.filter(
-            ({ guildId }) => guildId !== guild.data.id,
-          ),
-        });
-      }
-    },
-  });
-
-  return isJoined ? (
-    <Tooltip>
-      <TooltipTrigger asChild>
-        {/* TODO: IconButton component */}
-        <Button
-          className="size-11 rounded-full"
-          onClick={() => {
-            leaveMutation.mutate();
-          }}
-          isLoading={leaveMutation.isPending}
-          leftIcon={<SignOut weight="bold" />}
-        />
-      </TooltipTrigger>
-
-      <TooltipContent>
-        <p>Leave guild</p>
-      </TooltipContent>
-    </Tooltip>
-  ) : (
-    <Button
-      colorScheme="success"
-      className="rounded-2xl"
-      onClick={() => {
-        joinMutation.mutate();
-      }}
-      isLoading={joinMutation.isPending}
-      loadingText="Joining Guild"
-    >
-      Join Guild
-    </Button>
-  );
-};
diff --git a/src/app/(dashboard)/[guildUrlName]/components/JoinGuild.tsx b/src/app/(dashboard)/[guildUrlName]/components/JoinGuild.tsx
new file mode 100644
index 0000000000..2805434c10
--- /dev/null
+++ b/src/app/(dashboard)/[guildUrlName]/components/JoinGuild.tsx
@@ -0,0 +1,232 @@
+"use client";
+
+import { SignInButton } from "@/components/SignInButton";
+import { Button } from "@/components/ui/Button";
+import {
+  ResponsiveDialog,
+  ResponsiveDialogBody,
+  ResponsiveDialogContent,
+  ResponsiveDialogFooter,
+  ResponsiveDialogHeader,
+  ResponsiveDialogTitle,
+  ResponsiveDialogTrigger,
+} from "@/components/ui/ResponsiveDialog";
+import { IDENTITY_STYLES } from "@/config/constants";
+import { cn } from "@/lib/cssUtils";
+import { env } from "@/lib/env";
+import { guildOptions, userOptions } from "@/lib/options";
+import { IDENTITY_NAME, type IdentityType } from "@/lib/schemas/identity";
+import type { Schemas } from "@guildxyz/types";
+import { Check, CheckCircle, XCircle } from "@phosphor-icons/react/dist/ssr";
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import { EventSourcePlus } from "event-source-plus";
+import { useParams, useRouter, useSearchParams } from "next/navigation";
+import { type ReactNode, useEffect, useState } from "react";
+import { toast } from "sonner";
+
+const JOIN_MODAL_SEARCH_PARAM = "join";
+
+export const JoinGuild = () => {
+  const searchParams = useSearchParams();
+  const shouldOpen = searchParams.has(JOIN_MODAL_SEARCH_PARAM);
+
+  const [open, onOpenChange] = useState(false);
+
+  useEffect(() => {
+    if (!shouldOpen) return;
+    onOpenChange(true);
+  }, [shouldOpen]);
+
+  const { data: user } = useQuery(userOptions());
+
+  return (
+    <ResponsiveDialog open={open} onOpenChange={onOpenChange}>
+      <ResponsiveDialogTrigger asChild>
+        <Button colorScheme="success" className="rounded-2xl">
+          Join Guild
+        </Button>
+      </ResponsiveDialogTrigger>
+      <ResponsiveDialogContent>
+        <ResponsiveDialogHeader>
+          <ResponsiveDialogTitle>Join guild</ResponsiveDialogTitle>
+        </ResponsiveDialogHeader>
+
+        <ResponsiveDialogBody className="gap-2">
+          <JoinStep
+            complete={!!user}
+            label="Sign in"
+            button={<SignInButton />}
+          />
+          {/* TODO: add `requiredIdentities` prop to the Guild entity & list only the necessary identity connect buttons here */}
+          <ConnectIdentityJoinStep identity="DISCORD" />
+        </ResponsiveDialogBody>
+
+        <ResponsiveDialogFooter>
+          <JoinGuildButton />
+        </ResponsiveDialogFooter>
+      </ResponsiveDialogContent>
+    </ResponsiveDialog>
+  );
+};
+
+const JoinStep = ({
+  complete,
+  label,
+  button,
+}: { complete: boolean; label: string; button: ReactNode }) => (
+  <div className="grid grid-cols-[theme(space.5)_1fr] items-center gap-2">
+    <div
+      className={cn(
+        "flex size-5 items-center justify-center rounded-full border bg-blackAlpha text-white dark:bg-blackAlpha-hard",
+        {
+          "border-0 bg-icon-success dark:bg-icon-success": complete,
+        },
+      )}
+    >
+      {complete && <Check weight="bold" className="size-3" />}
+    </div>
+    <div className="flex items-center justify-between gap-2">
+      <span className="line-clamp-1 font-semibold">{label}</span>
+      <div className="shrink-0">{button}</div>
+    </div>
+  </div>
+);
+
+const getReturnToURLWithSearchParams = () => {
+  if (typeof window === "undefined") return "";
+
+  const url = new URL(window.location.href);
+  const searchParams = new URLSearchParams(url.searchParams);
+
+  if (searchParams.get(JOIN_MODAL_SEARCH_PARAM)) {
+    return url.toString();
+  }
+
+  searchParams.set(JOIN_MODAL_SEARCH_PARAM, "true");
+
+  return `${window.location.href.split("?")[0]}?${searchParams.toString()}`;
+};
+
+const ConnectIdentityJoinStep = ({ identity }: { identity: IdentityType }) => {
+  const router = useRouter();
+  const { data: user } = useQuery(userOptions());
+
+  const connected = !!user?.identities?.find((i) => i.platform === identity);
+
+  const Icon = IDENTITY_STYLES[identity].icon;
+
+  return (
+    <JoinStep
+      complete={connected}
+      label={`Connect ${IDENTITY_NAME[identity]}`}
+      button={
+        <Button
+          onClick={() =>
+            router.push(
+              `${env.NEXT_PUBLIC_API}/connect/${identity}?returnTo=${getReturnToURLWithSearchParams()}`,
+            )
+          }
+          leftIcon={
+            connected ? <Check weight="bold" /> : <Icon weight="fill" />
+          }
+          disabled={!user || connected} // TODO: once we allow users to log in with 3rd party accounts, we can remove the "!user" part of this
+          className={IDENTITY_STYLES[identity].buttonColorsClassName}
+        >
+          Connect
+        </Button>
+      }
+    />
+  );
+};
+
+const JoinGuildButton = () => {
+  const { guildUrlName } = useParams<{ guildUrlName: string }>();
+  const guild = useQuery(guildOptions({ guildIdLike: guildUrlName }));
+
+  const { data: user } = useQuery(userOptions());
+
+  const queryClient = useQueryClient();
+
+  if (!guild.data) {
+    throw new Error("Failed to fetch guild");
+  }
+
+  const { mutate, isPending } = useMutation({
+    mutationFn: async () => {
+      const url = new URL(
+        `api/guild/${guild.data.id}/join`,
+        env.NEXT_PUBLIC_API,
+      );
+      const eventSource = new EventSourcePlus(url.toString(), {
+        retryStrategy: "on-error",
+        method: "post",
+        maxRetryCount: 0,
+        headers: {
+          "content-type": "application/json",
+        },
+        credentials: "include",
+      });
+
+      const { resolve, reject, promise } =
+        Promise.withResolvers<Schemas["User"]>();
+      eventSource.listen({
+        onMessage: (sseMessage) => {
+          try {
+            const { status, message, data } = JSON.parse(
+              sseMessage.data,
+              // biome-ignore lint/suspicious/noExplicitAny: TODO: fill missing types
+            ) as any;
+            if (status === "Completed") {
+              if (data === undefined) {
+                throw new Error(
+                  "Server responded with success, but returned no user",
+                );
+              }
+              resolve(data);
+            } else if (status === "error") {
+              reject();
+            }
+
+            toast(status, {
+              description: message,
+              icon:
+                status === "Completed" ? (
+                  <CheckCircle weight="fill" className="text-icon-success" />
+                ) : undefined,
+            });
+          } catch (e) {
+            console.warn("JSON parsing failed on join event stream", e);
+          }
+        },
+        onResponseError: (ctx) => {
+          return reject(ctx.error);
+        },
+      });
+
+      return promise;
+    },
+    onSuccess: async (user) => {
+      queryClient.setQueryData(userOptions().queryKey, user);
+    },
+    onError: (error: Error) => {
+      toast("Join error", {
+        description: error.message,
+        icon: <XCircle weight="fill" className="text-icon-error" />,
+      });
+    },
+  });
+
+  return (
+    <Button
+      colorScheme="success"
+      className="w-full rounded-2xl"
+      onClick={() => mutate()}
+      isLoading={isPending}
+      disabled={!user}
+      loadingText="Joining Guild"
+      size="xl"
+    >
+      {user ? "Join Guild" : "Sign in to join"}
+    </Button>
+  );
+};
diff --git a/src/app/(dashboard)/[guildUrlName]/components/LeaveGuild.tsx b/src/app/(dashboard)/[guildUrlName]/components/LeaveGuild.tsx
new file mode 100644
index 0000000000..8e1b98018c
--- /dev/null
+++ b/src/app/(dashboard)/[guildUrlName]/components/LeaveGuild.tsx
@@ -0,0 +1,51 @@
+"use client";
+
+import { Button } from "@/components/ui/Button";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@/components/ui/Tooltip";
+import { fetchGuildLeave } from "@/lib/fetchers";
+import { userOptions } from "@/lib/options";
+import { SignOut } from "@phosphor-icons/react/dist/ssr";
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+import { useGuild } from "../hooks/useGuild";
+
+export const LeaveGuild = () => {
+  const guild = useGuild();
+  const queryClient = useQueryClient();
+
+  const { mutate, isPending } = useMutation({
+    mutationFn: () => fetchGuildLeave({ guildId: guild.data.id }),
+    onSuccess: async () => {
+      const prev = queryClient.getQueryData(userOptions().queryKey);
+      if (prev) {
+        queryClient.setQueryData(userOptions().queryKey, {
+          ...prev,
+          guilds: prev?.guilds?.filter(
+            ({ guildId }) => guildId !== guild.data.id,
+          ),
+        });
+      }
+    },
+  });
+
+  return (
+    <Tooltip>
+      <TooltipTrigger asChild>
+        {/* TODO: IconButton component */}
+        <Button
+          className="size-11 rounded-full"
+          onClick={() => mutate()}
+          isLoading={isPending}
+          leftIcon={<SignOut weight="bold" />}
+        />
+      </TooltipTrigger>
+
+      <TooltipContent>
+        <p>Leave guild</p>
+      </TooltipContent>
+    </Tooltip>
+  );
+};
diff --git a/src/app/(dashboard)/[guildUrlName]/hooks/useGuild.ts b/src/app/(dashboard)/[guildUrlName]/hooks/useGuild.ts
new file mode 100644
index 0000000000..8e0f0892f5
--- /dev/null
+++ b/src/app/(dashboard)/[guildUrlName]/hooks/useGuild.ts
@@ -0,0 +1,15 @@
+"use client";
+
+import { guildOptions } from "@/lib/options";
+import { useSuspenseQuery } from "@tanstack/react-query";
+import { useParams } from "next/navigation";
+
+export const useGuild = (urlName?: string) => {
+  const { guildUrlName: urlNameFromHook } = useParams<{
+    guildUrlName: string;
+  }>();
+
+  const guildIdLike = urlName ?? urlNameFromHook;
+
+  return useSuspenseQuery(guildOptions({ guildIdLike }));
+};
diff --git a/src/app/(dashboard)/[guildUrlName]/hooks/useGuildUrlName.ts b/src/app/(dashboard)/[guildUrlName]/hooks/useGuildUrlName.ts
new file mode 100644
index 0000000000..4ff14458ce
--- /dev/null
+++ b/src/app/(dashboard)/[guildUrlName]/hooks/useGuildUrlName.ts
@@ -0,0 +1,7 @@
+import { useParams } from "next/navigation";
+
+export const useGuildUrlName = () => {
+  const { guildUrlName } = useParams<{ guildUrlName: string }>();
+
+  return guildUrlName;
+};
diff --git a/src/app/(dashboard)/[guildUrlName]/layout.tsx b/src/app/(dashboard)/[guildUrlName]/layout.tsx
index a02183106e..8cac86dc61 100644
--- a/src/app/(dashboard)/[guildUrlName]/layout.tsx
+++ b/src/app/(dashboard)/[guildUrlName]/layout.tsx
@@ -1,18 +1,16 @@
-import { AuthBoundary } from "@/components/AuthBoundary";
 import { GuildImage } from "@/components/GuildImage";
 import { getQueryClient } from "@/lib/getQueryClient";
 import {
   guildOptions,
   pageBatchOptions,
-  rewardBatchOptions,
   roleBatchOptions,
   userOptions,
 } from "@/lib/options";
 import type { DynamicRoute } from "@/lib/types";
 import { HydrationBoundary, dehydrate } from "@tanstack/react-query";
 import { type PropsWithChildren, Suspense } from "react";
+import { ActionButton, ActionButtonSkeleton } from "./components/ActionButton";
 import { GuildTabs, GuildTabsSkeleton } from "./components/GuildTabs";
-import { JoinButton } from "./components/JoinButton";
 
 const GuildLayout = async ({
   params,
@@ -46,17 +44,6 @@ const GuildLayout = async ({
     await Promise.all(
       roleBatchOptionsCollection.map((c) => queryClient.prefetchQuery(c)),
     );
-    const rewardBatchOptionsCollection = [];
-    for (const options of roleBatchOptionsCollection) {
-      const roles = queryClient.getQueryData(options.queryKey);
-      if (!roles) continue;
-      for (const { id } of roles) {
-        rewardBatchOptionsCollection.push(rewardBatchOptions({ roleId: id }));
-      }
-    }
-    await Promise.all(
-      rewardBatchOptionsCollection.map((c) => queryClient.prefetchQuery(c)),
-    );
   }
 
   const guild = queryClient.getQueryState(
@@ -85,10 +72,10 @@ const GuildLayout = async ({
                   {guild.data.name}
                 </h1>
               </div>
-              {/* TODO: JoinButton should open a modal where the user can sign in and also connect the required platforms. So we won't need an AuthBoundary here. */}
-              <AuthBoundary fallback={null}>
-                <JoinButton />
-              </AuthBoundary>
+
+              <Suspense fallback={<ActionButtonSkeleton />}>
+                <ActionButton />
+              </Suspense>
             </div>
             <p className="line-clamp-3 max-w-prose text-balance text-lg leading-relaxed">
               {guild.data.description}
diff --git a/src/app/(dashboard)/[guildUrlName]/leaderboard/[rewardId]/components/Leaderboard.tsx b/src/app/(dashboard)/[guildUrlName]/leaderboard/[rewardId]/components/Leaderboard.tsx
new file mode 100644
index 0000000000..e25fa1c19f
--- /dev/null
+++ b/src/app/(dashboard)/[guildUrlName]/leaderboard/[rewardId]/components/Leaderboard.tsx
@@ -0,0 +1,47 @@
+"use client";
+
+import { userOptions } from "@/lib/options";
+import {
+  useQuery,
+  useSuspenseInfiniteQuery,
+  useSuspenseQuery,
+} from "@tanstack/react-query";
+import { leaderboardOptions, pointsRewardOptions } from "../options";
+import { LeaderboardUserCard } from "./LeaderboardUserCard";
+
+export const Leaderboard = ({ rewardId }: { rewardId: string }) => {
+  const { data: user } = useQuery(userOptions());
+  const { data: rawData } = useSuspenseInfiniteQuery(
+    leaderboardOptions({ rewardId, userId: user?.id }),
+  );
+
+  const { data: pointReward } = useSuspenseQuery(
+    pointsRewardOptions({ rewardId }),
+  );
+
+  const data = rawData?.pages[0];
+
+  return (
+    <div className="space-y-6">
+      {!!data.user && (
+        <section className="space-y-4">
+          <h2 className="font-bold">Your position</h2>
+          <LeaderboardUserCard user={data.user} />
+        </section>
+      )}
+
+      <section className="space-y-4">
+        <h2 className="font-bold">{`${pointReward.data.name} leaderboard`}</h2>
+        {data.leaderboard.map((user, index) => (
+          <LeaderboardUserCard
+            key={user.userId}
+            user={{
+              ...user,
+              rank: index + 1,
+            }}
+          />
+        ))}
+      </section>
+    </div>
+  );
+};
diff --git a/src/app/(dashboard)/[guildUrlName]/leaderboard/[rewardId]/components/LeaderboardUserCard.tsx b/src/app/(dashboard)/[guildUrlName]/leaderboard/[rewardId]/components/LeaderboardUserCard.tsx
new file mode 100644
index 0000000000..4f2944aace
--- /dev/null
+++ b/src/app/(dashboard)/[guildUrlName]/leaderboard/[rewardId]/components/LeaderboardUserCard.tsx
@@ -0,0 +1,38 @@
+import { Card } from "@/components/ui/Card";
+import type { Leaderboard } from "@/lib/schemas/leaderboard";
+import { User } from "@phosphor-icons/react/dist/ssr";
+import { useSuspenseQuery } from "@tanstack/react-query";
+import { useParams } from "next/navigation";
+import { pointsRewardOptions } from "../options";
+
+export const LeaderboardUserCard = ({
+  user,
+}: { user: NonNullable<Leaderboard["user"]> }) => {
+  const { rewardId } = useParams<{ rewardId: string }>();
+  const { data: pointReward } = useSuspenseQuery(
+    pointsRewardOptions({ rewardId }),
+  );
+
+  return (
+    <Card className="flex items-center">
+      <div className="flex size-16 shrink-0 items-center justify-center border-r bg-blackAlpha px-2 font-display font-extrabold text-lg sm:size-24 dark:bg-blackAlpha-hard">
+        {`#${user.rank}`}
+      </div>
+
+      <div className="flex w-full items-center justify-between gap-4 px-4 sm:px-5">
+        <div className="flex items-center gap-2">
+          <div className="flex size-8 shrink-0 items-center justify-center rounded-full bg-image sm:size-10">
+            <User weight="duotone" className="size-4 sm:size-5" />
+          </div>
+          <span className="line-clamp-1 shrink font-bold">
+            {user.primaryIdentity.foreignId}
+          </span>
+        </div>
+        <span className="shrink-0">
+          <b>{`${user.amount} `}</b>
+          <span>{pointReward.data.name}</span>
+        </span>
+      </div>
+    </Card>
+  );
+};
diff --git a/src/app/(dashboard)/[guildUrlName]/leaderboard/[rewardId]/options.ts b/src/app/(dashboard)/[guildUrlName]/leaderboard/[rewardId]/options.ts
new file mode 100644
index 0000000000..6461427b3e
--- /dev/null
+++ b/src/app/(dashboard)/[guildUrlName]/leaderboard/[rewardId]/options.ts
@@ -0,0 +1,32 @@
+import { fetchLeaderboard } from "@/app/(dashboard)/explorer/fetchers";
+import { fetchGuildApiData } from "@/lib/fetchGuildApi";
+import type { GuildReward } from "@/lib/schemas/guildReward";
+import { infiniteQueryOptions, queryOptions } from "@tanstack/react-query";
+
+export const leaderboardOptions = ({
+  rewardId,
+  userId,
+}: { rewardId: string; userId?: string }) => {
+  return infiniteQueryOptions({
+    queryKey: ["leaderboard", rewardId],
+    queryFn: ({ pageParam }) =>
+      fetchLeaderboard({ rewardId, userId, offset: pageParam }),
+    initialPageParam: 1,
+    enabled: rewardId !== undefined,
+    getNextPageParam: (lastPage) =>
+      lastPage.total / lastPage.limit <= lastPage.offset
+        ? undefined
+        : lastPage.offset + 1,
+  });
+};
+
+export const pointsRewardOptions = ({ rewardId }: { rewardId: string }) => {
+  return queryOptions({
+    queryKey: ["reward", "id", rewardId],
+    queryFn: () =>
+      fetchGuildApiData<Extract<GuildReward, { type: "POINTS" }>>(
+        `reward/id/${rewardId}`,
+      ),
+    enabled: !!rewardId,
+  });
+};
diff --git a/src/app/(dashboard)/[guildUrlName]/leaderboard/[rewardId]/page.tsx b/src/app/(dashboard)/[guildUrlName]/leaderboard/[rewardId]/page.tsx
new file mode 100644
index 0000000000..63335ba50b
--- /dev/null
+++ b/src/app/(dashboard)/[guildUrlName]/leaderboard/[rewardId]/page.tsx
@@ -0,0 +1,26 @@
+import { getQueryClient } from "@/lib/getQueryClient";
+import type { DynamicRoute } from "@/lib/types";
+import { HydrationBoundary, dehydrate } from "@tanstack/react-query";
+import { Suspense } from "react";
+import { Leaderboard } from "./components/Leaderboard";
+import { leaderboardOptions, pointsRewardOptions } from "./options";
+
+const LeaderboardPage = async ({
+  params,
+}: DynamicRoute<{ guildUrlName: string; rewardId: string }>) => {
+  const { rewardId } = await params;
+
+  const queryClient = getQueryClient();
+  await queryClient.prefetchInfiniteQuery(leaderboardOptions({ rewardId }));
+  await queryClient.prefetchQuery(pointsRewardOptions({ rewardId }));
+
+  return (
+    <HydrationBoundary state={dehydrate(queryClient)}>
+      <Suspense>
+        <Leaderboard rewardId={rewardId} />
+      </Suspense>
+    </HydrationBoundary>
+  );
+};
+
+export default LeaderboardPage;
diff --git a/src/app/(dashboard)/create-guild/components/CreateGuildButton.tsx b/src/app/(dashboard)/create-guild/components/CreateGuildButton.tsx
index 441b0c21c9..9c6d757eb3 100644
--- a/src/app/(dashboard)/create-guild/components/CreateGuildButton.tsx
+++ b/src/app/(dashboard)/create-guild/components/CreateGuildButton.tsx
@@ -2,9 +2,7 @@
 
 import { useConfetti } from "@/components/ConfettiProvider";
 import { Button } from "@/components/ui/Button";
-import { GUILD_AUTH_COOKIE_NAME } from "@/config/constants";
 import { fetchGuildApiData } from "@/lib/fetchGuildApi";
-import { getCookieClientSide } from "@/lib/getCookieClientSide";
 import type { CreateGuildForm, Guild } from "@/lib/schemas/guild";
 import { CheckCircle, XCircle } from "@phosphor-icons/react/dist/ssr";
 import { useMutation } from "@tanstack/react-query";
@@ -21,10 +19,6 @@ const CreateGuildButton = () => {
 
   const { mutate: onSubmit, isPending } = useMutation({
     mutationFn: async (data: CreateGuildForm) => {
-      const token = getCookieClientSide(GUILD_AUTH_COOKIE_NAME);
-
-      if (!token) throw new Error("Unauthorized"); // TODO: custom errors?
-
       const guild = {
         ...data,
         contact: undefined,
diff --git a/src/app/(dashboard)/explorer/fetchers.ts b/src/app/(dashboard)/explorer/fetchers.ts
index f9e275d2f1..af0956bd31 100644
--- a/src/app/(dashboard)/explorer/fetchers.ts
+++ b/src/app/(dashboard)/explorer/fetchers.ts
@@ -1,13 +1,15 @@
 import { fetchGuildApiData } from "@/lib/fetchGuildApi";
-import { tryGetParsedToken } from "@/lib/token";
+import { userOptions } from "@/lib/options";
+import type { Leaderboard } from "@/lib/schemas/leaderboard";
 import type { PaginatedResponse } from "@/lib/types";
 import type { Schemas } from "@guildxyz/types";
+import { useQuery } from "@tanstack/react-query";
 import { PAGE_SIZE } from "./constants";
 
 export const fetchAssociatedGuilds = async () => {
-  const { userId } = await tryGetParsedToken();
+  const { data: user } = useQuery(userOptions());
   return fetchGuildApiData<PaginatedResponse<Schemas["Guild"]>>(
-    `guild/search?page=1&pageSize=${Number.MAX_SAFE_INTEGER}&sortBy=name&reverse=false&customQuery=@owner:{${userId}}`,
+    `guild/search?page=1&pageSize=${Number.MAX_SAFE_INTEGER}&sortBy=name&reverse=false&customQuery=@owner:{${user?.id}}`,
   );
 };
 
@@ -19,3 +21,14 @@ export const fetchGuildSearch = async ({
     `guild/search?page=${pageParam}&pageSize=${PAGE_SIZE}&search=${search}`,
   );
 };
+
+export const fetchLeaderboard = async ({
+  rewardId,
+  userId,
+  offset = 0,
+}: { rewardId: string; userId?: string; offset?: number }) => {
+  return fetchGuildApiData<
+    Leaderboard & { total: number; offset: number; limit: number }
+  >(`reward/${rewardId}/leaderboard?userId=${userId}
+`); // TODO: use the offset param
+};
diff --git a/src/app/(dashboard)/explorer/layout.tsx b/src/app/(dashboard)/explorer/layout.tsx
index 2ba50a5015..70965bcbe9 100644
--- a/src/app/(dashboard)/explorer/layout.tsx
+++ b/src/app/(dashboard)/explorer/layout.tsx
@@ -1,12 +1,12 @@
 import { getQueryClient } from "@/lib/getQueryClient";
 import { HydrationBoundary, dehydrate } from "@tanstack/react-query";
 import type { PropsWithChildren } from "react";
-import { guildSearchOptions } from "./options";
+import { associatedGuildsOption, guildSearchOptions } from "./options";
 
 const ExplorerLayout = async ({ children }: PropsWithChildren) => {
   const queryClient = getQueryClient();
   await queryClient.prefetchInfiniteQuery(guildSearchOptions({}));
-  // await queryClient.prefetchQuery(associatedGuildsOption());
+  await queryClient.prefetchQuery(associatedGuildsOption());
 
   return (
     <HydrationBoundary state={dehydrate(queryClient)}>
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 94c5da2364..9853c91e72 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -1,20 +1,23 @@
 import type { Metadata } from "next";
 import "@/styles/globals.css";
+import { ConnectResultToast } from "@/components/ConnectResultToast";
+import { PrefetchUserBoundary } from "@/components/PrefetchUserBoundary";
 import { PreloadResources } from "@/components/PreloadResources";
 import { Providers } from "@/components/Providers";
 import { SignInDialog } from "@/components/SignInDialog";
 import { Toaster } from "@/components/ui/Toaster";
 import { dystopian } from "@/lib/fonts";
 import { cn } from "lib/cssUtils";
+import { Suspense } from "react";
 
 export const metadata: Metadata = {
   title: "Guildhall",
   applicationName: "Guildhall",
   description:
     "Automated membership management for the platforms your community already uses.",
-  // icons: {
-  //   icon: "/guild-icon.png",
-  // },
+  icons: {
+    icon: "/guild-icon.png",
+  },
 };
 
 const RootLayout = ({
@@ -27,10 +30,13 @@ const RootLayout = ({
       <body className={cn(dystopian.variable)}>
         <PreloadResources />
         <Providers>
-          {children}
+          <PrefetchUserBoundary>{children}</PrefetchUserBoundary>
 
-          <SignInDialog />
           <Toaster />
+          <SignInDialog />
+          <Suspense>
+            <ConnectResultToast />
+          </Suspense>
         </Providers>
       </body>
     </html>
diff --git a/src/components/AuthBoundary.tsx b/src/components/AuthBoundary.tsx
index d90ec5af4e..a9103dfca1 100644
--- a/src/components/AuthBoundary.tsx
+++ b/src/components/AuthBoundary.tsx
@@ -1,16 +1,18 @@
-import { tryGetToken } from "@/lib/token";
+"use client";
 
-export const AuthBoundary = async ({
+import { userOptions } from "@/lib/options";
+import { useQuery } from "@tanstack/react-query";
+
+export const AuthBoundary = ({
   fallback,
   children,
 }: Readonly<{
   fallback: React.ReactNode;
   children: React.ReactNode;
 }>) => {
-  try {
-    await tryGetToken();
-    return <>{children}</>;
-  } catch {
-    return <>{fallback}</>;
-  }
+  const { data: user } = useQuery(userOptions());
+
+  if (user?.id) return children;
+
+  return fallback;
 };
diff --git a/src/components/ConnectResultToast.tsx b/src/components/ConnectResultToast.tsx
new file mode 100644
index 0000000000..0f53c127ba
--- /dev/null
+++ b/src/components/ConnectResultToast.tsx
@@ -0,0 +1,57 @@
+"use client";
+
+import { IDENTITY_NAME, IdentityTypeSchema } from "@/lib/schemas/identity";
+import { CheckCircle, XCircle } from "@phosphor-icons/react/dist/ssr";
+import { usePathname, useRouter, useSearchParams } from "next/navigation";
+import { useCallback, useEffect } from "react";
+import { toast } from "sonner";
+
+const SUCCESS_PARAM = "connectSuccess";
+const ERROR_MSG_PARAM = "connectErrorMessage";
+
+export const ConnectResultToast = () => {
+  const { push } = useRouter();
+  const pathname = usePathname();
+  const searchParams = useSearchParams();
+
+  const connectSuccessPlatformSearchParam = searchParams.get(SUCCESS_PARAM);
+
+  const connectErrorMessage = searchParams.get(ERROR_MSG_PARAM);
+
+  const removeSearchParam = useCallback(
+    (param: string) => {
+      const newSearchParams = new URLSearchParams(searchParams);
+      newSearchParams.delete(param);
+      push(`${pathname}?${newSearchParams.toString()}`);
+    },
+    [searchParams, pathname, push],
+  );
+
+  useEffect(() => {
+    if (!connectSuccessPlatformSearchParam) return;
+
+    const connectSuccessPlatform = IdentityTypeSchema.safeParse(
+      connectSuccessPlatformSearchParam,
+    );
+
+    const platformName = connectSuccessPlatform.error
+      ? "an unknown platform"
+      : IDENTITY_NAME[connectSuccessPlatform.data];
+
+    toast(`Successfully connected ${platformName}!`, {
+      icon: <CheckCircle weight="fill" className="text-icon-success" />,
+    });
+    removeSearchParam(SUCCESS_PARAM);
+  }, [connectSuccessPlatformSearchParam, removeSearchParam]);
+
+  useEffect(() => {
+    if (!connectErrorMessage) return;
+    toast("Error", {
+      description: connectErrorMessage,
+      icon: <XCircle weight="fill" className="text-icon-error" />,
+    });
+    removeSearchParam(ERROR_MSG_PARAM);
+  }, [connectErrorMessage, removeSearchParam]);
+
+  return null;
+};
diff --git a/src/components/PrefetchUserBoundary.tsx b/src/components/PrefetchUserBoundary.tsx
new file mode 100644
index 0000000000..2a360fe7aa
--- /dev/null
+++ b/src/components/PrefetchUserBoundary.tsx
@@ -0,0 +1,15 @@
+import { getQueryClient } from "@/lib/getQueryClient";
+import { userOptions } from "@/lib/options";
+import { HydrationBoundary, dehydrate } from "@tanstack/react-query";
+import type { PropsWithChildren } from "react";
+
+export const PrefetchUserBoundary = async ({ children }: PropsWithChildren) => {
+  const queryClient = getQueryClient();
+  await queryClient.prefetchQuery(userOptions());
+
+  return (
+    <HydrationBoundary state={dehydrate(queryClient)}>
+      {children}
+    </HydrationBoundary>
+  );
+};
diff --git a/src/components/SignInButton.tsx b/src/components/SignInButton.tsx
index 9715059b4b..e4d82f5dc2 100644
--- a/src/components/SignInButton.tsx
+++ b/src/components/SignInButton.tsx
@@ -1,18 +1,22 @@
 "use client";
 
 import { signInDialogOpenAtom } from "@/config/atoms";
-import { SignIn } from "@phosphor-icons/react/dist/ssr";
+import { userOptions } from "@/lib/options";
+import { Check, SignIn } from "@phosphor-icons/react/dist/ssr";
+import { useQuery } from "@tanstack/react-query";
 import { useSetAtom } from "jotai";
 import type { ComponentProps } from "react";
 import { Button } from "./ui/Button";
 
 export const SignInButton = (props: ComponentProps<typeof Button>) => {
   const setSignInDialogOpen = useSetAtom(signInDialogOpenAtom);
+  const { data: user } = useQuery(userOptions());
 
   return (
     <Button
       {...props}
-      leftIcon={<SignIn weight="bold" />}
+      leftIcon={user ? <Check weight="bold" /> : <SignIn weight="bold" />}
+      disabled={!!user}
       onClick={() => setSignInDialogOpen(true)}
     >
       Sign in
diff --git a/src/components/SignInDialog.tsx b/src/components/SignInDialog.tsx
index 740745b7ad..f1ccf1c155 100644
--- a/src/components/SignInDialog.tsx
+++ b/src/components/SignInDialog.tsx
@@ -1,11 +1,12 @@
 "use client";
 
-import { signIn } from "@/actions/auth";
 import { signInDialogOpenAtom } from "@/config/atoms";
 import { fetchGuildApi } from "@/lib/fetchGuildApi";
+import { userOptions } from "@/lib/options";
+import { authSchema } from "@/lib/schemas/user";
 import { SignIn, User, Wallet, XCircle } from "@phosphor-icons/react/dist/ssr";
 import { DialogDescription } from "@radix-ui/react-dialog";
-import { useMutation } from "@tanstack/react-query";
+import { useMutation, useQueryClient } from "@tanstack/react-query";
 import { useAtom, useSetAtom } from "jotai";
 import { shortenHex } from "lib/shortenHex";
 import { toast } from "sonner";
@@ -21,7 +22,6 @@ import {
   ResponsiveDialogHeader,
   ResponsiveDialogTitle,
 } from "./ui/ResponsiveDialog";
-
 const CUSTOM_CONNECTOR_ICONS = {
   "com.brave.wallet": "/walletLogos/brave.svg",
   walletConnect: "/walletLogos/walletconnect.svg",
@@ -133,6 +133,8 @@ const SignInWithEthereum = () => {
 
   const setSignInDialogOpen = useSetAtom(signInDialogOpenAtom);
 
+  const queryClient = useQueryClient();
+
   const { mutate: signInWithEthereum, isPending } = useMutation({
     mutationKey: ["SIWE"],
     mutationFn: async () => {
@@ -155,9 +157,33 @@ const SignInWithEthereum = () => {
 
       const signature = await signMessageAsync({ message });
 
-      return signIn({ message, signature });
+      const requestInit = {
+        method: "POST",
+        body: JSON.stringify({
+          message,
+          signature,
+        }),
+      } satisfies RequestInit;
+
+      const signInRes = await fetchGuildApi("auth/siwe/login", requestInit);
+      let json = signInRes.data;
+      if (signInRes.response.status === 401) {
+        const registerRes = await fetchGuildApi(
+          "auth/siwe/register",
+          requestInit,
+        );
+        json = registerRes.data;
+      }
+      const authData = authSchema.parse(json);
+
+      return authData;
+    },
+    onSuccess: () => {
+      setSignInDialogOpen(false);
+      queryClient.invalidateQueries({
+        queryKey: userOptions().queryKey,
+      });
     },
-    onSuccess: () => setSignInDialogOpen(false),
     onError: (error) => {
       toast("Sign in error", {
         description: error.message,
diff --git a/src/components/SignOutButton.tsx b/src/components/SignOutButton.tsx
index 38540a6e67..33b94a0778 100644
--- a/src/components/SignOutButton.tsx
+++ b/src/components/SignOutButton.tsx
@@ -1,17 +1,34 @@
 "use client";
 
-import { signOut } from "@/actions/auth";
+import { associatedGuildsOption } from "@/app/(dashboard)/explorer/options";
+import { fetchGuildApi } from "@/lib/fetchGuildApi";
+import { userOptions } from "@/lib/options";
 import { SignOut } from "@phosphor-icons/react/dist/ssr";
-import { usePathname } from "next/navigation";
+import { useMutation, useQueryClient } from "@tanstack/react-query";
 import { Button } from "./ui/Button";
 
 export const SignOutButton = () => {
-  const pathname = usePathname();
+  const queryClient = useQueryClient();
+
+  const { mutate: signOut, isPending } = useMutation({
+    mutationFn: () =>
+      fetchGuildApi("auth/logout", {
+        method: "POST",
+      }),
+    onSuccess: () => {
+      queryClient.resetQueries({ queryKey: userOptions().queryKey });
+      queryClient.resetQueries({
+        queryKey: associatedGuildsOption().queryKey,
+      });
+    },
+  });
+
   return (
     <Button
       variant="ghost"
       leftIcon={<SignOut weight="bold" />}
-      onClick={() => signOut(pathname)}
+      onClick={() => signOut()}
+      isLoading={isPending}
     >
       Sign out
     </Button>
diff --git a/src/components/rewards/DiscordRewardCard.tsx b/src/components/rewards/DiscordRewardCard.tsx
new file mode 100644
index 0000000000..08c0d754e6
--- /dev/null
+++ b/src/components/rewards/DiscordRewardCard.tsx
@@ -0,0 +1,106 @@
+import { useGuild } from "@/app/(dashboard)/[guildUrlName]/hooks/useGuild";
+import { IDENTITY_STYLES } from "@/config/constants";
+import { cn } from "@/lib/cssUtils";
+import { env } from "@/lib/env";
+import { userOptions } from "@/lib/options";
+import type { GuildReward } from "@/lib/schemas/guildReward";
+import { IDENTITY_NAME } from "@/lib/schemas/identity";
+import { DiscordRoleRewardDataSchema } from "@/lib/schemas/roleReward";
+import { ArrowSquareOut } from "@phosphor-icons/react/dist/ssr";
+import { useQuery } from "@tanstack/react-query";
+import { useRouter } from "next/navigation";
+import type { FunctionComponent } from "react";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipPortal,
+  TooltipTrigger,
+} from "../ui/Tooltip";
+import { RewardCard, RewardCardButton } from "./RewardCard";
+import type { RewardCardProps } from "./types";
+
+export const DiscordRewardCard: FunctionComponent<RewardCardProps> = ({
+  roleId,
+  reward,
+}) => {
+  const router = useRouter();
+  const {
+    data: { imageUrl, invite },
+  } = reward.guildReward as Extract<GuildReward, { type: "DISCORD" }>;
+  const roleRewardData = DiscordRoleRewardDataSchema.parse(
+    reward.roleReward.data,
+  );
+
+  const Icon = IDENTITY_STYLES.DISCORD.icon;
+
+  const { data: user } = useQuery(userOptions());
+  const connected = !!user?.identities?.find((i) => i.platform === "DISCORD");
+
+  const {
+    data: { id: guildId },
+  } = useGuild();
+
+  const isGuildMember = !!user?.guilds?.find((g) => g.guildId === guildId);
+
+  const hasRoleAccess = !!user?.guilds
+    ?.flatMap((g) => g.roles)
+    ?.find((r) => r?.roleId === roleId);
+  return (
+    <RewardCard
+      title="Get role"
+      description={roleRewardData.roleId}
+      image={imageUrl ?? <Icon className="size-4" weight="fill" />}
+      className={IDENTITY_STYLES.DISCORD.borderColorClassName}
+    >
+      {!user || !isGuildMember || !hasRoleAccess ? (
+        <Tooltip>
+          <TooltipTrigger asChild>
+            <RewardCardButton
+              rightIcon={<ArrowSquareOut weight="bold" />}
+              className={cn(
+                IDENTITY_STYLES.DISCORD.buttonColorsClassName,
+                "![--button-bg-hover:var(--button-bg)] ![--button-bg-active:var(--button-bg)] cursor-not-allowed opacity-50",
+              )}
+            >
+              Go to server
+            </RewardCardButton>
+          </TooltipTrigger>
+
+          <TooltipPortal>
+            <TooltipContent>
+              <p>
+                {!user
+                  ? "Sign in to proceed"
+                  : !isGuildMember
+                    ? "Join guild to check access"
+                    : "Check access to get reward"}
+              </p>
+            </TooltipContent>
+          </TooltipPortal>
+        </Tooltip>
+      ) : connected ? (
+        <RewardCardButton
+          rightIcon={<ArrowSquareOut weight="bold" />}
+          className={IDENTITY_STYLES.DISCORD.buttonColorsClassName}
+          onClick={() => router.push(`https://discord.gg/${invite}`)}
+        >
+          Go to server
+        </RewardCardButton>
+      ) : (
+        <RewardCardButton
+          className={IDENTITY_STYLES.DISCORD.buttonColorsClassName}
+          onClick={
+            user
+              ? () =>
+                  router.push(
+                    `${env.NEXT_PUBLIC_API}/connect/DISCORD?returnTo=${window.location.href}`,
+                  )
+              : undefined
+          }
+        >
+          {`Connect ${IDENTITY_NAME.DISCORD}`}
+        </RewardCardButton>
+      )}
+    </RewardCard>
+  );
+};
diff --git a/src/components/rewards/GuildPermissionRewardCard.tsx b/src/components/rewards/GuildPermissionRewardCard.tsx
new file mode 100644
index 0000000000..025edc4fac
--- /dev/null
+++ b/src/components/rewards/GuildPermissionRewardCard.tsx
@@ -0,0 +1,15 @@
+import { Wrench } from "@phosphor-icons/react/dist/ssr";
+import type { FunctionComponent } from "react";
+import { RewardCard } from "./RewardCard";
+import type { RewardCardProps } from "./types";
+
+export const GuildPermissionRewardCard: FunctionComponent<RewardCardProps> = ({
+  reward,
+}) => (
+  <RewardCard
+    // biome-ignore lint: name should be inside guildReward.data, waiting for API change
+    title={(reward.guildReward as any).name ?? "Unknown permission"}
+    description="Guild permission"
+    image={<Wrench className="size-4" />}
+  />
+);
diff --git a/src/components/rewards/PointsRewardCard.tsx b/src/components/rewards/PointsRewardCard.tsx
new file mode 100644
index 0000000000..2c297be8ed
--- /dev/null
+++ b/src/components/rewards/PointsRewardCard.tsx
@@ -0,0 +1,38 @@
+import { useGuildUrlName } from "@/app/(dashboard)/[guildUrlName]/hooks/useGuildUrlName";
+import type { GuildReward } from "@/lib/schemas/guildReward";
+import { PointsRoleRewardDataSchema } from "@/lib/schemas/roleReward";
+import { ArrowRight, Star } from "@phosphor-icons/react/dist/ssr";
+import { useRouter } from "next/navigation";
+import type { FunctionComponent } from "react";
+import { RewardCard, RewardCardButton } from "./RewardCard";
+import type { RewardCardProps } from "./types";
+
+export const PointsRewardCard: FunctionComponent<RewardCardProps> = ({
+  reward,
+}) => {
+  const {
+    id,
+    data: { name },
+  } = reward.guildReward as Extract<GuildReward, { type: "POINTS" }>;
+  const roleRewardData = PointsRoleRewardDataSchema.parse(
+    reward.roleReward.data,
+  );
+
+  const router = useRouter();
+  const guildUrlName = useGuildUrlName();
+
+  return (
+    <RewardCard
+      title={`Get ${roleRewardData.amount} ${name || "points"}`}
+      description="Guild points"
+      image={<Star className="size-4" />}
+    >
+      <RewardCardButton
+        rightIcon={<ArrowRight weight="bold" />}
+        onClick={() => router.push(`/${guildUrlName}/leaderboard/${id}`)}
+      >
+        View leaderboard
+      </RewardCardButton>
+    </RewardCard>
+  );
+};
diff --git a/src/components/rewards/RewardCard.tsx b/src/components/rewards/RewardCard.tsx
index 402ba807ac..3015724513 100644
--- a/src/components/rewards/RewardCard.tsx
+++ b/src/components/rewards/RewardCard.tsx
@@ -16,33 +16,35 @@ export const RewardCard = ({
   description?: string;
   className?: string;
 }>) => (
-  <Card
-    className={cn("flex flex-col gap-4 border-2 p-4 shadow-none", className)}
-  >
-    <div className="grid grid-cols-[theme(space.9)_1fr] items-center gap-x-2 gap-y-0">
-      <div className="row-span-2 flex size-9 shrink-0 items-center justify-center overflow-hidden rounded-full bg-blackAlpha dark:bg-blackAlpha-hard">
-        {!image ? (
-          <QuestionMark weight="bold" className="size-4" />
-        ) : typeof image === "string" ? (
-          <img src={image} alt="Reward icon" />
-        ) : (
-          image
-        )}
-      </div>
+  <Card className={cn("@container border-2 p-4 shadow-none", className)}>
+    <div className="flex @[18rem]:flex-row flex-col gap-4">
+      <div className="grid grid-cols-[theme(space.9)_1fr] items-center gap-x-2 gap-y-0">
+        <div className="row-span-2 flex size-9 shrink-0 items-center justify-center overflow-hidden rounded-full bg-blackAlpha dark:bg-blackAlpha-hard">
+          {!image ? (
+            <QuestionMark weight="bold" className="size-4" />
+          ) : typeof image === "string" ? (
+            <img src={image} alt="Reward icon" />
+          ) : (
+            image
+          )}
+        </div>
 
-      <span
-        className={cn("font-bold text-sm", {
-          "row-span-2": !description,
-        })}
-      >
-        {title}
-      </span>
+        <span
+          className={cn("font-bold text-sm", {
+            "row-span-2": !description,
+          })}
+        >
+          {title}
+        </span>
 
-      {description && (
-        <span className="text-foreground-secondary text-xs">{description}</span>
-      )}
+        {description && (
+          <span className="text-foreground-secondary text-xs">
+            {description}
+          </span>
+        )}
+      </div>
+      {children}
     </div>
-    {children}
   </Card>
 );
 
@@ -50,5 +52,9 @@ export const RewardCardButton = ({
   className,
   ...props
 }: Omit<ButtonProps, "size">) => (
-  <Button className={cn("mt-auto", className)} size="sm" {...props} />
+  <Button
+    className={cn("mt-auto @[18rem]:ml-auto", className)}
+    size="sm"
+    {...props}
+  />
 );
diff --git a/src/components/rewards/rewardCards.ts b/src/components/rewards/rewardCards.ts
new file mode 100644
index 0000000000..8104a0c2d4
--- /dev/null
+++ b/src/components/rewards/rewardCards.ts
@@ -0,0 +1,15 @@
+import type { GuildRewardType } from "@/lib/schemas/guildReward";
+import type { FunctionComponent } from "react";
+import { DiscordRewardCard } from "./DiscordRewardCard";
+import { GuildPermissionRewardCard } from "./GuildPermissionRewardCard";
+import { PointsRewardCard } from "./PointsRewardCard";
+import type { RewardCardProps } from "./types";
+
+export const rewardCards = {
+  GUILD: GuildPermissionRewardCard,
+  POINTS: PointsRewardCard,
+  DISCORD: DiscordRewardCard,
+} as const satisfies Record<
+  Exclude<GuildRewardType, "FORM" | "TELEGRAM">,
+  FunctionComponent<RewardCardProps>
+>;
diff --git a/src/components/rewards/types.ts b/src/components/rewards/types.ts
new file mode 100644
index 0000000000..30928a87ad
--- /dev/null
+++ b/src/components/rewards/types.ts
@@ -0,0 +1,10 @@
+import type { GuildReward } from "@/lib/schemas/guildReward";
+import type { RoleReward } from "@/lib/schemas/roleReward";
+
+export type RewardCardProps = {
+  roleId: string;
+  reward: {
+    guildReward: GuildReward;
+    roleReward: RoleReward;
+  };
+};
diff --git a/src/config/constants.ts b/src/config/constants.ts
index 698f9f9e61..63303d0f90 100644
--- a/src/config/constants.ts
+++ b/src/config/constants.ts
@@ -1 +1,21 @@
-export const GUILD_AUTH_COOKIE_NAME = "guild-auth";
+import type { IdentityType } from "@/lib/schemas/identity";
+import type { Icon } from "@phosphor-icons/react/dist/lib/types";
+import { DiscordLogo } from "@phosphor-icons/react/dist/ssr";
+
+export const IDENTITY_STYLES = {
+  DISCORD: {
+    bgColorClassName: "bg-indigo-500",
+    borderColorClassName: "border-indigo-500",
+    buttonColorsClassName:
+      "[--button-bg:theme(colors.indigo.500)] [--button-bg-hover:theme(colors.indigo.600)] [--button-bg-active:theme(colors.indigo.700)] dark:[--button-bg-hover:theme(colors.indigo.400)] dark:[--button-bg-active:theme(colors.indigo.300)]",
+    icon: DiscordLogo,
+  },
+} satisfies Record<
+  IdentityType,
+  {
+    bgColorClassName: string;
+    borderColorClassName: string;
+    buttonColorsClassName: string;
+    icon: Icon;
+  }
+>;
diff --git a/src/lib/fetchGuildApi.ts b/src/lib/fetchGuildApi.ts
index 1449d0a650..d1e0d7cfad 100644
--- a/src/lib/fetchGuildApi.ts
+++ b/src/lib/fetchGuildApi.ts
@@ -1,5 +1,4 @@
-import { signOut } from "@/actions/auth";
-import { tryGetToken } from "@/lib/token";
+import { isServer } from "@tanstack/react-query";
 import { env } from "./env";
 import type { ErrorLike } from "./types";
 
@@ -71,30 +70,27 @@ export const fetchGuildApi = async <Data = object, Error = ErrorLike>(
   }
   const url = new URL(`api/${pathname}`, env.NEXT_PUBLIC_API);
 
-  let token: string | undefined;
-  try {
-    token = await tryGetToken();
-  } catch (_) {}
-
   const headers = new Headers(requestInit?.headers);
-  if (token) {
-    headers.set("X-Auth-Token", token);
-  }
+
   if (requestInit?.body instanceof FormData) {
     headers.set("Content-Type", "multipart/form-data");
   } else if (requestInit?.body) {
     headers.set("Content-Type", "application/json");
   }
 
+  // Next.js won't include cookies automatically, so we include them manually on the server
+  if (isServer) {
+    const { cookies } = await import("next/headers");
+    const cookiesHeader = (await cookies()).toString();
+    headers.set("cookie", cookiesHeader);
+  }
+
   const response = await fetch(url, {
     ...requestInit,
     headers,
+    credentials: "include",
   });
 
-  if (response.status === 401) {
-    signOut();
-  }
-
   const contentType = response.headers.get("content-type");
   if (!contentType?.includes("application/json")) {
     throw new Error("Guild API failed to respond with json");
diff --git a/src/lib/fetchers.ts b/src/lib/fetchers.ts
index 6d16bcfe23..0471d87c30 100644
--- a/src/lib/fetchers.ts
+++ b/src/lib/fetchers.ts
@@ -1,6 +1,5 @@
 import { fetchGuildApiData } from "@/lib/fetchGuildApi";
 import { resolveIdLikeRequest } from "@/lib/resolveIdLikeRequest";
-import { tryGetParsedToken } from "@/lib/token";
 import type {
   Entity,
   EntitySchema,
@@ -10,6 +9,7 @@ import type {
 } from "@/lib/types";
 import type { Schemas } from "@guildxyz/types";
 import { z } from "zod";
+import type { Role } from "./schemas/role";
 
 export const fetchEntity = async <T extends Entity, Error = ErrorLike>({
   idLike,
@@ -25,11 +25,7 @@ export const fetchEntity = async <T extends Entity, Error = ErrorLike>({
 };
 
 export const fetchUser = async () => {
-  const { userId } = await tryGetParsedToken();
-  return fetchEntity({
-    entity: "user",
-    idLike: userId,
-  });
+  return fetchGuildApiData<Schemas["User"]>("auth/me");
 };
 
 export const fetchGuildLeave = async ({ guildId }: { guildId: string }) => {
@@ -64,7 +60,7 @@ export const fetchRoleBatch = async ({
     idLike: pageIdLikeWithHome!,
   });
 
-  return fetchGuildApiData<Schemas["Role"][]>("role/batch", {
+  return fetchGuildApiData<Role[]>("role/batch", {
     method: "POST",
     body: JSON.stringify({ ids: page.roles?.map((p) => p.roleId!) ?? [] }),
   });
diff --git a/src/lib/getCookieClientSide.ts b/src/lib/getCookieClientSide.ts
deleted file mode 100644
index 40ca44e1eb..0000000000
--- a/src/lib/getCookieClientSide.ts
+++ /dev/null
@@ -1,21 +0,0 @@
-"use client";
-
-import { GUILD_AUTH_COOKIE_NAME } from "@/config/constants";
-
-export const getCookieClientSide = (name: string) => {
-  const decodedCookie = decodeURIComponent(document.cookie);
-  const cookiesArray = decodedCookie.split(";");
-
-  for (let i = 0; i < cookiesArray.length; i++) {
-    const [cookieName, cookieValue] = cookiesArray[i]
-      .split("=")
-      .map((v) => v.trim());
-    if (cookieName === name) return cookieValue;
-  }
-
-  return undefined;
-};
-
-export const getTokenClientSide = () => {
-  return getCookieClientSide(GUILD_AUTH_COOKIE_NAME);
-};
diff --git a/src/lib/options.ts b/src/lib/options.ts
index 275836d712..1d9556c09d 100644
--- a/src/lib/options.ts
+++ b/src/lib/options.ts
@@ -1,14 +1,12 @@
 import {
   fetchEntity,
   fetchPageBatch,
-  fetchRewardBatch,
   fetchRoleBatch,
   fetchUser,
 } from "@/lib/fetchers";
-import type { WithId, WithIdLike } from "@/lib/types";
+import type { WithIdLike } from "@/lib/types";
 import type { Schemas } from "@guildxyz/types";
 import { queryOptions } from "@tanstack/react-query";
-import { z } from "zod";
 
 export const entityOptions = ({
   entity,
@@ -45,17 +43,10 @@ export const roleBatchOptions = ({
   });
 };
 
-export const rewardBatchOptions = ({ roleId }: WithId<"role">) => {
-  z.string().uuid().parse(roleId);
-  return queryOptions({
-    queryKey: ["reward", "batch", roleId],
-    queryFn: () => fetchRewardBatch({ roleId }),
-  });
-};
-
 export const userOptions = () => {
   return queryOptions<Schemas["User"]>({
     queryKey: ["user"],
     queryFn: () => fetchUser(),
+    retry: false,
   });
 };
diff --git a/src/lib/schemas/guildReward.ts b/src/lib/schemas/guildReward.ts
new file mode 100644
index 0000000000..9847c7299c
--- /dev/null
+++ b/src/lib/schemas/guildReward.ts
@@ -0,0 +1,83 @@
+import { z } from "zod";
+import { DateLike } from "./common";
+
+const GUILD_REWARD_TYPES = [
+  "GUILD",
+  "DISCORD",
+  "TELEGRAM",
+  "POINTS",
+  "FORM",
+] as const;
+export const GuildRewardTypeSchema = z.enum(GUILD_REWARD_TYPES);
+export type GuildRewardType = z.infer<typeof GuildRewardTypeSchema>;
+
+const NameAndImageSchema = z.object({
+  name: z.string().optional(),
+  imageUrl: z.literal("").or(z.string().url()).optional(),
+});
+
+const GuildPermissionRewardSchema = z.object({
+  type: z.literal(GuildRewardTypeSchema.enum.GUILD),
+  data: NameAndImageSchema.extend({
+    permissionId: z.string().uuid(),
+    permissionLevel: z.enum(["read", "write", "delete"]),
+    permissionEntity: z.string(), // TODO: should this be an enum instead?
+  }),
+});
+
+const DiscordRewardSchema = z.object({
+  type: z.literal(GuildRewardTypeSchema.enum.DISCORD),
+  data: NameAndImageSchema.extend({
+    inviteChannel: z.string().optional(),
+    invite: z.string().optional(), // Custom invite link, can be modified on our frontend
+    joinButton: z.boolean().optional(),
+    needCaptcha: z.boolean().optional(),
+
+    requiredIdentityPlatform: z.literal("DISCORD"), // TODO: extract this to another schema?
+  }),
+});
+
+const TelegramRewardSchema = z.object({
+  type: z.literal(GuildRewardTypeSchema.enum.TELEGRAM),
+  data: NameAndImageSchema.extend({
+    groupId: z.string(),
+  }),
+});
+
+const PointsRewardSchema = z.object({
+  type: z.literal(GuildRewardTypeSchema.enum.POINTS),
+  data: NameAndImageSchema.extend({
+    pointId: z.string().uuid(),
+  }),
+});
+
+const FormRewardSchema = z.object({
+  type: z.literal(GuildRewardTypeSchema.enum.FORM),
+  data: NameAndImageSchema.extend({
+    formId: z.string().uuid(),
+  }),
+});
+
+const CreateGuildRewardSchema = z
+  .object({
+    guildId: z.string().uuid(),
+  })
+  .and(
+    z.discriminatedUnion("type", [
+      GuildPermissionRewardSchema,
+      DiscordRewardSchema,
+      TelegramRewardSchema,
+      PointsRewardSchema,
+      FormRewardSchema,
+    ]),
+  );
+
+const GuildRewardSchema = CreateGuildRewardSchema.and(
+  z.object({
+    id: z.string().uuid(),
+    createdAt: DateLike,
+    updatedAt: DateLike,
+  }),
+);
+
+export type GuildReward = z.infer<typeof GuildRewardSchema>;
diff --git a/src/lib/schemas/identity.ts b/src/lib/schemas/identity.ts
new file mode 100644
index 0000000000..6288ca82c0
--- /dev/null
+++ b/src/lib/schemas/identity.ts
@@ -0,0 +1,9 @@
+import { z } from "zod";
+
+const IDENTITY_TYPES = ["DISCORD"] as const;
+export const IdentityTypeSchema = z.enum(IDENTITY_TYPES);
+export type IdentityType = z.infer<typeof IdentityTypeSchema>;
+
+export const IDENTITY_NAME = {
+  DISCORD: "Discord",
+} satisfies Record<IdentityType, string>;
diff --git a/src/lib/schemas/leaderboard.ts b/src/lib/schemas/leaderboard.ts
new file mode 100644
index 0000000000..8fd35b00d1
--- /dev/null
+++ b/src/lib/schemas/leaderboard.ts
@@ -0,0 +1,19 @@
+import { z } from "zod";
+
+const LeaderboardUserSchema = z.object({
+  userId: z.string().uuid(),
+  amount: z.number(),
+  rank: z.number(),
+  // TODO: use the user identity schema here
+  primaryIdentity: z.object({
+    identityId: z.string().uuid(),
+    foreignId: z.string(),
+  }),
+});
+
+const LeaderboardSchema = z.object({
+  leaderboard: z.array(LeaderboardUserSchema.omit({ rank: true })),
+  user: LeaderboardUserSchema.optional(),
+});
+
+export type Leaderboard = z.infer<typeof LeaderboardSchema>;
diff --git a/src/lib/schemas/role.ts b/src/lib/schemas/role.ts
index e521dba871..b4e7b519ff 100644
--- a/src/lib/schemas/role.ts
+++ b/src/lib/schemas/role.ts
@@ -1,5 +1,6 @@
 import { z } from "zod";
 import { DateLike, ImageUrlSchema, NameSchema } from "./common";
+import { RoleRewardSchema } from "./roleReward";
 import { RuleSchema } from "./rule";
 
 export const CreateRoleSchema = z.object({
@@ -23,11 +24,7 @@ const RoleSchema = CreateRoleSchema.extend({
       rules: z.array(RuleSchema),
     }),
   ),
-  rewards: z.array(
-    z.object({
-      rewardId: z.string().uuid(),
-    }),
-  ),
+  rewards: z.array(RoleRewardSchema),
 });
 
 export type Role = z.infer<typeof RoleSchema>;
diff --git a/src/lib/schemas/roleReward.ts b/src/lib/schemas/roleReward.ts
new file mode 100644
index 0000000000..bae7b02712
--- /dev/null
+++ b/src/lib/schemas/roleReward.ts
@@ -0,0 +1,34 @@
+import { z } from "zod";
+import { DateLike } from "./common";
+
+const CapacityTimeSchema = z.object({
+  capacity: z.number().nonnegative().nullish(),
+  startTime: z.string().datetime().nullish(),
+  endTime: z.string().datetime().nullish(),
+});
+
+export const DiscordRoleRewardDataSchema = z
+  .object({
+    roleId: z.string(),
+  })
+  .strict();
+
+export const PointsRoleRewardDataSchema = z
+  .object({
+    amount: z.number().positive(),
+  })
+  .strict();
+
+// TODO: we might move the `CapacityTimeSchema` inside `data` if it'll be allowed for specific reward types only
+const CreateRoleRewardSchema = CapacityTimeSchema.extend({
+  rewardId: z.string().uuid(),
+  data: z.union([DiscordRoleRewardDataSchema, PointsRoleRewardDataSchema]),
+});
+
+export const RoleRewardSchema = CreateRoleRewardSchema.extend({
+  id: z.string().uuid(),
+  createdAt: DateLike,
+  updatedAt: DateLike,
+});
+
+export type RoleReward = z.infer<typeof RoleRewardSchema>;
diff --git a/src/lib/schemas/rule.ts b/src/lib/schemas/rule.ts
index 1e9c24a261..653fddce1a 100644
--- a/src/lib/schemas/rule.ts
+++ b/src/lib/schemas/rule.ts
@@ -1,4 +1,5 @@
 import { z } from "zod";
+import { IdentityTypeSchema } from "./identity";
 
 const CreateRuleSchema = z.object({
   /**
@@ -40,7 +41,7 @@ export const RuleSchema = CreateRuleSchema.extend({
   integration: z.object({
     id: z.string(),
     displayName: z.string(),
-    identityType: z.string(), // TODO: identity schema
+    identityType: IdentityTypeSchema,
   }),
   config: z
     .object({
diff --git a/src/lib/token.ts b/src/lib/token.ts
deleted file mode 100644
index a9bc0ff87d..0000000000
--- a/src/lib/token.ts
+++ /dev/null
@@ -1,27 +0,0 @@
-import { GUILD_AUTH_COOKIE_NAME } from "@/config/constants";
-import { getTokenClientSide } from "@/lib/getCookieClientSide";
-import { tokenSchema } from "@/lib/schemas/user";
-import { isServer } from "@tanstack/react-query";
-import { jwtDecode } from "jwt-decode";
-
-export const tryGetToken = async () => {
-  let token: string | undefined;
-  if (isServer) {
-    const { cookies } = await import("next/headers");
-    token = (await cookies()).get(GUILD_AUTH_COOKIE_NAME)?.value;
-  } else {
-    token = getTokenClientSide();
-  }
-
-  if (!token) {
-    throw new Error(
-      "Failed to retrieve JWT token on auth request initialization.",
-    );
-  }
-  return token;
-};
-
-export const tryGetParsedToken = async () => {
-  const token = await tryGetToken();
-  return tokenSchema.parse(jwtDecode(token));
-};
diff --git a/tailwind.config.ts b/tailwind.config.ts
index 85b633f1da..73998060d8 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -1,6 +1,7 @@
 import type { Config } from "tailwindcss"
 import animatePlugin from "tailwindcss-animate";
-import typography from "@tailwindcss/typography"
+import typographyPlugin from "@tailwindcss/typography"
+import containerQueriesPlugin from "@tailwindcss/container-queries"
 
 const config = {
   darkMode: ["class"],
@@ -101,7 +102,7 @@ const config = {
       },
     },
   },
-  plugins: [animatePlugin, typography],
+  plugins: [animatePlugin, typographyPlugin, containerQueriesPlugin],
 } satisfies Config
 
 export default config

From a525286384a0c37e117ba218aa396df72cfac51d Mon Sep 17 00:00:00 2001
From: BrickheadJohnny <johnny.zgen@gmail.com>
Date: Thu, 12 Dec 2024 13:08:31 +0100
Subject: [PATCH 77/93] feat: basic access indicators

---
 .../[guildUrlName]/[pageUrlName]/page.tsx     | 70 ++++++++++++++++---
 1 file changed, 62 insertions(+), 8 deletions(-)

diff --git a/src/app/(dashboard)/[guildUrlName]/[pageUrlName]/page.tsx b/src/app/(dashboard)/[guildUrlName]/[pageUrlName]/page.tsx
index 9e0cf3b3a0..50649ba9a3 100644
--- a/src/app/(dashboard)/[guildUrlName]/[pageUrlName]/page.tsx
+++ b/src/app/(dashboard)/[guildUrlName]/[pageUrlName]/page.tsx
@@ -2,15 +2,17 @@
 
 import { RequirementDisplayComponent } from "@/components/requirements/RequirementDisplayComponent";
 import { rewardCards } from "@/components/rewards/rewardCards";
-import { Button } from "@/components/ui/Button";
+import { Badge } from "@/components/ui/Badge";
+import { Button, buttonVariants } from "@/components/ui/Button";
 import { Card } from "@/components/ui/Card";
 import { Skeleton } from "@/components/ui/Skeleton";
+import { cn } from "@/lib/cssUtils";
 import { fetchGuildApiData } from "@/lib/fetchGuildApi";
-import { roleBatchOptions } from "@/lib/options";
+import { roleBatchOptions, userOptions } from "@/lib/options";
 import type { GuildReward, GuildRewardType } from "@/lib/schemas/guildReward";
 import type { Role } from "@/lib/schemas/role";
-import { ImageSquare, Lock } from "@phosphor-icons/react/dist/ssr";
-import { useSuspenseQuery } from "@tanstack/react-query";
+import { Check, ImageSquare, LockSimple } from "@phosphor-icons/react/dist/ssr";
+import { useQuery, useSuspenseQuery } from "@tanstack/react-query";
 import { useParams } from "next/navigation";
 import { Suspense } from "react";
 import { useGuild } from "../hooks/useGuild";
@@ -72,10 +74,8 @@ const RoleCard = ({ role }: { role: Role }) => (
         <span className="font-bold text-foreground-secondary text-xs">
           REQUIREMENTS
         </span>
-        <Button size="sm">
-          <Lock />
-          Join Guild to collect rewards
-        </Button>
+
+        <AccessIndicator roleId={role.id} className="hidden sm:flex" />
       </div>
 
       {/* TODO group rules by access groups */}
@@ -87,6 +87,8 @@ const RoleCard = ({ role }: { role: Role }) => (
           />
         ))}
       </div>
+
+      <AccessIndicator roleId={role.id} className="sm:hidden" />
     </div>
   </Card>
 );
@@ -135,4 +137,56 @@ const RoleRewards = ({
   ) : null;
 };
 
+// TODO: handle state during join & error/no access states too
+const ACCESS_INDICATOR_CLASS =
+  "rounded-b-2xl rounded-t-none min-w-full justify-between sm:rounded-b-xl sm:rounded-t-xl sm:min-w-max";
+const AccessIndicator = ({
+  roleId,
+  className,
+}: { roleId: Role["id"]; className?: string }) => {
+  const { data: guild } = useGuild();
+
+  const { data: user } = useQuery(userOptions());
+  const isGuildMember = user?.guilds?.find((g) => g.guildId === guild.id);
+  const isRoleMember = !!user?.guilds
+    ?.flatMap((g) => g.roles)
+    ?.find((r) => r?.roleId === roleId);
+
+  if (!isGuildMember)
+    return (
+      <Button
+        size="sm"
+        leftIcon={<LockSimple weight="bold" />}
+        className={cn(ACCESS_INDICATOR_CLASS, className)}
+      >
+        Join guild to collect rewards
+      </Button>
+    );
+
+  if (!isRoleMember)
+    return (
+      <Button
+        size="sm"
+        leftIcon={<LockSimple weight="bold" />}
+        className={cn(ACCESS_INDICATOR_CLASS, className)}
+      >
+        Check access to collect rewards
+      </Button>
+    );
+
+  return (
+    <Badge
+      className={buttonVariants({
+        size: "sm",
+        colorScheme: "success",
+        variant: "subtle",
+        className: [ACCESS_INDICATOR_CLASS, className, "pointer-events-none"],
+      })}
+    >
+      <Check weight="bold" />
+      <span>You have access</span>
+    </Badge>
+  );
+};
+
 export default GuildPage;

From 6932741df8e6c51b1a51f5607e1828d9b33f5a2a Mon Sep 17 00:00:00 2001
From: BrickheadJohnny <johnny.zgen@gmail.com>
Date: Thu, 12 Dec 2024 13:12:24 +0100
Subject: [PATCH 78/93] feat: store join modal open state in an atom

---
 src/app/(dashboard)/[guildUrlName]/[pageUrlName]/page.tsx | 6 ++++++
 src/app/(dashboard)/[guildUrlName]/atoms.ts               | 3 +++
 .../(dashboard)/[guildUrlName]/components/JoinGuild.tsx   | 8 +++++---
 3 files changed, 14 insertions(+), 3 deletions(-)
 create mode 100644 src/app/(dashboard)/[guildUrlName]/atoms.ts

diff --git a/src/app/(dashboard)/[guildUrlName]/[pageUrlName]/page.tsx b/src/app/(dashboard)/[guildUrlName]/[pageUrlName]/page.tsx
index 50649ba9a3..9ea27ca4f9 100644
--- a/src/app/(dashboard)/[guildUrlName]/[pageUrlName]/page.tsx
+++ b/src/app/(dashboard)/[guildUrlName]/[pageUrlName]/page.tsx
@@ -13,8 +13,10 @@ import type { GuildReward, GuildRewardType } from "@/lib/schemas/guildReward";
 import type { Role } from "@/lib/schemas/role";
 import { Check, ImageSquare, LockSimple } from "@phosphor-icons/react/dist/ssr";
 import { useQuery, useSuspenseQuery } from "@tanstack/react-query";
+import { useSetAtom } from "jotai";
 import { useParams } from "next/navigation";
 import { Suspense } from "react";
+import { joinModalAtom } from "../atoms";
 import { useGuild } from "../hooks/useGuild";
 
 const GuildPage = () => {
@@ -152,12 +154,15 @@ const AccessIndicator = ({
     ?.flatMap((g) => g.roles)
     ?.find((r) => r?.roleId === roleId);
 
+  const onJoinModalOpenChange = useSetAtom(joinModalAtom);
+
   if (!isGuildMember)
     return (
       <Button
         size="sm"
         leftIcon={<LockSimple weight="bold" />}
         className={cn(ACCESS_INDICATOR_CLASS, className)}
+        onClick={() => onJoinModalOpenChange(true)}
       >
         Join guild to collect rewards
       </Button>
@@ -169,6 +174,7 @@ const AccessIndicator = ({
         size="sm"
         leftIcon={<LockSimple weight="bold" />}
         className={cn(ACCESS_INDICATOR_CLASS, className)}
+        onClick={() => onJoinModalOpenChange(true)}
       >
         Check access to collect rewards
       </Button>
diff --git a/src/app/(dashboard)/[guildUrlName]/atoms.ts b/src/app/(dashboard)/[guildUrlName]/atoms.ts
new file mode 100644
index 0000000000..f1b445154f
--- /dev/null
+++ b/src/app/(dashboard)/[guildUrlName]/atoms.ts
@@ -0,0 +1,3 @@
+import { atom } from "jotai";
+
+export const joinModalAtom = atom(false);
diff --git a/src/app/(dashboard)/[guildUrlName]/components/JoinGuild.tsx b/src/app/(dashboard)/[guildUrlName]/components/JoinGuild.tsx
index 2805434c10..d39bc562f2 100644
--- a/src/app/(dashboard)/[guildUrlName]/components/JoinGuild.tsx
+++ b/src/app/(dashboard)/[guildUrlName]/components/JoinGuild.tsx
@@ -20,9 +20,11 @@ import type { Schemas } from "@guildxyz/types";
 import { Check, CheckCircle, XCircle } from "@phosphor-icons/react/dist/ssr";
 import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
 import { EventSourcePlus } from "event-source-plus";
+import { useAtom } from "jotai";
 import { useParams, useRouter, useSearchParams } from "next/navigation";
-import { type ReactNode, useEffect, useState } from "react";
+import { type ReactNode, useEffect } from "react";
 import { toast } from "sonner";
+import { joinModalAtom } from "../atoms";
 
 const JOIN_MODAL_SEARCH_PARAM = "join";
 
@@ -30,12 +32,12 @@ export const JoinGuild = () => {
   const searchParams = useSearchParams();
   const shouldOpen = searchParams.has(JOIN_MODAL_SEARCH_PARAM);
 
-  const [open, onOpenChange] = useState(false);
+  const [open, onOpenChange] = useAtom(joinModalAtom);
 
   useEffect(() => {
     if (!shouldOpen) return;
     onOpenChange(true);
-  }, [shouldOpen]);
+  }, [shouldOpen, onOpenChange]);
 
   const { data: user } = useQuery(userOptions());
 

From c9d2564a55d61e4061b790b8cb54fb304aa542bb Mon Sep 17 00:00:00 2001
From: BrickheadJohnny <johnny.zgen@gmail.com>
Date: Thu, 12 Dec 2024 13:18:40 +0100
Subject: [PATCH 79/93] fix: fine-tune colors in light mode

---
 src/app/(dashboard)/[guildUrlName]/[pageUrlName]/page.tsx | 2 +-
 src/config/constants.ts                                   | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/app/(dashboard)/[guildUrlName]/[pageUrlName]/page.tsx b/src/app/(dashboard)/[guildUrlName]/[pageUrlName]/page.tsx
index 9ea27ca4f9..a34f5e908d 100644
--- a/src/app/(dashboard)/[guildUrlName]/[pageUrlName]/page.tsx
+++ b/src/app/(dashboard)/[guildUrlName]/[pageUrlName]/page.tsx
@@ -56,7 +56,7 @@ const RoleCard = ({ role }: { role: Role }) => (
             alt="role avatar"
           />
         ) : (
-          <div className="flex size-14 items-center justify-center rounded-full bg-image">
+          <div className="flex size-14 items-center justify-center rounded-full bg-image text-white">
             <ImageSquare weight="duotone" className="size-6" />
           </div>
         )}
diff --git a/src/config/constants.ts b/src/config/constants.ts
index 63303d0f90..d1ea5a3519 100644
--- a/src/config/constants.ts
+++ b/src/config/constants.ts
@@ -7,7 +7,7 @@ export const IDENTITY_STYLES = {
     bgColorClassName: "bg-indigo-500",
     borderColorClassName: "border-indigo-500",
     buttonColorsClassName:
-      "[--button-bg:theme(colors.indigo.500)] [--button-bg-hover:theme(colors.indigo.600)] [--button-bg-active:theme(colors.indigo.700)] dark:[--button-bg-hover:theme(colors.indigo.400)] dark:[--button-bg-active:theme(colors.indigo.300)]",
+      "[--button-bg:theme(colors.indigo.500)] [--button-bg-hover:theme(colors.indigo.600)] [--button-bg-active:theme(colors.indigo.700)] dark:[--button-bg-hover:theme(colors.indigo.400)] dark:[--button-bg-active:theme(colors.indigo.300)] [--button-foreground:theme(colors.white)]",
     icon: DiscordLogo,
   },
 } satisfies Record<

From 77b5dddb2de65f01eb455baa2f260157f48e408d Mon Sep 17 00:00:00 2001
From: BrickheadJohnny <johnny.zgen@gmail.com>
Date: Thu, 12 Dec 2024 13:20:18 +0100
Subject: [PATCH 80/93] fix: fine-tune primary subtle button color

---
 src/styles/globals.css | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/styles/globals.css b/src/styles/globals.css
index e74452b9e7..bfb4d84a4e 100644
--- a/src/styles/globals.css
+++ b/src/styles/globals.css
@@ -214,8 +214,8 @@ html {
   --button-success-hover: var(--green-400);
   --button-success-active: var(--green-300);
   --button-success-foreground: var(--white);
-  --button-success-subtle: var(--green-300);
-  --button-success-subtle-foreground: var(--green-500);
+  --button-success-subtle: var(--green-200);
+  --button-success-subtle-foreground: var(--green-300);
 
   --badge-background: var(--whiteAlpha);
   --badge-foreground: var(--foreground);

From 3945561b16e2294a3eeec383c6ff27f8c40b4d16 Mon Sep 17 00:00:00 2001
From: BrickheadJohnny <johnny.zgen@gmail.com>
Date: Thu, 12 Dec 2024 15:46:45 +0100
Subject: [PATCH 81/93] feat(JoinGuild): better toasts

---
 .../[guildUrlName]/components/JoinGuild.tsx   | 39 +++++++++++++++++--
 1 file changed, 35 insertions(+), 4 deletions(-)

diff --git a/src/app/(dashboard)/[guildUrlName]/components/JoinGuild.tsx b/src/app/(dashboard)/[guildUrlName]/components/JoinGuild.tsx
index d39bc562f2..369c0a6c0b 100644
--- a/src/app/(dashboard)/[guildUrlName]/components/JoinGuild.tsx
+++ b/src/app/(dashboard)/[guildUrlName]/components/JoinGuild.tsx
@@ -14,11 +14,16 @@ import {
 import { IDENTITY_STYLES } from "@/config/constants";
 import { cn } from "@/lib/cssUtils";
 import { env } from "@/lib/env";
-import { guildOptions, userOptions } from "@/lib/options";
+import { guildOptions, roleBatchOptions, userOptions } from "@/lib/options";
 import { IDENTITY_NAME, type IdentityType } from "@/lib/schemas/identity";
 import type { Schemas } from "@guildxyz/types";
 import { Check, CheckCircle, XCircle } from "@phosphor-icons/react/dist/ssr";
-import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import {
+  useMutation,
+  useQuery,
+  useQueryClient,
+  useSuspenseQuery,
+} from "@tanstack/react-query";
 import { EventSourcePlus } from "event-source-plus";
 import { useAtom } from "jotai";
 import { useParams, useRouter, useSearchParams } from "next/navigation";
@@ -142,7 +147,10 @@ const ConnectIdentityJoinStep = ({ identity }: { identity: IdentityType }) => {
 };
 
 const JoinGuildButton = () => {
-  const { guildUrlName } = useParams<{ guildUrlName: string }>();
+  const { pageUrlName, guildUrlName } = useParams<{
+    pageUrlName: string;
+    guildUrlName: string;
+  }>();
   const guild = useQuery(guildOptions({ guildIdLike: guildUrlName }));
 
   const { data: user } = useQuery(userOptions());
@@ -153,6 +161,13 @@ const JoinGuildButton = () => {
     throw new Error("Failed to fetch guild");
   }
 
+  const { data: roles } = useSuspenseQuery(
+    roleBatchOptions({
+      guildIdLike: guildUrlName,
+      pageIdLike: pageUrlName,
+    }),
+  );
+
   const { mutate, isPending } = useMutation({
     mutationFn: async () => {
       const url = new URL(
@@ -174,10 +189,11 @@ const JoinGuildButton = () => {
       eventSource.listen({
         onMessage: (sseMessage) => {
           try {
-            const { status, message, data } = JSON.parse(
+            const sse = JSON.parse(
               sseMessage.data,
               // biome-ignore lint/suspicious/noExplicitAny: TODO: fill missing types
             ) as any;
+            const { status, message, data } = sse;
             if (status === "Completed") {
               if (data === undefined) {
                 throw new Error(
@@ -185,6 +201,21 @@ const JoinGuildButton = () => {
                 );
               }
               resolve(data);
+            } else if (status === "Acquired roles:") {
+              // TODO: temp, just for the demo
+              if ("roles" in sse) {
+                console.log("roles", sse);
+                const roleNames = sse.roles.map(
+                  ({ roleId }: { roleId: string }) => {
+                    const role = roles.find((r) => r.id === roleId);
+                    return role?.name;
+                  },
+                );
+                toast("Acquired roles", {
+                  description: roleNames.filter(Boolean).join(", "),
+                });
+                return;
+              }
             } else if (status === "error") {
               reject();
             }

From e764e1f0fb4bbf85e271d53c27bf6943489ab616 Mon Sep 17 00:00:00 2001
From: BrickheadJohnny <johnny.zgen@gmail.com>
Date: Thu, 12 Dec 2024 15:55:14 +0100
Subject: [PATCH 82/93] fix: move confetti provider to the root layout

---
 src/app/(dashboard)/create-guild/page.tsx | 29 ++++++++++-------------
 src/components/Providers.tsx              |  3 ++-
 2 files changed, 15 insertions(+), 17 deletions(-)

diff --git a/src/app/(dashboard)/create-guild/page.tsx b/src/app/(dashboard)/create-guild/page.tsx
index fcb9b6c6c5..054d28a663 100644
--- a/src/app/(dashboard)/create-guild/page.tsx
+++ b/src/app/(dashboard)/create-guild/page.tsx
@@ -1,5 +1,4 @@
 import { AuthBoundary } from "@/components/AuthBoundary";
-import { ConfettiProvider } from "@/components/ConfettiProvider";
 import { SignInButton } from "@/components/SignInButton";
 import { Card } from "@/components/ui/Card";
 import svgToTinyDataUri from "mini-svg-data-uri";
@@ -23,23 +22,21 @@ const CreateGuild = () => (
     />
 
     <CreateGuildFormProvider>
-      <ConfettiProvider>
-        <Card className="flex flex-col px-5 py-6 shadow-lg md:px-6">
-          <h2 className="mb-7 text-center font-display font-extrabold text-2xl">
-            Begin your guild
-          </h2>
+      <Card className="flex flex-col px-5 py-6 shadow-lg md:px-6">
+        <h2 className="mb-7 text-center font-display font-extrabold text-2xl">
+          Begin your guild
+        </h2>
 
-          <div className="mb-8 flex flex-col gap-4">
-            <CreateGuildForm />
-          </div>
+        <div className="mb-8 flex flex-col gap-4">
+          <CreateGuildForm />
+        </div>
 
-          <AuthBoundary
-            fallback={<SignInButton size="xl" colorScheme="primary" />}
-          >
-            <CreateGuildButton />
-          </AuthBoundary>
-        </Card>
-      </ConfettiProvider>
+        <AuthBoundary
+          fallback={<SignInButton size="xl" colorScheme="primary" />}
+        >
+          <CreateGuildButton />
+        </AuthBoundary>
+      </Card>
     </CreateGuildFormProvider>
   </main>
 );
diff --git a/src/components/Providers.tsx b/src/components/Providers.tsx
index 51c80a8193..dc25cb332a 100644
--- a/src/components/Providers.tsx
+++ b/src/components/Providers.tsx
@@ -8,6 +8,7 @@ import { Provider as JotaiProvider } from "jotai";
 import { ThemeProvider } from "next-themes";
 import type { FunctionComponent, PropsWithChildren } from "react";
 import { WagmiProvider } from "wagmi";
+import { ConfettiProvider } from "./ConfettiProvider";
 import { TooltipProvider } from "./ui/Tooltip";
 
 export const Providers: FunctionComponent<PropsWithChildren> = ({
@@ -26,7 +27,7 @@ export const Providers: FunctionComponent<PropsWithChildren> = ({
         <TooltipProvider>
           <WagmiProvider config={wagmiConfig}>
             <QueryClientProvider client={queryClient}>
-              {children}
+              <ConfettiProvider>{children}</ConfettiProvider>
               <ReactQueryDevtools initialIsOpen={false} />
             </QueryClientProvider>
           </WagmiProvider>

From 5624e273227dad5850a12e5e74725ab6ebad5bb6 Mon Sep 17 00:00:00 2001
From: BrickheadJohnny <johnny.zgen@gmail.com>
Date: Thu, 12 Dec 2024 16:13:28 +0100
Subject: [PATCH 83/93] fix(JoinGuild): close join modal on success

---
 src/app/(dashboard)/[guildUrlName]/components/JoinGuild.tsx | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/app/(dashboard)/[guildUrlName]/components/JoinGuild.tsx b/src/app/(dashboard)/[guildUrlName]/components/JoinGuild.tsx
index 369c0a6c0b..2bac032e84 100644
--- a/src/app/(dashboard)/[guildUrlName]/components/JoinGuild.tsx
+++ b/src/app/(dashboard)/[guildUrlName]/components/JoinGuild.tsx
@@ -25,7 +25,7 @@ import {
   useSuspenseQuery,
 } from "@tanstack/react-query";
 import { EventSourcePlus } from "event-source-plus";
-import { useAtom } from "jotai";
+import { useAtom, useSetAtom } from "jotai";
 import { useParams, useRouter, useSearchParams } from "next/navigation";
 import { type ReactNode, useEffect } from "react";
 import { toast } from "sonner";
@@ -168,6 +168,8 @@ const JoinGuildButton = () => {
     }),
   );
 
+  const onJoinModalOpenChange = useSetAtom(joinModalAtom);
+
   const { mutate, isPending } = useMutation({
     mutationFn: async () => {
       const url = new URL(
@@ -239,6 +241,7 @@ const JoinGuildButton = () => {
       return promise;
     },
     onSuccess: async (user) => {
+      onJoinModalOpenChange(false);
       queryClient.setQueryData(userOptions().queryKey, user);
     },
     onError: (error: Error) => {

From 6a059d369a7a6492b1b50cca8d07581165b2698a Mon Sep 17 00:00:00 2001
From: BrickheadJohnny <johnny.zgen@gmail.com>
Date: Thu, 12 Dec 2024 18:26:59 +0100
Subject: [PATCH 84/93] fix(DiscordRoleRewardDataSchema): add name prop

---
 src/components/rewards/DiscordRewardCard.tsx | 2 +-
 src/lib/schemas/roleReward.ts                | 1 +
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/components/rewards/DiscordRewardCard.tsx b/src/components/rewards/DiscordRewardCard.tsx
index 08c0d754e6..35f50c95e6 100644
--- a/src/components/rewards/DiscordRewardCard.tsx
+++ b/src/components/rewards/DiscordRewardCard.tsx
@@ -48,7 +48,7 @@ export const DiscordRewardCard: FunctionComponent<RewardCardProps> = ({
   return (
     <RewardCard
       title="Get role"
-      description={roleRewardData.roleId}
+      description={roleRewardData.name}
       image={imageUrl ?? <Icon className="size-4" weight="fill" />}
       className={IDENTITY_STYLES.DISCORD.borderColorClassName}
     >
diff --git a/src/lib/schemas/roleReward.ts b/src/lib/schemas/roleReward.ts
index bae7b02712..4e764d4fc7 100644
--- a/src/lib/schemas/roleReward.ts
+++ b/src/lib/schemas/roleReward.ts
@@ -10,6 +10,7 @@ const CapacityTimeSchema = z.object({
 export const DiscordRoleRewardDataSchema = z
   .object({
     roleId: z.string(),
+    name: z.string(),
   })
   .strict();
 

From 27cbb2faa42f6d386fd69db92f550f3457f5b234 Mon Sep 17 00:00:00 2001
From: BrickheadJohnny <johnny.zgen@gmail.com>
Date: Thu, 2 Jan 2025 08:52:18 +0100
Subject: [PATCH 85/93] feat: IconButton component

---
 .../[guildUrlName]/components/LeaveGuild.tsx  |  8 +-
 src/components/ui/IconButton.tsx              | 48 ++++++++++
 src/stories/IconButton.stories.tsx            | 89 +++++++++++++++++++
 3 files changed, 141 insertions(+), 4 deletions(-)
 create mode 100644 src/components/ui/IconButton.tsx
 create mode 100644 src/stories/IconButton.stories.tsx

diff --git a/src/app/(dashboard)/[guildUrlName]/components/LeaveGuild.tsx b/src/app/(dashboard)/[guildUrlName]/components/LeaveGuild.tsx
index 8e1b98018c..8bf78a108b 100644
--- a/src/app/(dashboard)/[guildUrlName]/components/LeaveGuild.tsx
+++ b/src/app/(dashboard)/[guildUrlName]/components/LeaveGuild.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { Button } from "@/components/ui/Button";
+import { IconButton } from "@/components/ui/IconButton";
 import {
   Tooltip,
   TooltipContent,
@@ -34,12 +34,12 @@ export const LeaveGuild = () => {
   return (
     <Tooltip>
       <TooltipTrigger asChild>
-        {/* TODO: IconButton component */}
-        <Button
+        <IconButton
+          aria-label="Leave guild"
           className="size-11 rounded-full"
           onClick={() => mutate()}
           isLoading={isPending}
-          leftIcon={<SignOut weight="bold" />}
+          icon={<SignOut weight="bold" />}
         />
       </TooltipTrigger>
 
diff --git a/src/components/ui/IconButton.tsx b/src/components/ui/IconButton.tsx
new file mode 100644
index 0000000000..ea7731167d
--- /dev/null
+++ b/src/components/ui/IconButton.tsx
@@ -0,0 +1,48 @@
+import { cn } from "@/lib/cssUtils";
+import { type VariantProps, cva } from "class-variance-authority";
+import { forwardRef } from "react";
+import { Button, type ButtonProps } from "./Button";
+
+const iconButtonVariants = cva("p-0 shrink-0", {
+  variants: {
+    size: {
+      xs: "size-6 text-xs",
+      sm: "size-8 text-sm",
+      md: "size-10",
+      lg: "size-12 text-lg",
+    },
+  },
+  defaultVariants: {
+    size: "md",
+  },
+});
+
+export interface IconButtonProps
+  extends Omit<
+      ButtonProps,
+      | "size"
+      | "loadingText"
+      | "leftIcon"
+      | "rightIcon"
+      | "asChild"
+      | "children"
+      | "aria-label"
+    >,
+    VariantProps<typeof iconButtonVariants> {
+  "aria-label": string;
+  icon: ButtonProps["leftIcon"];
+}
+
+const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(
+  ({ size, icon, className, ...props }, ref) => (
+    <Button
+      ref={ref}
+      {...props}
+      className={cn(iconButtonVariants({ size, className }))}
+    >
+      {icon}
+    </Button>
+  ),
+);
+
+export { IconButton };
diff --git a/src/stories/IconButton.stories.tsx b/src/stories/IconButton.stories.tsx
new file mode 100644
index 0000000000..646d638c98
--- /dev/null
+++ b/src/stories/IconButton.stories.tsx
@@ -0,0 +1,89 @@
+import { IconButton, type IconButtonProps } from "@/components/ui/IconButton";
+import { CircleDashed } from "@phosphor-icons/react/dist/ssr";
+import type { Meta, StoryObj } from "@storybook/react";
+
+type IconButtonExampleProps = Omit<IconButtonProps, "aria-label" | "icon">;
+
+const IconButtonExample = (props: IconButtonExampleProps) => (
+  <IconButton
+    {...props}
+    aria-label="IconButton example"
+    icon={<CircleDashed weight="bold" />}
+  />
+);
+
+const meta: Meta<typeof IconButtonExample> = {
+  title: "Design system/IconButton",
+  component: IconButtonExample,
+};
+
+export default meta;
+
+type Story = StoryObj<typeof IconButton>;
+
+export const Solid: Story = {
+  args: {
+    size: "md",
+    variant: "solid",
+    colorScheme: "primary",
+    isLoading: false,
+    disabled: false,
+  },
+  argTypes: {
+    size: {
+      type: "string",
+      control: "select",
+      options: ["sm", "md", "lg"] satisfies IconButtonProps["size"][],
+    },
+    colorScheme: {
+      type: "string",
+      control: "select",
+      options: [
+        "primary",
+        "secondary",
+        "info",
+        "destructive",
+        "success",
+      ] satisfies IconButtonProps["colorScheme"][],
+    },
+    variant: {
+      control: {
+        disable: true,
+      },
+    },
+    disabled: {
+      type: "boolean",
+      control: "boolean",
+    },
+  },
+};
+
+export const Outline: Story = {
+  args: {
+    ...Solid.args,
+    variant: "outline",
+  },
+  argTypes: {
+    ...Solid.argTypes,
+  },
+};
+
+export const Ghost: Story = {
+  args: {
+    ...Solid.args,
+    variant: "ghost",
+  },
+  argTypes: {
+    ...Solid.argTypes,
+  },
+};
+
+export const Subtle: Story = {
+  args: {
+    ...Solid.args,
+    variant: "subtle",
+  },
+  argTypes: {
+    ...Solid.argTypes,
+  },
+};

From ba05480377225be96fe4b82043cd75ed254d62ca Mon Sep 17 00:00:00 2001
From: BrickheadJohnny <johnny.zgen@gmail.com>
Date: Thu, 2 Jan 2025 09:31:52 +0100
Subject: [PATCH 86/93] fix: always import types from "react"

---
 src/app/layout.tsx              | 4 ++--
 src/components/AuthBoundary.tsx | 5 +++--
 src/components/ui/Skeleton.tsx  | 6 ++----
 src/components/ui/Toaster.tsx   | 3 ++-
 4 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 9853c91e72..835f1467f8 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -8,7 +8,7 @@ import { SignInDialog } from "@/components/SignInDialog";
 import { Toaster } from "@/components/ui/Toaster";
 import { dystopian } from "@/lib/fonts";
 import { cn } from "lib/cssUtils";
-import { Suspense } from "react";
+import { type ReactNode, Suspense } from "react";
 
 export const metadata: Metadata = {
   title: "Guildhall",
@@ -23,7 +23,7 @@ export const metadata: Metadata = {
 const RootLayout = ({
   children,
 }: Readonly<{
-  children: React.ReactNode;
+  children: ReactNode;
 }>) => {
   return (
     <html lang="en" suppressHydrationWarning>
diff --git a/src/components/AuthBoundary.tsx b/src/components/AuthBoundary.tsx
index a9103dfca1..50548a03cc 100644
--- a/src/components/AuthBoundary.tsx
+++ b/src/components/AuthBoundary.tsx
@@ -2,13 +2,14 @@
 
 import { userOptions } from "@/lib/options";
 import { useQuery } from "@tanstack/react-query";
+import type { ReactNode } from "react";
 
 export const AuthBoundary = ({
   fallback,
   children,
 }: Readonly<{
-  fallback: React.ReactNode;
-  children: React.ReactNode;
+  fallback: ReactNode;
+  children: ReactNode;
 }>) => {
   const { data: user } = useQuery(userOptions());
 
diff --git a/src/components/ui/Skeleton.tsx b/src/components/ui/Skeleton.tsx
index 0bd85c6818..40841ac869 100644
--- a/src/components/ui/Skeleton.tsx
+++ b/src/components/ui/Skeleton.tsx
@@ -1,9 +1,7 @@
 import { cn } from "@/lib/cssUtils";
+import type { HTMLAttributes } from "react";
 
-function Skeleton({
-  className,
-  ...props
-}: React.HTMLAttributes<HTMLDivElement>) {
+function Skeleton({ className, ...props }: HTMLAttributes<HTMLDivElement>) {
   return (
     <div
       className={cn("animate-pulse rounded-md bg-skeleton", className)}
diff --git a/src/components/ui/Toaster.tsx b/src/components/ui/Toaster.tsx
index 4667967da7..4466ab5cb7 100644
--- a/src/components/ui/Toaster.tsx
+++ b/src/components/ui/Toaster.tsx
@@ -1,9 +1,10 @@
 "use client";
 
 import { useTheme } from "next-themes";
+import type { ComponentProps } from "react";
 import { Toaster as Sonner } from "sonner";
 
-type ToasterProps = React.ComponentProps<typeof Sonner>;
+type ToasterProps = ComponentProps<typeof Sonner>;
 
 const Toaster = ({ ...props }: ToasterProps) => {
   const { theme = "system" } = useTheme();

From f21d9d3fb382c3bfa73d46a394accb359b411399 Mon Sep 17 00:00:00 2001
From: BrickheadJohnny <johnny.zgen@gmail.com>
Date: Thu, 2 Jan 2025 09:47:56 +0100
Subject: [PATCH 87/93] fix(leaderboard): use the user ID for server-side
 requests too

---
 .../[guildUrlName]/leaderboard/[rewardId]/page.tsx          | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/app/(dashboard)/[guildUrlName]/leaderboard/[rewardId]/page.tsx b/src/app/(dashboard)/[guildUrlName]/leaderboard/[rewardId]/page.tsx
index 63335ba50b..2ddbd9de28 100644
--- a/src/app/(dashboard)/[guildUrlName]/leaderboard/[rewardId]/page.tsx
+++ b/src/app/(dashboard)/[guildUrlName]/leaderboard/[rewardId]/page.tsx
@@ -1,4 +1,5 @@
 import { getQueryClient } from "@/lib/getQueryClient";
+import { userOptions } from "@/lib/options";
 import type { DynamicRoute } from "@/lib/types";
 import { HydrationBoundary, dehydrate } from "@tanstack/react-query";
 import { Suspense } from "react";
@@ -11,7 +12,10 @@ const LeaderboardPage = async ({
   const { rewardId } = await params;
 
   const queryClient = getQueryClient();
-  await queryClient.prefetchInfiniteQuery(leaderboardOptions({ rewardId }));
+  const user = await queryClient.fetchQuery(userOptions());
+  await queryClient.prefetchInfiniteQuery(
+    leaderboardOptions({ rewardId, userId: user?.id }),
+  );
   await queryClient.prefetchQuery(pointsRewardOptions({ rewardId }));
 
   return (

From 05926acbdd13469e3fcc6b5f1f28f6db2ea032e5 Mon Sep 17 00:00:00 2001
From: BrickheadJohnny <johnny.zgen@gmail.com>
Date: Thu, 2 Jan 2025 10:00:07 +0100
Subject: [PATCH 88/93] fix(AuthBoundary): wrap return values in fragments

---
 src/components/AuthBoundary.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/AuthBoundary.tsx b/src/components/AuthBoundary.tsx
index 50548a03cc..d926c4bc48 100644
--- a/src/components/AuthBoundary.tsx
+++ b/src/components/AuthBoundary.tsx
@@ -13,7 +13,7 @@ export const AuthBoundary = ({
 }>) => {
   const { data: user } = useQuery(userOptions());
 
-  if (user?.id) return children;
+  if (user?.id) return <>{children}</>;
 
-  return fallback;
+  return <>{fallback}</>;
 };

From 2a1dbd6e858a6f878154d8bc30dbc3c97c27836a Mon Sep 17 00:00:00 2001
From: BrickheadJohnny <johnny.zgen@gmail.com>
Date: Thu, 2 Jan 2025 10:05:59 +0100
Subject: [PATCH 89/93] feat: useUser hook

---
 .../(dashboard)/[guildUrlName]/[pageUrlName]/page.tsx    | 7 ++++---
 .../[guildUrlName]/components/ActionButton.tsx           | 5 ++---
 .../(dashboard)/[guildUrlName]/components/JoinGuild.tsx  | 7 ++++---
 .../leaderboard/[rewardId]/components/Leaderboard.tsx    | 6 ++----
 src/app/(dashboard)/explorer/fetchers.ts                 | 5 ++---
 src/components/AuthBoundary.tsx                          | 9 ++++-----
 src/components/SignInButton.tsx                          | 5 ++---
 src/components/rewards/DiscordRewardCard.tsx             | 5 ++---
 src/hooks/useUser.ts                                     | 4 ++++
 9 files changed, 26 insertions(+), 27 deletions(-)
 create mode 100644 src/hooks/useUser.ts

diff --git a/src/app/(dashboard)/[guildUrlName]/[pageUrlName]/page.tsx b/src/app/(dashboard)/[guildUrlName]/[pageUrlName]/page.tsx
index a34f5e908d..47d52cbdc2 100644
--- a/src/app/(dashboard)/[guildUrlName]/[pageUrlName]/page.tsx
+++ b/src/app/(dashboard)/[guildUrlName]/[pageUrlName]/page.tsx
@@ -6,13 +6,14 @@ import { Badge } from "@/components/ui/Badge";
 import { Button, buttonVariants } from "@/components/ui/Button";
 import { Card } from "@/components/ui/Card";
 import { Skeleton } from "@/components/ui/Skeleton";
+import { useUser } from "@/hooks/useUser";
 import { cn } from "@/lib/cssUtils";
 import { fetchGuildApiData } from "@/lib/fetchGuildApi";
-import { roleBatchOptions, userOptions } from "@/lib/options";
+import { roleBatchOptions } from "@/lib/options";
 import type { GuildReward, GuildRewardType } from "@/lib/schemas/guildReward";
 import type { Role } from "@/lib/schemas/role";
 import { Check, ImageSquare, LockSimple } from "@phosphor-icons/react/dist/ssr";
-import { useQuery, useSuspenseQuery } from "@tanstack/react-query";
+import { useSuspenseQuery } from "@tanstack/react-query";
 import { useSetAtom } from "jotai";
 import { useParams } from "next/navigation";
 import { Suspense } from "react";
@@ -148,7 +149,7 @@ const AccessIndicator = ({
 }: { roleId: Role["id"]; className?: string }) => {
   const { data: guild } = useGuild();
 
-  const { data: user } = useQuery(userOptions());
+  const { data: user } = useUser();
   const isGuildMember = user?.guilds?.find((g) => g.guildId === guild.id);
   const isRoleMember = !!user?.guilds
     ?.flatMap((g) => g.roles)
diff --git a/src/app/(dashboard)/[guildUrlName]/components/ActionButton.tsx b/src/app/(dashboard)/[guildUrlName]/components/ActionButton.tsx
index 306f14c6ba..f90848a398 100644
--- a/src/app/(dashboard)/[guildUrlName]/components/ActionButton.tsx
+++ b/src/app/(dashboard)/[guildUrlName]/components/ActionButton.tsx
@@ -1,14 +1,13 @@
 "use client";
 
 import { Button } from "@/components/ui/Button";
-import { userOptions } from "@/lib/options";
-import { useQuery } from "@tanstack/react-query";
+import { useUser } from "@/hooks/useUser";
 import { useGuild } from "../hooks/useGuild";
 import { JoinGuild } from "./JoinGuild";
 import { LeaveGuild } from "./LeaveGuild";
 
 export const ActionButton = () => {
-  const user = useQuery(userOptions());
+  const user = useUser();
   const guild = useGuild();
 
   if (!guild.data) {
diff --git a/src/app/(dashboard)/[guildUrlName]/components/JoinGuild.tsx b/src/app/(dashboard)/[guildUrlName]/components/JoinGuild.tsx
index 2bac032e84..0b2e9381f5 100644
--- a/src/app/(dashboard)/[guildUrlName]/components/JoinGuild.tsx
+++ b/src/app/(dashboard)/[guildUrlName]/components/JoinGuild.tsx
@@ -12,6 +12,7 @@ import {
   ResponsiveDialogTrigger,
 } from "@/components/ui/ResponsiveDialog";
 import { IDENTITY_STYLES } from "@/config/constants";
+import { useUser } from "@/hooks/useUser";
 import { cn } from "@/lib/cssUtils";
 import { env } from "@/lib/env";
 import { guildOptions, roleBatchOptions, userOptions } from "@/lib/options";
@@ -44,7 +45,7 @@ export const JoinGuild = () => {
     onOpenChange(true);
   }, [shouldOpen, onOpenChange]);
 
-  const { data: user } = useQuery(userOptions());
+  const { data: user } = useUser();
 
   return (
     <ResponsiveDialog open={open} onOpenChange={onOpenChange}>
@@ -116,7 +117,7 @@ const getReturnToURLWithSearchParams = () => {
 
 const ConnectIdentityJoinStep = ({ identity }: { identity: IdentityType }) => {
   const router = useRouter();
-  const { data: user } = useQuery(userOptions());
+  const { data: user } = useUser();
 
   const connected = !!user?.identities?.find((i) => i.platform === identity);
 
@@ -153,7 +154,7 @@ const JoinGuildButton = () => {
   }>();
   const guild = useQuery(guildOptions({ guildIdLike: guildUrlName }));
 
-  const { data: user } = useQuery(userOptions());
+  const { data: user } = useUser();
 
   const queryClient = useQueryClient();
 
diff --git a/src/app/(dashboard)/[guildUrlName]/leaderboard/[rewardId]/components/Leaderboard.tsx b/src/app/(dashboard)/[guildUrlName]/leaderboard/[rewardId]/components/Leaderboard.tsx
index e25fa1c19f..6d1eec92a0 100644
--- a/src/app/(dashboard)/[guildUrlName]/leaderboard/[rewardId]/components/Leaderboard.tsx
+++ b/src/app/(dashboard)/[guildUrlName]/leaderboard/[rewardId]/components/Leaderboard.tsx
@@ -1,8 +1,6 @@
 "use client";
-
-import { userOptions } from "@/lib/options";
+import { useUser } from "@/hooks/useUser";
 import {
-  useQuery,
   useSuspenseInfiniteQuery,
   useSuspenseQuery,
 } from "@tanstack/react-query";
@@ -10,7 +8,7 @@ import { leaderboardOptions, pointsRewardOptions } from "../options";
 import { LeaderboardUserCard } from "./LeaderboardUserCard";
 
 export const Leaderboard = ({ rewardId }: { rewardId: string }) => {
-  const { data: user } = useQuery(userOptions());
+  const { data: user } = useUser();
   const { data: rawData } = useSuspenseInfiniteQuery(
     leaderboardOptions({ rewardId, userId: user?.id }),
   );
diff --git a/src/app/(dashboard)/explorer/fetchers.ts b/src/app/(dashboard)/explorer/fetchers.ts
index af0956bd31..0a842927cf 100644
--- a/src/app/(dashboard)/explorer/fetchers.ts
+++ b/src/app/(dashboard)/explorer/fetchers.ts
@@ -1,13 +1,12 @@
+import { useUser } from "@/hooks/useUser";
 import { fetchGuildApiData } from "@/lib/fetchGuildApi";
-import { userOptions } from "@/lib/options";
 import type { Leaderboard } from "@/lib/schemas/leaderboard";
 import type { PaginatedResponse } from "@/lib/types";
 import type { Schemas } from "@guildxyz/types";
-import { useQuery } from "@tanstack/react-query";
 import { PAGE_SIZE } from "./constants";
 
 export const fetchAssociatedGuilds = async () => {
-  const { data: user } = useQuery(userOptions());
+  const { data: user } = useUser();
   return fetchGuildApiData<PaginatedResponse<Schemas["Guild"]>>(
     `guild/search?page=1&pageSize=${Number.MAX_SAFE_INTEGER}&sortBy=name&reverse=false&customQuery=@owner:{${user?.id}}`,
   );
diff --git a/src/components/AuthBoundary.tsx b/src/components/AuthBoundary.tsx
index d926c4bc48..584643026e 100644
--- a/src/components/AuthBoundary.tsx
+++ b/src/components/AuthBoundary.tsx
@@ -1,7 +1,6 @@
 "use client";
 
-import { userOptions } from "@/lib/options";
-import { useQuery } from "@tanstack/react-query";
+import { useUser } from "@/hooks/useUser";
 import type { ReactNode } from "react";
 
 export const AuthBoundary = ({
@@ -11,9 +10,9 @@ export const AuthBoundary = ({
   fallback: ReactNode;
   children: ReactNode;
 }>) => {
-  const { data: user } = useQuery(userOptions());
+  const { data: user } = useUser();
 
-  if (user?.id) return <>{children}</>;
+  if (user?.id) return children;
 
-  return <>{fallback}</>;
+  return fallback;
 };
diff --git a/src/components/SignInButton.tsx b/src/components/SignInButton.tsx
index e4d82f5dc2..a84c172458 100644
--- a/src/components/SignInButton.tsx
+++ b/src/components/SignInButton.tsx
@@ -1,16 +1,15 @@
 "use client";
 
 import { signInDialogOpenAtom } from "@/config/atoms";
-import { userOptions } from "@/lib/options";
+import { useUser } from "@/hooks/useUser";
 import { Check, SignIn } from "@phosphor-icons/react/dist/ssr";
-import { useQuery } from "@tanstack/react-query";
 import { useSetAtom } from "jotai";
 import type { ComponentProps } from "react";
 import { Button } from "./ui/Button";
 
 export const SignInButton = (props: ComponentProps<typeof Button>) => {
   const setSignInDialogOpen = useSetAtom(signInDialogOpenAtom);
-  const { data: user } = useQuery(userOptions());
+  const { data: user } = useUser();
 
   return (
     <Button
diff --git a/src/components/rewards/DiscordRewardCard.tsx b/src/components/rewards/DiscordRewardCard.tsx
index 35f50c95e6..185b916a93 100644
--- a/src/components/rewards/DiscordRewardCard.tsx
+++ b/src/components/rewards/DiscordRewardCard.tsx
@@ -1,13 +1,12 @@
 import { useGuild } from "@/app/(dashboard)/[guildUrlName]/hooks/useGuild";
 import { IDENTITY_STYLES } from "@/config/constants";
+import { useUser } from "@/hooks/useUser";
 import { cn } from "@/lib/cssUtils";
 import { env } from "@/lib/env";
-import { userOptions } from "@/lib/options";
 import type { GuildReward } from "@/lib/schemas/guildReward";
 import { IDENTITY_NAME } from "@/lib/schemas/identity";
 import { DiscordRoleRewardDataSchema } from "@/lib/schemas/roleReward";
 import { ArrowSquareOut } from "@phosphor-icons/react/dist/ssr";
-import { useQuery } from "@tanstack/react-query";
 import { useRouter } from "next/navigation";
 import type { FunctionComponent } from "react";
 import {
@@ -33,7 +32,7 @@ export const DiscordRewardCard: FunctionComponent<RewardCardProps> = ({
 
   const Icon = IDENTITY_STYLES.DISCORD.icon;
 
-  const { data: user } = useQuery(userOptions());
+  const { data: user } = useUser();
   const connected = !!user?.identities?.find((i) => i.platform === "DISCORD");
 
   const {
diff --git a/src/hooks/useUser.ts b/src/hooks/useUser.ts
new file mode 100644
index 0000000000..8d1c1a365c
--- /dev/null
+++ b/src/hooks/useUser.ts
@@ -0,0 +1,4 @@
+import { userOptions } from "@/lib/options";
+import { useQuery } from "@tanstack/react-query";
+
+export const useUser = () => useQuery(userOptions());

From 436545fffe961777c1940c8727d8b50d854df271 Mon Sep 17 00:00:00 2001
From: BrickheadJohnny <johnny.zgen@gmail.com>
Date: Thu, 2 Jan 2025 10:08:43 +0100
Subject: [PATCH 90/93] feat: useSuspensePages hook

---
 .../(dashboard)/[guildUrlName]/components/GuildTabs.tsx  | 9 ++-------
 .../(dashboard)/[guildUrlName]/hooks/useSuspensePages.ts | 9 +++++++++
 2 files changed, 11 insertions(+), 7 deletions(-)
 create mode 100644 src/app/(dashboard)/[guildUrlName]/hooks/useSuspensePages.ts

diff --git a/src/app/(dashboard)/[guildUrlName]/components/GuildTabs.tsx b/src/app/(dashboard)/[guildUrlName]/components/GuildTabs.tsx
index bf2cb70921..2c0fe00936 100644
--- a/src/app/(dashboard)/[guildUrlName]/components/GuildTabs.tsx
+++ b/src/app/(dashboard)/[guildUrlName]/components/GuildTabs.tsx
@@ -4,18 +4,13 @@ import { Card } from "@/components/ui/Card";
 import { ScrollArea, ScrollBar } from "@/components/ui/ScrollArea";
 import { Skeleton } from "@/components/ui/Skeleton";
 import { cn } from "@/lib/cssUtils";
-import { pageBatchOptions } from "@/lib/options";
-import { useSuspenseQuery } from "@tanstack/react-query";
 import { useGuild } from "../hooks/useGuild";
-import { useGuildUrlName } from "../hooks/useGuildUrlName";
+import { useSuspensePages } from "../hooks/useSuspensePages";
 import { PageNavLink } from "./RoleGroupNavLink";
 
 export const GuildTabs = () => {
-  const guildUrlName = useGuildUrlName();
   const { data: guild } = useGuild();
-  const { data: pages } = useSuspenseQuery(
-    pageBatchOptions({ guildIdLike: guildUrlName }),
-  );
+  const { data: pages } = useSuspensePages();
 
   return (
     <ScrollArea
diff --git a/src/app/(dashboard)/[guildUrlName]/hooks/useSuspensePages.ts b/src/app/(dashboard)/[guildUrlName]/hooks/useSuspensePages.ts
new file mode 100644
index 0000000000..d67aa182c5
--- /dev/null
+++ b/src/app/(dashboard)/[guildUrlName]/hooks/useSuspensePages.ts
@@ -0,0 +1,9 @@
+import { pageBatchOptions } from "@/lib/options";
+import { useSuspenseQuery } from "@tanstack/react-query";
+import { useGuildUrlName } from "./useGuildUrlName";
+
+export const useSuspensePages = () => {
+  const guildUrlName = useGuildUrlName();
+
+  return useSuspenseQuery(pageBatchOptions({ guildIdLike: guildUrlName }));
+};

From 6fee663433071429300299abe1dd72d98eff6e32 Mon Sep 17 00:00:00 2001
From: BrickheadJohnny <johnny.zgen@gmail.com>
Date: Thu, 2 Jan 2025 10:11:58 +0100
Subject: [PATCH 91/93] feat: usePageUrlName hook

---
 src/app/(dashboard)/[guildUrlName]/[pageUrlName]/page.tsx | 7 ++-----
 .../(dashboard)/[guildUrlName]/components/JoinGuild.tsx   | 8 +++-----
 .../(dashboard)/[guildUrlName]/hooks/usePageUrlName.ts    | 7 +++++++
 3 files changed, 12 insertions(+), 10 deletions(-)
 create mode 100644 src/app/(dashboard)/[guildUrlName]/hooks/usePageUrlName.ts

diff --git a/src/app/(dashboard)/[guildUrlName]/[pageUrlName]/page.tsx b/src/app/(dashboard)/[guildUrlName]/[pageUrlName]/page.tsx
index 47d52cbdc2..b21bee6fbd 100644
--- a/src/app/(dashboard)/[guildUrlName]/[pageUrlName]/page.tsx
+++ b/src/app/(dashboard)/[guildUrlName]/[pageUrlName]/page.tsx
@@ -15,16 +15,13 @@ import type { Role } from "@/lib/schemas/role";
 import { Check, ImageSquare, LockSimple } from "@phosphor-icons/react/dist/ssr";
 import { useSuspenseQuery } from "@tanstack/react-query";
 import { useSetAtom } from "jotai";
-import { useParams } from "next/navigation";
 import { Suspense } from "react";
 import { joinModalAtom } from "../atoms";
 import { useGuild } from "../hooks/useGuild";
+import { usePageUrlName } from "../hooks/usePageUrlName";
 
 const GuildPage = () => {
-  const { pageUrlName, guildUrlName } = useParams<{
-    pageUrlName: string;
-    guildUrlName: string;
-  }>();
+  const { pageUrlName, guildUrlName } = usePageUrlName();
   const { data: roles } = useSuspenseQuery(
     roleBatchOptions({
       guildIdLike: guildUrlName,
diff --git a/src/app/(dashboard)/[guildUrlName]/components/JoinGuild.tsx b/src/app/(dashboard)/[guildUrlName]/components/JoinGuild.tsx
index 0b2e9381f5..8c1ed5e182 100644
--- a/src/app/(dashboard)/[guildUrlName]/components/JoinGuild.tsx
+++ b/src/app/(dashboard)/[guildUrlName]/components/JoinGuild.tsx
@@ -27,10 +27,11 @@ import {
 } from "@tanstack/react-query";
 import { EventSourcePlus } from "event-source-plus";
 import { useAtom, useSetAtom } from "jotai";
-import { useParams, useRouter, useSearchParams } from "next/navigation";
+import { useRouter, useSearchParams } from "next/navigation";
 import { type ReactNode, useEffect } from "react";
 import { toast } from "sonner";
 import { joinModalAtom } from "../atoms";
+import { usePageUrlName } from "../hooks/usePageUrlName";
 
 const JOIN_MODAL_SEARCH_PARAM = "join";
 
@@ -148,10 +149,7 @@ const ConnectIdentityJoinStep = ({ identity }: { identity: IdentityType }) => {
 };
 
 const JoinGuildButton = () => {
-  const { pageUrlName, guildUrlName } = useParams<{
-    pageUrlName: string;
-    guildUrlName: string;
-  }>();
+  const { pageUrlName, guildUrlName } = usePageUrlName();
   const guild = useQuery(guildOptions({ guildIdLike: guildUrlName }));
 
   const { data: user } = useUser();
diff --git a/src/app/(dashboard)/[guildUrlName]/hooks/usePageUrlName.ts b/src/app/(dashboard)/[guildUrlName]/hooks/usePageUrlName.ts
new file mode 100644
index 0000000000..53effb43b8
--- /dev/null
+++ b/src/app/(dashboard)/[guildUrlName]/hooks/usePageUrlName.ts
@@ -0,0 +1,7 @@
+import { useParams } from "next/navigation";
+
+export const usePageUrlName = () =>
+  useParams<{
+    pageUrlName: string;
+    guildUrlName: string;
+  }>();

From 9d8c4225639f9e1f2dd84ca1106886c4050ce76e Mon Sep 17 00:00:00 2001
From: BrickheadJohnny <johnny.zgen@gmail.com>
Date: Thu, 2 Jan 2025 10:16:09 +0100
Subject: [PATCH 92/93] feat: useSuspenseRoles hook

---
 .../[guildUrlName]/[pageUrlName]/page.tsx     | 11 ++--------
 .../[guildUrlName]/components/JoinGuild.tsx   | 22 +++++--------------
 .../[guildUrlName]/hooks/useSuspenseRoles.ts  | 14 ++++++++++++
 3 files changed, 22 insertions(+), 25 deletions(-)
 create mode 100644 src/app/(dashboard)/[guildUrlName]/hooks/useSuspenseRoles.ts

diff --git a/src/app/(dashboard)/[guildUrlName]/[pageUrlName]/page.tsx b/src/app/(dashboard)/[guildUrlName]/[pageUrlName]/page.tsx
index b21bee6fbd..d222fa8996 100644
--- a/src/app/(dashboard)/[guildUrlName]/[pageUrlName]/page.tsx
+++ b/src/app/(dashboard)/[guildUrlName]/[pageUrlName]/page.tsx
@@ -9,7 +9,6 @@ import { Skeleton } from "@/components/ui/Skeleton";
 import { useUser } from "@/hooks/useUser";
 import { cn } from "@/lib/cssUtils";
 import { fetchGuildApiData } from "@/lib/fetchGuildApi";
-import { roleBatchOptions } from "@/lib/options";
 import type { GuildReward, GuildRewardType } from "@/lib/schemas/guildReward";
 import type { Role } from "@/lib/schemas/role";
 import { Check, ImageSquare, LockSimple } from "@phosphor-icons/react/dist/ssr";
@@ -18,16 +17,10 @@ import { useSetAtom } from "jotai";
 import { Suspense } from "react";
 import { joinModalAtom } from "../atoms";
 import { useGuild } from "../hooks/useGuild";
-import { usePageUrlName } from "../hooks/usePageUrlName";
+import { useSuspenseRoles } from "../hooks/useSuspenseRoles";
 
 const GuildPage = () => {
-  const { pageUrlName, guildUrlName } = usePageUrlName();
-  const { data: roles } = useSuspenseQuery(
-    roleBatchOptions({
-      guildIdLike: guildUrlName,
-      pageIdLike: pageUrlName,
-    }),
-  );
+  const { data: roles } = useSuspenseRoles();
 
   return (
     <div className="my-4 space-y-4">
diff --git a/src/app/(dashboard)/[guildUrlName]/components/JoinGuild.tsx b/src/app/(dashboard)/[guildUrlName]/components/JoinGuild.tsx
index 8c1ed5e182..1256275ede 100644
--- a/src/app/(dashboard)/[guildUrlName]/components/JoinGuild.tsx
+++ b/src/app/(dashboard)/[guildUrlName]/components/JoinGuild.tsx
@@ -15,23 +15,19 @@ import { IDENTITY_STYLES } from "@/config/constants";
 import { useUser } from "@/hooks/useUser";
 import { cn } from "@/lib/cssUtils";
 import { env } from "@/lib/env";
-import { guildOptions, roleBatchOptions, userOptions } from "@/lib/options";
+import { userOptions } from "@/lib/options";
 import { IDENTITY_NAME, type IdentityType } from "@/lib/schemas/identity";
 import type { Schemas } from "@guildxyz/types";
 import { Check, CheckCircle, XCircle } from "@phosphor-icons/react/dist/ssr";
-import {
-  useMutation,
-  useQuery,
-  useQueryClient,
-  useSuspenseQuery,
-} from "@tanstack/react-query";
+import { useMutation, useQueryClient } from "@tanstack/react-query";
 import { EventSourcePlus } from "event-source-plus";
 import { useAtom, useSetAtom } from "jotai";
 import { useRouter, useSearchParams } from "next/navigation";
 import { type ReactNode, useEffect } from "react";
 import { toast } from "sonner";
 import { joinModalAtom } from "../atoms";
-import { usePageUrlName } from "../hooks/usePageUrlName";
+import { useGuild } from "../hooks/useGuild";
+import { useSuspenseRoles } from "../hooks/useSuspenseRoles";
 
 const JOIN_MODAL_SEARCH_PARAM = "join";
 
@@ -149,8 +145,7 @@ const ConnectIdentityJoinStep = ({ identity }: { identity: IdentityType }) => {
 };
 
 const JoinGuildButton = () => {
-  const { pageUrlName, guildUrlName } = usePageUrlName();
-  const guild = useQuery(guildOptions({ guildIdLike: guildUrlName }));
+  const guild = useGuild();
 
   const { data: user } = useUser();
 
@@ -160,12 +155,7 @@ const JoinGuildButton = () => {
     throw new Error("Failed to fetch guild");
   }
 
-  const { data: roles } = useSuspenseQuery(
-    roleBatchOptions({
-      guildIdLike: guildUrlName,
-      pageIdLike: pageUrlName,
-    }),
-  );
+  const { data: roles } = useSuspenseRoles();
 
   const onJoinModalOpenChange = useSetAtom(joinModalAtom);
 
diff --git a/src/app/(dashboard)/[guildUrlName]/hooks/useSuspenseRoles.ts b/src/app/(dashboard)/[guildUrlName]/hooks/useSuspenseRoles.ts
new file mode 100644
index 0000000000..5558535321
--- /dev/null
+++ b/src/app/(dashboard)/[guildUrlName]/hooks/useSuspenseRoles.ts
@@ -0,0 +1,14 @@
+import { roleBatchOptions } from "@/lib/options";
+import { useSuspenseQuery } from "@tanstack/react-query";
+import { usePageUrlName } from "./usePageUrlName";
+
+export const useSuspenseRoles = () => {
+  const { guildUrlName, pageUrlName } = usePageUrlName();
+
+  return useSuspenseQuery(
+    roleBatchOptions({
+      guildIdLike: guildUrlName,
+      pageIdLike: pageUrlName,
+    }),
+  );
+};

From 5b909c31297e8c6f950d2e27e3c54fb1df588091 Mon Sep 17 00:00:00 2001
From: BrickheadJohnny <johnny.zgen@gmail.com>
Date: Thu, 2 Jan 2025 10:21:23 +0100
Subject: [PATCH 93/93] fix: refactor leaderboard-related hooks

---
 .../[rewardId]/components/Leaderboard.tsx      | 18 +++++++++---------
 .../components/LeaderboardUserCard.tsx         |  9 ++-------
 .../[rewardId]/hooks/useSuspensePointReward.ts |  8 ++++++++
 .../leaderboard/[rewardId]/page.tsx            |  2 +-
 4 files changed, 20 insertions(+), 17 deletions(-)
 create mode 100644 src/app/(dashboard)/[guildUrlName]/leaderboard/[rewardId]/hooks/useSuspensePointReward.ts

diff --git a/src/app/(dashboard)/[guildUrlName]/leaderboard/[rewardId]/components/Leaderboard.tsx b/src/app/(dashboard)/[guildUrlName]/leaderboard/[rewardId]/components/Leaderboard.tsx
index 6d1eec92a0..64271e3957 100644
--- a/src/app/(dashboard)/[guildUrlName]/leaderboard/[rewardId]/components/Leaderboard.tsx
+++ b/src/app/(dashboard)/[guildUrlName]/leaderboard/[rewardId]/components/Leaderboard.tsx
@@ -1,21 +1,21 @@
 "use client";
+
 import { useUser } from "@/hooks/useUser";
-import {
-  useSuspenseInfiniteQuery,
-  useSuspenseQuery,
-} from "@tanstack/react-query";
-import { leaderboardOptions, pointsRewardOptions } from "../options";
+import { useSuspenseInfiniteQuery } from "@tanstack/react-query";
+import { useParams } from "next/navigation";
+import { useSuspensePointReward } from "../hooks/useSuspensePointReward";
+import { leaderboardOptions } from "../options";
 import { LeaderboardUserCard } from "./LeaderboardUserCard";
 
-export const Leaderboard = ({ rewardId }: { rewardId: string }) => {
+export const Leaderboard = () => {
   const { data: user } = useUser();
+
+  const { rewardId } = useParams<{ rewardId: string }>();
   const { data: rawData } = useSuspenseInfiniteQuery(
     leaderboardOptions({ rewardId, userId: user?.id }),
   );
 
-  const { data: pointReward } = useSuspenseQuery(
-    pointsRewardOptions({ rewardId }),
-  );
+  const { data: pointReward } = useSuspensePointReward();
 
   const data = rawData?.pages[0];
 
diff --git a/src/app/(dashboard)/[guildUrlName]/leaderboard/[rewardId]/components/LeaderboardUserCard.tsx b/src/app/(dashboard)/[guildUrlName]/leaderboard/[rewardId]/components/LeaderboardUserCard.tsx
index 4f2944aace..9082a2dd43 100644
--- a/src/app/(dashboard)/[guildUrlName]/leaderboard/[rewardId]/components/LeaderboardUserCard.tsx
+++ b/src/app/(dashboard)/[guildUrlName]/leaderboard/[rewardId]/components/LeaderboardUserCard.tsx
@@ -1,17 +1,12 @@
 import { Card } from "@/components/ui/Card";
 import type { Leaderboard } from "@/lib/schemas/leaderboard";
 import { User } from "@phosphor-icons/react/dist/ssr";
-import { useSuspenseQuery } from "@tanstack/react-query";
-import { useParams } from "next/navigation";
-import { pointsRewardOptions } from "../options";
+import { useSuspensePointReward } from "../hooks/useSuspensePointReward";
 
 export const LeaderboardUserCard = ({
   user,
 }: { user: NonNullable<Leaderboard["user"]> }) => {
-  const { rewardId } = useParams<{ rewardId: string }>();
-  const { data: pointReward } = useSuspenseQuery(
-    pointsRewardOptions({ rewardId }),
-  );
+  const { data: pointReward } = useSuspensePointReward();
 
   return (
     <Card className="flex items-center">
diff --git a/src/app/(dashboard)/[guildUrlName]/leaderboard/[rewardId]/hooks/useSuspensePointReward.ts b/src/app/(dashboard)/[guildUrlName]/leaderboard/[rewardId]/hooks/useSuspensePointReward.ts
new file mode 100644
index 0000000000..b2fe3afb2c
--- /dev/null
+++ b/src/app/(dashboard)/[guildUrlName]/leaderboard/[rewardId]/hooks/useSuspensePointReward.ts
@@ -0,0 +1,8 @@
+import { useSuspenseQuery } from "@tanstack/react-query";
+import { useParams } from "next/navigation";
+import { pointsRewardOptions } from "../options";
+
+export const useSuspensePointReward = () => {
+  const { rewardId } = useParams<{ rewardId: string }>();
+  return useSuspenseQuery(pointsRewardOptions({ rewardId }));
+};
diff --git a/src/app/(dashboard)/[guildUrlName]/leaderboard/[rewardId]/page.tsx b/src/app/(dashboard)/[guildUrlName]/leaderboard/[rewardId]/page.tsx
index 2ddbd9de28..f519018f64 100644
--- a/src/app/(dashboard)/[guildUrlName]/leaderboard/[rewardId]/page.tsx
+++ b/src/app/(dashboard)/[guildUrlName]/leaderboard/[rewardId]/page.tsx
@@ -21,7 +21,7 @@ const LeaderboardPage = async ({
   return (
     <HydrationBoundary state={dehydrate(queryClient)}>
       <Suspense>
-        <Leaderboard rewardId={rewardId} />
+        <Leaderboard />
       </Suspense>
     </HydrationBoundary>
   );