Address PR review

ui/pages/confirmations/components/confirm/info/approve/approve.tsx

@@ -3,10 +3,8 @@ import {
   TransactionType,
 } from '@metamask/transaction-controller';
 import React, { useState } from 'react';
-import { useSelector } from 'react-redux';
 import { useConfirmContext } from '../../../../context/confirm';
 import { useAssetDetails } from '../../../../hooks/useAssetDetails';
-import { selectConfirmationAdvancedDetailsOpen } from '../../../../selectors/preferences';
 import { AdvancedDetails } from '../shared/advanced-details/advanced-details';
 import { ConfirmLoader } from '../shared/confirm-loader/confirm-loader';
 import { GasFeesSection } from '../shared/gas-fees-section/gas-fees-section';
@@ -24,10 +22,6 @@ const ApproveInfo = () => {
     currentConfirmation: TransactionMeta;
   };
 
-  const showAdvancedDetails = useSelector(
-    selectConfirmationAdvancedDetailsOpen,
-  );
-
   const { isNFT } = useIsNFT(transactionMeta);
 
   const [isOpenEditSpendingCapModal, setIsOpenEditSpendingCapModal] =
@@ -70,7 +64,7 @@ const ApproveInfo = () => {
         />
       )}
       <GasFeesSection />
-      {showAdvancedDetails && <AdvancedDetails />}
+      <AdvancedDetails />
       <EditSpendingCapModal
         isOpenEditSpendingCapModal={isOpenEditSpendingCapModal}
         setIsOpenEditSpendingCapModal={setIsOpenEditSpendingCapModal}

ui/pages/confirmations/components/confirm/info/base-transaction-info/base-transaction-info.tsx

@@ -1,9 +1,7 @@
 import { TransactionMeta } from '@metamask/transaction-controller';
 import React from 'react';
-import { useSelector } from 'react-redux';
 
 import { ConfirmInfoSection } from '../../../../../../components/app/confirm/info/row/section';
-import { selectConfirmationAdvancedDetailsOpen } from '../../../../selectors/preferences';
 import { useConfirmContext } from '../../../../context/confirm';
 import { SimulationDetails } from '../../../simulation-details';
 import { AdvancedDetails } from '../shared/advanced-details/advanced-details';
@@ -14,10 +12,6 @@ const BaseTransactionInfo = () => {
   const { currentConfirmation: transactionMeta } =
     useConfirmContext<TransactionMeta>();
 
-  const showAdvancedDetails = useSelector(
-    selectConfirmationAdvancedDetailsOpen,
-  );
-
   if (!transactionMeta?.txParams) {
     return null;
   }
@@ -33,7 +27,7 @@ const BaseTransactionInfo = () => {
       </ConfirmInfoSection>
       <TransactionDetails />
       <GasFeesSection />
-      {showAdvancedDetails && <AdvancedDetails />}
+      <AdvancedDetails />
     </>
   );
 };

ui/pages/confirmations/components/confirm/info/set-approval-for-all-info/set-approval-for-all-info.tsx

@@ -1,8 +1,6 @@
 import { TransactionMeta } from '@metamask/transaction-controller';
 import React from 'react';
-import { useSelector } from 'react-redux';
 import { useConfirmContext } from '../../../../context/confirm';
-import { selectConfirmationAdvancedDetailsOpen } from '../../../../selectors/preferences';
 import { ApproveDetails } from '../approve/approve-details/approve-details';
 import { useDecodedTransactionData } from '../hooks/useDecodedTransactionData';
 import { AdvancedDetails } from '../shared/advanced-details/advanced-details';
@@ -16,10 +14,6 @@ const SetApprovalForAllInfo = () => {
   const { currentConfirmation: transactionMeta } =
     useConfirmContext<TransactionMeta>();
 
-  const showAdvancedDetails = useSelector(
-    selectConfirmationAdvancedDetailsOpen,
-  );
-
   const decodedResponse = useDecodedTransactionData();
 
   const { value, pending } = decodedResponse;
@@ -45,7 +39,7 @@ const SetApprovalForAllInfo = () => {
       )}
       <ApproveDetails isSetApprovalForAll />
       <GasFeesSection />
-      {showAdvancedDetails && <AdvancedDetails />}
+      <AdvancedDetails />
     </>
   );
 };

ui/pages/confirmations/components/confirm/info/shared/advanced-details/__snapshots__/advanced-details.test.tsx.snap

@@ -1,6 +1,8 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`<AdvancedDetails /> does not render component for advanced transaction details 1`] = `
+exports[`<AdvancedDetails /> does not render component when the state property is false 1`] = `<div />`;
+
+exports[`<AdvancedDetails /> renders component when the prop override is passed 1`] = `
 <div>
   <div
     class="mm-box mm-box--margin-bottom-4 mm-box--padding-2 mm-box--background-color-background-default mm-box--rounded-md"
@@ -23,7 +25,7 @@ exports[`<AdvancedDetails /> does not render component for advanced transaction
           </p>
           <div>
             <div
-              aria-describedby="tippy-tooltip-1"
+              aria-describedby="tippy-tooltip-2"
               class=""
               data-original-title="This is the transaction number of an account. Nonce for the first transaction is 0 and it increases in sequential order."
               data-tooltipped=""
@@ -120,7 +122,7 @@ exports[`<AdvancedDetails /> does not render component for advanced transaction
 </div>
 `;
 
-exports[`<AdvancedDetails /> renders component for advanced transaction details 1`] = `
+exports[`<AdvancedDetails /> renders component when the state property is true 1`] = `
 <div>
   <div
     class="mm-box mm-box--margin-bottom-4 mm-box--padding-2 mm-box--background-color-background-default mm-box--rounded-md"
@@ -143,7 +145,7 @@ exports[`<AdvancedDetails /> renders component for advanced transaction details
           </p>
           <div>
             <div
-              aria-describedby="tippy-tooltip-2"
+              aria-describedby="tippy-tooltip-1"
               class=""
               data-original-title="This is the transaction number of an account. Nonce for the first transaction is 0 and it increases in sequential order."
               data-tooltipped=""
@@ -166,19 +168,8 @@ exports[`<AdvancedDetails /> renders component for advanced transaction details
           class="mm-box mm-text mm-text--body-md mm-box--color-inherit"
           style="white-space: pre-wrap;"
         >
-          12
+          undefined
         </p>
-        <button
-          aria-label="Edit"
-          class="mm-box mm-button-icon mm-button-icon--size-sm edit-nonce-btn mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-default mm-box--background-color-transparent mm-box--rounded-lg"
-          data-testid="edit-nonce-icon"
-          style="margin-left: -4px;"
-        >
-          <span
-            class="mm-box mm-icon mm-icon--size-sm mm-box--display-inline-block mm-box--color-inherit"
-            style="mask-image: url('./images/icons/edit.svg');"
-          />
-        </button>
       </div>
     </div>
   </div>

ui/pages/confirmations/components/confirm/info/shared/advanced-details/advanced-details.test.tsx

@@ -9,8 +9,18 @@ import { AdvancedDetails } from './advanced-details';
 describe('<AdvancedDetails />', () => {
   const middleware = [thunk];
 
-  it('does not render component for advanced transaction details', () => {
-    const state = mockState;
+  it('does not render component when the state property is false', () => {
+    const state = {
+      ...mockState,
+      metamask: {
+        ...mockState.metamask,
+        preferences: {
+          ...mockState.metamask.preferences,
+          showConfirmationAdvancedDetails: false,
+        },
+      },
+    };
+
     const mockStore = configureMockStore(middleware)(state);
     const { container } = renderWithConfirmContextProvider(
       <AdvancedDetails />,
@@ -20,16 +30,18 @@ describe('<AdvancedDetails />', () => {
     expect(container).toMatchSnapshot();
   });
 
-  it('renders component for advanced transaction details', () => {
+  it('renders component when the state property is true', () => {
     const state = {
       ...mockState,
       metamask: {
         ...mockState.metamask,
-        useNonceField: true,
-        nextNonce: 1,
-        customNonceValue: '12',
+        preferences: {
+          ...mockState.metamask.preferences,
+          showConfirmationAdvancedDetails: true,
+        },
       },
     };
+
     const mockStore = configureMockStore(middleware)(state);
     const { container } = renderWithConfirmContextProvider(
       <AdvancedDetails />,
@@ -38,4 +50,25 @@ describe('<AdvancedDetails />', () => {
 
     expect(container).toMatchSnapshot();
   });
+
+  it('renders component when the prop override is passed', () => {
+    const state = {
+      ...mockState,
+      metamask: {
+        ...mockState.metamask,
+        preferences: {
+          ...mockState.metamask.preferences,
+          showConfirmationAdvancedDetails: false,
+        },
+      },
+    };
+
+    const mockStore = configureMockStore(middleware)(state);
+    const { container } = renderWithConfirmContextProvider(
+      <AdvancedDetails overrideVisibility />,
+      mockStore,
+    );
+
+    expect(container).toMatchSnapshot();
+  });
 });

ui/pages/confirmations/components/confirm/info/shared/advanced-details/advanced-details.tsx

@@ -16,6 +16,7 @@ import {
   showModal,
   updateCustomNonce,
 } from '../../../../../../../store/actions';
+import { selectConfirmationAdvancedDetailsOpen } from '../../../../../selectors/preferences';
 import { TransactionData } from '../transaction-data/transaction-data';
 
 const NonceDetails = () => {
@@ -65,7 +66,19 @@ const NonceDetails = () => {
   );
 };
 
-export const AdvancedDetails: React.FC = () => {
+export const AdvancedDetails = ({
+  overrideVisibility = false,
+}: {
+  overrideVisibility?: boolean;
+}) => {
+  const showAdvancedDetails = useSelector(
+    selectConfirmationAdvancedDetailsOpen,
+  );
+
+  if (!overrideVisibility && !showAdvancedDetails) {
+    return null;
+  }
+
   return (
     <>
       <NonceDetails />

ui/pages/confirmations/components/confirm/info/token-transfer/__snapshots__/transaction-flow-section.test.tsx.snap

@@ -0,0 +1,53 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<TransactionFlowSection /> renders correctly 1`] = `
+<div>
+  <div
+    class="mm-box mm-box--margin-bottom-4 mm-box--padding-2 mm-box--background-color-background-default mm-box--rounded-md"
+    data-testid="confirmation__transaction-flow"
+  >
+    <div
+      class="mm-box mm-box--padding-3 mm-box--display-flex mm-box--flex-direction-row mm-box--justify-content-space-between mm-box--align-items-center"
+    >
+      <div
+        class="mm-box mm-box--display-flex"
+      >
+        <div
+          class="name name__missing"
+        >
+          <span
+            class="mm-box name__icon mm-icon mm-icon--size-md mm-box--display-inline-block mm-box--color-inherit"
+            style="mask-image: url('./images/icons/question.svg');"
+          />
+          <p
+            class="mm-box mm-text name__value mm-text--body-md mm-box--color-text-default"
+          >
+            0x2e0D7...5d09B
+          </p>
+        </div>
+      </div>
+      <span
+        class="mm-box mm-icon mm-icon--size-md mm-box--display-inline-block mm-box--color-icon-muted"
+        style="mask-image: url('./images/icons/arrow-right.svg');"
+      />
+      <div
+        class="mm-box mm-box--display-flex"
+      >
+        <div
+          class="name name__missing"
+        >
+          <span
+            class="mm-box name__icon mm-icon mm-icon--size-md mm-box--display-inline-block mm-box--color-inherit"
+            style="mask-image: url('./images/icons/question.svg');"
+          />
+          <p
+            class="mm-box mm-text name__value mm-text--body-md mm-box--color-text-default"
+          >
+            0x6B175...71d0F
+          </p>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;