Discover V2

[CassioMG]

Summary

Complete redesign of the Discover tab.

Design Doc: https://docs.google.com/document/d/1u7Zw4DHzZBwVa6FdBgsg8P9yP2hkcKzubFHhtXAn2v0/edit?tab=t.0#heading=h.g63ji0xvvbbc

This redesign:

• Makes trending protocols visually prominent via the carousel
• Adds a protocol details step so users can learn about a protocol before navigating
• Tracks which protocols users visit and from where, enabling data-driven decisions about which protocols to feature
• Identifies popular "unknown" external sites that should be added to the known protocols list
• Provides tab management metrics to understand browser usage patterns

What

• New Discovery homepage layout with three sections: Trending carousel, Recent protocols, and DApps list
• Trending carousel — horizontal scrollable cards with protocol background images and a fallback state
• Protocol details bottom sheet — tapping a protocol shows name, domain, tags, and description before navigating
• Expanded section views — tapping a section title expands it to a full-screen scrollable list
• Redesigned bottom navigation bar — merged URL bar into the bottom bar with avatar for account switching, back button, context menu, and tab counter
• Recent protocols tracking — new Zustand store (recentProtocols) persisting the last 5 visited known protocols
• Welcome modal — one-time "Welcome to Discover!" modal shown on first visit
• Discover analytics — 7 new events tracking protocol navigation, tab management, and onboarding (see below)
• Badge color fix — updated the success variant to match Figma's lime color scale (bg-lime-2 border-lime-6)

Analytics events added

Event	Fires when	Key properties
discover: protocol opened	User navigates to any protocol/website	url, protocol_name, source, is_known_protocol
discover: protocol details viewed	Bottom sheet opens for a protocol	protocol_name, tags
discover: protocol opened from details	"Open" pressed in bottom sheet	protocol_name, url
discover: tab created	New tab opened (skips automatic replacements)	tab_count, source
discover: tab closed	Tab closed	tab_count, had_url
discover: all tabs closed	"Close all" pressed	tab_count
discover: welcome modal viewed	Welcome modal appears	—

Source values: trending_carousel, recent_list, dapps_list, expanded_trending_list, expanded_recent_list, expanded_dapps_list, url_bar, tab_overview, automatic

New components

• TrendingCarousel / TrendingCardImage — reusable carousel with image cards
• BottomNavigationBar — replaces old UrlBar + BottomNavigation
• DiscoveryHomepage — (refactored) homepage with trending, recents, dapps sections
• ProtocolDetailsBottomSheet — protocol info overlay
• ProtocolRow — individual protocol list item
• VerticalListSection / ExpandedSectionView — collapsible/expandable list sections
• TrendingCarouselSection / SectionTitle — section wrappers
• DiscoverWelcomeModal — one-time onboarding modal

Removed components

• UrlBar — merged into BottomNavigationBar
• BottomNavigation — replaced by BottomNavigationBar
• App/data.ts — removed hardcoded dApp logos (now fetched from backend)

Known limitations

• All protocols are currently forced as trending (temporary until this kube PR with is_trending property is deployed)

Test plan

• Verify trending carousel renders and scrolls horizontally with protocol cards
• Verify tapping a trending card opens the protocol details bottom sheet
• Verify tapping "Open" in the bottom sheet navigates to the protocol website
• Verify recent protocols list updates after visiting a protocol (max 5)
• Verify "Clear Recents" context menu works in expanded recent view
• Verify expanded section views open/close with fade animation
• Verify URL bar submission navigates to the URL (or Google search for queries)
• Verify tab creation, switching, and closing work from both browser view and tab overview
• Verify welcome modal shows on first visit and doesn't show again
• Verify account switching works from the bottom bar avatar
• Verify keyboard behavior on both iOS and Android (bottom bar animation, dismiss on tap outside)
• Verify analytics events fire correctly in Amplitude view for all navigation paths
• Verify no duplicate analytics events from component re-renders
• Run all existing tests — 126 suites, 1633 tests passing

Checklist

PR structure

• This PR includes relevant before and after screenshots/videos highlighting these changes.
• I took the time to review my own PR.

Testing

• These changes have been tested and confirmed to work as intended on Android.
• These changes have been tested and confirmed to work as intended on iOS.
• These changes have been tested and confirmed to work as intended on small iOS screens.
• These changes have been tested and confirmed to work as intended on small Android screens.
• I have tried to break these changes while extensively testing them.
• This PR adds tests for the new functionality or fixes.

Release

• This is not a breaking change.
• This PR updates existing JSDocs when applicable.
• This PR adds JSDocs to new functionalities.
• I've checked with the product team if we should add metrics to these changes.
• I've shared relevant before and after screenshots/videos highlighting these changes with the design team and they've approved the changes.

[Copilot]

Pull request overview

This PR delivers the “Discover V2” redesign, updating the Discover tab’s UI/UX and wiring new analytics + persistence needed to measure protocol engagement and browser/tab usage.

Changes:

• Adds a new Discover homepage layout (trending carousel, recents, dApps) with expanded section views and a protocol-details bottom sheet.
• Replaces the old UrlBar + BottomNavigation with a unified BottomNavigationBar and updates tab overview interactions.
• Introduces Discover analytics events and a persisted recentProtocols store; extends backend protocol payloads for trending/background imagery.

Reviewed changes

Copilot reviewed 40 out of 42 changed files in this pull request and generated 7 comments.

Show a summary per file

File	Description
src/services/backend.ts	Extends protocol response mapping to include backgroundUrl and isTrending.
src/services/analytics/index.ts	Exposes new Discover tracking helpers on the analytics facade.
src/services/analytics/discover.ts	Implements Discover-specific analytics events and source constants.
src/navigators/TabNavigator.tsx	Hydrates recentProtocols and fetches protocols on mount.
src/i18n/locales/pt/translations.json	Updates/extends Discover strings for the new UI.
src/i18n/locales/en/translations.json	Updates/extends Discover strings for the new UI.
src/hooks/useBrowserActions.ts	Adds Discover tracking for URL-bar navigation and tab close/all-close actions.
src/ducks/recentProtocols.ts	Adds persisted Zustand store for recently visited known protocols.
src/config/types.ts	Extends DiscoverProtocol with backgroundUrl + isTrending.
src/config/constants.ts	Adds storage key + renames browser animation duration constants.
src/config/analyticsConfig.ts	Registers new Discover analytics event names.
src/components/sds/Input/index.tsx	Extends input props to support controlled selection handling.
src/components/sds/Icon/index.tsx	Adds ChevronRightBold icon to the icon registry.
src/components/sds/Badge/index.tsx	Updates success badge color tokens to lime scale.
src/components/sds/App/index.tsx	Removes local app-logo fallback data; prefers protocol icons/favicons.
src/components/sds/App/data.ts	Removes embedded base64 SDS app logo dataset.
src/components/screens/HomeScreen/ManageAccounts.tsx	Makes navigation optional; adds showAddWallet toggle for reuse in Discover.
src/components/screens/HomeScreen/ManageAccountBottomSheet.tsx	Conditionally renders “Add wallet” button based on showAddWallet.
src/components/screens/DiscoveryScreen/components/index.ts	Updates component exports to new BottomNavigationBar.
src/components/screens/DiscoveryScreen/components/VerticalListSection.tsx	Adds vertical list section component for Recents/DApps preview.
src/components/screens/DiscoveryScreen/components/TrendingCarouselSection.tsx	Adds wrapper section around the trending carousel + title behavior.
src/components/screens/DiscoveryScreen/components/TabOverview.tsx	Redesigns tab overview footer/actions using a context menu.
src/components/screens/DiscoveryScreen/components/SectionTitle.tsx	Adds reusable tappable section header with chevron.
src/components/screens/DiscoveryScreen/components/ProtocolRow.tsx	Adds row UI for protocol list items with “Open” CTA.
src/components/screens/DiscoveryScreen/components/ProtocolDetailsBottomSheet.tsx	Adds protocol details bottom sheet prior to navigation.
src/components/screens/DiscoveryScreen/components/ExpandedSectionView.tsx	Adds full-screen expanded list view for sections.
src/components/screens/DiscoveryScreen/components/DiscoveryHomepage.tsx	Refactors homepage into Trending/Recents/DApps with expand + details flows.
src/components/screens/DiscoveryScreen/components/DiscoverWelcomeModal.tsx	Adds one-time welcome/onboarding modal for Discover.
src/components/screens/DiscoveryScreen/components/BottomNavigationBar.tsx	Implements unified bottom bar: avatar, back, url/search, menu, tab count.
src/components/screens/DiscoveryScreen/components/UrlBar.tsx	Removes old UrlBar component.
src/components/screens/DiscoveryScreen/components/BottomNavigation.tsx	Removes old BottomNavigation component.
src/components/screens/DiscoveryScreen/DiscoveryScreen.tsx	Integrates new nav bar, welcome modal, account switch sheet, and analytics hooks.
src/components/screens/BiometricsEnableScreen/BiometricsEnableScreen.tsx	Switches image import to centralized assets/images export.
src/components/TrendingCarousel.tsx	Adds reusable trending carousel + card rendering.
src/components/TrendingCardImage.tsx	Adds card background image handling with timeout + placeholder.
src/assets/images/iphone-frame.png	Adds/updates the iPhone frame image asset.
src/assets/images/index.ts	Centralizes image exports via images object.
src/assets/icons/chevron-right-bold.svg	Adds chevron-right-bold SVG asset.
tests/services/analytics/discover.test.ts	Adds unit coverage for new Discover analytics helpers.
tests/hooks/useBrowserActions.test.tsx	Updates tests to cover new Discover analytics behavior in browser actions.
tests/helpers/protocols.test.ts	Updates protocol fixtures for new DiscoverProtocol shape.
tests/ducks/protocols.test.ts	Updates protocol store tests for new DiscoverProtocol shape.

---

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

[Copilot]

Pull request overview

Copilot reviewed 44 out of 46 changed files in this pull request and generated 1 comment.

---

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

[Copilot]

useRecentProtocolsStore is created with persist(...) and (without skipHydration) will auto-hydrate on store creation. Calling useRecentProtocolsStore.persist.rehydrate() here adds an extra AsyncStorage read on every TabNavigator mount and it also runs even when discoverEnabled is false. Consider removing this call, or (if manual hydration is truly required) set skipHydration: true in the store and only trigger/await a single rehydrate when Discover is enabled.

[socket-security]

Review the following changes in direct dependencies. Learn more about Socket for GitHub.

Diff	Package	Supply Chain Security	Vulnerability	Quality	Maintenance	License
	npm/​react-native-keyboard-controller@​1.21.2

View full report