Protocol Trace Inspector

apps/ensadmin/next.config.ts

@@ -17,6 +17,12 @@ const nextConfig: NextConfig = {
   productionBrowserSourceMaps: true,
   async redirects() {
     return [
+      // redirect the homepage to /status
+      {
+        source: "/",
+        destination: "/status",
+        permanent: false,
+      },
       {
         // Provide backward compatibility for ENSNode services.
         // The older ones would redirect their homepage to ENSAdmin `/about`

apps/ensadmin/package.json

@@ -34,19 +34,23 @@
     "@graphiql/toolkit": "^0.11.1",
     "@ponder/utils": "catalog:",
     "@radix-ui/react-avatar": "^1.1.3",
+    "@radix-ui/react-checkbox": "^1.3.3",
     "@radix-ui/react-collapsible": "^1.1.3",
     "@radix-ui/react-dialog": "^1.1.6",
     "@radix-ui/react-dropdown-menu": "^2.1.6",
+    "@radix-ui/react-hover-card": "^1.1.15",
     "@radix-ui/react-label": "^2.1.2",
     "@radix-ui/react-select": "^2.1.6",
     "@radix-ui/react-separator": "^1.1.2",
     "@radix-ui/react-slot": "^1.1.2",
+    "@radix-ui/react-tabs": "^1.1.13",
     "@radix-ui/react-tooltip": "^1.1.8",
     "@tanstack/react-query": "^5.66.9",
     "@xyflow/react": "^12.4.4",
     "boring-avatars": "^1.11.2",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
+    "constate": "^3.3.3",
     "date-fns": "catalog:",
     "gqlpt": "0.0.0-alpha.33",
     "graphiql": "^3.8.3",
@@ -55,6 +59,7 @@
     "next-themes": "^0.4.6",
     "react": "^18",
     "react-dom": "^18",
+    "rooks": "^8.4.0",
     "sonner": "^2.0.3",
     "tailwind-merge": "^3.0.2",
     "tailwindcss-animate": "^1.0.7",

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

@@ -1,21 +1,10 @@
-import { CopyButton } from "@/components/ui/copy-button";
-import { defaultEnsNodeUrl } from "@/lib/env";
-
-type ActionProps = {
-  searchParams: Promise<{
-    [key: string]: string | string[] | undefined;
-  }>;
-};
+"use client";
 
-export default async function ActionsSubgraphCompatPage({ searchParams }: ActionProps) {
-  const { ensnode = defaultEnsNodeUrl() } = await searchParams;
-
-  const baseUrl = Array.isArray(ensnode)
-    ? ensnode[0]
-    : typeof ensnode === "string"
-      ? ensnode
-      : defaultEnsNodeUrl();
+import { CopyButton } from "@/components/ui/copy-button";
+import { useActiveENSNodeUrl } from "@/hooks/active-ensnode-url";
 
+export default function ActionsSubgraphCompatPage() {
+  const baseUrl = useActiveENSNodeUrl();
   const url = new URL(`/subgraph`, baseUrl).toString();
 
   return (

apps/ensadmin/src/app/@breadcrumbs/(apis)/api/subgraph/page.tsx

@@ -1,6 +1,6 @@
 import { BreadcrumbItem, BreadcrumbPage } from "@/components/ui/breadcrumb";
 
-export default function BreadcrumbsSubgraphCompatPage() {
+export default function Page() {
   return (
     <>
       <BreadcrumbItem>

apps/ensadmin/src/app/@breadcrumbs/(apis)/layout.tsx

@@ -1,22 +1,9 @@
-import {
-  Breadcrumb,
-  BreadcrumbItem,
-  BreadcrumbList,
-  BreadcrumbSeparator,
-} from "@/components/ui/breadcrumb";
+import BreadcrumbsGroup from "@/components/breadcrumbs/group";
 
-export default function BreadcrumbsGqlLayout({
+export default function BreadcrumbsAPIsLayout({
   children,
 }: {
   children: React.ReactNode;
 }) {
-  return (
-    <Breadcrumb>
-      <BreadcrumbList>
-        <BreadcrumbItem className="hidden md:block">APIs</BreadcrumbItem>
-        <BreadcrumbSeparator className="hidden md:block" />
-        {children}
-      </BreadcrumbList>
-    </Breadcrumb>
-  );
+  return <BreadcrumbsGroup name="APIs">{children}</BreadcrumbsGroup>;
 }

apps/ensadmin/src/app/@breadcrumbs/inspect/layout.tsx

@@ -0,0 +1,9 @@
+import BreadcrumbsGroup from "@/components/breadcrumbs/group";
+
+export default function Layout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return <BreadcrumbsGroup name="Inspect">{children}</BreadcrumbsGroup>;
+}

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

@@ -0,0 +1,9 @@
+import { BreadcrumbItem, BreadcrumbPage } from "@/components/ui/breadcrumb";
+
+export default function Page() {
+  return (
+    <BreadcrumbItem>
+      <BreadcrumbPage>Primary Name Resolution</BreadcrumbPage>
+    </BreadcrumbItem>
+  );
+}

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

@@ -0,0 +1,9 @@
+import { BreadcrumbItem, BreadcrumbPage } from "@/components/ui/breadcrumb";
+
+export default function Page() {
+  return (
+    <BreadcrumbItem>
+      <BreadcrumbPage>Records Resolution</BreadcrumbPage>
+    </BreadcrumbItem>
+  );
+}

apps/ensadmin/src/app/@breadcrumbs/inspector/page.tsx → apps/ensadmin/src/app/@breadcrumbs/inspect/visualizer/page.tsx

@@ -1,10 +1,10 @@
 import { BreadcrumbItem, BreadcrumbPage } from "@/components/ui/breadcrumb";
 
-export default function BreadcrumbsInspectorPage() {
+export default function Page() {
   return (
     <BreadcrumbItem>
       <BreadcrumbPage className="flex items-center gap-1">
-        ENS Protocol Inspector{" "}
+        Visualization Example{" "}
         <span className="hidden xl:inline relative -top-1 bg-black w-fit h-fit p-[2.8px] rounded-[2.8px] flex-shrink-0 text-white not-italic font-semibold pb-0.5 text-[6.857px] leading-[7.619px] sm:text-[8.409px] sm:leading-[9.343px] select-none">
           teaser
         </span>

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

@@ -1,6 +1,6 @@
 import { BreadcrumbItem, BreadcrumbPage } from "@/components/ui/breadcrumb";
 
-export default function BreadcrumbsStatusPage() {
+export default function Page() {
   return (
     <BreadcrumbItem>
       <BreadcrumbPage>Status</BreadcrumbPage>

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

@@ -1,7 +1,9 @@
+import { LoadingSpinner } from "@/components/loading-spinner";
+
 export default function Loading() {
   return (
     <div className="flex flex-col items-center justify-center h-screen">
-      <div className="animate-spin rounded-full h-16 w-16 border-b-2 border-gray-900"></div>
+      <LoadingSpinner className="h-16 w-16" />
     </div>
   );
 }

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

@@ -1,21 +1,10 @@
-import { SubgraphGraphiQLEditor } from "@/components/graphiql-editor";
-import { defaultEnsNodeUrl } from "@/lib/env";
-
-type PageProps = {
-  searchParams: Promise<{
-    [key: string]: string | string[] | undefined;
-  }>;
-};
+"use client";
 
-export default async function SubgraphGraphQLPage({ searchParams }: PageProps) {
-  const { ensnode = defaultEnsNodeUrl() } = await searchParams;
-
-  const baseUrl = Array.isArray(ensnode)
-    ? ensnode[0]
-    : typeof ensnode === "string"
-      ? ensnode
-      : defaultEnsNodeUrl();
+import { SubgraphGraphiQLEditor } from "@/components/graphiql-editor";
+import { useActiveENSNodeUrl } from "@/hooks/active-ensnode-url";
 
+export default function SubgraphGraphQLPage() {
+  const baseUrl = useActiveENSNodeUrl();
   const url = new URL(`/subgraph`, baseUrl).toString();
 
   return <SubgraphGraphiQLEditor url={url} />;

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

@@ -0,0 +1,49 @@
+"use client";
+
+import { Button } from "@/components/ui/button";
+import { useENSNodeConnections } from "@/hooks/ensnode-connections";
+import { useMutation } from "@tanstack/react-query";
+import Link from "next/link";
+import { redirect, useSearchParams } from "next/navigation";
+import { useEffect } from "react";
+
+const ENSNODE_PUBLIC_URL_QUERY_PARAM = "ensnode";
+
+export default function ConnectPage() {
+  const searchParams = useSearchParams();
+
+  const { addAndSelectConnection: _addAndSelectConnection } = useENSNodeConnections();
+  const addAndSelectConnection = useMutation({ mutationFn: _addAndSelectConnection });
+
+  const ensNodeUrl = searchParams.get(ENSNODE_PUBLIC_URL_QUERY_PARAM);
+  useEffect(() => {
+    // no url param provided? just go back to status
+    if (!ensNodeUrl) redirect("/status");
+
+    addAndSelectConnection.mutate(ensNodeUrl, {
+      onSuccess: () => redirect("/status"),
+    });
+  }, []);
+
+  if (addAndSelectConnection.isPending) {
+    // TODO: make this loading state prettier once ensnode addition is perceptibly async
+    return null;
+  }
+
+  if (addAndSelectConnection.isError) {
+    return (
+      <div className="flex h-full flex-col items-center justify-center gap-4">
+        <h2 className="text-center">Something went wrong while connecting to ENSNode</h2>
+        <p className="flex flex-row items-center justify-center gap-2">
+          <span>Provided URL:</span>
+          <span className="text-center font-mono bg-gray-200 py-1 px-2">{ensNodeUrl}</span>
+        </p>
+        <Link href="/">
+          <Button>Go Home</Button>
+        </Link>
+      </div>
+    );
+  }
+
+  return null;
+}