-
+
+
,
store,
);
@@ -60,14 +56,18 @@ describe('GasDetailsItem', () => {
});
it('should show warning icon if estimates are high', async () => {
- render({ contextProps: { defaultEstimateToUse: 'high' } });
+ render({
+ contextProps: { transaction: { txParams: {}, userFeeLevel: 'high' } },
+ });
await waitFor(() => {
expect(screen.queryByText('⚠ Max fee:')).toBeInTheDocument();
});
});
it('should not show warning icon if estimates are not high', async () => {
- render({ contextProps: { defaultEstimateToUse: 'low' } });
+ render({
+ contextProps: { transaction: { txParams: {}, userFeeLevel: 'low' } },
+ });
await waitFor(() => {
expect(screen.queryByText('Max fee:')).toBeInTheDocument();
});
@@ -76,8 +76,11 @@ describe('GasDetailsItem', () => {
it('should return null if there is simulationError and user has not acknowledged gasMissing warning', () => {
const { container } = render({
contextProps: {
- defaultEstimateToUse: 'low',
- transaction: { simulationFails: true },
+ transaction: {
+ txParams: {},
+ simulationFails: true,
+ userFeeLevel: 'low',
+ },
},
});
expect(container.innerHTML).toHaveLength(0);
diff --git a/ui/pages/confirm-transaction-base/transaction-alerts/transaction-alerts.js b/ui/pages/confirm-transaction-base/transaction-alerts/transaction-alerts.js
index 30061deaf..fe7d6a6ae 100644
--- a/ui/pages/confirm-transaction-base/transaction-alerts/transaction-alerts.js
+++ b/ui/pages/confirm-transaction-base/transaction-alerts/transaction-alerts.js
@@ -16,10 +16,17 @@ const TransactionAlerts = ({
userAcknowledgedGasMissing,
setUserAcknowledgedGasMissing,
}) => {
- const { balanceError, estimateUsed, hasSimulationError } = useGasFeeContext();
+ const {
+ balanceError,
+ estimateUsed,
+ hasSimulationError,
+ supportsEIP1559V2,
+ } = useGasFeeContext();
const pendingTransactions = useSelector(submittedPendingTransactionsSelector);
const t = useI18nContext();
+ if (!supportsEIP1559V2) return null;
+
return (
{hasSimulationError && (
diff --git a/ui/pages/confirm-transaction-base/transaction-alerts/transaction-alerts.test.js b/ui/pages/confirm-transaction-base/transaction-alerts/transaction-alerts.test.js
index f9aa69d95..555a091a4 100644
--- a/ui/pages/confirm-transaction-base/transaction-alerts/transaction-alerts.test.js
+++ b/ui/pages/confirm-transaction-base/transaction-alerts/transaction-alerts.test.js
@@ -1,9 +1,14 @@
import React from 'react';
-import { screen } from '@testing-library/react';
+import { fireEvent, screen } from '@testing-library/react';
-import { ETH } from '../../../helpers/constants/common';
-import { TRANSACTION_STATUSES } from '../../../../shared/constants/transaction';
+import { GAS_ESTIMATE_TYPES } from '../../../../shared/constants/gas';
+import {
+ TRANSACTION_ENVELOPE_TYPES,
+ TRANSACTION_STATUSES,
+} from '../../../../shared/constants/transaction';
import { renderWithProvider } from '../../../../test/lib/render-helpers';
+import mockEstimates from '../../../../test/data/mock-estimates.json';
+import mockState from '../../../../test/data/mock-state.json';
import { GasFeeContextProvider } from '../../../contexts/gasFee';
import configureStore from '../../../store/store';
@@ -17,44 +22,54 @@ jest.mock('../../../store/actions', () => ({
addPollingTokenToAppState: jest.fn(),
}));
-const render = ({ props, state } = {}) => {
+const render = ({ componentProps, transactionProps, state }) => {
const store = configureStore({
metamask: {
- nativeCurrency: ETH,
- preferences: {
- useNativeCurrencyAsPrimaryCurrency: true,
- },
- provider: {},
- cachedBalances: {},
+ ...mockState.metamask,
accounts: {
- '0xAddress': {
- address: '0xAddress',
+ [mockState.metamask.selectedAddress]: {
+ address: mockState.metamask.selectedAddress,
balance: '0x1F4',
},
},
- selectedAddress: '0xAddress',
+ gasFeeEstimates: mockEstimates[GAS_ESTIMATE_TYPES.FEE_MARKET],
...state,
},
});
return renderWithProvider(
-
-
+
+
,
store,
);
};
describe('TransactionAlerts', () => {
+ beforeEach(() => {
+ process.env.EIP_1559_V2 = true;
+ });
+
+ afterEach(() => {
+ process.env.EIP_1559_V2 = false;
+ });
+
it('should returning warning message for low gas estimate', () => {
- render({ props: { transaction: { userFeeLevel: 'low' } } });
+ render({ transactionProps: { userFeeLevel: 'low' } });
expect(
document.getElementsByClassName('actionable-message--warning'),
).toHaveLength(1);
});
it('should return null for gas estimate other than low', () => {
- render({ props: { transaction: { userFeeLevel: 'high' } } });
+ render({ transactionProps: { userFeeLevel: 'high' } });
expect(
document.getElementsByClassName('actionable-message--warning'),
).toHaveLength(0);
@@ -62,8 +77,9 @@ describe('TransactionAlerts', () => {
it('should not show insufficient balance message if transaction value is less than balance', () => {
render({
- props: {
- transaction: { userFeeLevel: 'high', txParams: { value: '0x64' } },
+ transactionProps: {
+ userFeeLevel: 'high',
+ txParams: { value: '0x64' },
},
});
expect(screen.queryByText('Insufficient funds.')).not.toBeInTheDocument();
@@ -71,8 +87,9 @@ describe('TransactionAlerts', () => {
it('should show insufficient balance message if transaction value is more than balance', () => {
render({
- props: {
- transaction: { userFeeLevel: 'high', txParams: { value: '0x5208' } },
+ transactionProps: {
+ userFeeLevel: 'high',
+ txParams: { value: '0x5208' },
},
});
expect(screen.queryByText('Insufficient funds.')).toBeInTheDocument();
@@ -86,7 +103,7 @@ describe('TransactionAlerts', () => {
id: 0,
time: 0,
txParams: {
- from: '0xAddress',
+ from: mockState.metamask.selectedAddress,
to: '0xRecipient',
},
status: TRANSACTION_STATUSES.SUBMITTED,
@@ -98,4 +115,58 @@ describe('TransactionAlerts', () => {
screen.queryByText('You have (1) pending transaction.'),
).toBeInTheDocument();
});
+
+ describe('SimulationError Message', () => {
+ it('should show simulation error message along with option to proceed anyway if transaction.simulationFails is true', () => {
+ render({ transactionProps: { simulationFails: true } });
+ expect(
+ screen.queryByText(
+ 'We were not able to estimate gas. There might be an error in the contract and this transaction may fail.',
+ ),
+ ).toBeInTheDocument();
+ expect(
+ screen.queryByText('I want to proceed anyway'),
+ ).toBeInTheDocument();
+ });
+
+ it('should not show options to acknowledge gas-missing warning if component prop userAcknowledgedGasMissing is already true', () => {
+ render({
+ componentProps: {
+ userAcknowledgedGasMissing: true,
+ },
+ transactionProps: { simulationFails: true },
+ });
+ expect(
+ screen.queryByText(
+ 'We were not able to estimate gas. There might be an error in the contract and this transaction may fail.',
+ ),
+ ).toBeInTheDocument();
+ expect(
+ screen.queryByText('I want to proceed anyway'),
+ ).not.toBeInTheDocument();
+ });
+
+ it('should call prop setUserAcknowledgedGasMissing if option to acknowledge gas-missing warning is clicked', () => {
+ const setUserAcknowledgedGasMissing = jest.fn();
+ render({
+ componentProps: {
+ setUserAcknowledgedGasMissing,
+ },
+ transactionProps: { simulationFails: true },
+ });
+ fireEvent.click(screen.queryByText('I want to proceed anyway'));
+ expect(setUserAcknowledgedGasMissing).toHaveBeenCalledTimes(1);
+ });
+
+ it('should return null for legacy transactions', () => {
+ const { container } = render({
+ transactionProps: {
+ txParams: {
+ type: TRANSACTION_ENVELOPE_TYPES.LEGACY,
+ },
+ },
+ });
+ expect(container.firstChild).toBeNull();
+ });
+ });
});