feat(perps): new TPSL view design

[abretonc7s]

Description

This PR implements TAT-1729, adding expected profit/loss calculation display to the Auto Close (TP/SL) configuration screen. It also includes several UX improvements based on design refinements.

What is the reason for the change?

Users need to see the expected net profit or loss when setting TP/SL values, accounting for trading fees. This helps them make informed decisions about their risk management strategy. Additionally, several UX improvements were needed to match the final design specifications.

What is the improvement/solution?

1. Expected P&L Display: Shows real-time expected profit/loss below TP and SL input fields

   • Calculates net P&L by deducting MetaMask and protocol fees from gross profit/loss
   • Dynamically displays "Expected profit: $X.XX" or "Expected loss: $X.XX" based on the net value
   • Handles edge cases where TP creates loss or SL creates profit (for modified positions)
   • Right-aligned text in BodyMD font with Alternative color
   • Formats values using existing formatPerpsFiat with PRICE_RANGES_MINIMAL_VIEW

2. Terminology Update: Renamed "TP/SL" to "Auto close" throughout the UI

   • Order view: "Auto close" label
   • All user-facing strings updated
   • Technical abbreviations "TP" and "SL" retained for compact displays

3. UX Improvements:

   • Centered header title with absolute positioned back button
   • "Clear" action buttons positioned on same row as section titles (right-aligned)
   • Dollar symbol ($) positioned on LEFT of input fields (matching currency convention)
   • Removed explainer text at top of view
   • Percentage buttons no longer stay selected after press (cleaner UI)
   • Auto-scroll to keep inputs visible when custom keypad is active
   • Action buttons: "Cancel" + "Set" when keypad inactive, "Done" when keypad active

4. Implementation Approach (DRY):

   • Reuses existing calculatePnL() utility from pnlCalculations.ts
   • Reuses existing usePerpsOrderFees() hook for accurate fee calculation
   • Reuses existing calculatePositionSize() for new orders
   • Adds small calculateExpectedPnL() wrapper that combines P&L with fee deduction
   • Extends usePerpsTPSLForm hook return values (no new hooks created)
   • Reuses existing formatting utilities (formatPerpsFiat)
   • Uses custom Keypad component (no native keyboard, no timeout needed)

Changelog

CHANGELOG entry: Added expected profit/loss display to Auto Close (TP/SL) configuration showing net profit after fees, improved UI layout and terminology

Related issues

• Fixes: TAT-1729 https://consensyssoftware.atlassian.net/browse/TAT-1729
• Depends on refactor(perps): migrate tpsl bottomsheet to fullscreen view #21344

Manual testing steps

Feature: Expected Profit/Loss Display for Auto Close (TP/SL)

  Scenario: User sets Take Profit for new long position
    Given user is on the Order View screen for BTC
    And user enters an order amount of $100 at 2x leverage
    When user taps "Auto close"
    And user sets Take Profit to $105,000 (assuming current price is $100,000)
    Then user sees "Expected profit: $X.XX" below the TP input (right-aligned, BodyMD, Alternative color)
    And the amount accounts for closing fees

  Scenario: User sets Stop Loss for new short position
    Given user is on the Order View screen for ETH
    And user enters a short order amount of $50 at 3x leverage
    When user taps "Auto close"
    And user sets Stop Loss to $3,200 (assuming current price is $3,000)
    Then user sees "Expected loss: $X.XX" below the SL input (right-aligned, BodyMD, Alternative color)
    And the amount accounts for closing fees

  Scenario: User modifies TP/SL for existing position
    Given user has an existing long position in BTC
    And user taps "Edit TP/SL" from position card
    When user sets Take Profit to $110,000
    And user sets Stop Loss to $95,000
    Then user sees expected profit below TP input
    And user sees expected loss below SL input
    And both values are calculated from actual position entry price

  Scenario: Edge case - TP creates loss on modified position
    Given user has a long position with entry price $100,000
    And current price has moved down to $95,000
    When user sets Take Profit at $98,000 (still below entry)
    Then user sees "Expected loss: $X.XX" (smaller loss than current)
    And text is displayed in Alternative color (not Error color)

  Scenario: Verify UI improvements
    Given user is viewing the Auto Close screen
    Then user sees centered "Auto close" title with back button on left
    And "Clear" buttons appear on same row as "Take Profit" and "Stop Loss" titles (right-aligned)
    And dollar symbol "$" appears on LEFT of price input fields
    And percentage buttons do not stay selected after press
    And no explainer text appears at top of screen

  Scenario: Verify action buttons behavior
    Given user is on the Auto Close screen
    When keypad is NOT active
    Then user sees "Cancel" button (left) and "Set" button (right)
    When user taps any price or percentage input
    Then keypad appears and user sees only "Done" button
    When user taps "Done"
    Then keypad dismisses and user sees "Cancel" and "Set" buttons again

  Scenario: Verify auto-scroll for custom keypad
    Given user is on the Auto Close screen
    When user taps Take Profit price input
    Then view scrolls to offset 150px to keep input visible
    When user taps Stop Loss price input
    Then view scrolls to offset 350px to keep input visible
    And user can still manually scroll to see current price info

Screenshots/Recordings

Before

After

Screen.Recording.2025-10-18.at.7.43.52.PM.mov

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.

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

Adds expected net PnL (after fees) to the Auto close screen, revamps its UI/strings, plumbs amount/decimals, and extends TPSL logic, utils, and tests.

• UI/Perps:
  • Auto close (TP/SL) view redesign (PerpsTPSLView.tsx, .styles.ts): centered header with absolute back button; right-aligned "Clear" actions; "$" label on left of inputs; condensed price info; auto-scroll on input focus; footer shows "Cancel/Set" (keypad off) or "Done" (keypad on); removes explainer text; percentage buttons no longer stay selected.
  • Expected PnL display: shows perps.tpsl.expected_profit|expected_loss under TP/SL, formatted with PRICE_RANGES_MINIMAL_VIEW, with fallbacks from PERPS_CONSTANTS.
  • Order view (PerpsOrderView.tsx): passes amount and szDecimals to TPSL route; minor label/state refactors.
• Hooks/Logic:
  • usePerpsTPSLForm: accepts amount/szDecimals; computes expectedTakeProfitPnL/expectedStopLossPnL using size from calculatePositionSize and fees from usePerpsOrderFees; refines direction/entry-price logic; returns new display fields.
  • usePerpsTPSLUpdate: simplifies error callback message.
• Navigation/Types:
  • Extends PerpsNavigationParamList['PerpsTPSL'] with amount and szDecimals.
• Utils:
  • pnlCalculations.ts: adds calculateExpectedPnL.
  • tpslValidation.ts: guards when direction missing; minor regex/sign handling.
• i18n (en.json):
  • Renames "TP/SL" label to "Auto close"; adds cancel, set, clear, and expected PnL strings; updates USD label to $.
• Tests:
  • Updates PerpsTPSLView.test.tsx and usePerpsTPSLForm.test.ts for new UI, formatting, Redux wrapper, keypad/labels, and expected behaviors.

^{Written by Cursor Bugbot for commit c9678b8. This will update automatically on new commits. 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.

[codecov-commenter]

Codecov Report

❌ Patch coverage is 76.31579% with 9 lines in your changes missing coverage. Please review.
⚠️ Please upload report for BASE (fix/perps/modalbottomsheetrefactor@9966afe). Learn more about missing BASE report.

Files with missing lines	Patch %	Lines
...nts/UI/Perps/Views/PerpsTPSLView/PerpsTPSLView.tsx	78.26%	0 Missing and 5 partials ⚠️
app/components/UI/Perps/hooks/usePerpsTPSLForm.ts	66.66%	1 Missing and 3 partials ⚠️

Additional details and impacted files

@@                          Coverage Diff                          @@
##             fix/perps/modalbottomsheetrefactor   #21396   +/-   ##
=====================================================================
  Coverage                                      ?   77.10%           
=====================================================================
  Files                                         ?     3615           
  Lines                                         ?    89150           
  Branches                                      ?    16868           
=====================================================================
  Hits                                          ?    68741           
  Misses                                        ?    15719           
  Partials                                      ?     4690           

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

[nickewansmith]

https://github.com/MetaMask/metamask-mobile/pull/21344/files/f8316a369689a965e0d489a0ee07d52290cc0603#r2446141415 Ideally could be addressed in this PR if there will be some changes @abretonc7s

[abretonc7s]

https://github.com/MetaMask/metamask-mobile/pull/21344/files/f8316a369689a965e0d489a0ee07d52290cc0603#r2446141415 Ideally could be addressed in this PR if there will be some changes @abretonc7s

Thansk @nickewansmith adding it with the design tweaks

[sonarqubecloud]

Quality Gate passed

Issues
4 New issues
3 Accepted issues

Measures
1 Security Hotspot
83.9% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud