Skip to content

refactor(ensadmin): split "Connection" page into named components #1619

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

Merged
lightwalker-eth merged 5 commits into from
Feb 10, 2026
Merged

refactor(ensadmin): split "Connection" page into named components #1619

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
3840f78
Split "Connection" view into named components
tk-o Feb 9, 2026
9fe4791
Merge branch 'main' into refactor/ensadmin-connection-page
tk-o Feb 9, 2026
7baac96
Merge branch 'main' into refactor/ensadmin-connection-page
tk-o Feb 9, 2026
deb2782
Apply PR feedback
tk-o Feb 9, 2026
cd17be3
Merge remote-tracking branch 'origin/refactor/ensadmin-connection-pag…
tk-o Feb 9, 2026
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
4 changes: 2 additions & 2 deletions apps/ensadmin/src/app/connection/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import ConnectionInfo from "@/components/connection";
import DisplayConnectionDetails from "@/components/connection";

export default function ConnectionPage() {
return <ConnectionInfo />;
return <DisplayConnectionDetails />;
}
2 changes: 1 addition & 1 deletion apps/ensadmin/src/app/mock/config-info/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ import { deserializeENSApiPublicConfig, SerializedENSApiPublicConfig } from "@en
import {
ENSNodeConfigInfoView,
ENSNodeConfigInfoViewProps,
} from "@/components/connection/config-info/config-info";
} from "@/components/connection/cards/ensnode-info";
import { Button } from "@/components/ui/button";
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";

Expand Down
7 changes: 0 additions & 7 deletions apps/ensadmin/src/components/connection-line.tsx
View file
Open in desktop

This file was deleted.

32 changes: 32 additions & 0 deletions apps/ensadmin/src/components/connection/cards/connection-info.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,32 @@
import { CopyButton } from "@namehash/namehash-ui";
import { CheckIcon, CopyIcon, PlugZap } from "lucide-react";

import { useSelectedConnection } from "@/hooks/active/use-selected-connection";

import { InfoCard, InfoCardItem, InfoCardItems } from "../shared/info-card";

export function ConnectionInfo() {
const { rawSelectedConnection } = useSelectedConnection();

return (
<InfoCard name="Connection" icon={<PlugZap className="size-7" />}>
<InfoCardItems>
<InfoCardItem
label="Selected Connection"
value={
<span className="flex flex-row flex-nowrap justify-start items-center gap-0.5 text-sm/6">
{rawSelectedConnection}{" "}
<CopyButton
value={rawSelectedConnection}
className="max-sm:hidden"
successIcon={<CheckIcon className="h-4 w-4" />}
icon={<CopyIcon className="h-4 w-4" />}
showToast={true}
/>
</span>
}
/>
</InfoCardItems>
</InfoCard>
);
}
21 changes: 21 additions & 0 deletions apps/ensadmin/src/components/connection/cards/ensadmin-info.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
import packageJson from "@/../package.json" with { type: "json" };

import { InfoCard } from "@/components/connection/shared/info-card";
import { ENSAdminIcon } from "@/components/icons/ensnode-apps/ensadmin-icon";

const docsLink = new URL("https://ensnode.io/ensadmin/");

export function ENSAdminInfo() {
return (
<InfoCard
name="ENSAdmin"
icon={<ENSAdminIcon width={28} height={28} />}
version={
<p className="text-sm leading-normal font-normal text-muted-foreground">
v{packageJson.version}
</p>
}
docsLink={docsLink}
/>
);
}
124 changes: 58 additions & 66 deletions ...ts/connection/config-info/config-info.tsx → ...ponents/connection/cards/ensnode-info.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,14 +12,6 @@ import { Fragment, ReactNode } from "react";
import { useENSNodeConfig } from "@ensnode/ensnode-react";
import { type ENSApiPublicConfig, getENSRootChainId } from "@ensnode/ensnode-sdk";

import {
ConfigInfoAppCard,
ConfigInfoFeature,
ConfigInfoFeatures,
ConfigInfoItem,
ConfigInfoItems,
} from "@/components/connection/config-info/app-card";
import { ConnectionLine } from "@/components/connection-line";
import { ErrorInfo, type ErrorInfoProps } from "@/components/error-info";
import { ENSApiIcon } from "@/components/icons/ensnode-apps/ensapi-icon";
import { ENSDbIcon } from "@/components/icons/ensnode-apps/ensdb-icon";
Expand All @@ -35,6 +27,15 @@ import { Skeleton } from "@/components/ui/skeleton";
import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
import { cn } from "@/lib/utils";

import {
InfoCard,
InfoCardConnector,
InfoCardFeature,
InfoCardFeatures,
InfoCardItem,
InfoCardItems,
} from "../shared/info-card";

/**
* Reusable ENSNode card wrapper that provides consistent header and accepts children content
*/
Expand Down Expand Up @@ -68,7 +69,7 @@ function ENSNodeCardLoadingSkeleton() {
<div className={cn(cardContentStyles, "max-sm:gap-3 max-sm:p-0 gap-0")}>
{["ENSApi", "ENSDb", "ENSIndexer", "ENSRainbow"].map((app, index) => (
<Fragment key={`${app}-loading`}>
{index !== 0 && <ConnectionLine />}
{index !== 0 && <InfoCardConnector />}

<Card className="animate-pulse">
<CardHeader className="max-sm:p-3">
Expand Down Expand Up @@ -226,7 +227,7 @@ function ENSNodeConfigCardContent({
);

const healReverseAddressesFeature = (
<ConfigInfoFeature
<InfoCardFeature
label="Heal Reverse Addresses"
key="ENSIndexer Heal Reverse Addresses feature"
description={healReverseAddressesDescription}
Expand All @@ -235,7 +236,7 @@ function ENSNodeConfigCardContent({
);

const indexAdditionalRecordsFeature = (
<ConfigInfoFeature
<InfoCardFeature
label="Index Additional Resolver Records"
key="ENSIndexer Index Additional Resolver Records feature"
description={indexAdditionalRecordsDescription}
Expand All @@ -244,7 +245,7 @@ function ENSNodeConfigCardContent({
);

const replaceUnnormalizedLabelsFeature = (
<ConfigInfoFeature
<InfoCardFeature
label="Replace Unnormalized Labels"
key="ENSIndexer Replace Unnormalized Labels feature"
description={replaceUnnormalizedLabelsDescription}
Expand All @@ -253,7 +254,7 @@ function ENSNodeConfigCardContent({
);

const subgraphCompatabilityFeature = (
<ConfigInfoFeature
<InfoCardFeature
label="Subgraph Compatibility"
key="ENSIndexer Subgraph Compatibility feature"
description={subgraphCompatibilityDescription}
Expand Down Expand Up @@ -285,7 +286,7 @@ function ENSNodeConfigCardContent({
return (
<div className="relative">
{/*ENSApi*/}
<ConfigInfoAppCard
<InfoCard
name="ENSApi"
icon={<ENSApiIcon width={24} height={24} />}
version={
Expand All @@ -295,12 +296,9 @@ function ENSNodeConfigCardContent({
}
docsLink={new URL("https://ensnode.io/ensapi/")}
>
<ConfigInfoItems>
<ConfigInfoItem
label="Database"
value={<p className={cardItemValueStyles}>Postgres</p>}
/>
<ConfigInfoItem
<InfoCardItems>
<InfoCardItem label="Database" value={<p className={cardItemValueStyles}>Postgres</p>} />
<InfoCardItem
label="Database Schema"
value={
<p className={cardItemValueStyles}>{ensIndexerPublicConfig.databaseSchemaName}</p>
Expand All @@ -309,12 +307,12 @@ function ENSNodeConfigCardContent({
<p>ENSApi reads indexed data from tables within this Postgres database schema.</p>
}
/>
<ConfigInfoItem
<InfoCardItem
label="ENS Namespace"
value={<p className={cardItemValueStyles}>{ensIndexerPublicConfig.namespace}</p>}
additionalInfo={<p>The ENS namespace that ENSApi is operating in the context of.</p>}
/>
<ConfigInfoItem
<InfoCardItem
label="RPC Config"
value={
<div className="flex flex-row flex-nowrap max-sm:flex-wrap justify-start items-start gap-3 pt-1">
Expand All @@ -338,9 +336,9 @@ function ENSNodeConfigCardContent({
</p>
}
/>
</ConfigInfoItems>
<ConfigInfoFeatures activated={ensApiPublicConfig.theGraphFallback.canFallback}>
<ConfigInfoFeature
</InfoCardItems>
<InfoCardFeatures activated={ensApiPublicConfig.theGraphFallback.canFallback}>
<InfoCardFeature
label="Subgraph API Fallback"
description={
ensApiPublicConfig.theGraphFallback.canFallback ? (
Expand Down Expand Up @@ -368,13 +366,13 @@ function ENSNodeConfigCardContent({
}
icon={<History width={15} height={15} className="shrink-0" />}
/>
</ConfigInfoFeatures>
</ConfigInfoAppCard>
</InfoCardFeatures>
</InfoCard>

<ConnectionLine />
<InfoCardConnector />

{/*ENSDb*/}
<ConfigInfoAppCard
<InfoCard
name="ENSDb"
icon={<ENSDbIcon width={24} height={24} />}
version={
Expand All @@ -384,12 +382,9 @@ function ENSNodeConfigCardContent({
}
docsLink={new URL("https://ensnode.io/ensdb/")}
>
<ConfigInfoItems>
<ConfigInfoItem
label="Database"
value={<p className={cardItemValueStyles}>Postgres</p>}
/>
<ConfigInfoItem
<InfoCardItems>
<InfoCardItem label="Database" value={<p className={cardItemValueStyles}>Postgres</p>} />
<InfoCardItem
label="Database Schema"
value={
<p className={cardItemValueStyles}>{ensIndexerPublicConfig.databaseSchemaName}</p>
Expand All @@ -398,13 +393,13 @@ function ENSNodeConfigCardContent({
<p>ENSIndexer writes indexed data to tables within this Postgres database schema.</p>
}
/>
</ConfigInfoItems>
</ConfigInfoAppCard>
</InfoCardItems>
</InfoCard>

<ConnectionLine />
<InfoCardConnector />

{/*ENSIndexer*/}
<ConfigInfoAppCard
<InfoCard
name="ENSIndexer"
icon={<ENSIndexerIcon width={24} height={24} />}
version={
Expand All @@ -414,12 +409,9 @@ function ENSNodeConfigCardContent({
}
docsLink={new URL("https://ensnode.io/ensindexer/")}
>
<ConfigInfoItems>
<ConfigInfoItem
label="Database"
value={<p className={cardItemValueStyles}>Postgres</p>}
/>
<ConfigInfoItem
<InfoCardItems>
<InfoCardItem label="Database" value={<p className={cardItemValueStyles}>Postgres</p>} />
<InfoCardItem
label="Database Schema"
value={
<p className={cardItemValueStyles}>{ensIndexerPublicConfig.databaseSchemaName}</p>
Expand All @@ -428,14 +420,14 @@ function ENSNodeConfigCardContent({
<p>ENSIndexer writes indexed data to tables within this Postgres database schema.</p>
}
/>
<ConfigInfoItem
<InfoCardItem
label="ENS Namespace"
value={<p className={cardItemValueStyles}>{ensIndexerPublicConfig.namespace}</p>}
additionalInfo={
<p>The ENS namespace that ENSIndexer is operating in the context of.</p>
}
/>
<ConfigInfoItem
<InfoCardItem
label="Indexed Chains"
value={
<div className="flex flex-row flex-nowrap max-sm:flex-wrap justify-start items-start gap-3 pt-1">
Expand All @@ -455,7 +447,7 @@ function ENSNodeConfigCardContent({
</div>
}
/>
<ConfigInfoItem
<InfoCardItem
label="Node.js"
value={
<p className={cardItemValueStyles}>{ensIndexerPublicConfig.versionInfo.nodejs}</p>
Expand All @@ -472,7 +464,7 @@ function ENSNodeConfigCardContent({
</p>
}
/>
<ConfigInfoItem
<InfoCardItem
label="Ponder"
value={
<p className={cardItemValueStyles}>{ensIndexerPublicConfig.versionInfo.ponder}</p>
Expand All @@ -489,7 +481,7 @@ function ENSNodeConfigCardContent({
</p>
}
/>
<ConfigInfoItem
<InfoCardItem
label="ens-normalize.js"
value={
<p className={cardItemValueStyles}>
Expand All @@ -508,7 +500,7 @@ function ENSNodeConfigCardContent({
</p>
}
/>
<ConfigInfoItem
<InfoCardItem
label="Plugins"
value={
<div className="w-full flex flex-row flex-nowrap max-[1100px]:flex-wrap justify-start items-start gap-1 pt-1">
Expand All @@ -523,19 +515,19 @@ function ENSNodeConfigCardContent({
</div>
}
/>
</ConfigInfoItems>
<ConfigInfoFeatures activated={true}>
</InfoCardItems>
<InfoCardFeatures activated={true}>
{ensIndexerFeatures
.filter((feature) => feature.isActivated)
.map((feature) => feature.feature)}
</ConfigInfoFeatures>
<ConfigInfoFeatures activated={false}>
</InfoCardFeatures>
<InfoCardFeatures activated={false}>
{ensIndexerFeatures
.filter((feature) => !feature.isActivated)
.map((feature) => feature.feature)}
</ConfigInfoFeatures>
<ConfigInfoItems>
<ConfigInfoItem
</InfoCardFeatures>
<InfoCardItems>
<InfoCardItem
label="Client LabelSet"
value={
<ul className={cardItemValueStyles}>
Expand All @@ -558,13 +550,13 @@ function ENSNodeConfigCardContent({
</p>
}
/>
</ConfigInfoItems>
</ConfigInfoAppCard>
</InfoCardItems>
</InfoCard>

<ConnectionLine />
<InfoCardConnector />

{/*ENSRainbow*/}
<ConfigInfoAppCard
<InfoCard
name="ENSRainbow"
icon={<ENSRainbowIcon width={24} height={24} />}
version={
Expand All @@ -574,8 +566,8 @@ function ENSNodeConfigCardContent({
}
docsLink={new URL("https://ensnode.io/ensrainbow/")}
>
<ConfigInfoItems>
<ConfigInfoItem
<InfoCardItems>
<InfoCardItem
label="Server LabelSet"
value={
<p className={cardItemValueStyles}>
Expand All @@ -594,8 +586,8 @@ function ENSNodeConfigCardContent({
</p>
}
/>
</ConfigInfoItems>
</ConfigInfoAppCard>
</InfoCardItems>
</InfoCard>
</div>
);
}
Loading
Loading