From 9493bf358b02d7a869d99e4ea840dc184e857138 Mon Sep 17 00:00:00 2001
From: Tomasz Kopacki <tomasz@kopacki.net>
Date: Tue, 10 Feb 2026 17:18:45 +0100
Subject: [PATCH] Attempt to streamline UI for various error cases

Includes 1) connecting with invalid URL; 2) connecting to unavailable host; 3) fetching invalid data from host.
---
 .../connections/connection-error.tsx          | 10 ++++++++
 .../connections/require-active-connection.tsx |  5 +++-
 .../src/components/layout-wrapper.tsx         | 17 +++++++------
 .../providers/selected-ensnode-provider.tsx   | 24 +++++++++++++++----
 4 files changed, 43 insertions(+), 13 deletions(-)
 create mode 100644 apps/ensadmin/src/components/connections/connection-error.tsx

diff --git a/apps/ensadmin/src/components/connections/connection-error.tsx b/apps/ensadmin/src/components/connections/connection-error.tsx
new file mode 100644
index 000000000..47db441e3
--- /dev/null
+++ b/apps/ensadmin/src/components/connections/connection-error.tsx
@@ -0,0 +1,10 @@
+import { ErrorInfo } from "@/components/error-info";
+
+export function ENSNodeConnectionError({ error }: { error: Error }) {
+  return (
+    <ErrorInfo
+      title="Unable to connect to ENSNode"
+      description={`Please check your connection settings and try again. Error: ${error.message}`}
+    />
+  );
+}
diff --git a/apps/ensadmin/src/components/connections/require-active-connection.tsx b/apps/ensadmin/src/components/connections/require-active-connection.tsx
index e3d921cc9..ddfb0e625 100644
--- a/apps/ensadmin/src/components/connections/require-active-connection.tsx
+++ b/apps/ensadmin/src/components/connections/require-active-connection.tsx
@@ -4,6 +4,7 @@ import type { PropsWithChildren } from "react";
 
 import { useENSNodeConfig } from "@ensnode/ensnode-react";
 
+import { ENSNodeConnectionError } from "@/components/connections/connection-error";
 import { ErrorInfo } from "@/components/error-info";
 import { LoadingSpinner } from "@/components/loading-spinner";
 
@@ -18,7 +19,9 @@ export function RequireActiveConnection({ children }: PropsWithChildren) {
   if (status === "error") {
     return (
       <section className="p-6">
-        <ErrorInfo title="Unable to parse ENSNode Config" description={error.message} />
+        <ENSNodeConnectionError
+          error={new Error(`Unable to parse ENSNode Config: ${error?.message}`)}
+        />
       </section>
     );
   }
diff --git a/apps/ensadmin/src/components/layout-wrapper.tsx b/apps/ensadmin/src/components/layout-wrapper.tsx
index d9c910753..a2fd32eb2 100644
--- a/apps/ensadmin/src/components/layout-wrapper.tsx
+++ b/apps/ensadmin/src/components/layout-wrapper.tsx
@@ -54,13 +54,16 @@ export function LayoutWrapper({
             <AppSidebar />
           </Suspense>
           <SidebarInset className="min-w-0">
-            <SelectedENSNodeProvider>
-              <Header>
-                <HeaderNav>
-                  <HeaderBreadcrumbs>{breadcrumbs}</HeaderBreadcrumbs>
-                </HeaderNav>
-                <HeaderActions>{actions}</HeaderActions>
-              </Header>
+            <SelectedENSNodeProvider
+              header={
+                <Header>
+                  <HeaderNav>
+                    <HeaderBreadcrumbs>{breadcrumbs}</HeaderBreadcrumbs>
+                  </HeaderNav>
+                  <HeaderActions>{actions}</HeaderActions>
+                </Header>
+              }
+            >
               <RequireActiveConnection>{children}</RequireActiveConnection>
             </SelectedENSNodeProvider>
           </SidebarInset>
diff --git a/apps/ensadmin/src/components/providers/selected-ensnode-provider.tsx b/apps/ensadmin/src/components/providers/selected-ensnode-provider.tsx
index dff46ac85..0c30ebee6 100644
--- a/apps/ensadmin/src/components/providers/selected-ensnode-provider.tsx
+++ b/apps/ensadmin/src/components/providers/selected-ensnode-provider.tsx
@@ -4,6 +4,7 @@ import type { PropsWithChildren } from "react";
 
 import { ENSNodeProvider } from "@ensnode/ensnode-react";
 
+import { ENSNodeConnectionError } from "@/components/connections/connection-error";
 import { useSelectedConnection } from "@/hooks/active/use-selected-connection";
 
 /**
@@ -17,7 +18,10 @@ import { useSelectedConnection } from "@/hooks/active/use-selected-connection";
  *
  * @param children - React children to render within the provider context
  */
-export function SelectedENSNodeProvider({ children }: PropsWithChildren) {
+export function SelectedENSNodeProvider({
+  header,
+  children,
+}: PropsWithChildren<{ header: React.ReactNode }>) {
   const selectedConnection = useSelectedConnection();
 
   if (selectedConnection.validatedSelectedConnection.isValid) {
@@ -25,6 +29,7 @@ export function SelectedENSNodeProvider({ children }: PropsWithChildren) {
       <ENSNodeProvider
         config={{ client: { url: selectedConnection.validatedSelectedConnection.url } }}
       >
+        {header}
         {children}
       </ENSNodeProvider>
     );
@@ -35,10 +40,19 @@ export function SelectedENSNodeProvider({ children }: PropsWithChildren) {
     // is in an invalid format.
 
     return (
-      <div>
-        Invalid connection: "{selectedConnection.rawSelectedConnection}" (
-        {selectedConnection.validatedSelectedConnection.error})
-      </div>
+      <>
+        {header}
+
+        <section className="p-6">
+          <ENSNodeConnectionError
+            error={
+              new Error(
+                `Invalid connection: "${selectedConnection.rawSelectedConnection}" (${selectedConnection.validatedSelectedConnection.error})`,
+              )
+            }
+          />
+        </section>
+      </>
     );
   }
 }