Reality2byte
diff --git a/‎app/components/UI/Perps/Perps.testIds.ts‎
Lines changed: 25 additions & 0 deletions b/‎app/components/UI/Perps/Perps.testIds.ts‎
Lines changed: 25 additions & 0 deletions
diff --git a/‎app/components/UI/Perps/Views/PerpsHomeView/PerpsHomeView.tsx‎
Lines changed: 11 additions & 0 deletions b/‎app/components/UI/Perps/Views/PerpsHomeView/PerpsHomeView.tsx‎
Lines changed: 11 additions & 0 deletions
diff --git a/‎app/components/UI/Perps/Views/PerpsMarketDetailsView/PerpsMarketDetailsView.tsx‎
Lines changed: 17 additions & 3 deletions b/‎app/components/UI/Perps/Views/PerpsMarketDetailsView/PerpsMarketDetailsView.tsx‎
Lines changed: 17 additions & 3 deletions
diff --git a/‎app/components/UI/Perps/Views/PerpsMarketListView/PerpsMarketListView.tsx‎
Lines changed: 33 additions & 27 deletions b/‎app/components/UI/Perps/Views/PerpsMarketListView/PerpsMarketListView.tsx‎
Lines changed: 33 additions & 27 deletions
diff --git a/‎app/components/UI/Perps/Views/PerpsMarketListView/PerpsMarketListView.view.test.tsx‎
Lines changed: 3 additions & 5 deletions b/‎app/components/UI/Perps/Views/PerpsMarketListView/PerpsMarketListView.view.test.tsx‎
Lines changed: 3 additions & 5 deletions
diff --git a/‎app/components/UI/Perps/Views/PerpsMarketListView/components/PerpsMarketFiltersBar/PerpsMarketFiltersBar.tsx‎
Lines changed: 17 additions & 9 deletions b/‎app/components/UI/Perps/Views/PerpsMarketListView/components/PerpsMarketFiltersBar/PerpsMarketFiltersBar.tsx‎
Lines changed: 17 additions & 9 deletions
diff --git a/‎app/components/UI/Perps/Views/PerpsMarketListView/components/PerpsMarketFiltersBar/PerpsMarketFiltersBar.types.ts‎
Lines changed: 15 additions & 0 deletions b/‎app/components/UI/Perps/Views/PerpsMarketListView/components/PerpsMarketFiltersBar/PerpsMarketFiltersBar.types.ts‎
Lines changed: 15 additions & 0 deletions
@@ -148,8 +148,24 @@ export const PerpsMarketListViewSelectorsIDs = {
   MARKET_LIST: 'perps-market-list',
   SORT_FILTERS: 'perps-market-list-sort-filters',
   WATCHLIST_TOGGLE: 'perps-market-list-watchlist-toggle',
+  /** Star badge in the category row that filters to watchlisted markets */
+  WATCHLIST_FILTER_BADGE: 'perps-market-list-sort-filters-categories-watchlist',
 };
 
+// ========================================
+// PERPS WATCHLIST SECTION SELECTORS
+// ========================================
+
+export const PerpsWatchlistSelectorsIDs = {
+  SECTION: 'perps-watchlist-section',
+  HEADER: 'perps-watchlist-header',
+  EMPTY_STATE: 'perps-watchlist-empty-state',
+  SHOW_MORE_BUTTON: 'perps-watchlist-show-more-button',
+  SHOW_LESS_BUTTON: 'perps-watchlist-show-less-button',
+  SUGGESTED_SECTION: 'perps-watchlist-suggested-section',
+  SUGGESTED_HEADER: 'perps-watchlist-suggested-header',
+} as const;
+
 // ========================================
 // PERPS MARKET ROW ITEM SELECTORS
 // ========================================
@@ -166,6 +182,8 @@ export const getPerpsMarketRowItemSelector = {
     `${PerpsMarketRowItemSelectorsIDs.ROW_ITEM}-${symbol}-token-logo`,
   badge: (symbol: string) =>
     `${PerpsMarketRowItemSelectorsIDs.ROW_ITEM}-${symbol}-badge`,
+  addButton: (symbol: string) =>
+    `${PerpsMarketRowItemSelectorsIDs.ROW_ITEM}-${symbol}-add-button`,
 };
 
 // ========================================
@@ -238,6 +256,13 @@ export const PerpsHomeViewSelectorsIDs = {
   TAB_BAR_ACTIVITY: 'tab-bar-item-activity',
 };
 
+export const PerpsTabViewSelectorsIDs = {
+  START_NEW_TRADE_CTA: 'perps-tab-view-start-new-trade-cta',
+  GEO_BLOCK_BOTTOM_SHEET_TOOLTIP:
+    'perps-tab-view-geo-block-bottom-sheet-tooltip',
+  SCROLL_VIEW: 'perps-tab-scroll-view',
+} as const;
+
 export const PerpsPositionsViewSelectorsIDs = {
   REFRESH_CONTROL: 'refresh-control',
   BACK_BUTTON: 'back-button',
 
@@ -243,6 +243,7 @@ const PerpsHomeView = ({
     positions,
     orders,
     watchlistMarkets,
+    suggestedWatchlistMarkets,
     perpsMarkets, // Crypto markets (renamed from trendingMarkets)
     commoditiesMarkets, // Commodity markets
     stocksMarkets, // Equity markets only
@@ -743,11 +744,21 @@ const PerpsHomeView = ({
         {/* Watchlist Section */}
         <PerpsWatchlistMarkets
           markets={watchlistMarkets}
+          suggestedMarkets={suggestedWatchlistMarkets}
           isLoading={isLoading.markets}
           positions={positions}
           orders={orders}
           source={PERPS_EVENT_VALUE.SOURCE.PERPS_HOME}
           transactionActiveAbTests={transactionActiveAbTests}
+          onSeeAllPress={
+            watchlistMarkets.length > 0
+              ? () =>
+                  perpsNavigation.navigateToMarketList({
+                    showWatchlistOnly: true,
+                    source: PERPS_EVENT_VALUE.SOURCE.PERPS_HOME,
+                  })
+              : undefined
+          }
         />
 
         {/* Products Section - Category pills grid */}
 
@@ -116,6 +116,8 @@ import { usePerpsMeasurement } from '../../hooks/usePerpsMeasurement';
 import { usePerpsOICap } from '../../hooks/usePerpsOICap';
 import { usePerpsTPSLUpdate } from '../../hooks/usePerpsTPSLUpdate';
 import { useStopLossPrompt } from '../../hooks/useStopLossPrompt';
+import usePerpsToasts from '../../hooks/usePerpsToasts';
+import { WATCHLIST_LIMIT } from '../../utils/marketUtils';
 import { selectPerpsChartPreferredCandlePeriod } from '../../selectors/chartPreferences';
 import {
   selectPerpsButtonColorTestVariant,
@@ -200,6 +202,7 @@ const PerpsMarketDetailsView: React.FC<PerpsMarketDetailsViewProps> = () => {
     transactionActiveAbTests,
   } = route.params || {};
   const { track } = usePerpsEventTracking();
+  const { showToast, PerpsToastOptions } = usePerpsToasts();
 
   // Get full market data from stream to ensure all fields (including maxLeverage) are available
   // This handles cases where navigation passes minimal market data (e.g., from Recent Activity)
@@ -674,12 +677,23 @@ const PerpsMarketDetailsView: React.FC<PerpsMarketDetailsViewProps> = () => {
   const handleWatchlistPress = useCallback(() => {
     if (!market?.symbol) return;
 
+    const controller = Engine.context.PerpsController;
+    const isAdding = !isWatchlist;
+
+    // Guard: block adding when the watchlist is already full
+    if (
+      isAdding &&
+      controller.getWatchlistMarkets().length >= WATCHLIST_LIMIT
+    ) {
+      showToast(PerpsToastOptions.watchlist.limitReached);
+      return;
+    }
+
     // Optimistic update - instant UI feedback
-    const newWatchlistState = !isWatchlist;
+    const newWatchlistState = isAdding;
     setOptimisticWatchlist(newWatchlistState);
 
     // Actual state update
-    const controller = Engine.context.PerpsController;
     controller.toggleWatchlistMarket(market.symbol);
 
     // Track watchlist toggle event
@@ -695,7 +709,7 @@ const PerpsMarketDetailsView: React.FC<PerpsMarketDetailsViewProps> = () => {
       [PERPS_EVENT_PROPERTY.SOURCE]: PERPS_EVENT_VALUE.SOURCE.PERP_ASSET_SCREEN,
       [PERPS_EVENT_PROPERTY.FAVORITES_COUNT]: watchlistCount,
     });
-  }, [market, isWatchlist, track]);
+  }, [market, isWatchlist, track, showToast, PerpsToastOptions]);
 
   const handleCategorySearchPress = useCallback(() => {
     if (!market) return;
 
@@ -16,6 +16,7 @@ import PerpsMarketBalanceActions from '../../components/PerpsMarketBalanceAction
 import PerpsMarketSortFieldBottomSheet from '../../components/PerpsMarketSortFieldBottomSheet';
 import PerpsMarketFiltersBar from './components/PerpsMarketFiltersBar';
 import PerpsMarketList from '../../components/PerpsMarketList';
+import PerpsWatchlistMarkets from '../../components/PerpsWatchlistMarkets/PerpsWatchlistMarkets';
 import {
   usePerpsMarketListView,
   usePerpsMeasurement,
@@ -92,7 +93,13 @@ const PerpsMarketListView = ({
   const { selectedOptionId, sortBy, direction, handleOptionChange } = sortState;
 
   // Destructure favorites state for easier access
-  const { showFavoritesOnly } = favoritesState;
+  const {
+    showFavoritesOnly,
+    setShowFavoritesOnly,
+    hasWatchlistMarkets,
+    watchlistMarketObjects,
+    suggestedMarkets,
+  } = favoritesState;
 
   // Destructure market type filter state
   const { marketTypeFilter, setMarketTypeFilter } = marketTypeFilterState;
@@ -115,7 +122,7 @@ const PerpsMarketListView = ({
 
   const { track } = usePerpsEventTracking();
 
-  // Handle category badge selection
+  // Handle category badge selection — clears watchlist filter (mutual exclusivity)
   const handleCategorySelect = useCallback(
     (category: MarketTypeFilter) => {
       if (category !== 'all') {
@@ -128,10 +135,23 @@ const PerpsMarketListView = ({
         });
       }
       setMarketTypeFilter(category);
+      // Deactivate the watchlist filter whenever a category badge is activated
+      if (category !== 'all') {
+        setShowFavoritesOnly(false);
+      }
     },
-    [setMarketTypeFilter, track],
+    [setMarketTypeFilter, setShowFavoritesOnly, track],
   );
 
+  // Toggle watchlist-only filter — clears category filter (mutual exclusivity)
+  const handleWatchlistToggle = useCallback(() => {
+    const willActivate = !showFavoritesOnly;
+    setShowFavoritesOnly(willActivate);
+    if (willActivate) {
+      setMarketTypeFilter('all');
+    }
+  }, [showFavoritesOnly, setShowFavoritesOnly, setMarketTypeFilter]);
+
   useEffect(() => {
     if (filteredMarkets.length > 0) {
       Animated.timing(fadeAnimation, {
@@ -221,31 +241,14 @@ const PerpsMarketListView = ({
       );
     }
 
-    // Empty favorites results - show when favorites filter is active but no favorites found
-    if (showFavoritesOnly && filteredMarkets.length === 0) {
+    // Empty watchlist — show suggested markets with the same default state as PerpsHome
+    if (showFavoritesOnly && !hasWatchlistMarkets) {
       return (
-        <View style={styles.emptyStateContainer}>
-          <Icon
-            name={IconName.Star}
-            size={IconSize.Xl}
-            color={theme.colors.icon.muted}
-            style={styles.emptyStateIcon}
-          />
-          <Text
-            variant={TextVariant.HeadingSM}
-            color={TextColor.Default}
-            style={styles.emptyStateTitle}
-          >
-            {strings('perps.no_favorites_found')}
-          </Text>
-          <Text
-            variant={TextVariant.BodyMD}
-            color={TextColor.Alternative}
-            style={styles.emptyStateDescription}
-          >
-            {strings('perps.no_favorites_description')}
-          </Text>
-        </View>
+        <PerpsWatchlistMarkets
+          markets={watchlistMarketObjects}
+          suggestedMarkets={suggestedMarkets}
+          showHeader={false}
+        />
       );
     }
 
@@ -335,6 +338,9 @@ const PerpsMarketListView = ({
           onSortPress={() => setIsSortFieldSheetVisible(true)}
           marketTypeFilter={marketTypeFilter}
           onCategorySelect={handleCategorySelect}
+          showWatchlistBadge
+          isWatchlistSelected={showFavoritesOnly}
+          onWatchlistToggle={handleWatchlistToggle}
           testID={PerpsMarketListViewSelectorsIDs.SORT_FILTERS}
         />
       )}
 
@@ -94,16 +94,14 @@ describe('PerpsMarketListView', () => {
       });
     });
 
-    it('shows empty favorites state when view starts in watchlist-only mode with no favorites', async () => {
+    it('shows empty watchlist state when view starts in watchlist-only mode with no favorites', async () => {
       renderPerpsMarketListView({
         initialParams: { showWatchlistOnly: true },
+        streamOverrides: { marketData: marketDataWithCategories },
       });
 
       expect(
-        await screen.findByText(strings('perps.no_favorites_found')),
-      ).toBeOnTheScreen();
-      expect(
-        screen.getByText(strings('perps.no_favorites_description')),
+        await screen.findByText(strings('perps.watchlist.empty_subtitle')),
       ).toBeOnTheScreen();
     });
   });
 
@@ -28,27 +28,35 @@ const PerpsMarketFiltersBar: React.FC<PerpsMarketFiltersBarProps> = ({
   onSortPress,
   marketTypeFilter,
   onCategorySelect,
+  showWatchlistBadge,
+  isWatchlistSelected,
+  onWatchlistToggle,
   testID,
 }) => {
   const { styles } = useStyles(styleSheet, {});
 
   return (
     <View style={styles.container} testID={testID}>
-      {/* Row 1: Category Badges */}
+      {/* Row 1: Category Badges (+ optional watchlist star badge) */}
       <PerpsMarketCategoryBadges
         selectedCategory={marketTypeFilter}
         onCategorySelect={onCategorySelect}
+        showWatchlistBadge={showWatchlistBadge}
+        isWatchlistSelected={isWatchlistSelected}
+        onWatchlistToggle={onWatchlistToggle}
         testID={testID ? `${testID}-categories` : undefined}
       />
 
-      {/* Row 2: Sort Dropdown */}
-      <View style={styles.sortRow}>
-        <PerpsMarketSortDropdowns
-          selectedOptionId={selectedOptionId}
-          onSortPress={onSortPress}
-          testID={testID ? `${testID}-sort` : undefined}
-        />
-      </View>
+      {/* Row 2: Sort Dropdown — hidden when watchlist filter is active */}
+      {!isWatchlistSelected && (
+        <View style={styles.sortRow}>
+          <PerpsMarketSortDropdowns
+            selectedOptionId={selectedOptionId}
+            onSortPress={onSortPress}
+            testID={testID ? `${testID}-sort` : undefined}
+          />
+        </View>
+      )}
     </View>
   );
 };
 
@@ -27,6 +27,21 @@ export interface PerpsMarketFiltersBarProps {
    */
   onCategorySelect: (category: MarketTypeFilter) => void;
 
+  /**
+   * Whether to show the watchlist (star) filter badge.
+   */
+  showWatchlistBadge?: boolean;
+
+  /**
+   * Whether the watchlist filter badge is currently active
+   */
+  isWatchlistSelected?: boolean;
+
+  /**
+   * Callback when the watchlist badge is pressed
+   */
+  onWatchlistToggle?: () => void;
+
   /**
    * Optional test ID for testing
    */