fix(apps/ensadmin): validate name query params on name details page

.changeset/spicy-gifts-say.md

@@ -0,0 +1,5 @@
+---
+"ensadmin": patch
+---
+
+Add input validation and normalization to the Explore Names form and name detail page. The form uses `interpretNameFromUserInput` to normalize valid inputs before navigating, and shows inline errors for invalid or unsupported names. The detail page validates query params with `isNormalizedName`/`isInterpretedName` and shows appropriate error states. Empty name params show the form instead of a broken detail page.

apps/ensadmin/src/app/name/_components/NameDetailPageContent.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import type { Name } from "enssdk";
+import type { InterpretedName } from "enssdk";
 
 import { ASSUME_IMMUTABLE_QUERY, useRecords } from "@ensnode/ensnode-react";
 import type { ResolverRecordsSelection } from "@ensnode/ensnode-sdk";
@@ -41,7 +41,7 @@ const AllRequestedTextRecords = [
 ];
 
 interface NameDetailPageContentProps {
-  name: Name;
+  name: InterpretedName;
 }
 
 export function NameDetailPageContent({ name }: NameDetailPageContentProps) {

apps/ensadmin/src/app/name/_components/NameErrors.tsx

@@ -0,0 +1,20 @@
+import { ErrorInfo } from "@/components/error-info";
+
+export function UnnormalizedNameError() {
+  return (
+    <section className="p-6">
+      <ErrorInfo title="Invalid Name" description="The provided name is not a valid ENS name." />
+    </section>
+  );
+}
+
+export function InterpretedNameUnsupportedError() {
+  return (
+    <section className="p-6">
+      <ErrorInfo
+        title="Encoded Labelhash Detected"
+        description="The provided name contains encoded labelhashes. Support for resolving names with encoded labelhashes is in progress and coming soon."
+      />
+    </section>
+  );
+}

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

@@ -1,7 +1,7 @@
 "use client";
 
 import { EnsAvatar, NameDisplay } from "@namehash/namehash-ui";
-import type { Name } from "enssdk";
+import type { InterpretedName } from "enssdk";
 
 import type { ENSNamespaceId } from "@ensnode/ensnode-sdk";
 
@@ -10,7 +10,7 @@ import { Card, CardContent } from "@/components/ui/card";
 import { beautifyUrl } from "@/lib/beautify-url";
 
 interface ProfileHeaderProps {
-  name: Name;
+  name: InterpretedName;
   namespaceId: ENSNamespaceId;
   headerImage?: string | null;
   websiteUrl?: string | null;

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

@@ -1,7 +1,15 @@
 "use client";
 
 import { NameDisplay } from "@namehash/namehash-ui";
-import type { Name } from "enssdk";
+import {
+  asInterpretedName,
+  asLiteralName,
+  type InterpretedName,
+  isInterpretedName,
+  isNormalizedName,
+  literalNameToInterpretedName,
+  type Name,
+} from "enssdk";
 import { useRouter, useSearchParams } from "next/navigation";
 import { type ChangeEvent, useMemo, useState } from "react";
 
@@ -16,8 +24,9 @@ import { useActiveEnsNodeStackInfo } from "@/hooks/active/use-active-ensnode-sta
 import { useRawConnectionUrlParam } from "@/hooks/use-connection-url-param";
 
 import { NameDetailPageContent } from "./_components/NameDetailPageContent";
+import { InterpretedNameUnsupportedError, UnnormalizedNameError } from "./_components/NameErrors";
 
-const EXAMPLE_NAMES: NamespaceSpecificValue<string[]> = {
+const EXAMPLE_NAMES: NamespaceSpecificValue<InterpretedName[]> = {
   default: [
     "vitalik.eth",
     "gregskril.eth",
@@ -31,15 +40,15 @@ const EXAMPLE_NAMES: NamespaceSpecificValue<string[]> = {
     "lens.xyz",
     "brantly.eth",
     "lightwalker.eth",
-  ],
+  ].map(asInterpretedName),
   [ENSNamespaceIds.Sepolia]: [
     "gregskril.eth",
     "vitalik.eth",
     "myens.eth",
     "recordstest.eth",
     "arrondesean.eth",
     "decode.eth",
-  ],
+  ].map(asInterpretedName),
   [ENSNamespaceIds.EnsTestEnv]: [
     "alias.eth",
     "changerole.eth",
@@ -53,14 +62,15 @@ const EXAMPLE_NAMES: NamespaceSpecificValue<string[]> = {
     "sub2.parent.eth",
     "test.eth",
     "wallet.linked.parent.eth",
-  ],
+  ].map(asInterpretedName),
 };
 
 export default function ExploreNamesPage() {
   const router = useRouter();
   const searchParams = useSearchParams();
   const nameFromQuery = searchParams.get("name");
   const [rawInputName, setRawInputName] = useState<Name>("");
+  const [formError, setFormError] = useState<string | null>(null);
 
   const { namespace } = useActiveEnsNodeStackInfo().ensIndexer;
   const exampleNames = useMemo(
@@ -72,22 +82,49 @@ export default function ExploreNamesPage() {
 
   const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
     e.preventDefault();
-
-    // TODO: Input validation and normalization.
-    // see: https://github.com/namehash/ensnode/issues/1140
-
-    const href = retainCurrentRawConnectionUrlParam(getNameDetailsRelativePath(rawInputName));
-
+    setFormError(null);
+
+    if (rawInputName.trim() === "") return;
+
+    let interpreted: InterpretedName;
+    try {
+      // Allow encoded labelhashes through; throw on unnormalizable labels.
+      interpreted = literalNameToInterpretedName(asLiteralName(rawInputName), {
+        allowEncodedLabelHashes: true,
+      });
+    } catch {
+      setFormError("The provided input is not a valid ENS name.");
+      return;
+    }
+
+    if (!isNormalizedName(interpreted)) {
+      setFormError(
+        "The provided input contains encoded labelhashes. Support for resolving names with encoded labelhashes is in progress and coming soon.",
+      );
+      return;
+    }
+
+    const href = retainCurrentRawConnectionUrlParam(getNameDetailsRelativePath(interpreted));
     router.push(href);
   };
 
   const handleRawInputNameChange = (e: ChangeEvent<HTMLInputElement>) => {
     e.preventDefault();
-
+    setFormError(null);
     setRawInputName(e.target.value);
   };
 
-  if (nameFromQuery) {
+  // Detail page: validate name from query params using only validation checks (no normalization).
+  // see: https://github.com/namehash/ensnode/issues/1140
+  if (nameFromQuery !== null && nameFromQuery !== "") {
+    if (!isInterpretedName(nameFromQuery)) {
+      return <UnnormalizedNameError />;
+    }
+
+    if (!isNormalizedName(nameFromQuery)) {
+      return <InterpretedNameUnsupportedError />;
+    }
+
     return <NameDetailPageContent name={nameFromQuery} />;
   }
 
@@ -112,12 +149,13 @@ export default function ExploreNamesPage() {
               />
               <Button
                 type="submit"
-                disabled={rawInputName.length === 0}
+                disabled={rawInputName.trim().length === 0}
                 className="max-sm:self-stretch"
               >
                 View Profile
               </Button>
             </fieldset>
+            {formError && <p className="text-sm text-red-600">{formError}</p>}
           </form>
           <div className="flex flex-col gap-2 justify-center">
             <p className="text-sm font-medium leading-none">Examples:</p>

packages/namehash-ui/src/components/identity/Name.tsx

@@ -1,5 +1,5 @@
 import type { Name } from "enssdk";
-import { beautifyName } from "enssdk";
+import { beautifyInterpretedName, isInterpretedName } from "enssdk";
 
 interface NameDisplayProps {
   name: Name;
@@ -9,10 +9,16 @@ interface NameDisplayProps {
 /**
  * Displays an ENS name in beautified form.
  *
- * @param name - The name to display in beautified form.
+ * If the provided name is not a valid InterpretedName, displays
+ * "(invalid name)" instead.
  *
+ * @param name - The name to display.
  */
 export function NameDisplay({ name, className = "nhui:font-medium" }: NameDisplayProps) {
-  const beautifiedName = beautifyName(name);
+  if (!isInterpretedName(name)) {
+    return <span className={className}>(invalid name)</span>;
+  }
+
+  const beautifiedName = beautifyInterpretedName(name);
   return <span className={className}>{beautifiedName}</span>;
 }

packages/namehash-ui/src/utils/ensManager.ts

@@ -1,4 +1,4 @@
-import type { Address, Name } from "enssdk";
+import { type Address, isNormalizedName, type Name } from "enssdk";
 
 import type { ENSNamespaceId } from "@ensnode/datasources";
 import { ENSNamespaceIds } from "@ensnode/ensnode-sdk";
@@ -28,10 +28,13 @@ export function getEnsManagerUrl(namespaceId: ENSNamespaceId): URL | null {
 /**
  * Builds the URL of the external ENS Manager App Profile page for a given name and ENS Namespace.
  *
- * @returns URL to the Profile page in the external ENS Manager App for a given name and ENS Namespace,
- * or null if this URL is not known
+ * Returns null if the name is not normalized or the namespace has no known ENS Manager App.
+ *
+ * @returns URL to the Profile page in the external ENS Manager App, or null
  */
 export function getEnsManagerNameDetailsUrl(name: Name, namespaceId: ENSNamespaceId): URL | null {
+  if (!isNormalizedName(name)) return null;
+
   const baseUrl = getEnsManagerUrl(namespaceId);
   if (!baseUrl) return null;