add guild page

.gitignore

@@ -43,3 +43,5 @@ bun.lockb
 /playwright/.cache/
 /playwright/.auth/
 /playwright/results
+
+certificates

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):
 

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,19 +31,19 @@
     "@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.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",
-    "jwt-decode": "^4.0.0",
+    "foxact": "^0.2.43",
+    "jotai": "^2.10.3",
     "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",

src/app/(dashboard)/[guildUrlName]/[pageUrlName]/page.tsx

@@ -0,0 +1,198 @@
+"use client";
+
+import { RequirementDisplayComponent } from "@/components/requirements/RequirementDisplayComponent";
+import { rewardCards } from "@/components/rewards/rewardCards";
+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, userOptions } 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 { useSetAtom } from "jotai";
+import { useParams } from "next/navigation";
+import { Suspense } from "react";
+import { joinModalAtom } from "../atoms";
+import { useGuild } from "../hooks/useGuild";
+
+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) => (
+        <Suspense
+          fallback={<Skeleton className="h-40 w-full rounded-xl" />}
+          key={role.id}
+        >
+          <RoleCard role={role} />
+        </Suspense>
+      ))}
+    </div>
+  );
+};
+
+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 text-white">
+            <ImageSquare weight="duotone" className="size-6" />
+          </div>
+        )}
+        <h3 className="font-extrabold text-xl">{role.name}</h3>
+      </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>
+
+    <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>
+
+        <AccessIndicator roleId={role.id} className="hidden sm:flex" />
+      </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>
+
+      <AccessIndicator roleId={role.id} className="sm:hidden" />
+    </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;
+};
+
+// 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);
+
+  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>
+    );
+
+  if (!isRoleMember)
+    return (
+      <Button
+        size="sm"
+        leftIcon={<LockSimple weight="bold" />}
+        className={cn(ACCESS_INDICATOR_CLASS, className)}
+        onClick={() => onJoinModalOpenChange(true)}
+      >
+        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;

src/app/(dashboard)/[guildUrlName]/atoms.ts

@@ -0,0 +1,3 @@
+import { atom } from "jotai";
+
+export const joinModalAtom = atom(false);