UX: Multichain: Convert AccountDetails Popover to Modal (#19811)

* UX: Multichain: Convert AccountDetails Popover to Modal

* Fix E2E

* updated spec file

---------

Co-authored-by: NidhiKJha <menidhikjha@gmail.com>

test/e2e/tests/import-flow.spec.js

@@ -51,14 +51,14 @@ describe('Import flow', function () {
         await driver.findVisibleElement('.qr-code__wrapper');
 
         // shows a QR code for the account
-        await driver.findVisibleElement('.popover-container');
+        await driver.findVisibleElement('.mm-modal');
         // shows the correct account address
         const address = await driver.findElement(
           '.multichain-address-copy-button',
         );
         assert.equal(await address.getText(), '0x0Cc...afD3');
 
-        await driver.clickElement('[data-testid="popover-close"]');
+        await driver.clickElement('.mm-modal button[aria-label="Close"]');
 
         // logs out of the account
         await driver.clickElement(

test/e2e/tests/incremental-security.spec.js

@@ -78,8 +78,8 @@ describe('Incremental Security', function () {
         const publicAddress = await address.getText();
 
         // wait for account modal to be visible
-        const accountModal = await driver.findVisibleElement('.popover-bg');
-        await driver.clickElement('[data-testid="popover-close"]');
+        const accountModal = await driver.findVisibleElement('.mm-modal');
+        await driver.clickElement('.mm-modal button[aria-label="Close"]');
 
         // wait for account modal to be removed from DOM
         await accountModal.waitForElementState('hidden');

ui/components/multichain/account-details/account-details.js

@@ -1,7 +1,6 @@
 import React, { useCallback, useState } from 'react';
 import PropTypes from 'prop-types';
 import { useDispatch, useSelector } from 'react-redux';
-import Popover from '../../ui/popover/popover.component';
 import {
   setAccountDetailsAddress,
   clearAccountDetails,
@@ -11,9 +10,10 @@ import {
   AvatarAccount,
   AvatarAccountSize,
   AvatarAccountVariant,
-  ButtonIcon,
-  IconName,
-  PopoverHeader,
+  Modal,
+  ModalContent,
+  ModalHeader,
+  ModalOverlay,
   Text,
   Box,
 } from '../../component-library';
@@ -21,9 +21,7 @@ import { getMetaMaskAccountsOrdered } from '../../../selectors';
 import { useI18nContext } from '../../../hooks/useI18nContext';
 import {
   AlignItems,
-  JustifyContent,
   TextVariant,
-  Size,
   Display,
   FlexDirection,
 } from '../../../helpers/constants/design-system';
@@ -61,48 +59,27 @@ export const AccountDetails = ({ address }) => {
       }
       address={address}
       size={AvatarAccountSize.Lg}
+      style={{ margin: '0 auto' }}
     />
   );
 
   return (
-    <Popover
-      headerProps={{
-        paddingBottom: 1,
-      }}
-      contentProps={{
-        paddingLeft: 4,
-        paddingRight: 4,
-        paddingBottom: 4,
-      }}
-      title={
-        attemptingExport ? (
-          <PopoverHeader
-            startAccessory={
-              <ButtonIcon
-                onClick={() => {
+    <Modal isOpen onClose={onClose}>
+      <ModalOverlay />
+      <ModalContent>
+        <ModalHeader
+          onClose={onClose}
+          onBack={
+            attemptingExport
+              ? () => {
                   dispatch(hideWarning());
                   setAttemptingExport(false);
-                }}
-                iconName={IconName.ArrowLeft}
-                size={Size.SM}
-              />
+                }
+              : null
           }
         >
-            {t('showPrivateKey')}
-          </PopoverHeader>
-        ) : (
-          <PopoverHeader
-            childrenWrapperProps={{
-              display: Display.Text,
-              justifyContent: JustifyContent.center,
-            }}
-          >
-            <Box paddingLeft={6}>{avatar}</Box>
-          </PopoverHeader>
-        )
-      }
-      onClose={onClose}
-    >
+          {attemptingExport ? t('showPrivateKey') : avatar}
+        </ModalHeader>
         {attemptingExport ? (
           <>
             <Box
@@ -128,7 +105,10 @@ export const AccountDetails = ({ address }) => {
                 privateKey={privateKey}
               />
             ) : (
-            <AccountDetailsAuthenticate address={address} onCancel={onClose} />
+              <AccountDetailsAuthenticate
+                address={address}
+                onCancel={onClose}
+              />
             )}
           </>
         ) : (
@@ -139,7 +119,8 @@ export const AccountDetails = ({ address }) => {
             onExportClick={() => setAttemptingExport(true)}
           />
         )}
-    </Popover>
+      </ModalContent>
+    </Modal>
   );
 };