Skip to content

Attempt to streamline UI for various error cases #1626

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
tk-o wants to merge 1 commit into
base: main
Choose a base branch
from
Draft

Attempt to streamline UI for various error cases #1626

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 10 additions & 0 deletions apps/ensadmin/src/components/connections/connection-error.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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}`}
Comment on lines +3 to +7
Copy link

Copilot AI Feb 10, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

ENSNodeConnectionError hard-codes the title and formats the full error message into the description, which makes it awkward to reuse for non-connection failures (e.g. config parse errors). Consider accepting optional title/description overrides (or an ErrorInfoProps passthrough) so callers can keep messaging accurate while still sharing the layout.

Suggested change
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}`}
export function ENSNodeConnectionError({
error,
title,
description,
}: {
error: Error;
title?: string;
description?: string;
}) {
return (
<ErrorInfo
title={title ?? "Unable to connect to ENSNode"}
description={
description ??
`Please check your connection settings and try again. Error: ${error.message}`
}

Copilot uses AI. Check for mistakes.
/>
);
}
5 changes: 4 additions & 1 deletion apps/ensadmin/src/components/connections/require-active-connection.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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";
Copy link

Copilot AI Feb 10, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

ErrorInfo is imported but no longer used after switching to ENSNodeConnectionError; remove the unused import to keep lint/typecheck clean.

Suggested change
import { ErrorInfo } from "@/components/error-info";

Copilot uses AI. Check for mistakes.
import { LoadingSpinner } from "@/components/loading-spinner";

Expand All @@ -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}`)}
Copy link
Contributor

@vercel vercel bot Feb 10, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
error={new Error(`Unable to parse ENSNode Config: ${error?.message}`)}
error={new Error(`Unable to parse ENSNode Config: ${error.message}`)}

Using optional chaining on error field when it's guaranteed to be defined by React Query's type system after status check

Fix on Vercel

/>
Comment on lines +22 to +24
Copy link

Copilot AI Feb 10, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

ENSNodeConnectionError always renders the title "Unable to connect to ENSNode", but here the error being surfaced is "Unable to parse ENSNode Config". This makes the UI message inconsistent; either keep using ErrorInfo for config-parse failures or make ENSNodeConnectionError accept an overridable title/description.

Copilot uses AI. Check for mistakes.
Comment on lines +22 to +24
Copy link

Copilot AI Feb 10, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Wrapping error in new Error(...) drops the original error object (stack/cause). Consider either passing the original error through to ENSNodeConnectionError (and letting it format unknowns safely), or construct the new error with { cause: error } so debugging info is preserved.

Copilot uses AI. Check for mistakes.
</section>
);
}
Expand Down
17 changes: 10 additions & 7 deletions apps/ensadmin/src/components/layout-wrapper.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
24 changes: 19 additions & 5 deletions apps/ensadmin/src/components/providers/selected-ensnode-provider.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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";

/**
Expand All @@ -17,14 +18,18 @@ 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 }>) {
Comment on lines 19 to +24
Copy link

Copilot AI Feb 10, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The JSDoc for SelectedENSNodeProvider only documents children, but the component now requires a header prop as well. Update the doc comment to describe the new prop and its purpose (rendered even when the selected connection is invalid).

Copilot uses AI. Check for mistakes.
const selectedConnection = useSelectedConnection();

if (selectedConnection.validatedSelectedConnection.isValid) {
return (
<ENSNodeProvider
config={{ client: { url: selectedConnection.validatedSelectedConnection.url } }}
>
{header}
{children}
</ENSNodeProvider>
);
Expand All @@ -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>
</>
);
}
}
Loading