added option to allowing loading more transactions
This commit is contained in:
sairaj mote
parent
bcc9a19698
commit
6ed2497307
@ -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);
|
||||
|
||||
2
css/main.min.css
vendored
2
css/main.min.css
vendored
File diff suppressed because one or more lines are too long
@ -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);
|
||||
|
||||
30
index.html
30
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(() => {
|
||||
filterFetchedTransactions()
|
||||
render.paginatedTransactions(page)
|
||||
})
|
||||
loadMoreTransactions()
|
||||
} 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 {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user