chore: query supported chains from chainsaw (#2620)

Author: arcoraven

src/contract-ui/tabs/analytics/page.tsx

@@ -22,8 +22,8 @@ import { BarChart } from "components/analytics/bar-chart";
 import { ChartContainer } from "components/analytics/chart-container";
 import {
   AnalyticsQueryParams,
-  SUPPORTED_ANALYTICS_CHAINS,
   TotalQueryResult,
+  useAnalyticsSupportedChains,
   useEventsAnalytics,
   useFunctionsAnalytics,
   useLogsAnalytics,
@@ -242,6 +242,8 @@ export const AnalyticsChart: React.FC<AnalyticsChartProps> = ({
   showXAxis,
   showYAxis,
 }) => {
+  const supportedChainsQuery = useAnalyticsSupportedChains();
+
   const analyticsQuery = useAnalytics({
     contractAddress,
     chainId,
@@ -258,10 +260,12 @@ export const AnalyticsChart: React.FC<AnalyticsChartProps> = ({
   }, [analyticsQuery.data]);
 
   if (data.length <= 1) {
+    const supportedChains = supportedChainsQuery.data ?? [];
+
     return (
       <Alert status="info" borderRadius="md" mb={4}>
         <AlertIcon />
-        {SUPPORTED_ANALYTICS_CHAINS.includes(chainId) ? (
+        {supportedChains.includes(chainId) ? (
           <AlertDescription>No recent activity.</AlertDescription>
         ) : (
           <AlertDescription>

src/data/analytics/hooks.ts

@@ -1,23 +1,5 @@
-import { THIRDWEB_ANALYTICS_API_HOSTNAME } from "./constants";
 import { useQuery } from "@tanstack/react-query";
-import {
-  Arbitrum,
-  ArbitrumGoerli,
-  Avalanche,
-  AvalancheFuji,
-  Base,
-  BaseGoerli,
-  BinanceTestnet,
-  Ethereum,
-  Fantom,
-  Goerli,
-  Mumbai,
-  Optimism,
-  Polygon,
-  PolygonZkevmTestnet,
-  ScrollAlphaTestnet,
-  Sepolia,
-} from "@thirdweb-dev/chains";
+import { THIRDWEB_ANALYTICS_API_HOSTNAME } from "./constants";
 
 export type AnalyticsQueryParams = {
   chainId: number;
@@ -27,26 +9,6 @@ export type AnalyticsQueryParams = {
   interval?: "minute" | "hour" | "day" | "week" | "month";
 };
 
-// TODO: Keep updated with actual ClickHouse data
-export const SUPPORTED_ANALYTICS_CHAINS: number[] = [
-  Ethereum.chainId,
-  Goerli.chainId,
-  Optimism.chainId,
-  BinanceTestnet.chainId,
-  Polygon.chainId,
-  Fantom.chainId,
-  PolygonZkevmTestnet.chainId,
-  Base.chainId,
-  Arbitrum.chainId,
-  AvalancheFuji.chainId,
-  Avalanche.chainId,
-  Mumbai.chainId,
-  BaseGoerli.chainId,
-  ArbitrumGoerli.chainId,
-  ScrollAlphaTestnet.chainId,
-  Sepolia.chainId,
-];
-
 async function makeQuery(
   path: string,
   query: Record<string, string | number | undefined>,
@@ -404,3 +366,18 @@ export function useTotalWalletsAnalytics(params: AnalyticsQueryParams) {
     enabled: !!params.contractAddress && !!params.chainId,
   });
 }
+
+export function useAnalyticsSupportedChains() {
+  return useQuery(
+    ["analytics-supported-chains"] as const,
+    async (): Promise<number[]> => {
+      const res = await makeQuery("/api/v1/supported-chains", {});
+      if (!res.ok) {
+        throw new Error(`Unexpected status ${res.status}`);
+      }
+
+      const { results } = await res.json();
+      return results;
+    },
+  );
+}