fix: include nativetoken symbol in network search

TalismanSociety · Dec 22, 2024 · 8538598 · 8538598
1 parent 063ebec
commit 8538598
Showing 1 changed file with 12 additions and 5 deletions.
diff --git a/apps/extension/src/ui/domains/Account/AccountTypeNetworkSearch.tsx b/apps/extension/src/ui/domains/Account/AccountTypeNetworkSearch.tsx
@@ -15,7 +15,7 @@ import { useTranslation } from "react-i18next"
 
 import { ChainLogo } from "@ui/domains/Asset/ChainLogo"
 import { getNetworkInfo } from "@ui/hooks/useNetworkInfo"
-import { useChainsMap, useEvmNetworksMap } from "@ui/state"
+import { useChainsMap, useEvmNetworksMap, useTokensMap } from "@ui/state"
 
 export function AccountTypeNetworkSearch({
   setAccountType,
@@ -30,31 +30,38 @@ export function AccountTypeNetworkSearch({
 
   const chainsMap = useChainsMap()
   const evmNetworksMap = useEvmNetworksMap()
+  const tokensMap = useTokensMap()
   const allNetworks = useMemo(
     () =>
       [
         ...Object.values(chainsMap).flatMap((chain) => {
           if (chain.isTestnet) return []
           const relay = chain.relay?.id ? chainsMap[chain.relay.id] : null
           const { label, type } = getNetworkInfo(t, { chain, relay })
+          const symbol = tokensMap[chain.nativeToken?.id ?? ""]?.symbol
 
-          return { id: chain.id, label, type, account: chain.account }
+          return { id: chain.id, label, type, symbol, account: chain.account }
         }),
         ...Object.values(evmNetworksMap).flatMap((evmNetwork) => {
           if (evmNetwork.isTestnet) return []
           const { label, type } = getNetworkInfo(t, { evmNetwork })
+          const symbol = tokensMap[evmNetwork.nativeToken?.id ?? ""]?.symbol
 
-          return { id: evmNetwork.id, label, type }
+          return { id: evmNetwork.id, label, type, symbol }
         }),
       ].sort((a, b) => a.label?.localeCompare(b.label ?? "") ?? 0),
 
-    [chainsMap, evmNetworksMap, t],
+    [t, chainsMap, evmNetworksMap, tokensMap],
   )
   type Network = (typeof networks)[number]
 
   const networks = useMemo(() => {
     if (!search) return allNetworks
-    return allNetworks.filter((network) => network.label?.toLowerCase().includes(search))
+    return allNetworks.filter(
+      (network) =>
+        network.label?.toLowerCase().includes(search.toLowerCase()) ||
+        network.symbol?.toLowerCase().includes(search.toLowerCase()),
+    )
   }, [allNetworks, search])
 
   const [selected, setSelected] = useState<Network | null>(null)