refactor(perps): use MMDS BannerAlert for service interruption banner

[brianacnguyen]

Description

Align the Perps service interruption (outage) banner with the MetaMask Design System by replacing the custom Box/Text/Icon layout with BannerAlert (BannerAlertSeverity.Warning) and a Contact support action button. Also move the banner above the Perps Home title with 16px bottom spacing so it’s more visible during an outage.

What changed:

• Replaced the custom PerpsServiceInterruptionBanner UI with MMDS BannerAlert (warning severity, title, description, actionButtonLabel / actionButtonOnPress for Contact support)
• Moved the banner on Perps Home from below the title / above balance actions to above the TitleHub, wrapped with px-4 mb-4 (16px bottom spacing)
• Gated rendering with isServiceInterruptionBannerEnabled at the Perps Home placement site
• Updated unit tests to press the Contact support action button via text instead of the old inline support-link testID

Changelog

CHANGELOG entry: Updated the Perps service interruption banner to use the design system warning alert with a Contact support action, and moved it above the Perps Home title

Related issues

Fixes: https://consensyssoftware.atlassian.net/browse/TAT-3565

Manual testing steps

Feature: Perps Home service interruption banner

  Scenario: user sees the outage banner above the Perps Home title
    Given the Perps service interruption banner feature flag is enabled
    And the user opens Perps Home

    When the home screen loads
    Then a BannerAlert Warning shows above the Perps Home title with 16px spacing below the banner
    And the banner shows the outage title, description, and a Contact support action button

  Scenario: user contacts support from the outage banner
    Given the Perps service interruption banner is visible on Perps Home

    When the user presses Contact support
    Then the app navigates to the support destination

  Scenario: user does not see the banner when the flag is off
    Given the Perps service interruption banner feature flag is disabled
    And the user opens Perps Home

    When the home screen loads
    Then the service interruption banner is not shown

Unit tests:

yarn jest app/components/UI/Perps/components/PerpsServiceInterruptionBanner/PerpsServiceInterruptionBanner.test.tsx

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
UI and layout-only changes with unchanged support webview navigation; no auth, data, or trading logic touched.

Overview
Replaces the custom Perps outage banner with design-system BannerAlert (warning severity, description, and a Contact support action button instead of an inline link).

On Perps Home, the banner is moved above the TitleHub (with horizontal padding and 16px bottom spacing) and is only mounted when isServiceInterruptionBannerEnabled is true at the home screen level.

Unit tests now assert support navigation via the Contact support action label rather than the old support-link testID.

^{Reviewed by Cursor Bugbot for commit 169fcce. 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 244f441. Configure here.}

[github-actions]

🔍 Smart E2E Test Selection

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

click to see 🤖 AI reasoning details

E2E Test Selection:
The PR makes two focused changes to the Perps feature:

1. PerpsServiceInterruptionBanner.tsx: Refactored from a custom-built banner (Box/Text/Icon with StyleSheet) to use the BannerAlert component from @metamask/design-system-react-native. This is a UI component swap — same functionality, different implementation. The action button (contact support navigation) is preserved via actionButtonOnPress.

2. PerpsHomeView.tsx: The PerpsServiceInterruptionBanner was moved from an unconditional render position (below the title section) to a conditional render inside the title section, gated by isServiceInterruptionBannerEnabled. This changes both the visual position and the rendering logic.

3. PerpsServiceInterruptionBanner.test.tsx: Unit test updated to match the new BannerAlert API.

Tag selection rationale:

• SmokePerps: Directly covers the Perps home view and Add Funds flow. The banner positioning change and conditional rendering logic in PerpsHomeView need validation.
• SmokeWalletPlatform: Required per SmokePerps tag description — Perps is a section inside the Trending tab, and changes to Perps views (headers, lists, full views) affect Trending.
• SmokeConfirmations: Required per SmokePerps tag description — Add Funds deposits are on-chain transactions that go through the confirmations flow.

Risk is low because this is a UI refactor (component swap + repositioning) with no changes to business logic, data fetching, or navigation routing.

Performance Test Selection:
The changes are purely UI refactoring — replacing a custom banner implementation with a BannerAlert design system component, and repositioning the banner within PerpsHomeView. There are no changes to data fetching, state management, rendering loops, or performance-sensitive operations. The @PerformancePreps tag covers perps market loading and position management, but this UI-only change does not meaningfully impact those measured performance scenarios.

View GitHub Actions results

[sonarqubecloud]

Quality Gate passed

Issues
0 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