UX: Multichain: Convert Networks Menu to Modal (#19803)

* UX: Multichain: Convert Networks Menu to Modal

* Fix padding

* Remove dead CSS

* moved show network to bottom

* updated snapshot

---------

Co-authored-by: NidhiKJha <menidhikjha@gmail.com>
Co-authored-by: Nidhi Kumari <nidhi.kumari@consensys.net>

ui/components/multichain/network-list-item/__snapshots__/network-list-item.test.js.snap

@@ -3,7 +3,7 @@
 exports[`NetworkListItem renders properly 1`] = `
 <div>
   <div
-    class="mm-box multichain-network-list-item mm-box--padding-4 mm-box--gap-2 mm-box--justify-content-space-between mm-box--align-items-center mm-box--width-full mm-box--background-color-transparent"
+    class="mm-box multichain-network-list-item mm-box--padding-4 mm-box--display-flex mm-box--gap-2 mm-box--justify-content-space-between mm-box--align-items-center mm-box--width-full mm-box--background-color-transparent"
   >
     <div
       class="box mm-text mm-avatar-base mm-avatar-base--size-md mm-avatar-network mm-text--body-sm mm-text--text-transform-uppercase box--display-flex box--flex-direction-row box--justify-content-center box--align-items-center box--color-text-default box--background-color-background-alternative box--rounded-full box--border-color-transparent box--border-style-solid box--border-width-1"

ui/components/multichain/network-list-item/network-list-item.js

@@ -11,6 +11,7 @@ import {
   TextColor,
   BackgroundColor,
   BlockSize,
+  Display,
 } from '../../../helpers/constants/design-system';
 import {
   AvatarNetwork,
@@ -67,6 +68,7 @@ export const NetworkListItem = ({
       className={classnames('multichain-network-list-item', {
         'multichain-network-list-item--selected': selected,
       })}
+      display={Display.Flex}
       alignItems={AlignItems.center}
       justifyContent={JustifyContent.spaceBetween}
       width={BlockSize.Full}

ui/components/multichain/network-list-menu/index.scss

@@ -1,9 +1,4 @@
 .multichain-network-list-menu {
   max-height: 200px;
   overflow: auto;
-
-  /* Overrides the popover's default behavior */
-  &-content-wrapper {
-    border-radius: 0;
-  }
 }

ui/components/multichain/network-list-menu/network-list-menu.js

@@ -3,7 +3,6 @@ import PropTypes from 'prop-types';
 import { useDispatch, useSelector } from 'react-redux';
 import { useHistory } from 'react-router-dom';
 import { useI18nContext } from '../../../hooks/useI18nContext';
-import Popover from '../../ui/popover/popover.component';
 import { NetworkListItem } from '../network-list-item';
 import {
   setActiveNetwork,
@@ -27,6 +26,10 @@ import {
 import {
   BUTTON_SECONDARY_SIZES,
   ButtonSecondary,
+  Modal,
+  ModalContent,
+  ModalHeader,
+  ModalOverlay,
   Text,
   Box,
 } from '../../component-library';
@@ -121,69 +124,78 @@ export const NetworkListMenu = ({ onClose }) => {
   };
 
   return (
-    <Popover
+    <Modal isOpen onClose={onClose}>
-      contentClassName="multichain-network-list-menu-content-wrapper"
+      <ModalOverlay />
-      onClose={onClose}
+      <ModalContent
-      centerTitle
+        className="multichain-network-list-menu-content-wrapper"
-      title={t('networkMenuHeading')}
+        modalDialogProps={{ padding: 0 }}
-    >
+      >
-      <>
+        <ModalHeader
-        <Box className="multichain-network-list-menu">
+          paddingTop={4}
-          {generateMenuItems(nonTestNetworks)}
+          paddingRight={4}
-        </Box>
+          paddingBottom={6}
-        <Box
+          onClose={onClose}
-          padding={4}
-          display={Display.Flex}
-          justifyContent={JustifyContent.spaceBetween}
         >
-          <Text>{t('showTestnetNetworks')}</Text>
+          {t('networkMenuHeading')}
-          <ToggleButton
+        </ModalHeader>
-            value={showTestNetworks}
+        <>
-            onToggle={(value) => {
+          <Box className="multichain-network-list-menu">
-              const shouldShowTestNetworks = !value;
+            {generateMenuItems(nonTestNetworks)}
-              dispatch(setShowTestNetworks(shouldShowTestNetworks));
+          </Box>
-              if (shouldShowTestNetworks) {
+          <Box
+            padding={4}
+            display={Display.Flex}
+            justifyContent={JustifyContent.spaceBetween}
+          >
+            <Text>{t('showTestnetNetworks')}</Text>
+            <ToggleButton
+              value={showTestNetworks}
+              onToggle={(value) => {
+                const shouldShowTestNetworks = !value;
+                dispatch(setShowTestNetworks(shouldShowTestNetworks));
+                if (shouldShowTestNetworks) {
+                  trackEvent({
+                    event: MetaMetricsEventName.TestNetworksDisplayed,
+                    category: MetaMetricsEventCategory.Network,
+                  });
+                }
+              }}
+            />
+          </Box>
+          {showTestNetworks ? (
+            <Box className="multichain-network-list-menu">
+              {generateMenuItems(testNetworks)}
+            </Box>
+          ) : null}
+          <Box padding={4}>
+            <ButtonSecondary
+              size={BUTTON_SECONDARY_SIZES.LG}
+              block
+              onClick={() => {
+                if (isFullScreen) {
+                  if (completedOnboarding) {
+                    history.push(ADD_POPULAR_CUSTOM_NETWORK);
+                  } else {
+                    dispatch(showModal({ name: 'ONBOARDING_ADD_NETWORK' }));
+                  }
+                } else {
+                  global.platform.openExtensionInBrowser(
+                    ADD_POPULAR_CUSTOM_NETWORK,
+                  );
+                }
+                dispatch(toggleNetworkMenu());
                 trackEvent({
-                  event: MetaMetricsEventName.TestNetworksDisplayed,
+                  event: MetaMetricsEventName.AddNetworkButtonClick,
                   category: MetaMetricsEventCategory.Network,
                 });
-              }
+              }}
-            }}
+            >
-          />
+              {t('addNetwork')}
-        </Box>
+            </ButtonSecondary>
-        {showTestNetworks ? (
-          <Box className="multichain-network-list-menu">
-            {generateMenuItems(testNetworks)}
           </Box>
-        ) : null}
+        </>
-        <Box padding={4}>
+      </ModalContent>
-          <ButtonSecondary
+    </Modal>
-            size={BUTTON_SECONDARY_SIZES.LG}
-            block
-            onClick={() => {
-              if (isFullScreen) {
-                if (completedOnboarding) {
-                  history.push(ADD_POPULAR_CUSTOM_NETWORK);
-                } else {
-                  dispatch(showModal({ name: 'ONBOARDING_ADD_NETWORK' }));
-                }
-              } else {
-                global.platform.openExtensionInBrowser(
-                  ADD_POPULAR_CUSTOM_NETWORK,
-                );
-              }
-              dispatch(toggleNetworkMenu());
-              trackEvent({
-                event: MetaMetricsEventName.AddNetworkButtonClick,
-                category: MetaMetricsEventCategory.Network,
-              });
-            }}
-          >
-            {t('addNetwork')}
-          </ButtonSecondary>
-        </Box>
-      </>
-    </Popover>
   );
 };