fix: fix fiat values in testnet visibility

shared/constants/network.ts

@@ -143,6 +143,7 @@ export const CHAIN_IDS = {
   SEI: '0x531',
   BERACHAIN: '0x138d5',
   METACHAIN_ONE: '0x1b6e6',
+  ARBITRUM_SEPOLIA: '0x66eee',
   NEAR: '0x18d',
   NEAR_TESTNET: '0x18e',
 } as const;
@@ -1034,4 +1035,5 @@ export const TEST_NETWORK_IDS = [
   CHAIN_IDS.SEPOLIA,
   CHAIN_IDS.LINEA_GOERLI,
   CHAIN_IDS.LINEA_SEPOLIA,
+  CHAIN_IDS.ARBITRUM_SEPOLIA,
 ];

test/e2e/tests/settings/account-token-list.spec.js

@@ -37,55 +37,4 @@ describe('Settings', function () {
       },
     );
   });
-
-  it('Should match the value of token list item and account list item for fiat conversion', async function () {
-    await withFixtures(
-      {
-        fixtures: new FixtureBuilder().build(),
-        ganacheOptions: defaultGanacheOptions,
-        title: this.test.fullTitle(),
-      },
-      async ({ driver, ganacheServer }) => {
-        await logInWithBalanceValidation(driver, ganacheServer);
-
-        await driver.clickElement(
-          '[data-testid="account-options-menu-button"]',
-        );
-        await driver.clickElement({ text: 'Settings', tag: 'div' });
-        await driver.clickElement({
-          text: 'General',
-          tag: 'div',
-        });
-        await driver.clickElement({ text: 'Fiat', tag: 'label' });
-        // We now need to enable "Show fiat on testnet" if we are using testnets (and since our custom
-        // network during test is using a testnet chain ID, it will be considered as a test network)
-        await driver.clickElement({
-          text: 'Advanced',
-          tag: 'div',
-        });
-        await driver.clickElement('.show-fiat-on-testnets-toggle');
-        // Looks like when enabling the "Show fiat on testnet" it takes some time to re-update the
-        // overview screen, so just wait a bit here:
-        await driver.delay(1000);
-
-        await driver.clickElement(
-          '.settings-page__header__title-container__close-button',
-        );
-        await driver.clickElement(
-          '[data-testid="account-overview__asset-tab"]',
-        );
-
-        const tokenListAmount = await driver.findElement(
-          '.eth-overview__primary-container',
-        );
-        assert.equal(await tokenListAmount.getText(), '$42,500.00\nUSD');
-        await driver.clickElement('[data-testid="account-menu-icon"]');
-        const accountTokenValue = await driver.waitForSelector(
-          '.multichain-account-list-item .multichain-account-list-item__asset',
-        );
-
-        assert.equal(await accountTokenValue.getText(), '$42,500.00USD');
-      },
-    );
-  });
 });

ui/pages/confirmations/components/confirm-gas-display/__snapshots__/confirm-gas-display.test.js.snap

@@ -37,16 +37,6 @@ exports[`ConfirmGasDisplay should match snapshot 1`] = `
                 class="mm-box mm-text mm-text--inherit mm-box--color-primary-default"
               />
             </button>
-            <div
-              class="mm-box currency-display-component mm-box--padding-inline-start-1 mm-box--display-flex mm-box--flex-wrap-wrap mm-box--align-items-center"
-              title="0.001197"
-            >
-              <span
-                class="mm-box mm-text currency-display-component__text mm-text--body-md-bold mm-text--ellipsis mm-box--color-text-default"
-              >
-                0.001197
-              </span>
-            </div>
           </div>
         </h6>
         <h6

ui/pages/confirmations/components/fee-details-component/fee-details-component.js

@@ -19,7 +19,7 @@ import {
   Text,
 } from '../../../../components/component-library';
 import TransactionDetailItem from '../transaction-detail-item/transaction-detail-item.component';
-import { getPreferences } from '../../../../selectors';
+import { getPreferences, getShouldShowFiat } from '../../../../selectors';
 import { useI18nContext } from '../../../../hooks/useI18nContext';
 import LoadingHeartBeat from '../../../../components/ui/loading-heartbeat';
 import UserPreferencedCurrencyDisplay from '../../../../components/app/user-preferenced-currency-display/user-preferenced-currency-display.component';
@@ -34,6 +34,7 @@ export default function FeeDetailsComponent({
 }) {
   const layer1GasFee = txData?.layer1GasFee ?? null;
   const [expandFeeDetails, setExpandFeeDetails] = useState(false);
+  const shouldShowFiat = useSelector(getShouldShowFiat);
 
   const { useNativeCurrencyAsPrimaryCurrency } = useSelector(getPreferences);
 
@@ -50,20 +51,22 @@ export default function FeeDetailsComponent({
       return (
         <div className="confirm-page-container-content__total-value">
           <LoadingHeartBeat estimateUsed={txData?.userFeeLevel} />
-          <UserPreferencedCurrencyDisplay
-            type={SECONDARY}
-            key="total-detail-text"
-            value={value}
-            suffixProps={{
-              color: TextColor.textAlternative,
-              variant: TextVariant.bodySmBold,
-            }}
-            textProps={{
-              color: TextColor.textAlternative,
-              variant: TextVariant.bodySmBold,
-            }}
-            hideLabel={Boolean(useNativeCurrencyAsPrimaryCurrency)}
-          />
+          {shouldShowFiat && (
+            <UserPreferencedCurrencyDisplay
+              type={SECONDARY}
+              key="total-detail-text"
+              value={value}
+              suffixProps={{
+                color: TextColor.textAlternative,
+                variant: TextVariant.bodySmBold,
+              }}
+              textProps={{
+                color: TextColor.textAlternative,
+                variant: TextVariant.bodySmBold,
+              }}
+              hideLabel={Boolean(useNativeCurrencyAsPrimaryCurrency)}
+            />
+          )}
         </div>
       );
     },
@@ -75,20 +78,22 @@ export default function FeeDetailsComponent({
       return (
         <Box className="confirm-page-container-content__total-value">
           <LoadingHeartBeat estimateUsed={txData?.userFeeLevel} />
-          <UserPreferencedCurrencyDisplay
-            type={PRIMARY}
-            key="total-detail-value"
-            value={value}
-            suffixProps={{
-              color: TextColor.textAlternative,
-              variant: TextVariant.bodySm,
-            }}
-            textProps={{
-              color: TextColor.textAlternative,
-              variant: TextVariant.bodySm,
-            }}
-            hideLabel={!useNativeCurrencyAsPrimaryCurrency}
-          />
+          {shouldShowFiat && (
+            <UserPreferencedCurrencyDisplay
+              type={PRIMARY}
+              key="total-detail-value"
+              value={value}
+              suffixProps={{
+                color: TextColor.textAlternative,
+                variant: TextVariant.bodySm,
+              }}
+              textProps={{
+                color: TextColor.textAlternative,
+                variant: TextVariant.bodySm,
+              }}
+              hideLabel={!useNativeCurrencyAsPrimaryCurrency}
+            />
+          )}
         </Box>
       );
     },
@@ -168,18 +173,15 @@ export default function FeeDetailsComponent({
                   {t('layer1Fees')}
                 </Text>
               }
-              detailText={
-                useCurrencyRateCheck && renderTotalDetailText(layer1GasFee)
-              }
+              detailText={shouldShowFiat && renderTotalDetailText(layer1GasFee)}
               detailTotal={renderTotalDetailValue(layer1GasFee)}
             />
           )}
           {!hasLayer1GasFee && (
             <TransactionDetailItem
               detailTitle={t('total')}
               detailText={
-                useCurrencyRateCheck &&
-                renderTotalDetailText(getTransactionFeeTotal)
+                shouldShowFiat && renderTotalDetailText(getTransactionFeeTotal)
               }
               detailTotal={renderTotalDetailValue(getTransactionFeeTotal)}
             />

ui/pages/confirmations/components/gas-details-item/gas-details-item.js

@@ -18,8 +18,8 @@ import { PRIMARY, SECONDARY } from '../../../../helpers/constants/common';
 import { PriorityLevels } from '../../../../../shared/constants/gas';
 import {
   getPreferences,
+  getShouldShowFiat,
   getTxData,
-  getUseCurrencyRateCheck,
   transactionFeeSelector,
 } from '../../../../selectors';
 import { getCurrentDraftTransaction } from '../../../../ducks/send';
@@ -44,12 +44,14 @@ const GasDetailsItem = ({
   userAcknowledgedGasMissing = false,
 }) => {
   const t = useI18nContext();
+  const shouldShowFiat = useSelector(getShouldShowFiat);
 
   const txData = useSelector(getTxData);
   const { layer1GasFee } = txData;
 
   const draftTransaction = useSelector(getCurrentDraftTransaction);
   const transactionData = useDraftTransactionWithTxParams();
+
   const {
     hexMinimumTransactionFee: draftHexMinimumTransactionFee,
     hexMaximumTransactionFee: draftHexMaximumTransactionFee,
@@ -67,8 +69,6 @@ const GasDetailsItem = ({
   } = useGasFeeContext();
 
   const { useNativeCurrencyAsPrimaryCurrency } = useSelector(getPreferences);
-
-  const useCurrencyRateCheck = useSelector(getUseCurrencyRateCheck);
   const getTransactionFeeTotal = useMemo(() => {
     if (layer1GasFee) {
       return sumHexes(hexMinimumTransactionFee, layer1GasFee);
@@ -137,7 +137,7 @@ const GasDetailsItem = ({
             <EditGasFeeIcon
               userAcknowledgedGasMissing={userAcknowledgedGasMissing}
             />
-            {useCurrencyRateCheck && (
+            {shouldShowFiat && (
               <UserPreferencedCurrencyDisplay
                 paddingInlineStart={1}
                 suffixProps={{

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

@@ -21,6 +21,12 @@ const mockStateWithShowingFiatOnTestnets = merge({}, mockStateWithTestnet, {
     preferences: {
       showFiatInTestnets: true,
     },
+    useCurrencyRateCheck: true,
+    currencyRates: {
+      SepoliaETH: {
+        conversionRate: 1,
+      },
+    },
   },
 });
 const mockStoreWithShowingFiatOnTestnets = configureStore()(
@@ -32,6 +38,7 @@ const mockStateWithHidingFiatOnTestnets = merge({}, mockStateWithTestnet, {
     preferences: {
       showFiatInTestnets: false,
     },
+    useCurrencyRateCheck: false,
   },
 });
 const mockStoreWithHidingFiatOnTestnets = configureStore()(

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

@@ -1,4 +1,5 @@
 import React from 'react';
+import { useSelector } from 'react-redux';
 import {
   TextAlign,
   TextColor,
@@ -9,7 +10,7 @@ import { Text } from '../../../../components/component-library';
 import { SizeNumber } from '../../../../components/component-library/box/box.types';
 import Tooltip from '../../../../components/ui/tooltip';
 import { useFiatFormatter } from '../../../../hooks/useFiatFormatter';
-import { useHideFiatForTestnet } from '../../../../hooks/useHideFiatForTestnet';
+import { getShouldShowFiat } from '../../../../selectors';
 import { FIAT_UNAVAILABLE, FiatAmount } from './types';
 
 const textStyle = {
@@ -41,10 +42,10 @@ export const IndividualFiatDisplay: React.FC<{
   fiatAmount: FiatAmount;
   shorten?: boolean;
 }> = ({ fiatAmount, shorten = false }) => {
-  const hideFiatForTestnet = useHideFiatForTestnet();
+  const shouldShowFiat = useSelector(getShouldShowFiat);
   const fiatFormatter = useFiatFormatter();
 
-  if (hideFiatForTestnet) {
+  if (!shouldShowFiat) {
     return null;
   }
 
@@ -76,12 +77,12 @@ export const IndividualFiatDisplay: React.FC<{
 export const TotalFiatDisplay: React.FC<{
   fiatAmounts: FiatAmount[];
 }> = ({ fiatAmounts }) => {
-  const hideFiatForTestnet = useHideFiatForTestnet();
+  const shouldShowFiat = useSelector(getShouldShowFiat);
   const t = useI18nContext();
   const fiatFormatter = useFiatFormatter();
   const totalFiat = calculateTotalFiat(fiatAmounts);
 
-  if (hideFiatForTestnet) {
+  if (!shouldShowFiat) {
     return null;
   }