feat(wallets): refresh the add wallet sheet - #2935
Draft
CassioMG wants to merge 1 commit into
Draft
Conversation
Restyle AddWallet to match frame 9585-24653: the icon badge moves above
the title, all three icons resolve to one purple treatment via SDS
tokens (--sds-clr-lilac-03/06/11), and the header becomes "Add wallet"
with an X close instead of a back arrow. Card copy follows the frame's
wording. The hardware-wallet card is not in the Figma frame -- built
from the same template per the owner's instruction, keeping the
existing shield glyph recoloured purple, since it is the only entry
point Ledger users have.
Each card is now a single Link instead of a div wrapping an inner
anchor, so the whole card (including its padding) is clickable and the
undefined .AddWallet__row-link class is no longer rendered.
Hand-added the new/changed copy keys to the en and pt locale files
since yarn build:extension:translations is broken on master
(pre-existing, unrelated to this change).
Updated the two e2e tests that click through this sheet by literal
copy ("Create new wallet") to match the new wording ("Create a new
wallet"): allowList.test.ts and loadAccount.test.ts.
Routes (ROUTES.addAccount / importAccount / connectWallet) and
analytics (none emitted) are unchanged.
Contributor
|
PR Preview build is ready: https://github.com/stellar/freighter/releases/tag/untagged-d9cd27caab6fb7fcc425 (SDF collaborators only — install instructions in the release description) |
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 Add wallet sheet, per Figma frame
9585-24653:Xclose (was "Add another wallet" with a back arrow). TheXcloses the overlay rather than navigating, since this is an in-place sheet, not a route.About the third card
The Figma frame only contains two cards — create and import. There is no hardware-wallet card in the design. Per your instruction it was built from the same template with the existing shield glyph recoloured purple. Flagging it so it's clear the third card is intentional and not something invented: it's the only entry point Ledger users have, so dropping it would have been a real regression.
All three routes verified intact and exercised end-to-end in a live browser session, not just read:
ROUTES.addAccount,ROUTES.importAccount,ROUTES.connectWallet.Small structural improvement
Each card was an outer
<div>wrapping an inner<a>, which meant only the inner anchor was clickable — the card's padding wasn't. They're now a single<Link>carrying the card class, so the whole card is a real link. That also removes.AddWallet__row-link, one of the four orphan classes catalogued during #2929: it was rendered but defined in no stylesheet.Two e2e tests needed a copy fix
allowList.test.tsandloadAccount.test.tsboth navigate this sheet by its literal old text"Create new wallet", so the mandated copy change to"Create a new wallet"would have broken them. Both updated with a one-line text change and verified passing.Merge order
extension/e2e-tests/loadAccount.test.tsis touched by three PRs in this batch, in different regions: #2933 rewrites the rename navigation, #2931 changes"Save"→"Set name", and this one updates the card copy. Likely to auto-merge, but worth a deliberate look.This PR does not touch
views/Wallets/styles.scss— verified — so it has no stylesheet conflict with #2933 or #2931.Analytics
Unchanged. This component emits nothing;
account.createdandaccount.importedfire from the destinations these cards link to.Verification
yarn test:ci— 196/202 suites, 1520/1571 tests, identical to baseline across 3 runsyarn build:extension— cleanyarn test:e2e allowList.test.tsandloadAccount.test.ts— both pass, matching baseline🤖 Generated with Claude Code