Feat connect chronik websocket directly #522

lissavxo · 2025-07-23T19:16:40Z

Related to #519

Depends on

fix: newTxs context #521

Description

Removed connection with paybutton-server websocket and added connection to chronik websocket directly.

Test plan

Make sure payment is received in both paybutton and widget

Copilot

Pull Request Overview

This PR removes the dependency on paybutton-server websocket and integrates direct connection to the Chronik websocket for receiving payment notifications. This change eliminates the need for an intermediary server and allows the application to receive transaction data directly from the blockchain indexer.

Adds Chronik client integration with websocket support for real-time transaction monitoring
Implements OP_RETURN data parsing functionality for payment metadata
Updates Widget and PayButton components to use the new Chronik websocket instead of the legacy socket.io connection

Reviewed Changes

Copilot reviewed 8 out of 8 changed files in this pull request and generated 7 comments.

Show a summary per file

File	Description
react/package.json	Adds chronik-client-cashtokens, decimal.js, and ecashaddrjs dependencies
react/lib/util/types.ts	Extends Transaction interface with opReturn field
react/lib/util/socket.ts	Adds Chronik websocket setup and message handling functions
react/lib/util/opReturn.ts	Implements OP_RETURN data parsing utilities
react/lib/util/chronik.ts	New file with complete Chronik client integration and transaction processing
react/lib/components/Widget/WidgetContainer.tsx	Updates to handle internal transaction state management
react/lib/components/Widget/Widget.tsx	Replaces socket.io setup with Chronik websocket
react/lib/components/PayButton/PayButton.tsx	Replaces socket.io setup with Chronik websocket

react/lib/util/chronik.ts

Copilot · 2025-07-23T19:24:58Z

react/lib/util/chronik.ts

+      address,
+      timestamp: transaction.block !== undefined ? transaction.block.timestamp : transaction.timeFirstSeen,
+      confirmed: transaction.block !== undefined,
+      opReturn,


The rawMessage field is being set from parsedOpReturn but this conflicts with line 155 where opReturn already contains the stringified JSON with rawMessage. This creates inconsistent data where the top-level opReturn contains serialized data but individual fields contain parsed values.

Suggested change

opReturn,

opReturn: JSON.stringify(parsedOpReturn), // Ensure opReturn matches parsedOpReturn

very confusing message, referencing the wrong line, and bad suggestion overall, since the main purpose of sending the opReturn is to have access to it without any processing.

Copilot · 2025-07-23T19:24:58Z

react/lib/util/socket.ts

+    params.setTxsSocket(undefined);
+  }
+
+  const newChronikSocket = await initializeChronikWebsocket(params.address, (transactions: Transaction[]) => { onMessage(transactions, params.setNewTxs, params.setDialogOpen, params.checkSuccessInfo) }); 


[nitpick] This line exceeds reasonable length and has complex nested function calls. Consider extracting the callback function to improve readability: const handleTransactions = (transactions: Transaction[]) => onMessage(transactions, params.setNewTxs, params.setDialogOpen, params.checkSuccessInfo);

Suggested change

const newChronikSocket = await initializeChronikWebsocket(params.address, (transactions: Transaction[]) => { onMessage(transactions, params.setNewTxs, params.setDialogOpen, params.checkSuccessInfo) });

const newChronikSocket = await initializeChronikWebsocket(params.address, handleTransactions(params.setNewTxs, params.setDialogOpen, params.checkSuccessInfo));

just break some lines

Copilot · 2025-07-23T19:24:58Z

react/lib/components/Widget/Widget.tsx

+      // if (thisTxsSocket !== undefined) {
+         //thisTxsSocket.disconnect();
+         //setThisTxsSocket(undefined);
+      // }


Commented-out cleanup code should be removed or properly implemented. The cleanup logic for Chronik websockets may be needed to prevent memory leaks.

Suggested change

// if (thisTxsSocket !== undefined) {

//thisTxsSocket.disconnect();

//setThisTxsSocket(undefined);

// }

if (thisTxsSocket !== undefined) {

thisTxsSocket.disconnect();

setThisTxsSocket(undefined);

}

Copilot · 2025-07-23T19:24:59Z

react/lib/components/PayButton/PayButton.tsx

+      // if (txsSocket !== undefined) {
+         // txsSocket.disconnect();
+         //setTxsSocket(undefined);
+      // }


Commented-out cleanup code should be removed or properly implemented. The cleanup logic for Chronik websockets may be needed to prevent memory leaks.

Suggested change

// if (txsSocket !== undefined) {

// txsSocket.disconnect();

//setTxsSocket(undefined);

// }

if (txsSocket !== undefined) {

txsSocket.disconnect();

setTxsSocket(undefined);

}

chedieck · 2025-07-23T19:45:41Z

react/lib/components/PayButton/PayButton.tsx

-        txsSocket.disconnect();
-        setTxsSocket(undefined);
-      }
+      // if (txsSocket !== undefined) {


If you feel these might be necessary and don’t want to delete it completely, it would be good to leave a comment explaining your hesitation.

chedieck · 2025-07-23T20:49:12Z

react/lib/util/chronik.ts

+    address: string,
+    onTransaction: Function
+): Promise<WsEndpoint> => {
+    const chronik = new ChronikClient(['https://chronik.e.cash']);


Should be in paybutton-config.json, not hardcoded.

chedieck · 2025-07-23T20:56:51Z

react/lib/util/socket.ts

+    params.setTxsSocket(undefined);
+  }
+
+  const newChronikSocket = await initializeChronikWebsocket(params.address, (transactions: Transaction[]) => { onMessage(transactions, params.setNewTxs, params.setDialogOpen, params.checkSuccessInfo) }); 


just break some lines

chedieck · 2025-07-23T21:06:01Z

Also, failed to build:

Klakurka

Getting a build error:

Klakurka

Unable to build:

lissavxo · 2025-07-29T20:49:17Z

Unable to build:

need to add this param to your paybutton-config.json file

  "networkBlockchainURLs": {
    "ecash": [
      "https://xec.paybutton.io",
      "https://chronik1.alitayin.com",
      "https://chronik2.alitayin.com",
      "https://chronik.e.cash",
      "https://chronik-native1.fabien.cash",
      "https://chronik-native2.fabien.cash",
      "https://chronik-native3.fabien.cash",
      "https://chronik.pay2stay.com/xec",
      "https://chronik.pay2stay.com/xec2"
    ],
    "bitcoincash": ["https://bch.paybutton.io", "https://chronik.pay2stay.com/bch"]
  }

Klakurka

Try opening localhost:10001, opening the network tab, clearing the logs, clicking the 'Basic' paybutton to open the dialog. On the first opening, you'll see 3 web sockets open. Close the dialog and clear the network logs again. Open it again and you'll see no new web socket. Why 3 on the first 1? Why 0 on the 2nd one?
Build warnings:

Klakurka · 2025-07-29T20:53:25Z

react/lib/example-config.json

+      "https://xec.paybutton.io",
+      "https://chronik1.alitayin.com",
+      "https://chronik2.alitayin.com",
+      "https://chronik.e.cash",
+      "https://chronik-native1.fabien.cash",
+      "https://chronik-native2.fabien.cash",
+      "https://chronik-native3.fabien.cash",
+      "https://chronik.pay2stay.com/xec",
+      "https://chronik.pay2stay.com/xec2"
+    ],
+    "bitcoincash": ["https://bch.paybutton.io", "https://chronik.pay2stay.com/bch"]


let's use the .org URLs instead of the .io ones as access will eventually be restricted at some point in the future to only our server(s).

lissavxo · 2025-07-29T21:20:12Z

Try opening localhost:10001, opening the network tab, clearing the logs, clicking the 'Basic' paybutton to open the dialog. On the first opening, you'll see 3 web sockets open. Close the dialog and clear the network logs again. Open it again and you'll see no new web socket. Why 3 on the first 1? Why 0 on the 2nd one?

Build warnings:

are you testing on the demo page? we open a new websocket instance for each widget might be the reason it is opening more than one. And we stick with the first connection open for a dialog, that is why it does not open again

Klakurka · 2025-07-29T21:23:54Z

Yes - demo page.

AFAICT it is sending non-ws messages that trigger payment detection / onSuccess.

Can you check that?

paybutton/dev/demo/index.html

Klakurka · 2025-08-10T22:10:11Z

My main concern with this is that we're introducing the possibility of a user seeing onSuccess run but there still potentially be an issue if there is some kind of problem on the server preventing payment triggers from firing (eg. wp plugin.

Klakurka · 2025-08-22T02:55:42Z

Couple of things:

We need to get the .org websocket fixed before we can use that. @ScottMcDermid can have a crack at that and if it's too difficult then we can go with `.io for now and migrate over in a later release.
Let's explicitly set ConnectionStrategy to AsOrdered, with us at the top. As long as our Chronik instance is online, connecting to that should be reliably the fastest since Cashtab (by the time this has been merged) will broadcast to us right away upon detecting a pb tx.
I think op_return_raw isn't being sent to Cashtab (extension) when using the "Send with Cashtab" button.

chedieck

Just requesting the fix of a typo in a variable name.

Most of the code here is copy + pasted from paybutton-server, which is fine for now, but if we want to edit this code in the future we probably should consider actually separating it in a 3rd repo that we could import on both paybutton-server and paybutton, to avoid having to edit in both repos and risking have conflicting behavior between them.

chedieck · 2025-08-27T13:16:35Z

react/lib/util/chronik.ts

+    address: string,
+    setNewTx: Function
+): Promise<WsEndpoint> => {
+    const networSlug = getAddressPrefix(address)


typo here, should be networkSlug

Klakurka requested review from Klakurka and chedieck July 23, 2025 19:23

lissavxo force-pushed the feat/connect-chronik-directly branch from c1f0983 to 049cf5a Compare July 23, 2025 19:23

Klakurka requested a review from Copilot July 23, 2025 19:23

Copilot AI reviewed Jul 23, 2025

View reviewed changes

chedieck requested changes Jul 23, 2025

View reviewed changes

Klakurka requested changes Jul 25, 2025

View reviewed changes

lissavxo force-pushed the feat/connect-chronik-directly branch from ed59d82 to 4760cc2 Compare July 29, 2025 15:15

lissavxo requested review from Klakurka and chedieck July 29, 2025 20:39

Klakurka requested changes Jul 29, 2025

View reviewed changes

Klakurka force-pushed the feat/connect-chronik-directly branch from 8fa8252 to ae27962 Compare July 29, 2025 22:31

Klakurka requested changes Jul 29, 2025

View reviewed changes

paybutton/dev/demo/index.html Show resolved Hide resolved

Klakurka assigned lissavxo Aug 1, 2025

Klakurka mentioned this pull request Aug 3, 2025

Payments are detected slower (probably server issue); 2-3 seconds PayButton/paybutton-server#830

Closed

lissavxo force-pushed the feat/connect-chronik-directly branch from 0b5b11b to 0859baa Compare August 18, 2025 18:13

lissavxo added 7 commits August 22, 2025 17:13

feat: add chronik handler

cb44099

update yarn lock file

8d35994

refactor: clean code

f33c53a

fix: ecashaddrjs resolution

623e3d9

fix: add bch chronik url

8629b02

fix: add networkBlockchainURLs to example config

6a04f2d

fix: demo page addresses

ffb8f07

lissavxo added 3 commits August 22, 2025 17:19

feat: improve chronik parseWebsocketMessage

76d980e

feat: wip logs

a772033

fix: improve timing on success

68a86bd

lissavxo force-pushed the feat/connect-chronik-directly branch from 0859baa to 68a86bd Compare August 22, 2025 20:20

feat: use AsOrdered chronik strategy

9d0d956

chedieck approved these changes Aug 27, 2025

View reviewed changes

chedieck self-requested a review August 27, 2025 13:16

chedieck requested changes Aug 27, 2025

View reviewed changes

fix: typo newtworkSlug

5ad43f1

lissavxo requested review from Klakurka and chedieck August 27, 2025 16:22

chedieck approved these changes Aug 27, 2025

View reviewed changes

Klakurka approved these changes Aug 28, 2025

View reviewed changes

Klakurka merged commit 4ee67d9 into master Aug 28, 2025
2 checks passed

Klakurka linked an issue Aug 28, 2025 that may be closed by this pull request

Connect directly to Chronik for payment detection #519

Closed

	opReturn,
	opReturn: JSON.stringify(parsedOpReturn), // Ensure opReturn matches parsedOpReturn

	const newChronikSocket = await initializeChronikWebsocket(params.address, (transactions: Transaction[]) => { onMessage(transactions, params.setNewTxs, params.setDialogOpen, params.checkSuccessInfo) });
	const newChronikSocket = await initializeChronikWebsocket(params.address, handleTransactions(params.setNewTxs, params.setDialogOpen, params.checkSuccessInfo));

Feat connect chronik websocket directly #522

Feat connect chronik websocket directly #522

Uh oh!

Conversation

lissavxo commented Jul 23, 2025 • edited by Klakurka Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Depends on

Description

Test plan

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull Request Overview

Reviewed Changes

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Copilot AI Jul 23, 2025

Choose a reason for hiding this comment

Uh oh!

chedieck Jul 23, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jul 23, 2025

Choose a reason for hiding this comment

Uh oh!

chedieck Jul 23, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jul 23, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jul 23, 2025

Choose a reason for hiding this comment

Uh oh!

chedieck Jul 23, 2025

Choose a reason for hiding this comment

Uh oh!

chedieck Jul 23, 2025

Choose a reason for hiding this comment

Uh oh!

chedieck Jul 23, 2025

Choose a reason for hiding this comment

Uh oh!

chedieck commented Jul 23, 2025

Uh oh!

Klakurka left a comment

Choose a reason for hiding this comment

Uh oh!

Klakurka left a comment

Choose a reason for hiding this comment

Uh oh!

lissavxo commented Jul 29, 2025

Uh oh!

Klakurka left a comment

Choose a reason for hiding this comment

Uh oh!

Klakurka Jul 29, 2025

Choose a reason for hiding this comment

Uh oh!

lissavxo commented Jul 29, 2025

Uh oh!

Klakurka commented Jul 29, 2025

Uh oh!

Uh oh!

Klakurka commented Aug 10, 2025

Uh oh!

Klakurka commented Aug 22, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

chedieck left a comment

Choose a reason for hiding this comment

Uh oh!

chedieck Aug 27, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

lissavxo commented Jul 23, 2025 •

edited by Klakurka

Loading

chedieck Jul 23, 2025 •

edited

Loading

Klakurka commented Aug 22, 2025 •

edited

Loading