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

.changeset/spicy-gifts-say.md

@@ -0,0 +1,9 @@
+---
+"ensadmin": patch
+---
+
+Validate name input on the Explore Names page (`/name`). The form normalizes user input before navigating and displays inline errors for unnormalizable names or names with encoded labelhashes (resolution support is in progress). Query params on the detail page are validated against `InterpretedName`.
+
+Unnormalized names and names with encoded labelhashes each show a dedicated error instead of falling through to a broken detail page.
+
+An empty `?name=` shows the form rather than the 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;