Replace contract with third party within the token allowance flow (#1…

…8101)

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-end: 96px;
+    margin-inline-start: auto;
+    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');
-    fireEvent.click(verifyContractDetails);
+    const verifyThirdPartyDetails = getByText('Verify third-party details');
+    fireEvent.click(verifyThirdPartyDetails);
 
-    expect(getByText('Contract details')).toBeInTheDocument();
+    expect(getByText('Third-party details')).toBeInTheDocument();
 
     const gotIt = getByText('Got it');
     fireEvent.click(gotIt);