diff --git a/ui/pages/confirmations/components/confirm/header/header.tsx b/ui/pages/confirmations/components/confirm/header/header.tsx index abda93fba510..554667bdb3c5 100644 --- a/ui/pages/confirmations/components/confirm/header/header.tsx +++ b/ui/pages/confirmations/components/confirm/header/header.tsx @@ -26,6 +26,12 @@ 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 } = @@ -33,26 +39,7 @@ const Header = () => { const { currentConfirmation } = useConfirmContext(); - 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 ; - } - return ; - } - - return ( + const DefaultHeader = () => ( { ); + + // 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 ; + } else if (isConfirmationWithNewHeader && !isWalletInitiated) { + return ; + } + return ; }; export default Header;