Page MenuHomePhabricator
Differential D18613

[Cashtab] Paginated tx history
ClosedPublic
Actions

Authored by bytesofman on Sep 14 2025, 20:32.

Details

Reviewers
PiRK
Group Reviewers
Restricted Project
Commits
rABC8c62b1aa8fc3: [Cashtab] Paginated tx history
Summary

Implement paginated tx history in Cashtab

Test Plan

npm test, this is live at cashtab.io

Diff Detail

Repository
rABC Bitcoin ABC
Lint
Lint Not Applicable
Unit
Tests Not Applicable

Event Timeline

bytesofman created this revision.Sep 14 2025, 20:32
Herald added a reviewer: Restricted Project. · View Herald TranscriptSep 14 2025, 20:32
Harbormaster completed remote builds in B34432: Diff 55639.Sep 14 2025, 20:38
bytesofman updated this revision to Diff 55696.Sep 16 2025, 12:34

rebase

bytesofman updated this revision to Diff 55701.Sep 16 2025, 12:58

simplifying on rebase

Harbormaster completed remote builds in B34468: Diff 55701.Sep 16 2025, 12:58
bytesofman updated this revision to Diff 55705.Sep 16 2025, 13:02

lint

bytesofman edited the summary of this revision. (Show Details)Sep 16 2025, 13:02
Harbormaster completed remote builds in B34463: Diff 55696.Sep 16 2025, 13:05
bytesofman updated this revision to Diff 55709.Sep 16 2025, 13:14

update tests, lose magic numbers

bytesofman updated this revision to Diff 55710.Sep 16 2025, 13:19

improved component organization

teamcity added a comment.Sep 16 2025, 13:24
Build Bitcoin ABC Diffs / Diff Testing (cashtab-tests) failed.

Failed tests logs:

====== CashTab Unit Tests: Cashtab chronik.js functions We can get and parse tx history from path 1899, and update the token cache at the same time ======
TypeError: (0 , _chronik.getHistory) is not a function
    at Object.<anonymous> (/work/cashtab/src/chronik/__tests__/index.test.js:262:49)
    at Promise.then.completed (/work/cashtab/node_modules/jest-circus/build/utils.js:298:28)
    at new Promise (<anonymous>)
    at callAsyncCircusFn (/work/cashtab/node_modules/jest-circus/build/utils.js:231:10)
    at _callCircusTest (/work/cashtab/node_modules/jest-circus/build/run.js:316:40)
    at processTicksAndRejections (node:internal/process/task_queues:105:5)
    at _runTest (/work/cashtab/node_modules/jest-circus/build/run.js:252:3)
    at _runTestsForDescribeBlock (/work/cashtab/node_modules/jest-circus/build/run.js:126:9)
    at _runTestsForDescribeBlock (/work/cashtab/node_modules/jest-circus/build/run.js:121:9)
    at run (/work/cashtab/node_modules/jest-circus/build/run.js:71:3)
    at runAndTransformResultsToJestFormat (/work/cashtab/node_modules/jest-circus/build/legacy-code-todo-rewrite/jestAdapterInit.js:122:21)
    at jestAdapter (/work/cashtab/node_modules/jest-circus/build/legacy-code-todo-rewrite/jestAdapter.js:79:19)
    at runTestInternal (/work/cashtab/node_modules/jest-runner/build/runTest.js:367:16)
    at runTest (/work/cashtab/node_modules/jest-runner/build/runTest.js:444:34)
    at Object.worker (/work/cashtab/node_modules/jest-runner/build/testWorker.js:106:12)
====== CashTab Unit Tests: Cashtab chronik.js functions We can get and parse tx history from path 1899. If there is an error in getting cached token data, we still parse tx history. We add to token cache and get parsed tx history ======
TypeError: (0 , _chronik.getHistory) is not a function
    at Object.<anonymous> (/work/cashtab/src/chronik/__tests__/index.test.js:301:53)
    at Promise.then.completed (/work/cashtab/node_modules/jest-circus/build/utils.js:298:28)
    at new Promise (<anonymous>)
    at callAsyncCircusFn (/work/cashtab/node_modules/jest-circus/build/utils.js:231:10)
    at _callCircusTest (/work/cashtab/node_modules/jest-circus/build/run.js:316:40)
    at processTicksAndRejections (node:internal/process/task_queues:105:5)
    at _runTest (/work/cashtab/node_modules/jest-circus/build/run.js:252:3)
    at _runTestsForDescribeBlock (/work/cashtab/node_modules/jest-circus/build/run.js:126:9)
    at _runTestsForDescribeBlock (/work/cashtab/node_modules/jest-circus/build/run.js:121:9)
    at _runTestsForDescribeBlock (/work/cashtab/node_modules/jest-circus/build/run.js:121:9)
    at run (/work/cashtab/node_modules/jest-circus/build/run.js:71:3)
    at runAndTransformResultsToJestFormat (/work/cashtab/node_modules/jest-circus/build/legacy-code-todo-rewrite/jestAdapterInit.js:122:21)
    at jestAdapter (/work/cashtab/node_modules/jest-circus/build/legacy-code-todo-rewrite/jestAdapter.js:79:19)
    at runTestInternal (/work/cashtab/node_modules/jest-runner/build/runTest.js:367:16)
    at runTest (/work/cashtab/node_modules/jest-runner/build/runTest.js:444:34)
    at Object.worker (/work/cashtab/node_modules/jest-runner/build/testWorker.js:106:12)

Each failure log is accessible here:
CashTab Unit Tests: Cashtab chronik.js functions We can get and parse tx history from path 1899, and update the token cache at the same time
CashTab Unit Tests: Cashtab chronik.js functions We can get and parse tx history from path 1899. If there is an error in getting cached token data, we still parse tx history. We add to token cache and get parsed tx history

bytesofman updated this revision to Diff 55712.Sep 16 2025, 13:27

version bump, reset pagination on wallet change

bytesofman published this revision for review.Sep 16 2025, 13:30
bytesofman edited the test plan for this revision. (Show Details)
Harbormaster completed remote builds in B34471: Diff 55705.Sep 16 2025, 13:38
teamcity added a comment.Sep 16 2025, 13:38
Build Bitcoin ABC Diffs / Diff Testing (cashtab-tests) failed.

Failed tests logs:

====== CashTab Unit Tests: Cashtab chronik.js functions We can get and parse tx history from path 1899, and update the token cache at the same time ======
TypeError: (0 , _chronik.getHistory) is not a function
    at Object.<anonymous> (/work/cashtab/src/chronik/__tests__/index.test.js:262:49)
    at Promise.then.completed (/work/cashtab/node_modules/jest-circus/build/utils.js:298:28)
    at new Promise (<anonymous>)
    at callAsyncCircusFn (/work/cashtab/node_modules/jest-circus/build/utils.js:231:10)
    at _callCircusTest (/work/cashtab/node_modules/jest-circus/build/run.js:316:40)
    at processTicksAndRejections (node:internal/process/task_queues:105:5)
    at _runTest (/work/cashtab/node_modules/jest-circus/build/run.js:252:3)
    at _runTestsForDescribeBlock (/work/cashtab/node_modules/jest-circus/build/run.js:126:9)
    at _runTestsForDescribeBlock (/work/cashtab/node_modules/jest-circus/build/run.js:121:9)
    at run (/work/cashtab/node_modules/jest-circus/build/run.js:71:3)
    at runAndTransformResultsToJestFormat (/work/cashtab/node_modules/jest-circus/build/legacy-code-todo-rewrite/jestAdapterInit.js:122:21)
    at jestAdapter (/work/cashtab/node_modules/jest-circus/build/legacy-code-todo-rewrite/jestAdapter.js:79:19)
    at runTestInternal (/work/cashtab/node_modules/jest-runner/build/runTest.js:367:16)
    at runTest (/work/cashtab/node_modules/jest-runner/build/runTest.js:444:34)
    at Object.worker (/work/cashtab/node_modules/jest-runner/build/testWorker.js:106:12)
====== CashTab Unit Tests: Cashtab chronik.js functions We can get and parse tx history from path 1899. If there is an error in getting cached token data, we still parse tx history. We add to token cache and get parsed tx history ======
TypeError: (0 , _chronik.getHistory) is not a function
    at Object.<anonymous> (/work/cashtab/src/chronik/__tests__/index.test.js:301:53)
    at Promise.then.completed (/work/cashtab/node_modules/jest-circus/build/utils.js:298:28)
    at new Promise (<anonymous>)
    at callAsyncCircusFn (/work/cashtab/node_modules/jest-circus/build/utils.js:231:10)
    at _callCircusTest (/work/cashtab/node_modules/jest-circus/build/run.js:316:40)
    at processTicksAndRejections (node:internal/process/task_queues:105:5)
    at _runTest (/work/cashtab/node_modules/jest-circus/build/run.js:252:3)
    at _runTestsForDescribeBlock (/work/cashtab/node_modules/jest-circus/build/run.js:126:9)
    at _runTestsForDescribeBlock (/work/cashtab/node_modules/jest-circus/build/run.js:121:9)
    at _runTestsForDescribeBlock (/work/cashtab/node_modules/jest-circus/build/run.js:121:9)
    at run (/work/cashtab/node_modules/jest-circus/build/run.js:71:3)
    at runAndTransformResultsToJestFormat (/work/cashtab/node_modules/jest-circus/build/legacy-code-todo-rewrite/jestAdapterInit.js:122:21)
    at jestAdapter (/work/cashtab/node_modules/jest-circus/build/legacy-code-todo-rewrite/jestAdapter.js:79:19)
    at runTestInternal (/work/cashtab/node_modules/jest-runner/build/runTest.js:367:16)
    at runTest (/work/cashtab/node_modules/jest-runner/build/runTest.js:444:34)
    at Object.worker (/work/cashtab/node_modules/jest-runner/build/testWorker.js:106:12)

Each failure log is accessible here:
CashTab Unit Tests: Cashtab chronik.js functions We can get and parse tx history from path 1899, and update the token cache at the same time
CashTab Unit Tests: Cashtab chronik.js functions We can get and parse tx history from path 1899. If there is an error in getting cached token data, we still parse tx history. We add to token cache and get parsed tx history

Harbormaster completed remote builds in B34476: Diff 55710.Sep 16 2025, 13:51
Harbormaster completed remote builds in B34475: Diff 55709.Sep 16 2025, 13:54
bytesofman added a comment.Sep 16 2025, 14:03
In D18613#425105, @teamcity wrote:
Build Bitcoin ABC Diffs / Diff Testing (cashtab-tests) failed.

Failed tests logs:

====== CashTab Unit Tests: Cashtab chronik.js functions We can get and parse tx history from path 1899, and update the token cache at the same time ======
TypeError: (0 , _chronik.getHistory) is not a function
    at Object.<anonymous> (/work/cashtab/src/chronik/__tests__/index.test.js:262:49)
    at Promise.then.completed (/work/cashtab/node_modules/jest-circus/build/utils.js:298:28)
    at new Promise (<anonymous>)
    at callAsyncCircusFn (/work/cashtab/node_modules/jest-circus/build/utils.js:231:10)
    at _callCircusTest (/work/cashtab/node_modules/jest-circus/build/run.js:316:40)
    at processTicksAndRejections (node:internal/process/task_queues:105:5)
    at _runTest (/work/cashtab/node_modules/jest-circus/build/run.js:252:3)
    at _runTestsForDescribeBlock (/work/cashtab/node_modules/jest-circus/build/run.js:126:9)
    at _runTestsForDescribeBlock (/work/cashtab/node_modules/jest-circus/build/run.js:121:9)
    at run (/work/cashtab/node_modules/jest-circus/build/run.js:71:3)
    at runAndTransformResultsToJestFormat (/work/cashtab/node_modules/jest-circus/build/legacy-code-todo-rewrite/jestAdapterInit.js:122:21)
    at jestAdapter (/work/cashtab/node_modules/jest-circus/build/legacy-code-todo-rewrite/jestAdapter.js:79:19)
    at runTestInternal (/work/cashtab/node_modules/jest-runner/build/runTest.js:367:16)
    at runTest (/work/cashtab/node_modules/jest-runner/build/runTest.js:444:34)
    at Object.worker (/work/cashtab/node_modules/jest-runner/build/testWorker.js:106:12)
====== CashTab Unit Tests: Cashtab chronik.js functions We can get and parse tx history from path 1899. If there is an error in getting cached token data, we still parse tx history. We add to token cache and get parsed tx history ======
TypeError: (0 , _chronik.getHistory) is not a function
    at Object.<anonymous> (/work/cashtab/src/chronik/__tests__/index.test.js:301:53)
    at Promise.then.completed (/work/cashtab/node_modules/jest-circus/build/utils.js:298:28)
    at new Promise (<anonymous>)
    at callAsyncCircusFn (/work/cashtab/node_modules/jest-circus/build/utils.js:231:10)
    at _callCircusTest (/work/cashtab/node_modules/jest-circus/build/run.js:316:40)
    at processTicksAndRejections (node:internal/process/task_queues:105:5)
    at _runTest (/work/cashtab/node_modules/jest-circus/build/run.js:252:3)
    at _runTestsForDescribeBlock (/work/cashtab/node_modules/jest-circus/build/run.js:126:9)
    at _runTestsForDescribeBlock (/work/cashtab/node_modules/jest-circus/build/run.js:121:9)
    at _runTestsForDescribeBlock (/work/cashtab/node_modules/jest-circus/build/run.js:121:9)
    at run (/work/cashtab/node_modules/jest-circus/build/run.js:71:3)
    at runAndTransformResultsToJestFormat (/work/cashtab/node_modules/jest-circus/build/legacy-code-todo-rewrite/jestAdapterInit.js:122:21)
    at jestAdapter (/work/cashtab/node_modules/jest-circus/build/legacy-code-todo-rewrite/jestAdapter.js:79:19)
    at runTestInternal (/work/cashtab/node_modules/jest-runner/build/runTest.js:367:16)
    at runTest (/work/cashtab/node_modules/jest-runner/build/runTest.js:444:34)
    at Object.worker (/work/cashtab/node_modules/jest-runner/build/testWorker.js:106:12)

Each failure log is accessible here:
CashTab Unit Tests: Cashtab chronik.js functions We can get and parse tx history from path 1899, and update the token cache at the same time
CashTab Unit Tests: Cashtab chronik.js functions We can get and parse tx history from path 1899. If there is an error in getting cached token data, we still parse tx history. We add to token cache and get parsed tx history

failure related to earlier state of this diff

Harbormaster completed remote builds in B34477: Diff 55712.Sep 16 2025, 14:08
bytesofman added a child revision: D18645: [Cashtab] Remove multi-path support from tx history parsing and websocket subscriptions.Sep 16 2025, 21:11
PiRK accepted this revision.Sep 17 2025, 06:43
PiRK added a subscriber: PiRK.
PiRK added inline comments.
cashtab/src/components/Home/TxHistoryPagination.tsx
115–148 ↗(On Diff #55712)

nit: could factor out pages.push(0) and pages.push(totalPages - 1) which are called in all cases.

Not sure if simpler (less lines but weirder syntax), Grok gives me this:

const getVisiblePages = (currentPage, totalPages, maxVisible = 5) => {
    // Helper to generate range of pages
    const range = (start, end) => Array.from({ length: end - start + 1 }, (_, i) => start + i);

    // If total pages are less than or equal to maxVisible, show all
    if (totalPages <= maxVisible) {
        return range(0, totalPages - 1);
    }

    // Determine start and end based on currentPage position
    if (currentPage <= 2) {
        // Start: [0, 1, 2, 3, ..., last]
        return [...range(0, Math.min(3, totalPages - 1)), -1, totalPages - 1];
    } else if (currentPage >= totalPages - 3) {
        // End: [0, ..., last-3, last-2, last-1, last]
        return [0, -1, ...range(Math.max(1, totalPages - 4), totalPages - 1)];
    } else {
        // Middle: [0, ..., current-1, current, current+1, ..., last]
        return [0, -1, ...range(currentPage - 1, currentPage + 1), -1, totalPages - 1];
    }
};
This revision is now accepted and ready to land.Sep 17 2025, 06:43
bytesofman marked an inline comment as done.Sep 17 2025, 11:19
bytesofman added inline comments.
cashtab/src/components/Home/TxHistoryPagination.tsx
115–148 ↗(On Diff #55712)

nice, yes this is a bit better. in testing, UI looks the same, implemented

Still some work to go after this diff

  • the TxHistory component should own the whole tx history, not take anything from parsedTxHistory in the wallet
  • but, this also means we need it to own avalanche finality updates and pass some info about txs to the Home component

so, this stuff will need to come later as the wallet is refactored for simplicity and the ecash-wallet drop-in

Closed by commit rABC8c62b1aa8fc3: [Cashtab] Paginated tx history (authored by bytesofman). · Explain WhySep 17 2025, 11:19
This revision was automatically updated to reflect the committed changes.
bytesofman marked an inline comment as done.
bytesofman added a commit: rABC8c62b1aa8fc3: [Cashtab] Paginated tx history.

Revision Contents
Changeset List

PathSize
cashtab/
extension/
public/
2 lines
4 lines
2 lines
src/
chronik/
__tests__/
12 lines
51 lines
components/
Home/
3 lines
94 lines
201 lines
wallet/
13 lines

Diff 55727

View Options

cashtab/extension/public/manifest.json

Loading...
View Options

cashtab/package-lock.json

Loading...
View Options

cashtab/package.json

Loading...
View Options

cashtab/src/chronik/__tests__/index.test.js

Loading...
View Options

cashtab/src/chronik/index.ts

Loading...
View Options

cashtab/src/components/Home/Home.tsx

Loading...
View Options

cashtab/src/components/Home/TxHistory.tsx

Loading...
View Options

cashtab/src/components/Home/TxHistoryPagination.tsx

Loading...
View Options

cashtab/src/wallet/useWallet.ts

Loading...