Set view full transaction details by default (#15726)

test/e2e/metamask-ui.spec.js

@@ -552,6 +552,10 @@ describe('MetaMask', function () {
     });
 
     it('displays the token approval data', async function () {
+      await driver.clickElement({
+        text: 'View full transaction details',
+        css: '.confirm-approve-content__small-blue-text',
+      });
       const functionType = await driver.findElement(
         '.confirm-approve-content__data .confirm-approve-content__small-text',
       );
@@ -738,6 +742,10 @@ describe('MetaMask', function () {
     });
 
     it('shows the correct recipient', async function () {
+      await driver.clickElement({
+        text: 'View full transaction details',
+        css: '.confirm-approve-content__small-blue-text',
+      });
       const permissionInfo = await driver.findElements(
         '.confirm-approve-content__medium-text',
       );

test/e2e/tests/collectibles.spec.js

@@ -108,6 +108,10 @@ describe('Collectibles', function () {
         const title = await driver.findElement(
           '[data-testid="confirm-approve-title"]',
         );
+        await driver.clickElement({
+          text: 'View full transaction details',
+          css: '.confirm-approve-content__small-blue-text',
+        });
         const data = await driver.findElements(
           '.confirm-approve-content__data .confirm-approve-content__small-text',
         );
@@ -170,6 +174,10 @@ describe('Collectibles', function () {
         const title = await driver.findElement(
           '[data-testid="confirm-approve-title"]',
         );
+        await driver.clickElement({
+          text: 'View full transaction details',
+          css: '.confirm-approve-content__small-blue-text',
+        });
         const data = await driver.findElements(
           '.confirm-approve-content__data .confirm-approve-content__small-text',
         );

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

@@ -83,7 +83,7 @@ export default class ConfirmApproveContent extends Component {
   };
 
   state = {
-    showFullTxDetails: true,
+    showFullTxDetails: false,
     copied: false,
   };
 

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

@@ -55,7 +55,7 @@ describe('ConfirmApproveContent Component', () => {
       ),
     ).toBeInTheDocument();
     expect(queryByText('0x9bc5...fef4')).toBeInTheDocument();
-    expect(queryByText('Hide full transaction details')).toBeInTheDocument();
+    expect(queryByText('View full transaction details')).toBeInTheDocument();
 
     expect(queryByText('Edit permission')).toBeInTheDocument();
     const editPermission = getByText('Edit permission');
@@ -77,15 +77,15 @@ describe('ConfirmApproveContent Component', () => {
     fireEvent.click(editButtons[1]);
     expect(props.showCustomizeNonceModal).toHaveBeenCalledTimes(1);
 
-    const showHideTxDetails = getByText('Hide full transaction details');
-    expect(getByText('Permission request')).toBeInTheDocument();
-    expect(getByText('Approved amount:')).toBeInTheDocument();
-    expect(getByText('Granted to:')).toBeInTheDocument();
-    fireEvent.click(showHideTxDetails);
-    expect(getByText('View full transaction details')).toBeInTheDocument();
+    const showViewTxDetails = getByText('View full transaction details');
     expect(queryByText('Permission request')).not.toBeInTheDocument();
     expect(queryByText('Approved amount:')).not.toBeInTheDocument();
     expect(queryByText('Granted to:')).not.toBeInTheDocument();
+    fireEvent.click(showViewTxDetails);
+    expect(getByText('Hide full transaction details')).toBeInTheDocument();
+    expect(getByText('Permission request')).toBeInTheDocument();
+    expect(getByText('Approved amount:')).toBeInTheDocument();
+    expect(getByText('Granted to:')).toBeInTheDocument();
     expect(getByText('0x9bc5...fef4')).toBeInTheDocument();
   });
 });