fix: cp-12.17.3 support permit2 approvals in batch simulation (#32733)

## **Description**

Include Permit2 approvals in batch simulation changes.

In addition:

- Fix incorrect `Unlimited` label.
- Show loader in `Edit Spending Cap Modal` to prevent temporary token ID
display.

[![Open in GitHub
Codespaces](https://github.com/codespaces/badge.svg)](https://codespaces.new/MetaMask/metamask-extension/pull/32733?quickstart=1)

## **Related issues**

Fixes:
[#4847](MetaMask/MetaMask-planning#4847)
[#4846](MetaMask/MetaMask-planning#4846)

## **Manual testing steps**

## **Screenshots/Recordings**

### **Before**

### **After**

## **Pre-merge author checklist**

- [x] I've followed [MetaMask Contributor
Docs](https://github.com/MetaMask/contributor-docs) and [MetaMask
Extension Coding
Standards](https://github.com/MetaMask/metamask-extension/blob/main/.github/guidelines/CODING_GUIDELINES.md).
- [x] I've completed the PR template to the best of my ability
- [x] I’ve included tests if applicable
- [x] I’ve documented my code using [JSDoc](https://jsdoc.app/) format
if applicable
- [x] I’ve applied the right labels on the PR (see [labeling
guidelines](https://github.com/MetaMask/metamask-extension/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.

Author: matthewwalsh0

shared/lib/transactions/approvals.test.ts

@@ -0,0 +1,59 @@
+import {
+  buildApproveTransactionData,
+  buildIncreaseAllowanceTransactionData,
+  buildPermit2ApproveTransactionData,
+} from '../../../test/data/confirmations/token-approve';
+import { updateApprovalAmount } from './approvals';
+
+const SPENDER_MOCK = '0x0c54FcCd2e384b4BB6f2E405Bf5Cbc15a017AaFb';
+const TOKEN_ADDRESS_MOCK = '0x1234567890abcdef1234567890abcdef12345678';
+const AMOUNT_MOCK = 123;
+const EXPIRATION_MOCK = 456;
+
+describe('Approvals Utils', () => {
+  describe('updateApprovalAmount', () => {
+    it('updates legacy approval amount', () => {
+      expect(
+        updateApprovalAmount(
+          buildApproveTransactionData(SPENDER_MOCK, AMOUNT_MOCK),
+          1.23,
+          5,
+        ),
+      ).toStrictEqual(buildApproveTransactionData(SPENDER_MOCK, 123000));
+    });
+
+    it('updates increaseAllowance amount', () => {
+      expect(
+        updateApprovalAmount(
+          buildIncreaseAllowanceTransactionData(SPENDER_MOCK, AMOUNT_MOCK),
+          1.23,
+          5,
+        ),
+      ).toStrictEqual(
+        buildIncreaseAllowanceTransactionData(SPENDER_MOCK, 123000),
+      );
+    });
+
+    it('updates Permit2 approval amount', () => {
+      expect(
+        updateApprovalAmount(
+          buildPermit2ApproveTransactionData(
+            SPENDER_MOCK,
+            TOKEN_ADDRESS_MOCK,
+            AMOUNT_MOCK,
+            EXPIRATION_MOCK,
+          ),
+          1.23,
+          5,
+        ),
+      ).toStrictEqual(
+        buildPermit2ApproveTransactionData(
+          SPENDER_MOCK,
+          TOKEN_ADDRESS_MOCK,
+          123000,
+          EXPIRATION_MOCK,
+        ),
+      );
+    });
+  });
+});

shared/lib/transactions/approvals.ts

@@ -0,0 +1,45 @@
+import { Hex, add0x } from '@metamask/utils';
+import { BigNumber } from 'bignumber.js';
+import { Interface } from '@ethersproject/abi';
+import { parseApprovalTransactionData } from '../../modules/transaction.utils';
+
+const SIGNATURE_LEGACY = 'function approve(address,uint256)';
+const SIGNATURE_PERMIT2 = 'function approve(address,address,uint160,uint48)';
+const SIGNATURE_INCREASE_ALLOWANCE =
+  'function increaseAllowance(address,uint256)';
+
+export function updateApprovalAmount(
+  originalData: Hex,
+  newAmount: string | number | BigNumber,
+  decimals: number,
+): Hex {
+  const { name, tokenAddress } =
+    parseApprovalTransactionData(originalData) ?? {};
+
+  if (!name) {
+    throw new Error('Invalid approval transaction data');
+  }
+
+  const multiplier = new BigNumber(10).pow(decimals);
+  const value = add0x(new BigNumber(newAmount).times(multiplier).toString(16));
+
+  let signature = tokenAddress ? SIGNATURE_PERMIT2 : SIGNATURE_LEGACY;
+
+  if (name === 'increaseAllowance') {
+    signature = SIGNATURE_INCREASE_ALLOWANCE;
+  }
+
+  const iface = new Interface([signature]);
+  const decoded = iface.decodeFunctionData(name, originalData);
+
+  if (signature === SIGNATURE_PERMIT2) {
+    return iface.encodeFunctionData(name, [
+      tokenAddress,
+      decoded[1],
+      value,
+      decoded[3],
+    ]) as Hex;
+  }
+
+  return iface.encodeFunctionData(name, [decoded[0], value]) as Hex;
+}

shared/modules/transaction.utils.test.js

@@ -5,6 +5,7 @@ import { createTestProviderTools } from '../../test/stub/provider';
 import {
   buildApproveTransactionData,
   buildIncreaseAllowanceTransactionData,
+  buildPermit2ApproveTransactionData,
 } from '../../test/data/confirmations/token-approve';
 import { buildSetApproveForAllTransactionData } from '../../test/data/confirmations/set-approval-for-all';
 import {
@@ -19,6 +20,8 @@ import {
 
 const DATA_MOCK = '0x12345678';
 const ADDRESS_MOCK = '0x1234567890123456789012345678901234567890';
+const ADDRESS_2_MOCK = '0x1234567890123456789012345678901234567891';
+const EXPIRATION_MOCK = 1234567890;
 const AMOUNT_MOCK = 123;
 
 describe('Transaction.utils', function () {
@@ -39,7 +42,29 @@ describe('Transaction.utils', function () {
     it('should not throw errors when called without arguments', () => {
       expect(() => parseStandardTokenTransactionData()).not.toThrow();
     });
+
+    it('decodes Permit2 function', () => {
+      const result = parseStandardTokenTransactionData(
+        buildPermit2ApproveTransactionData(
+          ADDRESS_MOCK,
+          ADDRESS_2_MOCK,
+          AMOUNT_MOCK,
+          EXPIRATION_MOCK,
+        ),
+      );
+
+      expect(result.name).toBe('approve');
+      expect(result.args).toStrictEqual(
+        expect.objectContaining({
+          token: ADDRESS_MOCK,
+          spender: ADDRESS_2_MOCK,
+          expiration: EXPIRATION_MOCK,
+        }),
+      );
+      expect(result.args.amount.toString()).toBe(AMOUNT_MOCK.toString());
+    });
   });
+
   describe('isEIP1559Transaction', function () {
     it('should return true if both maxFeePerGas and maxPriorityFeePerGas are hex strings', () => {
       expect(
@@ -458,6 +483,8 @@ describe('Transaction.utils', function () {
         amountOrTokenId: new BigNumber(AMOUNT_MOCK),
         isApproveAll: false,
         isRevokeAll: false,
+        name: 'approve',
+        tokenAddress: undefined,
       });
     });
 
@@ -470,6 +497,8 @@ describe('Transaction.utils', function () {
         amountOrTokenId: new BigNumber(AMOUNT_MOCK),
         isApproveAll: false,
         isRevokeAll: false,
+        name: 'increaseAllowance',
+        tokenAddress: undefined,
       });
     });
 
@@ -482,6 +511,8 @@ describe('Transaction.utils', function () {
         amountOrTokenId: undefined,
         isApproveAll: true,
         isRevokeAll: false,
+        name: 'setApprovalForAll',
+        tokenAddress: undefined,
       });
     });
 
@@ -494,6 +525,27 @@ describe('Transaction.utils', function () {
         amountOrTokenId: undefined,
         isApproveAll: false,
         isRevokeAll: true,
+        name: 'setApprovalForAll',
+        tokenAddress: undefined,
+      });
+    });
+
+    it('returns parsed data if Permit2 approve', () => {
+      expect(
+        parseApprovalTransactionData(
+          buildPermit2ApproveTransactionData(
+            ADDRESS_MOCK,
+            ADDRESS_2_MOCK,
+            AMOUNT_MOCK,
+            EXPIRATION_MOCK,
+          ),
+        ),
+      ).toStrictEqual({
+        amountOrTokenId: new BigNumber(AMOUNT_MOCK),
+        isApproveAll: false,
+        isRevokeAll: false,
+        name: 'approve',
+        tokenAddress: ADDRESS_MOCK,
       });
     });
   });

shared/modules/transaction.utils.ts

@@ -30,6 +30,19 @@ const INFERRABLE_TRANSACTION_TYPES: TransactionType[] = [
   TransactionType.simpleSend,
 ];
 
+const ABI_PERMIT_2_APPROVE = {
+  inputs: [
+    { internalType: 'address', name: 'token', type: 'address' },
+    { internalType: 'address', name: 'spender', type: 'address' },
+    { internalType: 'uint160', name: 'amount', type: 'uint160' },
+    { internalType: 'uint48', name: 'expiration', type: 'uint48' },
+  ],
+  name: 'approve',
+  outputs: [],
+  stateMutability: 'nonpayable',
+  type: 'function',
+};
+
 type InferTransactionTypeResult = {
   // The type of transaction
   type: TransactionType;
@@ -41,6 +54,7 @@ const erc20Interface = new Interface(abiERC20);
 const erc721Interface = new Interface(abiERC721);
 const erc1155Interface = new Interface(abiERC1155);
 const USDCInterface = new Interface(abiFiatTokenV2);
+const permit2Interface = new Interface([ABI_PERMIT_2_APPROVE]);
 
 /**
  * Determines if the maxFeePerGas and maxPriorityFeePerGas fields are supplied
@@ -109,28 +123,20 @@ export function txParamsAreDappSuggested(
  * @returns TransactionDescription | undefined
  */
 export function parseStandardTokenTransactionData(data: string) {
-  try {
-    return erc20Interface.parseTransaction({ data });
-  } catch {
-    // ignore and next try to parse with erc721 ABI
-  }
-
-  try {
-    return erc721Interface.parseTransaction({ data });
-  } catch {
-    // ignore and next try to parse with erc1155 ABI
-  }
-
-  try {
-    return erc1155Interface.parseTransaction({ data });
-  } catch {
-    // ignore and return undefined
-  }
-
-  try {
-    return USDCInterface.parseTransaction({ data });
-  } catch {
-    // ignore and return undefined
+  const interfaces = [
+    erc20Interface,
+    erc721Interface,
+    erc1155Interface,
+    USDCInterface,
+    permit2Interface,
+  ];
+
+  for (const iface of interfaces) {
+    try {
+      return iface.parseTransaction({ data });
+    } catch {
+      // Intentionally empty
+    }
   }
 
   return undefined;
@@ -339,31 +345,40 @@ export function parseApprovalTransactionData(data: Hex):
       amountOrTokenId?: BigNumber;
       isApproveAll?: boolean;
       isRevokeAll?: boolean;
+      name: string;
+      tokenAddress?: Hex;
     }
   | undefined {
   const transactionDescription = parseStandardTokenTransactionData(data);
   const { args, name } = transactionDescription ?? {};
 
   if (
-    !['approve', 'increaseAllowance', 'setApprovalForAll'].includes(name ?? '')
+    !['approve', 'increaseAllowance', 'setApprovalForAll'].includes(
+      name ?? '',
+    ) ||
+    !name
   ) {
     return undefined;
   }
 
   const rawAmountOrTokenId =
     args?._value ?? // ERC-20 - approve
-    args?.increment; // Fiat Token V2 - increaseAllowance
+    args?.increment ?? // Fiat Token V2 - increaseAllowance
+    args?.amount; // Permit2 - approve
 
   const amountOrTokenId = rawAmountOrTokenId
     ? new BigNumber(rawAmountOrTokenId?.toString())
     : undefined;
 
   const isApproveAll = name === 'setApprovalForAll' && args?._approved === true;
   const isRevokeAll = name === 'setApprovalForAll' && args?._approved === false;
+  const tokenAddress = name === 'approve' ? args?.token : undefined;
 
   return {
     amountOrTokenId,
     isApproveAll,
     isRevokeAll,
+    name,
+    tokenAddress,
   };
 }

test/data/confirmations/token-approve.ts

@@ -16,6 +16,17 @@ export function buildApproveTransactionData(
   ]).encodeFunctionData('approve', [address, amountOrTokenId]) as Hex;
 }
 
+export function buildPermit2ApproveTransactionData(
+  token: string,
+  spender: string,
+  amount: number,
+  expiration: number,
+): Hex {
+  return new Interface([
+    'function approve(address token, address spender, uint160 amount, uint48 nonce)',
+  ]).encodeFunctionData('approve', [token, spender, amount, expiration]) as Hex;
+}
+
 export function buildIncreaseAllowanceTransactionData(
   address: string,
   amount: number,

ui/pages/confirmations/components/confirm/info/approve/edit-spending-cap-modal/__snapshots__/edit-spending-cap-modal.test.tsx.snap

@@ -63,7 +63,7 @@ exports[`EditSpendingCapModal renders component 1`] = `
             <p
               class="mm-box mm-text mm-text--body-sm mm-box--padding-top-1 mm-box--color-text-alternative"
             >
-              Account balance: 0.000000000001 TST
+              Account balance: 100 TST
             </p>
           </div>
           <div