From cf2c6a3164b8bd75aa97c8641574a5460b3fadb5 Mon Sep 17 00:00:00 2001
From: Alex Donesky <adonesky@gmail.com>
Date: Tue, 26 Apr 2022 10:21:52 -0500
Subject: [PATCH] show token approval details on confirm approve screen by
 default (#14523)

---
 app/_locales/en/messages.json                       |  3 +++
 test/e2e/metamask-ui.spec.js                        | 10 ----------
 .../confirm-approve-content.component.js            | 10 +++++++---
 .../confirm-approve-content.component.test.js       | 13 +++++++------
 4 files changed, 17 insertions(+), 19 deletions(-)

diff --git a/app/_locales/en/messages.json b/app/_locales/en/messages.json
index 833b95a85..74e079f91 100644
--- a/app/_locales/en/messages.json
+++ b/app/_locales/en/messages.json
@@ -1443,6 +1443,9 @@
   "hide": {
     "message": "Hide"
   },
+  "hideFullTransactionDetails": {
+    "message": "Hide full transaction details"
+  },
   "hideSeedPhrase": {
     "message": "Hide seed phrase"
   },
diff --git a/test/e2e/metamask-ui.spec.js b/test/e2e/metamask-ui.spec.js
index 1733aa6f9..854b597a0 100644
--- a/test/e2e/metamask-ui.spec.js
+++ b/test/e2e/metamask-ui.spec.js
@@ -555,11 +555,6 @@ describe('MetaMask', function () {
     });
 
     it('displays the token approval data', async function () {
-      await driver.clickElement(
-        '.confirm-approve-content__view-full-tx-button',
-      );
-      await driver.delay(regularDelayMs);
-
       const functionType = await driver.findElement(
         '.confirm-approve-content__data .confirm-approve-content__small-text',
       );
@@ -750,11 +745,6 @@ describe('MetaMask', function () {
     });
 
     it('shows the correct recipient', async function () {
-      await driver.clickElement(
-        '.confirm-approve-content__view-full-tx-button',
-      );
-      await driver.delay(regularDelayMs);
-
       const permissionInfo = await driver.findElements(
         '.confirm-approve-content__medium-text',
       );
diff --git a/ui/pages/confirm-approve/confirm-approve-content/confirm-approve-content.component.js b/ui/pages/confirm-approve/confirm-approve-content/confirm-approve-content.component.js
index c238d9106..7487e594b 100644
--- a/ui/pages/confirm-approve/confirm-approve-content/confirm-approve-content.component.js
+++ b/ui/pages/confirm-approve/confirm-approve-content/confirm-approve-content.component.js
@@ -73,7 +73,7 @@ export default class ConfirmApproveContent extends Component {
   };
 
   state = {
-    showFullTxDetails: false,
+    showFullTxDetails: true,
     copied: false,
   };
 
@@ -613,7 +613,9 @@ export default class ConfirmApproveContent extends Component {
               >
                 <div className="confirm-approve-content__view-full-tx-button cursor-pointer">
                   <div className="confirm-approve-content__small-blue-text">
-                    {t('viewFullTransactionDetails')}
+                    {this.state.showFullTxDetails
+                      ? t('hideFullTransactionDetails')
+                      : t('viewFullTransactionDetails')}
                   </div>
                   <i
                     className={classnames({
@@ -642,7 +644,9 @@ export default class ConfirmApproveContent extends Component {
                 >
                   <div className="confirm-approve-content__view-full-tx-button cursor-pointer">
                     <div className="confirm-approve-content__small-blue-text">
-                      {t('viewFullTransactionDetails')}
+                      {this.state.showFullTxDetails
+                        ? t('hideFullTransactionDetails')
+                        : t('viewFullTransactionDetails')}
                     </div>
                     <i
                       className={classnames({
diff --git a/ui/pages/confirm-approve/confirm-approve-content/confirm-approve-content.component.test.js b/ui/pages/confirm-approve/confirm-approve-content/confirm-approve-content.component.test.js
index 52ecdeece..dd9cd8dd4 100644
--- a/ui/pages/confirm-approve/confirm-approve-content/confirm-approve-content.component.test.js
+++ b/ui/pages/confirm-approve/confirm-approve-content/confirm-approve-content.component.test.js
@@ -51,7 +51,7 @@ describe('ConfirmApproveContent Component', () => {
       ),
     ).toBeInTheDocument();
     expect(queryByText('0x9bc5...fef4')).toBeInTheDocument();
-    expect(queryByText('View full transaction details')).toBeInTheDocument();
+    expect(queryByText('Hide full transaction details')).toBeInTheDocument();
 
     expect(queryByText('Edit Permission')).toBeInTheDocument();
     const editPermission = getByText('Edit Permission');
@@ -73,14 +73,15 @@ describe('ConfirmApproveContent Component', () => {
     fireEvent.click(editButtons[1]);
     expect(props.showCustomizeNonceModal).toHaveBeenCalledTimes(1);
 
-    const showHideTxDetails = 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(showHideTxDetails);
+    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();
+    expect(queryByText('Permission request')).not.toBeInTheDocument();
+    expect(queryByText('Approved amount:')).not.toBeInTheDocument();
+    expect(queryByText('Granted to:')).not.toBeInTheDocument();
     expect(getByText('0x9bc5...fef4')).toBeInTheDocument();
   });
 });