From a3427b479573178a4597b077aa6e16a90a08af8d Mon Sep 17 00:00:00 2001
From: Manuel Wedler <manuel@wedler.dev>
Date: Wed, 24 Jul 2024 16:19:47 +0200
Subject: [PATCH] Make chain descriptors of SearchableChainDropdown consistent
 and improve searching

---
 .../src/app/components/SearchableChainDropdown.tsx     | 10 +++++++---
 1 file changed, 7 insertions(+), 3 deletions(-)

diff --git a/apps/contract-verification/src/app/components/SearchableChainDropdown.tsx b/apps/contract-verification/src/app/components/SearchableChainDropdown.tsx
index 2afe0e0da0..812c0bf128 100644
--- a/apps/contract-verification/src/app/components/SearchableChainDropdown.tsx
+++ b/apps/contract-verification/src/app/components/SearchableChainDropdown.tsx
@@ -3,6 +3,10 @@ import Fuse from 'fuse.js'
 import type { Chain } from '../types'
 import { AppContext } from '../AppContext'
 
+function getChainDescriptor(chain: Chain): string {
+  return `${chain.title || chain.name} (${chain.chainId})`
+}
+
 interface DropdownProps {
   label: string
   id: string
@@ -36,7 +40,7 @@ export const SearchableChainDropdown: React.FC<DropdownProps> = ({ label, id, se
   const dropdownRef = useRef<HTMLDivElement>(null)
 
   const fuse = new Fuse(dropdownChains, {
-    keys: ['name'],
+    keys: ['name', 'chainId', 'title'],
     threshold: 0.3,
   })
 
@@ -69,7 +73,7 @@ export const SearchableChainDropdown: React.FC<DropdownProps> = ({ label, id, se
 
   const handleOptionClick = (option: Chain) => {
     setSelectedChain(option)
-    setSearchTerm(option.name)
+    setSearchTerm(getChainDescriptor(option))
     setIsOpen(false)
   }
 
@@ -97,7 +101,7 @@ export const SearchableChainDropdown: React.FC<DropdownProps> = ({ label, id, se
         <ul className="dropdown-menu show w-100" style={{ maxHeight: '400px', overflowY: 'auto' }}>
           {filteredOptions.map((chain) => (
             <li key={chain.chainId} onClick={() => handleOptionClick(chain)} className={`dropdown-item ${selectedChain?.chainId === chain.chainId ? 'active' : ''}`} style={{ cursor: 'pointer', whiteSpace: 'normal' }}>
-              {chain.title || chain.name} ({chain.chainId})
+              {getChainDescriptor(chain)}
             </li>
           ))}
         </ul>