fix: Hide fiat values on test networks (#28219)

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

Hides fiat values by default unless "Show conversion on test networks"
is toggled on in the settings. Includes changes to the gas fees
components, and the send heading components for native and erc20 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/28219?quickstart=1)

## **Related issues**

Fixes: #27814

## **Manual testing steps**

1. Toggle off "Show conversion on test networks" in the settings
2. Initiate a SepoliaETH or any erc20 token transfer from the wallet on
Sepolia network
3. Check the gas fees components and the heading component.

## **Screenshots/Recordings**

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

### **Before**

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

### **After**

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

## **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/develop/.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/develop/.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.

test/integration/confirmations/transactions/contract-deployment.test.tsx

@@ -284,9 +284,6 @@ describe('Contract Deployment Confirmation', () => {
 
     const firstGasField = within(editGasFeesRow).getByTestId('first-gas-field');
     expect(firstGasField).toHaveTextContent('0.0001 SepoliaETH');
-    const editGasFeeNativeCurrency =
-      within(editGasFeesRow).getByTestId('native-currency');
-    expect(editGasFeeNativeCurrency).toHaveTextContent('$0.47');
     expect(editGasFeesRow).toContainElement(
       screen.getByTestId('edit-gas-fee-icon'),
     );
@@ -372,7 +369,6 @@ describe('Contract Deployment Confirmation', () => {
     expect(gasFeesSection).toContainElement(maxFee);
     expect(maxFee).toHaveTextContent(tEn('maxFee') as string);
     expect(maxFee).toHaveTextContent('0.0023 SepoliaETH');
-    expect(maxFee).toHaveTextContent('$7.72');
 
     const nonceSection = screen.getByTestId('advanced-details-nonce-section');
     expect(nonceSection).toBeInTheDocument();

test/integration/confirmations/transactions/contract-interaction.test.tsx

@@ -302,9 +302,6 @@ describe('Contract Interaction Confirmation', () => {
 
     const firstGasField = within(editGasFeesRow).getByTestId('first-gas-field');
     expect(firstGasField).toHaveTextContent('0.0001 SepoliaETH');
-    const editGasFeeNativeCurrency =
-      within(editGasFeesRow).getByTestId('native-currency');
-    expect(editGasFeeNativeCurrency).toHaveTextContent('$0.47');
     expect(editGasFeesRow).toContainElement(
       screen.getByTestId('edit-gas-fee-icon'),
     );
@@ -403,7 +400,6 @@ describe('Contract Interaction Confirmation', () => {
     expect(gasFeesSection).toContainElement(maxFee);
     expect(maxFee).toHaveTextContent(tEn('maxFee') as string);
     expect(maxFee).toHaveTextContent('0.0023 SepoliaETH');
-    expect(maxFee).toHaveTextContent('$7.72');
 
     const nonceSection = screen.getByTestId('advanced-details-nonce-section');
     expect(nonceSection).toBeInTheDocument();

ui/pages/confirmations/components/confirm/info/native-transfer/__snapshots__/native-transfer.test.tsx.snap

@@ -15,11 +15,6 @@ exports[`NativeTransferInfo renders correctly 1`] = `
     >
       0 ETH
     </h2>
-    <p
-      class="mm-box mm-text mm-text--body-md mm-box--color-text-alternative"
-    >
-      0
-    </p>
   </div>
   <div
     class="mm-box mm-box--margin-bottom-4 mm-box--padding-2 mm-box--background-color-background-default mm-box--rounded-md"

ui/pages/confirmations/components/confirm/info/shared/edit-gas-fees-row/edit-gas-fees-row.tsx

@@ -1,5 +1,9 @@
-import React, { Dispatch, SetStateAction } from 'react';
 import { TransactionMeta } from '@metamask/transaction-controller';
+import React, { Dispatch, SetStateAction } from 'react';
+import { useSelector } from 'react-redux';
+import { TEST_CHAINS } from '../../../../../../../../shared/constants/network';
+import { ConfirmInfoAlertRow } from '../../../../../../../components/app/confirm/info/row/alert-row/alert-row';
+import { RowAlertKey } from '../../../../../../../components/app/confirm/info/row/constants';
 import { Box, Text } from '../../../../../../../components/component-library';
 import {
   AlignItems,
@@ -10,10 +14,9 @@ import {
   TextColor,
 } from '../../../../../../../helpers/constants/design-system';
 import { useI18nContext } from '../../../../../../../hooks/useI18nContext';
+import { getPreferences } from '../../../../../../../selectors';
 import { useConfirmContext } from '../../../../../context/confirm';
 import { EditGasIconButton } from '../edit-gas-icon/edit-gas-icon-button';
-import { ConfirmInfoAlertRow } from '../../../../../../../components/app/confirm/info/row/alert-row/alert-row';
-import { RowAlertKey } from '../../../../../../../components/app/confirm/info/row/constants';
 
 export const EditGasFeesRow = ({
   fiatFee,
@@ -31,6 +34,12 @@ export const EditGasFeesRow = ({
   const { currentConfirmation: transactionMeta } =
     useConfirmContext<TransactionMeta>();
 
+  type TestNetChainId = (typeof TEST_CHAINS)[number];
+  const isTestnet = TEST_CHAINS.includes(
+    transactionMeta.chainId as TestNetChainId,
+  );
+  const { showFiatInTestnets } = useSelector(getPreferences);
+
   return (
     <ConfirmInfoAlertRow
       alertKey={RowAlertKey.EstimatedFee}
@@ -53,13 +62,15 @@ export const EditGasFeesRow = ({
         >
           {nativeFee}
         </Text>
-        <Text
-          marginRight={2}
-          color={TextColor.textAlternative}
-          data-testid="native-currency"
-        >
-          {fiatFee}
-        </Text>
+        {(!isTestnet || showFiatInTestnets) && (
+          <Text
+            marginRight={2}
+            color={TextColor.textAlternative}
+            data-testid="native-currency"
+          >
+            {fiatFee}
+          </Text>
+        )}
         <EditGasIconButton
           supportsEIP1559={supportsEIP1559}
           setShowCustomizeGasPopover={setShowCustomizeGasPopover}

ui/pages/confirmations/components/confirm/info/shared/gas-fees-row/gas-fees-row.stories.tsx

@@ -4,6 +4,7 @@ import { Provider } from 'react-redux';
 
 import mockState from '../../../../../../../../test/data/mock-state.json';
 import configureStore from '../../../../../../../store/store';
+import { ConfirmContextProvider } from '../../../../../context/confirm';
 import { GasFeesRow } from './gas-fees-row';
 
 function getStore() {
@@ -32,12 +33,14 @@ const Story = {
 export default Story;
 
 export const DefaultStory = () => (
-  <GasFeesRow
-    label="Some kind of fee"
-    tooltipText="Tooltip text"
-    fiatFee="$1"
-    nativeFee="0.0001 ETH"
-  />
+  <ConfirmContextProvider>
+    <GasFeesRow
+      label="Some kind of fee"
+      tooltipText="Tooltip text"
+      fiatFee="$1"
+      nativeFee="0.0001 ETH"
+    />
+  </ConfirmContextProvider>
 );
 
 DefaultStory.storyName = 'Default';

ui/pages/confirmations/components/confirm/info/shared/gas-fees-row/gas-fees-row.test.tsx

@@ -2,8 +2,8 @@ import React from 'react';
 import configureMockStore from 'redux-mock-store';
 import thunk from 'redux-thunk';
 
-import { renderWithProvider } from '../../../../../../../../test/lib/render-helpers';
 import mockState from '../../../../../../../../test/data/mock-state.json';
+import { renderWithConfirmContextProvider } from '../../../../../../../../test/lib/confirmations/render-helpers';
 import { GasFeesRow } from './gas-fees-row';
 
 describe('<GasFeesRow />', () => {
@@ -12,7 +12,7 @@ describe('<GasFeesRow />', () => {
   it('renders component', () => {
     const state = mockState;
     const mockStore = configureMockStore(middleware)(state);
-    const { container } = renderWithProvider(
+    const { container } = renderWithConfirmContextProvider(
       <GasFeesRow
         label="Some kind of fee"
         tooltipText="Tooltip text"

ui/pages/confirmations/components/confirm/info/shared/gas-fees-row/gas-fees-row.tsx

@@ -1,4 +1,7 @@
+import { TransactionMeta } from '@metamask/transaction-controller';
 import React from 'react';
+import { useSelector } from 'react-redux';
+import { TEST_CHAINS } from '../../../../../../../../shared/constants/network';
 import {
   ConfirmInfoRow,
   ConfirmInfoRowVariant,
@@ -12,6 +15,8 @@ import {
   TextAlign,
   TextColor,
 } from '../../../../../../../helpers/constants/design-system';
+import { getPreferences } from '../../../../../../../selectors';
+import { useConfirmContext } from '../../../../../context/confirm';
 
 export const GasFeesRow = ({
   label,
@@ -26,6 +31,15 @@ export const GasFeesRow = ({
   nativeFee: string;
   'data-testid'?: string;
 }) => {
+  const { currentConfirmation: transactionMeta } =
+    useConfirmContext<TransactionMeta>();
+
+  type TestNetChainId = (typeof TEST_CHAINS)[number];
+  const isTestnet = TEST_CHAINS.includes(
+    transactionMeta?.chainId as TestNetChainId,
+  );
+  const { showFiatInTestnets } = useSelector(getPreferences);
+
   return (
     <ConfirmInfoRow
       data-testid={dataTestId}
@@ -44,7 +58,9 @@ export const GasFeesRow = ({
         <Text marginRight={1} color={TextColor.textDefault}>
           {nativeFee}
         </Text>
-        <Text color={TextColor.textAlternative}>{fiatFee}</Text>
+        {(!isTestnet || showFiatInTestnets) && (
+          <Text color={TextColor.textAlternative}>{fiatFee}</Text>
+        )}
       </Box>
     </ConfirmInfoRow>
   );

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

@@ -2,7 +2,10 @@ import { TransactionMeta } from '@metamask/transaction-controller';
 import { BigNumber } from 'bignumber.js';
 import React from 'react';
 import { useSelector } from 'react-redux';
-import { CHAIN_ID_TO_NETWORK_IMAGE_URL_MAP } from '../../../../../../../../shared/constants/network';
+import {
+  CHAIN_ID_TO_NETWORK_IMAGE_URL_MAP,
+  TEST_CHAINS,
+} from '../../../../../../../../shared/constants/network';
 import {
   AvatarToken,
   AvatarTokenSize,
@@ -22,6 +25,7 @@ import {
 } from '../../../../../../../helpers/constants/design-system';
 import { MIN_AMOUNT } from '../../../../../../../hooks/useCurrencyDisplay';
 import { useFiatFormatter } from '../../../../../../../hooks/useFiatFormatter';
+import { getPreferences } from '../../../../../../../selectors';
 import { getMultichainNetwork } from '../../../../../../../selectors/multichain';
 import { useConfirmContext } from '../../../../../context/confirm';
 import {
@@ -59,6 +63,12 @@ const NativeSendHeading = () => {
     nativeAssetTransferValue.toNumber(),
   );
 
+  type TestNetChainId = (typeof TEST_CHAINS)[number];
+  const isTestnet = TEST_CHAINS.includes(
+    transactionMeta.chainId as TestNetChainId,
+  );
+  const { showFiatInTestnets } = useSelector(getPreferences);
+
   const NetworkImage = (
     <AvatarToken
       src={
@@ -94,11 +104,12 @@ const NativeSendHeading = () => {
       </Text>
     );
 
-  const NativeAssetFiatConversion = (
-    <Text variant={TextVariant.bodyMd} color={TextColor.textAlternative}>
-      {fiatDisplayValue}
-    </Text>
-  );
+  const NativeAssetFiatConversion = Boolean(fiatDisplayValue) &&
+    (!isTestnet || showFiatInTestnets) && (
+      <Text variant={TextVariant.bodyMd} color={TextColor.textAlternative}>
+        {fiatDisplayValue}
+      </Text>
+    );
 
   return (
     <Box

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

@@ -1,6 +1,7 @@
 import { TransactionMeta } from '@metamask/transaction-controller';
 import React from 'react';
 import { useSelector } from 'react-redux';
+import { TEST_CHAINS } from '../../../../../../../../shared/constants/network';
 import {
   AvatarToken,
   AvatarTokenSize,
@@ -20,6 +21,7 @@ import {
 } from '../../../../../../../helpers/constants/design-system';
 import { MIN_AMOUNT } from '../../../../../../../hooks/useCurrencyDisplay';
 import { useI18nContext } from '../../../../../../../hooks/useI18nContext';
+import { getPreferences } from '../../../../../../../selectors';
 import { useConfirmContext } from '../../../../../context/confirm';
 import { formatAmountMaxPrecision } from '../../../../simulation-details/formatAmount';
 import { useTokenValues } from '../../hooks/use-token-values';
@@ -39,6 +41,12 @@ const SendHeading = () => {
     pending,
   } = useTokenValues(transactionMeta);
 
+  type TestNetChainId = (typeof TEST_CHAINS)[number];
+  const isTestnet = TEST_CHAINS.includes(
+    transactionMeta.chainId as TestNetChainId,
+  );
+  const { showFiatInTestnets } = useSelector(getPreferences);
+
   const TokenImage = (
     <AvatarToken
       src={tokenImage}
@@ -75,11 +83,12 @@ const SendHeading = () => {
       >{`${displayTransferValue} ${tokenSymbol}`}</Text>
     );
 
-  const TokenFiatValue = fiatDisplayValue && (
-    <Text variant={TextVariant.bodyMd} color={TextColor.textAlternative}>
-      {fiatDisplayValue}
-    </Text>
-  );
+  const TokenFiatValue = Boolean(fiatDisplayValue) &&
+    (!isTestnet || showFiatInTestnets) && (
+      <Text variant={TextVariant.bodyMd} color={TextColor.textAlternative}>
+        {fiatDisplayValue}
+      </Text>
+    );
 
   if (pending) {
     return <ConfirmLoader />;