fix: display warning when sending zero tokens (#21091)

## **Description**

This PR display a warning when the user attempts to send zero amount in
tokens/native currency.

## **Manual testing steps**

_1. Click on any token
_2. Click Send
_3. Enter zero as amount
_4. Click next and notice the display of warning.

## **Screenshots/Recordings**

### **Before**


![image](https://github.com/MetaMask/metamask-extension/assets/10994169/7f37a546-0c27-4e78-99b3-a739eff27986)


![image](https://github.com/MetaMask/metamask-extension/assets/10994169/28e9d00f-b1a3-4230-b908-a013400b0175)

### **After**

Sending zero ETH


![image](https://github.com/MetaMask/metamask-extension/assets/10994169/8b81d6d1-6e7e-40a5-b80d-6410e929c56d)

Sending zero token (DAI)


![image](https://github.com/MetaMask/metamask-extension/assets/10994169/c4b03fdd-587b-46a7-8c55-8f39cf946c65)

Not displayed when sending amount in ETH !== 0


![image](https://github.com/MetaMask/metamask-extension/assets/10994169/14e12b85-3cef-4c49-b2f6-39e1d086a30f)

Not displayed when sending amount of tokens different than zero 


![image](https://github.com/MetaMask/metamask-extension/assets/10994169/ce179f3f-7925-490f-849b-bbde4eaa1a40)


## **Related issues**

[_Fixes
#MMASSETS-44](https://consensyssoftware.atlassian.net/browse/MMASSETS-44)

## **Pre-merge author checklist**

- [x] I’ve followed [MetaMask Coding
Standards](https://github.com/MetaMask/metamask-extension/blob/develop/.github/guidelines/CODING_GUIDELINES.md).
- [x] I've clearly explained:
  - [x] What problem this PR is solving.
  - [x] How this problem was solved.
  - [x] How reviewers can test my changes.
- [x] I’ve indicated what issue this PR is linked to: Fixes #???
- [x] I’ve included tests if applicable.
- [x] I’ve documented any added code.
- [x] I’ve applied the right labels on the PR (see [labeling
guidelines](https://github.com/MetaMask/metamask-extension/blob/develop/.github/guidelines/LABELING_GUIDELINES.md)).
- [ ] I’ve properly set the pull request status:
  - [ ] In case it's not yet "ready for review", I've set it to "draft".
- [ ] In case it's "ready for review", I've changed it from "draft" to
"non-draft".

## **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.

ui/components/app/transaction-alerts/transaction-alerts.js

@@ -1,7 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { useSelector } from 'react-redux';
-
 import { PriorityLevels } from '../../../../shared/constants/gas';
 import { submittedPendingTransactionsSelector } from '../../../selectors';
 import { useGasFeeContext } from '../../../contexts/gasFee';
@@ -16,16 +15,44 @@ import { isSuspiciousResponse } from '../../../../shared/modules/security-provid
 import BlockaidBannerAlert from '../security-provider-banner-alert/blockaid-banner-alert/blockaid-banner-alert';
 ///: END:ONLY_INCLUDE_IN
 import SecurityProviderBannerMessage from '../security-provider-banner-message/security-provider-banner-message';
+import { getNativeCurrency } from '../../../ducks/metamask/metamask';
+import { TransactionType } from '../../../../shared/constants/transaction';
+import { parseStandardTokenTransactionData } from '../../../../shared/modules/transaction.utils';
+import { getTokenValueParam } from '../../../../shared/lib/metamask-controller-utils';
 
 const TransactionAlerts = ({
   userAcknowledgedGasMissing,
   setUserAcknowledgedGasMissing,
   txData,
+  tokenSymbol,
 }) => {
   const { estimateUsed, hasSimulationError, supportsEIP1559, isNetworkBusy } =
     useGasFeeContext();
   const pendingTransactions = useSelector(submittedPendingTransactionsSelector);
   const t = useI18nContext();
+  const nativeCurrency = useSelector(getNativeCurrency);
+  const transactionData = txData.txParams.data;
+  const currentTokenSymbol = tokenSymbol || nativeCurrency;
+  let currentTokenAmount;
+
+  if (txData.type === TransactionType.simpleSend) {
+    currentTokenAmount = txData.txParams.value;
+  }
+  if (txData.type === TransactionType.tokenMethodTransfer) {
+    const tokenData = parseStandardTokenTransactionData(transactionData);
+    currentTokenAmount = getTokenValueParam(tokenData);
+  }
+
+  // isSendingZero is true when either sending native tokens where the value is in txParams
+  // or sending tokens where the value is in the txData
+  // We want to only display this warning in the cases where txType is simpleSend || transfer and not contractInteractions
+  const hasProperTxType =
+    txData.type === TransactionType.simpleSend ||
+    txData.type === TransactionType.tokenMethodTransfer;
+
+  const isSendingZero =
+    hasProperTxType &&
+    (currentTokenAmount === '0x0' || currentTokenAmount === '0');
 
   return (
     <div className="transaction-alerts">
@@ -85,6 +112,11 @@ const TransactionAlerts = ({
           {t('networkIsBusy')}
         </BannerAlert>
       ) : null}
+      {isSendingZero && (
+        <BannerAlert severity={SEVERITIES.WARNING}>
+          {t('sendingZeroAmount', [currentTokenSymbol])}
+        </BannerAlert>
+      )}
     </div>
   );
 };
@@ -93,6 +125,7 @@ TransactionAlerts.propTypes = {
   userAcknowledgedGasMissing: PropTypes.bool,
   setUserAcknowledgedGasMissing: PropTypes.func,
   txData: PropTypes.object,
+  tokenSymbol: PropTypes.string,
 };
 
 export default TransactionAlerts;

ui/components/app/transaction-alerts/transaction-alerts.stories.js

@@ -98,6 +98,11 @@ export default {
   },
   args: {
     userAcknowledgedGasMissing: false,
+    txData: {
+      txParams: {
+        value: '0x1',
+      },
+    },
   },
 };
 
@@ -121,6 +126,15 @@ export const DefaultStory = (args) => (
   </Provider>
 );
 DefaultStory.storyName = 'Default';
+DefaultStory.args = {
+  ...DefaultStory.args,
+  txData: {
+    txParams: {
+      value: '0x0',
+    },
+    type: 'simpleSend',
+  },
+};
 
 export const SimulationError = (args) => (
   <Provider store={customStore({ supportsEIP1559: true })}>
@@ -170,3 +184,20 @@ export const BusyNetwork = (args) => (
   </Provider>
 );
 BusyNetwork.storyName = 'BusyNetwork';
+
+export const SendingZeroAmount = (args) => (
+  <Provider store={customStore()}>
+    <GasFeeContextProvider transaction={customTransaction()}>
+      <TransactionAlerts {...args} />
+    </GasFeeContextProvider>
+  </Provider>
+);
+SendingZeroAmount.storyName = 'SendingZeroAmount';
+SendingZeroAmount.args = {
+  txData: {
+    txParams: {
+      value: '0x0',
+    },
+    type: 'simpleSend',
+  },
+};