Warn the user of insufficient funds when approving a token (#12496)

* Warn the user of insufficient funds (ETH for gas) when approving a token

* Fixing code lines while run yarn lint:fix

* Fixing test-e2e-chrome

* Fixing e2e tests

* Create shouldDisplayWarning variable

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

@@ -4,6 +4,7 @@ import SenderToRecipient from '../../ui/sender-to-recipient';
 import { PageContainerFooter } from '../../ui/page-container';
 import EditGasPopover from '../edit-gas-popover';
 import { EDIT_GAS_MODES } from '../../../../shared/constants/gas';
+import ErrorMessage from '../../ui/error-message';
 import Dialog from '../../ui/dialog';
 import {
   ConfirmPageContainerHeader,
@@ -124,6 +125,9 @@ export default class ConfirmPageContainer extends Component {
     const showAddToAddressDialog =
       !contact.name && toAddress && !isOwnedAccount && !hideSenderToRecipient;
 
+    const shouldDisplayWarning =
+      contentComponent && disabled && (errorKey || errorMessage);
+
     return (
       <div className="page-container">
         <ConfirmPageContainerNavigation
@@ -192,6 +196,11 @@ export default class ConfirmPageContainer extends Component {
             ethGasPriceWarning={ethGasPriceWarning}
           />
         )}
+        {shouldDisplayWarning && (
+          <div className="confirm-approve-content__warning">
+            <ErrorMessage errorKey={errorKey} />
+          </div>
+        )}
         {contentComponent && (
           <PageContainerFooter
             onCancel={onCancel}

ui/pages/confirm-approve/confirm-approve-content/index.scss

@@ -5,6 +5,10 @@
   width: 100%;
   font-style: normal;
 
+  &__warning {
+    padding: 0 24px 16px 24px;
+  }
+
   &__icon-display-content {
     display: flex;
     height: 51px;