diff --git a/ui/pages/confirmations/components/confirm-gas-display/confirm-legacy-gas-display/confirm-legacy-gas-display.js b/ui/pages/confirmations/components/confirm-gas-display/confirm-legacy-gas-display/confirm-legacy-gas-display.js
index 7bd1ccfb0403..e8a4293a981a 100644
--- a/ui/pages/confirmations/components/confirm-gas-display/confirm-legacy-gas-display/confirm-legacy-gas-display.js
+++ b/ui/pages/confirmations/components/confirm-gas-display/confirm-legacy-gas-display/confirm-legacy-gas-display.js
@@ -28,6 +28,7 @@ import {
IconName,
Text,
} from '../../../../../components/component-library';
+import { addHexes } from '../../../../../../shared/modules/conversion.utils';
const renderHeartBeatIfNotInTest = () =>
process.env.IN_TEST ? null : ;
@@ -42,7 +43,7 @@ const ConfirmLegacyGasDisplay = ({ 'data-testid': dataTestId } = {}) => {
const unapprovedTxs = useSelector(getUnapprovedTransactions);
const transactionData = useDraftTransactionWithTxParams();
const txData = useSelector((state) => txDataSelector(state));
- const { id: transactionId, dappSuggestedGasFees } = txData;
+ const { id: transactionId, dappSuggestedGasFees, layer1GasFee } = txData;
const transaction = Object.keys(transactionData).length
? transactionData
: unapprovedTxs[transactionId] || {};
@@ -50,6 +51,16 @@ const ConfirmLegacyGasDisplay = ({ 'data-testid': dataTestId } = {}) => {
(state) => transactionFeeSelector(state, transaction),
);
+ const estimatedHexMinFeeTotal = addHexes(
+ hexMinimumTransactionFee,
+ layer1GasFee ?? '0x0',
+ );
+
+ const estimatedHexMaxFeeTotal = addHexes(
+ hexMaximumTransactionFee,
+ layer1GasFee ?? '0x0',
+ );
+
return (
{
{renderHeartBeatIfNotInTest()}
@@ -112,7 +123,7 @@ const ConfirmLegacyGasDisplay = ({ 'data-testid': dataTestId } = {}) => {
{renderHeartBeatIfNotInTest()}
@@ -128,7 +139,7 @@ const ConfirmLegacyGasDisplay = ({ 'data-testid': dataTestId } = {}) => {
diff --git a/ui/pages/confirmations/components/confirm-gas-display/confirm-legacy-gas-display/confirm-legacy-gas-display.test.js b/ui/pages/confirmations/components/confirm-gas-display/confirm-legacy-gas-display/confirm-legacy-gas-display.test.js
index 6ce48a5acfc2..df5b9ea0e50f 100644
--- a/ui/pages/confirmations/components/confirm-gas-display/confirm-legacy-gas-display/confirm-legacy-gas-display.test.js
+++ b/ui/pages/confirmations/components/confirm-gas-display/confirm-legacy-gas-display/confirm-legacy-gas-display.test.js
@@ -111,21 +111,38 @@ describe('ConfirmLegacyGasDisplay', () => {
});
});
- it('should display Estimated gas fee for L2 networks', async () => {
- render({
+ it('displays the Estimated Fee', () => {
+ const { container } = render({
...mmState,
confirmTransaction: {
...mmState.confirmTransaction,
txData: {
...mmState.confirmTransaction.txData,
- layer1GasFee: '0x1',
},
},
});
- await waitFor(() => {
- expect(screen.queryByText('Estimated gas fee')).toBeInTheDocument();
- expect(screen.queryByText('Max fee:')).toBeInTheDocument();
+ expect(
+ container.querySelector('.currency-display-component__text'),
+ ).toHaveTextContent('0.000021');
+ });
+
+ it('displays the Estimated Fee on L2 Networks', () => {
+ const { container } = render({
+ ...mmState,
+ confirmTransaction: {
+ ...mmState.confirmTransaction,
+ txData: {
+ ...mmState.confirmTransaction.txData,
+ layer1GasFee: '0x0653b2c7980981',
+ },
+ },
});
+
+ expect(screen.queryByText('Estimated gas fee')).toBeInTheDocument();
+ expect(screen.queryByText('Max fee:')).toBeInTheDocument();
+ expect(
+ container.querySelector('.currency-display-component__text'),
+ ).toHaveTextContent('0.00180188');
});
});