From 2a973251a76776230a01d944c30b0d53690a0d52 Mon Sep 17 00:00:00 2001
From: David Walsh <davidwalsh83@gmail.com>
Date: Wed, 12 Jul 2023 16:18:28 -0500
Subject: [PATCH] WIP: Implement Network Menu Search

---
 app/_locales/en/messages.json                 |  3 +
 .../network-list-item/network-list-item.js    |  2 +
 .../network-list-menu/network-list-menu.js    | 59 ++++++++++++++++++-
 3 files changed, 62 insertions(+), 2 deletions(-)

diff --git a/app/_locales/en/messages.json b/app/_locales/en/messages.json
index 39d8216b7fb9..5fd481ac75c0 100644
--- a/app/_locales/en/messages.json
+++ b/app/_locales/en/messages.json
@@ -2517,6 +2517,9 @@
   "noAccountsFound": {
     "message": "No accounts found for the given search query"
   },
+  "noNetworksFound": {
+    "message": "No networks found for the given search query"
+  },
   "noAddressForName": {
     "message": "No address has been set for this name."
   },
diff --git a/ui/components/multichain/network-list-item/network-list-item.js b/ui/components/multichain/network-list-item/network-list-item.js
index 6d521ce674f9..f6b4594f0919 100644
--- a/ui/components/multichain/network-list-item/network-list-item.js
+++ b/ui/components/multichain/network-list-item/network-list-item.js
@@ -53,11 +53,13 @@ export const NetworkListItem = ({
   const t = useI18nContext();
   const networkRef = useRef();
 
+  /*
   useEffect(() => {
     if (networkRef.current && selected) {
       networkRef.current.querySelector('.mm-button-link').focus();
     }
   }, [networkRef, selected]);
+  */
 
   return (
     <Box
diff --git a/ui/components/multichain/network-list-menu/network-list-menu.js b/ui/components/multichain/network-list-menu/network-list-menu.js
index 51755058ac6d..af2e4d0a095a 100644
--- a/ui/components/multichain/network-list-menu/network-list-menu.js
+++ b/ui/components/multichain/network-list-menu/network-list-menu.js
@@ -1,7 +1,8 @@
-import React, { useContext } from 'react';
+import React, { useContext, useState } from 'react';
 import PropTypes from 'prop-types';
 import { useDispatch, useSelector } from 'react-redux';
 import { useHistory } from 'react-router-dom';
+import Fuse from 'fuse.js';
 import { useI18nContext } from '../../../hooks/useI18nContext';
 import { NetworkListItem } from '../network-list-item';
 import {
@@ -20,8 +21,11 @@ import {
 } from '../../../selectors';
 import ToggleButton from '../../ui/toggle-button';
 import {
+  BlockSize,
   Display,
   JustifyContent,
+  Size,
+  TextColor,
 } from '../../../helpers/constants/design-system';
 import {
   BUTTON_SECONDARY_SIZES,
@@ -32,6 +36,7 @@ import {
   ModalOverlay,
   Text,
   Box,
+  TextFieldSearch,
 } from '../../component-library';
 import { ADD_POPULAR_CUSTOM_NETWORK } from '../../../helpers/constants/routes';
 import { getEnvironmentType } from '../../../../app/scripts/lib/util';
@@ -71,6 +76,24 @@ export const NetworkListMenu = ({ onClose }) => {
 
   const lineaMainnetReleased = useSelector(isLineaMainnetNetworkReleased);
 
+  const [searchQuery, setSearchQuery] = useState('');
+
+  let searchResults = [...nonTestNetworks];
+
+  if (searchQuery) {
+    const fuse = new Fuse(searchResults, {
+      threshold: 0.2,
+      location: 0,
+      distance: 100,
+      maxPatternLength: 32,
+      minMatchCharLength: 1,
+      shouldSort: true,
+      keys: ['nickname', 'chainId', 'ticker'],
+    });
+    fuse.setCollection(searchResults);
+    searchResults = fuse.search(searchQuery);
+  }
+
   const generateMenuItems = (desiredNetworks) => {
     return desiredNetworks.map((network, index) => {
       if (!lineaMainnetReleased && network.providerType === 'linea-mainnet') {
@@ -139,8 +162,40 @@ export const NetworkListMenu = ({ onClose }) => {
           {t('networkMenuHeading')}
         </ModalHeader>
         <>
+          {nonTestNetworks.length > 4 ? (
+            <Box
+              paddingLeft={4}
+              paddingRight={4}
+              paddingBottom={4}
+              paddingTop={0}
+            >
+              <TextFieldSearch
+                size={Size.SM}
+                width={BlockSize.Full}
+                placeholder={t('search')}
+                value={searchQuery}
+                onChange={(e) => setSearchQuery(e.target.value)}
+                clearButtonOnClick={() => setSearchQuery('')}
+                clearButtonProps={{
+                  size: Size.SM,
+                }}
+                inputProps={{ autoFocus: true }}
+              />
+            </Box>
+          ) : null}
           <Box className="multichain-network-list-menu">
-            {generateMenuItems(nonTestNetworks)}
+            {searchResults.length === 0 && searchQuery !== '' ? (
+              <Text
+                paddingLeft={4}
+                paddingRight={4}
+                color={TextColor.textMuted}
+                data-testid="multichain-network-menu-popover-no-results"
+              >
+                {t('noNetworksFound')}
+              </Text>
+            ) : (
+              generateMenuItems(searchResults)
+            )}
           </Box>
           <Box
             padding={4}