feat: ENSAdmin - indexed chains panel UI improvements #740

Y3drk · 2025-05-21T14:42:35Z

Closes #506 , which includes:

New panel title
SVG icons for each chain
Make block number a link to block explorer for the chains that allow it
Change time display from date to relative timestamp

…t from Issue #506

…nd requirement from Issue #506

…l - solves 4th requirement from Issue #506

changeset-bot · 2025-05-21T14:42:38Z

🦋 Changeset detected

Latest commit: 29a2e99

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 10 packages

Name	Type
@ensnode/datasources	Minor
ensadmin	Minor
ensindexer	Minor
ensrainbow	Minor
@ensnode/ensrainbow-sdk	Minor
@ensnode/ponder-metadata	Minor
@ensnode/ensnode-schema	Minor
@ensnode/ponder-subgraph	Minor
@ensnode/ensnode-sdk	Minor
@ensnode/shared-configs	Minor

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

vercel · 2025-05-21T14:42:55Z

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
admin.ensnode.io	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jul 10, 2025 11:09am
ensnode.io	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jul 10, 2025 11:09am
ensrainbow.io	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jul 10, 2025 11:09am

…reum SVGs

…/feat-ensadmin-indexed-chains-panel-ui-improvements

… (if chain supported)

Y3drk · 2025-05-26T10:48:52Z

For whoever may review

I am a little confused about the display of block's timestamp.

In the Latest indexed registrations panel we leverage react hooks for display, but this approach wasn't employed in the Indexed chains panel (have a look at BlockStats component)

I was unsure what the right approach here was, and continued with the "static" display for the relative timestamp.
Changing it to leverage hooks should be super easy, I am just not sure we need them.

lightwalker-eth

@Y3drk Hey great job! 🚀 Reviewed and shared some suggestions with feedback 👍

apps/ensadmin/src/components/icons/EthereumTestNetIcon.tsx

apps/ensadmin/src/components/icons/ThreeDNSChainIcon.tsx

apps/ensadmin/src/components/icons/LineaChainIcon.tsx

lightwalker-eth · 2025-05-26T14:34:14Z

apps/ensadmin/src/components/indexing-status/components.tsx

+
+  if (
+    block.timestamp <= Math.floor(Date.now() / 1000) ||
+    calculatedRelativeTime === "less than a minute ago"


Could you please investigate why both of these blocks are appearing like they have the same relative timestamp?

They have different absolute timestamps as can be confirmed by searching for these block numbers on Basescan: https://basescan.org/

@lightwalker-eth
I investigated on such Base blocks:

30742968 - index time: May-26-2025 04:01:23 PM +UTC

30742961 - index time: May-26-2025 04:01:09 PM +UTC

The time difference between them is 14s, so the fact that both of them had just now relative timestamp was in line with the code at the time.

Why? Because of how we set up the formatRelativeTime function and the formatDistanceToNow helper function inside it. In the version I used till now, it would unify all timestamps that mark time under a minute ago to less than a minute ago, which would then be caught in the component and simplified to just now.

But your conclusion that the timestamps differ and it should be visible in the panel is very much valid, hence I made some changes, and now formatRelativeTime will accept an optional argument that will be responsible for injecting an includeSeconds option into the helper function, which will in turn return a more fine-grained relative timestamp.

Summing up:

The timestamps will now be more fine-grained and will include texts such as less than X seconds ago which should make the panel more detailed and less boring (multitude of descriptions rather than just now everywhere)

The just now text will now be solely reserved for the future edge case you described in the issue.

The optional argument allows backwards compatibility so there is no need to change any code from recent-registrations component that also uses the formatRelativeTime function

Below I'll paste how the panel looks with the aforementioned changes:

lightwalker-eth · 2025-05-26T14:36:17Z

apps/ensadmin/src/components/indexing-status/components.tsx

+  if (blockExplorerAvailableChains.includes(networkName)) {
+    return (
+      <a
+        href={`https://www.blockexplorer.com/${networkName.toLowerCase().replace(" ", "")}/block/${block.number}/#overview`}


We should use the "de-facto official" chain explorer for each blockchain.

I think @tk-o may have previously written some utility function for this somewhere? Can you please coordinate with him for some advice on this? Thanks!

Spoke with @Y3drk about using the Datasource.chain getter to access selected chain configuration object defined by viem: Chain type.

Please note, the Chain value is not fully validated, i.e. it's type allows undefined block explorer.

@lightwalker-eth
Indeed, there was something similar. I got some good advice from Tomasz and applied it in the new solution that I'll describe in the comment about new chain-icon mapping strategy.

lightwalker-eth · 2025-05-26T14:59:09Z

apps/ensadmin/src/components/indexing-status/components.tsx

  network: NetworkStatusViewModel;
 }

+type chainName =


Suggest we take a different strategy for this:

We should pass chainId numbers around, rather than chain name strings. The issue with chain name strings is it creates interop problems: Is it "OP Mainnet" "Optimism" "Optimism Mainnet", etc..? But with a chain id number all can easily agree with interop.

We should have a function that takes in a chain Id number and then returns the appropriate chain name for use in our UI.

We should have a function that takes in a chain id number and then returns the appropriate icon for use in our UI.

Both of the functions described in 2 and 3 above should throw an error if they see a chain id number they don't have predefined answers for.

@lightwalker-eth

The 2nd point of your suggestion is already implemented via globalIndexingStatusViewModel function and getChainById helper function it uses, hence preventing incidents you described in 1st bullet from happening.

I've implemented the 3rd point of the suggestion with chainIcons map and getIconByChainId function.

To avoid boilerplate and limit prop drilling I've added two new fields to NetworkStatusViewModel interface, that is id:number which is chain's numerical identifier and blockExplorer an optional field that takes its structure directly from viem's Chain type.
Since these changes only add new fields (one of them even optional), I expect them to be backwards compatible.
I also updated unit tests for view-models.ts to accommodate for these changes, and the updated versions passed. I tested as thoroughly as I could to confirm that none of these changes break the app, and I am 99.99% sure of it.

These changes also simplified the display of the block's number as a link to chain's block explorer, addressing another comment on this PR.

Since these structures were designed by you, @tk-o, I'd appreciate it if you could confirm the described above changes as legit or share some suggestions on how to improve them.

lightwalker-eth · 2025-05-26T15:00:24Z

apps/ensadmin/src/components/indexing-status/components.tsx

+  | "Ethereum"
+  | "Linea Mainnet"
+  | "Sepolia"
+  | "Anvil"


Please check with Tomasz and Matt what name is appropriate to give to a local ethereum. I'm not sure it is fair to always call it "Anvil" and maybe we need a more generic term.

We can leverage viem's native configuration object for various chains. For example:

https://github.com/namehash/ensnode/blob/95119d2/apps/ensadmin/src/components/indexing-status/view-models.ts#L58

@lightwalker-eth

Since https://github.com/wevm/viem/tree/main/src/chains/definitions contain definition for Anvil and lack some obvious generic replacement for it, I stuck with the current naming convention, all while applying new chain-icon approach that you proposed in the other comment.

@tk-o
If I missed some blatantly obvious replacement let me know :)

apps/ensadmin/src/components/indexing-status/components.tsx

…uggested refinements from PR review

lightwalker-eth

@Y3drk Thanks for the updates 👍 Reviewed and shared suggestions

packages/datasources/src/index.ts

apps/ensadmin/src/components/ui/ChainName.tsx

apps/ensadmin/src/components/recent-registrations/utils.tsx

apps/ensadmin/src/components/ui/ChainIcon.tsx

apps/ensadmin/src/components/ui/ChainName.tsx

packages/datasources/src/index.ts

apps/ensadmin/src/components/ui/ChainName.tsx

…trings, move getChainName to datasources package + beginning of refactors of block exploer & relative time helper functions

…helper functions + refactor of getBlockExplorerUrl function

…Ls for supported chains.

…/feat-ensadmin-indexed-chains-panel-ui-improvements

lightwalker-eth

@Y3drk Thank you. Approved. 👍 Shared a few small suggestions. Please take the lead to merge this when ready.

apps/ensadmin/src/components/ui/ChainIcon.tsx

packages/datasources/src/index.ts

lightwalker-eth · 2025-07-09T23:29:42Z

apps/ensadmin/src/components/ui/ChainIcon.tsx

+ * Chain id standards are organized by the Ethereum Community @ https://github.com/ethereum-lists/chains
+ */
+const chainIcons = new Map<number, React.ReactNode>([
+  [mainnet.id, <EthereumIcon width={18} height={18} />],


This is a nice way to define the keys for one of these maps. Why aren't we doing the same in the other maps?

@lightwalker-eth

Perhaps I misunderstood your previous suggestions regarding these maps. Cause I assumed we didn't want the direct imports from viem used in there... Seems I was mistaken. My bad.

Will rollback chainNames and chainBlockExplorers maps to use these. That should also satisfy your request for simplification

…/datasources, minor styling adjustments, fix of formatRelativeTime function + minor docstrings changes

Y3drk added 3 commits May 21, 2025 14:41

Renaming <Indexing Stats> to <Indexed Chains> - solves 1st requiremen…

9bbdcc8

…t from Issue #506

Adding icons next to chain names in <Indexed Chains> panel - solves 2…

dfef415

…nd requirement from Issue #506

Changed indexing time to relative timestamps in <Indexed Chains> pane…

43bec4f

…l - solves 4th requirement from Issue #506

Y3drk added 2 commits May 22, 2025 13:24

fixing the build issue - removal of unrecognized property in the Ethe…

eaec0e9

…reum SVGs

linting only 1

3392a92

vercel bot deployed to Preview – ensrainbow.io May 22, 2025 11:50 View deployment

vercel bot had a problem deploying to Preview – admin.ensnode.io May 22, 2025 11:51 Failure

vercel bot deployed to Preview – ensnode.io May 22, 2025 11:52 View deployment

2nd attempt at fixing the build issue

c071382

vercel bot deployed to Preview – admin.ensnode.io May 22, 2025 12:04 View deployment

vercel bot deployed to Preview – ensrainbow.io May 22, 2025 12:04 View deployment

vercel bot deployed to Preview – ensnode.io May 22, 2025 12:05 View deployment

Y3drk added 4 commits May 26, 2025 10:02

Merge branch 'main' of https://github.com/namehash/ensnode into y3drk…

e698eb2

…/feat-ensadmin-indexed-chains-panel-ui-improvements

Make block number an external link to block details on block explorer…

be47974

… (if chain supported)

Addition of icons for OP and 3DNS

271f393

linting only 2

50f445e

vercel bot deployed to Preview – ensrainbow.io May 26, 2025 10:38 View deployment

vercel bot deployed to Preview – admin.ensnode.io May 26, 2025 10:39 View deployment

vercel bot deployed to Preview – ensnode.io May 26, 2025 10:40 View deployment

Y3drk marked this pull request as ready for review May 26, 2025 11:11

Y3drk requested a review from a team as a code owner May 26, 2025 11:11

lightwalker-eth requested changes May 26, 2025

View reviewed changes

Y3drk added 3 commits May 26, 2025 17:58

Rename icon files and remove 3DNS from the chain set - 1st batch of s…

b22c4e1

…uggested refinements from PR review

More fine-grained approach to the relative timestamps

3240f1f

linting only 3

df3744f

vercel bot deployed to Preview – ensrainbow.io May 27, 2025 09:40 View deployment

vercel bot deployed to Preview – admin.ensnode.io May 27, 2025 09:41 View deployment

vercel bot deployed to Preview – ensnode.io July 4, 2025 14:09 View deployment

vercel bot deployed to Preview – admin.ensnode.io July 4, 2025 14:11 View deployment

vercel bot deployed to Preview – ensrainbow.io July 4, 2025 14:11 View deployment

lightwalker-eth requested changes Jul 4, 2025

View reviewed changes

Y3drk added 5 commits July 8, 2025 13:31

Applying latest feedback pt.1 --> add null/error explanations in docs…

542e4fd

…trings, move getChainName to datasources package + beginning of refactors of block exploer & relative time helper functions

Applying latest feedback pt.2 --> full refactor and move of datetime …

d00f724

…helper functions + refactor of getBlockExplorerUrl function

docs(changeset): Added helper functions to generate block explorer UR…

03302d4

…Ls for supported chains.

Merge branch 'main' of https://github.com/namehash/ensnode into y3drk…

b2db9ef

…/feat-ensadmin-indexed-chains-panel-ui-improvements

linting only 11

a82e84e

vercel bot deployed to Preview – admin.ensnode.io July 9, 2025 11:55 View deployment

vercel bot deployed to Preview – ensnode.io July 9, 2025 11:55 View deployment

vercel bot deployed to Preview – ensrainbow.io July 9, 2025 11:56 View deployment

minor layout corretions in Indexed Chains panel

623dc82

vercel bot deployed to Preview – ensrainbow.io July 9, 2025 12:13 View deployment

vercel bot deployed to Preview – admin.ensnode.io July 9, 2025 12:14 View deployment

vercel bot deployed to Preview – ensnode.io July 9, 2025 12:15 View deployment

Y3drk marked this pull request as ready for review July 9, 2025 12:18

lightwalker-eth approved these changes Jul 9, 2025

View reviewed changes

Applying latest feedback -> refactor of chain-related maps in ensnode…

206f6df

…/datasources, minor styling adjustments, fix of formatRelativeTime function + minor docstrings changes

vercel bot deployed to Preview – ensnode.io July 10, 2025 09:45 View deployment

vercel bot deployed to Preview – ensrainbow.io July 10, 2025 09:46 View deployment

vercel bot deployed to Preview – admin.ensnode.io July 10, 2025 09:47 View deployment

Y3drk added 2 commits July 10, 2025 13:00

merging with main

8760a9d

linting only 12

29a2e99

vercel bot deployed to Preview – admin.ensnode.io July 10, 2025 11:08 View deployment

vercel bot deployed to Preview – ensnode.io July 10, 2025 11:09 View deployment

vercel bot deployed to Preview – ensrainbow.io July 10, 2025 11:09 View deployment

Y3drk merged commit 3c6378b into main Jul 10, 2025
7 checks passed

Y3drk deleted the y3drk/feat-ensadmin-indexed-chains-panel-ui-improvements branch July 10, 2025 11:12

github-actions bot mentioned this pull request Jul 10, 2025

Release New Version #863

Merged

feat: ENSAdmin - indexed chains panel UI improvements #740

feat: ENSAdmin - indexed chains panel UI improvements #740

Uh oh!

Conversation

Y3drk commented May 21, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

changeset-bot bot commented May 21, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🦋 Changeset detected

Uh oh!

vercel bot commented May 21, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Y3drk commented May 26, 2025

For whoever may review

Uh oh!

lightwalker-eth left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Y3drk May 27, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

lightwalker-eth left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

lightwalker-eth left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

Y3drk commented May 21, 2025 •

edited

Loading

changeset-bot bot commented May 21, 2025 •

edited

Loading

vercel bot commented May 21, 2025 •

edited

Loading

Y3drk May 27, 2025 •

edited

Loading