feat(connected-apps): refresh the connected apps screen - #2934
Open
CassioMG wants to merge 4 commits into
Open
Conversation
…y state Merges the network Select and NetworkIcon into a single pill (native <select> retained, overlaid transparently for keyboard/a11y), groups rows into one card, and replaces the plain empty-state text with an icon, heading, subtext, and a "Go to Discover" action that opens the existing Discover view in a bottom sheet in place (Discover has no route). Updates allowList.test.ts's empty-state assertions to match the new copy. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Rebuilds the network pill (8px radius, 4px icon/label/chevron gap, semi-bold label), groups rows into one gray-03 card with full-width dividers, restores red-09 coloring on the per-row disconnect icon, recolors "Disconnect all" to the frame's outlined red triad (red-01/06/11 — the same SDS Button--error default the prior variant="error" used, restated explicitly since Task 2 drops the leading icon that variant carried), and pins it to the bottom of the view. Adds the empty-state badge, heading, and subtext styling. The transparent <select> overlay needed a fix beyond the plan: SDS's <Select> spreads className/data-testid/onChange onto the <select> element itself rather than a wrapper div, and its own .Select__container ancestor is position: relative. Absolutely-positioning the select therefore resolved against that inner wrapper and collapsed the click target to its shrink-to-fit size instead of the pill (confirmed by direct measurement, then by a real mouse-click test that failed to focus the select). Fixed by stretching the outer .Select div to the pill instead, neutralizing .Select__container's own background/border so it doesn't paint over the visible icon/label/chevron, and hiding the redundant chevron SDS renders internally. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Regenerates all four allowList.test.ts snapshots (empty/populated x chromium-named/unnamed Playwright project) against the restyled Connected apps view, via --update-snapshots=all. All four inspected by hand. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Contributor
|
PR Preview build is ready: https://github.com/stellar/freighter/releases/tag/untagged-7fa970255ba3e08cc28f (SDF collaborators only — install instructions in the release description) |
…nnect
Five reported issues on the Connected apps screen traced back to two
underlying mistakes in how the view consumes the design system.
1. `--font-weight-*` is not a real token. The pill label, row domain,
empty-state title and subtext all set `font-weight` from
`--font-weight-semi-bold` / `-medium` / `-regular`, none of which are
defined here or in SDS. The declarations were invalid, so every one of
them silently rendered at the inherited weight — which is why the
selected network never looked bold. Switched to the real `--sds-fw-*`
tokens the rest of the popup already uses.
2. Passing `className` to an SDS `Button` deletes its own classes. SDS
renders `<button className={"Button " + additionalClasses} {...props}>`,
spreading props *after* className, so "Disconnect all" lost the whole
`Button Button--lg Button--rounded Button--full-width` list and rendered
as an unstyled 18px `display: block` element at 16px/400 — the "squeezed"
footer. Only our `!important` colors survived, which is what made it look
deliberate. Dropped the className so the SDS classes apply, which alone
restores the frame's 40px height, 14px semi-bold text and pill radius,
and switched to `variant="error"` whose default triad already *is*
red-01/red-06/red-11. That retires the `&__disconnect-all` override block
and its three `!important`s. (`variant="error"` adds no leading icon; SDS
only renders one when the `icon` prop is set, so the earlier note about
dropping the variant for that reason was mistaken.)
Also, per the frame: thickened the pill's globe stroke to match the
semi-bold label, suppressed the 4px focus halo SDS grows on
`.Select__container:has(select:focus-visible)` (the container was already
stripped of its background and border, but not its box-shadow), sized the
empty-state badge glyph to the frame's 20.571px instead of leaving it at
~16px, and bumped "Go to Discover" to `size="lg"` with the frame's 24px gap
above it.
Adds a success toast on disconnect using the same `toast.custom` +
`Notification` pattern as the copy-address flow: "{{appName}} disconnected"
for a single app, "All apps disconnected" for the batch, both localized.
Covered by a new allowList E2E test; snapshots regenerated and inspected.
Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Contributor
There was a problem hiding this comment.
Pull request overview
Refreshes the Connected Apps screen to match the Home refresh designs.
Changes:
- Adds redesigned network selector, app list, and empty state.
- Adds Discover navigation and disconnect success toasts.
- Adds localization and E2E coverage updates.
Reviewed changes
Copilot reviewed 5 out of 9 changed files in this pull request and generated 3 comments.
Show a summary per file
| File | Description |
|---|---|
extension/src/popup/views/ManageConnectedApps/styles.scss |
Implements refreshed layout and styling. |
extension/src/popup/views/ManageConnectedApps/index.tsx |
Adds new UI, Discover sheet, and toasts. |
extension/src/popup/locales/en/translation.json |
Adds English strings. |
extension/src/popup/locales/pt/translation.json |
Adds Portuguese translations. |
extension/e2e-tests/allowList.test.ts |
Updates empty-state assertions and tests disconnect toasts. |
Suppressed comments (2)
extension/src/popup/views/ManageConnectedApps/index.tsx:68
- A rejected removal also resolves normally here, so one or more domains can remain connected while the batch still says “All apps disconnected.” Track each dispatch result and only show this success toast when every action fulfilled; the rejected case should receive error feedback.
notifySuccess(t("All apps disconnected"));
extension/src/popup/views/ManageConnectedApps/index.tsx:231
- The new “Go to Discover” interaction is not exercised by the updated allow-list E2E tests; they only assert the empty text/screenshot, so broken Sheet wiring or closing behavior would pass CI. Add an E2E step that opens Discover and verifies it can return to this screen.
onClick={() => setIsDiscoverOpen(true)}
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| }), | ||
| ); | ||
| await fetchData(false); | ||
| notifySuccess(t("{{appName}} disconnected", { appName: domainToRemove })); |
Comment on lines
+85
to
+90
| // SDS grows a 4px box-shadow ring on the container whenever the select | ||
| // takes focus (`.Select__container:has(select:focus-visible)` bumps | ||
| // `--Select-box-shadow-size` to 0.25rem). Stretched over the pill, that | ||
| // reads as a halo around the whole pill on every click. The frame has | ||
| // no such treatment, so suppress it in all states. | ||
| box-shadow: none; |
| fieldSize="md" | ||
| id="select" | ||
| className="ManageConnectedApps__select" | ||
| className="ManageConnectedApps__network-pill__select" |
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 Connected apps screen, per Figma frames
9585-26282(populated) and9593-26538(empty):<select>and the separate network icon merge into one self-sized pill — globe + network name + chevron.toast.custom+Notificationpattern as the copy-address flow, and both strings are localized.connected-apps-720p.mov
🤖 Generated with Claude Code