show all supported chains in AA docs

Author: joaquim-verges

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

@@ -0,0 +1,16 @@
+import { NextResponse } from "next/server";
+import invariant from "tiny-invariant";
+
+export async function GET() {
+  const bundlerServiceKey = process.env.BUNDLER_SERVICE_KEY;
+  invariant(bundlerServiceKey, "BUNDLER_SERVICE_KEY is not set");
+
+  const response = await fetch("http://1.bundler.thirdweb.com/service/chains", {
+    headers: {
+      "Content-Type": "application/json",
+      "x-service-api-key": bundlerServiceKey,
+    },
+  });
+  const data = await response.json();
+  return NextResponse.json(data);
+}

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,52 @@
+/* eslint-disable @next/next/no-img-element */
+import { cn } from "@/lib/utils";
+import {
+  type ChainMetadata,
+  defineChain,
+  getChainMetadata,
+} from "thirdweb/chains";
+import { getBaseUrl } from "../../lib/getBaseUrl";
+
+async function getChains(): Promise<ChainMetadata[]> {
+  const chains = await fetch(`${getBaseUrl()}/api/aa-chains`);
+  if (!chains.ok) {
+    return [];
+  }
+  const aaChains = (await chains.json()) as { data: number[] };
+  const chunkSize = 5;
+  // dont fetch all chains at once to avoid rate limiting
+  const allChains = await Promise.all(
+    Array.from(
+      { length: Math.ceil(aaChains.data.length / chunkSize) },
+      async (_, i) => {
+        if (i > 0) {
+          await new Promise((resolve) => setTimeout(resolve, 300));
+        }
+        return Promise.all(
+          aaChains.data
+            .slice(i * chunkSize, (i + 1) * chunkSize)
+            .map((id) => getChainMetadata(defineChain({ id }))),
+        );
+      },
+    ),
+  );
+  return allChains
+    .flat()
+    .filter((c) => c.name)
+    .sort((a, b) => a.name.localeCompare(b.name));
+}
+
+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";