Adding price checker deactivation for Optimism (#18833)

ui/components/app/confirm-gas-display/confirm-legacy-gas-display/confirm-legacy-gas-display.js

@@ -64,11 +64,13 @@ const ConfirmLegacyGasDisplay = () => {
           />
         }
         detailText={
+          useCurrencyRateCheck && (
             <UserPreferencedCurrencyDisplay
               type={SECONDARY}
               value={hexMinimumTransactionFee}
               hideLabel={Boolean(useNativeCurrencyAsPrimaryCurrency)}
             />
+          )
         }
         noBold
         flexWidthValues

ui/components/app/multilayer-fee-message/__snapshots__/multi-layer-fee-message.test.js.snap

@@ -1,6 +1,81 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Multi layer fee message should match snapshot 1`] = `
+exports[`Multi layer fee message when balance and token price checker is disabled should match screenshot 1`] = `
+<div>
+  <div
+    class="multi-layer-fee-message"
+  >
+    <div
+      class="transaction-detail-item"
+    >
+      <div
+        class="transaction-detail-item__row"
+      >
+        <h6
+          class="box box--margin-top-1 box--margin-bottom-1 box--display-flex box--flex-direction-row box--flex-wrap-nowrap box--align-items-center typography typography--h6 typography--weight-bold typography--style-normal typography--color-text-default"
+        >
+          Layer 1 fees
+        </h6>
+        <div
+          class="transaction-detail-item__detail-values"
+        >
+          <h6
+            class="box box--margin-top-1 box--margin-bottom-1 box--margin-left-1 box--flex-direction-row box--text-align-right typography typography--h6 typography--weight-bold typography--style-normal typography--color-text-default"
+          >
+            Unknown
+          </h6>
+        </div>
+      </div>
+      <div
+        class="transaction-detail-item__row"
+      >
+        <h6
+          class="box box--margin-top-1 box--margin-bottom-1 box--flex-direction-row typography typography--h7 typography--weight-normal typography--style-normal typography--color-text-alternative"
+        />
+        <h6
+          class="box box--margin-top-1 box--margin-bottom-1 box--flex-direction-row typography transaction-detail-item__row-subText typography--h7 typography--weight-normal typography--style-normal typography--align-end typography--color-text-alternative"
+        />
+      </div>
+    </div>
+    <div
+      class="transaction-detail-item"
+    >
+      <div
+        class="transaction-detail-item__row"
+      >
+        <h6
+          class="box box--margin-top-1 box--margin-bottom-1 box--display-flex box--flex-direction-row box--flex-wrap-nowrap box--align-items-center typography typography--h6 typography--weight-bold typography--style-normal typography--color-text-default"
+        >
+          Total
+        </h6>
+        <div
+          class="transaction-detail-item__detail-values"
+        >
+          <h6
+            class="box box--margin-top-1 box--margin-bottom-1 box--margin-left-1 box--flex-direction-row box--text-align-right typography typography--h6 typography--weight-bold typography--style-normal typography--color-text-default"
+          >
+            0.001000021000 ETH
+          </h6>
+        </div>
+      </div>
+      <div
+        class="transaction-detail-item__row"
+      >
+        <h6
+          class="box box--margin-top-1 box--margin-bottom-1 box--flex-direction-row typography typography--h7 typography--weight-normal typography--style-normal typography--color-text-alternative"
+        >
+          Amount + fees
+        </h6>
+        <h6
+          class="box box--margin-top-1 box--margin-bottom-1 box--flex-direction-row typography transaction-detail-item__row-subText typography--h7 typography--weight-normal typography--style-normal typography--align-end typography--color-text-alternative"
+        />
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Multi layer fee message when balance and token price checker is enabled should match snapshot 1`] = `
 <div>
   <div
     class="multi-layer-fee-message"

ui/components/app/multilayer-fee-message/multi-layer-fee-message.js

@@ -1,4 +1,5 @@
 import React, { useContext, useState, useEffect } from 'react';
+import { useSelector } from 'react-redux';
 import PropTypes from 'prop-types';
 import { captureException } from '@sentry/browser';
 import TransactionDetailItem from '../transaction-detail-item/transaction-detail-item.component';
@@ -9,6 +10,7 @@ import { I18nContext } from '../../../contexts/i18n';
 import { sumHexes } from '../../../../shared/modules/conversion.utils';
 import { EtherDenomination } from '../../../../shared/constants/common';
 import { Numeric } from '../../../../shared/modules/Numeric';
+import { getUseCurrencyRateCheck } from '../../../selectors';
 
 export default function MultilayerFeeMessage({
   transaction,
@@ -19,6 +21,8 @@ export default function MultilayerFeeMessage({
   const t = useContext(I18nContext);
   const [fetchedLayer1Total, setLayer1Total] = useState(null);
 
+  const useCurrencyRateCheck = useSelector(getUseCurrencyRateCheck);
+
   useEffect(() => {
     if (!transaction?.txParams) {
       return;
@@ -55,14 +59,14 @@ export default function MultilayerFeeMessage({
       .toDenomination(EtherDenomination.ETH)
       .toFixed(12)} ${nativeCurrency}`;
 
-    feeTotalInFiat = (
+    feeTotalInFiat = useCurrencyRateCheck ? (
       <UserPreferencedCurrencyDisplay
         type={SECONDARY}
         value={fetchedLayer1Total}
         showFiat
         hideLabel
       />
-    );
+    ) : null;
   }
 
   const totalInWeiHex = sumHexes(
@@ -76,14 +80,14 @@ export default function MultilayerFeeMessage({
     .toDenomination(EtherDenomination.ETH)
     .toFixed(12)} ${nativeCurrency}`;
 
-  const totalInFiat = (
+  const totalInFiat = useCurrencyRateCheck ? (
     <UserPreferencedCurrencyDisplay
       type={SECONDARY}
       value={totalInWeiHex}
       showFiat
       hideLabel
     />
-  );
+  ) : null;
 
   return (
     <div className="multi-layer-fee-message">
@@ -91,7 +95,7 @@ export default function MultilayerFeeMessage({
         key="total-item-gas-fee"
         detailTitle={t('layer1Fees')}
         detailTotal={layer1Total}
-        detailText={feeTotalInFiat}
+        detailText={useCurrencyRateCheck && feeTotalInFiat}
         noBold={plainStyle}
         flexWidthValues={plainStyle}
       />

ui/components/app/multilayer-fee-message/multi-layer-fee-message.test.js

@@ -8,7 +8,16 @@ import MultilayerFeeMessage from './multi-layer-fee-message';
 jest.mock('../../../helpers/utils/optimism/fetchEstimatedL1Fee', () => '0x5');
 
 describe('Multi layer fee message', () => {
-  const store = configureStore(mockState);
+  describe('when balance and token price checker is enabled', () => {
+    let store;
+
+    beforeEach(() => {
+      store = configureStore(mockState);
+    });
+
+    afterEach(() => {
+      store = null;
+    });
 
     it('should match snapshot', () => {
       const { container } = renderWithProvider(
@@ -26,7 +35,7 @@ describe('Multi layer fee message', () => {
       expect(container).toMatchSnapshot();
     });
 
-  it('should containe fee values', () => {
+    it('should contain fee values', () => {
       const { getByText } = renderWithProvider(
         <MultilayerFeeMessage
           transaction={{
@@ -42,5 +51,57 @@ describe('Multi layer fee message', () => {
       expect(getByText('Layer 1 fees')).toBeInTheDocument();
       expect(getByText('Amount + fees')).toBeInTheDocument();
       expect(getByText('0.001000021000 ETH')).toBeInTheDocument();
+      expect(getByText('$0.56')).toBeInTheDocument();
+    });
+  });
+
+  describe('when balance and token price checker is disabled', () => {
+    let storeWithPriceCheckerDisabled;
+
+    beforeEach(() => {
+      storeWithPriceCheckerDisabled = configureStore({
+        ...mockState,
+        metamask: {
+          ...mockState.metamask,
+          useCurrencyRateCheck: false,
+        },
+      });
+    });
+
+    afterEach(() => {
+      storeWithPriceCheckerDisabled = null;
+    });
+
+    it('should match screenshot', () => {
+      const { container } = renderWithProvider(
+        <MultilayerFeeMessage
+          transaction={{
+            txParams: {
+              value: '0x38d7ea4c68000',
+            },
+          }}
+          layer2fee="0x4e3b29200"
+          nativeCurrency="ETH"
+        />,
+        storeWithPriceCheckerDisabled,
+      );
+      expect(container).toMatchSnapshot();
+    });
+
+    it('should not contain a fiat value', () => {
+      const { queryByText } = renderWithProvider(
+        <MultilayerFeeMessage
+          transaction={{
+            txParams: {
+              value: '0x38d7ea4c68000',
+            },
+          }}
+          layer2fee="0x4e3b29200"
+          nativeCurrency="ETH"
+        />,
+        storeWithPriceCheckerDisabled,
+      );
+      expect(queryByText('$0.56')).not.toBeInTheDocument();
+    });
   });
 });