feat: Show < 0.01 when gas cost is really small (#33966)

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

Includes the following flows:
  - Send flow
  - Native transaction hero component
  - ERC20 transaction hero component
  - Transaction simulation balance changes
  - Selection of gas fee tokens
<!--
Write a short description of the changes included in this pull request,
also include relevant motivation and context. Have in mind the following
questions:
1. What is the reason for the change?
2. What is the improvement/solution?
-->

[![Open in GitHub
Codespaces](https://github.com/codespaces/badge.svg)](https://codespaces.new/MetaMask/metamask-extension/pull/33966?quickstart=1)

## **Related issues**

Fixes: MetaMask/MetaMask-planning#5256

## **Manual testing steps**

```
async function connectMetaMask() {
  try {
    const accounts = await window.ethereum.request({
      method: 'eth_requestAccounts',
    });
    console.log('Connected account:', accounts[0]);
    return accounts[0];
  } catch (error) {
    console.error('User rejected the request:', error);
    throw error;
  }
}

async function createTransactionWithHexData() {
  try {
    const fromAddress = await connectMetaMask();

    const transactionParameters = {
      to: '0x0C8ADd8d1B0eEFd9E4FD646ab75E3762b38B87dC',
      from: fromAddress,
      value: '0xE8D4A51000',
    };

    const txHash = await window.ethereum.request({
      method: 'eth_sendTransaction',
      params: [transactionParameters],
    });

    console.log('Transaction hash:', txHash);
    return txHash;
  } catch (error) {
    console.error('Error creating transaction:', error);
  }
}

createTransactionWithHexData();
```

## **Screenshots/Recordings**

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

### **Before**

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

### **After**

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

<img width="404" alt="Screenshot 2025-06-27 at 17 40 55"
src="https://github.com/user-attachments/assets/4e51e4ef-fb9e-4499-9f06-c56953887bd9"
/>
<img width="512" alt="Screenshot 2025-06-27 at 14 21 29"
src="https://github.com/user-attachments/assets/36e7eb1a-fedc-4e62-abdc-89ea6a64796c"
/>
<img width="2032" alt="Screenshot 2025-06-27 at 13 27 01"
src="https://github.com/user-attachments/assets/019cd622-9ba8-43a5-9986-6de1d58d4dea"
/>
<img width="2032" alt="Screenshot 2025-06-27 at 13 24 55"
src="https://github.com/user-attachments/assets/074c0e1d-cfe1-4734-a881-bffd0b9a27ef"
/>


## **Pre-merge author checklist**

- [ ] I've followed [MetaMask Contributor
Docs](https://github.com/MetaMask/contributor-docs) and [MetaMask
Extension Coding
Standards](https://github.com/MetaMask/metamask-extension/blob/main/.github/guidelines/CODING_GUIDELINES.md).
- [ ] 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](https://jsdoc.app/) format
if applicable
- [ ] I’ve applied the right labels on the PR (see [labeling
guidelines](https://github.com/MetaMask/metamask-extension/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.

---------

Co-authored-by: Vinicius Stevam <[email protected]>
Co-authored-by: Vinicius Stevam <[email protected]>

Author: pedronfigueiredo

ui/components/app/currency-input/currency-input.js

@@ -1,6 +1,7 @@
 import React, { useEffect, useRef, useState } from 'react';
 import PropTypes from 'prop-types';
 import { useSelector } from 'react-redux';
+import BigNumber from 'bignumber.js';
 import { Box } from '../../component-library';
 import { BlockSize } from '../../../helpers/constants/design-system';
 import UnitInput from '../../ui/unit-input';
@@ -205,10 +206,19 @@ export default function CurrencyInput({
 
     if (isTokenPrimary) {
       // Display fiat; `displayValue` bypasses calculations
-      displayValue = formatCurrency(
-        new Numeric(fiatDecimalValue, 10).toString(),
-        secondaryCurrency,
-      );
+      const isNonZeroSmallValue =
+        fiatDecimalValue &&
+        new BigNumber(fiatDecimalValue).lt(new BigNumber(0.01)) &&
+        new BigNumber(fiatDecimalValue).greaterThan(new BigNumber(0));
+      displayValue = isNonZeroSmallValue
+        ? `< ${formatCurrency(
+            new Numeric('0.01', 10).toString(),
+            secondaryCurrency,
+          )}`
+        : formatCurrency(
+            new Numeric(fiatDecimalValue, 10).toString(),
+            secondaryCurrency,
+          );
     } else {
       // Display token
       suffix = primarySuffix;

ui/hooks/useEthFiatAmount.js

@@ -1,5 +1,6 @@
 import { useMemo } from 'react';
 import { useSelector } from 'react-redux';
+import BigNumber from 'bignumber.js';
 import { getShouldShowFiat } from '../selectors';
 import { formatCurrency } from '../helpers/utils/confirm-tx.util';
 import {
@@ -41,6 +42,20 @@ export function useEthFiatAmount(
     return undefined;
   }
 
+  const fiatAmount = new BigNumber(ethAmount.toString()).times(conversionRate);
+  if (
+    ethAmount &&
+    fiatAmount.lt(new BigNumber(0.01)) &&
+    fiatAmount.greaterThan(new BigNumber(0))
+  ) {
+    return hideCurrencySymbol
+      ? `< ${formatCurrency(0.01, currentCurrency)}`
+      : `< ${formatCurrency(
+          0.01,
+          currentCurrency,
+        )} ${currentCurrency.toUpperCase()}`;
+  }
+
   return hideCurrencySymbol
     ? formatCurrency(formattedFiat, currentCurrency)
     : `${formatCurrency(

ui/pages/confirmations/components/confirm/info/hooks/use-token-values.ts

@@ -34,8 +34,13 @@ export const useTokenValues = (transactionMeta: TransactionMeta) => {
     decodedTransferValue &&
     exchangeRate.times(decodedTransferValue, 10).toNumber();
 
-  const fiatDisplayValue =
-    fiatValue && fiatFormatter(fiatValue, { shorten: true });
+  const isNonZeroSmallValue =
+    fiatValue &&
+    new BigNumber(String(fiatValue)).greaterThan(new BigNumber(0)) &&
+    new BigNumber(String(fiatValue)).lt(new BigNumber(0.01));
+  const fiatDisplayValue = isNonZeroSmallValue
+    ? `< ${fiatFormatter(0.01, { shorten: true })}`
+    : fiatValue && fiatFormatter(fiatValue, { shorten: true });
 
   const displayTransferValue = formatAmount(
     locale,

ui/pages/confirmations/components/confirm/info/shared/native-send-heading/native-send-heading.tsx

@@ -56,8 +56,13 @@ const NativeSendHeading = () => {
       .times(nativeAssetTransferValue, 10)
       .toNumber();
   const fiatFormatter = useFiatFormatter();
-  const fiatDisplayValue =
-    fiatValue && fiatFormatter(fiatValue, { shorten: true });
+  const isNonZeroSmallValue =
+    fiatValue &&
+    new BigNumber(String(fiatValue)).lt(new BigNumber(0.01)) &&
+    new BigNumber(String(fiatValue)).greaterThan(new BigNumber(0));
+  const fiatDisplayValue = isNonZeroSmallValue
+    ? `< ${fiatFormatter(0.01, { shorten: true })}`
+    : fiatValue && fiatFormatter(fiatValue, { shorten: true });
 
   const networkConfigurationsByChainId = useSelector(
     getNetworkConfigurationsByChainId,

ui/pages/confirmations/components/simulation-details/fiat-display.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import { useSelector } from 'react-redux';
+import { BigNumber } from 'bignumber.js';
 import {
   TextAlign,
   TextColor,
@@ -53,7 +54,13 @@ export const IndividualFiatDisplay: React.FC<{
     return null;
   }
   const absFiat = Math.abs(fiatAmount);
-  const fiatDisplayValue = fiatFormatter(absFiat, { shorten });
+  const isNonZeroSmallValue =
+    absFiat &&
+    new BigNumber(String(absFiat)).lt(new BigNumber(0.01)) &&
+    new BigNumber(String(absFiat)).greaterThan(new BigNumber(0));
+  const fiatDisplayValue = isNonZeroSmallValue
+    ? `< ${fiatFormatter(0.01, { shorten })}`
+    : fiatFormatter(absFiat, { shorten });
 
   return shorten ? (
     <Tooltip position="bottom" title={fiatDisplayValue} interactive>