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

[caieu]

Description

The Claim button on the homepage Predictions section was invisible when the user had only resolved/claimable positions and no active (open) positions. The render gate in PredictionsSectionDefault only checked for active positions (hasPositions), so when all positions were settled the section fell through to the trending markets carousel — which has no claim button.

Root cause: usePredictPositionsForHomepage() (called without options) defaults to claimable: false and returns only active positions. The gate if (hasPositions || isLoadingPositions) therefore evaluated to false when only claimable positions existed, skipping the entire positions view (which contains the claim button).

Fix:

• Introduced hasClaimablePositions derived from totalClaimableValue > 0 after loading completes.
• Updated the render gate in both PredictionsSectionDefault and PredictionsSectionPositionsOnly to consider claimable positions alongside active ones.
• When only claimable positions exist (no active), the featured markets carousel now renders above the claim button with a 16px gap, giving users both discovery and a clear claim affordance.
• Added showHeader prop to HomepagePredictTrendingMarkets and HomepagePredictPositions to avoid duplicate "Predictions >" section headers in the combined view.

Changelog

CHANGELOG entry: null

Related issues

Fixes: PRED-825

Manual testing steps

Feature: Predict claim button visibility on homepage

  Scenario: user sees claim button with only claimable positions
    Given the user has resolved/claimable prediction positions
    And the user has no active (open) prediction positions

    When user navigates to the homepage
    Then the Predictions section displays the featured markets carousel
    And the Claim button with the total claimable amount is visible below the carousel

  Scenario: user sees claim button alongside active positions
    Given the user has both active and claimable prediction positions

    When user navigates to the homepage
    Then the Predictions section displays the active position rows
    And the Claim button with the total claimable amount is visible below the positions
    And the featured markets carousel is not shown

  Scenario: user sees only trending carousel when no positions at all
    Given the user has no prediction positions (neither active nor claimable)

    When user navigates to the homepage
    Then the Predictions section displays only the featured markets carousel
    And no Claim button is visible

Screenshots/Recordings

Screen.Recording.2026-04-16.at.10.58.34.mov

Before

After

Pre-merge author checklist

• I've followed MetaMask Contributor Docs and MetaMask Mobile Coding Standards.
• I've completed the PR template to the best of my ability
• I've included tests if applicable
• I've documented my code using JSDoc format if applicable
• I've applied the right labels on the PR (see labeling guidelines). Not required for external contributors.

Performance checks (if applicable)

• I've tested on Android
  • Ideally on a mid-range device; emulator is acceptable
• I've tested with a power user scenario
  • Use these power-user SRPs to import wallets with many accounts and tokens
• I've instrumented key operations with Sentry traces for production performance metrics
  • See trace() for usage and addToken for an example

For performance guidelines and tooling, see the Performance Guide.

Pre-merge reviewer checklist

• I've manually tested the PR (e.g. pull and build branch, run the app, test code being changed).
• I confirm that this PR addresses all acceptance criteria described in the ticket it closes and includes the necessary testing evidence such as recordings and or screenshots.

---

Note

Low Risk
Low risk UI/render-logic change limited to the homepage Predictions section; main risk is unintended empty/loading gating or duplicated headers affecting what renders and analytics counts.

Overview
Fixes the homepage Predictions section so it renders when users only have claimable (settled) positions, ensuring the Claim button is visible even with no active positions.

When in this claimable-only state, the section can now show the trending markets carousel above the claim button/positions container while avoiding duplicate headers via a new showHeader option on the shared header components, and it updates loading/empty/error gating + itemCount calculations accordingly (including mode="positions-only").

Adds tests covering claimable-only rendering (claim button shown, optional carousel presence, no active rows) and the positions-only null/claimable behaviors.

^{Reviewed by Cursor Bugbot for commit 8b5487e. Bugbot is set up for automated code reviews on this repo. Configure here.}

[github-actions]

CLA Signature Action: All authors have signed the CLA. You may need to manually re-run the blocking PR check if it doesn't pass in a few minutes.

[cursor]

Cursor Bugbot has reviewed your changes and found 2 potential issues.

^{❌ Bugbot Autofix is OFF. To automatically fix reported issues with cloud agents, have a team admin enable autofix in the Cursor dashboard.}

^{Reviewed by Cursor Bugbot for commit 68b3cf4. Configure here.}

[codecov-commenter]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 82.20%. Comparing base (1e37733) to head (da17d89).
⚠️ Report is 12 commits behind head on main.

Additional details and impacted files

@@            Coverage Diff             @@
##             main   #28927      +/-   ##
==========================================
+ Coverage   82.19%   82.20%   +0.01%     
==========================================
  Files        5040     5042       +2     
  Lines      132405   132404       -1     
  Branches    29550    29560      +10     
==========================================
+ Hits       108824   108837      +13     
+ Misses      16175    16167       -8     
+ Partials     7406     7400       -6     

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[github-actions]

🔍 Smart E2E Test Selection

• Selected E2E tags: SmokePredictions, SmokeWalletPlatform, SmokeConfirmations
• Selected Performance tags: None (no tests recommended)
• Risk Level: medium
• AI Confidence: 90%

click to see 🤖 AI reasoning details

E2E Test Selection:
The changes are scoped to PredictionsSection.tsx and its test file. The key changes are:

1. Added showHeader optional prop to HomepagePredictTrendingMarkets and HomepagePredictPositions sub-components to conditionally render section headers.
2. Introduced hasClaimablePositions derived state (users with claimable winnings but no active positions).
3. Updated rendering logic in PredictionsSectionDefault and PredictionsSectionPositionsOnly to handle the claimable-only state: showing trending carousel above the claim button when no active positions exist.
4. Updated isLoading, hasError, isEmpty, willRender, and itemCount calculations to account for claimable positions.

SmokePredictions: Directly required — the changes affect the Predictions section UI, position display, claim button rendering, and the claimable-only state flow. E2E tests for predictions (opening positions, cashing out, claiming winnings, balance sync) need to be validated.

SmokeWalletPlatform: Required per SmokePredictions tag description — Predictions is a section inside the Trending tab. Changes to Predictions views (headers, lists, full views) affect Trending. The showHeader conditional logic and new rendering paths could affect how the Trending tab displays the Predictions section.

SmokeConfirmations: Required per SmokePredictions tag description — opening/closing positions and claiming winnings are on-chain transactions that go through the confirmations flow.

Performance Test Selection:
The changes are limited to conditional rendering logic (showHeader prop) and a new derived boolean state (hasClaimablePositions). These are minor UI logic changes that do not introduce new data fetching, list rendering changes, or performance-sensitive operations. No performance tests are warranted.

View GitHub Actions results

[sonarqubecloud]

Quality Gate passed

Issues
2 New issues
0 Accepted issues

Measures
0 Security Hotspots
100.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud

[github-actions]

✅ E2E Fixture Validation — Schema is up to date
12 value mismatches detected (expected — fixture represents an existing user).
View details