Show gas warning for legacy networks also (#18871)

ui/components/app/confirm-page-container/confirm-page-container-content/confirm-page-container-content.component.js

@@ -167,9 +167,7 @@ export default class ConfirmPageContainerContent extends Component {
     const { t } = this.context;
 
     const showInsuffienctFundsError =
-      supportsEIP1559 &&
+      (errorKey || errorMessage) && errorKey === INSUFFICIENT_FUNDS_ERROR_KEY;
-      (errorKey || errorMessage) &&
-      errorKey === INSUFFICIENT_FUNDS_ERROR_KEY;
 
     return (
       <div
@@ -206,11 +204,13 @@ export default class ConfirmPageContainerContent extends Component {
           transactionType={transactionType}
         />
         {this.renderContent()}
-        {!supportsEIP1559 && (errorKey || errorMessage) && (
+        {!supportsEIP1559 &&
-          <div className="confirm-page-container-content__error-container">
+          !showInsuffienctFundsError &&
-            <ErrorMessage errorMessage={errorMessage} errorKey={errorKey} />
+          (errorKey || errorMessage) && (
-          </div>
+            <div className="confirm-page-container-content__error-container">
-        )}
+              <ErrorMessage errorMessage={errorMessage} errorKey={errorKey} />
+            </div>
+          )}
         {showInsuffienctFundsError && (
           <div className="confirm-page-container-content__error-container">
             <ActionableMessage

ui/components/app/confirm-page-container/confirm-page-container-content/confirm-page-container-content.component.test.js

@@ -3,7 +3,10 @@ import React from 'react';
 import configureMockStore from 'redux-mock-store';
 import { TransactionType } from '../../../../../shared/constants/transaction';
 import { renderWithProvider } from '../../../../../test/lib/render-helpers';
-import { TRANSACTION_ERROR_KEY } from '../../../../helpers/constants/error-keys';
+import {
+  INSUFFICIENT_FUNDS_ERROR_KEY,
+  TRANSACTION_ERROR_KEY,
+} from '../../../../helpers/constants/error-keys';
 import { SECURITY_PROVIDER_MESSAGE_SEVERITIES } from '../../security-provider-banner-message/security-provider-banner-message.constants';
 import ConfirmPageContainerContent from './confirm-page-container-content.component';
 
@@ -170,4 +173,30 @@ describe('Confirm Page Container Content', () => {
     ).toBeNull();
     expect(queryByText('This is based on information from')).toBeNull();
   });
+
+  it('should show insufficient funds error for EIP-1559 network', () => {
+    const { getByRole } = renderWithProvider(
+      <ConfirmPageContainerContent
+        {...props}
+        errorKey={INSUFFICIENT_FUNDS_ERROR_KEY}
+        isBuyableChain
+        supportsEIP1559
+      />,
+      store,
+    );
+    expect(getByRole('button', { name: 'Buy' })).toBeInTheDocument();
+  });
+
+  it('should show insufficient funds error for legacy network', () => {
+    const { getByRole } = renderWithProvider(
+      <ConfirmPageContainerContent
+        {...props}
+        errorKey={INSUFFICIENT_FUNDS_ERROR_KEY}
+        isBuyableChain
+        supportsEIP1559={false}
+      />,
+      store,
+    );
+    expect(getByRole('button', { name: 'Buy' })).toBeInTheDocument();
+  });
 });

ui/pages/confirm-transaction-base/__snapshots__/confirm-transaction-base.test.js.snap

@@ -501,16 +501,26 @@ exports[`Confirm Transaction Base should match snapshot 1`] = `
         class="confirm-page-container-content__error-container"
       >
         <div
-          class="error-message"
+          class="actionable-message actionable-message--danger actionable-message--warning actionable-message--with-icon"
         >
-          <span
+          <svg
-            class="box error-message__icon mm-icon mm-icon--size-sm box--margin-right-2 box--display-inline-block box--flex-direction-row box--color-error-default"
+            viewBox="0 0 10 10"
-            style="mask-image: url('./images/icons/warning.svg');"
+            xmlns="http://www.w3.org/2000/svg"
-          />
-          <div
-            class="error-message__text"
           >
-            Insufficient funds.
+            <path
+              d="M5 0C2.2 0 0 2.2 0 5s2.2 5 5 5 5-2.2 5-5-2.2-5-5-5zm0 2c.4 0 .7.3.7.7s-.3.7-.7.7-.7-.2-.7-.6.3-.8.7-.8zm.7 6H4.3V4.3h1.5V8z"
+              fill="var(--color-error-default)"
+            />
+          </svg>
+          
+          <div
+            class="actionable-message__message"
+          >
+            <h6
+              class="box box--margin-top-1 box--margin-bottom-1 box--flex-direction-row typography typography--h7 typography--weight-normal typography--style-normal typography--align-left typography--color-text-default"
+            >
+              You do not have enough  in your account to pay for transaction fees on Goerli network. Deposit  from another account.
+            </h6>
           </div>
         </div>
       </div>