fix: Missing "Unlimited" as value for the DAI permit (#29597)

<!--
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**

Introduces a new logical path for displaying "Unlimited" in the permit
simulation, for when the `allowed` property in the signature message is
set and the permit is for the token DAI. This is as is specified in
[ERC-2612](https://eips.ethereum.org/EIPS/eip-2612)'s "Backwards
Compatibility" section:

> There are already a couple of permit functions in token contracts
implemented in contracts in the wild, most notably the one introduced in
the dai.sol.

> Its implementation differs slightly from the presentation here in
that:

> instead of taking a value argument, it takes a bool allowed, setting
approval to 0 or uint(-1).

This PR also fixes a bug that prevents boolean values from being
displayed in the key value display in the message section of signatures.

<!--
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?
-->

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

## **Related issues**

Fixes: #28964

## **Manual testing steps**

1. Open the browser console and execute the following code:

```javascript
async function connectMetaMask() {
  try {
    const accounts = await window.ethereum.request({
      method: 'eth_requestAccounts',
    });
    console.log('Connected account:', accounts[0]);
    return accounts[0];
  } catch (error) {
    console.error('User rejected the request:', error);
    throw error;
  }
}
async function signPermit() {
  try {
    const fromAddress = await connectMetaMask();
    const msgParams = {
      types: {
        EIP712Domain: [
          { name: 'name', type: 'string' },
          { name: 'version', type: 'string' },
          { name: 'chainId', type: 'uint256' },
          { name: 'verifyingContract', type: 'address' },
        ],
        Permit: [
          { name: 'holder', type: 'address' },
          { name: 'spender', type: 'address' },
          { name: 'nonce', type: 'uint256' },
          { name: 'expiry', type: 'uint256' },
          { name: 'allowed', type: 'bool' },
        ],
      },
      domain: {
        name: 'Dai Stablecoin',
        version: '1',
        verifyingContract: '0x6B175474E89094C44Da98b954EedeAC495271d0F',
        chainId: '0x1',
      },
      primaryType: 'Permit',
      message: {
        holder: '0xD2C44F28eC4C7eF686f587FADdb204da3aEFa827',
        spender: '0x68b3465833fb72A70ecDF485E0e4C7bD8665Fc45',
        allowed: true,
        nonce: 0,
        expiry: 1660916504,
      },
    };

    const signature = await window.ethereum.request({
      method: 'eth_signTypedData_v4',
      params: [fromAddress, JSON.stringify(msgParams)],
    });
    console.log('Signature:', signature);
    return signature;
  } catch (error) {
    console.error('Error signing permit:', error);
  }
}
signPermit();
```

2. Change `"allowed": true` to `"allowed": false` in the aforementioned
code and execute it to see the revocation screen.

## **Screenshots/Recordings**

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

### **Before**

<!-- [screenshots/recordings] -->

### **After**

<!-- [screenshots/recordings] -->

<img width="472" alt="Screenshot 2025-01-08 at 18 30 35"
src="https://github.com/user-attachments/assets/93e5f295-7b75-4e1d-88c0-aaa1d11ff01d"
/>
<img width="472" alt="Screenshot 2025-01-08 at 18 30 37"
src="https://github.com/user-attachments/assets/59e8b129-df26-4f24-bcd2-a978f974eedd"
/>

<img width="472" alt="Screenshot 2025-01-09 at 10 22 09"
src="https://github.com/user-attachments/assets/10064bde-2e65-43de-b624-1c0a04d6eea4"
/>
<img width="472" alt="Screenshot 2025-01-09 at 10 22 13"
src="https://github.com/user-attachments/assets/22ecff23-71de-4293-9fba-fab74b52a42c"
/>



## **Pre-merge author checklist**

- [ ] 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).
- [ ] 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-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: pedronfigueiredo

test/integration/confirmations/signatures/permit-batch.test.tsx

@@ -103,9 +103,9 @@ describe('Permit Batch Signature Tests', () => {
       "You're giving the spender permission to spend this many tokens from your account.",
       'Spending cap',
       '0xA0b86...6eB48',
-      '1,461,501,637,3...',
+      'Unlimited',
       '0xb0B86...6EB48',
-      '2,461,501,637,3...',
+      'Unlimited',
     ];
 
     verifyDetails(simulationSection, simulationDetails);

test/integration/confirmations/signatures/permit-single.test.tsx

@@ -101,7 +101,7 @@ describe('Permit Single Signature Tests', () => {
       "You're giving the spender permission to spend this many tokens from your account.",
       'Spending cap',
       '0xA0b86...6eB48',
-      '1,461,501,637,3...',
+      'Unlimited',
     ];
 
     expect(simulationSection).toBeInTheDocument();

ui/pages/confirmations/components/confirm/info/shared/constants.ts

@@ -1,3 +1,6 @@
 export const HEX_ZERO = '0x0';
 
 export const TOKEN_VALUE_UNLIMITED_THRESHOLD = 10 ** 15;
+
+export const DAI_CONTRACT_ADDRESS =
+  '0x6B175474E89094C44Da98b954EedeAC495271d0F';

ui/pages/confirmations/components/confirm/info/typed-sign/typed-sign-v4-simulation/permit-simulation/permit-simulation.tsx

@@ -68,6 +68,8 @@ const PermitSimulation: React.FC<object> = () => {
       tokenContract={token}
       value={amount}
       chainId={chainId}
+      message={message}
+      canDisplayValueAsUnlimited
     />
   );
 
@@ -97,19 +99,27 @@ const PermitSimulation: React.FC<object> = () => {
             value={message.value}
             tokenId={message.tokenId}
             chainId={chainId}
+            message={message}
+            canDisplayValueAsUnlimited
           />
         )}
       </Box>
     </ConfirmInfoRow>
   );
 
+  let descriptionKey = 'permitSimulationDetailInfo';
+  if (isNFT) {
+    descriptionKey = 'simulationDetailsApproveDesc';
+  } else if (message.allowed === false) {
+    // revoke permit
+    descriptionKey = 'revokeSimulationDetailsDesc';
+  }
+
   return (
     <StaticSimulation
       title={t('simulationDetailsTitle')}
       titleTooltip={t('simulationDetailsTitleTooltip')}
-      description={t(
-        isNFT ? 'simulationDetailsApproveDesc' : 'permitSimulationDetailInfo',
-      )}
+      description={t(descriptionKey)}
       simulationElements={SpendingCapRow}
     />
   );

ui/pages/confirmations/components/confirm/info/typed-sign/typed-sign-v4-simulation/value-display/value-display.tsx

@@ -28,7 +28,10 @@ import {
   formatAmount,
   formatAmountMaxPrecision,
 } from '../../../../../simulation-details/formatAmount';
-import { TOKEN_VALUE_UNLIMITED_THRESHOLD } from '../../../shared/constants';
+import {
+  DAI_CONTRACT_ADDRESS,
+  TOKEN_VALUE_UNLIMITED_THRESHOLD,
+} from '../../../shared/constants';
 import { getAmountColors } from '../../../utils';
 
 type PermitSimulationValueDisplayParams = {
@@ -51,6 +54,9 @@ type PermitSimulationValueDisplayParams = {
   /** The tokenId for NFT */
   tokenId?: string;
 
+  /** The permit message */
+  message?: { allowed?: boolean | null };
+
   /** True if value is being credited to wallet */
   credit?: boolean;
 
@@ -69,6 +75,7 @@ const PermitSimulationValueDisplay: React.FC<
   tokenContract,
   tokenId,
   value,
+  message,
   credit,
   debit,
   canDisplayValueAsUnlimited,
@@ -96,22 +103,30 @@ const PermitSimulationValueDisplay: React.FC<
 
   const { tokenValue, tokenValueMaxPrecision, shouldShowUnlimitedValue } =
     useMemo(() => {
+      const isDAIPermit = tokenContract === DAI_CONTRACT_ADDRESS;
+      const hasPermitAllowedProp = message?.allowed !== undefined;
+      const showUnlimitedDueToDAIContract = isDAIPermit && hasPermitAllowedProp;
+
       if (!value || tokenId) {
         return {
           tokenValue: null,
           tokenValueMaxPrecision: null,
-          shouldShowUnlimitedValue: false,
+          shouldShowUnlimitedValue:
+            canDisplayValueAsUnlimited && showUnlimitedDueToDAIContract,
         };
       }
 
       const tokenAmount = calcTokenAmount(value, tokenDecimals);
 
+      const showUnlimitedDueToPermitValue =
+        Number(value) > TOKEN_VALUE_UNLIMITED_THRESHOLD;
+
       return {
         tokenValue: formatAmount('en-US', tokenAmount),
         tokenValueMaxPrecision: formatAmountMaxPrecision('en-US', tokenAmount),
         shouldShowUnlimitedValue:
           canDisplayValueAsUnlimited &&
-          Number(value) > TOKEN_VALUE_UNLIMITED_THRESHOLD,
+          (showUnlimitedDueToPermitValue || showUnlimitedDueToDAIContract),
       };
     }, [tokenDecimals, tokenId, value]);
 

ui/pages/confirmations/components/confirm/row/dataTree.tsx

@@ -201,6 +201,10 @@ const DataField = memo(
       return <ConfirmInfoRowAddress address={value} chainId={chainId} />;
     }
 
+    if (type === 'bool') {
+      return <ConfirmInfoRowText text={String(value)} />;
+    }
+
     return <ConfirmInfoRowText text={sanitizeString(value)} />;
   },
 );

ui/pages/confirmations/components/confirm/title/title.tsx

@@ -16,12 +16,13 @@ import useAlerts from '../../../../../hooks/useAlerts';
 import { useI18nContext } from '../../../../../hooks/useI18nContext';
 import { TypedSignSignaturePrimaryTypes } from '../../../constants';
 import { useConfirmContext } from '../../../context/confirm';
+import { useTypedSignSignatureInfo } from '../../../hooks/useTypedSignSignatureInfo';
 import { Confirmation, SignatureRequestType } from '../../../types/confirm';
 import { isSIWESignatureRequest } from '../../../utils';
-import { useTypedSignSignatureInfo } from '../../../hooks/useTypedSignSignatureInfo';
 import { useIsNFT } from '../info/approve/hooks/use-is-nft';
-import { getIsRevokeSetApprovalForAll } from '../info/utils';
 import { useTokenTransactionData } from '../info/hooks/useTokenTransactionData';
+import { getIsRevokeSetApprovalForAll } from '../info/utils';
+import { getIsRevokeDAIPermit } from '../utils';
 import { useCurrentSpendingCap } from './hooks/useCurrentSpendingCap';
 
 function ConfirmBannerAlert({ ownerId }: { ownerId: string }) {
@@ -84,6 +85,14 @@ const getTitle = (
         if (tokenStandard === TokenStandard.ERC721) {
           return t('setApprovalForAllRedesignedTitle');
         }
+
+        const isRevokeDAIPermit = getIsRevokeDAIPermit(
+          confirmation as SignatureRequestType,
+        );
+        if (isRevokeDAIPermit) {
+          return t('confirmTitleRevokeApproveTransaction');
+        }
+
         return t('confirmTitlePermitTokens');
       }
       return t('confirmTitleSignature');
@@ -136,6 +145,14 @@ const getDescription = (
         if (tokenStandard === TokenStandard.ERC721) {
           return t('confirmTitleDescApproveTransaction');
         }
+
+        const isRevokeDAIPermit = getIsRevokeDAIPermit(
+          confirmation as SignatureRequestType,
+        );
+        if (isRevokeDAIPermit) {
+          return '';
+        }
+
         return t('confirmTitleDescPermitSignature');
       }
       return t('confirmTitleDescSign');

ui/pages/confirmations/components/confirm/utils.ts

@@ -1,5 +1,7 @@
 import { TransactionMeta } from '@metamask/transaction-controller';
+import { parseTypedDataMessage } from '../../../../../shared/modules/transaction.utils';
 import { Confirmation, SignatureRequestType } from '../../types/confirm';
+import { DAI_CONTRACT_ADDRESS } from './info/shared/constants';
 
 export const getConfirmationSender = (
   currentConfirmation: Confirmation | undefined,
@@ -28,3 +30,15 @@ export const formatNumber = (value: number, decimals: number) => {
   });
   return formatter.format(value);
 };
+
+export const getIsRevokeDAIPermit = (confirmation: SignatureRequestType) => {
+  const msgData = confirmation?.msgParams?.data;
+  const {
+    message,
+    domain: { verifyingContract },
+  } = parseTypedDataMessage(msgData as string);
+  const isRevokeDAIPermit =
+    message.allowed === false && verifyingContract === DAI_CONTRACT_ADDRESS;
+
+  return isRevokeDAIPermit;
+};