wip

ui/pages/confirmations/components/confirm/header/header.tsx

@@ -26,33 +26,20 @@ import { DAppInitiatedHeader } from './dapp-initiated-header';
 import HeaderInfo from './header-info';
 import { WalletInitiatedHeader } from './wallet-initiated-header';
 
+const CONFIRMATIONS_WITH_NEW_HEADER = [
+  TransactionType.tokenMethodTransfer,
+  TransactionType.tokenMethodTransferFrom,
+  TransactionType.tokenMethodSafeTransferFrom,
+];
+
 const Header = () => {
   const { networkImageUrl, networkDisplayName } = useConfirmationNetworkInfo();
   const { senderAddress: fromAddress, senderName: fromName } =
     useConfirmationRecipientInfo();
 
   const { currentConfirmation } = useConfirmContext<Confirmation>();
 
-  const CONFIRMATIONS_WITH_NEW_HEADER = [
-    TransactionType.tokenMethodTransfer,
-    TransactionType.tokenMethodTransferFrom,
-    TransactionType.tokenMethodSafeTransferFrom,
-  ];
-
-  if (
-    currentConfirmation?.type &&
-    CONFIRMATIONS_WITH_NEW_HEADER.includes(currentConfirmation.type)
-  ) {
-    const isWalletInitiated =
-      (currentConfirmation as TransactionMeta).origin === 'metamask';
-
-    if (isWalletInitiated) {
-      return <WalletInitiatedHeader />;
-    }
-    return <DAppInitiatedHeader />;
-  }
-
-  return (
+  const DefaultHeader = (
     <Box
       display={Display.Flex}
       className="confirm_header__wrapper"
@@ -92,6 +79,22 @@ const Header = () => {
       </Box>
     </Box>
   );
+
+  // The new header includes only a heading, the advanced details toggle, and a
+  // back button if it's a wallet initiated confirmation. The default header is
+  // the original header for the redesigns and includes the sender and recipient
+  // addresses as well.
+  const isConfirmationWithNewHeader =
+    currentConfirmation?.type &&
+    CONFIRMATIONS_WITH_NEW_HEADER.includes(currentConfirmation.type);
+  const isWalletInitiated =
+    (currentConfirmation as TransactionMeta)?.origin === 'metamask';
+  if (isConfirmationWithNewHeader && isWalletInitiated) {
+    return <WalletInitiatedHeader />;
+  } else if (isConfirmationWithNewHeader && !isWalletInitiated) {
+    return <DAppInitiatedHeader />;
+  }
+  return DefaultHeader;
 };
 
 export default Header;

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

@@ -13,7 +13,7 @@ exports[`TokenTransferInfo renders correctly 1`] = `
     <h2
       class="mm-box mm-text mm-text--heading-lg mm-box--margin-top-3 mm-box--color-inherit"
     >
-      0 Unknown
+       Unknown
     </h2>
   </div>
   <div