Verification plugin: Fix crashing chain selector

ethereum · Oct 29, 2024 · 3fd7841 · 3fd7841
1 parent 4fa1717
commit 3fd7841
Showing 1 changed file with 8 additions and 18 deletions.
diff --git a/apps/contract-verification/src/app/components/SearchableChainDropdown.tsx b/apps/contract-verification/src/app/components/SearchableChainDropdown.tsx
@@ -37,22 +37,14 @@ export const SearchableChainDropdown: React.FC<DropdownProps> = ({ label, id, se
 
   const [searchTerm, setSearchTerm] = useState(selectedChain ? getChainDescriptor(selectedChain) : '')
   const [isOpen, setIsOpen] = useState(false)
-  const [filteredOptions, setFilteredOptions] = useState<Chain[]>(dropdownChains)
   const dropdownRef = useRef<HTMLDivElement>(null)
 
   const fuse = new Fuse(dropdownChains, {
     keys: ['name', 'chainId', 'title'],
     threshold: 0.3,
   })
 
-  useEffect(() => {
-    if (searchTerm === '') {
-      setFilteredOptions(dropdownChains)
-    } else {
-      const result = fuse.search(searchTerm)
-      setFilteredOptions(result.map(({ item }) => item))
-    }
-  }, [searchTerm, dropdownChains])
+  const filteredOptions = searchTerm ? fuse.search(searchTerm).map(({ item }) => item) : dropdownChains
 
   // Close dropdown when user clicks outside
   useEffect(() => {
@@ -99,15 +91,13 @@ export const SearchableChainDropdown: React.FC<DropdownProps> = ({ label, id, se
       {/* Add ref here */}
       <label htmlFor={id}>{label}</label>
       <input type="text" value={searchTerm} onChange={handleInputChange} onClick={openDropdown} placeholder="Select a chain" className="form-control" />
-      {isOpen && (
-        <ul className="dropdown-menu show w-100 bg-light" style={{ maxHeight: '400px', overflowY: 'auto' }}>
-          {filteredOptions.map((chain) => (
-            <li key={chain.chainId} onClick={() => handleOptionClick(chain)} className={`dropdown-item text-dark ${selectedChain?.chainId === chain.chainId ? 'active' : ''}`} style={{ cursor: 'pointer', whiteSpace: 'normal' }}>
-              {getChainDescriptor(chain)}
-            </li>
-          ))}
-        </ul>
-      )}
+      <ul className="dropdown-menu show w-100 bg-light" style={{ maxHeight: '400px', overflowY: 'auto', display: isOpen ? 'initial' : 'none' }}>
+        {filteredOptions.map((chain) => (
+          <li key={chain.chainId} onClick={() => handleOptionClick(chain)} className={`dropdown-item text-dark ${selectedChain?.chainId === chain.chainId ? 'active' : ''}`} style={{ cursor: 'pointer', whiteSpace: 'normal' }}>
+            {getChainDescriptor(chain)}
+          </li>
+        ))}
+      </ul>
     </div>
   )
 }