({
+ disconnectGasFeeEstimatePoller: jest.fn(),
+ getGasFeeEstimatesAndStartPolling: jest
+ .fn()
+ .mockImplementation(() => Promise.resolve()),
+ addPollingTokenToAppState: jest.fn(),
+}));
+
const render = (props) => {
const store = configureStore({
metamask: {
@@ -15,10 +24,23 @@ const render = (props) => {
useNativeCurrencyAsPrimaryCurrency: true,
},
provider: {},
+ cachedBalances: {},
+ accounts: {
+ '0xAddress': {
+ address: '0xAddress',
+ balance: '0x176e5b6f173ebe66',
+ },
+ },
+ selectedAddress: '0xAddress',
},
});
- return renderWithProvider(
, store);
+ return renderWithProvider(
+
+
+ ,
+ store,
+ );
};
describe('GasDetailsItem', () => {
@@ -29,4 +51,14 @@ describe('GasDetailsItem', () => {
expect(screen.queryByText('Max fee:')).toBeInTheDocument();
expect(screen.queryByText('ETH')).toBeInTheDocument();
});
+
+ it('should show warning icon if estimates are high', () => {
+ render({ defaultEstimateToUse: 'high' });
+ expect(screen.queryByText('⚠ Max fee:')).toBeInTheDocument();
+ });
+
+ it('should not show warning icon if estimates are not high', () => {
+ render({ defaultEstimateToUse: 'low' });
+ expect(screen.queryByText('Max fee:')).toBeInTheDocument();
+ });
});
diff --git a/ui/pages/confirm-transaction-base/low-priority-message/index.js b/ui/pages/confirm-transaction-base/low-priority-message/index.js
new file mode 100644
index 000000000..7b2838d48
--- /dev/null
+++ b/ui/pages/confirm-transaction-base/low-priority-message/index.js
@@ -0,0 +1 @@
+export { default } from './low-priority-message';
diff --git a/ui/pages/confirm-transaction-base/low-priority-message/low-priority-message.js b/ui/pages/confirm-transaction-base/low-priority-message/low-priority-message.js
new file mode 100644
index 000000000..41bb5d132
--- /dev/null
+++ b/ui/pages/confirm-transaction-base/low-priority-message/low-priority-message.js
@@ -0,0 +1,24 @@
+import React from 'react';
+
+import ActionableMessage from '../../../components/ui/actionable-message/actionable-message';
+import { useGasFeeContext } from '../../../contexts/gasFee';
+import { useI18nContext } from '../../../hooks/useI18nContext';
+
+const LowPriorityMessage = () => {
+ const { estimateToUse } = useGasFeeContext();
+ const t = useI18nContext();
+
+ if (estimateToUse !== 'low') return null;
+ return (
+
+ );
+};
+
+export default LowPriorityMessage;
diff --git a/ui/pages/confirm-transaction-base/low-priority-message/low-priority-message.scss b/ui/pages/confirm-transaction-base/low-priority-message/low-priority-message.scss
new file mode 100644
index 000000000..1a99a03af
--- /dev/null
+++ b/ui/pages/confirm-transaction-base/low-priority-message/low-priority-message.scss
@@ -0,0 +1,3 @@
+.low-priority-message {
+ margin-top: 20px;
+}
diff --git a/ui/pages/confirm-transaction-base/low-priority-message/low-priority-message.test.js b/ui/pages/confirm-transaction-base/low-priority-message/low-priority-message.test.js
new file mode 100644
index 000000000..9d8e233f3
--- /dev/null
+++ b/ui/pages/confirm-transaction-base/low-priority-message/low-priority-message.test.js
@@ -0,0 +1,59 @@
+import React from 'react';
+
+import { renderWithProvider } from '../../../../test/lib/render-helpers';
+import { ETH } from '../../../helpers/constants/common';
+import { GasFeeContextProvider } from '../../../contexts/gasFee';
+import configureStore from '../../../store/store';
+
+import LowPriorityMessage from './low-priority-message';
+
+jest.mock('../../../store/actions', () => ({
+ disconnectGasFeeEstimatePoller: jest.fn(),
+ getGasFeeEstimatesAndStartPolling: jest
+ .fn()
+ .mockImplementation(() => Promise.resolve()),
+ addPollingTokenToAppState: jest.fn(),
+}));
+
+const render = (props) => {
+ const store = configureStore({
+ metamask: {
+ nativeCurrency: ETH,
+ preferences: {
+ useNativeCurrencyAsPrimaryCurrency: true,
+ },
+ provider: {},
+ cachedBalances: {},
+ accounts: {
+ '0xAddress': {
+ address: '0xAddress',
+ balance: '0x176e5b6f173ebe66',
+ },
+ },
+ selectedAddress: '0xAddress',
+ },
+ });
+
+ return renderWithProvider(
+
+
+ ,
+ store,
+ );
+};
+
+describe('LowPriorityMessage', () => {
+ it('should returning warning message for low gas estimate', () => {
+ render({ transaction: { userFeeLevel: 'low' } });
+ expect(
+ document.getElementsByClassName('actionable-message--warning'),
+ ).toHaveLength(1);
+ });
+
+ it('should return null for gas estimate other than low', () => {
+ render({ transaction: { userFeeLevel: 'high' } });
+ expect(
+ document.getElementsByClassName('actionable-message--warning'),
+ ).toHaveLength(0);
+ });
+});
diff --git a/ui/pages/pages.scss b/ui/pages/pages.scss
index df9de3f4e..878344063 100644
--- a/ui/pages/pages.scss
+++ b/ui/pages/pages.scss
@@ -6,6 +6,7 @@
@import 'confirm-decrypt-message/confirm-decrypt-message';
@import 'confirm-encryption-public-key/confirm-encryption-public-key';
@import 'confirm-transaction-base/gas-details-item/gas-details-item';
+@import 'confirm-transaction-base/low-priority-message/low-priority-message';
@import 'confirmation/confirmation';
@import 'connected-sites/index';
@import 'connected-accounts/index';