feat(ensadmin): Apply namehash-ui package #1524
Conversation
🦋 Changeset detectedLatest commit: aedf27d The changes in this PR will be included in the next version bump. This PR includes changesets to release 18 packages
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 |
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
…in namespace-utils)
…tions (from namespace-utils)
Greptile SummaryThis PR successfully applies the Key Changes:
Self-Review Items Validated:
Minor UI Impact: Confidence Score: 5/5
Important Files Changed
Sequence DiagramsequenceDiagram
participant EA as ENSAdmin App
participant GC as globals.css
participant UI as @namehash/namehash-ui
participant RC as RegistrarActionCard
participant ID as Identity Components
EA->>GC: Import styles
GC->>UI: @import "@namehash/namehash-ui/styles.css"
UI-->>GC: Load prefixed styles (nhui:)
Note over EA,UI: Component Migration Flow
EA->>UI: Import RegistrarActionCardMemo
EA->>UI: Import RegistrarActionCardLoading
EA->>UI: Import ResolveAndDisplayIdentity
EA->>UI: Import ChainIcon, ChainName
EA->>UI: Import CopyButton, RelativeTime
EA->>UI: Import EnsAvatar
Note over RC: Component Usage in ENSAdmin
EA->>RC: Render RegistrarActionCard
RC->>ID: ResolveAndDisplayIdentity (registrant)
RC->>ID: ResolveAndDisplayIdentity (referrer)
ID->>UI: useResolvedIdentity hook
UI-->>ID: Return resolved identity
ID->>UI: EnsAvatar component
UI-->>ID: Render avatar
ID-->>RC: Display identity with avatar
RC-->>EA: Render complete card
Note over EA,UI: Build Process
UI->>UI: postinstall: pnpm build:css
UI->>UI: prepublish: pnpm build:css && tsup
UI-->>EA: Package ready for consumption
|
lightwalker-eth
left a comment
lightwalker-eth
left a comment
There was a problem hiding this comment.
@Y3drk Hey thanks for these updates. Reviewed and shared suggestions 👍 Appreciate your advice!
apps/ensadmin/src/components/registrar-actions/display-registrar-actions-panel.tsx
Outdated
Show resolved
Hide resolved
… in connection dialog and sonner/toaster theming
There was a problem hiding this comment.
Pull request overview
This PR integrates the @namehash/namehash-ui package into the ENSAdmin application, replacing local component implementations with shared package components. The changes deduplicate code, improve maintainability, and establish a foundation for UI consistency across NameHash applications.
Changes:
- Replaced local ENSAdmin components with equivalents from
@namehash/namehash-uipackage - Refined the package's build setup with CSS processing scripts (
postinstall,prepublish,build:css) - Namespaced CSS variables with
--nhui-prefix to prevent style conflicts
Reviewed changes
Copilot reviewed 61 out of 63 changed files in this pull request and generated 7 comments.
Show a summary per file
| File | Description |
|---|---|
| packages/namehash-ui/package.json | Added CSS build scripts and postcss-cli dependency |
| packages/namehash-ui/src/styles.css | Namespaced CSS variables with --nhui- prefix |
| packages/namehash-ui/src/index.ts | Exported additional utilities and hooks |
| packages/namehash-ui/src/components/registrar-actions/RegistrarActionCard.tsx | Updated interface to make identityLinkDetails non-required and remove referrer link |
| apps/ensadmin/package.json | Added @namehash/namehash-ui dependency |
| apps/ensadmin/src/components/* | Replaced local components with package imports |
| apps/ensadmin/src/lib/namespace-utils.ts | Deleted (utilities moved to package) |
| apps/ensadmin/src/components/registrar-actions/display-registrar-actions-panel.tsx | Integrated RegistrarActionCard from package |
| apps/ensadmin/src/app/globals.css | Imported package styles and removed dark mode CSS |
Files not reviewed (1)
- pnpm-lock.yaml: Language not supported
Comments suppressed due to low confidence (2)
apps/ensadmin/src/app/globals.css:1
- Removing all dark mode CSS variables suggests dark mode support has been removed from ENSAdmin. This is a significant UX change that should be explicitly documented in the PR description or CHANGESET, as it affects user experience.
@import "@namehash/namehash-ui/styles.css";
packages/namehash-ui/src/components/datetime/RelativeTime.tsx:73
- Adding
tooltipStylesas a plain string prop is less type-safe than using React component props types. Consider usingReact.ComponentProps<typeof TooltipContent>['className']for better type safety and autocompletion.
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| interface ResolveAndDisplayReferrerIdentityProps | ||
| extends Omit<ResolveAndDisplayIdentityProps, "identity"> { | ||
| extends Omit<ResolveAndDisplayIdentityProps, "identity" | "identityLinkDetails"> { |
There was a problem hiding this comment.
The removal of identityLinkDetails from the props interface is inconsistent with the component's implementation, which hardcodes the link details at line 147-150. This reduces flexibility for consumers who may want to customize where the referrer identity links point to.
apps/ensadmin/src/components/registrar-actions/display-registrar-actions-panel.tsx
Show resolved
Hide resolved
…/feat/apply-namehash-ui-in-ensadmin
There was a problem hiding this comment.
Pull request overview
Copilot reviewed 61 out of 63 changed files in this pull request and generated 2 comments.
Files not reviewed (1)
- pnpm-lock.yaml: Language not supported
Comments suppressed due to low confidence (1)
packages/namehash-ui/src/components/identity/ResolveAndDisplayIdentity.tsx:211
- This runtime error can be prevented at compile time. Since
withLinkandidentityLinkDetailsare related, consider using TypeScript's conditional types or function overloading to enforce that whenwithLinkis true,identityLinkDetailsmust be provided. This would catch errors at build time rather than runtime.
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
apps/ensadmin/src/components/registrar-actions/display-registrar-actions-panel.tsx
Show resolved
Hide resolved
lightwalker-eth
left a comment
lightwalker-eth
left a comment
There was a problem hiding this comment.
@Y3drk Super updates! Thanks for all your craftsmanship 😄
Substantial PR → apply
namehash-uipackage in ensadminReviewer Focus (Read This First)
What reviewers should focus on
packages/namehash-ui/package.json:44-45packages/namehash-ui/src/components/registrar-actions/RegistrarActionCard.tsxinapps/ensadmin/src/components/registrar-actions/display-registrar-actions-panel.tsx:32-73→ it slightly alters the look ofhttps://admin.ensnode.io/registrar-actionsso I'd advise checking it out both in code and in the preview.Problem & Motivation
Why this exists
Phase 5of the strategy suggested in the aforementioned Issue. The second part would be doing the same in ENSAwardsWhat Changed (Concrete)
What actually changed
List the concrete behavioral or structural changes in this PR.
This should be a factual inventory, not a narrative.
Prefer numbered bullets.
If this list starts getting long, that's a signal the PR may need splitting.
namehash-uipackage and deleted unused code. (changes mostly located inapps/ensadmin/src/components)packages/namehash-ui/package.json:44-45(with the help of @notrab)packages/namehash-ui/src/styles.css)Design & Planning
How this approach was chosen
Phase 5Self-Review
packages/namehash-ui/src/components/identity/EnsAvatar.tsx:73/statusto the left (unification with all other places) inapps/ensadmin/src/components/indexing-status/block-refs.tsx:75<Toaster>(apps/ensadmin/src/components/ui/sonner.tsx) flipped. After the follow-up investigation discovered that it happened right after I upgraded the Tailwind version in ENSAdmin. Since it's very minor difference and not a breaking change, I decided to move solving it into a new PR. UPDATE → this is now solved.apps/ensadmin/src/components)Cross-Codebase Alignment
tailwindcss classes collisions,react UI component library setup→ used for brainstorming when solving CSS-related issues reported on Wednesday (01/14/26) and the Vercel build issues that surfaced later on.namekit/packages/namekit-react,docs/ensnode.io,ensawards.org→ mostly as above, also a general inspiration on how to apply the packagepackages/namehash-ui/src/components/identity/Identity.tsx:120-121)Downstream & Consumer Impact
Who this affects and how
Testing Evidence
registrar-actionsas mentioned in the summary.Scope Reductions
Risk Analysis
How this could go wrong
prebublishandpostinstallsetup scripts (of the package) will work in production in the same way as they worked in the previews (99.99% sure they will)Pre-Review Checklist (Blocking)