Blockchain transactions flow visualizer

[megasyl]

Hello,

I though it would be cool to visualize the bitcoin transactions. Blockchain explorers are practical, but they lack, in my opinion, graphical representation.
It might be nice for educational purposes as well.

I made it in JS so it can be accessed from the web. I'm currently using blockchain.info api, and users will subject to api rate limitations (that might cause CORS issues).
Maybe I'll make something to talk directly to your node with RPC so I can use extended public keys to derivate addresses without the risk of exposing it (and read data directly, without limitations). (I'm thinking about the umbrel app store for exemple)
I also use their websocket api to live update the transactions.

Here's an exemple of a an address with recent transaction, try it out
https://megasyl.github.io/tx-flow/?address=3C3DH5fYJjkudpvR4fqqjN9zNePfoNpmbf

(Edit) or here's a preview
https://i.ibb.co/Dpkbb2Z/Screenshot-20211014-222741.png

It's still WIP, some features are missing, when you open big addresses it crashes, api limitations are annoying (use a vpn). But I'd like your feedbacks. What do you think about it ?

[1715018640]

1715018640

[1715018640]

1715018640

[1715018640]

1715018640

[NotATether]

Your app appears to be broken for your example address but from looking at the sample picture, it's a good concept.

If you hosted this thing server-side, which would require you to move this from Github Pages to an actual server, then you could be able to make a graph data structure of addresses as they are passed to you, and you wouldn't need to perform rate-limiting API calls each time someone makes a request to your app.

Or, you could preload the last N transactions, and create some sort of back button that will load the previous N transactions for a particular transaction output and so on.

[megasyl]

Your app appears to be broken for your example address but from looking at the sample picture, it's a good concept.

What happens exactly ? Does it freeze or does the API reject your call ?
The exemple address has another transaction with a lot of inputs, since I render a node for every input address, that might cause your the app to freeze (I should at least put a warning). It works for me tho, here's what I get :
https://ibb.co/PmGrhMT

Did you try with any other address ?

If you hosted this thing server-side, which would require you to move this from Github Pages to an actual server, then you could be able to make a graph data structure of addresses as they are passed to you, and you wouldn't need to perform rate-limiting API calls each time someone makes a request to your app.

I considered the question. I just wanted to make a PoC here, using an external API.
I have different ideas for the backend and but I want something easy to deploy for anyone on their own node (so they could read their own chain) if they want (and a demo saas version).
I'll post updates here

Or, you could preload the last N transactions, and create some sort of back button that will load the previous N transactions for a particular transaction output and so on.

It's actually implemented. The '+' button in an addres loads all of it's transactions and the target addresses. You can dig in the direction you want (until you have a big transaction that crashes the app lol)

[NeuroticFish]

What happens exactly ? Does it freeze or does the API reject your call ?

I guess that this image tells it better than I could:

[SFR10]

Blockchain explorers are practical, but they lack, in my opinion, graphical representation.
~Snipped~
I'm currently using blockchain.info api,

Back in the day, it was a different story! Not sure why Blockchain.info ^{[or ".com"]} removed that feature ^{[yours look almost the same: e.g. #1 and #2]}.

api limitations are annoying (use a vpn).

I did use a VPN but still had a somewhat similar experience to @NeuroticFish. The only difference was the "Unconfirmed tx" part ^{[it kept refreshing or rather shuffling the transactions]}.

[dkbit98]

I am having the exact same error message and I tried using different browsers including Tor and different addresses, all with same error results.
After checking your preview example I think that it should have some zoom option because I can't clearly see any address shown on your image.
Graphical transactions visualizer is a good idea but some explorer can show this and there are even some wallets like Sparrow who can do something similar with diagrams for transactions:


https://www.sparrowwallet.com/

[jonathan6655321]

I like it!

I actually think you should consider expanding this tool since you can make a profit from it by creating a limit for the levels of transaction visualization someone can get.
Businesses, governments, etc might find the pro version very useful.


As for the hosting, it seems like the tool is not working so consider moving it to a different host.
Also adding small features like 'different view', will improve the UX.

Example
https://anvaka.github.io/sayit/?query=Bitcoin


If you decide to scale this tool and run a pro version, you should keep it free for personal use. The crypto community will love it and it will help you to spread the word about it which will improve your traffic, domain authority, etc

Running blockchain marketing around this tool can also help you to spread the word around it. You can do all the marketing activities yourself from the beginning. Writing great blog articles, showing different transactions of big wallets can go viral on Reddit and other communities.

Good luck, and keep us tuned here for some new info about your development.

[megasyl]

Hello guys !

Thank you all for your responses.

SO, I'm a bit embarrassed, the app was not working because I forgot my cors extension ^^'
blockchain.info has a ?cors=true option on it's API routes but not on /latestblock ( I suppose to avoid spams) so I made a little backend that query the api and cache the response. The address API route is still called via the browser so every user will have it's own limit rates.

I bought a domain so it's a bit cooler (www.txflow.io).

Back in the day, it was a different story! Not sure why Blockchain.info ^{[or ".com"]} removed that feature ^{[yours look almost the same: e.g. #1 and #2]}.

Yeah, I saw it once existed but I think they removed the feature. What a shame. So I did it myself ^^

After checking your preview example I think that it should have some zoom option because I can't clearly see any address shown on your image.
Graphical transactions visualizer is a good idea but some explorer can show this and there are even some wallets like Sparrow who can do something similar with diagrams for transactions:

https://i.imgur.com/cltOW5s.jpg
https://www.sparrowwallet.com/

You are already able to zoom, you should be able to try it out now

If you decide to scale this tool and run a pro version, you should keep it free for personal use. The crypto community will love it and it will help you to spread the word about it which will improve your traffic, domain authority, etc

If I make a backend I will have to because it's not free to store and index a 500g+ blockchain.
I run my own node with lnd and stuff like that. Maybe I'll make something that reads directly the chain on people's nodes. You would have the "demo" on my domain, and you could still run a local version that reads YOUR chain.

[dkbit98]

You are already able to zoom, you should be able to try it out now

It was not working before, but now I see that control panel showed in bottom left side with zoom plus and minus, lock, focus on selected node and clearing the scene.
There is also an interesting option for adding more info on each addresses, and expanding transactions that can be very useful.

[SFR10]

The address API route is still called via the browser so every user will have it's own limit rates.

I have no idea how exactly those limits are imposed, but it seems that it's not just tied to each individual ^{[each of the browser's sessions, led to a different result (tested in Chrome, Tor, Firefox, Opera, and Edge)]}.

when you open big addresses it crashes,

It's worth noting that I experienced more crashes while it was "zoomed in".
^{- Perhaps it's hitting some of the limits in your current hosting plan [apart from the API limits].}
I noticed that the "X" button, doesn't work.
Despite all of the above issues, I really enjoyed using it <sup>[when it's working smoothly]
- Bookmarked.</sup>

[FatFork]

The preview looks like a really interesting concept, and it could be a useful tool. However, I was unable to open the application.
My CPU was at 100% and nothing happens for more than ten minutes, so I sometimes had to kill the process to terminate the application.

[megasyl]

Maybe I'll make something to talk directly to your node with RPC so I can use extended public keys to derivate addresses without the risk of exposing it (and read data directly, without limitations). (I'm thinking about the umbrel app store for exemple)
I also use their websocket api to live update the transactions.

Bitcoin Core doesn't have index of address, so it'll be challenging task unless the input is changed to both address and any TXID which contain that address (assuming the local node enable txindex).

What do you think about it ?

I like it, the UI is simple and doesn't feel bloated. Do you have any plan to make your tool open source?

I'm not sure yet how to do the index part. If I can use an external one like electrum's index (because I have a node running electrum) but I don't know if it can help. Maybe I can use an external tool to index it myself but that would require extra space :/
I'll probably make it open source yeah

The address API route is still called via the browser so every user will have it's own limit rates.

I have no idea how exactly those limits are imposed, but it seems that it's not just tied to each individual ^{[each of the browser's sessions, led to a different result (tested in Chrome, Tor, Firefox, Opera, and Edge)]}.

when you open big addresses it crashes,

It's worth noting that I experienced more crashes while it was "zoomed in".
^{- Perhaps it's hitting some of the limits in your current hosting plan [apart from the API limits].}
I noticed that the "X" button, doesn't work.
Despite all of the above issues, I really enjoyed using it <sup>[when it's working smoothly]
- Bookmarked.</sup>

.

The interface is generated by a browser code, the rendering has nothing to do with the hosting plan (unless you take into account the time to serve the script to the browser).
I'm using a library (react flow) which ... was maybe not really made to be stressed with big transactions.
I'll probably optimize the interface by, for exemple, not rendering the input/output addresses of a transaction if it has more than x input/output, and add an option to expand it at will.

And sorry for the missing feature, I do it after work when I'm bored ahah.

I'm glad you liked it

The preview looks like a really interesting concept, and it could be a useful tool. However, I was unable to open the application.
My CPU was at 100% and nothing happens for more than ten minutes, so I sometimes had to kill the process to terminate the application.

Sorry you didn't have a good experience :/ Try with small transactions first and see what are your limits. I'll try to improve the performances :p

[FatFork]

The preview looks like a really interesting concept, and it could be a useful tool. However, I was unable to open the application.
My CPU was at 100% and nothing happens for more than ten minutes, so I sometimes had to kill the process to terminate the application.

Sorry you didn't have a good experience :/ Try with small transactions first and see what are your limits. I'll try to improve the performances :p

Yes, you're right. It appears to work with addresses that have a small number of transactions.
It seems that the problem is that my laptop has an older generation of processor and doesn't have very good graphics capabilities. It works much better on a desktop computer.

BTW, are you familiar with the Ethtective.com? It provides a transaction visualizer like yours, but for Ethereum blockchain with the ability to add additional addresses and display transactions between them. Would it be possible to implement something like this using your tool?

[megasyl]

The preview looks like a really interesting concept, and it could be a useful tool. However, I was unable to open the application.
My CPU was at 100% and nothing happens for more than ten minutes, so I sometimes had to kill the process to terminate the application.

Sorry you didn't have a good experience :/ Try with small transactions first and see what are your limits. I'll try to improve the performances :p

Yes, you're right. It appears to work with addresses that have a small number of transactions.
It seems that the problem is that my laptop has an older generation of processor and doesn't have very good graphics capabilities. It works much better on a desktop computer.

BTW, are you familiar with the Ethtective.com? It provides a transaction visualizer like yours, but for Ethereum blockchain with the ability to add additional addresses and display transactions between them. Would it be possible to implement something like this using your tool?

Wow Ethtective is very cool ! Thank you

With txflow you can add successively different addresses and it should add links if it exists. If there is no link you should see two separate flows. I'll see what I can do about it