Discover V2 by CassioMG · Pull Request #2671 · stellar/freighter

CassioMG · 2026-04-01T00:50:59Z

Summary

Rewrites the Discover feature as a rich, Sheet-based overlay with a Trending carousel, Recent protocols, dApps sections, protocol detail panels, and a first-time welcome modal. This is the extension counterpart to the mobile Discover V2 implementation (stellar/freighter-mobile#780).

Key changes

Sheet overlay instead of route: Discover is now a bottom Sheet opened from the Account header (like AssetDetail), replacing the old /discover route
Trending carousel: Horizontal scroll with protocol background images and fallback placeholder icons
Recent protocols: Tracks the last 5 opened protocols, shown on the home screen and in an expanded view with a "Clear recents" option
Protocol details panel: SlideupModal showing domain, tags, description, and an "Open" button
Welcome modal: Shown once on first visit
Background-routed storage: All Discover storage access (recents list, welcome-seen flag) goes through sendMessageToBackground handlers under background/messageListener/handlers/, matching the established codebase convention (addRecentAddress, getMobileAppBannerDismissed) rather than touching browser.storage.local from the popup
Data layer: New useDiscoverData hook with useReducer for trending/recent/dApps categorization; new ProtocolEntry type extracted from DiscoverData
9 new components, 2 new hooks, 5 new background handlers, 5 new @shared/api/internal wrappers, 15 unit tests

Known issues

White border on first Sheet open: A white border shows around Sheet overlays (AssetDetail, Discover) and only goes away after the XLM asset is opened. If you press "shift" on your keyboard the white border comes back. We're still investigating how to properly fix it. This is a pre-existing production bug, not introduced by this PR. See video below as reference.
UPDATE: this issue has just been fixed here 🎉 with a 1 liner change (after 8 failed attempts) ✅
Global scrollbar hiding: The browser's default scrollbar kept appearing over Sheet overlays (AssetDetail, Discover), breaking the visual presentation. Scoping the hiding to individual components did not work — hiding it globally on html, body was the only approach that reliably fixed it. Pending team discussion on whether this trade-off is acceptable. See video below as reference.
UPDATE: we've decided on keeping the scrollbar hidden for now and further investigate it as part of this task. ✅

Analytics

Metrics match the mobile Discover V2 events (stellar/freighter-mobile#780) for consistent Amplitude dashboards.

Event	Properties	Triggered when
`loaded screen: discover`	—	Discover Sheet opens
`discover: protocol opened`	`protocolName`, `url`, `source`, `isKnownProtocol`	User taps "Open" on a protocol row or from a details panel
`discover: protocol details viewed`	`protocolName`, `tags`	Protocol details panel renders
`discover: protocol opened from details`	`protocolName`, `url`	User taps "Open" from the details panel
`discover: welcome modal viewed`	—	Welcome modal renders

Sources: trending_carousel, recent_list, dapps_list, expanded_recent_list, expanded_dapps_list

isKnownProtocol is always true on extension (no search bar for unknown URLs).

Other improvements

ViewAppHeader title size changed from size="md" to size="sm" weight="medium" to match updated Figma specs (affects all screens using View.AppHeader)
Consistent "X" icon usage and size (Icon.XClose -> Icon.X) throughout the codebase
Added explicit ProtocolEntry interface to @shared/api/types
Global scrollbar hiding for cleaner UI
Portuguese translations for all new strings + 30 previously untranslated strings
Removed 2 legacy translation keys

Follow-up work (after initial team review)

Analytics/metrics: Add Amplitude events for Discover interactions (open, protocol click)
E2E tests: Playwright tests for the full Discover flow (open Sheet, navigate sub-views, open protocol, welcome modal dismissal)

Reference

Mobile implementation: Discover V2 freighter-mobile#780
Figma: Freighter Extension — Discover V2

Videos

Popup experience

pop-up.experience.720p.mov

Fullscreen experience

fullscreen.experience.720p.mov

Scrollbar removal

With scrollbar

with.scrollbar.720p.mov

Without scrollbar

without.scrollbar.720p.mov

~~### White border bug (known Production issue)~~ fixed here

white.border.bug.720p.mov

…apping Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

…hooks Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

…popup mode The popup closes immediately when a new tab opens, so the storage write must complete before calling openTab. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

…facts Use height: 100% instead of fixed popup height so the Sheet covers the full screen in both popup and fullscreen mode. Override Tailwind defaults that caused a visible white border around the overlay. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Copilot

Pull request overview

Copilot reviewed 64 out of 68 changed files in this pull request and generated 2 comments.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Copilot

Pull request overview

Copilot reviewed 64 out of 68 changed files in this pull request and generated 2 comments.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Exports SLIDEUP_MODAL_TRANSITION_MS from SlideupModal and uses it in handleDetailsOpen instead of duplicating the 200ms literal. Keeps the consumer's setTimeout in sync with the modal's dismiss animation.

Copilot

Pull request overview

Copilot reviewed 65 out of 69 changed files in this pull request and generated no new comments.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

piyalbasu · 2026-04-21T15:51:48Z

            <Text
              as="h2"
-              size="md"
+              size="sm"


this is likely fine - but just want to confirm that we're okay with changing the font-size on all views that use this AppHeader

yep, it was intended. I noticed there were some inconsistencies between old and new Figma screens in general so I updated to match the most recent designs for consistency. I also did an overall UI check and seems like it's looking good.

piyalbasu · 2026-04-21T16:14:53Z

+      try {
+        await openTab(protocol.websiteUrl);
+      } catch (error) {
+        captureException(`Error opening Discover tab - ${error}`);


we should surface some sort of user-facing error in this case

Great suggestion.

I've surfaced user-facing error here using the existing sonner's toast + Notification component as it provides a smooth built-in experience with a very simple API. This is how it's looking like:

Using toast + Notification component

using-toast.mov

Using just Notification component

using-notification.mov

When using just the Notification component the code looks much more complex as we need to manually handle useState + useEffect locally for it to appear/dismiss.

piyalbasu · 2026-04-21T16:16:01Z

+      await clearRecentProtocols();
+      await refreshRecent();
+    } catch (error) {
+      captureException(`Error clearing Discover recent protocols - ${error}`);


we should also surface a user-face error in the unlikely event this fails

see comment here

piyalbasu · 2026-04-21T16:41:29Z

Code review

Found 1 issue:

<Sheet open={isDiscoverOpen}> is rendered without an onOpenChange handler. Since Sheet wraps Radix Dialog, Escape-key and overlay/outside-click dismiss gestures fire onOpenChange(false) on the primitive but the parent's isDiscoverOpen state never flips, so those native dismiss paths are broken. Every other Sheet usage in the codebase (e.g. HiddenCollectibles, AccountCollectibles, AccountAssets) wires onOpenChange={(open) => !open && onClose()}. Users can still close via the in-sheet back button, but Escape and overlay-click are no-ops.

freighter/extension/src/popup/views/Account/index.tsx

Lines 312 to 326 in a606d2d

    
               )} 
        
             <Sheet open={isDiscoverOpen}> 
        
               <SheetContent 
        
                 onOpenAutoFocus={(e) => e.preventDefault()} 
        
                 aria-describedby={undefined} 
        
                 side="bottom" 
        
                 className="AccountView__discover-sheet" 
        
               > 
        
                 <ScreenReaderOnly> 
        
                   <SheetTitle>{t("Discover")}</SheetTitle> 
        
                 </ScreenReaderOnly> 
        
                 <Discover onClose={() => setIsDiscoverOpen(false)} /> 
        
               </SheetContent> 
        
             </Sheet> 
        
           </>

🤖 Generated with Claude Code

_{- If this code review was useful, please react with 👍. Otherwise, react with 👎.}

piyalbasu

This is looking solid! I just left a couple of small comments and Claude has a comment, as well

CassioMG · 2026-04-21T17:30:01Z

@piyalbasu thanks for the help reviewing! About the Claude comment, I noticed that as well but as I was using AssetDetails as reference for the Sheet implementation I ended up not adding the onOpenChange behavior for consistency since AssetDetails doesn't have it as well. But I see now that CollectibleDetails (which is a more recent component) has it so users can close it by tapping "esc" on keyboard. I'll add onOpenChange for both Discover and AssetDetails so we have both covered.

After setItem resolves we already know the value is true; returning it directly eliminates the storage round-trip and removes the duplication flagged against getDiscoverWelcomeSeen. If setItem fails it throws, so callers never get a false-positive { hasSeenDiscoverWelcome: true }. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

…s failures Previously both failures were swallowed into Sentry only. Add toast.custom notifications rendered with the SDS Notification error variant so the user gets immediate feedback when opening a dApp or clearing recent dApps fails. Includes en/pt-BR copy. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

Without onOpenChange, Radix Dialog's native Escape-key and overlay-click dismiss paths fire on the primitive but the parent state never flips, making those gestures no-ops. Matches the pattern already used by HiddenCollectibles and AccountCollectibles. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

CassioMG · 2026-04-21T19:00:57Z

fixed the missing onOpenChange places here

Screen.Recording.2026-04-21.at.12.00.05.mov

Spies on sonner's toast.custom to verify the Notification element emitted when openTab rejects (from row-level Open button) and when clearRecentProtocols rejects (from ExpandedRecent kebab clear). Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

Exercises the onOpenChange wiring added in the previous sheet fix by pressing Escape after the trending carousel is visible and asserting the sheet closes back to the account view. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

CassioMG and others added 26 commits March 30, 2026 20:51

feat: add backgroundUrl and isTrending to DiscoverData type and API m…

d6a2ce6

…apping Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

feat: add recentProtocols helper for browser.storage.local

3b805d1

feat: add useDiscoverData hook with trending, recent, and dapps lists

5746f87

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

feat: add ProtocolRow component for Discover sections

a8c4866

feat: add ProtocolDetailsPanel component for SlideupModal content

95ea090

feat: add ExpandedRecent and ExpandedDapps sub-view components

9890836

feat: rewrite Discover orchestrator with sub-views, modals, and data …

c180149

…hooks Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

feat: wire up Discover Sheet in Account view and update AccountHeader

1099777

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

test: rewrite Discover tests for new Sheet-based component structure

5a35340

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

refactor: remove /discover route, now handled via Sheet overlay

50b3c08

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

fix: save recent protocol before opening tab to prevent data loss in …

8a17902

…popup mode The popup closes immediately when a new tab opens, so the storage write must complete before calling openTab. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

fix carousel margins and paddings

e5b314d

fix discover header spacing

0ecf85b

remove duplicate padding

ab5f8c0

update legal disclaimer

aea1ad2

Merge branch 'master' into feature/discover-v2

6ee8491

clean-up !important values

cb2339d

fix carousel card size

d9e7c37

tweak "Open" button

2509c15

use consistent "X" icon throughout screens

7e02554

figma tweaks

3bcaf62

figma tweak

b30a972

remove superpowers folder

e999c53

globally hides the scrollbar

f59150c

add translation wrapper

8321cc4

CassioMG marked this pull request as ready for review April 1, 2026 01:54

Copilot AI review requested due to automatic review settings April 1, 2026 01:55

CassioMG added the don't review yet wip / tests in progress / missing videos or screenshots / pending self code-review label Apr 1, 2026

Copilot started reviewing on behalf of CassioMG April 1, 2026 01:55 View session

Copilot AI reviewed Apr 20, 2026

View reviewed changes

Comment thread @shared/api/internal.ts Outdated

Comment thread extension/src/popup/locales/pt/translation.json

CassioMG added 3 commits April 20, 2026 16:46

Put back missing translations

783a7d1

Keeps the modal hidden when the flag lookup rejects

339e82b

Add more missing translations

ec06a37

CassioMG requested a review from Copilot April 20, 2026 23:53

Copilot started reviewing on behalf of CassioMG April 20, 2026 23:53 View session

Copilot AI reviewed Apr 20, 2026

View reviewed changes

Comment thread extension/src/popup/views/Account/index.tsx

Comment thread extension/src/popup/views/Discover/index.tsx

refactor(discover): extract SlideupModal transition duration as constant

a606d2d

Exports SLIDEUP_MODAL_TRANSITION_MS from SlideupModal and uses it in handleDetailsOpen instead of duplicating the 200ms literal. Keeps the consumer's setTimeout in sync with the modal's dismiss animation.

CassioMG requested a review from Copilot April 21, 2026 00:12

Copilot started reviewing on behalf of CassioMG April 21, 2026 00:13 View session

Copilot AI reviewed Apr 21, 2026

View reviewed changes

CassioMG requested a review from piyalbasu April 21, 2026 00:20

piyalbasu reviewed Apr 21, 2026

View reviewed changes

Comment thread extension/src/background/messageListener/handlers/getDiscoverWelcomeSeen.ts

piyalbasu reviewed Apr 21, 2026

View reviewed changes

CassioMG and others added 3 commits April 21, 2026 10:40

CassioMG and others added 2 commits April 21, 2026 12:06

piyalbasu approved these changes Apr 21, 2026

View reviewed changes

Merge branch 'master' into feature/discover-v2

b91331e

CassioMG merged commit 325eb7f into master Apr 22, 2026
9 checks passed

CassioMG deleted the feature/discover-v2 branch April 22, 2026 01:14

github-actions Bot mentioned this pull request Apr 24, 2026

v5.40.0 #2730

Merged

Conversation

CassioMG commented Apr 1, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Key changes

Known issues

Analytics

Other improvements

Follow-up work (after initial team review)

Reference

Videos

Popup experience

Fullscreen experience

Scrollbar removal

With scrollbar

Without scrollbar

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Uh oh!

piyalbasu Apr 21, 2026

Choose a reason for hiding this comment

Uh oh!

CassioMG Apr 21, 2026

Choose a reason for hiding this comment

Uh oh!

piyalbasu Apr 21, 2026

Choose a reason for hiding this comment

Uh oh!

CassioMG Apr 21, 2026

Choose a reason for hiding this comment

Using toast + Notification component

Using just Notification component

Uh oh!

piyalbasu Apr 21, 2026

Choose a reason for hiding this comment

Uh oh!

CassioMG Apr 21, 2026

Choose a reason for hiding this comment

Uh oh!

piyalbasu commented Apr 21, 2026

Code review

Uh oh!

piyalbasu left a comment

Choose a reason for hiding this comment

Uh oh!

CassioMG commented Apr 21, 2026

Uh oh!

CassioMG commented Apr 21, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

CassioMG commented Apr 1, 2026 •

edited

Loading

CassioMG commented Apr 21, 2026 •

edited

Loading