From 64e45c801de9dbe526dce6a583cdc1cb3f5461c0 Mon Sep 17 00:00:00 2001
From: VSaric <92527393+VSaric@users.noreply.github.com>
Date: Wed, 3 Nov 2021 16:13:31 +0100
Subject: [PATCH] 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
---
 .../confirm-page-container.component.js                  | 9 +++++++++
 .../confirm-approve/confirm-approve-content/index.scss   | 4 ++++
 2 files changed, 13 insertions(+)

diff --git a/ui/components/app/confirm-page-container/confirm-page-container.component.js b/ui/components/app/confirm-page-container/confirm-page-container.component.js
index 397fc7ff0..dff2cc5aa 100644
--- a/ui/components/app/confirm-page-container/confirm-page-container.component.js
+++ b/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}
diff --git a/ui/pages/confirm-approve/confirm-approve-content/index.scss b/ui/pages/confirm-approve/confirm-approve-content/index.scss
index ec9f8f359..eaf0ff171 100644
--- a/ui/pages/confirm-approve/confirm-approve-content/index.scss
+++ b/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;