Fix code scanning alert #2: DOM text reinterpreted as HTML

Co-authored-by: Copilot Autofix powered by AI <62310815+github-advanced-security[bot]@users.noreply.github.com>

ui/components/blockexplorer/SearchBar.tsx

@@ -3,6 +3,7 @@ import { useRouter } from "next/router";
 import { ethers } from "ethers";
 import { localhost } from "wagmi/chains";
 import { getLocalProvider } from "~~/utils/scaffold-eth";
+import DOMPurify from "dompurify";
 
 const provider = getLocalProvider(localhost);
 export const SearchBar = () => {
@@ -11,20 +12,21 @@ export const SearchBar = () => {
 
   const handleSearch = async (event: React.FormEvent) => {
     event.preventDefault();
-    if (ethers.utils.isHexString(searchInput)) {
+    const sanitizedInput = DOMPurify.sanitize(searchInput);
+    if (ethers.utils.isHexString(sanitizedInput)) {
       try {
-        const tx = await provider?.getTransaction(searchInput);
+        const tx = await provider?.getTransaction(sanitizedInput);
         if (tx) {
-          router.push(`/blockexplorer/transaction/${searchInput}`);
+          router.push(`/blockexplorer/transaction/${sanitizedInput}`);
           return;
         }
       } catch (error) {
         console.error("Failed to fetch transaction:", error);
       }
     }
 
-    if (ethers.utils.isAddress(searchInput)) {
-      router.push(`/blockexplorer/address/${searchInput}`);
+    if (ethers.utils.isAddress(sanitizedInput)) {
+      router.push(`/blockexplorer/address/${sanitizedInput}`);
       return;
     }
   };

ui/package.json

@@ -32,7 +32,8 @@
     "use-debounce": "10.0.3",
     "usehooks-ts": "3.1.0",
     "wagmi": "2.12.12",
-    "zustand": "^4.5.5"
+    "zustand": "^4.5.5",
+    "dompurify": "^3.1.6"
   },
   "devDependencies": {
     "@trivago/prettier-plugin-sort-imports": "^4.3.0",