fix(predict): show predict claim button and carousel when claimable positions

app/components/Views/Homepage/Sections/Predictions/PredictionsSection.test.tsx

@@ -578,6 +578,136 @@ describe('PredictionsSection', () => {
     });
   });
 
+  describe('claimable-only (no active positions)', () => {
+    const setupClaimableOnly = () => {
+      mockUsePredictPositionsForHomepage.mockImplementation(
+        ({
+          claimable = false,
+        }: { maxPositions?: number; claimable?: boolean } = {}) => ({
+          positions: claimable ? mockClaimablePositions : [],
+          isLoading: false,
+          error: null,
+          totalClaimableValue: claimable ? 200 : 0,
+          refetch: jest.fn(),
+        }),
+      );
+    };
+
+    it('renders claim button when only claimable positions exist', async () => {
+      setupClaimableOnly();
+
+      renderWithProvider(
+        <PredictionsSection sectionIndex={0} totalSectionsLoaded={1} />,
+      );
+
+      await waitFor(() => {
+        expect(screen.getByText('Claim $200.00')).toBeOnTheScreen();
+      });
+    });
+
+    it('renders trending carousel above claim button when no active positions', async () => {
+      setupClaimableOnly();
+      mockUsePredictMarketsForHomepage.mockReturnValue({
+        markets: mockMarkets,
+        isLoading: false,
+        error: null,
+        refetch: jest.fn(),
+      });
+
+      renderWithProvider(
+        <PredictionsSection sectionIndex={0} totalSectionsLoaded={1} />,
+      );
+
+      await waitFor(() => {
+        expect(screen.getByText('Claim $200.00')).toBeOnTheScreen();
+        expect(screen.getByText('Will BTC reach 100k?')).toBeOnTheScreen();
+      });
+    });
+
+    it('renders only claim button when no active positions and no markets', async () => {
+      setupClaimableOnly();
+      mockUsePredictMarketsForHomepage.mockReturnValue({
+        markets: [],
+        isLoading: false,
+        error: null,
+        refetch: jest.fn(),
+      });
+
+      renderWithProvider(
+        <PredictionsSection sectionIndex={0} totalSectionsLoaded={1} />,
+      );
+
+      await waitFor(() => {
+        expect(screen.getByText('Claim $200.00')).toBeOnTheScreen();
+      });
+      expect(screen.queryByText('Will BTC reach 100k?')).not.toBeOnTheScreen();
+    });
+
+    it('does not render active position rows in claimable-only state', async () => {
+      setupClaimableOnly();
+
+      renderWithProvider(
+        <PredictionsSection sectionIndex={0} totalSectionsLoaded={1} />,
+      );
+
+      await waitFor(() => {
+        expect(screen.getByText('Claim $200.00')).toBeOnTheScreen();
+      });
+      expect(screen.queryByText('Test Position 1')).not.toBeOnTheScreen();
+      expect(screen.queryByText('Test Position 2')).not.toBeOnTheScreen();
+    });
+  });
+
+  describe('positions-only mode with claimable-only', () => {
+    it('renders claim button when only claimable positions exist', async () => {
+      mockUsePredictPositionsForHomepage.mockImplementation(
+        ({
+          claimable = false,
+        }: { maxPositions?: number; claimable?: boolean } = {}) => ({
+          positions: claimable ? mockClaimablePositions : [],
+          isLoading: false,
+          error: null,
+          totalClaimableValue: claimable ? 200 : 0,
+          refetch: jest.fn(),
+        }),
+      );
+
+      renderWithProvider(
+        <PredictionsSection
+          sectionIndex={0}
+          totalSectionsLoaded={5}
+          mode="positions-only"
+        />,
+      );
+
+      await waitFor(() => {
+        expect(screen.getByText('Claim $200.00')).toBeOnTheScreen();
+      });
+    });
+
+    it('returns null when no active and no claimable positions', () => {
+      mockUsePredictPositionsForHomepage.mockImplementation(
+        (_options: { maxPositions?: number; claimable?: boolean } = {}) => ({
+          positions: [],
+          isLoading: false,
+          error: null,
+          totalClaimableValue: 0,
+          refetch: jest.fn(),
+        }),
+      );
+
+      const { toJSON } = renderWithProvider(
+        <PredictionsSection
+          sectionIndex={0}
+          totalSectionsLoaded={5}
+          mode="positions-only"
+        />,
+      );
+
+      expect(toJSON()).toBeNull();
+    });
+  });
+
   describe('privacy mode', () => {
     beforeEach(() => {
       mockSelectPrivacyMode.mockReturnValue(true);

app/components/Views/Homepage/Sections/Predictions/PredictionsSection.tsx

@@ -70,11 +70,13 @@
   isLoadingMarkets: boolean;
   markets: PredictMarket[];
   transactionActiveAbTests?: TransactionActiveAbTestEntry[];
+  /** When false the section header is omitted (e.g. carousel shown below positions). */
+  showHeader?: boolean;
 }
 
 /**
  * Shared header + horizontal markets carousel for homepage predictions
- * (default “trending when empty” and dedicated trending-only section).
+ * (default "trending when empty" and dedicated trending-only section).
  */
 const HomepagePredictTrendingMarkets = ({
   title,
@@ -83,15 +85,20 @@
   isLoadingMarkets,
   markets,
   transactionActiveAbTests,
+  showHeader = true,
 }: HomepagePredictTrendingMarketsProps) => {
   const tw = useTailwind();
   return (
     <Box gap={3}>
-      <SectionHeader
-        title={title}
-        onPress={onViewAll}
-        testID={WalletViewSelectorsIDs.HOMEPAGE_SECTION_TITLE(headerTestIdKey)}
-      />
+      {showHeader && (
+        <SectionHeader
+          title={title}
+          onPress={onViewAll}
+          testID={WalletViewSelectorsIDs.HOMEPAGE_SECTION_TITLE(
+            headerTestIdKey,
+          )}
+        />
+      )}
       <ScrollView
         horizontal
         showsHorizontalScrollIndicator={false}
@@ -180,6 +187,7 @@
   predictHomepageUnrealizedPnl: PredictHomepageUnrealizedPnlRowState;
   onClaim: () => Promise<void>;
   onPositionPress: (position: PredictPosition) => void;
+  showHeader?: boolean;
 }
 
 const HomepagePredictPositions = ({
@@ -193,24 +201,27 @@
   predictHomepageUnrealizedPnl,
   onClaim,
   onPositionPress,
+  showHeader = true,
 }: HomepagePredictPositionsProps) => (
   <Box gap={3}>
-    <Box gap={1}>
-      <SectionHeader
-        title={title}
-        onPress={onViewAll}
-        testID={WalletViewSelectorsIDs.HOMEPAGE_SECTION_TITLE('predictions')}
-      />
-      {predictHomepageUnrealizedPnl.show && (
-        <HomepageSectionUnrealizedPnlRow
-          isLoading={predictHomepageUnrealizedPnl.isLoading}
-          valueText={predictHomepageUnrealizedPnl.valueText}
-          tone={predictHomepageUnrealizedPnl.tone}
-          label={strings('predict.unrealized_pnl_label')}
-          testID="homepage-predict-unrealized-pnl"
+    {showHeader && (
+      <Box gap={1}>
+        <SectionHeader
+          title={title}
+          onPress={onViewAll}
+          testID={WalletViewSelectorsIDs.HOMEPAGE_SECTION_TITLE('predictions')}
         />
-      )}
-    </Box>
+        {predictHomepageUnrealizedPnl.show && (
+          <HomepageSectionUnrealizedPnlRow
+            isLoading={predictHomepageUnrealizedPnl.isLoading}
+            valueText={predictHomepageUnrealizedPnl.valueText}
+            tone={predictHomepageUnrealizedPnl.tone}
+            label={strings('predict.unrealized_pnl_label')}
+            testID="homepage-predict-unrealized-pnl"
+          />
+        )}
+      </Box>
+    )}
     <Box>
       {isLoadingPositions ? (
         <>
@@ -355,6 +366,7 @@
   }, [claim]);
 
   const hasPositions = positions.length > 0;
+  const hasClaimablePositions = !isLoadingClaimable && totalClaimableValue > 0;
   const {
     data: predictUnrealizedPnL,
     isLoading: isPredictUnrealizedPnLLoading,
@@ -388,6 +400,7 @@
     isLoadingClaimable,
     handleClaim,
     hasPositions,
+    hasClaimablePositions,
     predictHomepageUnrealizedPnl,
   };
 };
@@ -428,6 +441,7 @@
       isLoadingClaimable,
       handleClaim,
       hasPositions,
+      hasClaimablePositions,
       predictHomepageUnrealizedPnl,
     } = usePredictPositionsSectionData(isPredictEnabled);
     const {
@@ -439,17 +453,24 @@
       enabled: isPredictEnabled,
     });
 
-    const isLoading = isLoadingPositions || isLoadingMarkets;
+    const hasAnyPositions = hasPositions || hasClaimablePositions;
+    const isLoading =
+      isLoadingPositions || isLoadingMarkets || isLoadingClaimable;
     const hasError =
       !isLoadingPositions &&
       !isLoadingMarkets &&
-      !hasPositions &&
+      !isLoadingClaimable &&
+      !hasAnyPositions &&
       markets.length === 0 &&
       (positionsError || marketsError);
     const isEmpty =
-      !isLoading && !hasPositions && markets.length === 0 && !hasError;
+      !isLoading && !hasAnyPositions && markets.length === 0 && !hasError;
     const willRender = isPredictEnabled && !isLoading && !isEmpty && !hasError;
-    const itemCount = hasPositions ? positions.length : markets.length;
+    const itemCount = hasPositions
+      ? positions.length
+      : hasClaimablePositions
+        ? markets.length || 1
+        : markets.length;
 
     const { onLayout } = useHomeViewedEvent({
       sectionRef: willRender ? sectionViewRef : null,
@@ -484,11 +505,28 @@
       return null;
     }
 
-    if (hasPositions || isLoadingPositions) {
+    if (hasAnyPositions || isLoadingPositions || isLoadingClaimable) {
+      const showTrendingAbove =
+        !hasPositions &&
+        !isLoadingPositions &&
+        (isLoadingMarkets || markets.length > 0);
+
       return (
         <View ref={sectionViewRef} onLayout={onLayout}>
+          {showTrendingAbove && (
+            <Box paddingBottom={3}>
+              <HomepagePredictTrendingMarkets
+                title={title}
+                onViewAll={handleViewAllPredictions}
+                headerTestIdKey="predictions"
+                isLoadingMarkets={isLoadingMarkets}
+                markets={markets}
+              />
+            </Box>
+          )}
           <HomepagePredictPositions
             title={title}
+            showHeader={!showTrendingAbove}
             onViewAll={handleViewAllFromPositions}
             privacyMode={privacyMode}
             isLoadingPositions={isLoadingPositions}
@@ -555,19 +593,26 @@
       isLoadingClaimable,
       handleClaim,
       hasPositions,
+      hasClaimablePositions,
       predictHomepageUnrealizedPnl,
     } = usePredictPositionsSectionData(isPredictEnabled);
 
-    const willRender = isPredictEnabled && !isLoadingPositions && hasPositions;
-    const itemCount = positions.length;
+    const hasAnyPositions = hasPositions || hasClaimablePositions;
+    const isLoading = isLoadingPositions || isLoadingClaimable;
+    const willRender = isPredictEnabled && !isLoading && hasAnyPositions;
+    const itemCount = hasPositions
+      ? positions.length
+      : hasClaimablePositions
+        ? 1
+        : 0;
 
     const { onLayout } = useHomeViewedEvent({
       sectionRef: willRender ? sectionViewRef : null,
-      isLoading: isLoadingPositions,
+      isLoading,
       sectionName: analyticsName,
       sectionIndex,
       totalSectionsLoaded,
-      isEmpty: !isLoadingPositions && !hasPositions,
+      isEmpty: !isLoading && !hasAnyPositions,
       itemCount,
     });
 
@@ -578,7 +623,7 @@
 
     useImperativeHandle(ref, () => ({ refresh }), [refresh]);
 
-    if (!isPredictEnabled || (!isLoadingPositions && !hasPositions)) {
+    if (!isPredictEnabled || (!isLoading && !hasAnyPositions)) {
       return null;
     }