feat(ensadmin): Apply namehash-ui package (#1524)

Co-authored-by: Jamie Barton <jamie@notrab.dev>

Author: Y3drk

.changeset/curly-heads-grab.md

@@ -0,0 +1,5 @@
+---
+"@namehash/namehash-ui": patch
+---
+
+Refines the package's setup (CSS-related & prepublish scripts) and components (interfaces).

.changeset/green-cows-find.md

@@ -0,0 +1,5 @@
+---
+"ensadmin": patch
+---
+
+Applies `@namehash/namehash-ui`'s components across the app.

apps/ensadmin/package.json

@@ -32,6 +32,7 @@
     "@graphiql/react": "0.37.1",
     "@graphiql/toolkit": "0.11.3",
     "@icons-pack/react-simple-icons": "^13.7.0",
+    "@namehash/namehash-ui": "workspace:*",
     "@ponder/utils": "catalog:",
     "@radix-ui/react-avatar": "^1.1.3",
     "@radix-ui/react-checkbox": "^1.3.3",
@@ -54,16 +55,16 @@
     "date-fns": "catalog:",
     "graphiql": "5.2.0",
     "graphql": "^16.10.0",
-    "lucide-react": "^0.548.0",
+    "lucide-react": "catalog:",
     "next": "16.0.10",
     "next-themes": "^0.4.6",
     "react": "19.2.1",
     "react-dom": "19.2.1",
     "rooks": "^8.4.0",
     "serve": "^14.2.5",
     "sonner": "^2.0.3",
-    "tailwind-merge": "^3.4.0",
-    "tailwindcss-animate": "^1.0.7",
+    "tailwind-merge": "catalog:",
+    "tailwindcss-animate": "catalog:",
     "viem": "catalog:"
   },
   "devDependencies": {
@@ -73,7 +74,7 @@
     "@types/react-dom": "19.2.3",
     "@tailwindcss/postcss": "^4.1.18",
     "postcss": "^8.5.6",
-    "tailwindcss": "^4.1.18",
+    "tailwindcss": "catalog:",
     "typescript": "^5",
     "vitest": "catalog:"
   }

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

@@ -1,6 +1,9 @@
 "use client";
 
-import { CopyButton } from "@/components/copy-button";
+import { CopyButton } from "@namehash/namehash-ui";
+import { CheckIcon, CopyIcon } from "lucide-react";
+import * as React from "react";
+
 import { useSelectedConnection } from "@/hooks/active/use-selected-connection";
 
 export default function ActionsSubgraphCompatPage() {
@@ -15,7 +18,13 @@ export default function ActionsSubgraphCompatPage() {
   return (
     <div className="flex w-full max-w-md items-center space-x-2">
       <span className="font-mono text-xs select-none text-gray-500">{url}</span>
-      <CopyButton value={url} message="URL copied to clipboard!" />
+      <CopyButton
+        value={url}
+        message="URL copied to clipboard!"
+        successIcon={<CheckIcon className="h-4 w-4" />}
+        icon={<CopyIcon className="h-4 w-4" />}
+        showToast={true}
+      />
     </div>
   );
 }

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

@@ -1,13 +1,13 @@
 "use client";
 
+import { getEnsManagerNameDetailsUrl } from "@namehash/namehash-ui";
 import { useSearchParams } from "next/navigation";
 
 import type { Name } from "@ensnode/ensnode-sdk";
 
 import { ExternalLinkWithIcon } from "@/components/link";
 import { Button } from "@/components/ui/button";
 import { useNamespace } from "@/hooks/async/use-namespace";
-import { buildExternalEnsAppProfileUrl } from "@/lib/namespace-utils";
 
 export default function ActionsNamePage() {
   const searchParams = useSearchParams();
@@ -17,8 +17,7 @@ export default function ActionsNamePage() {
 
   const { data: namespace } = useNamespace();
 
-  const ensAppProfileUrl =
-    name && namespace ? buildExternalEnsAppProfileUrl(name, namespace) : null;
+  const ensAppProfileUrl = name && namespace ? getEnsManagerNameDetailsUrl(name, namespace) : null;
 
   if (!ensAppProfileUrl) return null;
 

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

@@ -1,11 +1,11 @@
 "use client";
 
+import { NameDisplay } from "@namehash/namehash-ui";
 import { useSearchParams } from "next/navigation";
 
 import type { Name } from "@ensnode/ensnode-sdk";
 
 import BreadcrumbsGroup from "@/components/breadcrumbs/group";
-import { NameDisplay } from "@/components/identity/utils";
 import {
   BreadcrumbItem,
   BreadcrumbLink,

apps/ensadmin/src/app/globals.css

@@ -1,3 +1,4 @@
+@import "@namehash/namehash-ui/styles.css";
 @import "tailwindcss";
 @config "../../tailwind.config.ts";
 
@@ -69,72 +70,6 @@
 
     --sidebar-ring: 217.2 91.2% 59.8%;
   }
-
-  .dark {
-    --background: 222.2 84% 4.9%;
-
-    --foreground: 210 40% 98%;
-
-    --card: 222.2 84% 4.9%;
-
-    --card-foreground: 210 40% 98%;
-
-    --popover: 222.2 84% 4.9%;
-
-    --popover-foreground: 210 40% 98%;
-
-    --primary: 210 40% 98%;
-
-    --primary-foreground: 222.2 47.4% 11.2%;
-
-    --secondary: 217.2 32.6% 17.5%;
-
-    --secondary-foreground: 210 40% 98%;
-
-    --muted: 217.2 32.6% 17.5%;
-
-    --muted-foreground: 215 20.2% 65.1%;
-
-    --accent: 217.2 32.6% 17.5%;
-
-    --accent-foreground: 210 40% 98%;
-
-    --destructive: 0 62.8% 30.6%;
-
-    --destructive-foreground: 210 40% 98%;
-
-    --border: 217.2 32.6% 17.5%;
-
-    --input: 217.2 32.6% 17.5%;
-
-    --ring: 212.7 26.8% 83.9%;
-
-    --chart-1: 220 70% 50%;
-
-    --chart-2: 160 60% 45%;
-
-    --chart-3: 30 80% 55%;
-
-    --chart-4: 280 65% 60%;
-
-    --chart-5: 340 75% 55%;
-
-    --sidebar-background: 240 5.9% 10%;
-
-    --sidebar-foreground: 240 4.8% 95.9%;
-
-    --sidebar-primary: 224.3 76.3% 48%;
-
-    --sidebar-primary-foreground: 0 0% 100%;
-
-    --sidebar-accent: 240 3.7% 15.9%;
-
-    --sidebar-accent-foreground: 240 4.8% 95.9%;
-
-    --sidebar-border: 240 3.7% 15.9%;
-
-    --sidebar-ring: 217.2 91.2% 59.8%;
-  }
 }
 
 @layer base {
@@ -147,15 +82,6 @@
   }
 }
 
-@layer base {
-  * {
-    @apply border-border;
-  }
-  body {
-    @apply bg-background text-foreground;
-  }
-}
-
 @layer utilities {
   /* Hide scrollbar for Chrome, Safari, and Opera */
   .no-scrollbar::-webkit-scrollbar {

apps/ensadmin/src/app/inspect/primary-name/page.tsx

@@ -1,5 +1,6 @@
 "use client";
 
+import { getChainName } from "@namehash/namehash-ui";
 import { useSearchParams } from "next/navigation";
 import { useState } from "react";
 import { useDebouncedValue } from "rooks";
@@ -26,7 +27,6 @@ import {
   SelectTrigger,
   SelectValue,
 } from "@/components/ui/select";
-import { getChainName } from "@/lib/namespace-utils";
 
 const EXAMPLE_INPUT = [
   { address: "0x179A862703a4adfb29896552DF9e307980D19285", chainId: "1" }, // greg mainnet

apps/ensadmin/src/app/mock/display-identity/page.tsx

@@ -1,5 +1,10 @@
 "use client";
 
+import {
+  DisplayIdentity,
+  getChainName,
+  getEnsManagerAddressDetailsUrl,
+} from "@namehash/namehash-ui";
 import { useState } from "react";
 import { type Address, isAddress } from "viem";
 
@@ -22,7 +27,6 @@ import {
   uniq,
 } from "@ensnode/ensnode-sdk";
 
-import { DisplayIdentity } from "@/components/identity";
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
 import { Checkbox } from "@/components/ui/checkbox";
 import { Input } from "@/components/ui/input";
@@ -33,7 +37,6 @@ import {
   SelectTrigger,
   SelectValue,
 } from "@/components/ui/select";
-import { getChainName } from "@/lib/namespace-utils";
 
 const DEFAULT_NAMESPACE_ID: ENSNamespaceId = ENSNamespaceIds.Mainnet;
 const DEFAULT_RESOLUTION_STATUS: ResolutionStatusId = ResolutionStatusIds.Named;
@@ -315,6 +318,10 @@ export default function MockDisplayIdentityPage() {
             identity={selectedIdentity}
             namespaceId={selectedNamespaceId}
             withLink={withLink}
+            identityLinkDetails={{
+              isExternal: true,
+              link: getEnsManagerAddressDetailsUrl(selectedIdentity.address, selectedNamespaceId),
+            }}
             withTooltip={withTooltip}
             withAvatar={withAvatar}
           />

apps/ensadmin/src/app/mock/relative-time/page.tsx

@@ -1,13 +1,12 @@
 "use client";
 
+import { AbsoluteTime, InfoIcon, RelativeTime } from "@namehash/namehash-ui";
 import { CheckIcon, X as XIcon } from "lucide-react";
 import { useMemo, useState } from "react";
 
 import type { UnixTimestamp } from "@ensnode/ensnode-sdk";
 
 import mockDataJson from "@/app/mock/relative-time/data.json";
-import { AbsoluteTime, RelativeTime } from "@/components/datetime-utils";
-import { InfoIcon } from "@/components/icons/InfoIcon";
 import { Button } from "@/components/ui/button";
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
 import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
@@ -226,7 +225,9 @@ const RelativeTimePropCheck = ({
       <p className="text-sm leading-6 font-semibold text-gray-500">{checkName}</p>
       <div className={checksWrapperStyles}>
         <Tooltip>
-          <TooltipTrigger asChild>{<InfoIcon className="shrink-0" />}</TooltipTrigger>
+          <TooltipTrigger asChild>
+            {<InfoIcon className="shrink-0 text-[#9CA3AF]" />}
+          </TooltipTrigger>
           <TooltipContent
             side="top"
             className="bg-gray-50 text-sm text-black shadow-md outline-hidden max-w-[275px]"