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

Medium Risk
Changes real order-cancellation UI, dismissal paths (navigation vs overlay), and user-visible loading/toast behavior, though cancel logic remains in hooks and coverage is strong.

Overview
Migrates the Perps Cancel All Orders bottom sheet from component-library primitives to MetaMask Design System (BottomSheet, BottomSheetHeader, BottomSheetFooter, Box, Text), drops the dedicated StyleSheet file, and aligns PerpsHomeView’s cancel-all ref with the MMDS BottomSheetRef.

UX: While canceling, the sheet keeps the description and Confirm label visible and drives progress via the footer primary button’s isLoading / disabled state instead of replacing the body with a spinner and “canceling” copy. Empty and non-empty states share one sheet (no orders copy in the body; footer actions only when orders exist).

Feedback: Cancel-all success, partial success, and failure toasts are centralized in usePerpsToasts (cancelAllSuccess, cancelAllPartialSuccess, cancelAllFailed) instead of inline theme-based toast builders in the view. Overlay mode still closes the sheet on success when an external sheetRef is provided.

Tests are expanded for MMDS mocks, overlay vs standalone close/keep behavior, and toast callbacks.

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

⚡ 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

❌ Patch coverage is 96.87500% with 1 line in your changes missing coverage. Please review.
✅ Project coverage is 84.48%. Comparing base (3dccec5) to head (db52e62).
⚠️ Report is 39 commits behind head on main.

Files with missing lines	Patch %	Lines
...psCancelAllOrdersView/PerpsCancelAllOrdersView.tsx	96.29%	0 Missing and 1 partial ⚠️

Additional details and impacted files

@@            Coverage Diff             @@
##             main   #33358      +/-   ##
==========================================
+ Coverage   84.42%   84.48%   +0.05%     
==========================================
  Files        6139     6158      +19     
  Lines      164072   164671     +599     
  Branches    40080    40253     +173     
==========================================
+ Hits       138523   139120     +597     
+ Misses      16054    16042      -12     
- Partials     9495     9509      +14     

☔ 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.

[github-actions]

🔍 Smart E2E Test Selection

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

click to see 🤖 AI reasoning details

E2E Test Selection:
All 6 changed files are within the Perps feature area (app/components/UI/Perps/). The changes refactor PerpsCancelAllOrdersView to use @metamask/design-system-react-native components instead of the internal component library, simplify toast handling via usePerpsToasts hook, and add new cancelAllSuccess/cancelAllPartialSuccess/cancelAllFailed toast configurations. PerpsHomeView.tsx has a minor type unification fix. These are functional UI changes to the Cancel All Orders flow within Perps.

Tag selection rationale:

• SmokePerps: Direct impact on Perps views (PerpsCancelAllOrdersView, PerpsHomeView) and hooks (usePerpsToasts). The Cancel All Orders flow is a core Perps interaction.
• SmokeWalletPlatform: Per SmokePerps tag description, changes to Perps views (headers, lists, full views) affect the Trending tab where Perps is embedded. SmokeWalletPlatform must be selected alongside SmokePerps.
• SmokeConfirmations: Per SmokePerps tag description, Add Funds deposits are on-chain transactions, so SmokeConfirmations should be selected when selecting SmokePerps.

No performance tags needed: changes are purely UI refactoring within the Perps feature with no impact on app launch, login, onboarding, asset loading, or other performance-sensitive flows.

Performance Test Selection:
Changes are confined to UI refactoring of the Perps Cancel All Orders view and toast hook additions. No performance-sensitive paths are affected (no changes to app launch, login, onboarding, asset loading, or swap flows). The refactoring replaces internal component library imports with design-system-react-native equivalents but does not introduce new data fetching, rendering loops, or startup-path changes that would impact measured performance scenarios.

View GitHub Actions results

[sonarqubecloud]

Quality Gate passed

Issues
0 New issues
0 Accepted issues

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

See analysis details on SonarQube Cloud