Merge ENSApi /api/config endpoint into /api/indexing-status endpoint

apps/ensadmin/src/app/mock/config-api.mock.ts

@@ -1,6 +1,10 @@
-import { deserializeENSIndexerPublicConfig } from "@ensnode/ensnode-sdk";
+import {
+  deserializeENSIndexerPublicConfig,
+  SerializedEnsApiConfigResponse,
+  SerializedEnsIndexerConfigResponse,
+} from "@ensnode/ensnode-sdk";
 
-export const ensIndexerPublicConfig = deserializeENSIndexerPublicConfig({
+const serializedEnsIndexerPublicConfig = {
   labelSet: {
     labelSetId: "subgraph",
     labelSetVersion: 0,
@@ -27,4 +31,17 @@ export const ensIndexerPublicConfig = deserializeENSIndexerPublicConfig({
     ensRainbowSchema: 3,
     ensNormalize: "1.11.1",
   },
-});
+} satisfies SerializedEnsIndexerConfigResponse;
+
+export const ensIndexerPublicConfig = deserializeENSIndexerPublicConfig(
+  serializedEnsIndexerPublicConfig,
+);
+
+export const serializedEnsApiPublicConfig = {
+  ensIndexerPublicConfig: serializedEnsIndexerPublicConfig,
+  theGraphFallback: {
+    canFallback: true,
+    url: "https://api.thegraph.com/subgraphs/name/ensdomains/ens",
+  },
+  version: "0.35.0",
+} satisfies SerializedEnsApiConfigResponse;

apps/ensadmin/src/app/mock/indexing-stats/page.tsx

@@ -7,6 +7,7 @@ import { useEffect, useState } from "react";
 import {
   CrossChainIndexingStatusSnapshot,
   createRealtimeIndexingStatusProjection,
+  EnsApiIndexingStatusResponseOk,
   IndexingStatusResponseCodes,
   IndexingStatusResponseOk,
   OmnichainIndexingStatusIds,
@@ -37,7 +38,7 @@ let loadingTimeoutId: number;
 
 async function fetchMockedIndexingStatus(
   selectedVariant: Variant,
-): Promise<CrossChainIndexingStatusSnapshot> {
+): Promise<EnsApiIndexingStatusResponseOk> {
   // always try clearing loading timeout when performing a mocked fetch
   // this way we get a fresh and very long request to observe the loading state
   if (loadingTimeoutId) {
@@ -53,14 +54,14 @@ async function fetchMockedIndexingStatus(
         selectedVariant
       ] as IndexingStatusResponseOk;
 
-      return response.realtimeProjection.snapshot;
+      return response;
     }
     case "Error ResponseCode":
       throw new Error(
         "Received Indexing Status response with responseCode other than 'ok' which will not be cached.",
       );
     case "Loading":
-      return new Promise<CrossChainIndexingStatusSnapshot>((_resolve, reject) => {
+      return new Promise<EnsApiIndexingStatusResponseOk>((_resolve, reject) => {
         loadingTimeoutId = +setTimeout(reject, 5 * 60 * 1_000);
       });
     case "Loading Error":
@@ -77,10 +78,14 @@ export default function MockIndexingStatusPage() {
   const mockedIndexingStatus = useQuery({
     queryKey: ["mock", "useIndexingStatus", selectedVariant],
     queryFn: () => fetchMockedIndexingStatus(selectedVariant),
-    select: (cachedSnapshot) => {
+    select: (response) => {
       return {
         responseCode: IndexingStatusResponseCodes.Ok,
-        realtimeProjection: createRealtimeIndexingStatusProjection(cachedSnapshot, now),
+        realtimeProjection: createRealtimeIndexingStatusProjection(
+          response.realtimeProjection.snapshot,
+          now,
+        ),
+        config: response.config,
       } satisfies IndexingStatusResponseOk;
     },
     retry: false, // allows loading error to be observed immediately

apps/ensadmin/src/app/mock/indexing-status-api.mock.ts

@@ -18,6 +18,8 @@ import {
   type SerializedOmnichainIndexingStatusSnapshotUnstarted,
 } from "@ensnode/ensnode-sdk";
 
+import { serializedEnsApiPublicConfig } from "@/app/mock/config-api.mock";
+
 export const indexingStatusResponseError: IndexingStatusResponseError = {
   responseCode: IndexingStatusResponseCodes.Error,
 };
@@ -85,6 +87,7 @@ export const indexingStatusResponseOkOmnichain: Record<
         } satisfies SerializedOmnichainIndexingStatusSnapshotUnstarted,
       },
     },
+    config: serializedEnsApiPublicConfig,
   }),
 
   [OmnichainIndexingStatusIds.Backfill]: deserializeIndexingStatusResponse({
@@ -163,6 +166,7 @@ export const indexingStatusResponseOkOmnichain: Record<
         } satisfies SerializedOmnichainIndexingStatusSnapshotBackfill,
       },
     },
+    config: serializedEnsApiPublicConfig,
   }),
 
   [OmnichainIndexingStatusIds.Following]: deserializeIndexingStatusResponse({
@@ -256,6 +260,7 @@ export const indexingStatusResponseOkOmnichain: Record<
         } satisfies SerializedOmnichainIndexingStatusSnapshotFollowing,
       },
     },
+    config: serializedEnsApiPublicConfig,
   }),
 
   [OmnichainIndexingStatusIds.Completed]: deserializeIndexingStatusResponse({
@@ -293,5 +298,6 @@ export const indexingStatusResponseOkOmnichain: Record<
         } satisfies SerializedOmnichainIndexingStatusSnapshotCompleted,
       },
     },
+    config: serializedEnsApiPublicConfig,
   }),
 };

apps/ensadmin/src/components/config/useEnsApiConfig.ts

@@ -0,0 +1,16 @@
+import { useQuery } from "@tanstack/react-query";
+
+import { useEnsApiProviderOptions } from "@ensnode/ensnode-react";
+
+import { useIndexingStatusWithSwr } from "@/components/indexing-status";
+
+export function useEnsApiConfig() {
+  const ensApiProviderOptions = useEnsApiProviderOptions();
+  const indexingStatus = useIndexingStatusWithSwr();
+
+  return useQuery({
+    enabled: indexingStatus.isSuccess,
+    queryKey: ["swr", ensApiProviderOptions.client.url.href, "config"],
+    queryFn: async () => indexingStatus.data?.config, // enabled flag ensures this is only called when indexingStatus.data is available
+  });
+}

apps/ensadmin/src/components/connection/cards/ensnode-info.tsx

@@ -9,9 +9,9 @@ import { ChainIcon, getChainName } from "@namehash/namehash-ui";
 import { History, Replace } from "lucide-react";
 import { Fragment, ReactNode } from "react";
 
-import { useENSNodeConfig } from "@ensnode/ensnode-react";
-import { type ENSApiPublicConfig, getENSRootChainId } from "@ensnode/ensnode-sdk";
+import { type EnsApiPublicConfig, getENSRootChainId } from "@ensnode/ensnode-sdk";
 
+import { useEnsApiConfig } from "@/components/config/useEnsApiConfig";
 import { ErrorInfo, type ErrorInfoProps } from "@/components/error-info";
 import { ENSApiIcon } from "@/components/icons/ensnode-apps/ensapi-icon";
 import { ENSDbIcon } from "@/components/icons/ensnode-apps/ensdb-icon";
@@ -96,7 +96,7 @@ function ENSNodeCardLoadingSkeleton() {
  * Props for ENSNodeConfigCardDisplay - display component that accepts props for testing/mocking
  */
 export interface ENSNodeConfigCardDisplayProps {
-  ensApiPublicConfig: ENSApiPublicConfig;
+  ensApiPublicConfig: EnsApiPublicConfig;
 }
 
 /**
@@ -114,7 +114,7 @@ export function ENSNodeConfigCardDisplay({ ensApiPublicConfig }: ENSNodeConfigCa
  * Props for ENSNodeConfigInfoView - internal component that accepts props for testing/mocking
  */
 export interface ENSNodeConfigInfoViewProps {
-  ensApiPublicConfig?: ENSApiPublicConfig;
+  ensApiPublicConfig?: EnsApiPublicConfig;
   error?: ErrorInfoProps;
   isLoading?: boolean;
 }
@@ -147,28 +147,30 @@ export function ENSNodeConfigInfoView({
  * ENSNodeConfigInfo component - fetches and displays ENSNode configuration data
  */
 export function ENSNodeConfigInfo() {
-  const ensNodeConfigQuery = useENSNodeConfig();
+  const ensApiConfig = useEnsApiConfig();
 
-  return (
-    <ENSNodeConfigInfoView
-      ensApiPublicConfig={ensNodeConfigQuery.isSuccess ? ensNodeConfigQuery.data : undefined}
-      error={
-        ensNodeConfigQuery.isError
-          ? {
-              title: "ENSNodeConfigInfo Error",
-              description: ensNodeConfigQuery.error.message,
-            }
-          : undefined
-      }
-      isLoading={ensNodeConfigQuery.isPending}
-    />
-  );
+  if (ensApiConfig.isPending) {
+    return <ENSNodeConfigInfoView isLoading={true} />;
+  }
+
+  if (ensApiConfig.isError) {
+    return (
+      <ENSNodeConfigInfoView
+        error={{
+          title: "Failed to Load ENSNode Configuration",
+          description: ensApiConfig.error.message,
+        }}
+      />
+    );
+  }
+
+  return <ENSNodeConfigInfoView ensApiPublicConfig={ensApiConfig.data} />;
 }
 
 function ENSNodeConfigCardContent({
   ensApiPublicConfig,
 }: {
-  ensApiPublicConfig: ENSApiPublicConfig;
+  ensApiPublicConfig: EnsApiPublicConfig;
 }) {
   const cardItemValueStyles = "text-sm leading-6 font-normal text-black";
 

apps/ensadmin/src/components/connections/require-active-connection.tsx

@@ -2,23 +2,22 @@
 
 import type { PropsWithChildren } from "react";
 
-import { useENSNodeConfig } from "@ensnode/ensnode-react";
-
+import { useEnsApiConfig } from "@/components/config/useEnsApiConfig";
 import { ErrorInfo } from "@/components/error-info";
 import { LoadingSpinner } from "@/components/loading-spinner";
 
 /**
  * Allows consumers to use `useActiveConnection` by blocking rendering until it is available.
  */
 export function RequireActiveConnection({ children }: PropsWithChildren) {
-  const { status, error } = useENSNodeConfig();
+  const ensApiConfig = useEnsApiConfig();
 
-  if (status === "pending") return <Loading />;
+  if (ensApiConfig.status === "pending") return <Loading />;
 
-  if (status === "error") {
+  if (ensApiConfig.status === "error") {
     return (
       <section className="p-6">
-        <ErrorInfo title="Unable to parse ENSNode Config" description={error.message} />
+        <ErrorInfo title="Failed to connect to ENSApi" description={ensApiConfig.error.message} />
       </section>
     );
   }

apps/ensadmin/src/components/indexing-status/use-indexing-status-with-swr.ts

@@ -7,75 +7,92 @@ import { useCallback, useMemo } from "react";
 import {
   createIndexingStatusQueryOptions,
   QueryParameter,
-  useENSNodeSDKConfig,
+  useEnsApiProviderOptions,
   type useIndexingStatus,
   useSwrQuery,
-  WithSDKConfigParameter,
+  WithEnsApiProviderOptions,
 } from "@ensnode/ensnode-react";
 import {
   CrossChainIndexingStatusSnapshotOmnichain,
   createRealtimeIndexingStatusProjection,
   Duration,
-  type IndexingStatusRequest,
-  IndexingStatusResponseCodes,
-  IndexingStatusResponseOk,
+  EnsApiIndexingStatusRequest,
+  EnsApiIndexingStatusResponseCodes,
+  EnsApiIndexingStatusResponseOk,
+  EnsApiPublicConfig,
 } from "@ensnode/ensnode-sdk";
 
 const DEFAULT_REFETCH_INTERVAL = secondsToMilliseconds(10);
 
 const REALTIME_PROJECTION_REFRESH_RATE: Duration = 1;
 
+interface CachableIndexingStatus {
+  crossChainIndexingStatusSnapshot: CrossChainIndexingStatusSnapshotOmnichain;
+  config: EnsApiPublicConfig;
+}
+
 interface UseIndexingStatusParameters
-  extends IndexingStatusRequest,
-    QueryParameter<CrossChainIndexingStatusSnapshotOmnichain> {}
+  extends EnsApiIndexingStatusRequest,
+    QueryParameter<CachableIndexingStatus> {}
 
 /**
  * A proxy hook for {@link useIndexingStatus} which applies
  * stale-while-revalidate cache for successful responses.
  */
 export function useIndexingStatusWithSwr(
-  parameters: WithSDKConfigParameter & UseIndexingStatusParameters = {},
+  parameters: WithEnsApiProviderOptions & UseIndexingStatusParameters = {},
 ) {
-  const { config, query = {} } = parameters;
-  const _config = useENSNodeSDKConfig(config);
+  const { options, query = {} } = parameters;
+  const providerOptions = useEnsApiProviderOptions(options);
   const now = useNow({ timeToRefresh: REALTIME_PROJECTION_REFRESH_RATE });
 
-  const queryOptions = useMemo(() => createIndexingStatusQueryOptions(_config), [_config]);
+  const queryOptions = useMemo(
+    () => createIndexingStatusQueryOptions(providerOptions),
+    [providerOptions],
+  );
   const queryKey = useMemo(() => ["swr", ...queryOptions.queryKey], [queryOptions.queryKey]);
   const queryFn = useCallback(
     async () =>
       queryOptions.queryFn().then(async (response) => {
         // An indexing status response was successfully fetched,
         // but the response code contained within the response was not 'ok'.
         // Therefore, throw an error to avoid caching this response.
-        if (response.responseCode !== IndexingStatusResponseCodes.Ok) {
+        if (response.responseCode !== EnsApiIndexingStatusResponseCodes.Ok) {
           throw new Error(
             "Received Indexing Status response with responseCode other than 'ok' which will not be cached.",
           );
         }
 
-        // The indexing status snapshot has been fetched and successfully validated for caching.
+        // The indexing status snapshot, including ENSApi public config,
+        // has been fetched and successfully validated for caching.
         // Therefore, return it so that query cache for `queryOptions.queryKey` will:
         // - Replace the currently cached value (if any) with this new value.
         // - Return this non-null value.
-        return response.realtimeProjection.snapshot;
+        return {
+          crossChainIndexingStatusSnapshot: response.realtimeProjection.snapshot,
+          config: response.config,
+        } satisfies CachableIndexingStatus;
       }),
     [queryOptions.queryFn],
   );
 
   // Call select function to `createRealtimeIndexingStatusProjection` each time
   // `now` is updated.
   const select = useCallback(
-    (cachedSnapshot: CrossChainIndexingStatusSnapshotOmnichain): IndexingStatusResponseOk => {
-      const realtimeProjection = createRealtimeIndexingStatusProjection(cachedSnapshot, now);
+    (cachedResult: CachableIndexingStatus): EnsApiIndexingStatusResponseOk => {
+      const realtimeProjection = createRealtimeIndexingStatusProjection(
+        cachedResult.crossChainIndexingStatusSnapshot,
+        now,
+      );
 
-      // Maintain the original response shape of `IndexingStatusResponse`
+      // Maintain the original response shape of `EnsApiIndexingStatusResponseOk`
       // for the consumers. Creating a new projection from the cached snapshot
       // each time `now` is updated should be implementation detail.
       return {
-        responseCode: IndexingStatusResponseCodes.Ok,
+        responseCode: EnsApiIndexingStatusResponseCodes.Ok,
         realtimeProjection,
-      } satisfies IndexingStatusResponseOk;
+        config: cachedResult.config,
+      } satisfies EnsApiIndexingStatusResponseOk;
     },
     [now],
   );

apps/ensadmin/src/components/layout-wrapper.tsx

@@ -7,7 +7,7 @@ import { AppSidebar } from "@/components/app-sidebar";
 import { RequireActiveConnection } from "@/components/connections/require-active-connection";
 import { RequireSelectedConnection } from "@/components/connections/require-selected-connection";
 import { Header, HeaderActions, HeaderBreadcrumbs, HeaderNav } from "@/components/header";
-import { SelectedENSNodeProvider } from "@/components/providers/selected-ensnode-provider";
+import { SelectedEnsApiProvider } from "@/components/providers/selected-ensnode-provider";
 import { SidebarInset, SidebarProvider } from "@/components/ui/sidebar";
 import { Skeleton } from "@/components/ui/skeleton";
 
@@ -54,15 +54,15 @@ export function LayoutWrapper({
             <AppSidebar />
           </Suspense>
           <SidebarInset className="min-w-0">
-            <SelectedENSNodeProvider>
+            <SelectedEnsApiProvider>
               <Header>
                 <HeaderNav>
                   <HeaderBreadcrumbs>{breadcrumbs}</HeaderBreadcrumbs>
                 </HeaderNav>
                 <HeaderActions>{actions}</HeaderActions>
               </Header>
               <RequireActiveConnection>{children}</RequireActiveConnection>
-            </SelectedENSNodeProvider>
+            </SelectedEnsApiProvider>
           </SidebarInset>
         </SidebarProvider>
       </RequireSelectedConnection>