refactor(predict): use MMDS HeaderStandard

[brianacnguyen]

Description

This PR replaces the temporary HeaderCompactStandard component with HeaderStandard from @metamask/design-system-react-native on Predict screens and sheets.

Reason: Align Predict UI with the MetaMask design system and rely less on component-library/components-temp for standard headers.

What changed:

• Predict feed: Main Predict feed header now uses HeaderStandard with includesTopInset, back handling, and the existing title string. Unused design-system imports (Icon, IconColor, IconSize) were removed from this file after the swap.
• Activity detail: Activity detail screen header uses HeaderStandard with the same title fallback logic (activityDetails?.headerTitle vs. the default activity-details string).
• Unavailable bottom sheet: The “Predict unavailable” sheet header uses HeaderStandard with testID, title, and close behavior unchanged.

Behavior is intended to match the previous headers (navigation, titles, safe area).

Changelog

CHANGELOG entry: null

Related issues

Fixes: https://consensyssoftware.atlassian.net/browse/DSYS-701

Manual testing steps

Feature: Predict headers use design system HeaderStandard

  Scenario: Predict feed header
    Given the user opens Predict from the wallet (Predict feed)
    When they view the header title and tap back
    Then navigation matches prior behavior and the title shows the expected Predict label

  Scenario: Activity detail header
    Given the user opens a Predict activity from history or the feed
    When they view activity details
    Then the header title reflects activity-specific copy when present or the default activity-details string
    When they use the back control
    Then they return to the previous screen as before

  Scenario: Predict unavailable sheet
    Given Predict is unavailable and the bottom sheet is shown
    When the user views the header and closes the sheet
    Then the sheet dismisses as before

Screenshots/Recordings

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 refactor that swaps a temporary header component for the design-system HeaderStandard; primary risk is minor layout/safe-area or button behavior differences across screens/sheets.

Overview
Updates Predict UI to use the design-system HeaderStandard in place of the temporary HeaderCompactStandard on the feed screen, activity detail screen, and the “Predict unavailable” bottom sheet.

Keeps existing titles and back/close wiring (including testIDs and includesTopInset) while removing now-unused icon-related imports in PredictFeed.

^{Reviewed by Cursor Bugbot for commit 391f93a. 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 1 potential issue.

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

[cursor]

Close button may vanish if HeaderStandard lacks onClose

High Severity

The old HeaderCompactStandard explicitly converted its onClose prop into an endButtonIconProps entry with IconName.Close, rendering a visible close button. HeaderStandard from @metamask/design-system-react-native is used elsewhere in the codebase (MoneyHeader, PerpsHomeHeader) but none of those usages pass onClose — they all use endButtonIconProps for end-side actions. If HeaderStandard does not implement the same onClose-to-close-button convenience, this bottom sheet header silently loses its close button, breaking dismiss behavior.

 

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

[github-actions]

🔍 Smart E2E Test Selection

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

click to see 🤖 AI reasoning details

E2E Test Selection:
The PR makes a targeted UI component migration in three Predict-related files, replacing HeaderCompactStandard (a temporary component from component-library/components-temp/) with HeaderStandard (from @metamask/design-system-react-native) in:

1. PredictActivityDetail.tsx - activity details screen header
2. PredictUnavailable.tsx - unavailable state bottom sheet header
3. PredictFeed.tsx - main Predict feed view header (also removes unused Icon/IconColor/IconSize imports)

This is a pure UI component swap with no logic changes. The risk is low — the main concern is visual regression (header rendering, back/close button behavior, title display) in the Predict screens.

Tags selected:

• SmokePredictions: Directly covers Predict functionality including the feed, unavailable state, and activity details screens that were modified.
• SmokeWalletPlatform: Per SmokePredictions description, Predictions is a section inside the Trending tab, so changes to Predictions views affect Trending/SmokeWalletPlatform.
• SmokeConfirmations: Per SmokePredictions description, opening/closing positions are on-chain transactions, so SmokeConfirmations should be included when selecting SmokePredictions.

No other tags are warranted — the changes are isolated to Predict UI components and do not touch navigation, accounts, networks, swaps, browser, snaps, or any other feature area.

Performance Test Selection:
The changes are a simple UI component swap (HeaderCompactStandard → HeaderStandard) with no impact on rendering performance, data loading, state management, or any performance-sensitive code paths. No performance tests are warranted.

View GitHub Actions results

[sonarqubecloud]

Quality Gate passed

Issues
0 New issues
0 Accepted issues

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

See analysis details on SonarQube Cloud