feat(home): refresh the tokens and collectibles lists - #2937
Open
CassioMG wants to merge 11 commits into
Open
Conversation
BalanceRow is shared between the Home tokens list and the Swap destination picker's "Your tokens" section, so both surfaces pick up the new type scale, spacing, and fiat/delta styling from this single stylesheet pass. The native asset now renders "Stellar Lumens" instead of "XLM" (issued assets that happen to use the code XLM are unaffected via the existing !issuerKey guard). The negative-delta color changes from a muted gray to --sds-clr-red-09 so losses actually read as red, matching gains' green; the color is still resolved entirely through the positive/negative modifier classes composed from getPriceDeltaColor(), never hardcoded on &__delta itself. Updates the two Account.test.tsx sort-order assertions and three e2e specs (loadAccount, sendPayment) whose "XLM" text/hasText lookups on Home's BalanceRow-rendered rows no longer match now that the row reads "Stellar Lumens" - all other testid-based lookups (SwapTokenRow-XLM, account-assets-item, etc.) are unaffected since they key off the raw asset code, not the display text. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Replaces the SDS Notification + two stacked buttons with a centered badge, heading, body copy (inline "Learn more" link), and a single "Add XLM" action; Friendbot stays as a secondary action for non-mainnet. Moves NotFundedMessage out of the account View.Footer and into the Tokens pane of the MultiPaneSlider, carrying over the !hasError and !error.horizon guards verbatim so a Horizon outage still shows the Horizon notice instead of the empty state over a funded account. The "2 XLM" copy in the body text is a padded recommendation shown in the frame, not the 1 XLM protocol minimum - confirmed intentional with the project owner. New copy is hand-added to the en/pt locale files rather than run through `yarn build:extension:translations`, which is broken on master independent of this change (i18next-scanner-webpack needs `.default`; see extension/webpack.extension.js). Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
…y state Adds local collapse state to CollectionsList - a Set of collapsed collection addresses, so an empty set naturally means everything is expanded on mount (spec D5). No Redux slice, chrome.storage, or message types: this is intentionally React-local UI state that resets whenever Home unmounts. Each collection's header is now the toggle (name, count chip, chevron-up/down) and its own grid hides independently when collapsed; the Icon.Grid01 that used to sit before the collection name is removed to match the frame. Enriches the empty state with a badge, "No collectibles yet" (kept verbatim - asserted by two sites in AccountCollectibles.test.tsx), and a new "Collectibles you own will appear here." subtitle. Adds a Jest case for the collapse/expand toggle, reusing the existing "renders collectibles" mock (3 valid collections) - since that fixture isn't a single collection, the assertions check the grid count drops from 3 to 2 and back rather than a single grid's presence/absence. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Contributor
|
PR Preview build is ready: https://github.com/stellar/freighter/releases/tag/untagged-5b5607e22f5cdc404ab7 (SDF collaborators only — install instructions in the release description) |
Two fixes to the token row restyle: - Negative price deltas were switched to red, which also turned flat (zero) deltas red because getPriceDeltaColor() returns "negative" for both. Back to gray so only gains are called out with color. - The row's font weights referenced var(--font-weight-medium) / var(--font-weight-regular), which nothing defines -- not SDS, not this repo. An undefined custom property with no fallback is invalid at computed-value time, so every one of those declarations was dropped and the weights never applied. SDS exposes --sds-fw-medium (500) and --sds-fw-regular (400). Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
- The grid used repeat(auto-fill, 150px). Raising the gap to 16px in the restyle pushed two tracks to 316px, past the popup's 312px of content width (360px minus 24px padding per side), so it silently collapsed to a single column. 1fr tracks pin it at two columns and let the tiles absorb the gap instead. - The empty state sat 24px lower than the tokens tab's, because .AccountCollectibles already contributes 24px of top padding on top of the 48px here. Both now start at 48px, matching Figma, where each frame places the badge 68px below the tab strip. - Badge is 40x40 with a 17.143px glyph per frame 9569:35981, and the font weight now uses the defined --sds-fw-regular token. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
…link - The badge rendered Icon.Link04, a chain-link glyph. Figma specifies coins-01 (node 7270:44784); SDS ships the same glyph as Icon.Coins01. - Badge is 40x40 with a 17.143px glyph per frame 9711:3008. SDS icons carry width/height="24" attributes, so the glyph needs sizing explicitly or it renders at its intrinsic size. - "2 XLM" now reads as emphasis: primary text color, one weight step up from the body's regular 400. That needs markup inside a translated sentence, so the body uses <Trans> with a named <bold> tag, following TrustlineInfoSheet. Keys here are the English source strings, so both locale files move to the new key and the pt translation wraps its own "2 XLM". - Learn more points at the "how much XLM do I need" help article. That URL was already hardcoded in SwapAmount, so it moves to externalLinks and both call sites share it. STELLAR_DOCS_CREATE_ACCOUNT_URL stays for SubmitFail and SendTo. - Font weights use the defined --sds-fw-* tokens. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
- The count badge was 24x20, so a single digit rendered as an oval. Height now matches min-width at 24px -- the badge's natural height in frame 9569:36835 (2px padding + 18px line box + 1px border, top and bottom) -- so one digit is a circle and two or more grow into a pill. - Adds the design's 1px border. Figma's --default/border/primary (#e2e2e2) is --sds-clr-gray-06, so this tracks the theme instead of a literal hex. SDS sets box-sizing: border-box under .sds-theme-*, so the border sits inside the 24px. - Chevron drops to 12px (frame 9569:36836) and takes the collection title's gray-12. Scoped to the svg rather than the row so the badge keeps its own color without relying on override order. - Starts the token list 12px lower so both tabs open with their first row 24px below the pane, matching .AccountCollectibles's top padding. The first BalanceRow already contributes the other 12px. Corrects a comment in AccountAssets that claimed the list's top padding came from .multi-pane-slider__pane; that pane sets no vertical padding, which is why the two lists were misaligned. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Trims the explanatory comments this branch added, keeping the non-obvious reasoning and dropping restatements of what the code already says. Comment lines added over master go from 71 to ~35. Notably: - The 9-line preamble in AccountAssets/styles.scss becomes 3, and now points at where the spacing actually lives rather than describing what isn't there. - Two step-narrating comments in the collapse/expand test are gone; the one recording "expanded on mount" as a spec requirement stays, since that isn't inferable from the assertion. No behaviour change. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Contributor
There was a problem hiding this comment.
Pull request overview
Refreshes Home token and collectible lists to match the updated design.
Changes:
- Restyles token rows and displays XLM as “Stellar Lumens.”
- Rebuilds unfunded and collectible empty states.
- Adds collapsible collectible collections with test coverage.
Reviewed changes
Copilot reviewed 17 out of 17 changed files in this pull request and generated 3 comments.
Show a summary per file
| File | Description |
|---|---|
views/Account/styles.scss |
Adds token-list spacing. |
views/Account/index.tsx |
Moves unfunded state into Tokens pane. |
views/__tests__/Account.test.tsx |
Updates XLM display assertions. |
locales/pt/translation.json |
Adds Portuguese empty-state strings. |
locales/en/translation.json |
Adds English empty-state strings. |
constants/externalLinks.ts |
Centralizes XLM reserve help URL. |
components/swap/SwapAmount/index.tsx |
Uses centralized help URL. |
components/BalanceRow/styles.scss |
Restyles token rows. |
components/BalanceRow/index.tsx |
Adds native-token display name. |
components/account/NotFundedMessage/styles.scss |
Styles the new unfunded state. |
components/account/NotFundedMessage/index.tsx |
Rebuilds unfunded-state content. |
components/account/AccountCollectibles/styles.scss |
Styles collection toggles and empty state. |
components/account/AccountCollectibles/index.tsx |
Adds collapsible collections. |
components/account/AccountAssets/styles.scss |
Documents row-spacing ownership. |
components/__tests__/AccountCollectibles.test.tsx |
Tests collection collapsing. |
e2e-tests/sendPayment.test.ts |
Updates native-token selectors. |
e2e-tests/loadAccount.test.ts |
Updates native-token assertions. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
- BalanceRow rendered "Stellar Lumens" as a bare literal, bypassing the
browser locale. The key already exists in both locale files and
InternalTransaction/TokenList already uses t("Stellar Lumens"), so this
was an unintended gap rather than a deliberate exception.
- The collection header was a plain div with only onClick, so keyboard users
could not collapse a collection and assistive tech got no button semantics
or expanded state. It's a real <button type="button"> now with
aria-expanded, plus the CSS resets to keep it rendering identically.
aria-expanded is the first use in the popup; nothing here previously exposed
disclosure state, and the jsx-a11y plugin is registered with none of its rules
enabled, which is why lint never flagged it. Scoped to the one control this
branch introduces rather than sweeping the ~116 files that use onClick.
Skipped the suggested keyboard-activation test: Enter/Space on a real button
is browser behaviour that jsdom's fireEvent does not synthesise into a click,
so the test would assert the mock. Asserted aria-expanded through the toggle
cycle instead.
Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Contributor
Author
Code reviewNo issues found. Checked for bugs and CLAUDE.md compliance. 🤖 Generated with Claude Code |
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.
Part of the Home refresh project. This is the Home screen's list bodies; the chrome around them is #2936.
What changed
Per Figma frames
9567-17044,9569-38124,9569-37947,9569-38140,9569-38070,9569-38131,9569-38147:View.Footerinto the Tokens pane, rebuilt as a centred badge + heading + body + "Add XLM".home-lists-720p.mov
Verification
yarn test:ci— 1521/1572, exactly baseline +1 (the new collapse/expand test)yarn build:extension— cleantsc --noEmitandeslint --max-warnings 0— cleanloadAccount9✓/2 skipped,swap12✓,sendPayment37✓/1 skipped,hideCollectible3✓,addCollectible1✓AccountCollectibles.test.tsxgained a collapse/expand case (fireEventadded to its imports)🤖 Generated with Claude Code