From 1bf2cfff3b3622e15554948e36c04dc6fde07a03 Mon Sep 17 00:00:00 2001
From: OGPoyraz <omergoktugpoyraz@gmail.com>
Date: Fri, 10 Jan 2025 10:01:27 +0100
Subject: [PATCH] fix signature unwanted empty div

---
 .../smart-transactions-banner-alert.tsx       | 45 ++++++++++---------
 .../__snapshots__/confirm.test.tsx.snap       | 24 ----------
 ui/pages/confirmations/confirm/confirm.tsx    |  5 +--
 3 files changed, 25 insertions(+), 49 deletions(-)

diff --git a/ui/pages/confirmations/components/smart-transactions-banner-alert/smart-transactions-banner-alert.tsx b/ui/pages/confirmations/components/smart-transactions-banner-alert/smart-transactions-banner-alert.tsx
index e9f28a25c318..c22d9d98d5b6 100644
--- a/ui/pages/confirmations/components/smart-transactions-banner-alert/smart-transactions-banner-alert.tsx
+++ b/ui/pages/confirmations/components/smart-transactions-banner-alert/smart-transactions-banner-alert.tsx
@@ -18,6 +18,7 @@ import {
   getSmartTransactionsOptInStatusInternal,
   getSmartTransactionsMigrationAppliedInternal,
 } from '../../../../../shared/modules/selectors/smart-transactions';
+import { Box } from '../../../../components/component-library';
 
 type MarginType = 'default' | 'none' | 'noTop' | 'onlyTop';
 
@@ -95,27 +96,29 @@ export const SmartTransactionsBannerAlert: React.FC<SmartTransactionsBannerAlert
     };
 
     return (
-      <BannerAlert
-        severity={BannerAlertSeverity.Info}
-        onClose={dismissAlert}
-        data-testid="smart-transactions-banner-alert"
-        style={getMarginStyle()}
-      >
-        <Text fontWeight={FontWeight.Bold}>
-          {t('smartTransactionsEnabledTitle')}
-        </Text>
-        <Text as="p">
-          <ButtonLink
-            href={SMART_TRANSACTIONS_LEARN_MORE_URL}
-            onClick={dismissAlert}
-            externalLink
-            style={{ height: 'unset', verticalAlign: 'unset' }}
-          >
-            {t('smartTransactionsEnabledLink')}
-          </ButtonLink>
-          {t('smartTransactionsEnabledDescription')}
-        </Text>
-      </BannerAlert>
+      <Box className="transaction-alerts">
+        <BannerAlert
+          severity={BannerAlertSeverity.Info}
+          onClose={dismissAlert}
+          data-testid="smart-transactions-banner-alert"
+          style={getMarginStyle()}
+        >
+          <Text fontWeight={FontWeight.Bold}>
+            {t('smartTransactionsEnabledTitle')}
+          </Text>
+          <Text as="p">
+            <ButtonLink
+              href={SMART_TRANSACTIONS_LEARN_MORE_URL}
+              onClick={dismissAlert}
+              externalLink
+              style={{ height: 'unset', verticalAlign: 'unset' }}
+            >
+              {t('smartTransactionsEnabledLink')}
+            </ButtonLink>
+            {t('smartTransactionsEnabledDescription')}
+          </Text>
+        </BannerAlert>
+      </Box>
     );
   });
 
diff --git a/ui/pages/confirmations/confirm/__snapshots__/confirm.test.tsx.snap b/ui/pages/confirmations/confirm/__snapshots__/confirm.test.tsx.snap
index 85c6e24b3d78..f528654a4525 100644
--- a/ui/pages/confirmations/confirm/__snapshots__/confirm.test.tsx.snap
+++ b/ui/pages/confirmations/confirm/__snapshots__/confirm.test.tsx.snap
@@ -116,9 +116,6 @@ exports[`Confirm matches snapshot for signature - personal sign type 1`] = `
           </div>
         </div>
       </div>
-      <div
-        class="mm-box transaction-alerts"
-      />
       <div
         class="mm-box mm-box--width-full mm-box--height-full mm-box--background-color-background-alternative"
         style="min-height: 0; overflow: hidden; position: relative;"
@@ -374,9 +371,6 @@ exports[`Confirm should match snapshot for signature - typed sign - V4 - PermitB
           </div>
         </div>
       </div>
-      <div
-        class="mm-box transaction-alerts"
-      />
       <div
         class="mm-box mm-box--width-full mm-box--height-full mm-box--background-color-background-alternative"
         style="min-height: 0; overflow: hidden; position: relative;"
@@ -960,9 +954,6 @@ exports[`Confirm should match snapshot for signature - typed sign - V4 - PermitS
           </div>
         </div>
       </div>
-      <div
-        class="mm-box transaction-alerts"
-      />
       <div
         class="mm-box mm-box--width-full mm-box--height-full mm-box--background-color-background-alternative"
         style="min-height: 0; overflow: hidden; position: relative;"
@@ -1495,9 +1486,6 @@ exports[`Confirm should match snapshot for signature - typed sign - V4 1`] = `
           </div>
         </div>
       </div>
-      <div
-        class="mm-box transaction-alerts"
-      />
       <div
         class="mm-box mm-box--width-full mm-box--height-full mm-box--background-color-background-alternative"
         style="min-height: 0; overflow: hidden; position: relative;"
@@ -2515,9 +2503,6 @@ exports[`Confirm should match snapshot for signature - typed sign - permit 1`] =
           </div>
         </div>
       </div>
-      <div
-        class="mm-box transaction-alerts"
-      />
       <div
         class="mm-box mm-box--width-full mm-box--height-full mm-box--background-color-background-alternative"
         style="min-height: 0; overflow: hidden; position: relative;"
@@ -3044,9 +3029,6 @@ exports[`Confirm should match snapshot signature - typed sign - order 1`] = `
           </div>
         </div>
       </div>
-      <div
-        class="mm-box transaction-alerts"
-      />
       <div
         class="mm-box mm-box--width-full mm-box--height-full mm-box--background-color-background-alternative"
         style="min-height: 0; overflow: hidden; position: relative;"
@@ -3870,9 +3852,6 @@ exports[`Confirm should render SmartTransactionsBannerAlert for transaction type
           </div>
         </div>
       </div>
-      <div
-        class="mm-box transaction-alerts"
-      />
       <div
         class="mm-box mm-box--width-full mm-box--height-full mm-box--background-color-background-alternative"
         style="min-height: 0; overflow: hidden; position: relative;"
@@ -3987,9 +3966,6 @@ exports[`Confirm should render SmartTransactionsBannerAlert for transaction type
           </div>
         </div>
       </div>
-      <div
-        class="mm-box transaction-alerts"
-      />
       <div
         class="mm-box mm-box--width-full mm-box--height-full mm-box--background-color-background-alternative"
         style="min-height: 0; overflow: hidden; position: relative;"
diff --git a/ui/pages/confirmations/confirm/confirm.tsx b/ui/pages/confirmations/confirm/confirm.tsx
index 094c8040a5aa..9a8ba4c48fed 100644
--- a/ui/pages/confirmations/confirm/confirm.tsx
+++ b/ui/pages/confirmations/confirm/confirm.tsx
@@ -23,7 +23,6 @@ import { Title } from '../components/confirm/title';
 import EditGasFeePopover from '../components/edit-gas-fee-popover';
 import { ConfirmContextProvider, useConfirmContext } from '../context/confirm';
 import { ConfirmNav } from '../components/confirm/nav/nav';
-import { Box } from '../../../components/component-library';
 
 const EIP1559TransactionGasModal = () => {
   return (
@@ -55,9 +54,7 @@ const Confirm = () => (
           <Page className="confirm_wrapper">
             <ConfirmNav />
             <Header />
-            <Box className="transaction-alerts">
-              <SmartTransactionsBannerAlert marginType="noTop" />
-            </Box>
+            <SmartTransactionsBannerAlert marginType="noTop" />
             <ScrollToBottom>
               {
                 ///: BEGIN:ONLY_INCLUDE_IF(build-mmi)