diff --git a/web/index.html b/web/index.html index bb4b949..a940dac 100644 --- a/web/index.html +++ b/web/index.html @@ -221,7 +221,7 @@ .wallet-header { display: grid; - grid-template-columns: minmax(0, 1fr) auto auto auto; + grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 24px; width: 100%; @@ -281,13 +281,6 @@ 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); @@ -1081,6 +1074,38 @@ } } + 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'; @@ -1401,10 +1426,8 @@ const lastActivity = getTransactionDateForLatest(wallet, latest); const lastActivityText = lastActivity - ? formatDate(lastActivity) - : latest - ? `Block ${latest.height}` - : 'No activity'; + ? formatDateDateOnly(lastActivity) + : 'No activity'; return `
@@ -1442,10 +1465,6 @@ ${escapeHtml(lastActivityText)} - -
- ${expanded ? 'v' : '>'} -
${ @@ -1485,11 +1504,7 @@ return `
-

Transactions

- - - ${transactionCount} - +

Transactions (${transactionCount})

${ @@ -1524,10 +1539,7 @@ const dateText = timestamp ? formatDate(timestamp) - : transaction.height === null || - transaction.height === undefined - ? 'Pending' - : `Block ${transaction.height}`; + : 'Loading...'; const directionLabel = display.direction === 'sent' ? 'Sent' : 'Received'; @@ -1754,32 +1766,22 @@ const transactions = getWalletTransactions(wallet); - /* - * Only the latest transaction is loaded - * immediately. The remaining transactions - * are fetched when the user opens them. - * - * This keeps a wallet with many transactions - * from creating dozens of Fulcrum requests - * just by opening it. - */ - if (!transactions.length) { return; } - const latest = - transactions[0]; - - if ( - !getTransactionFromCache( - latest.txid, - ) - ) { - await loadTransaction( - latest.txid, - ); - } + /* + * 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(