From 7e7d0c13f48db556b1f4ff452d24e027c0fa57df Mon Sep 17 00:00:00 2001
From: Olusegun Akintayo <akintayo.segun@gmail.com>
Date: Fri, 29 Oct 2021 19:45:50 +0400
Subject: [PATCH] Show error if user have insufficient gas. (#12531)

---
 app/_locales/en/messages.json                     |  3 +++
 ui/helpers/constants/error-keys.js                |  1 +
 .../send/send-content/send-content.component.js   |  5 +++++
 .../send-content/send-content.component.test.js   | 15 +++++++++++++++
 .../send/send-content/send-content.container.js   |  7 ++++++-
 5 files changed, 30 insertions(+), 1 deletion(-)

diff --git a/app/_locales/en/messages.json b/app/_locales/en/messages.json
index 9c658b2bcc..8fce3223d9 100644
--- a/app/_locales/en/messages.json
+++ b/app/_locales/en/messages.json
@@ -1171,6 +1171,9 @@
   "insufficientFunds": {
     "message": "Insufficient funds."
   },
+  "insufficientFundsForGas": {
+    "message": "Insufficient funds for gas"
+  },
   "insufficientTokens": {
     "message": "Insufficient tokens."
   },
diff --git a/ui/helpers/constants/error-keys.js b/ui/helpers/constants/error-keys.js
index e51b87736a..8372a3f1e3 100644
--- a/ui/helpers/constants/error-keys.js
+++ b/ui/helpers/constants/error-keys.js
@@ -6,3 +6,4 @@ export const ETH_GAS_PRICE_FETCH_WARNING_KEY = 'ethGasPriceFetchWarning';
 export const GAS_PRICE_FETCH_FAILURE_ERROR_KEY = 'gasPriceFetchFailed';
 export const GAS_PRICE_EXCESSIVE_ERROR_KEY = 'gasPriceExcessive';
 export const UNSENDABLE_ASSET_ERROR_KEY = 'unsendableAsset';
+export const INSUFFICIENT_FUNDS_FOR_GAS_ERROR_KEY = 'insufficientFundsForGas';
diff --git a/ui/pages/send/send-content/send-content.component.js b/ui/pages/send/send-content/send-content.component.js
index 738e85a850..6ed0cb02a0 100644
--- a/ui/pages/send/send-content/send-content.component.js
+++ b/ui/pages/send/send-content/send-content.component.js
@@ -7,6 +7,7 @@ import {
   GAS_PRICE_FETCH_FAILURE_ERROR_KEY,
   GAS_PRICE_EXCESSIVE_ERROR_KEY,
   UNSENDABLE_ASSET_ERROR_KEY,
+  INSUFFICIENT_FUNDS_FOR_GAS_ERROR_KEY,
 } from '../../../helpers/constants/error-keys';
 import SendAmountRow from './send-amount-row';
 import SendHexDataRow from './send-hex-data-row';
@@ -30,6 +31,7 @@ export default class SendContent extends Component {
     isEthGasPrice: PropTypes.bool,
     noGasPrice: PropTypes.bool,
     networkOrAccountNotSupports1559: PropTypes.bool,
+    getIsBalanceInsufficient: PropTypes.bool,
   };
 
   render() {
@@ -41,11 +43,14 @@ export default class SendContent extends Component {
       noGasPrice,
       isAssetSendable,
       networkOrAccountNotSupports1559,
+      getIsBalanceInsufficient,
     } = this.props;
 
     let gasError;
     if (gasIsExcessive) gasError = GAS_PRICE_EXCESSIVE_ERROR_KEY;
     else if (noGasPrice) gasError = GAS_PRICE_FETCH_FAILURE_ERROR_KEY;
+    else if (getIsBalanceInsufficient)
+      gasError = INSUFFICIENT_FUNDS_FOR_GAS_ERROR_KEY;
 
     return (
       <PageContainerContent>
diff --git a/ui/pages/send/send-content/send-content.component.test.js b/ui/pages/send/send-content/send-content.component.test.js
index d47c8aa4e4..cee97b54b1 100644
--- a/ui/pages/send/send-content/send-content.component.test.js
+++ b/ui/pages/send/send-content/send-content.component.test.js
@@ -106,6 +106,21 @@ describe('SendContent Component', () => {
       ).toStrictEqual(true);
       expect(wrapper.find(Dialog)).toHaveLength(0);
     });
+
+    it('should render insufficient gas dialog', () => {
+      wrapper.setProps({
+        showHexData: false,
+        getIsBalanceInsufficient: true,
+      });
+      const PageContainerContentChild = wrapper
+        .find(PageContainerContent)
+        .children();
+      const errorDialogProps = PageContainerContentChild.childAt(0).props();
+      expect(errorDialogProps.className).toStrictEqual('send__error-dialog');
+      expect(errorDialogProps.children).toStrictEqual(
+        'insufficientFundsForGas_t',
+      );
+    });
   });
 
   it('should not render the asset dropdown if token length is 0', () => {
diff --git a/ui/pages/send/send-content/send-content.container.js b/ui/pages/send/send-content/send-content.container.js
index 83b38dfeb1..16824b0d4a 100644
--- a/ui/pages/send/send-content/send-content.container.js
+++ b/ui/pages/send/send-content/send-content.container.js
@@ -6,7 +6,11 @@ import {
   getNoGasPriceFetched,
   checkNetworkOrAccountNotSupports1559,
 } from '../../../selectors';
-import { getIsAssetSendable, getSendTo } from '../../../ducks/send';
+import {
+  getIsAssetSendable,
+  getIsBalanceInsufficient,
+  getSendTo,
+} from '../../../ducks/send';
 
 import * as actions from '../../../store/actions';
 import SendContent from './send-content.component';
@@ -28,6 +32,7 @@ function mapStateToProps(state) {
     networkOrAccountNotSupports1559: checkNetworkOrAccountNotSupports1559(
       state,
     ),
+    getIsBalanceInsufficient: getIsBalanceInsufficient(state),
   };
 }