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 (
+
+ );
+}
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 (
);
}
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({
-
-
-
- {breadcrumbs}
-
- {actions}
-
+
+
+ {breadcrumbs}
+
+ {actions}
+
+ }
+ >
{children}
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) {
+ {header}
{children}
);
@@ -35,10 +40,19 @@ export function SelectedENSNodeProvider({ children }: PropsWithChildren) {
// is in an invalid format.
return (
-
- Invalid connection: "{selectedConnection.rawSelectedConnection}" (
- {selectedConnection.validatedSelectedConnection.error})
-
+ <>
+ {header}
+
+
+ >
);
}
}