[Dashboard] Dynamically fetch supported chains from Simplehash (#5866)

## Problem solved

Short description of the bug fixed or feature added

<!-- start pr-codex -->

---

## PR-Codex overview
This PR focuses on refactoring the handling of SimpleHash support in the `wallet` API and related components. It introduces an asynchronous check for SimpleHash support and replaces direct checks with a hook for better data management.

### Detailed summary
- Changed `isSimpleHashSupported` to return a chain slug instead of a boolean.
- Updated the `generateSimpleHashUrl` function to use `chainSlug`.
- Introduced `useSimplehashSupport` hook for querying SimpleHash support.
- Refactored components to use the new hook instead of direct checks.
- Removed unused `simpleHashSupportedChainIdsMap` and related types.

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

<!-- end pr-codex -->

Author: kien-ngo

apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/(marketplace)/components/list-button.tsx

@@ -13,7 +13,7 @@ import { ListerOnly } from "@3rdweb-sdk/react/components/roles/lister-only";
 import type { Account } from "@3rdweb-sdk/react/hooks/useApi";
 import { isAlchemySupported } from "lib/wallet/nfts/alchemy";
 import { isMoralisSupported } from "lib/wallet/nfts/moralis";
-import { isSimpleHashSupported } from "lib/wallet/nfts/simpleHash";
+import { useSimplehashSupport } from "lib/wallet/nfts/simpleHash";
 import { PlusIcon } from "lucide-react";
 import { useState } from "react";
 import type { ThirdwebContract } from "thirdweb";
@@ -40,9 +40,12 @@ export const CreateListingButton: React.FC<CreateListingButtonProps> = ({
   const [open, setOpen] = useState(false);
   const [listingMode, setListingMode] =
     useState<(typeof LISTING_MODES)[number]>("Select NFT");
+
+  const simplehashQuery = useSimplehashSupport(contract.chain.id);
+
   const isSupportedChain =
     contract.chain.id &&
-    (isSimpleHashSupported(contract.chain.id) ||
+    (simplehashQuery.data ||
       isAlchemySupported(contract.chain.id) ||
       isMoralisSupported(contract.chain.id));
   return (

apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/(marketplace)/components/list-form.tsx

@@ -21,7 +21,7 @@ import { useAllChainsData } from "hooks/chains/allChains";
 import { useTxNotifications } from "hooks/useTxNotifications";
 import { isAlchemySupported } from "lib/wallet/nfts/alchemy";
 import { isMoralisSupported } from "lib/wallet/nfts/moralis";
-import { isSimpleHashSupported } from "lib/wallet/nfts/simpleHash";
+import { useSimplehashSupport } from "lib/wallet/nfts/simpleHash";
 import type { WalletNFT } from "lib/wallet/nfts/types";
 import { CircleAlertIcon, InfoIcon } from "lucide-react";
 import Link from "next/link";
@@ -112,10 +112,10 @@ export const CreateListingsForm: React.FC<CreateListingsFormProps> = ({
   const { idToChain } = useAllChainsData();
   const network = idToChain.get(chainId);
   const [isFormLoading, setIsFormLoading] = useState(false);
-
+  const simplehashQuery = useSimplehashSupport(contract.chain.id);
   const isSupportedChain =
     chainId &&
-    (isSimpleHashSupported(chainId) ||
+    (!!simplehashQuery.data ||
       isAlchemySupported(chainId) ||
       isMoralisSupported(chainId));
 

apps/dashboard/src/app/api/nft/is-simplehash-supported/route.ts

@@ -0,0 +1,34 @@
+import { isSimpleHashSupported } from "lib/wallet/nfts/simpleHash";
+import { NextResponse } from "next/server";
+import type { NextRequest } from "next/server";
+
+export const runtime = "edge";
+
+export const GET = async (req: NextRequest) => {
+  const searchParams = req.nextUrl.searchParams;
+  const chainIdStr = searchParams.get("chainId");
+
+  if (!chainIdStr) {
+    return NextResponse.json(
+      {
+        error: "Missing chain ID parameter.",
+      },
+      { status: 400 },
+    );
+  }
+
+  const chainId = Number.parseInt(chainIdStr);
+
+  if (!Number.isInteger(chainId)) {
+    return NextResponse.json(
+      {
+        error: "Invalid chain ID parameter.",
+      },
+      { status: 400 },
+    );
+  }
+
+  const found = await isSimpleHashSupported(chainId);
+
+  return NextResponse.json({ result: found });
+};

apps/dashboard/src/lib/wallet/nfts/simpleHash.ts

@@ -1,25 +1,50 @@
-import {
-  type GenerateURLParams,
-  type SimpleHashSupportedChainId,
-  type WalletNFT,
-  simpleHashSupportedChainIdsMap,
-  simpleHashSupportedNetworks,
-} from "./types";
-
-export function isSimpleHashSupported(
+import { useQuery } from "@tanstack/react-query";
+import type { WalletNFT } from "./types";
+
+/**
+ * Return the chain slug if the chain is supported by Simplehash, otherwise `undefined`
+ * Chain slug because we need it to fetch the owned NFTs using another endpoint
+ */
+export async function isSimpleHashSupported(
   chainId: number,
-): chainId is SimpleHashSupportedChainId {
-  return simpleHashSupportedNetworks.includes(chainId.toString());
-}
+): Promise<string | undefined> {
+  if (!process.env.SIMPLEHASH_API_KEY) {
+    throw new Error("No Simplehash API Key");
+  }
 
-export function generateSimpleHashUrl({ chainId, owner }: GenerateURLParams) {
+  const options = {
+    method: "GET",
+    headers: {
+      "X-API-KEY": process.env.SIMPLEHASH_API_KEY,
+    },
+  };
+  const response: Array<{
+    chain: string;
+    eip155_network_id: number;
+    is_testnet: boolean;
+  }> = await fetch("https://api.simplehash.com/api/v0/chains", options)
+    .then((r) => r.json())
+    .catch(() => []);
+
+  const found = response.find((chain) => chain.eip155_network_id === chainId);
+  return found?.chain;
+}
+
+export function useSimplehashSupport(chainId: number) {
+  return useQuery({
+    queryKey: ["simplehash-supported", chainId],
+    queryFn: () => isSimpleHashSupported(chainId),
+    enabled: !!chainId,
+  });
+}
+
+export function generateSimpleHashUrl({
+  chainSlug,
+  owner,
+}: { chainSlug: string; owner: string }) {
   const url = new URL("https://api.simplehash.com/api/v0/nfts/owners");
-
   url.searchParams.append("wallet_addresses", owner);
-  if (simpleHashSupportedChainIdsMap[chainId]) {
-    url.searchParams.append("chains", simpleHashSupportedChainIdsMap[chainId]);
-  }
-
+  url.searchParams.append("chains", chainSlug);
   return url.toString();
 }
 

apps/dashboard/src/lib/wallet/nfts/types.ts

@@ -1,55 +1,29 @@
 import type { NFT } from "thirdweb";
 import {
   arbitrum,
-  arbitrumNova,
-  arbitrumSepolia,
-  astriaEvmDusknet,
   avalanche,
-  avalancheFuji,
   base,
-  baseSepolia,
   blast,
   blastSepolia,
   bsc,
   bscTestnet,
-  celo,
   cronos,
-  degen,
   ethereum,
   fantom,
-  frameTestnet,
   gnosis,
   gnosisChiadoTestnet,
-  godWoken,
-  godWokenTestnetV1,
-  hokumTestnet,
   linea,
-  lineaSepolia,
-  loot,
-  mantaPacific,
-  mantaPacificTestnet,
   moonbeam,
   optimism,
-  optimismSepolia,
   palm,
-  palmTestnet,
   polygon,
   polygonAmoy,
   polygonMumbai,
   polygonZkEvm,
   polygonZkEvmTestnet,
-  rari,
-  rariTestnet,
-  scroll,
-  scrollAlphaTestnet,
-  scrollSepoliaTestnet,
   sepolia,
-  xai,
-  xaiSepolia,
   zkSync,
   zkSyncSepolia,
-  zora,
-  zoraSepolia,
 } from "thirdweb/chains";
 
 // Cannot use BigInt for the values here because it will result in error: "fail to serialize bigint"
@@ -132,65 +106,8 @@ const moralisSupportedChainIdsMap: Record<number, string> = {
   [4202]: "",
 };
 
-// List: https://docs.simplehash.com/reference/supported-chains-testnets
-export const simpleHashSupportedChainIdsMap: Record<number, string> = {
-  [arbitrum.id]: "arbitrum",
-  [arbitrumNova.id]: "arbitrum-nova",
-  [arbitrumSepolia.id]: "arbitrum-sepolia",
-  [astriaEvmDusknet.id]: "astria-devnet",
-  [avalanche.id]: "avalanche",
-  [avalancheFuji.id]: "avalanche-fuji",
-  [base.id]: "base",
-  [baseSepolia.id]: "base-sepolia",
-  [bsc.id]: "bsc",
-  [bscTestnet.id]: "bsc-testnet",
-  [blast.id]: "blast",
-  [blastSepolia.id]: "blast-sepolia",
-  [celo.id]: "celo",
-  [ethereum.id]: "ethereum",
-  [degen.id]: "degen",
-  [fantom.id]: "fantom",
-  [frameTestnet.id]: "frame-testnet",
-  [gnosis.id]: "gnosis",
-  [godWoken.id]: "godwoken",
-  [godWokenTestnetV1.id]: "godwoken-testnet",
-  [hokumTestnet.id]: "hokum-testnet",
-  [linea.id]: "linea",
-  [lineaSepolia.id]: "linea-testnet",
-  [loot.id]: "loot",
-  [mantaPacific.id]: "manta",
-  [mantaPacificTestnet.id]: "manta-testnet",
-  [moonbeam.id]: "moonbeam",
-  [polygonMumbai.id]: "polygon-mumbai",
-  [optimism.id]: "optimism",
-  [optimismSepolia.id]: "optimism-sepolia",
-  [palm.id]: "palm",
-  [palmTestnet.id]: "palm-testnet",
-  [polygon.id]: "polygon",
-  [polygonAmoy.id]: "polygon-amoy",
-  [polygonZkEvm.id]: "polygon-zkevm",
-  [polygonZkEvmTestnet.id]: "polygon-zkevm-testnet",
-  [rari.id]: "rari",
-  [rariTestnet.id]: "rari-testnet",
-  [scroll.id]: "scroll",
-  [scrollAlphaTestnet.id]: "scroll-testnet",
-  [scrollSepoliaTestnet.id]: "scroll-sepolia",
-  [sepolia.id]: "ethereum-sepolia",
-  [xai.id]: "xai",
-  [xaiSepolia.id]: "xai-sepolia",
-  [zkSync.id]: "zksync-era",
-  [zora.id]: "zora",
-  [zoraSepolia.id]: "zora-sepolia",
-  [1329]: "sei",
-  [1328]: "sei-atlantic-2",
-  [360]: "shape",
-  [33139]: "apechain",
-};
-
 export type AlchemySupportedChainId = keyof typeof alchemySupportedChainIdsMap;
 export type MoralisSupportedChainId = keyof typeof moralisSupportedChainIdsMap;
-export type SimpleHashSupportedChainId =
-  keyof typeof simpleHashSupportedChainIdsMap;
 
 export const alchemySupportedChainIds = Object.keys(
   alchemySupportedChainIdsMap,
@@ -200,10 +117,6 @@ export const moralisSupportedChainIds = Object.keys(
   moralisSupportedChainIdsMap,
 );
 
-export const simpleHashSupportedNetworks = Object.keys(
-  simpleHashSupportedChainIdsMap,
-);
-
 export interface GenerateURLParams {
   chainId: number;
   owner: string;

apps/dashboard/src/pages/api/wallet/nfts/[chainId].ts

@@ -38,8 +38,10 @@ const handler = async (
   }
   const chainId = Number.parseInt(queryChainId);
 
-  if (isSimpleHashSupported(chainId) && process.env.SIMPLEHASH_API_KEY) {
-    const url = generateSimpleHashUrl({ chainId, owner });
+  const supportedChainSlug = await isSimpleHashSupported(chainId);
+
+  if (supportedChainSlug && process.env.SIMPLEHASH_API_KEY) {
+    const url = generateSimpleHashUrl({ chainSlug: supportedChainSlug, owner });
 
     const options = {
       method: "GET",