Add ecosystem-specific chain config support (#8147)

Introduces ecosystemConfig utility to define allowed chains per ecosystem. Updates ConnectButton, ConnectEmbed, NftGallery, and wallet pages to use ecosystem-specific chain lists, enabling dynamic filtering and selection of chains based on the current ecosystem context.

<!-- start pr-codex -->

---

## PR-Codex overview
This PR introduces ecosystem-specific chain handling in the wallet UI, allowing for dynamic chain selection based on the ecosystem parameter. It enhances components to utilize ecosystem chains and improves the overall functionality of NFT galleries and connection buttons.

### Detailed summary
- Added `getEcosystemChainIds` and `getEcosystemChains` functions in `ecosystemConfig.ts`.
- Updated `Layout` to use `allowedChainIds` based on the ecosystem.
- Modified `NftGallery` to accept `allowedChainIds` and handle resolved chain IDs.
- Enhanced `ConnectButton` to utilize ecosystem-specific chains.
- Adjusted `Page` to retrieve and pass `allowedChainIds` for NFT galleries.
- Updated `ConnectEmbed` to manage ecosystem chains and wallet connections dynamically.

> ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}`

<!-- end pr-codex -->

<!-- This is an auto-generated comment: release notes by coderabbit.ai -->

## Summary by CodeRabbit

* **New Features**
  * Ecosystem-aware chain selection across wallet pages, with automatic filtering to supported chains.
  * NFT Gallery now respects ecosystem-specific allowed chains and selects the most relevant chain for queries and empty states.
  * Connect Button and Connect Embed preselect and display chains based on the current ecosystem, improving onboarding.
  * Ecosystem-aware wallet option shown when applicable.
  * Wallet page routing now supports ecosystem in the URL, enabling context-aware views.

* **Refactor**
  * Centralized ecosystem-to-chain mapping to ensure consistent behavior across components.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->

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));
+}