RanchiMall/algorandwallet
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: Implement pagination for transaction loading with dynamic next button state

Browse Source
This commit is contained in:
void-57 2025-12-05 17:25:38 +05:30
parent f87813c86c
commit e9714f9b9d
1 changed files with 19 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
index.html
View File

@ -1108,6 +1108,7 @@
let totalPages = 1; let totalPages = 1;
let allTransactions = []; let allTransactions = [];
const ITEMS_PER_PAGE = 10; const ITEMS_PER_PAGE = 10;
let hasMoreTransactions = true;
async function loadTransactions(reset = false) { async function loadTransactions(reset = false) {
if (!currentAlgoAddress) return; if (!currentAlgoAddress) return;
@ -1117,24 +1118,25 @@
allTransactions = []; allTransactions = [];
currentPage = 1; currentPage = 1;
txNextToken = null; txNextToken = null;
hasMoreTransactions = true;
} }
// Load all available transactions // Load only one batch of transactions
let hasMore = true; if (hasMoreTransactions) {
while (hasMore && allTransactions.length < 100) { // Limit to 100 for performance
const result = await algoAPI.getTransactions(currentAlgoAddress, { const result = await algoAPI.getTransactions(currentAlgoAddress, {
limit: 50, limit: 10,
next: txNextToken next: txNextToken
}); });
allTransactions = [...allTransactions, ...result.transactions]; allTransactions = [...allTransactions, ...result.transactions];
txNextToken = result.nextToken; txNextToken = result.nextToken;
hasMore = result.hasMore; hasMoreTransactions = result.hasMore;
if (!hasMore) break;
} }
totalPages = Math.ceil(allTransactions.length / ITEMS_PER_PAGE) || 1; totalPages = Math.ceil(allTransactions.length / ITEMS_PER_PAGE);
if (hasMoreTransactions) {
totalPages++; // Add one more page to show "next" is available
}
displayCurrentPage(); displayCurrentPage();
} catch (error) { } catch (error) {
@ -1183,7 +1185,8 @@
// Update button states // Update button states
document.getElementById('prev-page-btn').disabled = currentPage <= 1; document.getElementById('prev-page-btn').disabled = currentPage <= 1;
document.getElementById('next-page-btn').disabled = currentPage >= totalPages; // Enable next button if we're not on last page OR if there are more transactions to load
document.getElementById('next-page-btn').disabled = currentPage >= totalPages && !hasMoreTransactions;
paginationEl.style.display = filteredTransactions.length > 0 ? 'flex' : 'none'; paginationEl.style.display = filteredTransactions.length > 0 ? 'flex' : 'none';
} }
@ -1195,8 +1198,13 @@
} }
} }
function nextPage() { async function nextPage() {
if (currentPage < totalPages) { // Check if we need to load more transactions
const neededTransactions = (currentPage + 1) * ITEMS_PER_PAGE;
if (neededTransactions > allTransactions.length && hasMoreTransactions) {
currentPage++;
await loadTransactions();
} else if (currentPage < totalPages) {
currentPage++; currentPage++;
displayCurrentPage(); displayCurrentPage();
} }