refactor(perps): migrate Cancel All Orders sheet to MMDS

[brianacnguyen]

Description

Migrates the Perps Cancel All Orders bottom sheet from component-library BottomSheet primitives to MetaMask Design System (@metamask/design-system-react-native) so it matches MMDS patterns used elsewhere in the app.

What changed:

• Replaced component-library BottomSheet, BottomSheetHeader, BottomSheetFooter, and Text with MMDS equivalents (Box, design-system Text, etc.)
• Confirm now uses footer isLoading while canceling instead of swapping the body for an ActivityIndicator / “canceling” copy
• Description and Confirm label stay visible during the in-progress state
• Removed PerpsCancelAllOrdersView.styles.ts in favor of MMDS layout utilities
• Updated PerpsHomeView to use the MMDS BottomSheetRef type for the cancel-all sheet
• Updated unit tests and mocks for the new design-system components and loading behavior

Changelog

CHANGELOG entry: Updated the Perps cancel all orders sheet to use the design system and show loading on the Confirm button

Related issues

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

Manual testing steps

Feature: Perps Cancel All Orders sheet (MMDS)

  Scenario: user opens cancel all orders sheet
    Given the user has open Perps orders on Perps Home
    When the user taps Cancel all
    Then the cancel all orders bottom sheet opens with MMDS header, description, Keep orders, and Confirm

  Scenario: user confirms cancel all while request is in progress
    Given the cancel all orders sheet is open with at least one order
    When the user taps Confirm
    Then the description remains visible
    And Confirm stays labeled Confirm and shows the loading state (isLoading)
    And Keep orders and Confirm are disabled until the request finishes

  Scenario: user dismisses without canceling
    Given the cancel all orders sheet is open
    When the user taps Keep orders or closes the sheet
    Then the sheet closes and orders remain unchanged

Unit tests:

yarn jest app/components/UI/Perps/Views/PerpsCancelAllOrdersView/PerpsCancelAllOrdersView.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 bottom-sheet wiring only; cancel-all logic still goes through existing Perps hooks with no auth or payment changes.

Overview
Migrates the Perps Cancel All Orders bottom sheet from component-library primitives to @metamask/design-system-react-native, dropping PerpsCancelAllOrdersView.styles.ts in favor of MMDS Box and footer layout props.

Cancel-in-progress UX no longer replaces the body with a spinner and “canceling” copy; the description stays visible and Confirm uses footer isLoading while both actions stay disabled. Sheet dismissal uses MMDS goBack when standalone and keeps overlay behavior when an external sheetRef is passed (header close gets testID: 'header-close').

PerpsHomeView types the cancel-all overlay ref as MMDS BottomSheetRef. Unit tests swap component-library mocks for design-system/tailwind mocks and assert the new loading and close/navigation behavior.

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

🧪 Flaky unit test detection

✅ All previously detected unit test flakiness issues in this PR have been fixed.

View recent run history

This check is informational only and does not block merging.

[github-actions]

🔍 Smart E2E Test Selection

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

click to see 🤖 AI reasoning details

E2E Test Selection:
The PR modifies Perps-specific UI components:

1. PerpsCancelAllOrdersView.tsx: Refactored to use @metamask/design-system-react-native components instead of internal component library. Key changes:

   • Migrated BottomSheet, BottomSheetHeader, BottomSheetFooter, Text, Box imports from design system package
   • Changed navigation prop from shouldNavigateBack to goBack callback
   • Replaced ActivityIndicator loading state with isLoading button prop
   • Updated BottomSheetFooter API from buttonPropsArray to primaryButtonProps/secondaryButtonProps
   • Removed the styles file (deleted PerpsCancelAllOrdersView.styles.ts)

2. PerpsHomeView.tsx: Minor type change - updated cancelAllSheetRef type from internal BottomSheetRef to MmdsBottomSheetRef to match the updated component.

3. PerpsCancelAllOrdersView.test.tsx: Updated unit tests to match new component API.

4. PerpsCancelAllOrdersView.styles.ts: Deleted (styles moved to design system / Tailwind).

Tag selection rationale:

• SmokePerps: Directly impacted - changes affect Perps views (PerpsCancelAllOrdersView, PerpsHomeView). The Cancel All Orders modal is a key Perps interaction.
• SmokeWalletPlatform: Required per SmokePerps tag description - "Perps is also a section inside the Trending tab (SmokeWalletPlatform); changes to Perps views (headers, lists, full views, e.g. PerpsHomeView) affect Trending."
• SmokeConfirmations: Required per SmokePerps tag description - "When selecting SmokePerps, also select SmokeConfirmations (Add Funds deposits are on-chain transactions)."

The changes are a UI/design system migration with no logic changes to core perps functionality, making this medium risk.

Performance Test Selection:
The PR modifies PerpsHomeView.tsx and PerpsCancelAllOrdersView.tsx, which are core components in the perps trading flow. The design system migration changes how components render (new Box, Text, BottomSheet components from @metamask/design-system-react-native), which could affect rendering performance in the perps flow. The @PerformancePreps tag covers perps market loading, position management, add funds flow, and order execution - all of which go through PerpsHomeView.

View GitHub Actions results

[sonarqubecloud]

Quality Gate failed

Failed conditions
34.8% Duplication on New Code (required ≤ 3%)

See analysis details on SonarQube Cloud

[github-actions]

⚡ Performance Test Results

ℹ️ Performance test results are currently non-blocking and will not block this PR.

✅ All tests passed · 2 tests · 1 device

📱 Devices tested (1)

Android: Google Pixel 8 Pro (v14.0)

✅ Passed Tests (2)

Test	Platform	Device	Duration	Team	Recording
Perps add funds	Android	Google Pixel 8 Pro (v14.0)	7.96s	@mm-perps-engineering-team	📹 Watch
Perps open position and close it	Android	Google Pixel 8 Pro (v14.0)	20.61s	@mm-perps-engineering-team	📹 Watch

---

Branch: refactor/perps-home-cancelordersbs · Build: Normal · Commit: 2930d4c · View full run

[codecov-commenter]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 84.41%. Comparing base (cef3872) to head (ecbab46).
⚠️ Report is 5 commits behind head on main.

Additional details and impacted files

@@           Coverage Diff           @@
##             main   #33358   +/-   ##
=======================================
  Coverage   84.40%   84.41%           
=======================================
  Files        6132     6133    +1     
  Lines      163836   163803   -33     
  Branches    39995    39986    -9     
=======================================
- Hits       138288   138268   -20     
+ Misses      16053    16046    -7     
+ Partials     9495     9489    -6     

☔ View full report in Codecov by Harness.
📢 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.