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'); }); });