Page MenuHomePhabricator

[e.cash] Live transactions card
ClosedPublic

Authored by johnkuney on Jan 13 2026, 04:07.

Details

Reviewers
bytesofman
Group Reviewers
Restricted Project
Commits
rABC6e917373b6df: [e.cash] Live transactions card
Summary

Depends on D19338

Add a live transactions view to the "Shape the future of digital cash" card carousel section on landing page

  • added chronik client global context
  • fetch the mempool and then start listening for new transactions via ws
  • display transactions on the card
  • show the latest 4 at a time
Test Plan

preview and check

Diff Detail

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

Event Timeline

There are a very large number of changes, so older changes are hidden. Show Older Changes

The initial order is reversed

image.png (354×388 px, 20 KB)

Also can we avoid the scroll bar ?

we might run into some deployment CI issues but can troubleshoot through those

need to update the header years in the new files tho

web/e.cash/app/components/Home/LiveCard.tsx
1 ↗(On Diff #57669)
web/e.cash/app/hooks/useLiveTransactions.ts
1 ↗(On Diff #57669)
This revision now requires changes to proceed.Jan 13 2026, 19:16

Avoid the scroll bar like it still scrolls just dont show a scrollbar? or limit it to like 4 transactions so there is no overflow?

update copyright year, reverse the inital mempool order so newest on top

Avoid the scroll bar like it still scrolls just dont show a scrollbar? or limit it to like 4 transactions so there is no overflow?

yeah no overflow. If you can't fit 5 txs then limit to 4

web/e.cash/app/hooks/useLiveTransactions.ts
16 ↗(On Diff #57671)

why 40 if you only show 5 ?

web/e.cash/app/hooks/useLiveTransactions.ts
16 ↗(On Diff #57671)

why 40 if you only show 5 ?

well you could scroll to see the other 35, but I'll adjust for the no scroll

remove the scrolling and limit to 4 transactions

Tail of the build log:

#12 [builder  8/20] COPY modules/chronik-client/package.json ./modules/chronik-client/
#12 sha256:9c9c79e953df545f5b321fb557fe7f81a626ee69d39f277e3cbb8b6a90774dad
#12 DONE 0.0s

#13 [builder  9/20] COPY web/e.cash/package.json ./web/e.cash/
#13 sha256:10fba13d0330af52fb86c0a1d0cf903b73aaf16855d46192714f4a06af4e4e18
#13 DONE 0.0s

#14 [builder 10/20] RUN pnpm fetch --frozen-lockfile
#14 sha256:e03de289c7fb416b3b042ca0802098968aa7718a8473c72f19bbdd2186df929c
#14 1.992 Importing packages to virtual store
#14 2.046 Already up to date
#14 2.104 Progress: resolved 1, reused 0, downloaded 0, added 0
#14 3.105 Progress: resolved 3083, reused 0, downloaded 280, added 289
#14 4.106 Progress: resolved 3083, reused 0, downloaded 830, added 857
#14 5.106 Progress: resolved 3083, reused 0, downloaded 1347, added 1379
#14 6.106 Progress: resolved 3083, reused 0, downloaded 1896, added 1931
#14 7.107 Progress: resolved 3083, reused 0, downloaded 2256, added 2289
#14 8.106 Progress: resolved 3083, reused 0, downloaded 2625, added 2665
#14 9.106 Progress: resolved 3083, reused 0, downloaded 3000, added 3038
#14 9.739 Progress: resolved 3083, reused 0, downloaded 3043, added 3083, done
#14 11.43 
#14 11.43 ╭ Warning ─────────────────────────────────────────────────────────────────────╮
#14 11.43 │                                                                              │
#14 11.43 │   Ignored build scripts: @parcel/watcher, @railway/cli, core-js,             │
#14 11.43 │   core-js-pure, esbuild, mongodb-memory-server, protobufjs, sharp,           │
#14 11.43 │   styled-components, unrs-resolver.                                          │
#14 11.43 │   Run "pnpm approve-builds" to pick which dependencies should be allowed     │
#14 11.43 │   to run scripts.                                                            │
#14 11.43 │                                                                              │
#14 11.43 ╰──────────────────────────────────────────────────────────────────────────────╯
#14 11.43 
#14 DONE 12.6s

#15 [builder 11/20] COPY modules/ecashaddrjs/ ./modules/ecashaddrjs/
#15 sha256:297bc63354e524a3fb4f074fb6cb2bd1a00d3777973227dcf5991fdbdc98accf
#15 DONE 0.0s

#16 [builder 12/20] COPY modules/chronik-client/ ./modules/chronik-client/
#16 sha256:ffa2f4f3968bfed3e241f8096c8ca572cdf194c4fcc9a63d1658490eadd3fa5e
#16 DONE 0.0s

#17 [builder 13/20] RUN pnpm install --frozen-lockfile --offline --filter ecashaddrjs...
#17 sha256:cfd82faab237ee8ac7eee78825efa7dce810441b736ff56fd6a0a9657df1b517
#17 1.049  ERR_PNPM_OUTDATED_LOCKFILE  Cannot install with "frozen-lockfile" because pnpm-lock.yaml is not up to date with <ROOT>/web/e.cash/package.json
#17 1.049 
#17 1.049 Note that in CI environments this setting is true by default. If you still need to run install in such cases, use "pnpm install --no-frozen-lockfile"
#17 1.049 
#17 1.049   Failure reason:
#17 1.049   specifiers in the lockfile don't match specifiers in package.json:
#17 1.049 * 1 dependencies are mismatched:
#17 1.049   - chronik-client (lockfile: ^4.1.0, manifest: file:../../modules/chronik-client)
#17 1.049 
#17 ERROR: executor failed running [/bin/sh -c pnpm install --frozen-lockfile --offline --filter ecashaddrjs...]: exit code: 1
------
 > [builder 13/20] RUN pnpm install --frozen-lockfile --offline --filter ecashaddrjs...:
------
executor failed running [/bin/sh -c pnpm install --frozen-lockfile --offline --filter ecashaddrjs...]: exit code: 1
Build preview-e.cash failed with exit code 1

Tail of the build log:

#12 [builder  8/20] COPY modules/chronik-client/package.json ./modules/chronik-client/
#12 sha256:9c9c79e953df545f5b321fb557fe7f81a626ee69d39f277e3cbb8b6a90774dad
#12 DONE 0.0s

#13 [builder  9/20] COPY web/e.cash/package.json ./web/e.cash/
#13 sha256:10fba13d0330af52fb86c0a1d0cf903b73aaf16855d46192714f4a06af4e4e18
#13 DONE 0.0s

#14 [builder 10/20] RUN pnpm fetch --frozen-lockfile
#14 sha256:e03de289c7fb416b3b042ca0802098968aa7718a8473c72f19bbdd2186df929c
#14 1.992 Importing packages to virtual store
#14 2.046 Already up to date
#14 2.104 Progress: resolved 1, reused 0, downloaded 0, added 0
#14 3.105 Progress: resolved 3083, reused 0, downloaded 280, added 289
#14 4.106 Progress: resolved 3083, reused 0, downloaded 830, added 857
#14 5.106 Progress: resolved 3083, reused 0, downloaded 1347, added 1379
#14 6.106 Progress: resolved 3083, reused 0, downloaded 1896, added 1931
#14 7.107 Progress: resolved 3083, reused 0, downloaded 2256, added 2289
#14 8.106 Progress: resolved 3083, reused 0, downloaded 2625, added 2665
#14 9.106 Progress: resolved 3083, reused 0, downloaded 3000, added 3038
#14 9.739 Progress: resolved 3083, reused 0, downloaded 3043, added 3083, done
#14 11.43 
#14 11.43 ╭ Warning ─────────────────────────────────────────────────────────────────────╮
#14 11.43 │                                                                              │
#14 11.43 │   Ignored build scripts: @parcel/watcher, @railway/cli, core-js,             │
#14 11.43 │   core-js-pure, esbuild, mongodb-memory-server, protobufjs, sharp,           │
#14 11.43 │   styled-components, unrs-resolver.                                          │
#14 11.43 │   Run "pnpm approve-builds" to pick which dependencies should be allowed     │
#14 11.43 │   to run scripts.                                                            │
#14 11.43 │                                                                              │
#14 11.43 ╰──────────────────────────────────────────────────────────────────────────────╯
#14 11.43 
#14 DONE 12.6s

#15 [builder 11/20] COPY modules/ecashaddrjs/ ./modules/ecashaddrjs/
#15 sha256:297bc63354e524a3fb4f074fb6cb2bd1a00d3777973227dcf5991fdbdc98accf
#15 DONE 0.0s

#16 [builder 12/20] COPY modules/chronik-client/ ./modules/chronik-client/
#16 sha256:ffa2f4f3968bfed3e241f8096c8ca572cdf194c4fcc9a63d1658490eadd3fa5e
#16 DONE 0.0s

#17 [builder 13/20] RUN pnpm install --frozen-lockfile --offline --filter ecashaddrjs...
#17 sha256:cfd82faab237ee8ac7eee78825efa7dce810441b736ff56fd6a0a9657df1b517
#17 1.049  ERR_PNPM_OUTDATED_LOCKFILE  Cannot install with "frozen-lockfile" because pnpm-lock.yaml is not up to date with <ROOT>/web/e.cash/package.json
#17 1.049 
#17 1.049 Note that in CI environments this setting is true by default. If you still need to run install in such cases, use "pnpm install --no-frozen-lockfile"
#17 1.049 
#17 1.049   Failure reason:
#17 1.049   specifiers in the lockfile don't match specifiers in package.json:
#17 1.049 * 1 dependencies are mismatched:
#17 1.049   - chronik-client (lockfile: ^4.1.0, manifest: file:../../modules/chronik-client)
#17 1.049 
#17 ERROR: executor failed running [/bin/sh -c pnpm install --frozen-lockfile --offline --filter ecashaddrjs...]: exit code: 1
------
 > [builder 13/20] RUN pnpm install --frozen-lockfile --offline --filter ecashaddrjs...:
------
executor failed running [/bin/sh -c pnpm install --frozen-lockfile --offline --filter ecashaddrjs...]: exit code: 1
Build preview-e.cash failed with exit code 1

need to re-run pnpm install from bitcoin-abc now that chronik-client is installed locally and not from npm

This revision now requires changes to proceed.Jan 13 2026, 21:02
johnkuney edited the summary of this revision. (Show Details)

fresh pnpm install

Tail of the build log:

#20 1.124 > chronik-client@4.1.0 build /app/modules/chronik-client
#20 1.124 > tsc
#20 1.124 
#20 DONE 3.7s

#21 [builder 17/20] RUN pnpm install --frozen-lockfile --offline --filter e.cash...
#21 sha256:55898dc1b468d5a550c974c68e859a496dd5e0d416df26e4f973a57cece72225
#21 1.111 Scope: 3 of 4 workspace projects
#21 1.304 Lockfile is up to date, resolution step is skipped
#21 2.138 Done in 1.2s using pnpm v10.24.0
#21 DONE 2.2s

#22 [builder 18/20] COPY web/e.cash/ ./web/e.cash/
#22 sha256:e9bbae7b3f2e795be99291bbc6bc2706b4991068ea7a4e3e599bb673f7c6ae0c
#22 DONE 0.1s

#23 [builder 19/20] COPY web/e.cash/next.preview.ts web/e.cash/next.config.ts
#23 sha256:6dbbb42180d36236f8ff5a4f8addb94098613b72b4913032d7ab9a3f4aa78092
#23 DONE 0.0s

#24 [builder 20/20] RUN pnpm --filter e.cash run build
#24 sha256:d7d93e1f07a933abd2832f636414fd490ec5d8f311cb97c071fb331eae999133
#24 0.974 
#24 0.974 > e.cash@0.1.0 build /app/web/e.cash
#24 0.974 > next build
#24 0.974 
#24 1.742 Attention: Next.js now collects completely anonymous telemetry regarding usage.
#24 1.742 This information is used to shape Next.js' roadmap and prioritize features.
#24 1.742 You can learn more, including how to opt-out if you'd not like to participate in this anonymous program, by visiting the following URL:
#24 1.742 https://nextjs.org/telemetry
#24 1.742 
#24 1.751    ▲ Next.js 16.0.10 (Turbopack)
#24 1.751    - Environments: .env
#24 1.751 
#24 1.809    Creating an optimized production build ...
#24 8.595  ✓ Compiled successfully in 6.3s
#24 8.602    Running TypeScript ...
#24 12.20 Failed to compile.
#24 12.20 
#24 12.20 ./app/components/Analytics.tsx:43:9
#24 12.20 Type error: Type '{ src: string; strategy: "afterInteractive"; }' is not assignable to type 'IntrinsicAttributes & ScriptProps'.
#24 12.20   Property 'src' does not exist on type 'IntrinsicAttributes & ScriptProps'.
#24 12.20 
#24 12.20   41 |     <>
#24 12.20   42 |       <Script
#24 12.20 > 43 |         src={`https://www.googletagmanager.com/gtag/js?id=${GA_ID}`}
#24 12.20      |         ^
#24 12.20   44 |         strategy="afterInteractive"
#24 12.20   45 |       />
#24 12.20   46 |       <Script id="gtag-init" strategy="afterInteractive">
#24 12.25 Next.js build worker exited with code: 1 and signal: null
#24 12.32 /app/web/e.cash:
#24 12.32  ERR_PNPM_RECURSIVE_RUN_FIRST_FAIL  e.cash@0.1.0 build: `next build`
#24 12.32 Exit status 1
#24 ERROR: executor failed running [/bin/sh -c pnpm --filter e.cash run build]: exit code: 1
------
 > [builder 20/20] RUN pnpm --filter e.cash run build:
------
executor failed running [/bin/sh -c pnpm --filter e.cash run build]: exit code: 1
Build preview-e.cash failed with exit code 1

looks related to the GA script prop types, which wasnt changed here

Tail of the build log:

#17 [builder 13/20] RUN pnpm install --frozen-lockfile --offline --filter ecashaddrjs...
#17 sha256:4e963049ec94f06c6f475a2b898a44b62e1bb1270b4799927044d1f3cbbb2d1c
#17 CACHED

#16 [builder 12/20] COPY modules/chronik-client/ ./modules/chronik-client/
#16 sha256:0ef4f81fcb7b0762efebd54bdb3a69f840a2f3ec6b966c45bdaef59908f888d3
#16 CACHED

#22 [builder 18/20] COPY web/e.cash/ ./web/e.cash/
#22 sha256:ada209f0778c58d8a314a1da84c87d18f4d4281a0442cd5d65b36cc9da737b69
#22 CACHED

#15 [builder 11/20] COPY modules/ecashaddrjs/ ./modules/ecashaddrjs/
#15 sha256:7562684d0e29f5ca10ec8e8577387207b6d9a94375d454d7c86442b73e0189b1
#15 CACHED

#23 [builder 19/20] COPY web/e.cash/next.preview.ts web/e.cash/next.config.ts
#23 sha256:856bbb9ef704c3a44c72549c0a928364d4678f5e0f9e0f1d917d293e55971e33
#23 CACHED

#24 [builder 20/20] RUN pnpm --filter e.cash run build
#24 sha256:8a69fe32fdf938924191cf296559187a56be348072e7b0a483fec98f643fd903
#24 0.891 
#24 0.891 > e.cash@0.1.0 build /app/web/e.cash
#24 0.891 > next build
#24 0.891 
#24 1.668 Attention: Next.js now collects completely anonymous telemetry regarding usage.
#24 1.668 This information is used to shape Next.js' roadmap and prioritize features.
#24 1.668 You can learn more, including how to opt-out if you'd not like to participate in this anonymous program, by visiting the following URL:
#24 1.668 https://nextjs.org/telemetry
#24 1.668 
#24 1.677    ▲ Next.js 16.0.10 (Turbopack)
#24 1.677    - Environments: .env
#24 1.677 
#24 1.736    Creating an optimized production build ...
#24 8.448  ✓ Compiled successfully in 6.2s
#24 8.454    Running TypeScript ...
#24 12.04 Failed to compile.
#24 12.04 
#24 12.04 ./app/components/Analytics.tsx:43:9
#24 12.04 Type error: Type '{ src: string; strategy: "afterInteractive"; }' is not assignable to type 'IntrinsicAttributes & ScriptProps'.
#24 12.04   Property 'src' does not exist on type 'IntrinsicAttributes & ScriptProps'.
#24 12.04 
#24 12.04   41 |     <>
#24 12.04   42 |       <Script
#24 12.04 > 43 |         src={`https://www.googletagmanager.com/gtag/js?id=${GA_ID}`}
#24 12.04      |         ^
#24 12.04   44 |         strategy="afterInteractive"
#24 12.04   45 |       />
#24 12.04   46 |       <Script id="gtag-init" strategy="afterInteractive">
#24 12.08 Next.js build worker exited with code: 1 and signal: null
#24 12.13 /app/web/e.cash:
#24 12.13  ERR_PNPM_RECURSIVE_RUN_FIRST_FAIL  e.cash@0.1.0 build: `next build`
#24 12.13 Exit status 1
#24 ERROR: executor failed running [/bin/sh -c pnpm --filter e.cash run build]: exit code: 1
------
 > [builder 20/20] RUN pnpm --filter e.cash run build:
------
executor failed running [/bin/sh -c pnpm --filter e.cash run build]: exit code: 1
Build preview-e.cash failed with exit code 1

think this should fix build error https://reviews.bitcoinabc.org/D19335

you can also test stuff like this by doing a

git rebase ecash-fix-ga-script-type-error

from this branch; then push this diff up and edit the description so it includes Depends on D19335

then we could tell here

Tail of the build log:

#20 1.023 
#20 1.023 > chronik-client@4.1.0 build /app/modules/chronik-client
#20 1.023 > tsc
#20 1.023 
#20 DONE 3.5s

#21 [builder 17/20] RUN pnpm install --frozen-lockfile --offline --filter e.cash...
#21 sha256:7faebd87d09bc9d35cc3aefb6324be8e8806753854d6264c8c17efbe541c5c3f
#21 1.111 Scope: 3 of 4 workspace projects
#21 1.294 Lockfile is up to date, resolution step is skipped
#21 2.364 Done in 1.5s using pnpm v10.24.0
#21 DONE 2.5s

#22 [builder 18/20] COPY web/e.cash/ ./web/e.cash/
#22 sha256:8ab92080d3abe5416c8df297d85a5595b422847be4e8498b12d55920d390d283
#22 DONE 0.3s

#23 [builder 19/20] COPY web/e.cash/next.preview.ts web/e.cash/next.config.ts
#23 sha256:378555ff1620715231c7068d0ea597270321dc83f21dbeced9b29b1ee3d5ab5c
#23 DONE 0.1s

#24 [builder 20/20] RUN pnpm --filter e.cash run build
#24 sha256:2228489837bc2fb23f74f99b47040eb398de4176b2246ca72b03335d7c2c0862
#24 1.035 
#24 1.035 > e.cash@0.1.0 build /app/web/e.cash
#24 1.035 > next build
#24 1.035 
#24 1.781 Attention: Next.js now collects completely anonymous telemetry regarding usage.
#24 1.782 This information is used to shape Next.js' roadmap and prioritize features.
#24 1.782 You can learn more, including how to opt-out if you'd not like to participate in this anonymous program, by visiting the following URL:
#24 1.782 https://nextjs.org/telemetry
#24 1.782 
#24 1.808    ▲ Next.js 16.0.10 (Turbopack)
#24 1.808    - Environments: .env
#24 1.808 
#24 1.901    Creating an optimized production build ...
#24 8.178  ✓ Compiled successfully in 5.8s
#24 8.200    Running TypeScript ...
#24 11.58 Failed to compile.
#24 11.58 
#24 11.58 ./app/components/Analytics.tsx:42:5
#24 11.58 Type error: Object literal may only specify known properties, and 'src' does not exist in type 'ScriptProps'.
#24 11.58 
#24 11.58   40 |
#24 11.58   41 |   const scriptProps: ComponentProps<typeof Script> = {
#24 11.58 > 42 |     src: `https://www.googletagmanager.com/gtag/js?id=${GA_ID}`,
#24 11.58      |     ^
#24 11.58   43 |     strategy: "afterInteractive",
#24 11.58   44 |   };
#24 11.58   45 |
#24 11.62 Next.js build worker exited with code: 1 and signal: null
#24 11.66 /app/web/e.cash:
#24 11.66  ERR_PNPM_RECURSIVE_RUN_FIRST_FAIL  e.cash@0.1.0 build: `next build`
#24 11.66 Exit status 1
#24 ERROR: executor failed running [/bin/sh -c pnpm --filter e.cash run build]: exit code: 1
------
 > [builder 20/20] RUN pnpm --filter e.cash run build:
------
executor failed running [/bin/sh -c pnpm --filter e.cash run build]: exit code: 1
Build preview-e.cash failed with exit code 1

you need to build this dockerfile locally and confirm that it builds before trying it in the diff

e.g. run

docker build -f web/e.cash/Dockerfile -t e.cash:test .

this will build it locally and you will get failure logs locally, which you can iteratively fix

faster than bouncing it off the CI -- is it building locally?

This revision now requires changes to proceed.Jan 13 2026, 23:34

remove --offline from dockerfile

looks good now, code questions

web/e.cash/app/hooks/useLiveTransactions.ts
15 ↗(On Diff #57693)

We might want to add some more and use the closest one, but let's start with that

64 ↗(On Diff #57693)

do you need to repeat this?

93 ↗(On Diff #57693)

dito

bytesofman added inline comments.
web/e.cash/app/hooks/useLiveTransactions.ts
28 ↗(On Diff #57693)

that we "need" this isMounted variable is ... off. It's a bad approach.

ideally chronik should be part of context so it is available across the app. As you have probably run into here, it is tricky to shim it into a single component and deal with having it initialize.

You should use context to manage chronik and the websocket subscription and expose chronik, ws, and possibly mempool as params that can be used by any component.

This revision now requires changes to proceed.Jan 14 2026, 12:59

nice much better architecture. I think this is good to go as an MVP

Room for improvement:

  1. The feature is cool but I imagine almost no one will see it where it is on the page, well below the fold; now that the inputs are available in context, we could have toast notifications on new txs, or mb a banner, i dunno, something
  2. The tx parsing is pretty lazy. With a little effort we could show token txs with ID and guess amount sent from whom to whom, like in ecash-herald
This revision is now accepted and ready to land.Jan 14 2026, 17:54

Sweet, yeah for sure room to improve here. Yeah maybe it could be its own section if we want more eyes on it.

This revision was automatically updated to reflect the committed changes.

nice much better architecture. I think this is good to go as an MVP

Room for improvement:

  1. The feature is cool but I imagine almost no one will see it where it is on the page, well below the fold; now that the inputs are available in context, we could have toast notifications on new txs, or mb a banner, i dunno, something
  2. The tx parsing is pretty lazy. With a little effort we could show token txs with ID and guess amount sent from whom to whom, like in ecash-herald

I was thinking the same