feat(wallets): refresh the rename wallet modal - #2931
Open
CassioMG wants to merge 13 commits into
Open
Conversation
Restyle the rename-wallet modal to match frame 9585-24423: a centered card with a circular close button, a centered identicon, the name input, and Cancel / Set name side by side. "Save" is renamed to "Set name", and the "Rename Wallet" heading and Address line are removed. Update the e2e test's button-text assertion to match the new label.
Contributor
|
PR Preview build is ready: https://github.com/stellar/freighter/releases/tag/untagged-ebf026fafe5aca7842b0 (SDF collaborators only — install instructions in the release description) |
This was referenced Aug 4, 2026
The rename modal was wrapped in View.Content, whose View__inset--scroll-shadows class paints an opaque full-width background. That band covered the card's horizontal margins and its rounded corners, so the modal read as a flat edge-to-edge panel. - Drop the View.Content wrapper so .RenameWallet is the card itself (312px wide, centered, 32px radius). - Move the close button out of absolute positioning into a flow header row, so it respects the card's 24px padding and stacks above the avatar as designed. - Size the action buttons to spec via SDS custom properties: 36px tall, 8/12 padding, 14/20 type. SDS size="md" alone gives 32px and 6/10. - Set the button label weight with --sds-fw-semi-bold. Verified against Figma by measuring the rendered DOM in the extension: card 312x248 with 24px padding, header 82 tall, 24px gaps between avatar/input/actions, buttons 36 tall with an 8px gap. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Contributor
There was a problem hiding this comment.
Pull request overview
Refreshes the rename-wallet modal to match the Home refresh design.
Changes:
- Centers and restyles the modal with a close button and identicon.
- Replaces “Save” with “Set name” and updates button layout.
- Updates translations and the rename-wallet E2E flow.
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/views/Wallets/styles.scss |
Centers the modal wrapper. |
extension/src/popup/components/account/RenameWallet/index.tsx |
Restructures modal content and controls. |
extension/src/popup/components/account/RenameWallet/styles.scss |
Implements the refreshed card styling. |
extension/src/popup/locales/en/translation.json |
Adds the English action label. |
extension/src/popup/locales/pt/translation.json |
Adds the Portuguese locale entry. |
extension/e2e-tests/loadAccount.test.ts |
Updates the submit-button locator. |
💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.
Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.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 👎. |
Replace the local Button custom-property overrides with the props SDS already provides. size="lg" supplies the 8/12 padding and 14px type the spec calls for, and isFullWidth splits the row evenly, which is what the `flex: 1` rule was there to do. Also drop the redundant font-weight declaration: SDS .Button already applies --sds-fw-semi-bold, so the local rule had no effect. The one remaining difference from Figma is button height, 40px from SDS lg versus 36px in the design. Taking SDS's scale is preferable to overriding it for 4px. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
…h-rename-modal # Conflicts: # extension/e2e-tests/loadAccount.test.ts
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 rename-wallet modal, per Figma frame
9585-24423:top: 30%.Xclose button top-right inside the card.Address: G…line.The form itself is untouched — same Formik setup, same 24-character Yup limit, same dispatch.
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 baseline🤖 Generated with Claude Code