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/fixture-builder.js

@@ -174,6 +174,18 @@ class FixtureBuilder {
     return this;
   }
 
+  withConversionRateDisabled() {
+    return this.withPreferencesController({
+      useCurrencyRateCheck: false,
+    });
+  }
+
+  withConversionRateEnabled() {
+    return this.withPreferencesController({
+      useCurrencyRateCheck: true,
+    });
+  }
+
   withGasFeeController(data) {
     merge(this.fixture.data.GasFeeController, data);
     return this;

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

@@ -11,7 +11,7 @@ describe('Settings', function () {
   it('Should match the value of token list item and account list item for eth conversion', async function () {
     await withFixtures(
       {
-        fixtures: new FixtureBuilder().build(),
+        fixtures: new FixtureBuilder().withConversionRateDisabled().build(),
         ganacheOptions: defaultGanacheOptions,
         title: this.test.fullTitle(),
       },
@@ -41,7 +41,7 @@ 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(),
+        fixtures: new FixtureBuilder().withConversionRateEnabled().build(),
         ganacheOptions: defaultGanacheOptions,
         title: this.test.fullTitle(),
       },
@@ -57,16 +57,6 @@ describe('Settings', function () {
           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',
@@ -78,7 +68,9 @@ describe('Settings', function () {
         const tokenListAmount = await driver.findElement(
           '.eth-overview__primary-container',
         );
+        await driver.delay(1000);
         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',

test/e2e/tests/tokens/custom-token-send-transfer.spec.js

@@ -59,7 +59,7 @@ describe('Transfer custom tokens @no-mmi', function () {
           '.currency-display-component__text',
         );
         assert.notEqual(
-          await estimatedGasFee[0].getText(),
+          await estimatedGasFee[1].getText(),
           '0',
           'Estimated gas fee should not be 0',
         );

test/e2e/tests/transaction/send-edit.spec.js

@@ -13,6 +13,7 @@ describe('Editing Confirm Transaction', function () {
       {
         fixtures: new FixtureBuilder()
           .withTransactionControllerTypeOneTransaction()
+          .withConversionRateDisabled()
           .build(),
         ganacheOptions: defaultGanacheOptions,
         title: this.test.fullTitle(),
@@ -87,6 +88,7 @@ describe('Editing Confirm Transaction', function () {
       {
         fixtures: new FixtureBuilder()
           .withTransactionControllerTypeTwoTransaction()
+          .withConversionRateDisabled()
           .build(),
         ganacheOptions: generateGanacheOptions({ hardfork: 'london' }),
         title: this.test.fullTitle(),

ui/hooks/useUserPreferencedCurrency.test.js

@@ -123,7 +123,7 @@ const renderUseUserPreferencedCurrency = (state, value, restProps) => {
       ...mockState.metamask,
       completedOnboarding: true,
       ...mockNetworkState({
-        chainId: state.showFiat ? CHAIN_IDS.MAINNET : CHAIN_IDS.LOCALHOST,
+        chainId: state.showFiat ? CHAIN_IDS.MAINNET : CHAIN_IDS.SEPOLIA,
         ticker: state?.nativeCurrency,
       }),
       currentCurrency: state.currentCurrency,

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()(