diff --git a/next.config.js b/next.config.js index 11a79408ee..c4ac8264e3 100644 --- a/next.config.js +++ b/next.config.js @@ -54,6 +54,9 @@ const nextConfig = { { hostname: "guild-xyz.mypinata.cloud", }, + { + hostname: "ipfs.guild.xyz", + }, { hostname: "assets.poap.xyz", }, diff --git a/src/app/explorer/_components/AlphaGuilds.tsx b/src/app/explorer/_components/AlphaGuilds.tsx new file mode 100644 index 0000000000..e1bf940cb5 --- /dev/null +++ b/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 ( + + Explore alpha guilds + + {!data ? ( + Array.from({ length: 6 }, (_, i) => ) + ) : data.length < 1 ? ( + Couldn't load alpha guilds + ) : ( + data.map((guild) => ( + + )) + )} + + + ) +} diff --git a/src/app/explorer/_components/Explorer.tsx b/src/app/explorer/_components/Explorer.tsx index d4446f7a96..1d7bd34085 100644 --- a/src/app/explorer/_components/Explorer.tsx +++ b/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 }) => { <> + Explore verified guilds diff --git a/src/app/explorer/consts.ts b/src/app/explorer/consts.ts new file mode 100644 index 0000000000..6321c928f0 --- /dev/null +++ b/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" diff --git a/src/app/explorer/hooks/useAlphaGuilds.ts b/src/app/explorer/hooks/useAlphaGuilds.ts new file mode 100644 index 0000000000..41db5d0a68 --- /dev/null +++ b/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) + ) + ) diff --git a/src/app/explorer/page.tsx b/src/app/explorer/page.tsx index 001cbae80f..53ed3daa07 100644 --- a/src/app/explorer/page.tsx +++ b/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, }, }} > diff --git a/src/app/explorer/types.ts b/src/app/explorer/types.ts index 0eeb89dee4..e0056756d8 100644 --- a/src/app/explorer/types.ts +++ b/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 +} diff --git a/src/v2/components/GuildCard.tsx b/src/v2/components/GuildCard.tsx index dd26726b85..995c0ec675 100644 --- a/src/v2/components/GuildCard.tsx +++ b/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 = ({ guildData }) => ( +export const GuildCard: React.FC = ({ guildData, isAlpha }) => ( = ({ guildData }) => ( )} - {pluralize(guildData.rolesCount, "role")} + {!isAlpha && {pluralize(guildData.rolesCount, "role")}} ) -export const GuildCardWithLink: typeof GuildCard = ({ guildData }) => ( - - +export const GuildCardWithLink: typeof GuildCard = ({ guildData, isAlpha }) => ( + + )
Couldn't load alpha guilds