[pull] main from guildxyz:main

next.config.js

@@ -54,6 +54,9 @@ const nextConfig = {
       {
         hostname: "guild-xyz.mypinata.cloud",
       },
+      {
+        hostname: "ipfs.guild.xyz",
+      },
       {
         hostname: "assets.poap.xyz",
       },

src/app/explorer/_components/AlphaGuilds.tsx

@@ -0,0 +1,36 @@
+import { GuildCardSkeleton, GuildCardWithLink } from "@/components/GuildCard"
+import { useAlphaGuilds } from "../hooks/useAlphaGuilds"
+
+export const AlphaGuilds = () => {
+  const { data } = useAlphaGuilds()
+
+  return (
+    <section className="mb-8 flex flex-col gap-5">
+      <h2 className="font-bold text-lg tracking-tight">Explore alpha guilds</h2>
+      <div className="grid grid-cols-1 gap-5 sm:grid-cols-2 lg:grid-cols-3">
+        {!data ? (
+          Array.from({ length: 6 }, (_, i) => <GuildCardSkeleton key={i} />)
+        ) : data.length < 1 ? (
+          <p className="sm:col-span-2 lg:col-span-3">Couldn't load alpha guilds</p>
+        ) : (
+          data.map((guild) => (
+            <GuildCardWithLink
+              key={guild.id}
+              guildData={{
+                id: 0,
+                hideFromExplorer: false,
+                imageUrl: guild.logoUrl ?? "",
+                memberCount: guild.memberCount,
+                name: guild.name,
+                urlName: guild.urlName,
+                rolesCount: 0,
+                tags: [],
+              }}
+              isAlpha
+            />
+          ))
+        )}
+      </div>
+    </section>
+  )
+}

src/app/explorer/_components/Explorer.tsx

@@ -7,6 +7,7 @@ import { Suspense } from "react"
 import { SearchParams } from "types"
 import { isSearchStuckAtom } from "../atoms"
 import { ActiveSection } from "../types"
+import { AlphaGuilds } from "./AlphaGuilds"
 import { GuildInfiniteScroll } from "./GuildInfiniteScroll"
 import { StickyBar } from "./StickyBar"
 
@@ -18,6 +19,7 @@ export const Explorer = ({ searchParams }: { searchParams: SearchParams }) => {
     <>
       <StickyBar />
       <YourGuilds />
+      <AlphaGuilds />
 
       <section id={ActiveSection.ExploreGuilds} className="flex flex-col gap-5">
         <h2 className="font-bold text-lg tracking-tight">Explore verified guilds</h2>

src/app/explorer/consts.ts

@@ -0,0 +1,2 @@
+export const ALPHA_GUILDS_SWR_KEY = "alpha-guilds"
+export const ALPHA_GUILDS_API_URL = "https://api-alpha.guild.xyz/guilds"

src/app/explorer/hooks/useAlphaGuilds.ts

@@ -0,0 +1,11 @@
+import useSWRImmutable from "swr/immutable"
+import fetcher from "utils/fetcher"
+import { ALPHA_GUILDS_API_URL, ALPHA_GUILDS_SWR_KEY } from "../consts"
+import { AlphaGuild } from "../types"
+
+export const useAlphaGuilds = () =>
+  useSWRImmutable(ALPHA_GUILDS_SWR_KEY, () =>
+    fetcher(ALPHA_GUILDS_API_URL).then((guilds: AlphaGuild[]) =>
+      guilds.filter((g) => g.isVerified)
+    )
+  )

src/app/explorer/page.tsx

@@ -14,7 +14,8 @@ import { SearchParams } from "types"
 import { Explorer } from "./_components/Explorer"
 import { ExplorerSWRProvider } from "./_components/ExplorerSWRProvider"
 import { HeaderBackground } from "./_components/HeaderBackground"
-import { ActiveSection } from "./types"
+import { ALPHA_GUILDS_API_URL, ALPHA_GUILDS_SWR_KEY } from "./consts"
+import { ActiveSection, AlphaGuild } from "./types"
 
 export const metadata = {
   icons: {
@@ -26,7 +27,7 @@ export const metadata = {
 const Page = async ({ searchParams }: { searchParams: SearchParams }) => {
   const featuredPath = `/v2/guilds?order=FEATURED&offset=0&limit=24`
   const newestPath = `/v2/guilds?order=NEWEST&offset=0&limit=24`
-  const [ssrFeaturedGuilds, ssrNewestGuilds] = await Promise.all([
+  const [ssrFeaturedGuilds, ssrNewestGuilds, ssrAlphaGuilds] = await Promise.all([
     fetch(`${env.NEXT_PUBLIC_API.replace("/v1", "")}${featuredPath}`, {
       next: {
         revalidate: 600,
@@ -41,6 +42,10 @@ const Page = async ({ searchParams }: { searchParams: SearchParams }) => {
     })
       .then((res) => res.json())
       .catch((_) => []),
+    fetch(ALPHA_GUILDS_API_URL)
+      .then((res) => res.json())
+      .then((data: AlphaGuild[]) => data.filter((g) => g.isVerified))
+      .catch((_) => []),
   ])
 
   return (
@@ -49,6 +54,7 @@ const Page = async ({ searchParams }: { searchParams: SearchParams }) => {
         fallback: {
           [infinite_unstable_serialize(() => featuredPath)]: ssrFeaturedGuilds,
           [infinite_unstable_serialize(() => newestPath)]: ssrNewestGuilds,
+          [ALPHA_GUILDS_SWR_KEY]: ssrAlphaGuilds,
         },
       }}
     >

src/app/explorer/types.ts

@@ -2,3 +2,12 @@ export enum ActiveSection {
   YourGuilds = "your-guilds",
   ExploreGuilds = "explore-guilds",
 }
+
+export interface AlphaGuild {
+  id: string
+  name: string
+  urlName: string
+  logoUrl?: string
+  memberCount: number
+  isVerified?: boolean
+}

src/v2/components/GuildCard.tsx

@@ -11,9 +11,10 @@ import { Tooltip, TooltipContent, TooltipTrigger } from "./ui/Tooltip"
 
 type Props = {
   guildData: GuildBase
+  isAlpha?: boolean
 }
 
-export const GuildCard: React.FC<Props> = ({ guildData }) => (
+export const GuildCard: React.FC<Props> = ({ guildData, isAlpha }) => (
   <Card className="relative grid grid-cols-[auto,1fr] grid-rows-2 items-center gap-x-4 gap-y-1 px-6 py-7 before:absolute before:inset-0 before:bg-secondary before:opacity-0 before:transition-opacity before:duration-200 before:content-[''] hover:before:opacity-55 active:before:opacity-85">
     <Avatar className="row-span-2 size-12">
       <AvatarImage
@@ -53,14 +54,20 @@ export const GuildCard: React.FC<Props> = ({ guildData }) => (
           )}
         </span>
       </Badge>
-      <Badge>{pluralize(guildData.rolesCount, "role")}</Badge>
+      {!isAlpha && <Badge>{pluralize(guildData.rolesCount, "role")}</Badge>}
     </div>
   </Card>
 )
 
-export const GuildCardWithLink: typeof GuildCard = ({ guildData }) => (
-  <Anchor href={guildData.urlName} className="rounded-2xl" variant="unstyled">
-    <GuildCard guildData={guildData} />
+export const GuildCardWithLink: typeof GuildCard = ({ guildData, isAlpha }) => (
+  <Anchor
+    href={
+      isAlpha ? `https://alpha.guild.xyz/${guildData.urlName}` : guildData.urlName
+    }
+    className="rounded-2xl"
+    variant="unstyled"
+  >
+    <GuildCard guildData={guildData} isAlpha={isAlpha} />
   </Anchor>
 )