fix: fix linter + tests

MetaMask · Jun 20, 2024 · ab2b46c · ab2b46c
1 parent 3f38e5c
commit ab2b46c
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 9 deletions.
diff --git a/ui/components/multichain/network-list-item-menu/network-list-item-menu.js b/ui/components/multichain/network-list-item-menu/network-list-item-menu.js
@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect, useRef } from 'react';
+import React, { useEffect, useRef } from 'react';
 import PropTypes from 'prop-types';
 import { useI18nContext } from '../../../hooks/useI18nContext';
 import {

diff --git a/ui/components/multichain/network-list-menu/network-list-menu.js b/ui/components/multichain/network-list-menu/network-list-menu.js
@@ -157,6 +157,7 @@ export const NetworkListMenu = ({ onClose }) => {
   }, [dispatch, currentlyOnTestNetwork]);
 
   const [searchQuery, setSearchQuery] = useState('');
+  const [focusSearch, setFocusSearch] = useState(false);
   const onboardedInThisUISession = useSelector(getOnboardedInThisUISession);
   const showNetworkBanner = useSelector(getShowNetworkBanner);
   const showBanner =
@@ -190,9 +191,9 @@ export const NetworkListMenu = ({ onClose }) => {
       ? items
       : [...notExistingNetworkConfigurations];
 
-  const isSearching = searchQuery !== '';
+  let searchTestNetworkResults = [...testNetworks];
 
-  if (isSearching) {
+  if (focusSearch && searchQuery !== '') {
     const fuse = new Fuse(searchResults, {
       threshold: 0.2,
       location: 0,
@@ -212,18 +213,35 @@ export const NetworkListMenu = ({ onClose }) => {
       keys: ['nickname', 'chainId', 'ticker'],
     });
 
+    const fuseForTestsNetworks = new Fuse(searchTestNetworkResults, {
+      threshold: 0.2,
+      location: 0,
+      distance: 100,
+      maxPatternLength: 32,
+      minMatchCharLength: 1,
+      shouldSort: true,
+      keys: ['nickname', 'chainId', 'ticker'],
+    });
+
     fuse.setCollection(searchResults);
     fuseForPopularNetworks.setCollection(searchAddNetworkResults);
+    fuseForTestsNetworks.setCollection(searchTestNetworkResults);
+
     const fuseResults = fuse.search(searchQuery);
     const fuseForPopularNetworksResults =
       fuseForPopularNetworks.search(searchQuery);
+    const fuseForTestsNetworksResults =
+      fuseForTestsNetworks.search(searchQuery);
 
     searchResults = searchResults.filter((network) =>
       fuseResults.includes(network),
     );
     searchAddNetworkResults = searchAddNetworkResults.filter((network) =>
       fuseForPopularNetworksResults.includes(network),
     );
+    searchTestNetworkResults = searchTestNetworkResults.filter((network) =>
+      fuseForTestsNetworksResults.includes(network),
+    );
   }
 
   const getOnDeleteCallback = (networkId) => {
@@ -265,8 +283,8 @@ export const NetworkListMenu = ({ onClose }) => {
           name={network.nickname}
           iconSrc={network?.rpcPrefs?.imageUrl}
           key={network.id}
-          selected={isCurrentNetwork}
-          focus={isCurrentNetwork && !isSearching}
+          selected={isCurrentNetwork && !focusSearch}
+          focus={isCurrentNetwork && !focusSearch}
           onClick={() => {
             dispatch(toggleNetworkMenu());
             if (network.providerType) {
@@ -312,6 +330,7 @@ export const NetworkListMenu = ({ onClose }) => {
           <NetworkListSearch
             searchQuery={searchQuery}
             setSearchQuery={setSearchQuery}
+            setFocusSearch={setFocusSearch}
           />
 
           <Box className="multichain-network-list-menu">
@@ -339,7 +358,7 @@ export const NetworkListMenu = ({ onClose }) => {
               />
             ) : null}
             <Box className="multichain-network-list-menu">
-              {searchResults.length === 0 && isSearching ? (
+              {searchResults.length === 0 && focusSearch ? (
                 <Text
                   paddingLeft={4}
                   paddingRight={4}
@@ -382,8 +401,8 @@ export const NetworkListMenu = ({ onClose }) => {
                                     name={network.nickname}
                                     iconSrc={network?.rpcPrefs?.imageUrl}
                                     key={network.id}
-                                    selected={isCurrentNetwork}
-                                    focus={isCurrentNetwork && !isSearching}
+                                    selected={isCurrentNetwork && !focusSearch}
+                                    focus={isCurrentNetwork && !focusSearch}
                                     onClick={() => {
                                       dispatch(toggleNetworkMenu());
                                       if (network.providerType) {
@@ -458,7 +477,7 @@ export const NetworkListMenu = ({ onClose }) => {
               </Box>
               {showTestNetworks || currentlyOnTestNetwork ? (
                 <Box className="multichain-network-list-menu">
-                  {generateMenuItems(testNetworks)}
+                  {generateMenuItems(searchTestNetworkResults)}
                 </Box>
               ) : null}
             </Box>