show all supported chains in AA docs

Author: joaquim-verges

apps/portal/src/app/api/aa-chains/route.ts

@@ -0,0 +1,46 @@
+import { NextResponse } from "next/server";
+import type { ChainMetadata } from "thirdweb/chains";
+import invariant from "tiny-invariant";
+
+export const maxDuration = 300; // max timeout 300 seconds (5min)
+export const revalidate = 86400; // Revalidate every 24 hours (86400 seconds)
+
+export async function GET() {
+  const bundlerServiceKey = process.env.BUNDLER_SERVICE_KEY;
+  invariant(bundlerServiceKey, "BUNDLER_SERVICE_KEY is not set");
+
+  const [aaChains, allChains] = await Promise.all([
+    fetch("https://1.bundler.thirdweb.com/service/chains", {
+      headers: {
+        "Content-Type": "application/json",
+        "x-service-api-key": bundlerServiceKey,
+      },
+    })
+      .then((res) => res.json() as Promise<{ data: number[] }>)
+      .catch((error) => {
+        console.error(error);
+        return { data: [] as number[] };
+      }),
+    fetch("https://api.thirdweb.com/v1/chains", {
+      headers: {
+        "Content-Type": "application/json",
+      },
+    })
+      .then((res) => res.json() as Promise<{ data: ChainMetadata[] }>)
+      .catch((error) => {
+        console.error(error);
+        return { data: [] as ChainMetadata[] };
+      }),
+  ]);
+
+  const intersectedChains = allChains.data
+    .filter((chain) =>
+      aaChains.data.some((aaChainId) => aaChainId === chain.chainId),
+    )
+    .filter((c) => c.name)
+    .sort((a, b) => a.name.localeCompare(b.name));
+
+  return NextResponse.json({
+    data: intersectedChains,
+  });
+}

apps/portal/src/app/connect/account-abstraction/infrastructure/page.mdx

@@ -1,4 +1,4 @@
-import { createMetadata } from "@doc";
+import { createMetadata, AAChainList } from "@doc";
 
 export const metadata = createMetadata({
 	image: {
@@ -23,43 +23,7 @@ You can configure your client ID to restrict interactions only with your own con
 
 With a thirdweb API key, you get access to bundler and paymaster infrastructure on the following chains:
 
-| Chain                | Mainnet | Testnet |
-| -------------------- | ------- | ------- |
-| Ethereum             | ✅      | ✅      |
-| Polygon              | ✅      | ✅      |
-| Arbitrum (one, nova) | ✅      | ✅      |
-| Optimism             | ✅      | ✅      |
-| Gnosis               | ✅      | ✅      |
-| Linea                | ✅      | ✅      |
-| Base                 | ✅      | ✅      |
-| Avalanche C-Chain    | ✅      | ✅      |
-| Scroll               | ✅      | ✅      |
-| Celo                 | ✅      | ✅      |
-| Binance              | ✅      | ✅      |
-| Xai Orbit            | ✅      | ✅      |
-| Mode                 | ✅      | ✅      |
-| Zora                 | ✅      | ✅      |
-| Fraxtal              | ✅      | ✅      |
-| Lisk                 | ❌      | ✅      |
-| Taiko                | ✅      | ❌      |
-| Degen                | ✅      | ❌      |
-| Mantle               | ✅      | ❌      |
-| Ancient8             | ✅      | ✅      |
-| Blast                | ❌      | ✅      |
-| B3                   | ❌      | ✅      |
-| Plume                | ❌      | ✅      |
-| Camp Network         | ❌      | ✅      |
-| Vanar                | ✅      | ✅      |
-| DFK                  | ✅      | ✅      |
-| Form                 | ❌      | ✅      |
-| Cyber                | ✅      | ✅      |
-| Treasure Ruby        | ✅      | ❌      |
-| Redstone             | ✅      | ✅      |
-| Klaytn Cypress       | ✅      | ✅      |
-| OpBNB                | ✅      | ❌      |
-| Nautilus             | ✅      | ❌      | 
-| Fuse                 | ✅      | ❌      |
-| zkCandy              | ❌      | ✅      |
+<AAChainList />
 
 To support a chain not listed, [contact us](https://thirdweb.com/contact-us).
 

apps/portal/src/components/Document/AAChainList.tsx

@@ -0,0 +1,33 @@
+/* eslint-disable @next/next/no-img-element */
+import { cn } from "@/lib/utils";
+import type { ChainMetadata } from "thirdweb/chains";
+import { getBaseUrl } from "../../lib/getBaseUrl";
+
+async function getChains(): Promise<ChainMetadata[]> {
+  try {
+    const chains = await fetch(`${getBaseUrl()}/api/aa-chains`);
+    if (!chains.ok) {
+      return [];
+    }
+    const result = (await chains.json()) as { data: ChainMetadata[] };
+    return result.data;
+  } catch (error) {
+    console.error(error);
+    return [];
+  }
+}
+
+export async function AAChainList() {
+  const chains = await getChains();
+  return (
+    <div className={cn("my-4 rounded-lg border p-4")}>
+      <ul className="grid grid-cols-1 gap-2 md:grid-cols-2">
+        {chains?.map((chain) => (
+          <li key={chain.name} className="flex items-center">
+            {chain.name} ({chain.chainId})
+          </li>
+        ))}
+      </ul>
+    </div>
+  );
+}

apps/portal/src/components/Document/index.ts

@@ -25,3 +25,4 @@ export { Stack } from "./Stack";
 export { createMetadata } from "./metadata";
 export { ConnectCard } from "./Cards/ConnectCard";
 export { FeatureCard } from "./FeatureCard";
+export { AAChainList } from "./AAChainList";