Replacing deprecated Popover with Modal (#19784)

* Replacing deprecated Popover with Modal

* Fix Jest error

ui/components/app/cancel-speedup-popover/cancel-speedup-popover.js

@@ -16,9 +16,16 @@ import EditGasFeeButton from '../edit-gas-fee-button';
 import GasDetailsItem from '../gas-details-item';
 import Box from '../../ui/box';
 import InfoTooltip from '../../ui/info-tooltip';
-import Popover from '../../ui/popover';
 import AppLoadingSpinner from '../app-loading-spinner';
-import { Button, ButtonLink, Text } from '../../component-library';
+import {
+  Text,
+  Button,
+  ButtonLink,
+  Modal,
+  ModalOverlay,
+  ModalContent,
+  ModalHeader,
+} from '../../component-library';
 
 const CancelSpeedupPopover = () => {
   const {
@@ -82,17 +89,22 @@ const CancelSpeedupPopover = () => {
   };
 
   return (
-    <Popover
-      title={
-        <>
-          {editGasMode === EditGasModes.cancel
-            ? `❌${t('cancel')}`
-            : `🚀${t('speedUp')}`}
-        </>
-      }
+    <Modal
+      isOpen
       onClose={() => closeModal(['cancelSpeedUpTransaction'])}
       className="cancel-speedup-popover"
     >
+      <ModalOverlay />
+      <ModalContent>
+        <ModalHeader
+          onClose={() => closeModal(['cancelSpeedUpTransaction'])}
+          marginBottom={4}
+        >
+          {editGasMode === EditGasModes.cancel
+            ? `❌${t('cancel')}`
+            : `🚀${t('speedUp')}`}
+        </ModalHeader>
+
         <AppLoadingSpinner className="cancel-speedup-popover__spinner" />
         <div className="cancel-speedup-popover__wrapper">
           <Text
@@ -143,7 +155,8 @@ const CancelSpeedupPopover = () => {
           </Box>
           <Button onClick={submitTransactionChange}>{t('submit')}</Button>
         </div>
-    </Popover>
+      </ModalContent>
+    </Modal>
   );
 };