portal: show all supported chains in AA docs (#5090)

## Problem solved

Short description of the bug fixed or feature added

<!-- start pr-codex -->

---

## PR-Codex overview
This PR focuses on enhancing the `Document` component by adding the `AAChainList` feature, which fetches and displays account abstraction chains. It also improves the API route for fetching chain data.

### Detailed summary
- Added `AAChainList` component in `apps/portal/src/components/Document/AAChainList.tsx`.
- Implemented `getChains` function to fetch account abstraction chains.
- Updated API route in `apps/portal/src/app/api/aa-chains/route.ts` to fetch services and chains.
- Integrated `AAChainList` in the `page.mdx` for displaying available chains.

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

<!-- end pr-codex -->

Author: joaquim-verges

.changeset/stale-fans-ring.md

@@ -0,0 +1,5 @@
+---
+"thirdweb": patch
+---
+
+Fix useProfiles not updating when connecting to a different account

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

@@ -0,0 +1,54 @@
+import { NextResponse } from "next/server";
+import type { ChainMetadata } from "thirdweb/chains";
+
+export const maxDuration = 300; // max timeout 300 seconds (5min)
+export const revalidate = 86400; // Revalidate every 24 hours (86400 seconds)
+
+type ApiResponseType = {
+  data: Record<string, { service: string; enabled: boolean }[]>;
+};
+
+export async function GET() {
+  const [chainsWithServices, allChains] = await Promise.all([
+    fetch("https://api.thirdweb.com/v1/chains/services", {
+      headers: {
+        "Content-Type": "application/json",
+      },
+    })
+      .then((res) => res.json() as Promise<ApiResponseType>)
+      .catch((error) => {
+        console.error(error);
+        return { data: {} as ApiResponseType["data"] };
+      }),
+    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 aaChains = Object.entries(chainsWithServices.data)
+    .filter(([, services]) =>
+      services.some(
+        (service) =>
+          service.service === "account-abstraction" && service.enabled,
+      ),
+    )
+    .map(([chainId]) => Number(chainId));
+
+  const intersectedChains = allChains.data
+    .filter((chain) =>
+      aaChains.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";