feat(wallets): refresh the wallets list with an account header - #2933
Merged
Conversation
Restyle the Wallets screen per node 9573-23172: an active-account header block (identicon, name, address, and four action buttons for QR, copy, stellar.expert, and rename) replaces the per-row ellipsis dropdown. Each WalletRow becomes a three-column row (identicon / name+address / balance) with "Imported" shown inline beside the address. - Copy and stellar.expert buttons add call sites for the existing account.public_key_copied / account.stellar_expert_opened metrics, with no arguments (a `source` property is deferred to a follow-up PR). - The explorer button is hidden via isCustomNetwork(networkDetails), mirroring ViewPublicKey. - Tapping a row still makes that account active and navigates to Home (spec D4) - rename/copy/QR/explorer now act on the active account only. - Removes dead `.detail-indentifier`, `.WalletRow__options-actions`, and `.Wallets__fail` CSS/attribute orphans. - Hand-added new i18n keys to en/pt since build:extension:translations is broken on master (pre-existing, out of scope here).
The per-row ellipsis dropdown (and its wallet-row-options testid) is gone; rename now acts on the active account through the header pencil button. Repoints "Renames wallets" at wallets-header-edit-name, and scopes its final assertions to the header/row locators specifically since the new name now legitimately renders in two places (and this seed phrase has several accounts sharing the row list). Also updates "Loads wallets data and token prices on Mainnet in batches": address and balance are no longer a single concatenated string, so each per-account assertion now checks a row's balance cell scoped by its address rather than matching literal "address - $balance" text.
… own styles SDS Button assigns its own className internally and then spreads the rest of its props over the element, so any className passed in by a caller replaces (rather than merges with) Button/Button--tertiary/etc. instead of augmenting them. That silently dropped every rule meant for the restyled add-wallet button, leaving it transparent, gray, and sized off its unconstrained icon/text content. Wrap the Button in a plain div instead and scope the token overrides through that wrapper, targeting `.Button` and `.Button__icon` by descendant selector so they win on specificity without touching the className prop at all. Confirmed via computed-style checks that the button now resolves to the intended lilac-02/09/11 tokens at a 34px pill height, matching the design spec.
Contributor
|
PR Preview build is ready: https://github.com/stellar/freighter/releases/tag/untagged-42f8ebfa615c5c16f8e1 (SDF collaborators only — install instructions in the release description) |
This was referenced Aug 4, 2026
Corrects eight deviations from Figma frame 9573-23172: - Header name and address are now one tight block; the 16px gap applies only between the identicon, that block, and the action row. - QR icon qr-code-01 -> qr-code-02, pencil icon edit-05 -> edit-01. - The divider sits inside the 24px content gutter instead of bleeding to the window edges, and is held 16px off the list below it. - Row avatars lose their border and white fill for a flat gray circle, with the identicon inset to 16px inside the 40px avatar. - The active row's selected state drops its colored border in favor of a 16px navy badge flush to the avatar's bottom-right corner. - "Imported" is separated from the address by a bullet. - The add-wallet control keeps its tint on the icon chip alone rather than behind the whole button, at medium weight. The button's copy becomes "Add wallet", which already exists as a key (it is the AddWallet sheet's own title), so this adds no new strings and retires the now-orphaned "Add a wallet". That collision is also why the e2e click moves to the add-wallet testid: the label alone would be ambiguous once the sheet it opens is on screen. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
- The copy button now shows the same success/error toast the QR screen shows, replacing CopyText's inline "Copied!" balloon. The two surfaces do the same thing, so they should confirm it the same way. The metric moves into the handler and fires only after the clipboard write resolves, so failed copies still aren't counted. - Restores SDS's `xl` padding on the add-wallet button. Its 16px/24px text already matches the spec, so only the colors, gap and weight stay overridden; the tint remains on the icon chip alone. - Removes the wallet row's hover background. "Copied!" stays in the catalog — AccountHeader still uses it. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
`--font-weight-medium` is defined nowhere — not in this repo and not in SDS, which names it `--sds-fw-medium`. An undefined custom property makes the whole declaration invalid, and because font-weight inherits, every element referencing it silently rendered at the body's 400. Measured in a browser before the fix, the add-wallet label, the header name, the row names and the balances were all 400; the spec calls for 500 on each. Swapping the six occurrences in these two files for `--sds-fw-medium` and `--sds-fw-regular` puts them at 500/400 as the spec's Text/MD/500, Text/SM/500 and Text/SM/400 styles require. This also means the earlier "less bold" pass on the add-wallet label was not setting medium at all, only cancelling SDS's semi-bold down to regular by accident. The same undefined token is referenced from BackButton, TransactionHeading, Notification and AmountCard among others, all with the same silent fallback. Those are left alone here. Also drops the add-wallet button's left padding so its icon chip lines up with the list's avatars in the 24px gutter, and gives the content footer an even 8px above and below, scoped with :has() so no other view's footer changes. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Contributor
There was a problem hiding this comment.
Pull request overview
Refreshes the Wallets screen with an active-account header and redesigned wallet rows.
Changes:
- Adds account actions for QR, copy, explorer, and rename.
- Separates wallet balances from addresses and removes row menus.
- Updates translations, styling, and E2E assertions.
Reviewed changes
Copilot reviewed 7 out of 7 changed files in this pull request and generated 3 comments.
Show a summary per file
| File | Description |
|---|---|
Wallets/index.tsx |
Adds the account header and actions. |
Wallets/styles.scss |
Styles the refreshed layout. |
WalletRow/index.tsx |
Redesigns wallet row content and interaction. |
WalletRow/styles.scss |
Styles redesigned rows. |
locales/en/translation.json |
Updates English strings. |
locales/pt/translation.json |
Updates Portuguese strings. |
loadAccount.test.ts |
Updates wallet E2E scenarios. |
💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.
Addresses Copilot review on #2933. The explorer action was gated on `!isCustomNetwork`, which only excludes STANDALONE. Experimental mode switches the active network to Futurenet (saveExperimentalFeatures), and stellar.expert has no Futurenet explorer, so the action rendered and built an unsupported /explorer/futurenet/ URL. This is long-standing logic from #616 rather than a regression here, but #2930 removed the QR screen's copy, leaving this the only caller — so it gets fixed here. Note that switching to the shared `getStellarExpertUrl` helper alone does not fix it: the helper falls through to /public for anything that isn't testnet, so an ungated Futurenet link would render a *mainnet* lookup for a Futurenet account — wrong data, silently. The gate is what matters, so this adds `isStellarExpertSupported` beside the helper to keep the two together, with unit tests pinning the Futurenet and custom-network exclusions and documenting that fallback. WalletRow gains `role="button"` and `aria-current`, matching BalanceRow, the sibling list row. The active account was previously conveyed only by the badge on its avatar, which says nothing to a screen reader. Left alone: full keyboard focusability. No row component in this codebase (BalanceRow, ProtocolRow) sets tabIndex or key handlers, so making this one a semantic button would be inconsistent without addressing that codebase-wide. Also adds e2e coverage for the copy action, asserting the clipboard contents and the toast. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Contributor
Author
Code reviewNo issues found. Checked for bugs and CLAUDE.md compliance. 🤖 Generated with Claude Code - If this code review was useful, please react with 👍. Otherwise, react with 👎. |
piyalbasu
reviewed
Aug 12, 2026
piyalbasu
approved these changes
Aug 12, 2026
# Conflicts: # extension/src/popup/locales/en/translation.json # extension/src/popup/locales/pt/translation.json
WalletRow's redesign removed the last caller — it used this to tint the selected row's border, which the new design replaces with a fixed navy badge. The export then had no references anywhere in the repo. `no-unused-vars` cannot see it because the symbol is exported, so it would have stayed green in CI indefinitely rather than surfacing later. Only the getColorPubKey block goes. `publicKeyToBytes` and `HSVtoRGB` stay: drawIdenticon and setFillStyle still call them. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
CassioMG
added a commit
that referenced
this pull request
Aug 13, 2026
#2933 was squash-merged to master as 9a7408b, so git sees no shared history with the branch merge this PR already carried — every file that PR touched conflicted even though the content was identical. Resolved to this branch's side in all three. Verified per file that master's side was purely the pre-change state and contributed nothing new: WalletRow (spinner + $0.00 fallback), its stylesheet (balance cell min-width) and the Wallets view (error state scoped to the list, Redux key fallback) each differ from master only by this branch's additions. The getColorPubKey cleanup arrives via master's squash and is intact.
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.
What changed
The Wallets screen, per Figma frame
9573-23172:New account header block above the list, representing the active account — identicon, name, truncated address, and four circular icon buttons:
account.public_key_copiedaccount.stellar_expert_openedRows now show the account's balance in its own right-hand column, and "Imported" sits inline beside the truncated address rather than on its own third line. Previously the balance was string-concatenated into the address subtitle (
"GD6X…244L - $1,149.23").Removed: the per-row ellipsis menu and everything behind it — the dropdown, its open/close state, and the click-outside listener.
wallets-list-720p.mov
Verification
yarn test:ci— 196/202 suites, 1520/1571 tests, identical to baselineyarn build:extension— cleanyarn test:e2e loadAccount.test.ts— 9 passed / 2 skipped, matching baselineyarn test:e2e allowList.test.ts— passes with zero edits (it drivesadd-wallet)🤖 Generated with Claude Code