use namespace id and avatar url hooks

.changeset/quick-pandas-own.md

@@ -0,0 +1,5 @@
+---
+"ensadmin": minor
+---
+
+New hooks useNamespace, useEnsMetadataServiceAvatarUrl, and useENSAppProfileUrl

.vscode/settings.json

@@ -16,5 +16,8 @@
   "typescript.preferences.importModuleSpecifier": "non-relative",
   "[terraform]": {
     "editor.defaultFormatter": "hashicorp.terraform"
+  },
+  "[typescriptreact]": {
+    "editor.defaultFormatter": "biomejs.biome"
   }
 }

apps/ensadmin/src/app/@actions/api/subgraph/page.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { CopyButton } from "@/components/ui/copy-button";
-import { useActiveENSNodeUrl } from "@/hooks/active-ensnode-url";
+import { useActiveENSNodeUrl } from "@/hooks/active/use-active-ensnode-url";
 
 export default function ActionsSubgraphCompatPage() {
   const baseUrl = useActiveENSNodeUrl();

apps/ensadmin/src/app/@actions/name/[name]/page.tsx

@@ -2,24 +2,21 @@
 
 import { ExternalLinkWithIcon } from "@/components/external-link-with-icon";
 import { Button } from "@/components/ui/button";
-import { getExternalEnsAppNameUrl } from "@/lib/namespace-utils";
-import { ENSNamespaceIds } from "@ensnode/datasources";
+import { useENSAppProfileUrl } from "@/hooks/async/use-ens-app-profile-url";
 import { useParams } from "next/navigation";
 
 export default function ActionsNamePage() {
-  const params = useParams();
-  const name = decodeURIComponent(params.name as string);
+  const { name } = useParams<{ name: string }>();
 
-  // TODO: Get the namespace from the active ENSNode connection
-  // For now, defaulting to Mainnet
-  const namespaceId = ENSNamespaceIds.Mainnet;
-  const ensAppUrl = getExternalEnsAppNameUrl(name, namespaceId);
+  const { data: ensAppProfileUrl } = useENSAppProfileUrl(name);
 
-  if (!ensAppUrl) return null;
+  if (!ensAppProfileUrl) return null;
 
   return (
     <Button variant="link" size="sm" asChild>
-      <ExternalLinkWithIcon href={ensAppUrl.toString()}>View in ENS App</ExternalLinkWithIcon>
+      <ExternalLinkWithIcon href={ensAppProfileUrl.toString()}>
+        View in ENS App
+      </ExternalLinkWithIcon>
     </Button>
   );
 }

apps/ensadmin/src/app/api/subgraph/page.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { SubgraphGraphiQLEditor } from "@/components/graphiql-editor";
-import { useActiveENSNodeUrl } from "@/hooks/active-ensnode-url";
+import { useActiveENSNodeUrl } from "@/hooks/active/use-active-ensnode-url";
 
 export default function SubgraphGraphQLPage() {
   const baseUrl = useActiveENSNodeUrl();

apps/ensadmin/src/app/layout.tsx

@@ -3,8 +3,9 @@ import { Suspense } from "react";
 import "./globals.css";
 
 import { AppSidebar } from "@/components/app-sidebar";
-import { ENSNodeProvider } from "@/components/providers/ensnode-provider";
+import { ActiveENSNodeProvider } from "@/components/providers/active-ensnode-provider";
 import { QueryClientProvider } from "@/components/query-client/components";
+import { RequireActiveENSNodeConfig } from "@/components/require-active-ensnode-config";
 import { RequireActiveENSNodeConnection } from "@/components/require-active-ensnode-connection";
 import { Header, HeaderActions, HeaderBreadcrumbs, HeaderNav } from "@/components/ui/header";
 import { SidebarInset, SidebarProvider } from "@/components/ui/sidebar";
@@ -71,13 +72,15 @@ export default function Layout({
                   <AppSidebar />
                 </Suspense>
                 <SidebarInset className="min-w-0">
-                  <Header>
-                    <HeaderNav>
-                      <HeaderBreadcrumbs>{breadcrumbs}</HeaderBreadcrumbs>
-                    </HeaderNav>
-                    <HeaderActions>{actions}</HeaderActions>
-                  </Header>
-                  <ENSNodeProvider>{children}</ENSNodeProvider>
+                  <ActiveENSNodeProvider>
+                    <Header>
+                      <HeaderNav>
+                        <HeaderBreadcrumbs>{breadcrumbs}</HeaderBreadcrumbs>
+                      </HeaderNav>
+                      <HeaderActions>{actions}</HeaderActions>
+                    </Header>
+                    <RequireActiveENSNodeConfig>{children}</RequireActiveENSNodeConfig>
+                  </ActiveENSNodeProvider>
                 </SidebarInset>
               </SidebarProvider>
             </RequireActiveENSNodeConnection>

apps/ensadmin/src/app/name/[name]/NameDetailPageSkeleton.tsx

@@ -0,0 +1,53 @@
+"use client";
+
+import { Card, CardContent, CardHeader } from "@/components/ui/card";
+import { Skeleton } from "@/components/ui/skeleton";
+
+export function NameDetailPageSkeleton() {
+  return (
+    <div className="container mx-auto p-6 max-w-4xl">
+      <div className="mb-8">
+        <div className="flex items-center gap-4 mb-4">
+          <Skeleton className="h-20 w-20 rounded-full" />
+          <div className="space-y-2">
+            <Skeleton className="h-8 w-48" />
+            <div className="flex items-center gap-2">
+              <Skeleton className="h-6 w-20" />
+              <Skeleton className="h-8 w-32" />
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div className="space-y-6">
+        <Card>
+          <CardHeader>
+            <Skeleton className="h-6 w-32" />
+          </CardHeader>
+          <CardContent className="space-y-4">
+            <div>
+              <Skeleton className="h-4 w-20 mb-1" />
+              <Skeleton className="h-4 w-full" />
+            </div>
+            <div className="flex items-center gap-2">
+              <Skeleton className="h-4 w-4" />
+              <Skeleton className="h-4 w-32" />
+            </div>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <Skeleton className="h-6 w-24" />
+          </CardHeader>
+          <CardContent className="space-y-3">
+            <div className="flex items-center gap-2">
+              <Skeleton className="h-4 w-4" />
+              <Skeleton className="h-4 w-24" />
+            </div>
+          </CardContent>
+        </Card>
+      </div>
+    </div>
+  );
+}

apps/ensadmin/src/app/name/[name]/_components/ProfileHeader.tsx

@@ -4,18 +4,19 @@ import { ExternalLinkWithIcon } from "@/components/external-link-with-icon";
 import { NameDisplay } from "@/components/identity/utils";
 import { Avatar } from "@/components/ui/avatar";
 import { Card, CardContent } from "@/components/ui/card";
+import { useActiveNamespace } from "@/hooks/active/use-active-namespace";
 import { beautifyUrl } from "@/lib/beautify-url";
-import { ENSNamespaceId } from "@ensnode/datasources";
 import { Name } from "@ensnode/ensnode-sdk";
 
 interface ProfileHeaderProps {
   name: Name;
-  namespaceId: ENSNamespaceId;
   headerImage?: string | null;
   websiteUrl?: string | null;
 }
 
-export function ProfileHeader({ name, namespaceId, headerImage, websiteUrl }: ProfileHeaderProps) {
+export function ProfileHeader({ name, headerImage, websiteUrl }: ProfileHeaderProps) {
+  const namespace = useActiveNamespace();
+
   // Parse header image URI and only use it if it's HTTP/HTTPS
   // TODO: Add support for more URI types as defined in ENSIP-12
   // See: https://docs.ens.domains/ensip/12#uri-types
@@ -70,7 +71,7 @@ export function ProfileHeader({ name, namespaceId, headerImage, websiteUrl }: Pr
             <Avatar
               className="-mt-16 h-20 w-20 ring-4 ring-white"
               ensName={name}
-              namespaceId={namespaceId}
+              namespaceId={namespace}
             />
             <div className="flex-1">
               <h1>

apps/ensadmin/src/app/name/[name]/page.tsx

@@ -1,50 +1,48 @@
 "use client";
 
 import { Card, CardContent } from "@/components/ui/card";
-import { ENSNamespaceIds } from "@ensnode/datasources";
 import { useRecords } from "@ensnode/ensnode-react";
 import { ResolverRecordsSelection, getCommonCoinTypes } from "@ensnode/ensnode-sdk";
 import { useParams } from "next/navigation";
+
+import { useActiveNamespace } from "@/hooks/active/use-active-namespace";
 import { AdditionalRecords } from "./_components/AdditionalRecords";
 import { Addresses } from "./_components/Addresses";
 import { NameDetailPageSkeleton } from "./_components/NameDetailPageSkeleton";
 import { ProfileHeader } from "./_components/ProfileHeader";
 import { ProfileInformation } from "./_components/ProfileInformation";
 import { SocialLinks } from "./_components/SocialLinks";
 
-export default function NameDetailPage() {
-  const params = useParams();
-  const name = decodeURIComponent(params.name as string);
-
-  // TODO: Get the namespace from the active ENSNode connection
-  const namespaceId = ENSNamespaceIds.Mainnet;
+const HeaderPanelTextRecords = ["url", "avatar", "header"];
+const ProfilePanelTextRecords = ["description", "email"];
+const SocialLinksTextRecords = [
+  "com.twitter",
+  "com.github",
+  "com.farcaster",
+  "org.telegram",
+  "com.linkedin",
+  "com.reddit",
+];
+// TODO: Instead of explicitly listing AdditionalTextRecords, we should update
+// `useRecords` so that we can ask it to return not only all the records we
+// explicitly requested, but also any other records that were found onchain,
+// no matter what their text record keys are. Below are two examples of
+// additional text records set for lightwalker.eth on mainnet as an example.
+// see: https://github.com/namehash/ensnode/issues/1083
+const AdditionalTextRecords = ["status", "eth.ens.delegate"];
+const AllRequestedTextRecords = [
+  ...HeaderPanelTextRecords,
+  ...ProfilePanelTextRecords,
+  ...SocialLinksTextRecords,
+  ...AdditionalTextRecords,
+];
 
-  const HeaderPanelTextRecords = ["url", "avatar", "header"];
-  const ProfilePanelTextRecords = ["description", "email"];
-  const SocialLinksTextRecords = [
-    "com.twitter",
-    "com.github",
-    "com.farcaster",
-    "org.telegram",
-    "com.linkedin",
-    "com.reddit",
-  ];
-  // TODO: Instead of explicitly listing AdditionalTextRecords, we should update
-  // `useRecords` so that we can ask it to return not only all the records we
-  // explicitly requested, but also any other records that were found onchain,
-  // no matter what their text record keys are. Below are two examples of
-  // additional text records set for lightwalker.eth on mainnet as an example.
-  // see: https://github.com/namehash/ensnode/issues/1083
-  const AdditionalTextRecords = ["status", "eth.ens.delegate"];
-  const AllRequestedTextRecords = [
-    ...HeaderPanelTextRecords,
-    ...ProfilePanelTextRecords,
-    ...SocialLinksTextRecords,
-    ...AdditionalTextRecords,
-  ];
+export default function NameDetailPage() {
+  const { name } = useParams<{ name: string }>();
+  const namespace = useActiveNamespace();
 
   const selection = {
-    addresses: getCommonCoinTypes(namespaceId),
+    addresses: getCommonCoinTypes(namespace),
     texts: AllRequestedTextRecords,
   } as const satisfies ResolverRecordsSelection;
 
@@ -66,46 +64,33 @@ export default function NameDetailPage() {
 
   if (status === "pending") return <NameDetailPageSkeleton />;
 
+  if (status === "error")
+    return (
+      <Card>
+        <CardContent className="pt-6">
+          <p className="text-red-600">Failed to load profile information</p>
+        </CardContent>
+      </Card>
+    );
+
   return (
     <div className="container mx-auto p-6 max-w-4xl">
       <ProfileHeader
         name={name}
-        namespaceId={namespaceId}
         headerImage={data?.records?.texts?.header}
         websiteUrl={data?.records?.texts?.url}
       />
-
       <div className="grid gap-6">
-        {(() => {
-          switch (status) {
-            case "error": {
-              return (
-                <Card>
-                  <CardContent className="pt-6">
-                    <p className="text-red-600">Failed to load profile information</p>
-                  </CardContent>
-                </Card>
-              );
-            }
-
-            case "success": {
-              return (
-                <>
-                  <ProfileInformation
-                    description={data.records.texts.description}
-                    email={data.records.texts.email}
-                  />
+        <ProfileInformation
+          description={data.records.texts.description}
+          email={data.records.texts.email}
+        />
 
-                  <SocialLinks.Texts texts={data.records.texts} />
+        <SocialLinks.Texts texts={data.records.texts} />
 
-                  <Addresses addresses={data.records.addresses} />
+        <Addresses addresses={data.records.addresses} />
 
-                  <AdditionalRecords texts={data.records.texts} />
-                </>
-              );
-            }
-          }
-        })()}
+        <AdditionalRecords texts={data.records.texts} />
       </div>
     </div>
   );

apps/ensadmin/src/components/connections/connection-selector.tsx

@@ -32,7 +32,7 @@ import {
   SidebarMenuItem,
   useSidebar,
 } from "@/components/ui/sidebar";
-import { useActiveENSNodeUrl } from "@/hooks/active-ensnode-url";
+import { useActiveENSNodeUrl } from "@/hooks/active/use-active-ensnode-url";
 import { useENSNodeConnections } from "@/hooks/ensnode-connections";
 import { useMutation } from "@tanstack/react-query";
 import { CopyButton } from "../ui/copy-button";

apps/ensadmin/src/components/indexing-status/indexing-status.tsx

@@ -36,6 +36,7 @@ export function IndexingStatus() {
       />
     );
   }
+
   if (indexingStatusQuery.isError) {
     return <p className="p-6">Failed to fetch Indexing Status.</p>;
   }

apps/ensadmin/src/components/providers/active-ensnode-provider.tsx

@@ -0,0 +1,20 @@
+"use client";
+
+import { useActiveENSNodeUrl } from "@/hooks/active/use-active-ensnode-url";
+import { ENSNodeProvider as _ENSNodeProvider } from "@ensnode/ensnode-react";
+import { PropsWithChildren } from "react";
+
+/**
+ * Provider component that configures ENSNodeProvider with the currently active ENSNode connection URL.
+ *
+ * This component wraps the ENSNodeProvider from @ensnode/ensnode-react and automatically
+ * configures it with the URL from the currently active ENSNode connection. It serves as
+ * a bridge between the connection management system and the ENSNode React hooks.
+ *
+ * @param children - React children to render within the provider context
+ */
+export function ActiveENSNodeProvider({ children }: PropsWithChildren) {
+  const url = useActiveENSNodeUrl();
+
+  return <_ENSNodeProvider config={{ client: { url } }}>{children}</_ENSNodeProvider>;
+}