Details

Reviewers

emack
Fabien

Group Reviewers

Restricted Project

Commits

rABCd8bf5e5a80c7: [Cashtab, cashtab-connect] Init an npm module to facilitate browser extension…

Summary

Cashtab and the extension support powerful web interaction methods through bip21 and address sharing. Unfortunately, due to long dev intervals between changes and lack of earlier attention, this feature is not documented anywhere and is difficult to use.

We should maintain a standardized library that organizes and facilitates available methods. Initialize cashtab-commit with a demo react app that shows how the methods work and provides an implementation template for devs.

cashtab-connect is tested and initialized in CI.

The react app is tested, but imo its tests do not belong in CI. The real test of the react app is that it works in practice with the extension, and its extensive use of mocks means that its tests confirm expected behavior of the demo (what buttons we see, how we interact with them) but not really that the extension interactions work. We would need to use browser-based testing for that, which we may add later if justified by extension complexity.

Test Plan

npm test, npm start and try the demo with the extension, should see it as available and be able to open for address sharing and txs

docker build -f cashtab-connect.Dockerfile -t cashtab-connect_local . for docker instance that will automate publishing

I have also tested this by publishing an rc version and getting it to work by installing it through npm in a react app.

https://www.npmjs.com/package/cashtab-connect

Diff Detail

Repository

rABC Bitcoin ABC

Branch

extension-mods

Lint

Lint Passed

Unit

No Test Coverage

Build Status

Buildable 33785
Build 67048: Build Diff	cashtab-tests
Build 67047: arc lint + arc unit

Event Timeline

bytesofman created this revision.Jul 4 2025, 18:41

Herald added a reviewer: Restricted Project. · View Herald TranscriptJul 4 2025, 18:41

Harbormaster completed remote builds in B33767: Diff 54698.Jul 4 2025, 18:41

lint

Harbormaster completed remote builds in B33768: Diff 54699.Jul 4 2025, 18:51

get rid of memo and network support (ai copypasta), clean up the demo page, support legacy address sharing

Harbormaster completed remote builds in B33769: Diff 54700.Jul 4 2025, 19:35

remove example, add tests for the react app demo, clean up READMEs

Harbormaster completed remote builds in B33773: Diff 54706.Jul 5 2025, 13:26

bytesofman edited the summary of this revision. (Show Details)Jul 5 2025, 21:18

bytesofman edited the test plan for this revision. (Show Details)

use 1s instead of 30s for timeout, in practical testing this is long enough, no need to hang for 30s if the user does not have the extension

Harbormaster completed remote builds in B33776: Diff 54710.Jul 5 2025, 21:25

Add a dockerfile to support automated npm publishing, test lint

bytesofman edited the test plan for this revision. (Show Details)Jul 5 2025, 21:26

Harbormaster completed remote builds in B33777: Diff 54711.Jul 5 2025, 21:31

bytesofman published this revision for review.Jul 5 2025, 21:46

bytesofman added inline comments.

cashtab-connect.Dockerfile
1 ↗	(On Diff #54711)	modeled after bs58-ts.Dockerfile CI is configured so that landing this diff should publish cashtab-connect
cashtab/extension/README.md
1 ↗	(On Diff #54711)	All the READMEs here are generated by Cursor I have scanned them and they seem helpful without being misleading, though they are a bit more information-dense than I would have done manually
cashtab/extension/src/service_worker.ts
122 ↗	(On Diff #54711)	this is a really bad API In this diff we start returning success: true or success: false for the address request, instead of a string at the address key that is NOT the address arguably we could put this in another diff. But it's nice to do it here so we can show that cashtab-connect handles this change as well as the legacy API Lots of other extensoin API improvements I would like to do but should come after this lands, and one at a time
cashtab/package-lock.json
3 ↗	(On Diff #54711)	nothing is really changing about Cashtab web here but we keep the extension and the web wallet at the same minor version number if they have the same features
modules/cashtab-connect/.gitignore
1 ↗	(On Diff #54711)	the gitignores are generated by AI and have more things than I would think to include. None of them are bad to include, though, and this kind of boilerplate is imo an AI benefit
modules/cashtab-connect/.npmignore
1 ↗	(On Diff #54711)	ordinarily would not really need an `.npmignore` but because we have a react app inside the cashtab-connect repo that is for testing and dev and not needed by lib users, it makes sense
modules/cashtab-connect/README.md
1 ↗	(On Diff #54711)	generated by AI but pretty good, much better than I would have bothered to write AI is particularly helpful for maintaining this kind of thing as the featureset changes, at least compared to normal dev processes where that kind of thing is almost inevitably ignored
modules/cashtab-connect/demo/src/App.css
1 ↗	(On Diff #54711)	I asked Cursor to use similar styles as the new landing page This kind of css file is ... wholly overkill for a dev demo app. But, it does look very nice, and if it can be generated instantly, why not?
modules/cashtab-connect/demo/src/App.test.tsx
1 ↗	(On Diff #54711)	we go ahead and test the behavior of the demo app these tests are not great for confirming extension behavior, as we need to mock a lot. extension behavior needs to be manually tested or we need to use a browser testing library like puppeteer. For now, the feature set is simple enough that manual testing is okay. The react testing is useful to confirm expected behavior of the demo page.
modules/cashtab-connect/demo/src/logo.svg
2 ↗	(On Diff #54711)	do we need newline at the end of svg? not totally sure on abc policy here
modules/cashtab-connect/demo/src/react-app-env.d.ts
5 ↗	(On Diff #54711)	auto-generated by create-react-app, boilerplate
modules/cashtab-connect/src/index.ts
1 ↗	(On Diff #54711)	makes a lot of sense for a class to handle all the complicated message passing and app-to-app comms and bip21 speak involved in communicating with Cashtab. This way, devs can just cashtab.sendToken() etc

From memory these eslint warnings might cause issues with CI when propagating to prod

Address request timing out. The dialog does get triggered on the Extension side though, but the time out occurs almost immediately, before the extension dialog appears.

modules/cashtab-connect/README.md
18 ↗	(On Diff #54711)

This revision now requires changes to proceed.Jul 6 2025, 12:52

From memory these eslint warnings might cause issues with CI when propagating to prod

Resolved this by initializing cashtabConnect in state, which is the best approach for react apps...a lib that requires users to useMemo is asking too much

Address request timing out. The dialog does get triggered on the Extension side though, but the time out occurs almost immediately, before the extension dialog appears.

I was confusing the address timeout param with the "check for cashtab" timeout param, updated and documented.

reviewed and updated the readme, fixed the demo lint error, removed duplicated method

modules/cashtab-connect/README.md
18 ↗	(On Diff #54711)	on review, lotta hallucinatio in this README, mostly leftover from iterations

simplifying, fixing lint error, updating docs

Harbormaster completed remote builds in B33785: Diff 54723.Jul 7 2025, 12:58

Build Bitcoin ABC Diffs / Diff Testing (cashtab-tests) failed.

Tail of the build log:


> ecashaddrjs@2.0.0 build
> tsc


added 480 packages, and audited 481 packages in 4s

44 packages are looking for funding
  run `npm fund` for details

8 vulnerabilities (1 low, 6 moderate, 1 high)

To address all issues, run:
  npm audit fix

Run `npm audit` for details.

> ecashaddrjs@2.0.0 build
> tsc

/work/modules/ecashaddrjs /work/abc-ci-builds/cashtab-tests

> ecashaddrjs@2.0.0 prepublish
> npm run build


> ecashaddrjs@2.0.0 build
> tsc


added 480 packages, and audited 481 packages in 3s

44 packages are looking for funding
  run `npm fund` for details

8 vulnerabilities (1 low, 6 moderate, 1 high)

To address all issues, run:
  npm audit fix

Run `npm audit` for details.

> ecashaddrjs@2.0.0 build
> tsc

/work/modules/chronik-client /work/abc-ci-builds/cashtab-tests
npm warn deprecated @humanwhocodes/config-array@0.13.0: Use @eslint/config-array instead
npm warn deprecated rimraf@3.0.2: Rimraf versions prior to v4 are no longer supported
npm warn deprecated @humanwhocodes/object-schema@2.0.3: Use @eslint/object-schema instead
npm warn deprecated eslint@8.57.1: This version is no longer supported. Please see https://eslint.org/version-support for other options.
npm error code ECONNRESET
npm error network aborted
npm error network This is a problem related to network connectivity.
npm error network In most cases you are behind a proxy or have bad network settings.
npm error network
npm error network If you are behind a proxy, please make sure that the
npm error network 'proxy' config is set properly.  See: 'npm help config'
npm error A complete log of this run can be found in: /root/.npm/_logs/2025-07-07T12_58_12_797Z-debug-0.log
Build cashtab-tests failed with exit code 1

Very nice

cashtab/extension/src/contentscript.ts
1	or 2024-present
cashtab/extension/src/service_worker.ts
1	dito
modules/cashtab-connect/LICENSE
1	We already have the license in the monorepo, not sure it's worth duplicating
modules/cashtab-connect/README.md
38	no await ?
modules/cashtab-connect/demo/README.md
22	Note that you need to build the library first

This revision now requires changes to proceed.Jul 8 2025, 08:45

bytesofman marked 5 inline comments as done.Jul 8 2025, 12:47

Update headers, remove LICENSING, update README to explain LICENSING move, use await in quickstart example

Harbormaster completed remote builds in B33795: Diff 54740.Jul 8 2025, 12:53

Fabien accepted this revision.Jul 8 2025, 15:40

emack accepted this revision.Jul 9 2025, 03:52

This revision is now accepted and ready to land.Jul 9 2025, 03:52

Closed by commit rABCd8bf5e5a80c7: [Cashtab, cashtab-connect] Init an npm module to facilitate browser extension… (authored by bytesofman). · Explain WhyJul 9 2025, 03:57

This revision was automatically updated to reflect the committed changes.

bytesofman added a commit: rABCd8bf5e5a80c7: [Cashtab, cashtab-connect] Init an npm module to facilitate browser extension….

[Cashtab, cashtab-connect] Init an npm module to facilitate browser extension interaction in react appsClosedPublicActions

Details

Diff Detail

Event Timeline

Revision ContentsChangeset List

Diff 54723

cashtab-connect.Dockerfile

cashtab/extension/README.md

cashtab/extension/public/manifest.json

cashtab/extension/src/contentscript.ts

cashtab/extension/src/service_worker.ts

cashtab/package-lock.json

cashtab/package.json

contrib/teamcity/build-configurations.yml

modules/cashtab-connect/.gitignore

modules/cashtab-connect/.npmignore

modules/cashtab-connect/LICENSE

modules/cashtab-connect/README.md

modules/cashtab-connect/demo/.gitignore

modules/cashtab-connect/demo/README.md

modules/cashtab-connect/demo/package-lock.json

modules/cashtab-connect/demo/package.json

modules/cashtab-connect/demo/public/favicon.ico

modules/cashtab-connect/demo/public/index.html

modules/cashtab-connect/demo/public/logo192.png

modules/cashtab-connect/demo/public/logo512.png

modules/cashtab-connect/demo/public/manifest.json

modules/cashtab-connect/demo/public/robots.txt

modules/cashtab-connect/demo/src/App.css

modules/cashtab-connect/demo/src/App.test.tsx

modules/cashtab-connect/demo/src/App.tsx

modules/cashtab-connect/demo/src/index.css

modules/cashtab-connect/demo/src/index.tsx

modules/cashtab-connect/demo/src/logo.svg

modules/cashtab-connect/demo/src/react-app-env.d.ts

modules/cashtab-connect/demo/src/reportWebVitals.ts

modules/cashtab-connect/demo/src/setupTests.ts

modules/cashtab-connect/demo/tsconfig.json

modules/cashtab-connect/package-lock.json

modules/cashtab-connect/package.json

modules/cashtab-connect/src/global.d.ts

modules/cashtab-connect/src/index.ts

modules/cashtab-connect/test/test.ts

modules/cashtab-connect/tsconfig.json

[Cashtab, cashtab-connect] Init an npm module to facilitate browser extension interaction in react apps
ClosedPublic
Actions

Revision Contents
Changeset List