Allow users to search supported networks by contract addresses

safe-global · Oct 22, 2024 · cd1a8a6 · cd1a8a6
1 parent 51252b9
commit cd1a8a6
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 26 deletions.
diff --git a/components/SupportedNetworks/Networks.tsx b/components/SupportedNetworks/Networks.tsx
@@ -380,7 +380,7 @@ const SupportedNetworks: React.FC = () => {
             <TextField
               className={css.searchField}
               variant='outlined'
-              placeholder='Search by network name or chain ID'
+              placeholder='Search by network name, chain ID or contract address'
               InputProps={{
                 style: {
                   color: 'white',

diff --git a/components/SupportedNetworks/useNetworksSearch.ts b/components/SupportedNetworks/useNetworksSearch.ts
@@ -1,5 +1,4 @@
 import { useMemo } from 'react'
-import Fuse from 'fuse.js'
 import { type Network } from './Networks'
 
 export const useNetworksSearch = (
@@ -13,31 +12,18 @@ export const useNetworksSearch = (
       }),
     [resources]
   )
-  const fuse = useMemo(
-    () =>
-      new Fuse(sortedByChainId, {
-        keys: [
-          {
-            name: 'name',
-            weight: 0.99
-          },
-          {
-            name: 'chainId',
-            weight: 0.5
-          }
-        ],
-        distance: 500,
-        threshold: 0.3,
-        findAllMatches: true
-      }),
-    [sortedByChainId]
-  )
 
   return useMemo(() => {
-    if (query.length === 0) {
-      return sortedByChainId
-    }
+    if (query.length === 0) return sortedByChainId
 
-    return fuse.search(query).map(result => result.item)
-  }, [fuse, sortedByChainId, query])
+    const lowercaseQuery = query.toLowerCase()
+    return sortedByChainId.filter(
+      network =>
+        network.name.toLowerCase().includes(lowercaseQuery) ||
+        network.chainId.toString().includes(lowercaseQuery) ||
+        network.smartAccounts?.some(account =>
+          account.address?.toLowerCase().includes(lowercaseQuery)
+        )
+    )
+  }, [sortedByChainId, query])
 }