added option to allowing loading more transactions

css/main.css

@@ -109,7 +109,7 @@ button,
   font-size: inherit;
   font-weight: 500;
   white-space: nowrap;
-  padding: 0.8rem;
+  padding: 0.9rem;
   border-radius: 0.3rem;
   justify-content: center;
 }
@@ -165,7 +165,7 @@ button:disabled {
 
 .cta {
   text-transform: uppercase;
-  font-size: 0.8rem;
+  font-size: 0.9rem;
   font-weight: 700;
   letter-spacing: 0.05em;
   padding: 0.8rem 1rem;
@@ -724,7 +724,7 @@ h3 {
   padding: 0.8rem 1rem;
   gap: 0.5rem;
   white-space: normal;
-  font-size: 0.8rem;
+  font-size: 0.85rem;
   border-radius: 0.5rem;
   background-color: transparent;
   border: thin solid rgba(var(--text-color), 0.3);
@@ -1102,7 +1102,7 @@ legend,
   gap: 0.5rem;
   color: rgba(var(--text-color), 0.8);
   width: 5rem;
-  font-size: 0.8rem;
+  font-size: 0.9rem;
   aspect-ratio: 1/1;
   border-radius: 0.5rem;
   border: solid 1px rgba(var(--text-color), 0.3);

css/main.scss

@@ -108,7 +108,7 @@ button,
   font-size: inherit;
   font-weight: 500;
   white-space: nowrap;
-  padding: 0.8rem;
+  padding: 0.9rem;
   border-radius: 0.3rem;
   justify-content: center;
   &:focus-visible {
@@ -164,7 +164,7 @@ button:disabled {
 
 .cta {
   text-transform: uppercase;
-  font-size: 0.8rem;
+  font-size: 0.9rem;
   font-weight: 700;
   letter-spacing: 0.05em;
   padding: 0.8rem 1rem;
@@ -692,7 +692,7 @@ h3 {
   padding: 0.8rem 1rem;
   gap: 0.5rem;
   white-space: normal;
-  font-size: 0.8rem;
+  font-size: 0.85rem;
   border-radius: 0.5rem;
   background-color: transparent;
   border: thin solid rgba(var(--text-color), 0.3);
@@ -1033,7 +1033,7 @@ legend,
   gap: 0.5rem;
   color: rgba(var(--text-color), 0.8);
   width: 5rem;
-  font-size: 0.8rem;
+  font-size: 0.9rem;
   aspect-ratio: 1/1;
   border-radius: 0.5rem;
   border: solid 1px rgba(var(--text-color), 0.3);

index.html

@@ -222,6 +222,9 @@
                                 Looks a bit empty here, no transactions yet.
                             </h4>
                         </div>
+                        <button id="load_more_transactions" onclick="loadMoreTransactions()"
+                            style="margin-top: -4rem; height: fit-content;"
+                            class="button justify-self-center hidden">Load more</button>
                     </section>
                 </div>
                 <div id="pagination_wrapper" class="flex gap-0-3 align-center"> </div>
@@ -1230,10 +1233,7 @@
                                         render.paginatedTransactions(page)
                                     })
                                 } else if (page % Math.ceil(1000 / txsPerPage) === 0 && floGlobals.query.transactions.length <= page * txsPerPage) {
-                                    fetchTransactions(query, true).then(() => {
+                                    loadMoreTransactions()
-                                        filterFetchedTransactions()
-                                        render.paginatedTransactions(page)
-                                    })
                                 } else {
                                     render.paginatedTransactions(page)
                                 }
@@ -1913,12 +1913,13 @@
                 clone.querySelector('.transaction__time').textContent = getFormattedTime(time * 1000)
                 return clone
             },
-            paginatedTransactions(page = 1) {
+            paginatedTransactions(page = parseInt(pagesData.params.page) || 1) {
                 const { transactions, string: address, filteredTransactions } = floGlobals.query
                 let startingIndex = ((page - 1) * txsPerPage)
-                if (filteredTransactions && startingIndex > filteredTransactions.length) {
+                if ((filteredTransactions?.length || transactions.length) < startingIndex) {
                     startingIndex = 0;
                     window.history.replaceState({}, '', `#/search?type=address&query=${address}&page=1`)
+                    pagesData.params.page = page = 1;
                 }
                 const endingIndex = startingIndex + txsPerPage
                 const renderedTransactions = (filteredTransactions || transactions)
@@ -1967,11 +1968,19 @@
                             pagination.push(html` <a href=${`#/search?type=address&query=${address}&page=${i}`} class="pagination__item">${i}</a> `)
                         }
                     }
-                }
                     if (startingPage > 2) {
                         pagination.splice(1, 0, html` <div class="pagination__item">...</div> `);
                     }
                     renderElem(getRef('pagination_wrapper'), html`${pagination}`)
+                    getRef('pagination_wrapper').classList.remove('hidden')
+                } else {
+                    getRef('pagination_wrapper').classList.add('hidden')
+                }
+                if (filteredTransactions && paginationSegments === page && filteredTransactions.length % txsPerPage !== 0 && transactions.length % txsPerPage === 0) {
+                    document.getElementById('load_more_transactions').classList.remove('hidden')
+                } else {
+                    document.getElementById('load_more_transactions').classList.add('hidden')
+                }
             },
             availableAssetOptions() {
                 return (floGlobals.tokens || []).map(token => html` <sm-option value=${token}>${token}</sm-option> `)
@@ -2567,6 +2576,7 @@
         const txsPerPage = 25;
         async function fetchTransactions(address, loadOlder = false) {
             try {
+                document.getElementById('load_more_transactions').classList.add('hidden')
                 renderElem(getRef('pagination_wrapper'), html``)
                 renderElem(getRef('queried_address_transactions'), html`
                     <div class="grid gap-1 justify-items-center text-center" style="margin: 3rem 0">
@@ -2613,6 +2623,12 @@
                 notify(err, 'error')
             })
         }
+        function loadMoreTransactions() {
+            fetchTransactions(floGlobals.query.string, true).then(() => {
+                filterFetchedTransactions()
+                render.paginatedTransactions()
+            })
+        }
 
         async function initTransaction() {
             try {