Added reject transactions modal to be present in the footer of the approve screen (#16832)

* Added reject transactions modal in the footer

* Use Button component for multiple unapproved tx

ui/pages/token-allowance/token-allowance.js

@@ -30,10 +30,14 @@ import {
   getKnownMethodData,
   getRpcPrefsForCurrentProvider,
   getCustomTokenAmount,
+  getUnapprovedTxCount,
+  getUnapprovedTransactions,
 } from '../../selectors';
 import { NETWORK_TO_NAME_MAP } from '../../../shared/constants/network';
 import {
   cancelTx,
+  cancelTxs,
+  showModal,
   updateAndApproveTx,
   updateCustomNonce,
 } from '../../store/actions';
@@ -45,6 +49,7 @@ import Dialog from '../../components/ui/dialog';
 import { useGasFeeContext } from '../../contexts/gasFee';
 import { getCustomTxParamsData } from '../confirm-approve/confirm-approve.util';
 import { setCustomTokenAmount } from '../../ducks/app/app';
+import { valuesFor } from '../../helpers/utils/util';
 
 export default function TokenAllowance({
   origin,
@@ -86,6 +91,8 @@ export default function TokenAllowance({
   const networkIdentifier = useSelector(getNetworkIdentifier);
   const rpcPrefs = useSelector(getRpcPrefsForCurrentProvider);
   const customTokenAmount = useSelector(getCustomTokenAmount);
+  const unapprovedTxCount = useSelector(getUnapprovedTxCount);
+  const unapprovedTxs = useSelector(getUnapprovedTransactions);
 
   const customPermissionAmount = customTokenAmount.toString();
 
@@ -185,6 +192,20 @@ export default function TokenAllowance({
     setIsFirstPage(true);
   };
 
+  const handleCancelAll = () => {
+    dispatch(
+      showModal({
+        name: 'REJECT_TRANSACTIONS',
+        unapprovedTxCount,
+        onSubmit: async () => {
+          await dispatch(cancelTxs(valuesFor(unapprovedTxs)));
+          dispatch(clearConfirmTransaction());
+          history.push(mostRecentOverviewPage);
+        },
+      }),
+    );
+  };
+
   const isEmpty = customTokenAmount === '';
 
   const renderContractTokenValues = (
@@ -413,7 +434,19 @@ export default function TokenAllowance({
         onCancel={() => handleReject()}
         onSubmit={() => (isFirstPage ? handleNextClick() : handleApprove())}
         disabled={disableNextButton || disableApproveButton}
-      />
+      >
+        {unapprovedTxCount > 1 && (
+          <Button
+            type="link"
+            onClick={(e) => {
+              e.preventDefault();
+              handleCancelAll();
+            }}
+          >
+            {t('rejectTxsN', [unapprovedTxCount])}
+          </Button>
+        )}
+      </PageContainerFooter>
       {showContractDetails && (
         <ContractDetailsModal
           tokenName={tokenSymbol}

ui/selectors/selectors.js

@@ -533,7 +533,7 @@ export function getTotalUnapprovedMessagesCount(state) {
   );
 }
 
-function getUnapprovedTxCount(state) {
+export function getUnapprovedTxCount(state) {
   const { unapprovedTxs = {} } = state.metamask;
   return Object.keys(unapprovedTxs).length;
 }