feat: search by txn hash in UI

Author: wlawt

ui/src/app/bundles/page.tsx

@@ -9,6 +9,10 @@ export default function BundlesPage() {
   const [allBundles, setAllBundles] = useState<string[]>([]);
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState<string | null>(null);
+  const [searchHash, setSearchHash] = useState<string>("");
+  const [filteredLiveBundles, setFilteredLiveBundles] = useState<Bundle[]>([]);
+  const [filteredAllBundles, setFilteredAllBundles] = useState<string[]>([]);
+  const [searchLoading, setSearchLoading] = useState(false);
 
   useEffect(() => {
     const fetchLiveBundles = async () => {
@@ -56,6 +60,59 @@ export default function BundlesPage() {
     return () => clearInterval(interval);
   }, []);
 
+  useEffect(() => {
+    const filterBundles = async () => {
+      if (!searchHash.trim()) {
+        setFilteredLiveBundles(liveBundles);
+        setFilteredAllBundles(allBundles);
+        return;
+      }
+
+      setSearchLoading(true);
+
+      try {
+        const liveBundlesWithTx = liveBundles.filter(bundle =>
+          bundle.txnHashes?.some(hash =>
+            hash.toLowerCase().includes(searchHash.toLowerCase())
+          )
+        );
+
+        const response = await fetch(`/api/txn/${searchHash.trim()}`);
+
+        if (response.ok) {
+          const txnData = await response.json();
+          const bundleIds = txnData.bundle_ids || [];
+
+          const allBundlesWithTx = allBundles.filter(bundleId =>
+            bundleIds.includes(bundleId)
+          );
+
+          setFilteredLiveBundles(liveBundlesWithTx);
+          setFilteredAllBundles(allBundlesWithTx);
+        } else {
+          setFilteredLiveBundles(liveBundles.filter(bundle =>
+            bundle.txnHashes?.some(hash =>
+              hash.toLowerCase().includes(searchHash.toLowerCase())
+            )
+          ));
+          setFilteredAllBundles([]);
+        }
+      } catch (err) {
+        console.error("Error filtering bundles:", err);
+        setFilteredLiveBundles(liveBundles.filter(bundle =>
+          bundle.txnHashes?.some(hash =>
+            hash.toLowerCase().includes(searchHash.toLowerCase())
+          )
+        ));
+        setFilteredAllBundles([]);
+      }
+
+      setSearchLoading(false);
+    };
+
+    filterBundles();
+  }, [searchHash, liveBundles, allBundles]);
+
   if (loading) {
     return (
       <div className="flex flex-col gap-4 p-8">
@@ -68,18 +125,40 @@ export default function BundlesPage() {
   return (
     <div className="flex flex-col gap-8 p-8">
       <div className="flex flex-col gap-2">
-        <h1 className="text-2xl font-bold">BundleStore (fka Mempool)</h1>
+        <div className="flex items-center justify-between">
+          <h1 className="text-2xl font-bold">BundleStore (fka Mempool)</h1>
+          <div className="flex items-center gap-2">
+            <input
+              type="text"
+              placeholder="Search by transaction hash..."
+              value={searchHash}
+              onChange={(e) => setSearchHash(e.target.value)}
+              className="px-3 py-2 border rounded-lg bg-white/5 border-gray-300 dark:border-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent placeholder-gray-500 dark:placeholder-gray-400 text-sm min-w-[300px]"
+            />
+            {searchLoading && (
+              <div className="text-sm text-gray-500 animate-pulse">Searching...</div>
+            )}
+          </div>
+        </div>
         {error && (
           <div className="text-sm text-red-600 dark:text-red-400">{error}</div>
         )}
       </div>
 
       <div className="flex flex-col gap-6">
-        <section>
-          <h2 className="text-xl font-semibold mb-4">Live Bundles</h2>
-          {liveBundles.length > 0 ? (
-            <ul className="space-y-2">
-              {liveBundles.map((bundle) => (
+        {(filteredLiveBundles.length > 0 || !searchHash.trim()) && (
+          <section>
+            <h2 className="text-xl font-semibold mb-4">
+              Live Bundles
+              {searchHash.trim() && (
+                <span className="text-sm font-normal text-gray-500 ml-2">
+                  ({filteredLiveBundles.length} found)
+                </span>
+              )}
+            </h2>
+            {filteredLiveBundles.length > 0 ? (
+              <ul className="space-y-2">
+                {filteredLiveBundles.map((bundle) => (
                 <li key={bundle.id}>
                   <Link
                     href={`/bundles/${bundle.id}`}
@@ -110,16 +189,25 @@ export default function BundlesPage() {
             </ul>
           ) : (
             <p className="text-gray-600 dark:text-gray-400">
-              No live bundles found.
+              {searchHash.trim() ? "No live bundles found matching this transaction hash." : "No live bundles found."}
             </p>
           )}
-        </section>
+          </section>
+        )}
 
-        <section>
-          <h2 className="text-xl font-semibold mb-4">All Bundles</h2>
-          {allBundles.length > 0 ? (
-            <ul className="space-y-2">
-              {allBundles.map((bundleId) => (
+        {(filteredAllBundles.length > 0 || !searchHash.trim()) && (
+          <section>
+            <h2 className="text-xl font-semibold mb-4">
+              All Bundles
+              {searchHash.trim() && (
+                <span className="text-sm font-normal text-gray-500 ml-2">
+                  ({filteredAllBundles.length} found)
+                </span>
+              )}
+            </h2>
+            {filteredAllBundles.length > 0 ? (
+              <ul className="space-y-2">
+                {filteredAllBundles.map((bundleId) => (
                 <li key={bundleId}>
                   <Link
                     href={`/bundles/${bundleId}`}
@@ -132,10 +220,11 @@ export default function BundlesPage() {
             </ul>
           ) : (
             <p className="text-gray-600 dark:text-gray-400">
-              No bundles found in S3.
+              {searchHash.trim() ? "No bundles found in S3 matching this transaction hash." : "No bundles found in S3."}
             </p>
           )}
-        </section>
+          </section>
+        )}
       </div>
     </div>
   );