fix(perps): change fee rounding for small fees (#22264)

<!--
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**

Adds a small-fee threshold to show "< $0.01" for fees below $0.01,
improving readability and avoiding misleading precision.

## **Changelog**

CHANGELOG entry: Display < $0.01 for small fees in Perps

## **Related issues**

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

## **Manual testing steps**

```gherkin
Feature: Perps position transaction view fee display

  Scenario: user views transaction with small fee
    Given a user has a closed position transaction with a fee less than $0.01 (e.g., $0.005)
    When user views the transaction details screen
    Then the fee should display as "< $0.01" instead of the exact amount
```

## **Screenshots/Recordings**


### **Before**

![IMG_EB5F710DB10B-1](https://github.com/user-attachments/assets/eff4f430-b913-4f28-8ec1-f703a7cf9115)


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

### **After**

<img width="1170" height="2532" alt="Simulator Screenshot - iPhone 16e -
2025-11-07 at 11 04 09"
src="https://github.com/user-attachments/assets/6f3a891f-b203-41f0-a241-76b0c2979635"
/>


## **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]
> Introduces `formatFee` to show "< $0.01" for fees below $0.01 and
updates Perps transaction views and tests to use it.
> 
> - **Utilities**:
> - Add `formatFee` in `app/components/UI/Perps/utils/formatUtils.ts` to
return `"$0"`, `"< $0.01"`, or formatted fiat; add comprehensive unit
tests.
> - **Views**:
> - Replace ad-hoc fee formatting with `formatFee` in
`PerpsOrderTransactionView.tsx` and `PerpsPositionTransactionView.tsx`;
ensure unfilled orders show `$0`.
> - **Tests**:
> - Update and expand tests in transaction view specs to assert `"<
$0.01"` behavior and edge cases; keep existing explorer navigation tests
intact.
> 
> <sup>Written by [Cursor
Bugbot](https://cursor.com/dashboard?tab=bugbot) for commit
cf07474. This will update automatically
on new commits. Configure
[here](https://cursor.com/dashboard?tab=bugbot).</sup>
<!-- /CURSOR_SUMMARY -->

---------

Co-authored-by: Nicholas Smith <nick.smith@consensys.net>
Co-authored-by: dylanbutler1 <99672693+dylanbutler1@users.noreply.github.com>

Author: 3 people

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

@@ -94,7 +94,7 @@ describe('PerpsOrderTransactionView', () => {
     mockUsePerpsOrderFees.mockReturnValue({
       totalFee: 10.5,
       protocolFee: 7.5,
-      metamaskFee: 3.0,
+      metamaskFee: 3,
       protocolFeeRate: 0.1,
       metamaskFeeRate: 0.05,
       isLoadingMetamaskFee: false,
@@ -162,7 +162,7 @@ describe('PerpsOrderTransactionView', () => {
     expect(zeroFees).toHaveLength(3); // All three fees should be $0
   });
 
-  it('should handle small fees correctly', () => {
+  it('should show "< $0.01" for fees less than 0.01', () => {
     mockUsePerpsOrderFees.mockReturnValue({
       totalFee: 0.005,
       protocolFee: 0.003,
@@ -173,11 +173,135 @@ describe('PerpsOrderTransactionView', () => {
       error: null,
     });
 
-    const { getByText } = render(<PerpsOrderTransactionView />);
+    const { getAllByText } = render(<PerpsOrderTransactionView />);
+
+    // All three fees should show "< $0.01" since they're all less than 0.01
+    const smallFeeLabels = getAllByText('< $0.01');
+    expect(smallFeeLabels).toHaveLength(3);
+  });
+
+  it('should format fees normally when they are exactly 0.01', () => {
+    mockUsePerpsOrderFees.mockReturnValue({
+      totalFee: 0.03,
+      protocolFee: 0.01,
+      metamaskFee: 0.01,
+      protocolFeeRate: 0.1,
+      metamaskFeeRate: 0.05,
+      isLoadingMetamaskFee: false,
+      error: null,
+    });
+
+    const { getAllByText, queryByText, getByText } = render(
+      <PerpsOrderTransactionView />,
+    );
+
+    // Fees at exactly 0.01 should be formatted normally, not show "< $0.01"
+    expect(queryByText('< $0.01')).toBeNull();
+    // Both metamask and protocol fees are 0.01
+    const fee01Labels = getAllByText('$0.01');
+    expect(fee01Labels.length).toBeGreaterThanOrEqual(2);
+    expect(getByText('$0.03')).toBeTruthy(); // Total fee
+  });
+
+  it('should format fees normally when they are greater than 0.01', () => {
+    mockUsePerpsOrderFees.mockReturnValue({
+      totalFee: 0.015,
+      protocolFee: 0.012,
+      metamaskFee: 0.003,
+      protocolFeeRate: 0.1,
+      metamaskFeeRate: 0.05,
+      isLoadingMetamaskFee: false,
+      error: null,
+    });
+
+    const { getByText, getAllByText } = render(<PerpsOrderTransactionView />);
+
+    // Metamask fee is less than 0.01, should show "< $0.01"
+    expect(getAllByText('< $0.01')).toHaveLength(1);
+    // Protocol and total fees are >= 0.01, should be formatted normally
+    expect(getByText('$0.01')).toBeTruthy(); // Protocol fee formatted
+    expect(getByText('$0.02')).toBeTruthy(); // Total fee formatted (rounded)
+  });
+
+  it('should handle mixed small and large fees correctly', () => {
+    mockUsePerpsOrderFees.mockReturnValue({
+      totalFee: 0.025,
+      protocolFee: 0.02,
+      metamaskFee: 0.005,
+      protocolFeeRate: 0.1,
+      metamaskFeeRate: 0.05,
+      isLoadingMetamaskFee: false,
+      error: null,
+    });
+
+    const { getByText, getAllByText } = render(<PerpsOrderTransactionView />);
+
+    // Metamask fee is less than 0.01
+    const smallFeeLabels = getAllByText('< $0.01');
+    expect(smallFeeLabels).toHaveLength(1);
+    // Protocol and total fees are >= 0.01, should be formatted
+    expect(getByText('$0.02')).toBeTruthy(); // Protocol fee
+    expect(getByText('$0.03')).toBeTruthy(); // Total fee (rounded)
+  });
+
+  it('should handle edge case: fee just below 0.01 threshold', () => {
+    mockUsePerpsOrderFees.mockReturnValue({
+      totalFee: 0.029,
+      protocolFee: 0.0099,
+      metamaskFee: 0.0099,
+      protocolFeeRate: 0.1,
+      metamaskFeeRate: 0.05,
+      isLoadingMetamaskFee: false,
+      error: null,
+    });
+
+    const { getAllByText } = render(<PerpsOrderTransactionView />);
+
+    // Both metamask and protocol fees are just below 0.01
+    const smallFeeLabels = getAllByText('< $0.01');
+    expect(smallFeeLabels).toHaveLength(2);
+    // Total fee is >= 0.01, should be formatted
+  });
+
+  it('should handle edge case: fee just above 0.01 threshold', () => {
+    mockUsePerpsOrderFees.mockReturnValue({
+      totalFee: 0.0201,
+      protocolFee: 0.0101,
+      metamaskFee: 0.01,
+      protocolFeeRate: 0.1,
+      metamaskFeeRate: 0.05,
+      isLoadingMetamaskFee: false,
+      error: null,
+    });
+
+    const { queryByText, getAllByText, getByText } = render(
+      <PerpsOrderTransactionView />,
+    );
+
+    // All fees are >= 0.01, should be formatted normally
+    expect(queryByText('< $0.01')).toBeNull();
+    // Metamask fee and protocol fee (rounded) both show $0.01
+    const fee01Labels = getAllByText('$0.01');
+    expect(fee01Labels.length).toBeGreaterThanOrEqual(2);
+    expect(getByText('$0.02')).toBeTruthy(); // Total fee (rounded)
+  });
+
+  it('should show "< $0.01" for all fees when all are below threshold', () => {
+    mockUsePerpsOrderFees.mockReturnValue({
+      totalFee: 0.008,
+      protocolFee: 0.005,
+      metamaskFee: 0.003,
+      protocolFeeRate: 0.1,
+      metamaskFeeRate: 0.05,
+      isLoadingMetamaskFee: false,
+      error: null,
+    });
+
+    const { getAllByText } = render(<PerpsOrderTransactionView />);
 
-    expect(getByText('$0.002')).toBeTruthy();
-    expect(getByText('$0.003')).toBeTruthy();
-    expect(getByText('$0.005')).toBeTruthy();
+    // All three fees are below 0.01
+    const smallFeeLabels = getAllByText('< $0.01');
+    expect(smallFeeLabels).toHaveLength(3);
   });
 
   it('should navigate to block explorer in browser tab when button is pressed', () => {

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

@@ -11,7 +11,6 @@ import Text, {
   TextVariant,
 } from '../../../../../component-library/components/Texts/Text';
 
-import { BigNumber } from 'bignumber.js';
 import { useSelector } from 'react-redux';
 import { PerpsTransactionSelectorsIDs } from '../../../../../../e2e/selectors/Perps/Perps.selectors';
 import Button, {
@@ -28,6 +27,7 @@ import { usePerpsBlockExplorerUrl, usePerpsOrderFees } from '../../hooks';
 import { PerpsNavigationParamList } from '../../types/navigation';
 import { PerpsOrderTransactionRouteProp } from '../../types/transactionHistory';
 import {
+  formatFee,
   formatPerpsFiat,
   formatTransactionDate,
 } from '../../utils/formatUtils';
@@ -103,44 +103,21 @@ const PerpsOrderTransactionView: React.FC = () => {
   ];
 
   const isFilled = transaction.order?.text === 'Filled';
+
   // Fee breakdown
 
   const feeRows = [
     {
       label: strings('perps.transactions.order.metamask_fee'),
-      value: `${
-        isFilled
-          ? `${
-              BigNumber(metamaskFee).isLessThan(0.01)
-                ? `$${metamaskFee}`
-                : formatPerpsFiat(metamaskFee)
-            }`
-          : '$0'
-      }`,
+      value: formatFee(isFilled ? metamaskFee : 0),
     },
     {
       label: strings('perps.transactions.order.hyperliquid_fee'),
-      value: `${
-        isFilled
-          ? `${
-              BigNumber(protocolFee).isLessThan(0.01)
-                ? `$${protocolFee}`
-                : formatPerpsFiat(protocolFee)
-            }`
-          : '$0'
-      }`,
+      value: formatFee(isFilled ? protocolFee : 0),
     },
     {
       label: strings('perps.transactions.order.total_fee'),
-      value: `${
-        isFilled
-          ? `${
-              BigNumber(totalFee).isLessThan(0.01)
-                ? `$${totalFee}`
-                : formatPerpsFiat(totalFee)
-            }`
-          : '$0'
-      }`,
+      value: formatFee(isFilled ? totalFee : 0),
     },
   ];
 

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

@@ -361,7 +361,7 @@ describe('PerpsPositionTransactionView', () => {
     expect(getByText('$5')).toBeOnTheScreen();
   });
 
-  it('should display fees with $ prefix directly for amounts < 0.01', () => {
+  it('should display fees with < $0.01 label for amounts < 0.01', () => {
     // Given a transaction with fee less than 0.01
     const smallFeeTransaction = {
       ...mockTransaction,
@@ -379,9 +379,9 @@ describe('PerpsPositionTransactionView', () => {
       state: mockInitialState,
     });
 
-    // Then fee should display with $ prefix directly (not formatted through formatPerpsFiat)
+    // Then fee should display with < $0.01 label (not the actual value)
     expect(getByText('Total fees')).toBeOnTheScreen();
-    expect(getByText('$0.005')).toBeOnTheScreen();
+    expect(getByText('< $0.01')).toBeOnTheScreen();
   });
 
   it('should not render points when not present', () => {

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

@@ -30,6 +30,7 @@ import {
   PerpsTransaction,
 } from '../../types/transactionHistory';
 import {
+  formatFee,
   formatPerpsFiat,
   formatTransactionDate,
   PRICE_RANGES_UNIVERSAL,
@@ -115,9 +116,7 @@ const PerpsPositionTransactionView: React.FC = () => {
     transaction.fill?.fee !== undefined &&
       transaction.fill?.fee !== null && {
         label: strings('perps.transactions.position.fees'),
-        value: BigNumber(transaction.fill.fee).isGreaterThan(0.01)
-          ? formatPerpsFiat(transaction.fill.fee)
-          : `$${transaction.fill.fee}`,
+        value: formatFee(transaction.fill.fee),
         textColor: TextColor.Default,
       },
   ].filter(Boolean);