diff --git a/test/e2e/tests/confirmations/signatures/nft-permit.spec.ts b/test/e2e/tests/confirmations/signatures/nft-permit.spec.ts
index eccdfff78a7c..de70d25b359b 100644
--- 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: 'Signature request' });
+ const title = driver.findElement({ text: 'Withdrawal request' });
const description = driver.findElement({
- text: 'Review request details before you confirm.',
+ text: 'This site wants permission to withdraw your NFTs',
});
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
index ba51deb7336c..7af3be743f5f 100644
--- 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('Signature request')).toBeInTheDocument();
+ expect(screen.getByText('Spending cap request')).toBeInTheDocument();
expect(
- screen.getByText('Review request details before you confirm.'),
+ screen.getByText('This site wants permission to spend your tokens.'),
).toBeInTheDocument();
});
});
diff --git a/ui/pages/confirmations/components/confirm/title/title.test.tsx b/ui/pages/confirmations/components/confirm/title/title.test.tsx
index b20b67b05c97..3d4d6672940d 100644
--- a/ui/pages/confirmations/components/confirm/title/title.test.tsx
+++ b/ui/pages/confirmations/components/confirm/title/title.test.tsx
@@ -8,8 +8,13 @@ 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 {
@@ -54,6 +59,36 @@ describe('ConfirmTitle', () => {
).toBeInTheDocument();
});
+ it('should render the title and description for a permit signature', () => {
+ const mockStore = configureMockStore([])(
+ getMockTypedSignConfirmStateForRequest(permitSignatureMsg),
+ );
+ const { getByText } = renderWithConfirmContextProvider(
+ ,
+ 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(
+ ,
+ 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
index 5fa3cc5b96f9..a926c0f6b482 100644
--- a/ui/pages/confirmations/components/confirm/title/title.tsx
+++ b/ui/pages/confirmations/components/confirm/title/title.tsx
@@ -4,6 +4,7 @@ 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 {
@@ -13,6 +14,7 @@ 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';
@@ -59,6 +61,8 @@ const getTitle = (
customSpendingCap?: string,
isRevokeSetApprovalForAll?: boolean,
pending?: boolean,
+ primaryType?: keyof typeof TypedSignSignaturePrimaryTypes,
+ tokenStandard?: string,
) => {
if (pending) {
return '';
@@ -75,6 +79,12 @@ 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) {
@@ -103,6 +113,8 @@ const getDescription = (
customSpendingCap?: string,
isRevokeSetApprovalForAll?: boolean,
pending?: boolean,
+ primaryType?: keyof typeof TypedSignSignaturePrimaryTypes,
+ tokenStandard?: string,
) => {
if (pending) {
return '';
@@ -119,6 +131,12 @@ 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) {
@@ -177,6 +195,8 @@ const ConfirmTitle: React.FC = memo(() => {
customSpendingCap,
isRevokeSetApprovalForAll,
spendingCapPending || revokePending,
+ primaryType,
+ tokenStandard,
),
[
currentConfirmation,
@@ -199,6 +219,8 @@ 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
index 1d504025a44d..9f718a4b8a03 100644
--- 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
- Signature request
+ Spending cap request
- Review request details before you confirm.
+ This site wants permission to spend your tokens.
- Signature request
+ Spending cap request
- Review request details before you confirm.
+ This site wants permission to spend your tokens.
- Signature request
+ Spending cap request
- Review request details before you confirm.
+ This site wants permission to spend your tokens.