Connect wallet transaction pagination to server API

Add paginated address transaction API

server/status.js

@@ -27,6 +27,7 @@ const path = require('path')
 
 const addressCacheDir = '/data/cache/addresses'
 const addressCacheMaxAgeMs = 60000
+const addressTransactionPageSize = 50
 const addressRefreshes = new Map()
 
 function ensureAddressCacheDir() {
@@ -335,7 +336,8 @@ function queryFulcrum(
 async function getFulcrumStatus(
   fulcrumUrl,
 ) {
-  const version = await queryFulcrum(
+  const version =
+    await queryFulcrum(
       fulcrumUrl,
       'server.version',
       ['Munin Bitcoin', '1.4'],
@@ -343,7 +345,9 @@ async function getFulcrumStatus(
 
   if (!version.ok) {
     return {
-      configured: Boolean(fulcrumUrl),
+      configured: Boolean(
+        fulcrumUrl,
+      ),
       connected: false,
       url: fulcrumUrl,
       serverVersion: null,
@@ -352,22 +356,29 @@ async function getFulcrumStatus(
     }
   }
 
-  const headers = await queryFulcrum(
+  const headers =
+    await queryFulcrum(
       fulcrumUrl,
       'blockchain.headers.subscribe',
       [],
     )
 
   return {
-    configured: Boolean(fulcrumUrl),
+    configured: Boolean(
+      fulcrumUrl,
+    ),
     connected: true,
     url: fulcrumUrl,
-    serverVersion: version.result,
+    serverVersion:
+      version.result,
     blockchainHeight:
-      headers.ok && headers.result
+      headers.ok &&
-        ? headers.result.height ?? null
+      headers.result
+        ? headers.result.height ??
+          null
         : null,
-    error: headers.ok
+    error:
+      headers.ok
         ? null
         : headers.error,
   }
@@ -375,7 +386,8 @@ async function getFulcrumStatus(
 
 async function getStatus() {
   const fulcrumUrl =
-    process.env.MUNIN_FULCRUM_URL || null
+    process.env.MUNIN_FULCRUM_URL ||
+    null
 
   const fulcrum =
     await getFulcrumStatus(
@@ -397,7 +409,8 @@ async function getAddressDataFromFulcrum(
   scripthash,
 ) {
   const fulcrumUrl =
-    process.env.MUNIN_FULCRUM_URL || null
+    process.env.MUNIN_FULCRUM_URL ||
+    null
 
   if (!fulcrumUrl) {
     throw new Error(
@@ -405,7 +418,8 @@ async function getAddressDataFromFulcrum(
     )
   }
 
-  const balance = await queryFulcrum(
+  const balance =
+    await queryFulcrum(
       fulcrumUrl,
       'blockchain.scripthash.get_balance',
       [scripthash],
@@ -417,7 +431,8 @@ async function getAddressDataFromFulcrum(
     )
   }
 
-  const utxos = await queryFulcrum(
+  const utxos =
+    await queryFulcrum(
       fulcrumUrl,
       'blockchain.scripthash.listunspent',
       [scripthash],
@@ -429,7 +444,8 @@ async function getAddressDataFromFulcrum(
     )
   }
 
-  const history = await queryFulcrum(
+  const history =
+    await queryFulcrum(
       fulcrumUrl,
       'blockchain.scripthash.get_history',
       [scripthash],
@@ -446,11 +462,13 @@ async function getAddressDataFromFulcrum(
     scripthash,
     confirmedBalance:
       Number(
-        balance.result?.confirmed || 0,
+        balance.result?.confirmed ||
+          0,
       ),
     unconfirmedBalance:
       Number(
-        balance.result?.unconfirmed || 0,
+        balance.result?.unconfirmed ||
+          0,
       ),
     utxos:
       Array.isArray(
@@ -522,21 +540,54 @@ async function getAddressData(
   }
 }
 
+function getAddressTransactionPage(
+  history,
+  offset = 0,
+  limit =
+    addressTransactionPageSize,
+) {
+  const safeOffset =
+    Math.max(
+      0,
+      Number(offset) || 0,
+    )
+
+  const safeLimit =
+    Math.min(
+      addressTransactionPageSize,
+      Math.max(
+        1,
+        Number(limit) ||
+          addressTransactionPageSize,
+      ),
+    )
+
+  return history.slice(
+    safeOffset,
+    safeOffset + safeLimit,
+  )
+}
+
 async function getAddressesWithData() {
   const addresses =
     await listAddresses()
 
   const results = []
 
-  for (
+  for (const entry of addresses) {
-    const entry of addresses
-  ) {
     try {
       const data =
         await getAddressData(
           entry.address,
         )
 
+      const history =
+        Array.isArray(
+          data.history,
+        )
+          ? data.history
+          : []
+
       results.push({
         ...entry,
         scripthash:
@@ -548,26 +599,34 @@ async function getAddressesWithData() {
         utxos:
           data.utxos,
         history:
-          data.history,
+          getAddressTransactionPage(
+            history,
+          ),
+        transactionCount:
+          history.length,
+        transactionOffset: 0,
+        transactionLimit:
+          addressTransactionPageSize,
         lastSynced:
           data.lastSynced ||
           null,
         cacheAgeMs:
           Number(
-            data.cacheAgeMs ||
+            data.cacheAgeMs || 0,
-            0,
           ),
         error: null,
       })
     } catch (error) {
       results.push({
         ...entry,
-        confirmedBalance:
+        confirmedBalance: null,
-          null,
+        unconfirmedBalance: null,
-        unconfirmedBalance:
-          null,
         utxos: [],
         history: [],
+        transactionCount: 0,
+        transactionOffset: 0,
+        transactionLimit:
+          addressTransactionPageSize,
         lastSynced: null,
         cacheAgeMs: null,
         error:
@@ -604,13 +663,10 @@ const server =
                 input.password,
               )
             ) {
-              res.writeHead(
+              res.writeHead(401, {
-                401,
-                {
                 'Content-Type':
                   'application/json',
-                },
+              })
-              )
 
               res.end(
                 JSON.stringify({
@@ -625,9 +681,7 @@ const server =
             const token =
               createSession()
 
-            res.writeHead(
+            res.writeHead(200, {
-              200,
-              {
               'Content-Type':
                 'application/json',
               'Set-Cookie':
@@ -636,8 +690,7 @@ const server =
                   token,
                 ) +
                 '; HttpOnly; Secure; SameSite=Strict; Path=/; Max-Age=86400',
-              },
+            })
-            )
 
             res.end(
               JSON.stringify({
@@ -645,13 +698,10 @@ const server =
               }),
             )
           } catch {
-            res.writeHead(
+            res.writeHead(400, {
-              400,
-              {
               'Content-Type':
                 'application/json',
-              },
+            })
-            )
 
             res.end(
               JSON.stringify({
@@ -672,13 +722,10 @@ const server =
         if (
           !isValidSession(req)
         ) {
-          res.writeHead(
+          res.writeHead(401, {
-            401,
-            {
             'Content-Type':
               'application/json',
-            },
+          })
-          )
 
           res.end(
             JSON.stringify({
@@ -694,13 +741,10 @@ const server =
           const status =
             await getStatus()
 
-          res.writeHead(
+          res.writeHead(200, {
-            200,
-            {
             'Content-Type':
               'application/json',
-            },
+          })
-          )
 
           res.end(
             JSON.stringify(
@@ -713,13 +757,10 @@ const server =
             error,
           )
 
-          res.writeHead(
+          res.writeHead(500, {
-            500,
-            {
             'Content-Type':
               'application/json',
-            },
+          })
-          )
 
           res.end(
             JSON.stringify({
@@ -742,13 +783,10 @@ const server =
         if (
           !isValidSession(req)
         ) {
-          res.writeHead(
+          res.writeHead(401, {
-            401,
-            {
             'Content-Type':
               'application/json',
-            },
+          })
-          )
 
           res.end(
             JSON.stringify({
@@ -764,13 +802,10 @@ const server =
           const addresses =
             await listAddresses()
 
-          res.writeHead(
+          res.writeHead(200, {
-            200,
-            {
             'Content-Type':
               'application/json',
-            },
+          })
-          )
 
           res.end(
             JSON.stringify({
@@ -783,13 +818,10 @@ const server =
             error,
           )
 
-          res.writeHead(
+          res.writeHead(500, {
-            500,
-            {
             'Content-Type':
               'application/json',
-            },
+          })
-          )
 
           res.end(
             JSON.stringify({
@@ -810,13 +842,10 @@ const server =
         if (
           !isValidSession(req)
         ) {
-          res.writeHead(
+          res.writeHead(401, {
-            401,
-            {
             'Content-Type':
               'application/json',
-            },
+          })
-          )
 
           res.end(
             JSON.stringify({
@@ -832,13 +861,10 @@ const server =
           const addresses =
             await getAddressesWithData()
 
-          res.writeHead(
+          res.writeHead(200, {
-            200,
-            {
             'Content-Type':
               'application/json',
-            },
+          })
-          )
 
           res.end(
             JSON.stringify({
@@ -851,13 +877,10 @@ const server =
             error,
           )
 
-          res.writeHead(
+          res.writeHead(500, {
-            500,
-            {
             'Content-Type':
               'application/json',
-            },
+          })
-          )
 
           res.end(
             JSON.stringify({
@@ -870,6 +893,147 @@ const server =
         return
       }
 
+      if (
+        req.method === 'GET' &&
+        req.url.startsWith(
+          '/api/addresses/transactions',
+        )
+      ) {
+        if (
+          !isValidSession(req)
+        ) {
+          res.writeHead(401, {
+            'Content-Type':
+              'application/json',
+          })
+
+          res.end(
+            JSON.stringify({
+              error:
+                'Authentication required',
+            }),
+          )
+
+          return
+        }
+
+        try {
+          const url =
+            new URL(
+              req.url,
+              `http://${
+                req.headers.host ||
+                'localhost'
+              }`,
+            )
+
+          const address =
+            url.searchParams.get(
+              'address',
+            )
+
+          if (!address) {
+            throw new Error(
+              'Address is required',
+            )
+          }
+
+          const offset =
+            Math.max(
+              0,
+              Number(
+                url.searchParams.get(
+                  'offset',
+                ),
+              ) || 0,
+            )
+
+          const limit =
+            Math.min(
+              addressTransactionPageSize,
+              Math.max(
+                1,
+                Number(
+                  url.searchParams.get(
+                    'limit',
+                  ),
+                ) ||
+                  addressTransactionPageSize,
+              ),
+            )
+
+          const data =
+            await getAddressData(
+              address,
+            )
+
+          const history =
+            Array.isArray(
+              data.history,
+            )
+              ? data.history
+              : []
+
+          const transactions =
+            getAddressTransactionPage(
+              history,
+              offset,
+              limit,
+            )
+
+          res.writeHead(200, {
+            'Content-Type':
+              'application/json',
+          })
+
+          res.end(
+            JSON.stringify({
+              address,
+              scripthash:
+                data.scripthash,
+              transactions,
+              total:
+                history.length,
+              offset,
+              limit,
+              hasMore:
+                offset +
+                  transactions.length <
+                history.length,
+              lastSynced:
+                data.lastSynced ||
+                null,
+              cacheAgeMs:
+                Number(
+                  data.cacheAgeMs ||
+                    0,
+                ),
+            }),
+          )
+        } catch (error) {
+          console.error(
+            'Failed to get address transactions:',
+            error,
+          )
+
+          res.writeHead(400, {
+            'Content-Type':
+              'application/json',
+          })
+
+          res.end(
+            JSON.stringify({
+              error:
+                error instanceof Error
+                  ? error.message
+                  : 'Failed to get address transactions',
+            }),
+          )
+        }
+
+        return
+      }
+
       if (
         req.method === 'POST' &&
         req.url ===
@@ -878,13 +1042,10 @@ const server =
         if (
           !isValidSession(req)
         ) {
-          res.writeHead(
+          res.writeHead(401, {
-            401,
-            {
             'Content-Type':
               'application/json',
-            },
+          })
-          )
 
           res.end(
             JSON.stringify({
@@ -915,13 +1076,10 @@ const server =
                   input.label,
                 )
 
-              res.writeHead(
+              res.writeHead(201, {
-                201,
-                {
                 'Content-Type':
                   'application/json',
-                },
+              })
-              )
 
               res.end(
                 JSON.stringify(
@@ -929,13 +1087,10 @@ const server =
                 ),
               )
             } catch (error) {
-              res.writeHead(
+              res.writeHead(400, {
-                400,
-                {
                 'Content-Type':
                   'application/json',
-                },
+              })
-              )
 
               res.end(
                 JSON.stringify({
@@ -960,13 +1115,10 @@ const server =
         if (
           !isValidSession(req)
         ) {
-          res.writeHead(
+          res.writeHead(401, {
-            401,
-            {
             'Content-Type':
               'application/json',
-            },
+          })
-          )
 
           res.end(
             JSON.stringify({
@@ -995,13 +1147,10 @@ const server =
                 input.address,
               )
 
-              res.writeHead(
+              res.writeHead(200, {
-                200,
-                {
                 'Content-Type':
                   'application/json',
-                },
+              })
-              )
 
               res.end(
                 JSON.stringify({
@@ -1009,13 +1158,10 @@ const server =
                 }),
               )
             } catch (error) {
-              res.writeHead(
+              res.writeHead(400, {
-                400,
-                {
                 'Content-Type':
                   'application/json',
-                },
+              })
-              )
 
               res.end(
                 JSON.stringify({
@@ -1041,13 +1187,10 @@ const server =
         if (
           !isValidSession(req)
         ) {
-          res.writeHead(
+          res.writeHead(401, {
-            401,
-            {
             'Content-Type':
               'application/json',
-            },
+          })
-          )
 
           res.end(
             JSON.stringify({
@@ -1073,13 +1216,10 @@ const server =
               txid,
             )
 
-          res.writeHead(
+          res.writeHead(200, {
-            200,
-            {
             'Content-Type':
               'application/json',
-            },
+          })
-          )
 
           res.end(
             JSON.stringify(
@@ -1087,13 +1227,10 @@ const server =
             ),
           )
         } catch (error) {
-          res.writeHead(
+          res.writeHead(400, {
-            400,
-            {
             'Content-Type':
               'application/json',
-            },
+          })
-          )
 
           res.end(
             JSON.stringify({

web/index.html

@@ -221,7 +221,7 @@
 
     .wallet-header {
       display: grid;
-      grid-template-columns: minmax(0, 1fr) auto auto;
+      grid-template-columns: minmax(0, 1fr) auto auto auto;
       align-items: center;
       gap: 24px;
       width: 100%;
@@ -281,6 +281,13 @@
       font-weight: 650;
     }
 
+    .wallet-chevron {
+      width: 20px;
+      color: var(--muted);
+      text-align: center;
+      font-size: 18px;
+    }
+
     .wallet-content {
       padding: 0 18px 18px;
       border-top: 1px solid var(--border);
@@ -503,9 +510,6 @@
       text-align: right;
     }
 
-    .transaction-chevron {
-      display: none;
-    }
 
     /* Login */
 
@@ -870,6 +874,7 @@
 
     const expandedWallets = new Set();
     const expandedTransactions = new Set();
+    const visibleTransactionCounts = new Map();
 
     const transactionCache = new Map();
 
@@ -1074,38 +1079,6 @@
       }
     }
 
-    function formatDateDateOnly(timestamp) {
-      const value = Number(timestamp);
-
-      if (!Number.isFinite(value)) {
-        return 'Unknown';
-      }
-
-      const date = new Date(value * 1000);
-
-      if (Number.isNaN(date.getTime())) {
-        return 'Unknown';
-      }
-
-      const pad = (number) => String(number).padStart(2, '0');
-      const year = date.getFullYear();
-      const shortYear = String(year).slice(-2);
-      const month = pad(date.getMonth() + 1);
-      const day = pad(date.getDate());
-
-      switch (dateFormat) {
-        case 'DD.MM.YYYY HH:MM':
-        case 'DD.MM.YY HH:MM':
-          return `${day}.${month}.${dateFormat.includes('YYYY') ? year : shortYear}`;
-        case 'YYYY-MM-DD HH:MM':
-          return `${year}-${month}-${day}`;
-        case 'MM/DD/YY HH:MM':
-          return `${month}/${day}/${shortYear}`;
-        default:
-          return `${day}.${month}.${shortYear}`;
-      }
-    }
-
     function formatSyncAge(date) {
       if (!date) {
         return 'Not synced';
@@ -1426,7 +1399,9 @@
       const lastActivity = getTransactionDateForLatest(wallet, latest);
 
       const lastActivityText = lastActivity
-        ? formatDateDateOnly(lastActivity)
+        ? formatDate(lastActivity)
+        : latest
+          ? `Block ${latest.height}`
           : 'No activity';
 
       return `
@@ -1465,6 +1440,10 @@
                 ${escapeHtml(lastActivityText)}
               </div>
             </div>
+
+            <div class="wallet-chevron">
+              ${expanded ? 'v' : '>'}
+            </div>
           </button>
 
           ${
@@ -1498,8 +1477,115 @@
       });
     }
 
-    function renderWalletContent(wallet, transactionCount) {
+    async function showMoreTransactions(encodedAddress) {
-      const transactions = getWalletTransactions(wallet);
+      const address =
+        decodeURIComponent(
+          encodedAddress,
+        );
+
+      const wallet =
+        wallets.find(
+          (item) =>
+            item.address === address,
+        );
+
+      if (!wallet) {
+        return;
+      }
+
+      const current =
+        getWalletTransactions(wallet).length;
+
+      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 =
+        transactions.length;
+
+      const total =
+        Number(wallet.transactionCount) ||
+        transactions.length;
+
+      const hasMore =
+        visibleCount < total;
 
       return `
         <div class="wallet-content">
@@ -1509,13 +1595,32 @@
 
           ${
             transactions.length
-              ? renderTransactions(wallet, transactions)
+              ? renderTransactions(
+                  wallet,
+                  transactions,
+                )
               : `
                 <div class="empty">
                   No transactions found for this wallet.
                 </div>
               `
           }
+
+          ${
+            hasMore
+              ? `
+                <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 ${total})
+                </button>
+              `
+              : ''
+          }
         </div>
       `;
     }
@@ -1539,7 +1644,10 @@
 
       const dateText = timestamp
         ? formatDate(timestamp)
-        : 'Loading...';
+        : transaction.height === null ||
+            transaction.height === undefined
+          ? 'Pending'
+          : `Block ${transaction.height}`;
 
       const directionLabel =
         display.direction === 'sent' ? 'Sent' : 'Received';
@@ -1710,19 +1818,6 @@
 
       renderWallets();
 
-      const wallet =
-        wallets.find(
-          (item) =>
-            item.address === address,
-        );
-
-      if (!wallet) {
-        return;
-      }
-
-      await loadWalletTransactionDetails(
-        wallet,
-      );
     }
 
     async function toggleTransaction(
@@ -1760,30 +1855,6 @@
       await loadTransaction(txid);
     }
 
-    async function loadWalletTransactionDetails(
-      wallet,
-    ) {
-      const transactions =
-        getWalletTransactions(wallet);
-
-      if (!transactions.length) {
-        return;
-      }
-
-      /*
-       * Load transaction details in parallel so the
-       * list can populate dates and amounts without
-       * requiring the user to open each transaction.
-       *
-       * Cached transactions are skipped by loadTransaction().
-       */
-      await Promise.all(
-        transactions.map((transaction) =>
-          loadTransaction(transaction.txid),
-        ),
-      );
-    }
-
     async function loadTransaction(
       txid,
     ) {