feat(wallets): refresh the wallets list with an account header - #2933
Draft
CassioMG wants to merge 3 commits into
Draft
feat(wallets): refresh the wallets list with an account header#2933CassioMG wants to merge 3 commits into
CassioMG wants to merge 3 commits into
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-104e9c908bedf3f8a0de (SDF collaborators only — install instructions in the release description) |
This was referenced Aug 4, 2026
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
1 participant
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_opened— hidden on custom networks, which have no explorerRows 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.
The behaviour change worth understanding
Rename and copy used to be reachable per row via the ellipsis. They now act on the active account from the header. So renaming a non-active account means: tap it (which switches to it and returns Home), reopen Wallets, then use the pencil.
That's a deliberate product decision, not an oversight — the header always reflects the active account, which is what makes the four buttons unambiguous.
Bug found while implementing
SDS
Buttonoverwrites a caller-suppliedclassNameinstead of merging it, which silently erased all of the footer button's intended styling. Caught by checking computed styles in a real browser, not by reading the diff. Worth knowing before you passclassNameto an SDSButtonanywhere else.Analytics
Two existing events gain call sites here, both with no arguments — deliberately no
sourceproperty yet, so all such properties can land together in one follow-up analytics PR:account.public_key_copied— note this event now has two emitters (here and the QR screen in feat(account-details): refresh the account details screen #2930). Each click still emits once, so any volume increase is real behaviour, but without asourceyou can't yet tell the two surfaces apart.account.stellar_expert_opened— regains the call site that feat(account-details): refresh the account details screen #2930 removed from the QR screen.Cleanup
Removed three dead classes carried deliberately through #2929:
.detail-indentifier(typo'd, no consumer),.WalletRow__options-actions(the deleted dropdown), and.Wallets__fail(rendered but defined in no stylesheet). Also dropped twoawaits on plaincreateSliceactions in the callback being rewritten, and added the missing Reactkeyto the account.map().Merge order — please read
views/Wallets/styles.scss; this one deletes the largest region of it. This PR does not touch.RenameWalletWrapperor.AddWalletWrapper— verified.extension/e2e-tests/loadAccount.test.tsis touched by three PRs in this batch, in different regions: this one rewrites the rename navigation (39+/11−), feat(wallets): refresh the rename wallet modal #2931 changes the button label"Save"→"Set name", and the add-wallet PR updates the literal copy"Create new wallet"→"Create a new wallet". Likely to auto-merge, but worth a deliberate look rather than trusting it.Not implemented, flagged
The design spec shows a gradient fade where the list scrolls under the footer. That needs the footer to overlap the scrollable region, which the shared
View.Contentlayout doesn't support without modifying that shared component — outside this PR's scope.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