added : from filter

components/Bundles.tsx

@@ -9,6 +9,7 @@ export default function Bundles({ bundles }) {
   const [openModal, setOpenModal] = useState(false);
   const [bundle, setBundle] = useState(undefined);
   const [searchValue, setSearch] = useState(undefined);
+  const [fromAddress, setFromAddress] = useState(undefined);
 
   useEffect(() => {
     if (router.query.block) {
@@ -40,9 +41,15 @@ export default function Bundles({ bundles }) {
     }
   };
 
+  const findBundleByAddress = _add => {
+    if (_add !== undefined) {
+      router.push(`/?from=${_add}`, undefined, { shallow: true });
+    }
+  };
+
   const submit = e => {
     e.preventDefault();
-    findBundleAndOpen(searchValue);
+    findBundleByAddress(fromAddress);
   };
 
   return <div className="w-10/12 self-center text-center">
@@ -52,6 +59,11 @@ export default function Bundles({ bundles }) {
       <input type="number" onChange={ e => setSearch(e.target.value) } />
       <button type="submit"> 🔍</button>
     </form>
+    <form className={styles.search} onSubmit={ submit }>
+      <span>Filter by from address</span>
+      <input type="text" onChange={ e => setFromAddress(e.target.value) } />
+      <button type="submit"> 🔍</button>
+    </form>
     <div className="-my-2 overflow-x-auto sm:-mx-6 lg:-mx-8">
       <div className="py-2 align-middle inline-block min-w-full sm:px-6 lg:px-8">
         <div className="shadow overflow-hidden border-b border-gray-200 sm:rounded-lg">

styles/Home.module.css

@@ -6,6 +6,7 @@
   @apply inline-flex self-center bg-gray-200 items-center mb-7;
   padding: 0 0 0 1.3rem;
   border-radius: 2rem;
+  margin-left: 0.3rem;
 }
 
 .search span {