fix: add enabled network section

Author: salimtb

app/_locales/en/messages.json

@@ -1,4 +1,4 @@
-import React, { useEffect, useRef } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
 import { useI18nContext } from '../../../hooks/useI18nContext';
 import {
@@ -21,29 +21,6 @@ export const NetworkListItemMenu = ({
 }) => {
   const t = useI18nContext();
 
-  // Handle Tab key press for accessibility inside the popover and will close the popover on the last MenuItem
-  const lastItemRef = useRef(null);
-  const accountDetailsItemRef = useRef(null);
-  const removeAccountItemRef = useRef(null);
-  const removeJWTItemRef = useRef(null);
-
-  // Checks the MenuItems from the bottom to top to set lastItemRef on the last MenuItem that is not disabled
-  useEffect(() => {
-    if (removeAccountItemRef.current) {
-      lastItemRef.current = removeAccountItemRef.current;
-    } else {
-      lastItemRef.current = accountDetailsItemRef.current;
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [
-    removeJWTItemRef.current,
-    removeAccountItemRef.current,
-    accountDetailsItemRef.current,
-  ]);
-
-  // Handle click outside of the popover to close it
-  const popoverDialogRef = useRef(null);
-
   return (
     <Popover
       className="multichain-network-list-item-menu__popover"
@@ -59,7 +36,7 @@ export const NetworkListItemMenu = ({
       flip
     >
       <ModalFocus restoreFocus initialFocusRef={anchorElement}>
-        <div ref={popoverDialogRef}>
+        <div>
           {onEditClick ? (
             <MenuItem
               iconName={IconName.Edit}

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

@@ -358,6 +358,15 @@ export const NetworkListMenu = ({ onClose }) => {
               />
             ) : null}
             <Box className="multichain-network-list-menu">
+              <Box
+                paddingRight={4}
+                paddingLeft={4}
+                paddingBottom={4}
+                display={Display.Flex}
+                justifyContent={JustifyContent.spaceBetween}
+              >
+                <Text> {t('enabledNetworks')}</Text>
+              </Box>
               {searchResults.length === 0 && focusSearch ? (
                 <Text
                   paddingLeft={4}

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

@@ -591,7 +591,7 @@ const NetworksForm = ({
           warningMessage = t('failedToFetchTickerSymbolData');
         } else if (
           !matchedNames.some(
-            (name) => name.toLowerCase() === formName.toLowerCase(),
+            (name) => name?.toLowerCase() === formName.toLowerCase(),
           )
         ) {
           warningKey = 'wrongNetworkName';
@@ -671,12 +671,14 @@ const NetworksForm = ({
       const nameWarning = await validateNetworkName(chainId, networkName);
       const blockExplorerError = validateBlockExplorerURL(blockExplorerUrl);
       const rpcUrlError = validateRPCUrl(rpcUrl);
+
       setErrors({
         ...errors,
         blockExplorerUrl: blockExplorerError,
         rpcUrl: rpcUrlError,
         chainId: chainIdError,
       });
+
       setWarnings({
         ...warnings,
         chainId: chainIdWarning,