fix(perps): balance display without full decimals cp-7.58.0

[abretonc7s]

Description

This PR fixes two currency formatting issues in the Perps feature that were introduced in PR #20971:

1. Missing Trailing Zeros: Fiat currency values were displaying without trailing zeros (e.g., "$13.40" showing as "$13.4", "$1,250.00" showing as "$1,250"). This violated standard fiat currency formatting conventions.

2. Misleading Zero Fallbacks: Several components were using hardcoded '0' fallbacks instead of semantic constants, making "$0.00" look like legitimate data when it actually represented unavailable/loading state.

Root Causes:

1. PR fix(perps): adjust decimals logic accross perps codebase #20971 changed formatPerpsFiat to default stripTrailingZeros: true for crypto token flexibility, but this broke fiat currency displays which should always show 2 decimal places.
2. Components were using || '0' fallbacks instead of the semantic constants defined in perpsConfig.ts (FALLBACK_DATA_DISPLAY = '--', FALLBACK_PRICE_DISPLAY = '$---').

Solutions:

1. Added stripTrailingZeros: false to PRICE_RANGES_MINIMAL_VIEW configuration template in formatUtils.ts (1 line change instead of modifying 9 call sites).
2. Replaced all 5 hardcoded '0' fallbacks with conditional rendering using appropriate semantic constants.

Changelog

CHANGELOG entry: Fixed fiat currency formatting to always display two decimal places and use semantic fallback indicators for unavailable data

Related issues

Fixes: [Internal issue - currency formatting regression after PR #20971]

Manual testing steps

Feature: Perps Currency Formatting

  Scenario: user views account balances with proper formatting
    Given user is on the Perps Positions view with account data

    When user views the account summary section
    Then total balance should display with exactly 2 decimal places (e.g., "$13.40" not "$13.4")
    And available balance should display with exactly 2 decimal places
    And margin used should display with exactly 2 decimal places

  Scenario: user views unavailable balance data
    Given user is on the Perps Positions view without account data

    When balances are unavailable or loading
    Then balance fields should display "--" instead of "$0.00"

  Scenario: user views transaction details with proper formatting
    Given user navigates to a transaction detail view

    When viewing entry price and fee information
    Then prices should display with proper formatting and trailing zeros
    And unavailable prices should show "$---" instead of "$0.00"
    And unavailable fees should show "--" instead of "$0.00"

  Scenario: user views balance in tab control bar
    Given user is on the Perps tab view

    When viewing available balance in the control bar
    Then balance should display with exactly 2 decimal places

Screenshots/Recordings

Before

• Available balance shows "$13.4" instead of "$13.40"
• Total balance shows "$1,250" instead of "$1,250.00"
• Unavailable data shows "$0.00" (looks like legitimate data)

After

• Available balance correctly shows "$13.40"
• Total balance correctly shows "$1,250.00"
• Unavailable data clearly shows "--" or "$---" (distinguishable from real data)

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.

---

Technical Details

Files Changed:

1. app/components/UI/Perps/utils/formatUtils.ts

   • Added stripTrailingZeros: false to PRICE_RANGES_MINIMAL_VIEW configuration (line 339)

2. app/components/UI/Perps/Views/PerpsPositionsView/PerpsPositionsView.tsx

   • Replaced 3 hardcoded '0' fallbacks with conditional rendering using PERPS_CONSTANTS.FALLBACK_DATA_DISPLAY
   • Locations: totalBalance (line 176-180), availableBalance (line 189-193), marginUsed (line 202-206)

3. app/components/UI/Perps/Views/PerpsTransactionsView/PerpsPositionTransactionView.tsx

   • Replaced 2 hardcoded '0' fallbacks with semantic constants
   • Entry price uses PERPS_CONSTANTS.FALLBACK_PRICE_DISPLAY (line 106-108)
   • Fee uses PERPS_CONSTANTS.FALLBACK_DATA_DISPLAY (line 116-120)

Impact:

• Affected Components: 3 files, 6 total changes
• Lines Changed: ~15 lines (minimal diff)
• Test Coverage: ESLint passes on all modified files
• User-Facing Impact: Improved clarity and consistency in currency displays across all Perps views

---

Note

Standardizes fiat formatting to show proper decimals (fiat-style) and replaces hardcoded zero fallbacks with semantic placeholders, with null-safety and minor logic cleanups across Perps views and tests.

• Utilities:
  • formatUtils: Reworks formatPerpsFiat defaults to PRICE_RANGES_MINIMAL_VIEW with fiat-style .00 stripping, adds fiatStyleStripping, refines trailing-zero logic and options precedence; updates minimal ranges; keeps universal ranges.
• UI Components:
  • Order View / Limit Price Sheet / Open Order Card / Position Card / Tab Control Bar: Use semantic fallbacks (PERPS_CONSTANTS), explicit null/undefined checks before formatting, and PRICE_RANGES_MINIMAL_VIEW where appropriate; minor label/logic refactors (e.g., button label keys, rewards state switch, funding display sign/color logic).
  • Positions View: Replace '0' fallbacks with FALLBACK_DATA_DISPLAY; format balances with minimal view.
  • TPSL View: Adds calculateEffectiveEntryPrice, clarifies direction/price selection, safer boolean checks, keypad value selection cleanup.
  • Transactions (Position/Order): Null-safe rendering for entry price/fees; consistent currency formatting; uses raw $ for very small fees; updates expected display.
• Tests:
  • Adjust expected outputs for fiat decimals (e.g., $7.50, $10.50, $125.50), fallback displays ($---), and liquidation invalid leverage handling; update PositionCard liquidation fallback and funding assertions.

^{Written by Cursor Bugbot for commit 1c6ec51. 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.

[sonarqubecloud]

Quality Gate passed

Issues
0 New issues
5 Accepted issues

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

See analysis details on SonarQube Cloud