refactor(rewards): use MMDS HeaderStandard

[brianacnguyen]

Description

This PR replaces HeaderCompactStandard with HeaderStandard from @metamask/design-system-react-native across Rewards screens and related sheets, and updates unit tests to match.

Reason: Align Rewards with the MetaMask design system and reduce use of component-library/components-temp for standard headers.

Changelog

CHANGELOG entry: null

Related issues

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

Manual testing steps

Feature: Rewards headers use design system HeaderStandard

  Scenario: Benefits and campaigns
    Given the user opens Rewards benefits (list or single benefit), campaigns list, or campaign mechanics
    When they use the header back control and read titles
    Then navigation and copy match prior behavior

  Scenario: Ondo and Season One campaign flows
    Given the user opens Ondo campaign details, portfolio, or Season One campaign details
    When they navigate back from the header
    Then behavior matches the previous implementation

  Scenario: Rewards settings and auxiliary sheets
    Given the user opens Rewards settings, referral, MUSD calculator, end-of-season claim, linked off-device accounts, opt-in modal, or environment toggle surfaces touched by this PR
    When they dismiss or navigate via the header
    Then sheets and screens behave 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 refactor limited to UI header component swaps and corresponding test updates; main risk is minor visual/layout or testID regressions affecting navigation/back-button automation.

Overview
Rewards screens and sheets now use MMDS HeaderStandard instead of the legacy HeaderCompactStandard component, including benefits, campaigns, referral, settings, calculators, and multiple bottom sheets/modals.

Unit tests were updated to remove HeaderCompactStandard mocks, align back/close button testIDs (e.g., campaign mechanics/details), and add missing Safe Area hook stubs (notably useSafeAreaInsets) so HeaderStandard can render cleanly in Jest.

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

[github-actions]

🔍 Smart E2E Test Selection

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

click to see 🤖 AI reasoning details

E2E Test Selection:
All 31 changed files are confined to the app/components/UI/Rewards/ directory. The changes are a pure component migration: replacing HeaderCompactStandard (a temporary component from component-library/components-temp/) with HeaderStandard (from @metamask/design-system-react-native) across multiple Rewards views and components (BenefitFullView, CampaignsView, CampaignMechanicsView, MusdCalculatorView, OndoCampaignDetailsView, OndoCampaignPortfolioView, RewardsReferralView, RewardsSettingsView, SeasonOneCampaignDetailsView, CampaignViewHeader, EndOfSeasonClaimBottomSheet, LinkedOffDeviceAccountsSheet, RewardOptInAccountGroupModal, RewardsEnvironmentToggle). The functionality is identical — back/close buttons and title display remain the same. No shared components, controllers, navigation, or Engine code is touched. Searching for 'rewards' in .spec.ts files returned zero results, confirming there are no E2E tests for the Rewards feature. The Rewards feature is not covered by any of the available E2E test tags. HeaderCompactStandard remains in use in Perps and Trending components (unchanged in this PR), so those tests are unaffected. This is a low-risk cosmetic refactor with no E2E test coverage needed.

Performance Test Selection:
The changes are a pure header component swap (HeaderCompactStandard → HeaderStandard) within the Rewards feature. There is no impact on data loading, state management, list rendering, animations, or any performance-sensitive code paths. No performance tests are warranted.

View GitHub Actions results

[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 d6a8c44. Configure here.}

[cursor]

includesTopInset prop likely ignored by HeaderStandard

High Severity

Multiple views pass includesTopInset to HeaderStandard, but this prop was specific to the HeaderRoot/HeaderCompactStandard component in components-temp. Existing HeaderStandard usages elsewhere in the codebase (MoneyHeader, PerpsHomeHeader) never use includesTopInset, and no evidence of this prop exists in the design-system package. The affected views (BenefitFullView, BenefitsFullView, CampaignMechanicsView, CampaignsView, OndoCampaignDetailsView, RewardsReferralView, SeasonOneCampaignDetailsView) use SafeAreaView with edges={{ bottom: 'additive' }}, relying entirely on the header for top safe-area inset handling. If HeaderStandard silently ignores includesTopInset, header content will render under the status bar / notch on iOS devices.

Additional Locations (2)

• app/components/UI/Rewards/Views/CampaignsView.tsx#L112-L118
• app/components/UI/Rewards/Views/OndoCampaignDetailsView.tsx#L298-L317

 

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

[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