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 in browser.storage.local, 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, persisted via browser.storage.local
Data layer: New useDiscoverData hook with useReducer for trending/recent/dApps categorization; new ProtocolEntry type extracted from DiscoverData
8 new components, 2 new hooks, 1 new helper, 13 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 39 out of 39 changed files in this pull request and generated 2 comments.

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

extension/src/popup/views/Discover/components/ExpandedRecent/index.tsx

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

CassioMG · 2026-04-02T00:32:59Z

extension/src/popup/views/Discover/components/DiscoverWelcomeModal/index.tsx

          </div>
          <Button
-            size="lg"
+            size="md"


using the smaller button here (below):

aristidesstaffieri · 2026-04-02T15:37:14Z

Code review

Found 2 issues:

error state from useDiscoverData is returned but never consumed by the Discover component. When the API call fails, isLoading becomes false and all item lists are empty arrays, so the user sees a completely blank Discover panel with no error message, no retry option, and no indication of what went wrong. The error field is explicitly computed via FETCH_ERROR in the reducer (line 52) and returned (line 103), but the destructuring at the call site omits it.

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

Lines 32 to 34 in 7891c21

    
           const { isLoading, trendingItems, recentItems, dappsItems, refreshRecent } = 
        
             useDiscoverData();

freighter/extension/src/popup/views/Discover/hooks/useDiscoverData.ts

Lines 51 to 52 in 7891c21

    
           case "FETCH_ERROR": 
        
             return { ...state, isLoading: false, error: action.payload };

The METRIC_NAMES.discover constant ("loaded screen: discover") and its routeToEventName mapping were removed, but no replacement metric emission was added when the Discover sheet opens. onDiscoverClick at line 216 only calls setIsDiscoverOpen(true) with no emitMetric. The Discover feature is now completely untracked from an analytics perspective.

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

Lines 215 to 217 in 7891c21

    
             isCollectibleHidden={isCollectibleHidden} 
        
             onDiscoverClick={() => setIsDiscoverOpen(true)} 
        
           />

freighter/extension/src/popup/constants/metricsNames.ts

Lines 88 to 91 in 7891c21

    
           viewEditNetwork: "loaded screen: edit network", 
        
           viewNetworkSettings: "loaded screen: network settings", 
        
           viewAddFunds: "loaded screen: add fund",

🤖 Generated with Claude Code

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

aristidesstaffieri · 2026-04-02T15:41:51Z

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

+    useState<ProtocolEntry | null>(null);
+  const [isDetailsOpen, setIsDetailsOpen] = useState(false);
+
+  const { isLoading, trendingItems, recentItems, dappsItems, refreshRecent } =


should we use the error state from this hook? Afaict an error from the hook will result in as run time dead screen in this case.

I think so, thanks for highlighting this. I've asked Charles here: https://stellarfoundation.slack.com/archives/C03347FNAHK/p1775152745569029?thread_ts=1775088726.520239&cid=C03347FNAHK

added here: 010c6fb

error-state.mov

aristidesstaffieri · 2026-04-02T15:42:53Z

extension/src/popup/metrics/views.ts

@@ -66,7 +66,6 @@ const routeToEventName = {
    METRIC_NAMES.viewAccountMigrationMigrationComplete,
  [ROUTES.advancedSettings]: METRIC_NAMES.viewAdvancedSettings,
  [ROUTES.addFunds]: METRIC_NAMES.viewAddFunds,


should we still track METRIC_NAMES.discover somewhere even though its not a route? It's probably still useful to have data on discover usage.

for sure, the PR description mentions that metrics are missing. I've intentionally left the metrics out for now to get an initial review from the team and then implement the same metrics we have on mobile for consistency (which are on the Design doc). So it should soon be done!

added back the existing loaded screen: discover metric + other discover metrics to mimic mobile: 5717f5d

PR description has been updated with an Analytics section

I'm just curious - what's the benefit of loading Discover in a Sheet rather than loading it as a separate view?

CassioMG · 2026-04-02T23:05:52Z

Note: we've decided on keeping the scrollbar hidden for now and further investigate it as part of this task.

Copilot

Pull request overview

Copilot reviewed 43 out of 43 changed files in this pull request and generated 4 comments.

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

Copilot · 2026-04-03T01:55:39Z

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

+  const handleOpenProtocol = useCallback(
+    async (protocol: ProtocolEntry, source: DiscoverSource) => {
+      trackDiscoverProtocolOpened(protocol.name, protocol.websiteUrl, source);
+      await addRecentProtocol(protocol.websiteUrl);
+      await refreshRecent();
+      openTab(protocol.websiteUrl);
+    },


handleOpenProtocol awaits recent-protocol storage updates before calling openTab. If browser.storage.local fails/rejects (e.g., storage quota/permissions issues), this will prevent the user from opening the selected protocol at all. Consider wrapping the recents update/refresh in a try/catch (reporting via Sentry) and always proceeding to openTab so primary navigation isn’t blocked by auxiliary persistence.

Copilot · 2026-04-03T01:55:39Z

extension/src/popup/views/Discover/components/ProtocolRow/index.tsx

+      <button
+        className="ProtocolRow__open-button"
+        data-testid="protocol-row-open"
+        onClick={(e) => {
+          e.stopPropagation();
+          onOpenClick(protocol);
+        }}
+      >


The "Open" <button> inside ProtocolRow is missing type="button". If this component is ever rendered inside a <form>, the default type="submit" could trigger unintended form submission. Set an explicit type to avoid this class of bugs.

Copilot · 2026-04-03T01:55:40Z

extension/src/popup/locales/en/translation.json

  "Current Network": "Current Network",
  "Custom": "Custom",
+  "dApps": "dApps",
  "Dapps": "Dapps",


Both "dApps" and "Dapps" translation keys exist with effectively the same meaning, but there are no code references to t("Dapps") in the repo. Keeping both increases translation/maintenance overhead and can lead to inconsistent UI text. Consider consolidating to a single key (e.g., keep dApps and remove the unused Dapps).

Suggested change

"Dapps": "Dapps",

Copilot · 2026-04-03T01:55:40Z

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

  "Current Network": "Rede Atual",
  "Custom": "Personalizado",
+  "dApps": "dApps",
  "Dapps": "Dapps",


Both "dApps" and "Dapps" translation keys exist with effectively the same meaning, but there are no code references to t("Dapps") in the repo. Keeping both increases translation/maintenance overhead and can lead to inconsistent UI text. Consider consolidating to a single key (e.g., keep dApps and remove the unused Dapps).

Suggested change

"Dapps": "Dapps",

piyalbasu · 2026-04-03T17:44:01Z

extension/src/popup/helpers/recentProtocols.ts

@@ -0,0 +1,28 @@
+import browser from "webextension-polyfill";


If you start the extension in dev mode and load the extension in your browser at http://localhost:9000/#/, this code won't be able to run. That's because browser.storage is only available in:

inside the background script

or

a completely bundled extension that you're loading by clicking the little Freighter icon in your toolbar.

Because of this, we keep all interactions with browser.storage in the background script and then transmit them to the UI. For ex: https://github.com/stellar/freighter/blob/master/extension/src/background/messageListener/popupMessageListener.ts#L353

There's also a dual purpose here. By keeping all storage interactions in the background, it makes it easier to track where storage changes were made

It's certainly up for debate if we want to keep using this pattern, but IMO, it's useful to keep this hot reloading dev experience and it's also good practice to keep storage concerns away from the UI

piyalbasu · 2026-04-03T17:54:03Z

extension/src/popup/views/Discover/components/DiscoverWelcomeModal/index.tsx

+            </Text>
+            <Text as="p" size="sm" weight="regular">
+              {t(
+                "These services are operated by independent third parties, not by Freighter or SDF. Inclusion here is not an endorsement. DeFi carries risk, including loss of funds. Use at your own risk.",


NIT: this text is repeated above. could be a variable

piyalbasu · 2026-04-03T17:56:20Z

extension/src/popup/views/Discover/components/DiscoverWelcomeModal/index.tsx

+            onClick={onDismiss}
+            data-testid="discover-welcome-dismiss"
+          >
+            {t("Let's go")}


very NIT: but we generally tried to use smart quotes for apostrophes. This should definitely be enforced by a Claude skill

piyalbasu · 2026-04-03T18:00:36Z

extension/src/popup/views/Discover/components/ProtocolDetailsPanel/index.tsx

+  try {
+    return new URL(url).hostname;
+  } catch {
+    return url;


hm, if the str is not a valid url, this will just return the str. Should we show this if it's not an url?

piyalbasu · 2026-04-03T18:16:33Z

extension/src/popup/views/Discover/hooks/useDiscoverData.ts

+  recentEntries: [],
+};
+
+const reducer = (


is it possible to use the request reducer helper for this?

extension/src/helpers/request.ts

Example of how it's implemented: https://github.com/stellar/freighter/blob/master/extension/src/helpers/hooks/useGetHistory.tsx#L15

piyalbasu · 2026-04-03T18:17:13Z

extension/src/popup/views/Discover/hooks/useDiscoverWelcome.ts

+
+  useEffect(() => {
+    const checkWelcome = async () => {
+      const result = await browser.storage.local.get(STORAGE_KEY);


same comment as above in regards to browser.storage

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

Use SDS Text component to render text

544dc77

CassioMG self-assigned this Apr 1, 2026

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

CassioMG requested a review from Copilot April 1, 2026 23:42

Copilot started reviewing on behalf of CassioMG April 1, 2026 23:42 View session

Copilot AI reviewed Apr 1, 2026

View reviewed changes

extension/src/popup/views/Discover/components/ExpandedRecent/index.tsx Show resolved Hide resolved

extension/src/popup/views/Discover/index.tsx Outdated Show resolved Hide resolved

CassioMG added 3 commits April 1, 2026 17:05

smaller button

c388362

fix white-border bug

de7a612

Radix handles toggling natively via onOpenChange

7891c21

CassioMG commented Apr 2, 2026

View reviewed changes

aristidesstaffieri reviewed Apr 2, 2026

View reviewed changes

CassioMG requested review from leofelix077, piyalbasu and sdfcharles April 2, 2026 18:01

CassioMG mentioned this pull request Apr 2, 2026

Too many scrollbars on Sign Transaction on Ubuntu #2589

Open

CassioMG added 3 commits April 2, 2026 16:45

discover error state handling

010c6fb

pt translations

1fc3b41

add metrics

5717f5d

CassioMG requested a review from Copilot April 3, 2026 01:51

Copilot started reviewing on behalf of CassioMG April 3, 2026 01:52 View session

Copilot AI reviewed Apr 3, 2026

View reviewed changes

piyalbasu reviewed Apr 3, 2026

View reviewed changes

		@@ -0,0 +1,28 @@
		import browser from "webextension-polyfill";

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!

Choose a reason for hiding this comment

Uh oh!

aristidesstaffieri commented Apr 2, 2026

Code review

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

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

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

CassioMG commented Apr 2, 2026

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Copilot AI Apr 3, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Apr 3, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Apr 3, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Apr 3, 2026

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

CassioMG commented Apr 1, 2026 •

edited

Loading

CassioMG Apr 3, 2026 •

edited

Loading