feat: NFT permit simulations

test/data/confirmations/typed_sign.ts

@@ -183,6 +183,21 @@ export const permitSignatureMsg = {
   },
 } as SignatureRequestType;
 
+export const permitNFTSignatureMsg = {
+  id: 'c5067710-87cf-11ef-916c-71f266571322',
+  status: 'unapproved',
+  time: 1728651190529,
+  type: 'eth_signTypedData',
+  msgParams: {
+    data: '{"domain":{"name":"Uniswap V3 Positions NFT-V1","version":"1","chainId":1,"verifyingContract":"0xC36442b4a4522E871399CD717aBDD847Ab11FE88"},"types":{"Permit":[{"name":"spender","type":"address"},{"name":"tokenId","type":"uint256"},{"name":"nonce","type":"uint256"},{"name":"deadline","type":"uint256"}]},"primaryType":"Permit","message":{"spender":"0x00000000Ede6d8D217c60f93191C060747324bca","tokenId":"3606393","nonce":"0","deadline":"1734995006"}}',
+    from: '0x935e73edb9ff52e23bac7f7e043a1ecd06d05477',
+    version: 'V4',
+    signatureMethod: 'eth_signTypedData_v4',
+    requestId: 2874791875,
+    origin: 'https://metamask.github.io',
+  },
+} as SignatureRequestType;
+
 export const permitSignatureMsgWithNoDeadline = {
   id: '0b1787a0-1c44-11ef-b70d-e7064bd7b659',
   securityAlertResponse: {

ui/pages/confirmations/components/confirm/info/typed-sign/permit-simulation/__snapshots__/permit-simulation.test.tsx.snap

@@ -127,3 +127,120 @@ exports[`PermitSimulation renders component correctly 1`] = `
   </div>
 </div>
 `;
+
+exports[`PermitSimulation renders correctly for NFT permit 1`] = `
+<div>
+  <div
+    class="mm-box mm-box--margin-bottom-4 mm-box--padding-2 mm-box--background-color-background-default mm-box--rounded-md"
+    data-testid="confirmation__simulation_section"
+  >
+    <div
+      class="mm-box confirm-info-row mm-box--margin-top-2 mm-box--margin-bottom-2 mm-box--padding-right-2 mm-box--padding-left-2 mm-box--display-flex mm-box--flex-direction-row mm-box--flex-wrap-wrap mm-box--justify-content-space-between mm-box--align-items-center mm-box--color-text-default mm-box--rounded-lg"
+      style="overflow-wrap: anywhere; min-height: 24px; position: relative;"
+    >
+      <div
+        class="mm-box mm-box--display-flex mm-box--flex-direction-row mm-box--justify-content-center mm-box--align-items-flex-start"
+      >
+        <div
+          class="mm-box mm-box--display-flex mm-box--align-items-center"
+        >
+          <p
+            class="mm-box mm-text mm-text--body-md-medium mm-box--color-inherit"
+          >
+            Estimated changes
+          </p>
+          <div>
+            <div
+              aria-describedby="tippy-tooltip-3"
+              class=""
+              data-original-title="Estimated changes are what might happen if you go through with this transaction. This is just a prediction, not a guarantee."
+              data-tooltipped=""
+              style="display: flex;"
+              tabindex="0"
+            >
+              <span
+                class="mm-box mm-icon mm-icon--size-sm mm-box--margin-left-1 mm-box--display-inline-block mm-box--color-icon-muted"
+                style="mask-image: url('./images/icons/question.svg');"
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+      <div
+        class="mm-box mm-box--display-flex mm-box--gap-2 mm-box--flex-wrap-wrap mm-box--align-items-center mm-box--min-width-0"
+      >
+        <p
+          class="mm-box mm-text mm-text--body-md mm-box--color-inherit"
+          style="white-space: pre-wrap;"
+        >
+          You're giving someone else permission to withdraw NFTs from your account.
+        </p>
+      </div>
+    </div>
+    <div
+      class="mm-box confirm-info-row mm-box--margin-top-2 mm-box--margin-bottom-2 mm-box--padding-right-2 mm-box--padding-left-2 mm-box--display-flex mm-box--flex-direction-row mm-box--flex-wrap-wrap mm-box--justify-content-space-between mm-box--align-items-center mm-box--color-text-default mm-box--rounded-lg"
+      style="overflow-wrap: anywhere; min-height: 24px; position: relative;"
+    >
+      <div
+        class="mm-box mm-box--display-flex mm-box--flex-direction-row mm-box--justify-content-center mm-box--align-items-flex-start"
+      >
+        <div
+          class="mm-box mm-box--display-flex mm-box--align-items-center"
+        >
+          <p
+            class="mm-box mm-text mm-text--body-md-medium mm-box--color-inherit"
+          >
+            Withdraw
+          </p>
+        </div>
+      </div>
+      <div
+        class="mm-box"
+        style="margin-left: auto; max-width: 100%;"
+      >
+        <div
+          class="mm-box"
+        >
+          <div
+            class="mm-box mm-box--display-flex mm-box--justify-content-flex-end"
+          >
+            <div
+              class="mm-box mm-box--margin-inline-end-1 mm-box--display-inline mm-box--min-width-0"
+            >
+              <div>
+                <p
+                  class="mm-box mm-text mm-text--body-md mm-text--text-align-center mm-box--padding-inline-2 mm-box--color-text-default mm-box--background-color-background-alternative mm-box--rounded-xl"
+                  data-testid="simulation-token-value"
+                  style="padding-top: 1px; padding-bottom: 1px;"
+                >
+                  #3606393
+                </p>
+              </div>
+            </div>
+            <div
+              class="mm-box mm-box--display-flex"
+            >
+              <div
+                class="name name__missing"
+              >
+                <span
+                  class="mm-box name__icon mm-icon mm-icon--size-md mm-box--display-inline-block mm-box--color-inherit"
+                  style="mask-image: url('./images/icons/question.svg');"
+                />
+                <p
+                  class="mm-box mm-text name__value mm-text--body-md mm-box--color-text-default"
+                >
+                  0xC3644...1FE88
+                </p>
+              </div>
+            </div>
+          </div>
+          <div
+            class="mm-box"
+          />
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;

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

@@ -4,7 +4,10 @@ import { act } from 'react-dom/test-utils';
 
 import { getMockTypedSignConfirmStateForRequest } from '../../../../../../../../test/data/confirmations/helper';
 import { renderWithConfirmContextProvider } from '../../../../../../../../test/lib/confirmations/render-helpers';
-import { permitSignatureMsg } from '../../../../../../../../test/data/confirmations/typed_sign';
+import {
+  permitNFTSignatureMsg,
+  permitSignatureMsg,
+} from '../../../../../../../../test/data/confirmations/typed_sign';
 import PermitSimulation from './permit-simulation';
 
 jest.mock('../../../../../../../store/actions', () => {
@@ -28,4 +31,20 @@ describe('PermitSimulation', () => {
       expect(container).toMatchSnapshot();
     });
   });
+
+  it('renders correctly for NFT permit', async () => {
+    const state = getMockTypedSignConfirmStateForRequest(permitNFTSignatureMsg);
+    const mockStore = configureMockStore([])(state);
+
+    await act(async () => {
+      const { container, findByText } = renderWithConfirmContextProvider(
+        <PermitSimulation />,
+        mockStore,
+      );
+
+      expect(await findByText('Withdraw')).toBeInTheDocument();
+      expect(await findByText('#3606393')).toBeInTheDocument();
+      expect(container).toMatchSnapshot();
+    });
+  });
 });

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

@@ -45,8 +45,10 @@ const PermitSimulation: React.FC<object> = () => {
   const {
     domain: { verifyingContract },
     message,
+    message: { tokenId },
     primaryType,
   } = parseTypedDataMessage(msgData as string);
+  const isNFT = tokenId !== undefined;
 
   const tokenDetails = extractTokenDetailsByPrimaryType(message, primaryType);
 
@@ -68,7 +70,9 @@ const PermitSimulation: React.FC<object> = () => {
   );
 
   const SpendingCapRow = (
-    <ConfirmInfoRow label={t('spendingCap')}>
+    <ConfirmInfoRow
+      label={t(isNFT ? 'simulationApproveHeading' : 'spendingCap')}
+    >
       <Box style={{ marginLeft: 'auto', maxWidth: '100%' }}>
         {Array.isArray(tokenDetails) ? (
           <Box
@@ -89,6 +93,7 @@ const PermitSimulation: React.FC<object> = () => {
           <PermitSimulationValueDisplay
             tokenContract={verifyingContract}
             value={message.value}
+            tokenId={message.tokenId}
           />
         )}
       </Box>
@@ -99,7 +104,9 @@ const PermitSimulation: React.FC<object> = () => {
     <StaticSimulation
       title={t('simulationDetailsTitle')}
       titleTooltip={t('simulationDetailsTitleTooltip')}
-      description={t('permitSimulationDetailInfo')}
+      description={t(
+        isNFT ? 'simulationDetailsApproveDesc' : 'permitSimulationDetailInfo',
+      )}
       simulationElements={SpendingCapRow}
     />
   );

ui/pages/confirmations/components/confirm/info/typed-sign/permit-simulation/value-display/__snapshots__/value-display.test.tsx.snap

@@ -56,3 +56,49 @@ exports[`PermitSimulationValueDisplay renders component correctly 1`] = `
   </div>
 </div>
 `;
+
+exports[`PermitSimulationValueDisplay renders component correctly for NFT token 1`] = `
+<div>
+  <div
+    class="mm-box"
+  >
+    <div
+      class="mm-box mm-box--display-flex mm-box--justify-content-flex-end"
+    >
+      <div
+        class="mm-box mm-box--margin-inline-end-1 mm-box--display-inline mm-box--min-width-0"
+      >
+        <div>
+          <p
+            class="mm-box mm-text mm-text--body-md mm-text--text-align-center mm-box--padding-inline-2 mm-box--color-text-default mm-box--background-color-background-alternative mm-box--rounded-xl"
+            data-testid="simulation-token-value"
+            style="padding-top: 1px; padding-bottom: 1px;"
+          >
+            #4321
+          </p>
+        </div>
+      </div>
+      <div
+        class="mm-box mm-box--display-flex"
+      >
+        <div
+          class="name name__missing"
+        >
+          <span
+            class="mm-box name__icon mm-icon mm-icon--size-md mm-box--display-inline-block mm-box--color-inherit"
+            style="mask-image: url('./images/icons/question.svg');"
+          />
+          <p
+            class="mm-box mm-text name__value mm-text--body-md mm-box--color-text-default"
+          >
+            0xA0b86...6eB48
+          </p>
+        </div>
+      </div>
+    </div>
+    <div
+      class="mm-box"
+    />
+  </div>
+</div>
+`;

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

@@ -29,4 +29,21 @@ describe('PermitSimulationValueDisplay', () => {
       expect(container).toMatchSnapshot();
     });
   });
+
+  it('renders component correctly for NFT token', async () => {
+    const mockStore = configureMockStore([])(mockState);
+
+    await act(async () => {
+      const { container, findByText } = renderWithProvider(
+        <PermitSimulationValueDisplay
+          tokenContract="0xa0b86991c6218b36c1d19d4a2e9eb0ce3606eb48"
+          tokenId="4321"
+        />,
+        mockStore,
+      );
+
+      expect(await findByText('#4321')).toBeInTheDocument();
+      expect(container).toMatchSnapshot();
+    });
+  });
 });

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

@@ -41,29 +41,34 @@ type PermitSimulationValueDisplayParams = {
   tokenContract: Hex | string;
 
   /** The token amount */
-  value: number | string;
+  value?: number | string;
+
+  /** The tokenId for NFT */
+  tokenId?: string;
 };
 
 const PermitSimulationValueDisplay: React.FC<
   PermitSimulationValueDisplayParams
-> = ({ primaryType, tokenContract, value }) => {
+> = ({ primaryType, tokenContract, value, tokenId }) => {
   const exchangeRate = useTokenExchangeRate(tokenContract);
 
-  const { value: tokenDecimals } = useAsyncResult(
-    async () => await fetchErc20Decimals(tokenContract),
-    [tokenContract],
-  );
+  const { value: tokenDecimals } = useAsyncResult(async () => {
+    if (tokenId) {
+      return undefined;
+    }
+    return await fetchErc20Decimals(tokenContract);
+  }, [tokenContract]);
 
   const fiatValue = useMemo(() => {
-    if (exchangeRate && value) {
+    if (exchangeRate && value && !tokenId) {
       const tokenAmount = calcTokenAmount(value, tokenDecimals);
       return exchangeRate.times(tokenAmount).toNumber();
     }
     return undefined;
   }, [exchangeRate, tokenDecimals, value]);
 
   const { tokenValue, tokenValueMaxPrecision } = useMemo(() => {
-    if (!value) {
+    if (!value || tokenId) {
       return { tokenValue: null, tokenValueMaxPrecision: null };
     }
 
@@ -107,12 +112,14 @@ const PermitSimulationValueDisplay: React.FC<
               style={{ paddingTop: '1px', paddingBottom: '1px' }}
               textAlign={TextAlign.Center}
             >
-              {shortenString(tokenValue || '', {
-                truncatedCharLimit: 15,
-                truncatedStartChars: 15,
-                truncatedEndChars: 0,
-                skipCharacterInEnd: true,
-              })}
+              {tokenValue !== null &&
+                shortenString(tokenValue || '', {
+                  truncatedCharLimit: 15,
+                  truncatedStartChars: 15,
+                  truncatedEndChars: 0,
+                  skipCharacterInEnd: true,
+                })}
+              {tokenId && `#${tokenId}`}
             </Text>
           </Tooltip>
         </Box>

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

@@ -11,7 +11,10 @@ import {
   getMockTypedSignConfirmStateForRequest,
 } from '../../../../../../test/data/confirmations/helper';
 import { unapprovedPersonalSignMsg } from '../../../../../../test/data/confirmations/personal_sign';
-import { permitSignatureMsg } from '../../../../../../test/data/confirmations/typed_sign';
+import {
+  permitNFTSignatureMsg,
+  permitSignatureMsg,
+} from '../../../../../../test/data/confirmations/typed_sign';
 import { renderWithConfirmContextProvider } from '../../../../../../test/lib/confirmations/render-helpers';
 import { tEn } from '../../../../../../test/lib/i18n-helpers';
 import {
@@ -71,6 +74,21 @@ describe('ConfirmTitle', () => {
     ).toBeInTheDocument();
   });
 
+  it('should render the title and description for a NFT permit signature', () => {
+    const mockStore = configureMockStore([])(
+      getMockTypedSignConfirmStateForRequest(permitNFTSignatureMsg),
+    );
+    const { getByText } = renderWithConfirmContextProvider(
+      <ConfirmTitle />,
+      mockStore,
+    );
+
+    expect(getByText('Withdrawal request')).toBeInTheDocument();
+    expect(
+      getByText('This site wants permission to withdraw your NFTs'),
+    ).toBeInTheDocument();
+  });
+
   it('should render the title and description for typed signature', () => {
     const mockStore = configureMockStore([])(getMockTypedSignConfirmState());
     const { getByText } = renderWithConfirmContextProvider(