Fix gas values display in users primary currency inside inputs (#13830)

ui/components/app/advanced-gas-fee-popover/advanced-gas-fee-inputs/base-fee-input/base-fee-input.js

@@ -6,7 +6,7 @@ import {
   EDIT_GAS_MODES,
   PRIORITY_LEVELS,
 } from '../../../../../../shared/constants/gas';
-import { SECONDARY } from '../../../../../helpers/constants/common';
+import { PRIMARY } from '../../../../../helpers/constants/common';
 import {
   bnGreaterThan,
   bnLessThan,
@@ -57,6 +57,7 @@ const BaseFeeInput = () => {
     editGasMode,
   } = useGasFeeContext();
   const {
+    gasLimit,
     maxPriorityFeePerGas,
     setErrorValue,
     setMaxFeePerGas,
@@ -69,7 +70,7 @@ const BaseFeeInput = () => {
     baseFeeTrend,
   } = gasFeeEstimates;
   const [baseFeeError, setBaseFeeError] = useState();
-  const { currency, numberOfDecimals } = useUserPreferencedCurrency(SECONDARY);
+  const { currency, numberOfDecimals } = useUserPreferencedCurrency(PRIMARY);
 
   const advancedGasFeeValues = useSelector(getAdvancedGasFeeValues);
 
@@ -85,8 +86,8 @@ const BaseFeeInput = () => {
     return maxFeePerGas;
   });
 
-  const [, { value: baseFeeInFiat }] = useCurrencyDisplay(
-    decGWEIToHexWEI(baseFee),
+  const [baseFeeInPrimaryCurrency] = useCurrencyDisplay(
+    decGWEIToHexWEI(baseFee * gasLimit),
     { currency, numberOfDecimals },
   );
 
@@ -128,7 +129,7 @@ const BaseFeeInput = () => {
         titleUnit={`(${t('gwei')})`}
         tooltipText={t('advancedBaseGasFeeToolTip')}
         value={baseFee}
-        detailText={`≈ ${baseFeeInFiat}`}
+        detailText={`≈ ${baseFeeInPrimaryCurrency}`}
         numeric
       />
       <AdvancedGasFeeInputSubtext

ui/components/app/advanced-gas-fee-popover/advanced-gas-fee-inputs/base-fee-input/base-fee-input.test.js

@@ -12,6 +12,7 @@ import { GasFeeContextProvider } from '../../../../../contexts/gasFee';
 import configureStore from '../../../../../store/store';
 
 import { AdvancedGasFeePopoverContextProvider } from '../../context';
+import AdvancedGasFeeGasLimit from '../../advanced-gas-fee-gas-limit';
 import BaseFeeInput from './base-fee-input';
 
 jest.mock('../../../../../store/actions', () => ({
@@ -50,6 +51,7 @@ const render = (txProps, contextProps) => {
     >
       <AdvancedGasFeePopoverContextProvider>
         <BaseFeeInput />
+        <AdvancedGasFeeGasLimit />
       </AdvancedGasFeePopoverContextProvider>
     </GasFeeContextProvider>,
     store,
@@ -88,14 +90,27 @@ describe('BaseFeeInput', () => {
     });
     expect(document.getElementsByTagName('input')[0]).toHaveValue(200);
   });
+
+  it('should show current value of estimatedBaseFee in users primary currency in right side of input box', () => {
+    render({
+      txParams: {
+        gas: '0x5208',
+        maxFeePerGas: '0x2E90EDD000',
+      },
+    });
+    expect(screen.queryByText('≈ 0.0042 ETH')).toBeInTheDocument();
+  });
+
   it('should show current value of estimatedBaseFee in subtext', () => {
     render();
     expect(screen.queryByText('50 GWEI')).toBeInTheDocument();
   });
+
   it('should show 12hr range value in subtext', () => {
     render();
     expect(screen.queryByText('50 - 100 GWEI')).toBeInTheDocument();
   });
+
   it('should show error if base fee is less than suggested low value', () => {
     render({
       txParams: {
@@ -112,6 +127,7 @@ describe('BaseFeeInput', () => {
       target: { value: 50 },
     });
   });
+
   it('should show error if base if is more than suggested high value', () => {
     render({
       txParams: {

ui/components/app/advanced-gas-fee-popover/advanced-gas-fee-inputs/priority-fee-input/priority-fee-input.js

@@ -6,7 +6,7 @@ import {
   EDIT_GAS_MODES,
   PRIORITY_LEVELS,
 } from '../../../../../../shared/constants/gas';
-import { SECONDARY } from '../../../../../helpers/constants/common';
+import { PRIMARY } from '../../../../../helpers/constants/common';
 import { decGWEIToHexWEI } from '../../../../../helpers/utils/conversions.util';
 import { getAdvancedGasFeeValues } from '../../../../../selectors';
 import { useCurrencyDisplay } from '../../../../../hooks/useCurrencyDisplay';
@@ -48,6 +48,7 @@ const PriorityFeeInput = () => {
   const t = useI18nContext();
   const advancedGasFeeValues = useSelector(getAdvancedGasFeeValues);
   const {
+    gasLimit,
     setErrorValue,
     setMaxPriorityFeePerGas,
   } = useAdvancedGasFeePopoverContext();
@@ -75,10 +76,10 @@ const PriorityFeeInput = () => {
     return maxPriorityFeePerGas;
   });
 
-  const { currency, numberOfDecimals } = useUserPreferencedCurrency(SECONDARY);
+  const { currency, numberOfDecimals } = useUserPreferencedCurrency(PRIMARY);
 
-  const [, { value: priorityFeeInFiat }] = useCurrencyDisplay(
-    decGWEIToHexWEI(priorityFee),
+  const [priorityFeeInPrimaryCurrency] = useCurrencyDisplay(
+    decGWEIToHexWEI(priorityFee * gasLimit),
     { currency, numberOfDecimals },
   );
 
@@ -112,7 +113,7 @@ const PriorityFeeInput = () => {
         titleUnit={`(${t('gwei')})`}
         tooltipText={t('advancedPriorityFeeToolTip')}
         value={priorityFee}
-        detailText={`≈ ${priorityFeeInFiat}`}
+        detailText={`≈ ${priorityFeeInPrimaryCurrency}`}
         numeric
       />
       <AdvancedGasFeeInputSubtext

ui/components/app/advanced-gas-fee-popover/advanced-gas-fee-inputs/priority-fee-input/priority-fee-input.test.js

@@ -12,6 +12,7 @@ import { GasFeeContextProvider } from '../../../../../contexts/gasFee';
 import configureStore from '../../../../../store/store';
 
 import { AdvancedGasFeePopoverContextProvider } from '../../context';
+import AdvancedGasFeeGasLimit from '../../advanced-gas-fee-gas-limit';
 import PriorityfeeInput from './priority-fee-input';
 
 jest.mock('../../../../../store/actions', () => ({
@@ -50,6 +51,7 @@ const render = (txProps, contextProps) => {
     >
       <AdvancedGasFeePopoverContextProvider>
         <PriorityfeeInput />
+        <AdvancedGasFeeGasLimit />
       </AdvancedGasFeePopoverContextProvider>
     </GasFeeContextProvider>,
     store,
@@ -63,6 +65,7 @@ describe('PriorityfeeInput', () => {
     });
     expect(document.getElementsByTagName('input')[0]).toHaveValue(100);
   });
+
   it('should not use advancedGasFee.priorityfee value for swaps', () => {
     render(
       {
@@ -78,6 +81,7 @@ describe('PriorityfeeInput', () => {
       ),
     );
   });
+
   it('should renders priorityfee value from transaction if current estimate used is custom', () => {
     render({
       txParams: {
@@ -86,14 +90,27 @@ describe('PriorityfeeInput', () => {
     });
     expect(document.getElementsByTagName('input')[0]).toHaveValue(2);
   });
+
   it('should show current priority fee range in subtext', () => {
     render();
     expect(screen.queryByText('1 - 20 GWEI')).toBeInTheDocument();
   });
+
+  it('should show current value of priority fee in users primary currency in right side of input box', () => {
+    render({
+      txParams: {
+        gas: '0x5208',
+        maxPriorityFeePerGas: '0x77359400',
+      },
+    });
+    expect(screen.queryByText('≈ 0.000042 ETH')).toBeInTheDocument();
+  });
+
   it('should show 12hr range value in subtext', () => {
     render();
     expect(screen.queryByText('2 - 125 GWEI')).toBeInTheDocument();
   });
+
   it('should show error if value entered is 0', () => {
     render({
       txParams: {