feat(predict): implement featured carousel

[ghgoodreau]

Description

Adds a horizontally-scrollable featured carousel to the top of the Predict feed. The carousel is populated from Polymarket's homepage carousel API (polymarket.com/api/homepage/carousel), which returns their curated high-engagement markets — politics, sports, crypto, etc.

Two card variants:

• Standard markets (politics, crypto, etc.): Single market icon above title, two outcomes side-by-side with payout prices ($100 → $159.98), percentage CTA buttons, and a footer with remaining outcomes count + end date + volume.
• Sport markets (NBA, UCL, NFL): League name + live indicator header, team logos flanking scores, team names with payout prices, percentage/draw buttons (draw only for isDrawCapableLeague), and footer with time remaining + volume.

The carousel is gated behind a predictFeaturedCarousel remote feature flag (version-gated, defaults to false). When enabled, it renders between the balance header and the tab bar in the Predict feed.

The carousel API returns outcomes, outcomePrices, and clobTokenIds as native arrays (unlike the gamma API which returns them as JSON strings), so the fetch layer normalizes them to strings before passing to the existing parsePolymarketEvents parser.

Data flow follows existing patterns: useFeaturedCarouselData → PredictController.getCarouselMarkets() → PolymarketProvider.getCarouselMarkets() → fetchCarouselFromPolymarketApi() with full team loading, TeamsCache, and GameCache.overlayOnMarkets().

Changelog

CHANGELOG entry: Added featured carousel to the top of the Predict feed showing curated markets from Polymarket

Related issues

Fixes: https://consensyssoftware.atlassian.net/browse/PRED-533

Manual testing steps

Feature: Featured Carousel on Predict Feed

  Scenario: carousel renders with live market data
    Given the predictFeaturedCarousel feature flag is enabled
    And the user navigates to the Predict feed

    When the feed loads
    Then a horizontal carousel appears between the balance header and the tab bar
    And it contains cards populated from the Polymarket homepage carousel API
    And pagination dots appear below the carousel matching the number of cards

  Scenario: user swipes through carousel cards
    Given the carousel is visible with multiple cards

    When the user swipes left on the carousel
    Then the next card snaps into view
    And the active pagination dot updates to reflect the current card

  Scenario: standard market card displays correctly
    Given a non-sport market card is visible (e.g. "US forces enter Iran by..?")

    Then the card shows a single market icon above the title
    And two outcomes are displayed side-by-side with names and payout prices
    And each outcome has a percentage CTA button (e.g. "47%", "45%")
    And the footer shows remaining outcomes count and volume

  Scenario: sport market card displays correctly
    Given a sport market card is visible (e.g. an NBA or UCL match)

    Then the card shows the league name and live indicator in the header
    And team logos appear on the left and right with scores between them
    And team names and payout prices appear below the logos
    And percentage buttons appear for each team
    And a Draw button appears between team buttons for UCL matches only
    And the footer shows time remaining and volume

  Scenario: tapping a carousel card opens market details
    Given any carousel card is visible

    When the user taps the card
    Then the app navigates to the full market detail screen for that market

  Scenario: tapping a buy button opens the buy preview
    Given a carousel card with percentage CTA buttons is visible

    When the user taps a percentage button on a standard card
    Then the buy preview screen opens for that outcome

  Scenario: carousel is hidden when feature flag is disabled
    Given the predictFeaturedCarousel feature flag is not set or disabled

    When the user navigates to the Predict feed
    Then no carousel is visible
    And the feed renders as before with just the balance header and tabs

Screenshots/Recordings

Before

After

demopredictcarousel.mov

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.

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

Medium Risk
Adds a new feed surface plus a new provider/controller fetch path hitting an external endpoint and normalizing/deriving sports data, which could impact feed performance and correctness if API responses change. Feature-flag gating and extensive tests reduce rollout risk.

Overview
Adds a new featured carousel section to the top of the Predict feed (behind the remote flag predictTabFeaturedCarousel), rendering a horizontally snapping list with pagination dots and skeleton loading.

Introduces two new card variants (FeaturedCarouselCard and FeaturedCarouselSportCard) with buy CTAs that route through existing guarded navigation to market details and buy preview, plus shared footer/payout formatting utilities.

Wires a new data path useFeaturedCarouselData → React Query featuredCarousel query → PredictController.getCarouselMarkets() → provider getCarouselMarkets(); implements Polymarket support by calling the homepage carousel endpoint, normalizing array fields (outcomes, outcomePrices, clobTokenIds) to the parser’s expected format, filtering invalid markets, and reusing Teams/Game cache overlays when live sports is enabled. Adds comprehensive unit tests across UI, hooks, controller, provider, and utils.

^{Reviewed by Cursor Bugbot for commit a15d264. 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.

[matallui]

Why use StyleSheet? I believe this is against the UI guidelines.

[ghgoodreau]

This is from bringing over some of my system prompts/skills from extension dev env. Switched to tw and removed those so it shouldn't occur again

[matallui]

Let's use React Query for this. We are in the process of transitioning all of our queries to RQ, so some hooks might not have it yet, but all new hooks should use it. Take a look at other queries under queries/

[ghgoodreau]

Done! Will use from now on.

[matallui]

I wonder if we could extract this logic out of here, since it seems we are repeating it in a few places now.

[ghgoodreau]

Done! Great suggestion, let me know what you think

[matallui]

Why the need for this here? I would only add this here once we have the need to override the logo for certain leagues, otherwise we keep the default behavior (which should use the data from the API)

[ghgoodreau]

The Figma had some logos that I didn't recognize from the codebase, so added this here to future proof it. I agree though, I will cut it to simplify and can always add it back (or similar) later. The current code fetches from the API.

[cursor]

Cursor Bugbot has reviewed your changes and found 1 potential issue.

There are 2 total unresolved issues (including 1 from previous review).

^{❌ 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 269d36c. Configure here.}

[github-actions]

🔍 Smart E2E Test Selection

• Selected E2E tags: SmokePredictions, SmokeWalletPlatform, SmokeConfirmations
• Selected Performance tags: @PerformancePredict
• Risk Level: medium
• AI Confidence: 88%

click to see 🤖 AI reasoning details

E2E Test Selection:
The changes are scoped to the Predict/Polymarket feature area, introducing a new FeaturedCarousel component in the PredictFeed view. Key changes include:

1. New FeaturedCarousel component - A horizontally scrollable FlashList-based carousel for featured prediction markets, gated behind the predictTabFeaturedCarousel feature flag (disabled by default in prod).
2. PredictController.getCarouselMarkets() - New method to fetch carousel markets from the provider.
3. PolymarketProvider.getCarouselMarkets() - New method + fetchCarouselFromPolymarketApi() utility + refactored #ensureTeamsLoadedForEvents() helper (clean extraction, no behavioral change to existing methods).
4. Feature flag - predictTabFeaturedCarousel added to the registry (disabled in prod).
5. PredictFeed - Modified to conditionally render FeaturedCarousel in the header.

SmokePredictions: Directly required - the PredictFeed view is modified with a new carousel component, PredictController is extended, and the Polymarket provider has new functionality. E2E tests should verify the Predictions feature still works correctly (positions, balance, activities).

SmokeWalletPlatform: Required per tag description - Predictions is a section inside the Trending tab, and changes to Predictions views affect Trending/SmokeWalletPlatform.

SmokeConfirmations: Required per SmokePredictions tag description - opening/closing positions are on-chain transactions requiring confirmations.

The feature flag is disabled by default in prod, so the carousel won't be visible in standard E2E tests, but the underlying PredictFeed modifications and provider changes still need validation to ensure existing flows aren't broken.

Performance Test Selection:
The PredictFeed view now includes a new FeaturedCarousel component using FlashList for horizontal scrolling of market cards. This adds a new rendering layer to the Predictions feed that could impact the performance of the Predict market list loading and display. The @PerformancePredict tag covers prediction market list loading and balance display, which is directly affected by the new carousel component in the PredictFeed header.

View GitHub Actions results

[github-actions]

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

[sonarqubecloud]

Quality Gate passed

Issues
5 New issues
0 Accepted issues

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

See analysis details on SonarQube Cloud