refactor(packages): move ensnode-react into namehash-ui

.changeset/config.json

@@ -18,7 +18,6 @@
       "@ensnode/datasources",
       "@ensnode/ensrainbow-sdk",
       "@ensnode/ensdb-sdk",
-      "@ensnode/ensnode-react",
       "@ensnode/ensnode-sdk",
       "@ensnode/integration-test-env",
       "@ensnode/ponder-sdk",

.changeset/upset-kids-drop.md

@@ -0,0 +1,13 @@
+---
+"@namehash/namehash-ui": major
+"ensadmin": patch
+---
+
+Eliminate the `@ensnode/ensnode-react` package; its provider, context, hooks, and query utilities are now exported from `@namehash/namehash-ui`.
+
+## How to migrate
+
+- Replace `@ensnode/ensnode-react` imports with `@namehash/namehash-ui`
+- Import `QueryClient` from `@tanstack/react-query`
+- Import `ResolverRecordsSelection` from `@ensnode/ensnode-sdk`
+- `@tanstack/react-query` is now a peer dependency of `@namehash/namehash-ui`

.github/workflows/release.yml

@@ -102,7 +102,6 @@ jobs:
             map(select(
                  .name == "@ensnode/datasources"
               or .name == "@ensnode/ens-referrals"
-              or .name == "@ensnode/ensnode-react"
               or .name == "@ensnode/ensdb-sdk"
               or .name == "@ensnode/ensnode-sdk"
               or .name == "@ensnode/ensrainbow-sdk"

.github/workflows/release_preview.yml

@@ -298,7 +298,6 @@ jobs:
           \`\`\`bash
           # Install latest preview for this branch
           pnpm add @ensnode/datasources@${{ needs.validate-and-prepare.outputs.dist-tag }}
-          pnpm add @ensnode/ensnode-react@${{ needs.validate-and-prepare.outputs.dist-tag }}
           pnpm add @ensnode/ensrainbow-sdk@${{ needs.validate-and-prepare.outputs.dist-tag }}
           pnpm add @ensnode/ensdb-sdk@${{ needs.validate-and-prepare.outputs.dist-tag }}
           pnpm add @ensnode/ensnode-sdk@${{ needs.validate-and-prepare.outputs.dist-tag }}

AGENTS.md

@@ -11,7 +11,6 @@ ENSNode is a multichain ENS indexer monorepo. It indexes ENS names across multip
 - `apps/fallback-ensapi` — AWS Lambda fallback that proxies ENS Subgraph requests when ENSApi is unhealthy
 - `packages/ensdb-sdk` — SDK for interacting with data in ENSDb
 - `packages/ensnode-sdk` — SDK for interacting with ENSNode
-- `packages/ensnode-react` — React hooks and providers for ENSNode API
 - `packages/ensrainbow-sdk` — SDK for interacting with ENSRainbow
 - `packages/datasources` — Catalog of chain datasources (contracts, start blocks, event filters)
 - `packages/ponder-subgraph` — Hono middleware for Subgraph-compatible GraphQL

README.md

@@ -171,10 +171,6 @@ Software Development Kit for interacting with data in ENSDb.
 
 Software Development Kit for interacting with ENSNode services and data. Includes common utilities used across ENSNode applications.
 
-### [`packages/ensnode-react`](packages/ensnode-react)
-
-React hooks and providers for the ENSNode API.
-
 ### [`packages/datasources`](packages/datasources)
 
 Convenient catalog of ENSNode-related datasources including chain, contract addresses, start blocks, and event filters.

apps/ensadmin/package.json

@@ -23,7 +23,6 @@
   },
   "dependencies": {
     "@ensnode/datasources": "workspace:*",
-    "@ensnode/ensnode-react": "workspace:*",
     "@ensnode/ensnode-sdk": "workspace:*",
     "@ensnode/scalar-react": "workspace:*",
     "enssdk": "workspace:*",

apps/ensadmin/src/app/inspect/_components/resolve-button.tsx

@@ -1,30 +1,34 @@
+import Link from "next/link";
+
 import { Button } from "@/components/ui/button";
 
 interface ResolveButtonProps {
   canResolve: boolean;
   hasChanged: boolean;
+  navigateHref: string;
   onRefetch: () => void;
-  onNavigate: () => void;
 }
 
 export function ResolveButton({
   canResolve,
   hasChanged,
+  navigateHref,
   onRefetch,
-  onNavigate,
 }: ResolveButtonProps) {
-  return (
-    <Button
-      disabled={!canResolve}
-      onClick={() => {
-        if (hasChanged) {
-          onNavigate();
-        } else {
-          onRefetch();
-        }
-      }}
-    >
-      Resolve
-    </Button>
-  );
+  // NOTE: rendered as a Link when navigating because Next.js 16 + Turbopack dev
+  // mode does not consistently re-render on `router.push` to the same pathname
+  // with only changed query params. `<Link>` does.
+  if (!canResolve) {
+    return <Button disabled>Resolve</Button>;
+  }
+
+  if (hasChanged) {
+    return (
+      <Button asChild>
+        <Link href={navigateHref}>Resolve</Link>
+      </Button>
+    );
+  }
+
+  return <Button onClick={onRefetch}>Resolve</Button>;
 }

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

@@ -1,15 +1,15 @@
 "use client";
 
-import { AddressDisplay, getChainName } from "@namehash/namehash-ui";
+import { AddressDisplay, getChainName, usePrimaryName } from "@namehash/namehash-ui";
 import type { Address, DefaultableChainId } from "enssdk";
 import { DEFAULT_EVM_CHAIN_ID } from "enssdk";
-import { useRouter, useSearchParams } from "next/navigation";
+import Link from "next/link";
+import { useSearchParams } from "next/navigation";
 import { useEffect, useMemo, useState } from "react";
 import { useDebouncedValue } from "rooks";
 import { isAddress } from "viem";
 
 import { getENSRootChainId } from "@ensnode/datasources";
-import { usePrimaryName } from "@ensnode/ensnode-react";
 import { getNamespaceSpecificValue } from "@ensnode/ensnode-sdk";
 import { makeDefaultableChainIdStringSchema } from "@ensnode/ensnode-sdk/internal";
 
@@ -38,7 +38,6 @@ const defaultableChainIdStringSchema = makeDefaultableChainIdStringSchema("chain
 // TODO: use shadcn/form, react-hook-form, and zod to make all of this nicer aross the board
 // TODO: sync form state to query params, current just defaulting is supported
 export default function ResolvePrimaryNameInspector() {
-  const router = useRouter();
   const searchParams = useSearchParams();
   const { retainCurrentRawConnectionUrlParam } = useRawConnectionUrlParam();
 
@@ -67,15 +66,15 @@ export default function ResolvePrimaryNameInspector() {
     setChainId(chainIdFromQuery);
   }, [chainIdFromQuery]);
 
-  const navigateToAddress = (addr: Address, chain: DefaultableChainId) => {
-    setAddress(addr);
-    setChainId(chain);
-    const path = `/inspect/primary-name?address=${encodeURIComponent(
-      addr,
-    )}&chainId=${encodeURIComponent(String(chain))}`;
-    const href = retainCurrentRawConnectionUrlParam(path);
-    router.push(href);
-  };
+  const buildPrimaryNameHref = (addr: Address | string, chain: DefaultableChainId) =>
+    retainCurrentRawConnectionUrlParam(
+      `/inspect/primary-name?address=${encodeURIComponent(addr)}&chainId=${encodeURIComponent(
+        String(chain),
+      )}`,
+    );
+
+  const trimmedAddress = address.trim();
+  const resolveHref = buildPrimaryNameHref(trimmedAddress as Address, chainId);
 
   const additionalChainIds = getENSIP19SupportedChainIds(namespace);
 
@@ -169,23 +168,21 @@ export default function ResolvePrimaryNameInspector() {
             {/* -mx-6 px-6 insets the scroll container against card for prettier scrolling */}
             <div className="flex flex-row overflow-x-scroll gap-2 no-scrollbar -mx-6 px-6">
               {exampleAddresses.map(({ address: exampleAddress, name }) => (
-                <Pill
-                  key={exampleAddress}
-                  onClick={() => navigateToAddress(exampleAddress, chainId)}
-                  className="font-mono"
-                >
-                  <AddressDisplay address={exampleAddress} /> ({name})
+                <Pill key={exampleAddress} asChild className="font-mono">
+                  <Link href={buildPrimaryNameHref(exampleAddress, chainId)}>
+                    <AddressDisplay address={exampleAddress} /> ({name})
+                  </Link>
                 </Pill>
               ))}
             </div>
           </div>
         </CardContent>
         <CardFooter>
           <ResolveButton
-            canResolve={isAddress(address.trim())}
-            hasChanged={address.trim() !== addressFromQuery || chainId !== chainIdFromQuery}
+            canResolve={isAddress(trimmedAddress)}
+            hasChanged={trimmedAddress !== addressFromQuery || chainId !== chainIdFromQuery}
+            navigateHref={resolveHref}
             onRefetch={refetch}
-            onNavigate={() => navigateToAddress(address.trim() as Address, chainId)}
           />
         </CardFooter>
       </Card>

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

@@ -1,13 +1,13 @@
 "use client";
 
-import { AddressDisplay } from "@namehash/namehash-ui";
+import { AddressDisplay, usePrimaryNames } from "@namehash/namehash-ui";
 import type { Address } from "enssdk";
-import { useRouter, useSearchParams } from "next/navigation";
+import Link from "next/link";
+import { useSearchParams } from "next/navigation";
 import { useEffect, useMemo, useState } from "react";
 import { useDebouncedValue } from "rooks";
 import { isAddress } from "viem";
 
-import { usePrimaryNames } from "@ensnode/ensnode-react";
 import { getNamespaceSpecificValue } from "@ensnode/ensnode-sdk";
 
 import { RenderRequestsOutput } from "@/app/inspect/_components/render-requests-output";
@@ -25,7 +25,6 @@ import { EXAMPLE_ADDRESSES } from "../_lib/example-addresses";
 // TODO: use shadcn/form, react-hook-form, and zod to make all of this nicer aross the board
 // TODO: sync form state to query params, current just defaulting is supported
 export default function ResolvePrimaryNameInspector() {
-  const router = useRouter();
   const searchParams = useSearchParams();
   const { retainCurrentRawConnectionUrlParam } = useRawConnectionUrlParam();
 
@@ -44,12 +43,13 @@ export default function ResolvePrimaryNameInspector() {
     setAddress(addressFromQuery ?? exampleAddresses[0].address);
   }, [addressFromQuery, exampleAddresses]);
 
-  const navigateToAddress = (addr: Address) => {
-    setAddress(addr);
-    const path = `/inspect/primary-names?address=${encodeURIComponent(addr)}`;
-    const href = retainCurrentRawConnectionUrlParam(path);
-    router.push(href);
-  };
+  const buildPrimaryNamesHref = (addr: Address | string) =>
+    retainCurrentRawConnectionUrlParam(
+      `/inspect/primary-names?address=${encodeURIComponent(addr)}`,
+    );
+
+  const trimmedAddress = address.trim();
+  const resolveHref = buildPrimaryNamesHref(trimmedAddress);
 
   const validAddress: Address | null =
     debouncedAddress && isAddress(debouncedAddress) ? debouncedAddress : null;
@@ -115,23 +115,21 @@ export default function ResolvePrimaryNameInspector() {
             {/* -mx-6 px-6 insets the scroll container against card for prettier scrolling */}
             <div className="flex flex-row overflow-x-scroll gap-2 no-scrollbar -mx-6 px-6">
               {exampleAddresses.map(({ address: exampleAddress, name }) => (
-                <Pill
-                  key={exampleAddress}
-                  onClick={() => navigateToAddress(exampleAddress)}
-                  className="font-mono"
-                >
-                  <AddressDisplay address={exampleAddress} /> ({name})
+                <Pill key={exampleAddress} asChild className="font-mono">
+                  <Link href={buildPrimaryNamesHref(exampleAddress)}>
+                    <AddressDisplay address={exampleAddress} /> ({name})
+                  </Link>
                 </Pill>
               ))}
             </div>
           </div>
         </CardContent>
         <CardFooter>
           <ResolveButton
-            canResolve={isAddress(address.trim())}
-            hasChanged={address.trim() !== addressFromQuery}
+            canResolve={isAddress(trimmedAddress)}
+            hasChanged={trimmedAddress !== addressFromQuery}
+            navigateHref={resolveHref}
             onRefetch={refetch}
-            onNavigate={() => navigateToAddress(address.trim() as Address)}
           />
         </CardFooter>
       </Card>

apps/ensadmin/src/app/inspect/records/page.tsx

@@ -1,12 +1,12 @@
 "use client";
 
+import { useRecords } from "@namehash/namehash-ui";
 import type { Name } from "enssdk";
 // import { User } from "lucide-react";
-// import Link from "next/link";
+import Link from "next/link";
 import { useRouter, useSearchParams } from "next/navigation";
 import { useEffect, useMemo, useState } from "react";
 
-import { useRecords } from "@ensnode/ensnode-react";
 import { getNamespaceSpecificValue } from "@ensnode/ensnode-sdk";
 
 import { RenderRequestsOutput } from "@/app/inspect/_components/render-requests-output";
@@ -50,22 +50,17 @@ export default function ResolveRecordsInspector() {
 
   const selection = DefaultRecordsSelection[namespace];
 
-  const navigateToName = (name: Name) => {
-    setInputName(name);
-    const href = retainCurrentRawConnectionUrlParam(getRecordResolutionRelativePath(name));
-    router.push(href);
-  };
+  const trimmedInputName = inputName.trim();
+  const resolveHref = trimmedInputName
+    ? retainCurrentRawConnectionUrlParam(getRecordResolutionRelativePath(trimmedInputName as Name))
+    : retainCurrentRawConnectionUrlParam("/inspect/records");
 
   const handleSubmit = (e: React.FormEvent) => {
     e.preventDefault();
-    const trimmed = inputName.trim();
-    if (trimmed === nameFromQuery) {
+    if (trimmedInputName === nameFromQuery) {
       refetch();
-    } else if (trimmed) {
-      navigateToName(trimmed);
     } else {
-      const href = retainCurrentRawConnectionUrlParam("/inspect/records");
-      router.push(href);
+      router.push(resolveHref);
     }
   };
 
@@ -136,19 +131,23 @@ export default function ResolveRecordsInspector() {
             {/* -mx-6 px-6 insets the scroll container against card for prettier scrolling */}
             <div className="flex flex-row overflow-x-scroll gap-2 no-scrollbar -mx-6 px-6">
               {exampleNames.map((name) => (
-                <Pill key={name} onClick={() => navigateToName(name)} className="font-mono">
-                  {name}
+                <Pill key={name} asChild className="font-mono">
+                  <Link
+                    href={retainCurrentRawConnectionUrlParam(getRecordResolutionRelativePath(name))}
+                  >
+                    {name}
+                  </Link>
                 </Pill>
               ))}
             </div>
           </div>
         </CardContent>
         <CardFooter>
           <ResolveButton
-            canResolve={!!inputName.trim()}
-            hasChanged={inputName.trim() !== nameFromQuery}
+            canResolve={!!trimmedInputName}
+            hasChanged={trimmedInputName !== nameFromQuery}
+            navigateHref={resolveHref}
             onRefetch={refetch}
-            onNavigate={() => navigateToName(inputName.trim())}
           />
         </CardFooter>
       </Card>

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

@@ -1,8 +1,8 @@
 "use client";
 
+import { ASSUME_IMMUTABLE_QUERY, useRecords } from "@namehash/namehash-ui";
 import type { Name } from "enssdk";
 
-import { ASSUME_IMMUTABLE_QUERY, useRecords } from "@ensnode/ensnode-react";
 import type { ResolverRecordsSelection } from "@ensnode/ensnode-sdk";
 
 import { Card, CardContent } from "@/components/ui/card";

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

@@ -1,18 +1,17 @@
 "use client";
 
-import { useNow } from "@namehash/namehash-ui";
-import { secondsToMilliseconds } from "date-fns";
-import type { Duration } from "enssdk";
-import { useCallback, useMemo } from "react";
-
 import {
   createIndexingStatusQueryOptions,
   QueryParameter,
   useEnsNodeProviderOptions,
-  type useIndexingStatus,
+  useNow,
   useSwrQuery,
   WithEnsNodeProviderOptions,
-} from "@ensnode/ensnode-react";
+} from "@namehash/namehash-ui";
+import { secondsToMilliseconds } from "date-fns";
+import type { Duration } from "enssdk";
+import { useCallback, useMemo } from "react";
+
 import {
   type CrossChainIndexingStatusSnapshotOmnichain,
   createRealtimeIndexingStatusProjection,