feat(wallets): refresh the add wallet sheet - #2935
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.
|
PR Preview build is ready: https://github.com/stellar/freighter/releases/tag/untagged-854c93a5b9be99a4cb18 (SDF collaborators only — install instructions in the release description) |
Use lilac-09 (Brand/Foreground/Primary) for the glyph instead of lilac-11, and size the svg to 16px to match the icon instance in the 24px circle. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
There was a problem hiding this comment.
Pull request overview
Refreshes the Add Wallet sheet to match the updated home design.
Changes:
- Updates wallet actions, icons, copy, and close control.
- Makes entire wallet cards clickable and refreshes styling.
- Updates translations and affected E2E selectors.
Reviewed changes
Copilot reviewed 6 out of 6 changed files in this pull request and generated 1 comment.
Show a summary per file
| File | Description |
|---|---|
extension/src/popup/locales/pt/translation.json |
Adds Portuguese copy. |
extension/src/popup/locales/en/translation.json |
Adds English copy. |
extension/src/popup/components/account/AddWallet/styles.scss |
Refreshes card styling. |
extension/src/popup/components/account/AddWallet/index.tsx |
Updates actions and sheet header. |
extension/e2e-tests/loadAccount.test.ts |
Updates action selector. |
extension/e2e-tests/allowList.test.ts |
Updates action selector. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Code reviewNo issues found. Checked for bugs and CLAUDE.md compliance. 🤖 Generated with Claude Code |
| "Create a Password": "Create a Password", | ||
| "Create a wallet": "Create a wallet", | ||
| "Create a wallet from your seed phrase.": "Create a wallet from your seed phrase.", | ||
| "Create a wallet on your seed phrase": "Create a wallet on your seed phrase", |
There was a problem hiding this comment.
This is so NIT: should this line be Create a wallet from your seed phrase? On your seed phrase sounds slightly awkward to me and it looks like we use the line Create a wallet from your seed phrase. elsewhere in the app
There was a problem hiding this comment.
@piyalbasu good point on the NIT. I copied it from mobile and also from Figma, but it I agree it does sound a little weird. I'll adjust to use "from your seed phrase" in both platforms for consistency 👍
There was a problem hiding this comment.
Also updated on Figma
Reword "Create a wallet on your seed phrase" to "from your seed phrase", and drop the unused trailing-period variant of the string that no longer had any callers. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Matches the term already used by every other recovery phrase string in the pt locale; "frase seed" is now unused. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
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.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