Connect wallet transaction pagination to server API

web/index.html

@@ -1477,41 +1477,115 @@
       });
     }
 
-    function getVisibleTransactionCount(wallet) {
-      const total = getWalletTransactions(wallet).length;
-      const current = visibleTransactionCounts.get(wallet.address);
+    async function showMoreTransactions(encodedAddress) {
+      const address =
+        decodeURIComponent(
+          encodedAddress,
+        );
 
-      return Number.isFinite(current) && current > 0
-        ? Math.min(current, total)
-        : Math.min(50, total);
-    }
-
-    function showMoreTransactions(encodedAddress) {
-      const address = decodeURIComponent(encodedAddress);
-      const wallet = wallets.find(
-        (item) => item.address === address,
+      const wallet =
+        wallets.find(
+          (item) =>
+            item.address === address,
         );
 
       if (!wallet) {
         return;
       }
 
-      const total = getWalletTransactions(wallet).length;
-      const current = getVisibleTransactionCount(wallet);
+      const current =
+        getWalletTransactions(wallet).length;
 
-      visibleTransactionCounts.set(
-        address,
-        Math.min(current + 50, total),
+      const total =
+        Number(wallet.transactionCount) ||
+        current;
+
+      if (current >= total) {
+        return;
+      }
+
+      const button =
+        document.querySelector(
+          `[data-show-more-address="${encodeURIComponent(address)}"]`,
+        );
+
+      if (button) {
+        button.disabled = true;
+        button.textContent = 'Loading...';
+      }
+
+      try {
+        const response =
+          await fetch(
+            `/api/addresses/transactions?address=${encodeURIComponent(address)}&offset=${current}&limit=50`,
+            {
+              credentials:
+                'same-origin',
+            },
+          );
+
+        if (
+          response.status === 401
+        ) {
+          showLogin();
+          return;
+        }
+
+        if (!response.ok) {
+          throw new Error(
+            `HTTP ${response.status}`,
+          );
+        }
+
+        const data =
+          await response.json();
+
+        const transactions =
+          Array.isArray(
+            data.transactions,
+          )
+            ? data.transactions
+            : [];
+
+        wallet.history = [
+          ...getWalletTransactions(wallet),
+          ...transactions,
+        ];
+
+        wallet.transactionCount =
+          Number(data.total) ||
+          wallet.history.length;
+
+        wallet.transactionOffset =
+          current;
+
+        renderWallets();
+      } catch (error) {
+        console.error(
+          'Failed to load more transactions:',
+          error,
         );
 
         renderWallets();
       }
+    }
 
-    function renderWalletContent(wallet, transactionCount) {
-      const transactions = getWalletTransactions(wallet);
-      const visibleCount = getVisibleTransactionCount(wallet);
-      const visibleTransactions = transactions.slice(0, visibleCount);
-      const hasMore = visibleCount < transactions.length;
+    function renderWalletContent(
+      wallet,
+      transactionCount,
+    ) {
+      const transactions =
+        getWalletTransactions(wallet);
+
+      const visibleCount =
+        transactions.length;
+
+      const total =
+        Number(wallet.transactionCount) ||
+        transactions.length;
+
+      const hasMore =
+        visibleCount < total;
 
       return `
         <div class="wallet-content">
@@ -1521,7 +1595,10 @@
 
           ${
             transactions.length
-              ? renderTransactions(wallet, visibleTransactions)
+              ? renderTransactions(
+                  wallet,
+                  transactions,
+                )
               : `
                 <div class="empty">
                   No transactions found for this wallet.
@@ -1535,10 +1612,11 @@
                 <button
                   class="button"
                   type="button"
+                  data-show-more-address="${encodeURIComponent(wallet.address)}"
                   onclick="showMoreTransactions('${encodeURIComponent(wallet.address)}')"
                   style="width: 100%; margin-top: 14px;"
                 >
-                  Show more (${visibleCount} of ${transactions.length})
+                  Show more (${visibleCount} of ${total})
                 </button>
               `
               : ''