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() {
@@ -149,7 +150,11 @@ function refreshAddressCache(
   return refresh
 }
 
-function queryFulcrum(fulcrumUrl, method, params = []) {
+function queryFulcrum(
+  fulcrumUrl,
+  method,
+  params = [],
+) {
   return new Promise((resolve) => {
     if (!fulcrumUrl) {
       resolve({
@@ -225,7 +230,9 @@ function queryFulcrum(fulcrumUrl, method, params = []) {
           params,
         }) + '\n'
 
-      console.log(`Sending Fulcrum request: ${request.trim()}`)
+      console.log(
+        `Sending Fulcrum request: ${request.trim()}`,
+      )
 
       socket.write(request)
     })
@@ -233,7 +240,9 @@ function queryFulcrum(fulcrumUrl, method, params = []) {
     socket.on('data', (data) => {
       const chunk = data.toString()
 
-      console.log(`Fulcrum response data: ${chunk.trim()}`)
+      console.log(
+        `Fulcrum response data: ${chunk.trim()}`,
+      )
 
       response += chunk
 
@@ -316,15 +325,19 @@ function queryFulcrum(fulcrumUrl, method, params = []) {
         finish({
           ok: false,
           result: null,
-          error: 'Connection closed before a response was received',
+          error:
+            'Connection closed before a response was received',
         })
       }
     })
   })
 }
 
-async function getFulcrumStatus(fulcrumUrl) {
-  const version = await queryFulcrum(
+async function getFulcrumStatus(
+  fulcrumUrl,
+) {
+  const version =
+    await queryFulcrum(
       fulcrumUrl,
       'server.version',
       ['Munin Bitcoin', '1.4'],
@@ -332,7 +345,9 @@ async function getFulcrumStatus(fulcrumUrl) {
 
   if (!version.ok) {
     return {
-      configured: Boolean(fulcrumUrl),
+      configured: Boolean(
+        fulcrumUrl,
+      ),
       connected: false,
       url: fulcrumUrl,
       serverVersion: null,
@@ -341,28 +356,43 @@ async function getFulcrumStatus(fulcrumUrl) {
     }
   }
 
-  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.result.height ?? null
+      headers.ok &&
+      headers.result
+        ? headers.result.height ??
+          null
         : null,
-    error: headers.ok ? null : headers.error,
+    error:
+      headers.ok
+        ? null
+        : headers.error,
   }
 }
 
 async function getStatus() {
-  const fulcrumUrl = process.env.MUNIN_FULCRUM_URL || null
-  const fulcrum = await getFulcrumStatus(fulcrumUrl)
+  const fulcrumUrl =
+    process.env.MUNIN_FULCRUM_URL ||
+    null
+
+  const fulcrum =
+    await getFulcrumStatus(
+      fulcrumUrl,
+    )
 
   return {
     service: 'running',
@@ -379,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(
@@ -387,7 +418,8 @@ async function getAddressDataFromFulcrum(
     )
   }
 
-  const balance = await queryFulcrum(
+  const balance =
+    await queryFulcrum(
       fulcrumUrl,
       'blockchain.scripthash.get_balance',
       [scripthash],
@@ -399,7 +431,8 @@ async function getAddressDataFromFulcrum(
     )
   }
 
-  const utxos = await queryFulcrum(
+  const utxos =
+    await queryFulcrum(
       fulcrumUrl,
       'blockchain.scripthash.listunspent',
       [scripthash],
@@ -411,7 +444,8 @@ async function getAddressDataFromFulcrum(
     )
   }
 
-  const history = await queryFulcrum(
+  const history =
+    await queryFulcrum(
       fulcrumUrl,
       'blockchain.scripthash.get_history',
       [scripthash],
@@ -427,15 +461,25 @@ async function getAddressDataFromFulcrum(
     address,
     scripthash,
     confirmedBalance:
-      Number(balance.result?.confirmed || 0),
+      Number(
+        balance.result?.confirmed ||
+          0,
+      ),
     unconfirmedBalance:
-      Number(balance.result?.unconfirmed || 0),
+      Number(
+        balance.result?.unconfirmed ||
+          0,
+      ),
     utxos:
-      Array.isArray(utxos.result)
+      Array.isArray(
+        utxos.result,
+      )
         ? utxos.result
         : [],
     history:
-      Array.isArray(history.result)
+      Array.isArray(
+        history.result,
+      )
         ? history.result
         : [],
     lastSynced:
@@ -443,12 +487,16 @@ async function getAddressDataFromFulcrum(
   }
 }
 
-async function getAddressData(address) {
+async function getAddressData(
+  address,
+) {
   let scripthash
 
   try {
     scripthash =
-      addressToScripthash(address)
+      addressToScripthash(
+        address,
+      )
   } catch (error) {
     throw new Error(
       error instanceof Error
@@ -458,7 +506,9 @@ async function getAddressData(address) {
   }
 
   const cached =
-    readAddressCache(scripthash)
+    readAddressCache(
+      scripthash,
+    )
 
   if (cached) {
     if (
@@ -490,25 +540,80 @@ async function getAddressData(address) {
   }
 }
 
+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 addresses =
+    await listAddresses()
+
   const results = []
 
   for (const entry of addresses) {
     try {
-      const data = await getAddressData(entry.address)
+      const data =
+        await getAddressData(
+          entry.address,
+        )
+
+      const history =
+        Array.isArray(
+          data.history,
+        )
+          ? data.history
+          : []
 
       results.push({
         ...entry,
-        scripthash: data.scripthash,
-        confirmedBalance: data.confirmedBalance,
-        unconfirmedBalance: data.unconfirmedBalance,
-        utxos: data.utxos,
-        history: data.history,
+        scripthash:
+          data.scripthash,
+        confirmedBalance:
+          data.confirmedBalance,
+        unconfirmedBalance:
+          data.unconfirmedBalance,
+        utxos:
+          data.utxos,
+        history:
+          getAddressTransactionPage(
+            history,
+          ),
+        transactionCount:
+          history.length,
+        transactionOffset: 0,
+        transactionLimit:
+          addressTransactionPageSize,
         lastSynced:
-          data.lastSynced || null,
+          data.lastSynced ||
+          null,
         cacheAgeMs:
-          Number(data.cacheAgeMs || 0),
+          Number(
+            data.cacheAgeMs || 0,
+          ),
         error: null,
       })
     } catch (error) {
@@ -518,6 +623,10 @@ async function getAddressesWithData() {
         unconfirmedBalance: null,
         utxos: [],
         history: [],
+        transactionCount: 0,
+        transactionOffset: 0,
+        transactionLimit:
+          addressTransactionPageSize,
         lastSynced: null,
         cacheAgeMs: null,
         error:
@@ -531,8 +640,13 @@ async function getAddressesWithData() {
   return results
 }
 
-const server = http.createServer(async (req, res) => {
-  if (req.method === 'POST' && req.url === '/api/login') {
+const server =
+  http.createServer(
+    async (req, res) => {
+      if (
+        req.method === 'POST' &&
+        req.url === '/api/login'
+      ) {
         let body = ''
 
         req.on('data', (chunk) => {
@@ -541,29 +655,40 @@ const server = http.createServer(async (req, res) => {
 
         req.on('end', () => {
           try {
-        const input = JSON.parse(body)
+            const input =
+              JSON.parse(body)
 
-        if (!checkPassword(input.password)) {
+            if (
+              !checkPassword(
+                input.password,
+              )
+            ) {
               res.writeHead(401, {
-            'Content-Type': 'application/json',
+                'Content-Type':
+                  'application/json',
               })
 
               res.end(
                 JSON.stringify({
-              error: 'Invalid password',
+                  error:
+                    'Invalid password',
                 }),
               )
 
               return
             }
 
-        const token = createSession()
+            const token =
+              createSession()
 
             res.writeHead(200, {
-          'Content-Type': 'application/json',
+              'Content-Type':
+                'application/json',
               'Set-Cookie':
                 'munin_session=' +
-            encodeURIComponent(token) +
+                encodeURIComponent(
+                  token,
+                ) +
                 '; HttpOnly; Secure; SameSite=Strict; Path=/; Max-Age=86400',
             })
 
@@ -574,12 +699,14 @@ const server = http.createServer(async (req, res) => {
             )
           } catch {
             res.writeHead(400, {
-          'Content-Type': 'application/json',
+              'Content-Type':
+                'application/json',
             })
 
             res.end(
               JSON.stringify({
-            error: 'Invalid request',
+                error:
+                  'Invalid request',
               }),
             )
           }
@@ -588,15 +715,22 @@ const server = http.createServer(async (req, res) => {
         return
       }
 
-  if (req.url === '/api/status') {
-    if (!isValidSession(req)) {
+      if (
+        req.url ===
+        '/api/status'
+      ) {
+        if (
+          !isValidSession(req)
+        ) {
           res.writeHead(401, {
-        'Content-Type': 'application/json',
+            'Content-Type':
+              'application/json',
           })
 
           res.end(
             JSON.stringify({
-          error: 'Authentication required',
+              error:
+                'Authentication required',
             }),
           )
 
@@ -604,13 +738,19 @@ const server = http.createServer(async (req, res) => {
         }
 
         try {
-      const status = await getStatus()
+          const status =
+            await getStatus()
 
           res.writeHead(200, {
-        'Content-Type': 'application/json',
+            'Content-Type':
+              'application/json',
           })
 
-      res.end(JSON.stringify(status))
+          res.end(
+            JSON.stringify(
+              status,
+            ),
+          )
         } catch (error) {
           console.error(
             'Failed to get service status:',
@@ -618,13 +758,16 @@ const server = http.createServer(async (req, res) => {
           )
 
           res.writeHead(500, {
-        'Content-Type': 'application/json',
+            'Content-Type':
+              'application/json',
           })
 
           res.end(
             JSON.stringify({
-          service: 'running',
-          error: 'Failed to determine service status',
+              service:
+                'running',
+              error:
+                'Failed to determine service status',
             }),
           )
         }
@@ -632,15 +775,23 @@ const server = http.createServer(async (req, res) => {
         return
       }
 
-  if (req.method === 'GET' && req.url === '/api/addresses') {
-    if (!isValidSession(req)) {
+      if (
+        req.method === 'GET' &&
+        req.url ===
+          '/api/addresses'
+      ) {
+        if (
+          !isValidSession(req)
+        ) {
           res.writeHead(401, {
-        'Content-Type': 'application/json',
+            'Content-Type':
+              'application/json',
           })
 
           res.end(
             JSON.stringify({
-          error: 'Authentication required',
+              error:
+                'Authentication required',
             }),
           )
 
@@ -648,10 +799,12 @@ const server = http.createServer(async (req, res) => {
         }
 
         try {
-      const addresses = await listAddresses()
+          const addresses =
+            await listAddresses()
 
           res.writeHead(200, {
-        'Content-Type': 'application/json',
+            'Content-Type':
+              'application/json',
           })
 
           res.end(
@@ -666,12 +819,14 @@ const server = http.createServer(async (req, res) => {
           )
 
           res.writeHead(500, {
-        'Content-Type': 'application/json',
+            'Content-Type':
+              'application/json',
           })
 
           res.end(
             JSON.stringify({
-          error: 'Failed to list addresses',
+              error:
+                'Failed to list addresses',
             }),
           )
         }
@@ -681,16 +836,21 @@ const server = http.createServer(async (req, res) => {
 
       if (
         req.method === 'GET' &&
-    req.url === '/api/addresses/data'
+        req.url ===
+          '/api/addresses/data'
+      ) {
+        if (
+          !isValidSession(req)
         ) {
-    if (!isValidSession(req)) {
           res.writeHead(401, {
-        'Content-Type': 'application/json',
+            'Content-Type':
+              'application/json',
           })
 
           res.end(
             JSON.stringify({
-          error: 'Authentication required',
+              error:
+                'Authentication required',
             }),
           )
 
@@ -698,10 +858,12 @@ const server = http.createServer(async (req, res) => {
         }
 
         try {
-      const addresses = await getAddressesWithData()
+          const addresses =
+            await getAddressesWithData()
 
           res.writeHead(200, {
-        'Content-Type': 'application/json',
+            'Content-Type':
+              'application/json',
           })
 
           res.end(
@@ -716,12 +878,155 @@ const server = http.createServer(async (req, res) => {
           )
 
           res.writeHead(500, {
-        'Content-Type': 'application/json',
+            'Content-Type':
+              'application/json',
           })
 
           res.end(
             JSON.stringify({
-          error: 'Failed to get address data',
+              error:
+                'Failed to get address data',
+            }),
+          )
+        }
+
+        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',
             }),
           )
         }
@@ -731,16 +1036,21 @@ const server = http.createServer(async (req, res) => {
 
       if (
         req.method === 'POST' &&
-    req.url === '/api/addresses'
+        req.url ===
+          '/api/addresses'
+      ) {
+        if (
+          !isValidSession(req)
         ) {
-    if (!isValidSession(req)) {
           res.writeHead(401, {
-        'Content-Type': 'application/json',
+            'Content-Type':
+              'application/json',
           })
 
           res.end(
             JSON.stringify({
-          error: 'Authentication required',
+              error:
+                'Authentication required',
             }),
           )
 
@@ -753,23 +1063,33 @@ const server = http.createServer(async (req, res) => {
           body += chunk
         })
 
-    req.on('end', async () => {
+        req.on(
+          'end',
+          async () => {
             try {
-        const input = JSON.parse(body)
+              const input =
+                JSON.parse(body)
 
-        const entry = await addAddress(
+              const entry =
+                await addAddress(
                   input.address,
                   input.label,
                 )
 
               res.writeHead(201, {
-          'Content-Type': 'application/json',
+                'Content-Type':
+                  'application/json',
               })
 
-        res.end(JSON.stringify(entry))
+              res.end(
+                JSON.stringify(
+                  entry,
+                ),
+              )
             } catch (error) {
               res.writeHead(400, {
-          'Content-Type': 'application/json',
+                'Content-Type':
+                  'application/json',
               })
 
               res.end(
@@ -781,23 +1101,29 @@ const server = http.createServer(async (req, res) => {
                 }),
               )
             }
-    })
+          },
+        )
 
         return
       }
 
       if (
         req.method === 'DELETE' &&
-    req.url === '/api/addresses'
+        req.url ===
+          '/api/addresses'
+      ) {
+        if (
+          !isValidSession(req)
         ) {
-    if (!isValidSession(req)) {
           res.writeHead(401, {
-        'Content-Type': 'application/json',
+            'Content-Type':
+              'application/json',
           })
 
           res.end(
             JSON.stringify({
-          error: 'Authentication required',
+              error:
+                'Authentication required',
             }),
           )
 
@@ -810,14 +1136,20 @@ const server = http.createServer(async (req, res) => {
           body += chunk
         })
 
-    req.on('end', async () => {
+        req.on(
+          'end',
+          async () => {
             try {
-        const input = JSON.parse(body)
+              const input =
+                JSON.parse(body)
 
-        await removeAddress(input.address)
+              await removeAddress(
+                input.address,
+              )
 
               res.writeHead(200, {
-          'Content-Type': 'application/json',
+                'Content-Type':
+                  'application/json',
               })
 
               res.end(
@@ -827,7 +1159,8 @@ const server = http.createServer(async (req, res) => {
               )
             } catch (error) {
               res.writeHead(400, {
-          'Content-Type': 'application/json',
+                'Content-Type':
+                  'application/json',
               })
 
               res.end(
@@ -839,44 +1172,64 @@ const server = http.createServer(async (req, res) => {
                 }),
               )
             }
-    })
+          },
+        )
 
         return
       }
 
       if (
         req.method === 'GET' &&
-    req.url.startsWith('/api/transactions/')
+        req.url.startsWith(
+          '/api/transactions/',
+        )
+      ) {
+        if (
+          !isValidSession(req)
         ) {
-    if (!isValidSession(req)) {
           res.writeHead(401, {
-        'Content-Type': 'application/json',
+            'Content-Type':
+              'application/json',
           })
 
           res.end(
             JSON.stringify({
-          error: 'Authentication required',
+              error:
+                'Authentication required',
             }),
           )
 
           return
         }
 
-    const txid = decodeURIComponent(
-      req.url.slice('/api/transactions/'.length),
+        const txid =
+          decodeURIComponent(
+            req.url.slice(
+              '/api/transactions/'
+                .length,
+            ),
           )
 
         try {
-      const transaction = await getTransaction(txid)
+          const transaction =
+            await getTransaction(
+              txid,
+            )
 
           res.writeHead(200, {
-        'Content-Type': 'application/json',
+            'Content-Type':
+              'application/json',
           })
 
-      res.end(JSON.stringify(transaction))
+          res.end(
+            JSON.stringify(
+              transaction,
+            ),
+          )
         } catch (error) {
           res.writeHead(400, {
-        'Content-Type': 'application/json',
+            'Content-Type':
+              'application/json',
           })
 
           res.end(
@@ -894,10 +1247,14 @@ const server = http.createServer(async (req, res) => {
 
       res.writeHead(404)
       res.end('Not found')
-})
+    },
+  )
 
-server.listen(port, () => {
+server.listen(
+  port,
+  () => {
     console.log(
       `Status API listening on port ${port}`,
     )
-})
+  },
+)

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) {
-      const transactions = getWalletTransactions(wallet);
+    async function showMoreTransactions(encodedAddress) {
+      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,
     ) {