From 1dc1d706843a74d8bf7618a4051d70cdf3559355 Mon Sep 17 00:00:00 2001
From: Sylva Elendu <iamsylvaelendu@gmail.com>
Date: Tue, 23 Apr 2024 15:26:31 +0100
Subject: [PATCH] fix: show banner alert if account balance is insufficient
 (#9337)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

<!--
Please submit this PR as a draft initially.
Do not mark it as "Ready for review" until the template has been
completely filled out, and PR status checks have passed at least once.
-->

## **Description**

<!--
Write a short description of the changes included in this pull request,
also include relevant motivation and context. Have in mind the following
questions:
1. What is the reason for the change?
2. What is the improvement/solution?
-->

High gas fees are expected if the account has insufficient balance given
the transaction will fail anyway. In extension, we show an alert banner
for this use case. This PR includes the same for mobile.

## **Related issues**

Fixes: #9117

## **Manual testing steps**

1. Create a payment request link/QR code using either [MM
deeplink](https://metamask.github.io/metamask-deeplinks/#) or in-app
2. Select an amount higher than account balance
3. See error banner alert for insufficient balance

## **Screenshots/Recordings**

<!-- If applicable, add screenshots and/or recordings to visualize the
before and after of your change. -->

### **Before**


![IMG_2210](https://github.com/MetaMask/metamask-mobile/assets/29962968/07bcce7a-4714-44a1-b8bb-4ac87d5f49f4)


### **After**
Show banner alert when balance is insufficient


![IMG_2207](https://github.com/MetaMask/metamask-mobile/assets/29962968/9ad2bfeb-38c1-4628-8b42-ab1ef4dc5097)



## **Pre-merge author checklist**

- [ ] I’ve followed [MetaMask Coding
Standards](https://github.com/MetaMask/metamask-mobile/blob/main/.github/guidelines/CODING_GUIDELINES.md).
- [ ] I've completed the PR template to the best of my ability
- [ ] I’ve included tests if applicable
- [ ] I’ve documented my code using [JSDoc](https://jsdoc.app/) format
if applicable
- [ ] I’ve applied the right labels on the PR (see [labeling
guidelines](https://github.com/MetaMask/metamask-mobile/blob/main/.github/guidelines/LABELING_GUIDELINES.md)).
Not required for external contributors.

## **Pre-merge reviewer checklist**

- [ ] I've manually tested the PR (e.g. pull and build branch, run the
app, test code being changed).
- [ ] I confirm that this PR addresses all acceptance criteria described
in the ticket it closes and includes the necessary testing evidence such
as recordings and or screenshots.
---
 .../confirmations/SendFlow/Confirm/index.js      | 16 ++++++++++++++++
 1 file changed, 16 insertions(+)

diff --git a/app/components/Views/confirmations/SendFlow/Confirm/index.js b/app/components/Views/confirmations/SendFlow/Confirm/index.js
index 262d45f96ad..ceaa7b04587 100644
--- a/app/components/Views/confirmations/SendFlow/Confirm/index.js
+++ b/app/components/Views/confirmations/SendFlow/Confirm/index.js
@@ -456,6 +456,11 @@ class Confirm extends PureComponent {
     } = this.props;
     this.updateNavBar();
 
+    const transaction = this.prepareTransactionToSend();
+    const { EIP1559GasTransaction, legacyGasTransaction } = this.state;
+
+    let error;
+
     if (this.state?.closeModal) this.toggleConfirmationModal(REVIEW);
 
     const { errorMessage, fromSelectedAddress } = this.state;
@@ -496,6 +501,11 @@ class Confirm extends PureComponent {
         gasEstimateTypeChanged
       ) {
         if (this.props.gasEstimateType === GAS_ESTIMATE_TYPES.FEE_MARKET) {
+          error = this.validateAmount({
+            transaction,
+            total: EIP1559GasTransaction.totalMaxHex,
+          });
+          this.setError(error);
           // eslint-disable-next-line react/no-did-update-set-state
           this.setState(
             {
@@ -520,6 +530,12 @@ class Confirm extends PureComponent {
               this.setState({ animateOnChange: false });
             },
           );
+        } else {
+          error = this.validateAmount({
+            transaction,
+            total: legacyGasTransaction.totalHex,
+          });
+          this.setError(error);
         }
         this.parseTransactionDataHeader();
       }