RanchiMall/flowallet-testnet
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

added option to allowing loading more transactions

Browse Source
This commit is contained in:
sairaj mote 2023-05-17 00:46:33 +05:30
parent bcc9a19698
commit 6ed2497307
4 changed files with 34 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
css/main.css
View File

@ -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
View File

File diff suppressed because one or more lines are too long

8
css/main.scss
View File

@ -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);

34
index.html
View File

@ -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 (startingPage > 2) {
pagination.splice(1, 0, html` <div class="pagination__item">...</div> `);
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')
}
renderElem(getRef('pagination_wrapper'), html`${pagination}`)
},
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 {