feat(names): render KNS and INS names as design-spec cards - #332
Merged
Conversation
Replace the vertical row list on Dashboard -> Names with the 3-column card grid from Figma (file 0p1fiysKpbwjRsPp6cGCGX, node 10641-155418). KNSItem and INSItem are deleted in favour of a single NameCard, matching the design's shared `container/kns&text` component. Names.tsx was their only consumer. NameCard details: - 104x120 tile, rounded-[12px], border daintree-700 (#203c49), with the three-stop gradient from the design. - Name steps through 16/14/12/10px by length so long names still fit the 88px text box; tracking is -0.02em at every step. - Bottom-left source lockup, 31x10: Kaspa mark + wordmark for .kas, Igra lockup for .igra. - Verification badge is an opt-in prop. KNS passes asset.isVerifiedDomain, which is a real gate. INS omits it deliberately: INS exposes no verification flag, and a badge that can never be absent would assert "verified" for every INS name on a send-destination surface. The design draws one on INS; we do not build it. The leading avatar and the truncated KNS owner address are dropped, per the design. Assets are exported Figma bytes, not redrawn. The Kaspa lockup ships as two files because the combined Figma export is a padded 39x18 box that would misalign both leaves against the designed 30.8x10 slot. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
|
Note
|
| Layer / File(s) | Summary |
|---|---|
Shared name card component components/dashboard/NameCard.tsx |
Adds a button-styled card with adaptive name sizing, optional verification badge, and Kaspa or IGRA branding. |
Dashboard list integration components/dashboard/Names.tsx, components/dashboard/INSItem.tsx, components/dashboard/KNSItem.tsx |
Replaces the separate item components with NameCard, preserves KNS and INS navigation routes, and updates loading and empty states for the wrapped card layout. |
Estimated code review effort: 2 (Simple) | ~10 minutes
Merge Risk: ⚪ Minimal · up to 4b9c4
This change replaces the dashboard name list with shared KNS and INS cards while preserving existing data and navigation behavior; no actionable merge-blocking risk remains after normal checks and review.
🚥 Pre-merge checks | ✅ 4 | ❌ 1
❌ Failed checks (1 warning)
| Check name | Status | Explanation | Resolution |
|---|---|---|---|
| Docstring Coverage | Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%. Docstring coverage is scoped to functions touched by this diff. Analyzed 2 functions across 2 files. | Write docstrings for the functions missing them to satisfy the coverage threshold. |
✅ Passed checks (4 passed)
| Check name | Status | Explanation |
|---|---|---|
| Description Check | ✅ Passed | Check skipped - CodeRabbit’s high-level summary is enabled. |
| Title check | ✅ Passed | The title clearly and concisely describes the main change: rendering KNS and INS names as design-spec cards. |
| Linked Issues check | ✅ Passed | Check skipped because no linked issues were found for this pull request. |
| Out of Scope Changes check | ✅ Passed | Check skipped because no linked issues were found for this pull request. |
- Fix all pre-merge checks with AI
✨ Finishing Touches 💡 1
📝 Generate docstrings 💡
- Create stacked PR
- Commit on current branch
🧪 Generate unit tests (beta)
- Create PR with unit tests
- Commit unit tests in branch
feat/names-grid-cards
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.
Comment @coderabbitai help to get the list of available commands.
Contributor
There was a problem hiding this comment.
Pull request overview
This PR updates the Dashboard → Names view to match the 3-column card-grid design by replacing the prior row-based KNS/INS list items with a shared NameCard component and adding the required lockup/badge assets.
Changes:
- Replace the Names list layout with a flex-wrapped card grid and update loading/empty-state layout to span full width.
- Introduce
NameCardto unify KNS/INS rendering (including optional verification badge for KNS only). - Add new Kaspa lockup SVGs and a new verification badge SVG; remove the legacy
KNSItem/INSItemcomponents.
Reviewed changes
Copilot reviewed 4 out of 8 changed files in this pull request and generated 1 comment.
Show a summary per file
| File | Description |
|---|---|
| components/dashboard/Names.tsx | Switches Names to a card grid and routes KNS/INS clicks via navigate. |
| components/dashboard/NameCard.tsx | New shared card component implementing the design-spec sizing, gradient, lockups, and optional verification badge. |
| components/dashboard/KNSItem.tsx | Deleted legacy row-based KNS list item (superseded by NameCard). |
| components/dashboard/INSItem.tsx | Deleted legacy row-based INS list item (superseded by NameCard). |
| assets/images/network-logos/kaspa-lockup-text.svg | Adds new Kaspa text lockup SVG used by NameCard. |
| assets/images/network-logos/kaspa-lockup-mark.svg | Adds new Kaspa mark lockup SVG used by NameCard. |
| assets/images/badge-verified.svg | Adds new verification badge SVG used when isVerified is true. |
💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.
| key={name} | ||
| name={name} | ||
| source="igra" | ||
| onClick={() => navigate(`/ins/${name}`)} |
leobragaz
added a commit
that referenced
this pull request
Sep 3, 2026
#332 was squash-merged to main as 63dbc49, while this branch carries the same work as its own commit 4b9c4f2. Git saw two unrelated histories adding NameCard.tsx and rewriting Names.tsx, so both conflicted. Verified 63dbc49 is byte-identical to 4b9c4f2 across all eight files it touches (INSItem.tsx and KNSItem.tsx are deleted on both sides), so main carries nothing this branch lacks. Both conflicts resolved to this branch's side, which holds the later detail-screens and on-chain-verify work on top. The merged tree is identical to the pre-merge tree. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Replaces the vertical row list on Dashboard → Names with the 3-column card grid from Figma — file
0p1fiysKpbwjRsPp6cGCGX, node10641-155418.KNSItemandINSItemare deleted in favour of a singleNameCard, mirroring the design's sharedcontainer/kns&textcomponent.Names.tsxwas their only consumer.What changed
space-y-2→flex flex-wrap gap-[12px](104+12+104+12+104 = 336 in 340). Skeletons now match the card box; empty state, sentinel and spinner takew-fullso they don't inline beside cards. Infinite-scrollIntersectionObserveruntouched.rounded-[12px], borderdaintree-700(#203c49, exact design token), three-stop gradient.-0.02emat every step (−0.32/16 = −0.28/14 = −0.24/12 = −0.20/10)..kas, Igra lockup for.igra.Verification badge — deliberate divergence from the design
The badge is an opt-in prop. KNS passes
asset.isVerifiedDomain, a real gate. INS omits it.The design draws a badge on the
.igracards. We do not build it: INS exposes no verification flag, so a badge that can never be absent would assert "verified" for every INS name on a send-destination surface. INS resolution currently has no on-chain verification against the Igra registry at all. The call site carries this reasoning as a comment.KNS keeps its badge — the gate there is real.
Assets
Four exported Figma assets vendored, none redrawn:
network-logos/kaspa-lockup-mark.svg12720:51438network-logos/kaspa-lockup-text.svg12720:51442network-logos/igra-lockup.pngbadge-verified.svg12720:51311igra.svg,kaspa.svg,kasplex.svg,badge-check.svgandlink.svgare untouched.The Kaspa lockup ships as two files because the combined Figma export is a padded 39×18 box that would misalign both leaves against the designed 30.8×10 slot. The two tight exports match the design's leaf dimensions exactly and are composed with the designed offsets.
The badge asset is 14px because it carries its drop shadow as a 37.5% bleed per side (8.003 × 1.75 = 14.005); insetting 7px puts the 8px glyph back on its designed
right-10 top-10.Verification
tsc --noEmit— clean in tracked sourceeslint— no issuesprettier --check— formattednpm run build— succeeds; every leaf dimension confirmed present in the compiled CSS (10.0125px,17.7516px/6.73626pxatleft:13.05px/top:2.51px,31.4px,50.98px,88px,104px,120px, badgeright:7px/top:7pxat 14×14, plus the exact gradient)Not yet verified visually. The evidence above is compiled CSS and a successful build, not pixels. Loading the extension against a wallet holding real KNS + INS names is the outstanding QA step.
Follow-ups, not in this PR
container/kns&textcomponent in the design;KNSTextItem.tsxis unchanged andNameCardis not yet wired to it.11417-153539) is a separate change.prtriage/mirrors still import the deleted components and add twoTS2307errors tonpm run compile. Untracked and gitignored; no effect on CI or on this diff.🤖 Generated with Claude Code
Summary by CodeRabbit
New Features
Improvements