fix(perps): normalize price formatting in order and position views (MetaMask#22931)

<!--
Please submit this PR as a draft initially.
Do not mark it as "Ready for review" until the template has been
completely filled out, and PR status checks have passed at least once.
-->

## **Description**

This PR refactors the fee and price formatting logic in the Perps
feature to improve code clarity and consistency.


## **Changelog**

CHANGELOG entry: Fixed a bug that caused too many decimals being
displayed in the order detail view

## **Related issues**

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

## **Manual testing steps**

```gherkin
Feature: Perps transaction fee and price display

  Scenario: user views order transaction details
    Given user has completed a perps order transaction
    When user navigates to the order transaction details view
    Then all fees and prices should display with maximum 2 decimals

  Scenario: user views position transaction details
    Given user has an open or closed perps position
    When user navigates to the position transaction details view
    Then entry price, size, and fees should display with maximum 2 decimals

```

## **Screenshots/Recordings**

<!-- If applicable, add screenshots and/or recordings to visualize the
before and after of your change. -->

### **Before**

<!-- [screenshots/recordings] -->


https://github.com/user-attachments/assets/271fe44a-97ce-422b-ba00-f164055643e0



### **After**

<!-- [screenshots/recordings] -->
<img width="1170" height="2532" alt="Simulator Screenshot - iPhone 16e -
2025-11-19 at 13 12 40"
src="https://github.com/user-attachments/assets/7215ec22-4fcf-426b-9ea1-88c62b647bd0"
/>


## **Pre-merge author checklist**

- [x] I’ve followed [MetaMask Contributor
Docs](https://github.com/MetaMask/contributor-docs) and [MetaMask Mobile
Coding
Standards](https://github.com/MetaMask/metamask-mobile/blob/main/.github/guidelines/CODING_GUIDELINES.md).
- [x] I've completed the PR template to the best of my ability
- [x] I’ve included tests if applicable
- [x] I’ve documented my code using [JSDoc](https://jsdoc.app/) format
if applicable
- [x] I’ve applied the right labels on the PR (see [labeling
guidelines](https://github.com/MetaMask/metamask-mobile/blob/main/.github/guidelines/LABELING_GUIDELINES.md)).
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.

<!-- CURSOR_SUMMARY -->
---

> [!NOTE]
> Introduce formatPositiveFiat and use it for limit price, fees, entry
price, and size in Perps transaction views; update tests accordingly.
> 
> - **Utils**:
> - Replace `formatFee` with `formatPositiveFiat` in
`utils/formatUtils.ts` (same semantics: `$0`, `< $0.01`, else fiat
formatting).
> - Keep `formatPerpsFiat` as general formatter; introduce/retain
`PRICE_RANGES_UNIVERSAL`/`MINIMAL_VIEW` exports.
> - **Perps UI**:
> - `PerpsOrderTransactionView.tsx`: use `formatPositiveFiat` for
`order.limitPrice` and fee rows (`metamask_fee`, `hyperliquid_fee`,
`total_fee`).
> - `PerpsPositionTransactionView.tsx`: use `formatPositiveFiat` for
position `size`, `entry/close_price`, and `fees`; remove
`PRICE_RANGES_UNIVERSAL` usage here.
> - **Tests**:
> - Update `formatUtils.test.ts` to import and validate
`formatPositiveFiat` behavior (thresholds, rounding, stripping) and
adjust related expectations; keep comprehensive tests for
`formatPerpsFiat` and price ranges.
> 
> <sup>Written by [Cursor
Bugbot](https://cursor.com/dashboard?tab=bugbot) for commit
bd8ed7d. This will update automatically
on new commits. Configure
[here](https://cursor.com/dashboard?tab=bugbot).</sup>
<!-- /CURSOR_SUMMARY -->

Author: michalconsensys

app/components/UI/Perps/Views/PerpsTransactionsView/PerpsOrderTransactionView.tsx

@@ -27,8 +27,8 @@ import { usePerpsBlockExplorerUrl, usePerpsOrderFees } from '../../hooks';
 import { PerpsNavigationParamList } from '../../types/navigation';
 import { PerpsOrderTransactionRouteProp } from '../../types/transactionHistory';
 import {
-  formatFee,
   formatPerpsFiat,
+  formatPositiveFiat,
   formatTransactionDate,
 } from '../../utils/formatUtils';
 import { styleSheet } from './PerpsOrderTransactionView.styles';
@@ -94,7 +94,7 @@ const PerpsOrderTransactionView: React.FC = () => {
     },
     {
       label: strings('perps.transactions.order.limit_price'),
-      value: formatPerpsFiat(transaction.order?.limitPrice ?? 0),
+      value: formatPositiveFiat(transaction.order?.limitPrice ?? 0),
     },
     {
       label: strings('perps.transactions.order.filled'),
@@ -109,15 +109,15 @@ const PerpsOrderTransactionView: React.FC = () => {
   const feeRows = [
     {
       label: strings('perps.transactions.order.metamask_fee'),
-      value: formatFee(isFilled ? metamaskFee : 0),
+      value: formatPositiveFiat(isFilled ? metamaskFee : 0),
     },
     {
       label: strings('perps.transactions.order.hyperliquid_fee'),
-      value: formatFee(isFilled ? protocolFee : 0),
+      value: formatPositiveFiat(isFilled ? protocolFee : 0),
     },
     {
       label: strings('perps.transactions.order.total_fee'),
-      value: formatFee(isFilled ? totalFee : 0),
+      value: formatPositiveFiat(isFilled ? totalFee : 0),
     },
   ];
 

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

@@ -30,10 +30,8 @@ import {
   PerpsTransaction,
 } from '../../types/transactionHistory';
 import {
-  formatFee,
-  formatPerpsFiat,
+  formatPositiveFiat,
   formatTransactionDate,
-  PRICE_RANGES_UNIVERSAL,
 } from '../../utils/formatUtils';
 import { styleSheet } from './PerpsPositionTransactionView.styles';
 
@@ -91,7 +89,7 @@ const PerpsPositionTransactionView: React.FC = () => {
     },
     transaction.fill?.amount && {
       label: strings('perps.transactions.position.size'),
-      value: `${formatPerpsFiat(
+      value: `${formatPositiveFiat(
         Math.abs(
           BigNumber(transaction.fill?.size || '0')
             .times(transaction.fill?.entryPrice || '0')
@@ -105,9 +103,7 @@ const PerpsPositionTransactionView: React.FC = () => {
           transaction.fill?.action === 'Closed'
             ? strings('perps.transactions.position.close_price')
             : strings('perps.transactions.position.entry_price'),
-        value: formatPerpsFiat(transaction.fill.entryPrice, {
-          ranges: PRICE_RANGES_UNIVERSAL,
-        }),
+        value: formatPositiveFiat(transaction.fill.entryPrice),
       },
   ].filter(Boolean);
 
@@ -116,7 +112,7 @@ const PerpsPositionTransactionView: React.FC = () => {
     transaction.fill?.fee !== undefined &&
       transaction.fill?.fee !== null && {
         label: strings('perps.transactions.position.fees'),
-        value: formatFee(transaction.fill.fee),
+        value: formatPositiveFiat(transaction.fill.fee),
         textColor: TextColor.Default,
       },
   ].filter(Boolean);

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

@@ -15,9 +15,9 @@ import {
   formatTransactionDate,
   formatDateSection,
   formatFundingRate,
-  formatFee,
   PRICE_RANGES_UNIVERSAL,
   PRICE_RANGES_MINIMAL_VIEW,
+  formatPositiveFiat,
 } from './formatUtils';
 import { FUNDING_RATE_CONFIG } from '../constants/perpsConfig';
 
@@ -195,13 +195,13 @@ describe('formatUtils', () => {
     });
   });
 
-  describe('formatFee', () => {
+  describe('formatPositiveFiat', () => {
     it('returns "$0" when fee is exactly zero', () => {
       // Given a fee of exactly zero
       const fee = 0;
 
       // When formatting the fee
-      const result = formatFee(fee);
+      const result = formatPositiveFiat(fee);
 
       // Then it returns "$0"
       expect(result).toBe('$0');
@@ -212,7 +212,7 @@ describe('formatUtils', () => {
       const fee = 0.005;
 
       // When formatting the fee
-      const result = formatFee(fee);
+      const result = formatPositiveFiat(fee);
 
       // Then it returns "< $0.01"
       expect(result).toBe('< $0.01');
@@ -223,7 +223,7 @@ describe('formatUtils', () => {
       const fee = 0.01;
 
       // When formatting the fee
-      const result = formatFee(fee);
+      const result = formatPositiveFiat(fee);
 
       // Then it formats normally
       expect(result).toBe('$0.01');
@@ -234,7 +234,7 @@ describe('formatUtils', () => {
       const fee = 1.5;
 
       // When formatting the fee
-      const result = formatFee(fee);
+      const result = formatPositiveFiat(fee);
 
       // Then it formats normally
       expect(result).toBe('$1.50');
@@ -245,7 +245,7 @@ describe('formatUtils', () => {
       const fee = 0.0001;
 
       // When formatting the fee
-      const result = formatFee(fee);
+      const result = formatPositiveFiat(fee);
 
       // Then it returns "< $0.01"
       expect(result).toBe('< $0.01');
@@ -256,7 +256,7 @@ describe('formatUtils', () => {
       const fee = 0.0099;
 
       // When formatting the fee
-      const result = formatFee(fee);
+      const result = formatPositiveFiat(fee);
 
       // Then it returns "< $0.01"
       expect(result).toBe('< $0.01');
@@ -267,7 +267,7 @@ describe('formatUtils', () => {
       const fee = 0.0101;
 
       // When formatting the fee
-      const result = formatFee(fee);
+      const result = formatPositiveFiat(fee);
 
       // Then it formats normally (rounded to $0.01)
       expect(result).toBe('$0.01');
@@ -278,7 +278,7 @@ describe('formatUtils', () => {
       const fee = 123.45;
 
       // When formatting the fee
-      const result = formatFee(fee);
+      const result = formatPositiveFiat(fee);
 
       // Then it formats with proper decimals
       expect(result).toBe('$123.45');
@@ -289,7 +289,7 @@ describe('formatUtils', () => {
       const fee = 100;
 
       // When formatting the fee
-      const result = formatFee(fee);
+      const result = formatPositiveFiat(fee);
 
       // Then trailing zeros are stripped
       expect(result).toBe('$100');
@@ -300,7 +300,7 @@ describe('formatUtils', () => {
       const fee = 1.23456789;
 
       // When formatting the fee
-      const result = formatFee(fee);
+      const result = formatPositiveFiat(fee);
 
       // Then it rounds appropriately
       expect(result).toBe('$1.23');
@@ -311,7 +311,7 @@ describe('formatUtils', () => {
       const fee = -0;
 
       // When formatting the fee
-      const result = formatFee(fee);
+      const result = formatPositiveFiat(fee);
 
       // Then it returns "$0"
       expect(result).toBe('$0');
@@ -322,7 +322,7 @@ describe('formatUtils', () => {
       const fee = 0.00000001;
 
       // When formatting the fee
-      const result = formatFee(fee);
+      const result = formatPositiveFiat(fee);
 
       // Then it returns "< $0.01"
       expect(result).toBe('< $0.01');

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

@@ -346,11 +346,11 @@ export const formatPerpsFiat = (
  * Formats a fee value as USD currency with appropriate decimal places
  * @param fee - Raw numeric or string fee value (e.g., 1234.56, not token minimal denomination)
  * @returns Formatted currency string with variable decimals based on configured ranges
- * @example formatFee(1234.56) => "$1,234.56"
- * @example formatFee(0.005) => "< $0.01"
- * @example formatFee(0) => "$0"
+ * @example formatPositiveFiat(1234.56) => "$1,234.56"
+ * @example formatPositiveFiat(0.005) => "< $0.01"
+ * @example formatPositiveFiat(0) => "$0"
  */
-export const formatFee = (fee: number | string): string => {
+export const formatPositiveFiat = (fee: number | string): string => {
   const smallFeeThreshold = 0.01;
 
   if (BigNumber(fee).isEqualTo(0)) {