Add ecosystem-specific chain config support (#8147)

Author: 0xFirekeeper

apps/wallet-ui/src/app/[ecosystem]/(authed)/wallet/[address]/layout.tsx

@@ -4,6 +4,7 @@ import { shortenAddress } from "thirdweb/utils";
 import { ChainCombobox } from "@/components/ChainCombobox";
 import { getChains } from "@/lib/chains";
 import { client } from "@/lib/client";
+import { getEcosystemChainIds } from "@/lib/ecosystemConfig";
 import { getEcosystemInfo } from "@/lib/ecosystems";
 import { SIMPLEHASH_NFT_SUPPORTED_CHAIN_IDS } from "@/util/simplehash";
 
@@ -45,8 +46,11 @@ export default async function Layout(props: {
     thirdwebChainsPromise,
   ]);
 
+  const specialChainIds = getEcosystemChainIds(params.ecosystem);
+  const allowedChainIds = specialChainIds ?? SIMPLEHASH_NFT_SUPPORTED_CHAIN_IDS;
+
   const simpleHashChains = thirdwebChains.filter((chain) =>
-    SIMPLEHASH_NFT_SUPPORTED_CHAIN_IDS.includes(chain.chainId),
+    allowedChainIds.includes(chain.chainId),
   );
 
   return (

apps/wallet-ui/src/app/[ecosystem]/(authed)/wallet/[address]/page.tsx

@@ -1,9 +1,10 @@
 import { getAddress } from "thirdweb";
 import { AutoConnectWalletConnect } from "@/components/AutoConnectWalletConnect";
 import NftGallery from "@/components/NftGallery";
+import { getEcosystemChainIds } from "@/lib/ecosystemConfig";
 
 export default async function Page(props: {
-  params: Promise<{ address: string }>;
+  params: Promise<{ ecosystem: string; address: string }>;
   searchParams: Promise<{ chainId?: string; uri?: string }>;
 }) {
   const [searchParams, params] = await Promise.all([
@@ -12,12 +13,18 @@ export default async function Page(props: {
   ]);
 
   const { chainId, uri } = searchParams;
-  const { address } = params;
+  const { address, ecosystem } = params;
+  const allowedChainIds = getEcosystemChainIds(ecosystem);
+  const parsedChainId = chainId ? Number(chainId) : undefined;
 
   return (
     <>
       <AutoConnectWalletConnect uri={uri} />
-      <NftGallery chainId={Number(chainId)} owner={getAddress(address)} />
+      <NftGallery
+        allowedChainIds={allowedChainIds}
+        chainId={parsedChainId}
+        owner={getAddress(address)}
+      />
     </>
   );
 }

apps/wallet-ui/src/components/ConnectButton.tsx

@@ -1,18 +1,23 @@
 "use client";
 import { useTheme } from "next-themes";
+import { useMemo } from "react";
 import { ConnectButton as ThirdwebConnectButton } from "thirdweb/react";
 import { ecosystemWallet } from "thirdweb/wallets";
 import { client } from "@/lib/client";
+import { getEcosystemChains } from "@/lib/ecosystemConfig";
 
 export default function ConnectButton({
   ecosystem,
 }: {
   ecosystem: `ecosystem.${string}`;
 }) {
   const { theme } = useTheme();
+  const chains = useMemo(() => getEcosystemChains(ecosystem), [ecosystem]);
 
   return (
     <ThirdwebConnectButton
+      chain={chains?.[0]}
+      chains={chains}
       client={client}
       theme={theme === "light" ? "light" : "dark"}
       wallets={[ecosystemWallet(ecosystem)]}

apps/wallet-ui/src/components/ConnectEmbed.tsx

@@ -2,18 +2,33 @@
 import { useQuery } from "@tanstack/react-query";
 import { useParams, useSearchParams } from "next/navigation";
 import { useTheme } from "next-themes";
+import { useMemo } from "react";
 import type { VerifyLoginPayloadParams } from "thirdweb/auth";
 import { ConnectEmbed as ThirdwebConnectEmbed } from "thirdweb/react";
 import { ecosystemWallet } from "thirdweb/wallets";
 import { useRouter } from "@/hooks/useRouter";
 import { generatePayload, getCurrentUser, login, logout } from "@/lib/auth";
 import { client } from "@/lib/client";
+import { getEcosystemChains } from "@/lib/ecosystemConfig";
 
 export function ConnectEmbed() {
   const { theme } = useTheme();
   const router = useRouter();
   const params = useParams();
   const searchParams = useSearchParams();
+  const ecosystemParam = params.ecosystem;
+  const ecosystemSlug = Array.isArray(ecosystemParam)
+    ? ecosystemParam[0]
+    : ecosystemParam;
+
+  const chains = useMemo(
+    () => getEcosystemChains(ecosystemSlug),
+    [ecosystemSlug],
+  );
+
+  const ecosystemId = ecosystemSlug
+    ? (`ecosystem.${ecosystemSlug}` as `ecosystem.${string}`)
+    : undefined;
 
   const { data: userAddress } = useQuery({
     queryFn: getCurrentUser,
@@ -29,6 +44,8 @@ export function ConnectEmbed() {
 
   return (
     <ThirdwebConnectEmbed
+      chain={chains?.[0]}
+      chains={chains}
       auth={{
         doLogin: async (loginParams: VerifyLoginPayloadParams) => {
           const success = await login(loginParams);
@@ -46,7 +63,7 @@ export function ConnectEmbed() {
       autoConnect={true}
       client={client}
       theme={theme === "light" ? "light" : "dark"}
-      wallets={[ecosystemWallet(`ecosystem.${params.ecosystem}`)]}
+      wallets={ecosystemId ? [ecosystemWallet(ecosystemId)] : undefined}
     />
   );
 }

apps/wallet-ui/src/components/NftGallery.tsx

@@ -20,19 +20,31 @@ export function NftGalleryLoading() {
 export default async function NftGallery({
   owner,
   chainId,
+  allowedChainIds,
 }: {
   owner: Address;
   chainId?: number;
   page?: number;
+  allowedChainIds?: number[];
 }) {
+  const resolvedChainId =
+    chainId && allowedChainIds && !allowedChainIds.includes(chainId)
+      ? undefined
+      : chainId;
+
+  const chainIdsToQuery =
+    resolvedChainId !== undefined
+      ? [Number(resolvedChainId)]
+      : (allowedChainIds ?? SIMPLEHASH_NFT_SUPPORTED_CHAIN_IDS);
+
   const erc721TokensResult = await getErc721Tokens({
-    chainIds: chainId ? [Number(chainId)] : SIMPLEHASH_NFT_SUPPORTED_CHAIN_IDS,
+    chainIds: chainIdsToQuery,
     limit: 36,
     owner,
   });
 
   if (erc721TokensResult.tokens.length === 0) {
-    return <NftGalleryEmpty chainId={chainId} />;
+    return <NftGalleryEmpty chainId={resolvedChainId} />;
   }
 
   return (

apps/wallet-ui/src/lib/ecosystemConfig.ts

@@ -0,0 +1,34 @@
+import type { Chain } from "thirdweb";
+import { defineChain } from "thirdweb";
+
+type EcosystemIdentifier = `ecosystem.${string}` | string | undefined;
+
+const SPECIAL_ECOSYSTEM_CHAIN_IDS: Record<string, readonly number[]> = {
+  "mon-id": [1, 43114] as const,
+};
+
+function normalizeEcosystemSlug(ecosystem?: string) {
+  if (!ecosystem) {
+    return undefined;
+  }
+  if (ecosystem.startsWith("ecosystem.")) {
+    const [, slug] = ecosystem.split(".");
+    return slug;
+  }
+  return ecosystem;
+}
+
+export function getEcosystemChainIds(
+  ecosystem?: EcosystemIdentifier,
+): number[] | undefined {
+  const slug = normalizeEcosystemSlug(ecosystem);
+  const chainIds = slug ? SPECIAL_ECOSYSTEM_CHAIN_IDS[slug] : undefined;
+  return chainIds ? [...chainIds] : undefined;
+}
+
+export function getEcosystemChains(
+  ecosystem?: EcosystemIdentifier,
+): Chain[] | undefined {
+  const chainIds = getEcosystemChainIds(ecosystem);
+  return chainIds?.map((chainId) => defineChain(chainId));
+}