From 181634e9aecc8bf4c2d7dc4d908309a582c4cba0 Mon Sep 17 00:00:00 2001
From: Pedro Figueiredo <pedro.figueiredo@consensys.net>
Date: Wed, 16 Oct 2024 12:02:47 +0100
Subject: [PATCH] Address PR review

---
 .../confirm/info/approve/approve.tsx          |  8 +--
 .../base-transaction-info.tsx                 |  8 +--
 .../set-approval-for-all-info.tsx             |  8 +--
 .../advanced-details.test.tsx.snap            | 23 +++-----
 .../advanced-details.test.tsx                 | 45 ++++++++++++--
 .../advanced-details/advanced-details.tsx     | 15 ++++-
 .../name-or-address-display.test.tsx.snap     | 59 -------------------
 .../transaction-flow-section.test.tsx.snap    | 53 +++++++++++++++++
 .../name-or-address-display.test.tsx          | 26 --------
 .../name-or-address-display.tsx               | 59 -------------------
 .../token-transfer/token-details-section.tsx  |  7 +--
 .../token-transfer/token-transfer.stories.tsx | 18 +++++-
 .../info/token-transfer/token-transfer.tsx    |  8 +--
 .../transaction-flow-section.test.tsx         | 48 +++++++++++++++
 .../transaction-flow-section.tsx              | 18 ++++--
 15 files changed, 196 insertions(+), 207 deletions(-)
 delete mode 100644 ui/pages/confirmations/components/confirm/info/token-transfer/__snapshots__/name-or-address-display.test.tsx.snap
 create mode 100644 ui/pages/confirmations/components/confirm/info/token-transfer/__snapshots__/transaction-flow-section.test.tsx.snap
 delete mode 100644 ui/pages/confirmations/components/confirm/info/token-transfer/name-or-address-display.test.tsx
 delete mode 100644 ui/pages/confirmations/components/confirm/info/token-transfer/name-or-address-display.tsx
 create mode 100644 ui/pages/confirmations/components/confirm/info/token-transfer/transaction-flow-section.test.tsx

diff --git a/ui/pages/confirmations/components/confirm/info/approve/approve.tsx b/ui/pages/confirmations/components/confirm/info/approve/approve.tsx
index eabf8639ccfb..fed03a75e17e 100644
--- a/ui/pages/confirmations/components/confirm/info/approve/approve.tsx
+++ b/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}
diff --git a/ui/pages/confirmations/components/confirm/info/base-transaction-info/base-transaction-info.tsx b/ui/pages/confirmations/components/confirm/info/base-transaction-info/base-transaction-info.tsx
index a1ed4a1e43dc..fc58008d7784 100644
--- a/ui/pages/confirmations/components/confirm/info/base-transaction-info/base-transaction-info.tsx
+++ b/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 />
     </>
   );
 };
diff --git a/ui/pages/confirmations/components/confirm/info/set-approval-for-all-info/set-approval-for-all-info.tsx b/ui/pages/confirmations/components/confirm/info/set-approval-for-all-info/set-approval-for-all-info.tsx
index 92df913783a1..6902a6da9b1f 100644
--- a/ui/pages/confirmations/components/confirm/info/set-approval-for-all-info/set-approval-for-all-info.tsx
+++ b/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 />
     </>
   );
 };
diff --git a/ui/pages/confirmations/components/confirm/info/shared/advanced-details/__snapshots__/advanced-details.test.tsx.snap b/ui/pages/confirmations/components/confirm/info/shared/advanced-details/__snapshots__/advanced-details.test.tsx.snap
index f66db615defe..3a93bae1e26d 100644
--- a/ui/pages/confirmations/components/confirm/info/shared/advanced-details/__snapshots__/advanced-details.test.tsx.snap
+++ b/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>
diff --git a/ui/pages/confirmations/components/confirm/info/shared/advanced-details/advanced-details.test.tsx b/ui/pages/confirmations/components/confirm/info/shared/advanced-details/advanced-details.test.tsx
index b965e2015895..60512441e77d 100644
--- a/ui/pages/confirmations/components/confirm/info/shared/advanced-details/advanced-details.test.tsx
+++ b/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();
+  });
 });
diff --git a/ui/pages/confirmations/components/confirm/info/shared/advanced-details/advanced-details.tsx b/ui/pages/confirmations/components/confirm/info/shared/advanced-details/advanced-details.tsx
index 7e0cee721bb8..ebb0f69d75c1 100644
--- a/ui/pages/confirmations/components/confirm/info/shared/advanced-details/advanced-details.tsx
+++ b/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 />
diff --git a/ui/pages/confirmations/components/confirm/info/token-transfer/__snapshots__/name-or-address-display.test.tsx.snap b/ui/pages/confirmations/components/confirm/info/token-transfer/__snapshots__/name-or-address-display.test.tsx.snap
deleted file mode 100644
index 4aa8fad70e26..000000000000
--- a/ui/pages/confirmations/components/confirm/info/token-transfer/__snapshots__/name-or-address-display.test.tsx.snap
+++ /dev/null
@@ -1,59 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`NameOrAddressDisplay renders correctly 1`] = `
-<div>
-  <div
-    class="mm-box mm-box--display-flex mm-box--flex-direction-row mm-box--align-items-center"
-  >
-    <div
-      class="mm-box mm-text mm-avatar-base mm-avatar-base--size-xs mm-avatar-account mm-text--body-xs mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-alternative mm-box--rounded-full mm-box--border-color-transparent box--border-style-solid box--border-width-1"
-    >
-      <div
-        class="mm-avatar-account__jazzicon"
-      >
-        <div
-          style="border-radius: 50px; overflow: hidden; padding: 0px; margin: 0px; width: 16px; height: 16px; display: inline-block; background: rgb(1, 121, 142);"
-        >
-          <svg
-            height="16"
-            width="16"
-            x="0"
-            y="0"
-          >
-            <rect
-              fill="#F5E000"
-              height="16"
-              transform="translate(-1.1691021707883256 -4.615852707363339) rotate(318.6 8 8)"
-              width="16"
-              x="0"
-              y="0"
-            />
-            <rect
-              fill="#1881F2"
-              height="16"
-              transform="translate(0.31329425325262034 -5.330574883433899) rotate(399.1 8 8)"
-              width="16"
-              x="0"
-              y="0"
-            />
-            <rect
-              fill="#234FE1"
-              height="16"
-              transform="translate(2.705792259754136 -12.770998732484898) rotate(402.4 8 8)"
-              width="16"
-              x="0"
-              y="0"
-            />
-          </svg>
-        </div>
-      </div>
-    </div>
-    <p
-      class="mm-box mm-text mm-text--body-md mm-box--margin-left-2 mm-box--color-inherit"
-      data-testid="confirm-info-row-display-name"
-    >
-      0x388C8...19297
-    </p>
-  </div>
-</div>
-`;
diff --git a/ui/pages/confirmations/components/confirm/info/token-transfer/__snapshots__/transaction-flow-section.test.tsx.snap b/ui/pages/confirmations/components/confirm/info/token-transfer/__snapshots__/transaction-flow-section.test.tsx.snap
new file mode 100644
index 000000000000..23cddb2b59b2
--- /dev/null
+++ b/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>
+`;
diff --git a/ui/pages/confirmations/components/confirm/info/token-transfer/name-or-address-display.test.tsx b/ui/pages/confirmations/components/confirm/info/token-transfer/name-or-address-display.test.tsx
deleted file mode 100644
index d6726d758e0d..000000000000
--- a/ui/pages/confirmations/components/confirm/info/token-transfer/name-or-address-display.test.tsx
+++ /dev/null
@@ -1,26 +0,0 @@
-import React from 'react';
-import configureMockStore from 'redux-mock-store';
-import { getMockTokenTransferConfirmState } from '../../../../../../../test/data/confirmations/helper';
-import { renderWithConfirmContextProvider } from '../../../../../../../test/lib/confirmations/render-helpers';
-import { NameOrAddressDisplay } from './name-or-address-display';
-
-jest.mock(
-  '../../../../../../components/app/alert-system/contexts/alertMetricsContext',
-  () => ({
-    useAlertMetrics: jest.fn(() => ({
-      trackAlertMetrics: jest.fn(),
-    })),
-  }),
-);
-
-describe('NameOrAddressDisplay', () => {
-  it('renders correctly', () => {
-    const state = getMockTokenTransferConfirmState({});
-    const mockStore = configureMockStore([])(state);
-    const { container } = renderWithConfirmContextProvider(
-      <NameOrAddressDisplay address="0x388C818CA8B9251b393131C08a736A67ccB19297" />,
-      mockStore,
-    );
-    expect(container).toMatchSnapshot();
-  });
-});
diff --git a/ui/pages/confirmations/components/confirm/info/token-transfer/name-or-address-display.tsx b/ui/pages/confirmations/components/confirm/info/token-transfer/name-or-address-display.tsx
deleted file mode 100644
index 6b8b7de3a86d..000000000000
--- a/ui/pages/confirmations/components/confirm/info/token-transfer/name-or-address-display.tsx
+++ /dev/null
@@ -1,59 +0,0 @@
-import { NameType } from '@metamask/name-controller';
-import React, { useState } from 'react';
-import { useSelector } from 'react-redux';
-import { useFallbackDisplayName } from '../../../../../../components/app/confirm/info/row/hook';
-import NicknamePopovers from '../../../../../../components/app/modals/nickname-popovers';
-import Name from '../../../../../../components/app/name';
-import {
-  AvatarAccount,
-  AvatarAccountSize,
-  Box,
-  Text,
-} from '../../../../../../components/component-library';
-import {
-  AlignItems,
-  BorderColor,
-  Display,
-  FlexDirection,
-  TextColor,
-} from '../../../../../../helpers/constants/design-system';
-import { getPetnamesEnabled } from '../../../../../../selectors';
-
-export const NameOrAddressDisplay = ({ address }: { address: string }) => {
-  const isPetNamesEnabled = useSelector(getPetnamesEnabled);
-  const { displayName, hexAddress } = useFallbackDisplayName(address);
-  const [isNicknamePopoverShown, setIsNicknamePopoverShown] = useState(false);
-  const handleDisplayNameClick = () => setIsNicknamePopoverShown(true);
-  const onCloseHandler = () => setIsNicknamePopoverShown(false);
-
-  if (isPetNamesEnabled) {
-    return <Name value={hexAddress} type={NameType.ETHEREUM_ADDRESS} />;
-  }
-
-  return (
-    <>
-      <Box
-        display={Display.Flex}
-        flexDirection={FlexDirection.Row}
-        alignItems={AlignItems.center}
-        onClick={handleDisplayNameClick}
-      >
-        <AvatarAccount
-          address={address}
-          size={AvatarAccountSize.Xs}
-          borderColor={BorderColor.transparent}
-        />
-        <Text
-          marginLeft={2}
-          color={TextColor.inherit}
-          data-testid="confirm-info-row-display-name"
-        >
-          {displayName}
-        </Text>
-      </Box>
-      {isNicknamePopoverShown ? (
-        <NicknamePopovers onClose={onCloseHandler} address={hexAddress} />
-      ) : null}
-    </>
-  );
-};
diff --git a/ui/pages/confirmations/components/confirm/info/token-transfer/token-details-section.tsx b/ui/pages/confirmations/components/confirm/info/token-transfer/token-details-section.tsx
index a5b6726bd019..48a5f2dad74c 100644
--- a/ui/pages/confirmations/components/confirm/info/token-transfer/token-details-section.tsx
+++ b/ui/pages/confirmations/components/confirm/info/token-transfer/token-details-section.tsx
@@ -23,10 +23,7 @@ import {
   TextVariant,
 } from '../../../../../../helpers/constants/design-system';
 import { useI18nContext } from '../../../../../../hooks/useI18nContext';
-import {
-  getCurrentChainId,
-  getNetworkConfigurationsByChainId,
-} from '../../../../../../selectors';
+import { getNetworkConfigurationsByChainId } from '../../../../../../selectors';
 import { useConfirmContext } from '../../../../context/confirm';
 
 export const TokenDetailsSection = () => {
@@ -34,7 +31,7 @@ export const TokenDetailsSection = () => {
   const { currentConfirmation: transactionMeta } =
     useConfirmContext<TransactionMeta>();
 
-  const chainId = useSelector(getCurrentChainId);
+  const { chainId } = transactionMeta;
   const networkConfigurations = useSelector(getNetworkConfigurationsByChainId);
   const networkName = networkConfigurations[chainId].name;
 
diff --git a/ui/pages/confirmations/components/confirm/info/token-transfer/token-transfer.stories.tsx b/ui/pages/confirmations/components/confirm/info/token-transfer/token-transfer.stories.tsx
index 384a8f161e9b..1cb5f3b40ab2 100644
--- a/ui/pages/confirmations/components/confirm/info/token-transfer/token-transfer.stories.tsx
+++ b/ui/pages/confirmations/components/confirm/info/token-transfer/token-transfer.stories.tsx
@@ -1,6 +1,13 @@
 import React from 'react';
 import { Provider } from 'react-redux';
 import { getMockTokenTransferConfirmState } from '../../../../../../../test/data/confirmations/helper';
+import { Box } from '../../../../../../components/component-library';
+import {
+  AlignItems,
+  Display,
+  FlexDirection,
+  JustifyContent,
+} from '../../../../../../helpers/constants/design-system';
 import configureStore from '../../../../../../store/store';
 import { ConfirmContextProvider } from '../../../../context/confirm';
 import TokenTransferInfo from './token-transfer';
@@ -13,7 +20,16 @@ const Story = {
   decorators: [
     (story: () => any) => (
       <Provider store={store}>
-        <ConfirmContextProvider>{story()}</ConfirmContextProvider>
+        <ConfirmContextProvider>
+          <Box
+            display={Display.Flex}
+            justifyContent={JustifyContent.center}
+            alignItems={AlignItems.center}
+            flexDirection={FlexDirection.Column}
+          >
+            {story()}
+          </Box>
+        </ConfirmContextProvider>
       </Provider>
     ),
   ],
diff --git a/ui/pages/confirmations/components/confirm/info/token-transfer/token-transfer.tsx b/ui/pages/confirmations/components/confirm/info/token-transfer/token-transfer.tsx
index 0f0649659467..9c0dfe81f536 100644
--- a/ui/pages/confirmations/components/confirm/info/token-transfer/token-transfer.tsx
+++ b/ui/pages/confirmations/components/confirm/info/token-transfer/token-transfer.tsx
@@ -1,6 +1,4 @@
 import React from 'react';
-import { useSelector } from 'react-redux';
-import { selectConfirmationAdvancedDetailsOpen } from '../../../../selectors/preferences';
 import { AdvancedDetails } from '../shared/advanced-details/advanced-details';
 import { GasFeesSection } from '../shared/gas-fees-section/gas-fees-section';
 import SendHeading from '../shared/send-heading/send-heading';
@@ -8,17 +6,13 @@ import { TokenDetailsSection } from './token-details-section';
 import { TransactionFlowSection } from './transaction-flow-section';
 
 const TokenTransferInfo = () => {
-  const showAdvancedDetails = useSelector(
-    selectConfirmationAdvancedDetailsOpen,
-  );
-
   return (
     <>
       <SendHeading />
       <TransactionFlowSection />
       <TokenDetailsSection />
       <GasFeesSection />
-      {showAdvancedDetails && <AdvancedDetails />}
+      <AdvancedDetails />
     </>
   );
 };
diff --git a/ui/pages/confirmations/components/confirm/info/token-transfer/transaction-flow-section.test.tsx b/ui/pages/confirmations/components/confirm/info/token-transfer/transaction-flow-section.test.tsx
new file mode 100644
index 000000000000..c23d3645abd3
--- /dev/null
+++ b/ui/pages/confirmations/components/confirm/info/token-transfer/transaction-flow-section.test.tsx
@@ -0,0 +1,48 @@
+import { TransactionType } from '@metamask/transaction-controller';
+import React from 'react';
+import configureMockStore from 'redux-mock-store';
+import { getMockTokenTransferConfirmState } from '../../../../../../../test/data/confirmations/helper';
+import { renderWithConfirmContextProvider } from '../../../../../../../test/lib/confirmations/render-helpers';
+import { useDecodedTransactionData } from '../hooks/useDecodedTransactionData';
+import { TransactionFlowSection } from './transaction-flow-section';
+
+jest.mock('../hooks/useDecodedTransactionData', () => ({
+  ...jest.requireActual('../hooks/useDecodedTransactionData'),
+  useDecodedTransactionData: jest.fn(),
+}));
+
+describe('<TransactionFlowSection />', () => {
+  const useDecodedTransactionDataMock = jest.fn().mockImplementation(() => ({
+    pending: false,
+    value: {
+      data: [
+        {
+          name: TransactionType.tokenMethodTransfer,
+          params: [
+            {
+              name: 'dst',
+              type: 'address',
+              value: '0x6B175474E89094C44Da98b954EedeAC495271d0F',
+            },
+            { name: 'wad', type: 'uint256', value: 0 },
+          ],
+        },
+      ],
+      source: 'Sourcify',
+    },
+  }));
+
+  (useDecodedTransactionData as jest.Mock).mockImplementation(
+    useDecodedTransactionDataMock,
+  );
+
+  it('renders correctly', () => {
+    const state = getMockTokenTransferConfirmState({});
+    const mockStore = configureMockStore([])(state);
+    const { container } = renderWithConfirmContextProvider(
+      <TransactionFlowSection />,
+      mockStore,
+    );
+    expect(container).toMatchSnapshot();
+  });
+});
diff --git a/ui/pages/confirmations/components/confirm/info/token-transfer/transaction-flow-section.tsx b/ui/pages/confirmations/components/confirm/info/token-transfer/transaction-flow-section.tsx
index cd195d2c4e38..de0e928c10f8 100644
--- a/ui/pages/confirmations/components/confirm/info/token-transfer/transaction-flow-section.tsx
+++ b/ui/pages/confirmations/components/confirm/info/token-transfer/transaction-flow-section.tsx
@@ -1,6 +1,8 @@
+import { NameType } from '@metamask/name-controller';
 import { TransactionMeta } from '@metamask/transaction-controller';
 import React from 'react';
 import { ConfirmInfoSection } from '../../../../../../components/app/confirm/info/row/section';
+import Name from '../../../../../../components/app/name';
 import {
   Box,
   Icon,
@@ -17,7 +19,6 @@ import {
 import { useConfirmContext } from '../../../../context/confirm';
 import { useDecodedTransactionData } from '../hooks/useDecodedTransactionData';
 import { ConfirmLoader } from '../shared/confirm-loader/confirm-loader';
-import { NameOrAddressDisplay } from './name-or-address-display';
 
 export const TransactionFlowSection = () => {
   const { currentConfirmation: transactionMeta } =
@@ -25,9 +26,9 @@ export const TransactionFlowSection = () => {
 
   const { value, pending } = useDecodedTransactionData();
 
-  const recipientAddress =
-    value?.data[0].params.find((param) => param.type === 'address')?.value ||
-    '0x0000000000000000000000000000000000000000';
+  const recipientAddress = value?.data[0].params.find(
+    (param) => param.type === 'address',
+  )?.value;
 
   if (pending) {
     return <ConfirmLoader />;
@@ -42,13 +43,18 @@ export const TransactionFlowSection = () => {
         alignItems={AlignItems.center}
         padding={3}
       >
-        <NameOrAddressDisplay address={transactionMeta.txParams.from} />
+        <Name
+          value={transactionMeta.txParams.from}
+          type={NameType.ETHEREUM_ADDRESS}
+        />
         <Icon
           name={IconName.ArrowRight}
           size={IconSize.Md}
           color={IconColor.iconMuted}
         />
-        <NameOrAddressDisplay address={recipientAddress} />
+        {recipientAddress && (
+          <Name value={recipientAddress} type={NameType.ETHEREUM_ADDRESS} />
+        )}
       </Box>
     </ConfirmInfoSection>
   );