feat(account-details): refresh the account details screen - #2930
Open
CassioMG wants to merge 11 commits into
Open
feat(account-details): refresh the account details screen#2930CassioMG wants to merge 11 commits into
CassioMG wants to merge 11 commits into
Conversation
yarn build:extension:translations (i18next-scanner-webpack) currently
throws "TypeError: I18nextWebpackPlugin is not a constructor" on this
Node 22 toolchain -- pre-existing, reproducible on master, unrelated to
this PR's component change (fails at webpack config-load time, before
any source scanning). Added the three new keys ("Stellar", "This
address supports Stellar network.", "Copy wallet address") by hand to
both locale files, in the same sorted position and with the same
untranslated-placeholder convention (English text as the pt value)
that the tool itself would have produced.
…t address The plan's index.tsx used variant="primary" (lilac-09 background, white text -- confirmed via node_modules/@stellar/design-system/build/styles.min.css), but design-specs/node-9569-38987.md's color table specifies this button as background var(--sds-clr-gray-12) with text/icon var(--sds-clr-base-00) -- exactly what SDS's variant="secondary" produces. The token map cross-references this same off-white/black-text treatment against node 9593-26538's "Go to Discover" button, so it's a recurring, deliberate pattern in this design refresh, not a one-off. Confirmed the mismatch by actually rendering the screen (Playwright screenshot against the dev build) before and after.
Contributor
|
PR Preview build is ready: https://github.com/stellar/freighter/releases/tag/untagged-e6cf6a25cf28b104c299 (SDF collaborators only — install instructions in the release description) |
CopyText's doneLabel defaults to "Copied", so keeping it would have shown a balloon and a toast together. Copy the address directly via navigator.clipboard.writeText (same pattern as SwapTokenMenu) and surface the result with toast.custom + an SDS Notification, matching the existing toast.custom convention used elsewhere (Discover, useSwapQuoteExpiry) rather than toast.success, which the app's Toaster never styles. The accountPublicKeyCopied metric now fires only after a successful write instead of unconditionally on click, and a copy failure shows an error toast instead of a false "copied" message.
…Figma - Shrink the Stellar network chip icon from 16px to 14px - Bump the chip text weight to semi-bold (600) with correct 14/20 line-height and 10px horizontal padding, per Figma node 9569-39341 - Drop the "Copy wallet address" button weight one step to medium (500) by targeting the SDS-rendered .Button class from the footer wrapper, avoiding the className-merge trap - Give the identicon the same background token as the chip - Remove the dead CopyText selector left over after CopyText was removed from this screen
… medium - Grow the ViewPublicKey identicon container from 24px to the Figma-specced 32px circle, and constrain the descendant IdenticonImg <img> to 16x16 so a visible ring of background shows around it, instead of the identicon filling the circle edge to edge via overflow: hidden. - Investigated a 550 font-weight as a middle ground between medium (500, "too thin") and semi-bold (600, "too bold") for the Copy wallet address button label. Measured in the real built extension: 550's rendered label width is identical to 600's (both differ from 500's), because Inter (SDS's configured base font) is never loaded in this repo, so text falls back to the system sans-serif, which only exposes normal/bold faces and snaps 550 to bold. 550 renders as theater, not a real midpoint, so kept var(--sds-fw-medium) with a comment documenting the finding.
Drops the font-weight override entirely rather than restating 600, since
that is already SDS Button's default. A 500 and a raw 550 were both tried
first; 550 measured identical to 600 because SDS's --sds-ff-base ("Inter")
is never loaded in this repo, so text falls back to the system sans-serif
which has no face between medium and bold.
Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Both the success and error toasts now share one stable sonner id, so repeated taps of "Copy wallet address" update the visible toast rather than stacking, and a failure after a success shows only the latest outcome. Mirrors the swap quote-expiry toast. Verified in a built extension: 5 rapid taps leave exactly 1 toast in the DOM, with the correct address text, still auto-dismissing after ~4.3s. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Contributor
There was a problem hiding this comment.
Pull request overview
Refreshes the account-details screen to match the Home redesign.
Changes:
- Replaces renaming/explorer actions with updated account and QR presentation.
- Adds clipboard success/error toasts and success-only analytics.
- Adds corresponding styling and locale keys.
Reviewed changes
Copilot reviewed 4 out of 4 changed files in this pull request and generated 2 comments.
| File | Description |
|---|---|
ViewPublicKey/index.tsx |
Implements refreshed screen and copy feedback. |
ViewPublicKey/styles.scss |
Adds redesigned account, QR, chip, and footer styling. |
locales/en/translation.json |
Adds English strings. |
locales/pt/translation.json |
Adds Portuguese locale entries. |
Suppressed comments (3)
extension/src/popup/locales/pt/translation.json:164
- This new Portuguese entry is still English, so the primary action remains untranslated for Portuguese users. The locale rule requires an actual Portuguese value for every string (
.claude/skills/freighter-best-practices/references/i18n.md:73-76).
"Copy wallet address": "Copy wallet address",
extension/src/popup/locales/pt/translation.json:656
- This new Portuguese entry is still English, so the account-details caption remains untranslated. The locale rule requires an actual Portuguese value for every string (
.claude/skills/freighter-best-practices/references/i18n.md:73-76).
"This address supports Stellar network.": "This address supports Stellar network.",
extension/src/popup/locales/pt/translation.json:167
- This new Portuguese entry is still English, so clipboard failures display an untranslated error. The locale rule requires an actual Portuguese value for every string (
.claude/skills/freighter-best-practices/references/i18n.md:73-76).
"Couldn’t copy your wallet address": "Couldn’t copy your wallet address",
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>
…le one Reusing one stable sonner id made a stale-update path reachable: create() takes an "update existing" branch when the id is already in this.toasts, while dismiss() only adds the id to dismissedToasts and never removes the entry. After manually swiping a toast away, tapping Copy again could publish an update to a toast the Toaster had already unmounted, showing nothing at all. Keep the last toast's id in a ref, dismiss it explicitly, then create a new toast with a fresh auto-generated id. Replace-not-stack behaviour is preserved without ever reusing an id. Verified in a built extension: 5 rapid taps leave exactly 1 toast; swipe-dismiss then tap again always shows a toast; auto-dismiss and swipe-to-dismiss both still work. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
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 account details / QR screen, per Figma frames
9569-38987and9569-39341:isEditingNamestate are removed. Renaming now lives on the Wallets screen.qr-code-720p.mov
Copy feedback
Tapping Copy wallet address shows a success toast reading
Address GDF3…ZEFY copied!, replacingthe old "Copied!" balloon.
CopyTexthad to go: its balloon can't be suppressed (doneLabeldefaultsto
"Copied") and it exposes no copy callback, so the clipboard write is now direct and the toast onlyappears once the write actually succeeds.
Repeated taps replace the toast rather than stacking it. The last toast's id is kept in a ref and
dismissed before a new one is created with a fresh id — a stable id looked simpler but broke: sonner's
create()takes an "update existing" path when the id is already inthis.toasts, whiledismiss()never removes that entry, so after swiping a toast away the next tap rendered nothing at all.
Analytics — one deliberate removal
This is the only intentional metric removal in the whole Home refresh:
account.renamedwithsource: "view_public_key"no longer fires, because renaming is no longer possible here. The event survives viasource: "wallets"from the rename modal, so only that one source value disappears. Any dashboard segmenting renames by source will see it flatline.account.public_key_copiedis kept, still with no arguments — deliberately nosourceproperty yet, so all such properties land together in one follow-up analytics PR. It now fires after a successful copy rather than on click. Same event, same (absent) properties; it just stops counting failed copies as successes.account.stellar_expert_openedloses its only call site here. TheMETRIC_NAMESentry stays; feat(wallets): refresh the wallets list with an account header #2933 adds a new call site. Between those merges the event is briefly unreferenced — expected, not a bug.🤖 Generated with Claude Code