feat: Changing title for permit requests (#28537)

## **Description** Change title and description for permit pages. ## **Related issues** Fixes: MetaMask/MetaMask-planning#3633 ## **Manual testing steps** 1. Enable permit signature decoding locally 2. Go to test dapp 3. Check title and description of permit pages ## **Screenshots/Recordings** <img width="356" alt="Screenshot 2024-11-19 at 3 46 02 PM" src="https://github.com/user-attachments/assets/41ca3226-4bc5-4022-9e71-8ba2200ae06b"> ## **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/develop/.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/develop/.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. --------- Co-authored-by: MetaMask Bot <[email protected]>
MetaMask · Nov 26, 2024 · 6830a39 · 6830a39
1 parent 0302848
commit 6830a39
Show file tree

Hide file tree

Showing 5 changed files with 10 additions and 67 deletions.
diff --git a/test/e2e/tests/confirmations/signatures/nft-permit.spec.ts b/test/e2e/tests/confirmations/signatures/nft-permit.spec.ts
@@ -126,9 +126,9 @@ async function assertInfoValues(driver: Driver) {
     text: '0x581c3...45947',
   });
 
-  const title = driver.findElement({ text: 'Withdrawal request' });
+  const title = driver.findElement({ text: 'Signature request' });
   const description = driver.findElement({
-    text: 'This site wants permission to withdraw your NFTs',
+    text: 'Review request details before you confirm.',
   });
   const primaryType = driver.findElement({ text: 'Permit' });
   const spender = driver.findElement({

diff --git a/test/integration/confirmations/signatures/permit.test.tsx b/test/integration/confirmations/signatures/permit.test.tsx
@@ -191,9 +191,9 @@ describe('Permit Confirmation', () => {
     });
 
     await waitFor(() => {
-      expect(screen.getByText('Spending cap request')).toBeInTheDocument();
+      expect(screen.getByText('Signature request')).toBeInTheDocument();
       expect(
-        screen.getByText('This site wants permission to spend your tokens.'),
+        screen.getByText('Review request details before you confirm.'),
       ).toBeInTheDocument();
     });
   });

diff --git a/ui/pages/confirmations/components/confirm/title/title.test.tsx b/ui/pages/confirmations/components/confirm/title/title.test.tsx
@@ -8,13 +8,8 @@ import {
   getMockPersonalSignConfirmStateForRequest,
   getMockSetApprovalForAllConfirmState,
   getMockTypedSignConfirmState,
-  getMockTypedSignConfirmStateForRequest,
 } from '../../../../../../test/data/confirmations/helper';
 import { unapprovedPersonalSignMsg } from '../../../../../../test/data/confirmations/personal_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 {
@@ -59,36 +54,6 @@ describe('ConfirmTitle', () => {
     ).toBeInTheDocument();
   });
 
-  it('should render the title and description for a permit signature', () => {
-    const mockStore = configureMockStore([])(
-      getMockTypedSignConfirmStateForRequest(permitSignatureMsg),
-    );
-    const { getByText } = renderWithConfirmContextProvider(
-      <ConfirmTitle />,
-      mockStore,
-    );
-
-    expect(getByText('Spending cap request')).toBeInTheDocument();
-    expect(
-      getByText('This site wants permission to spend your tokens.'),
-    ).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(

diff --git a/ui/pages/confirmations/components/confirm/title/title.tsx b/ui/pages/confirmations/components/confirm/title/title.tsx
@@ -4,7 +4,6 @@ import {
 } from '@metamask/transaction-controller';
 import React, { memo, useMemo } from 'react';
 
-import { TokenStandard } from '../../../../../../shared/constants/transaction';
 import GeneralAlert from '../../../../../components/app/alert-system/general-alert/general-alert';
 import { Box, Text } from '../../../../../components/component-library';
 import {
@@ -14,7 +13,6 @@ import {
 } from '../../../../../helpers/constants/design-system';
 import useAlerts from '../../../../../hooks/useAlerts';
 import { useI18nContext } from '../../../../../hooks/useI18nContext';
-import { TypedSignSignaturePrimaryTypes } from '../../../constants';
 import { useConfirmContext } from '../../../context/confirm';
 import { Confirmation, SignatureRequestType } from '../../../types/confirm';
 import { isSIWESignatureRequest } from '../../../utils';
@@ -61,8 +59,6 @@ const getTitle = (
   customSpendingCap?: string,
   isRevokeSetApprovalForAll?: boolean,
   pending?: boolean,
-  primaryType?: keyof typeof TypedSignSignaturePrimaryTypes,
-  tokenStandard?: string,
 ) => {
   if (pending) {
     return '';
@@ -79,12 +75,6 @@ const getTitle = (
       }
       return t('confirmTitleSignature');
     case TransactionType.signTypedData:
-      if (primaryType === TypedSignSignaturePrimaryTypes.PERMIT) {
-        if (tokenStandard === TokenStandard.ERC721) {
-          return t('setApprovalForAllRedesignedTitle');
-        }
-        return t('confirmTitlePermitTokens');
-      }
       return t('confirmTitleSignature');
     case TransactionType.tokenMethodApprove:
       if (isNFT) {
@@ -113,8 +103,6 @@ const getDescription = (
   customSpendingCap?: string,
   isRevokeSetApprovalForAll?: boolean,
   pending?: boolean,
-  primaryType?: keyof typeof TypedSignSignaturePrimaryTypes,
-  tokenStandard?: string,
 ) => {
   if (pending) {
     return '';
@@ -131,12 +119,6 @@ const getDescription = (
       }
       return t('confirmTitleDescSign');
     case TransactionType.signTypedData:
-      if (primaryType === TypedSignSignaturePrimaryTypes.PERMIT) {
-        if (tokenStandard === TokenStandard.ERC721) {
-          return t('confirmTitleDescApproveTransaction');
-        }
-        return t('confirmTitleDescPermitSignature');
-      }
       return t('confirmTitleDescSign');
     case TransactionType.tokenMethodApprove:
       if (isNFT) {
@@ -195,8 +177,6 @@ const ConfirmTitle: React.FC = memo(() => {
         customSpendingCap,
         isRevokeSetApprovalForAll,
         spendingCapPending || revokePending,
-        primaryType,
-        tokenStandard,
       ),
     [
       currentConfirmation,
@@ -219,8 +199,6 @@ const ConfirmTitle: React.FC = memo(() => {
         customSpendingCap,
         isRevokeSetApprovalForAll,
         spendingCapPending || revokePending,
-        primaryType,
-        tokenStandard,
       ),
     [
       currentConfirmation,

diff --git a/ui/pages/confirmations/confirm/__snapshots__/confirm.test.tsx.snap b/ui/pages/confirmations/confirm/__snapshots__/confirm.test.tsx.snap
@@ -457,12 +457,12 @@ exports[`Confirm should match snapshot for signature - typed sign - V4 - PermitB
           <h2
             class="mm-box mm-text mm-text--heading-lg mm-text--text-align-center mm-box--padding-top-4 mm-box--padding-bottom-4 mm-box--color-text-default"
           >
-            Spending cap request
+            Signature request
           </h2>
           <p
             class="mm-box mm-text mm-text--body-md mm-text--text-align-center mm-box--padding-bottom-4 mm-box--color-text-alternative"
           >
-            This site wants permission to spend your tokens.
+            Review request details before you confirm.
           </p>
           <div
             class="mm-box mm-box--margin-bottom-4 mm-box--padding-2 mm-box--background-color-background-default mm-box--rounded-md"
@@ -1111,12 +1111,12 @@ exports[`Confirm should match snapshot for signature - typed sign - V4 - PermitS
           <h2
             class="mm-box mm-text mm-text--heading-lg mm-text--text-align-center mm-box--padding-top-4 mm-box--padding-bottom-4 mm-box--color-text-default"
           >
-            Spending cap request
+            Signature request
           </h2>
           <p
             class="mm-box mm-text mm-text--body-md mm-text--text-align-center mm-box--padding-bottom-4 mm-box--color-text-alternative"
           >
-            This site wants permission to spend your tokens.
+            Review request details before you confirm.
           </p>
           <div
             class="mm-box mm-box--margin-bottom-4 mm-box--padding-2 mm-box--background-color-background-default mm-box--rounded-md"
@@ -2794,12 +2794,12 @@ exports[`Confirm should match snapshot for signature - typed sign - permit 1`] =
           <h2
             class="mm-box mm-text mm-text--heading-lg mm-text--text-align-center mm-box--padding-top-4 mm-box--padding-bottom-4 mm-box--color-text-default"
           >
-            Spending cap request
+            Signature request
           </h2>
           <p
             class="mm-box mm-text mm-text--body-md mm-text--text-align-center mm-box--padding-bottom-4 mm-box--color-text-alternative"
           >
-            This site wants permission to spend your tokens.
+            Review request details before you confirm.
           </p>
           <div
             class="mm-box mm-box--margin-bottom-4 mm-box--padding-2 mm-box--background-color-background-default mm-box--rounded-md"