Replace contract with third party within the token allowance flow (#18101)

app/_locales/en/messages.json

@@ -815,7 +815,7 @@
     "message": "Contract deployment"
   },
   "contractDescription": {
-    "message": "To protect yourself against scammers, take a moment to verify contract details."
+    "message": "To protect yourself against scammers, take a moment to verify third-party details."
   },
   "contractInteraction": {
     "message": "Contract interaction"
@@ -830,10 +830,10 @@
     "message": "Contract requesting signature"
   },
   "contractRequestingSpendingCap": {
-    "message": "Contract requesting spending cap"
+    "message": "Third party requesting spending cap"
   },
   "contractTitle": {
-    "message": "Contract details"
+    "message": "Third-party details"
   },
   "contractToken": {
     "message": "Token contract"
@@ -1808,14 +1808,14 @@
     "message": "Your initial transaction was confirmed by the network. Click OK to go back."
   },
   "inputLogicEmptyState": {
-    "message": "Only enter a number that you're comfortable with the contract spending now or in the future. You can always increase the spending cap later."
+    "message": "Only enter a number that you're comfortable with the third party spending now or in the future. You can always increase the spending cap later."
   },
   "inputLogicEqualOrSmallerNumber": {
-    "message": "This allows the contract to spend $1 from your current balance.",
+    "message": "This allows the third party to spend $1 from your current balance.",
     "description": "$1 is the current token balance in the account and the name of the current token"
   },
   "inputLogicHigherNumber": {
-    "message": "This allows the contract to spend all your token balance until it reaches the cap or you revoke the spending cap. If this is not intended, consider setting a lower spending cap."
+    "message": "This allows the third party to spend all your token balance until it reaches the cap or you revoke the spending cap. If this is not intended, consider setting a lower spending cap."
   },
   "insightsFromSnap": {
     "message": "Insights from $1",
@@ -3328,7 +3328,7 @@
     "description": "$1 is a token symbol"
   },
   "revokeSpendingCapTooltipText": {
-    "message": "This contract will be unable to spend any more of your current or future tokens."
+    "message": "This third party will be unable to spend any more of your current or future tokens."
   },
   "rpcUrl": {
     "message": "New RPC URL"
@@ -4660,7 +4660,7 @@
     "message": "Username"
   },
   "verifyContractDetails": {
-    "message": "Verify contract details"
+    "message": "Verify third-party details"
   },
   "verifyThisTokenDecimalOn": {
     "message": "Token decimal can be found on $1",
@@ -4746,7 +4746,7 @@
     "message": "Warning"
   },
   "warningTooltipText": {
-    "message": "$1 The contract could spend your entire token balance without further notice or consent. Protect yourself by customizing a lower spending cap.",
+    "message": "$1 The third party could spend your entire token balance without further notice or consent. Protect yourself by customizing a lower spending cap.",
     "description": "$1 is a warning icon with text 'Be careful' in 'warning' colour"
   },
   "weak": {

test/e2e/tests/custom-token-add-approve.spec.js

@@ -119,16 +119,16 @@ describe('Create token, approve token and approve token without gas', function (
         );
 
         await driver.clickElement({
-          text: 'Verify contract details',
+          text: 'Verify third-party details',
           css: '.token-allowance-container__verify-link',
         });
 
         const modalTitle = await driver.waitForSelector({
-          text: 'Contract details',
+          text: 'Third-party details',
           tag: 'h5',
         });
 
-        assert.equal(await modalTitle.getText(), 'Contract details');
+        assert.equal(await modalTitle.getText(), 'Third-party details');
 
         await driver.clickElement({
           text: 'Got it',

test/e2e/tests/signature-request.spec.js

@@ -60,7 +60,7 @@ describe('Sign Typed Data V4 Signature Request', function () {
         assert.equal(await origin.getText(), 'http://127.0.0.1:8080');
 
         verifyContractDetailsButton.click();
-        await driver.findElement({ text: 'Contract details', tag: 'h5' });
+        await driver.findElement({ text: 'Third-party details', tag: 'h5' });
         await driver.findElement('[data-testid="recipient"]');
         await driver.clickElement({ text: 'Got it', tag: 'button' });
 
@@ -142,7 +142,7 @@ describe('Sign Typed Data V3 Signature Request', function () {
         assert.equal(await origin.getText(), 'http://127.0.0.1:8080');
 
         verifyContractDetailsButton.click();
-        await driver.findElement({ text: 'Contract details', tag: 'h5' });
+        await driver.findElement({ text: 'Third-party details', tag: 'h5' });
         await driver.findElement('[data-testid="recipient"]');
         await driver.clickElement({ text: 'Got it', tag: 'button' });
 

ui/components/app/signature-request/__snapshots__/signature-request.component.test.js.snap

@@ -224,7 +224,7 @@ exports[`Signature Request Component render should match snapshot when we are us
           <h6
             class="box box--margin-top-1 box--margin-bottom-1 box--flex-direction-row typography typography--h7 typography--weight-normal typography--style-normal typography--color-primary-default"
           >
-            Verify contract details
+            Verify third-party details
           </h6>
         </a>
       </div>
@@ -999,7 +999,7 @@ exports[`Signature Request Component render should match snapshot when we want t
           <h6
             class="box box--margin-top-1 box--margin-bottom-1 box--flex-direction-row typography typography--h7 typography--weight-normal typography--style-normal typography--color-primary-default"
           >
-            Verify contract details
+            Verify third-party details
           </h6>
         </a>
       </div>

ui/pages/confirm-approve/confirm-approve-content/__snapshots__/confirm-approve-content.component.test.js.snap

@@ -57,7 +57,7 @@ exports[`ConfirmApproveContent Component should render Confirm approve page corr
         role="button"
         tabindex="0"
       >
-        Verify contract details
+        Verify third-party details
       </a>
     </div>
     <div
@@ -244,7 +244,7 @@ exports[`ConfirmApproveContent Component should render Confirm approve page corr
         role="button"
         tabindex="0"
       >
-        Verify contract details
+        Verify third-party details
       </a>
     </div>
     <div
@@ -431,7 +431,7 @@ exports[`ConfirmApproveContent Component should render Confirm approve page corr
         role="button"
         tabindex="0"
       >
-        Verify contract details
+        Verify third-party details
       </a>
     </div>
     <div
@@ -618,7 +618,7 @@ exports[`ConfirmApproveContent Component should render Confirm approve page corr
         role="button"
         tabindex="0"
       >
-        Verify contract details
+        Verify third-party details
       </a>
     </div>
     <div

ui/pages/confirm-approve/confirm-approve-content/confirm-approve-content.component.test.js

@@ -56,7 +56,7 @@ describe('ConfirmApproveContent Component', () => {
         'This allows a third party to access and transfer the following NFTs without further notice until you revoke its access.',
       ),
     ).toBeInTheDocument();
-    expect(queryByText('Verify contract details')).toBeInTheDocument();
+    expect(queryByText('Verify third-party details')).toBeInTheDocument();
     expect(
       queryByText(
         'We were not able to estimate gas. There might be an error in the contract and this transaction may fail.',
@@ -119,7 +119,7 @@ describe('ConfirmApproveContent Component', () => {
         'This allows a third party to access and transfer the following NFTs without further notice until you revoke its access.',
       ),
     ).toBeInTheDocument();
-    expect(queryByText('Verify contract details')).toBeInTheDocument();
+    expect(queryByText('Verify third-party details')).toBeInTheDocument();
     expect(
       queryByText(
         'We were not able to estimate gas. There might be an error in the contract and this transaction may fail.',
@@ -181,7 +181,7 @@ describe('ConfirmApproveContent Component', () => {
         'This allows a third party to access and transfer the following NFTs without further notice until you revoke its access.',
       ),
     ).toBeInTheDocument();
-    expect(queryByText('Verify contract details')).toBeInTheDocument();
+    expect(queryByText('Verify third-party details')).toBeInTheDocument();
     expect(
       queryByText(
         'We were not able to estimate gas. There might be an error in the contract and this transaction may fail.',
@@ -239,7 +239,7 @@ describe('ConfirmApproveContent Component', () => {
         'This allows a third party to access and transfer the following NFTs without further notice until you revoke its access.',
       ),
     ).toBeInTheDocument();
-    expect(queryByText('Verify contract details')).toBeInTheDocument();
+    expect(queryByText('Verify third-party details')).toBeInTheDocument();
     expect(
       queryByText(
         'We were not able to estimate gas. There might be an error in the contract and this transaction may fail.',

ui/pages/confirm-signature-request/__snapshots__/index.test.js.snap

@@ -223,7 +223,7 @@ exports[`Signature Request Component render should match snapshot 1`] = `
           <h6
             class="box box--margin-top-1 box--margin-bottom-1 box--flex-direction-row typography typography--h7 typography--weight-normal typography--style-normal typography--color-primary-default"
           >
-            Verify contract details
+            Verify third-party details
           </h6>
         </a>
       </div>

ui/pages/token-allowance/index.scss

@@ -16,8 +16,8 @@
 
   a.token-allowance-container__verify-link {
     width: fit-content;
-    margin-inline-start: 96px;
+    margin-inline-start: auto;
-    margin-inline-end: 96px;
+    margin-inline-end: auto;
     padding: 0;
   }
 

ui/pages/token-allowance/token-allowance.test.js

@@ -237,16 +237,16 @@ describe('TokenAllowancePage', () => {
     expect(getByText('Set a spending cap for your')).toBeInTheDocument();
   });
 
-  it('should click Verify contract details and show popup Contract details, then close popup', () => {
+  it('should click Verify third-party details and show popup Third-party details, then close popup', () => {
     const { getByText } = renderWithProvider(
       <TokenAllowance {...props} />,
       store,
     );
 
-    const verifyContractDetails = getByText('Verify contract details');
+    const verifyThirdPartyDetails = getByText('Verify third-party details');
-    fireEvent.click(verifyContractDetails);
+    fireEvent.click(verifyThirdPartyDetails);
 
-    expect(getByText('Contract details')).toBeInTheDocument();
+    expect(getByText('Third-party details')).toBeInTheDocument();
 
     const gotIt = getByText('Got it');
     fireEvent.click(gotIt);