refresh blocks button

components/BundleModal.tsx

@@ -241,7 +241,7 @@ function BundleTransaction(transaction, index: number) {
       <td className="flex flex-col px-6 py-4 whitespace-nowrap text-xs justify-center">
           {
             Object.keys(coins).map(coin => <div className="flex flex-row items-center">
-              <a key={ "a_" + index + now() } className="flex hover:underline" target="_blank" rel="noreferrer" href={`https://etherscan.io/address/${ coins[coin].address }`} style={{ margin: 3}}>
+              <a key={ "a_" + index + now() } className="flex hover:underline min-w-max" target="_blank" rel="noreferrer" href={`https://etherscan.io/address/${ coins[coin].address }`} style={{ margin: 3}}>
                 {
                   coins[coin].logo
                     ? <img className="w-4 mr-1" key={ "i_" + index + now() } src={coins[coin].logo} />

components/Bundles.tsx

@@ -8,6 +8,7 @@ export default function Bundles({ bundles }) {
   const router = useRouter();
   const [openModal, setOpenModal] = useState(false);
   const [bundle, setBundle] = useState(undefined);
+  const [allBundles, setAllBundles] = useState(bundles);
   const [searchValue, setSearch] = useState(undefined);
 
   useEffect(() => {
@@ -25,7 +26,7 @@ export default function Bundles({ bundles }) {
   };
 
   const findBundleAndOpen = async (blockNumber: string) => {
-    const local = bundles.find(b => b.block_number == blockNumber);
+    const local = allBundles.find(b => b.block_number == blockNumber);
     if (local) {
       setBundleAndOpen(local);
     } else {
@@ -45,12 +46,26 @@ export default function Bundles({ bundles }) {
     findBundleAndOpen(searchValue);
   };
 
+  const refresh = async e => {
+    e.preventDefault();
+    try {
+      const blocks = await getBlocks(undefined);
+      if (blocks) setAllBundles(blocks);
+    } catch (e) {
+      console.log(e);
+    }
+  };
+
   return <div className="w-10/12 self-center text-center">
     <BundleModal open={ openModal } bundle={ bundle } setOpen={ setOpenModal } />
     <form className={styles.search} onSubmit={ submit }>
       <span>Search by block number</span>
       <input type="number" onChange={ e => setSearch(e.target.value) } />
-      <button type="submit"> 🔍</button>
+      <button type="submit"> 🔄</button>
+    </form>
+    <form className={styles.search} >
+      <span>Refresh Blocks</span>
+      <button type="submit" onClick={ refresh }> 🔍</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">
@@ -67,7 +82,7 @@ export default function Bundles({ bundles }) {
               </tr>
             </thead>
             <tbody className="bg-white divide-y divide-gray-200">
-              { bundles?.sort(sortBlocks).map((b, i) => <Bundle index={ i } key={ i } bundle={ b } setBundleAndOpen={ setBundleAndOpen } />) }
+              { allBundles?.sort(sortBlocks).map((b, i) => <Bundle index={ i } key={ i } bundle={ b } setBundleAndOpen={ setBundleAndOpen } />) }
             </tbody>
           </table>
         </div>

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 {