WIP: Implement Network Menu Search

MetaMask · Jul 12, 2023 · 2a97325 · 2a97325
1 parent 36eaaa1
commit 2a97325
Show file tree

Hide file tree

Showing 3 changed files with 62 additions and 2 deletions.
diff --git a/app/_locales/en/messages.json b/app/_locales/en/messages.json
diff --git 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
@@ -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}