feat(home): refresh home screen chrome - #2936
Draft
CassioMG wants to merge 5 commits into
Draft
Conversation
…e screen Hand-added the new "Add collectible", "Add token", "Show hidden", "View history", and helper-copy translation keys to en/pt directly -- yarn build:extension:translations is broken on master (I18nextWebpackPlugin is not a constructor). Also drops autoFocus from the collection-address field: with it focused on mount, the first click anywhere else blurs it and Formik's validation error shifts the layout down between mousedown and mouseup, so a first click on the new Show hidden button (or any control in that area) can land under the wrong element. Confirmed by instrumenting the click in a throwaway e2e run: the handler never fired with a real (non-forced) click until autoFocus was removed.
--update-snapshots=all only regenerated add-collectible-page-chromium- darwin.png; the project has a `name` field so Playwright never writes the plain -darwin.png variant. Both are the same chromium/darwin capture, so the plain file is synced to match byte-for-byte after visually confirming the regenerated PNG. Both were inspected: X close icon, Show hidden link, and helper text render correctly with no other regressions. Also noticed the prior checked-in snapshot was already stale on master (old "Collectible address" placeholder copy and a paste-icon affordance neither exists in current source) -- unrelated pre-existing drift that this regeneration incidentally corrects.
Task 7's full e2e pass caught a real click-interception bug: accountHistory.test.ts "Orders failed transactions..." clicks the USDC row after returning to the Tokens tab, and with only two balances the last row sits where the absolutely-positioned FloatingAddButton is pinned, so the pill silently ate the click (Playwright reported the row's own click as intercepted by the pill's subtree). Reserving bottom padding on the sliding pane so real content never renders underneath the pill fixes it for both the Tokens and Collectibles panes without touching accountHistory.test.ts.
Contributor
|
PR Preview build is ready: https://github.com/stellar/freighter/releases/tag/untagged-a6949e94933b9a488a8a (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. This is the Home screen's chrome — header, action row, tab row, and the new add button. The token and collectible lists are a separate PR.
What changed
Per Figma frames
9567-17044(Home) and9673-19461(Add Collectible):…button and the network globe. The order is now options → history → network.Sliders01manage button and its whole dropdown are deleted.Xheader icon.Out of scope, deliberately
The frames show an Earn button and a Positions tab. Neither is built — they're separate future features. The action row is a 3-column CSS grid specifically so Earn later becomes
repeat(4, 1fr)with no layout rework.Two real bugs found during verification
Both caught by actually driving the UI, not by reading the diff:
autoFocuson the collection-address input made the new "Show hidden" button unclickable — a blur → validation → layout-shift race meant the click landed somewhere else. Removed the attribute.accountHistory.test.ts's own "Orders failed transactions" case — a test this PR doesn't touch. Fixed with reserved bottom padding inviews/Account/styles.scss, not by adjusting the test.accountHistory.test.tspasses with zero editsThirteen call sites depend on
data-testid="nav-link-account-history", and the History button moved.NavButton's props interface is closed — it can't acceptdata-testidat all — so the testid lives on a wrapper<div>, matching howaccount-options-dropdownandnetwork-selector-openalready work in that file. Verified by both running the spec and diffing the file againstmaster.Analytics
Unchanged.
history.full_history_openedmoved position but kept its event name andsource: "account_header"verbatim — still accurate, since both the old and new positions are in the header.Note "Manage tokens" is not orphaned by deleting the tab dropdown: the
…menu already routes toROUTES.manageAssets.Also removed a genuinely dead
isIncludingIconsprop fromTabButtons— its JSDoc claimed it was "used in Send flow", but a grep acrosssrcande2e-testsfinds no consumer.Merge note
Touches
views/Account/index.tsx, which the home-lists PR also edits in a different region (this one mounts the pill and trimsAccountHeaderprops; that one moves the unfunded empty state into the Tokens pane). Expect a trivial rebase for whichever merges second.Verification
yarn test:ci— 1520/1571 tests, identical to baselineyarn build:extension— cleanaccountHistory(11 passed, unedited),addCollectible,hideCollectible,loadAccount,addAsset— all greenadd-collectible-pagesnapshots regenerated and visually inspectedKnown repo issue
yarn build:extension:translationsis broken onmaster(i18next-scanner-webpackneeds.default,extension/webpack.extension.js:3) and the pre-commit hook swallows the failure. New locale keys added by hand toenandpt. Worth its own fix.🤖 Generated with Claude Code