fix: display warning when sending zero tokens

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',
+  },
+};