How To Build A Bitcoin Cash Tipping Monitor
Tipping in BCH has never been easier. I’m Paul Bergamot, Web Developer at Bitcoin.com. This post is to discuss how simple the process of tipping in BCH is and how I easily made it an interactive centerpiece for the BCH Anniversary party in Tokyo.
People say I’m a problem solver. Working closely with the events team on the Bitcoin Cash Anniversary event in Roppongi, I saw an opportunity for a new app. The team, not wanting to complicate things, needed a simple way to tip the dancers at the event. I had the answer.
A tipping monitor called “Nagesen Tip BCH Please ❤ Board”.
The team had hired performers for the night, and I thought this would encourage people to tip them.
How does TipsMonitor work?
The addresses that are listed are supplied by the dancers, the tipping monitor just monitors those addresses with websockets and throws a notification when they receive a tip. It was pretty easy to make — I whipped up the mvp within a day and spent about a day styling it to make it look ‘pretty’.
I worked with the party organisers to get the dancers details — images and Bitcoin Cash addresses. They also suggested the name “Nagesen Tip BCH Please ❤ Board” as it was an event in Japan and the literal translation of Nagasen means “payment”.
If you were on our social media that night, you will have seen the night went well. The performers received a bunch of tips from the audience.
Everything technically went well, apart from one small problem with the projector that the monitor was displayed on. It was out of focus so it was sometimes hard to scan the QR codes.
One way around this could be to put up posters or QR codes in a programme or on stickers.
Simple Tech, Simple setup
The technical side of the app is pretty straight forward. After creating a basic BitBox app from developer.bitcoin.com with `bitbox new TipsMonitor — scaffold react`, I created the basic layout and components that would store the performers QRCodes and pictures.
Next I needed to update the balances of the addresses that were provided. So using BITBOX again, I entered all the addresses into an Array and used `BITBOX.Address.details(addresses)` to fetch the balances and display it on the page. I also input this in a function to call when needed.
Once up and running, there is a need for the notifications to show when one of the addresses received a transaction- so a socket connection to BITBOX was created with `const BITBOX_SOCKET = BITBOX.Socket()` and listened for transactions with `BITBOX_SOCKET.listen(‘transactions’, this.handleNewTx)`. handleNewTx is a function in the react component where this all takes place.
Since the socket connection listens to all transactions broadcast on the Bitcoin Cash network, the handleNewTx function iterates through the outputs of each transaction it receives and checks to see if it matches with one of the performers’ addresses. If it finds a match, it then creates a notification… Well almost, at this point in time it was just a console log.
TipsMonitor Final Touches
With the sockets all working sweet, I added a notification popup. Originally one popup would occur when any performer was tipped, but then we thought it would make a bigger impact if there was a popup per-performer, so multiple tips could be seen at once.
When everything was working to my expectations, the app was cleaned up and made aesthetically slick.
Gabriel, our Senior Bitcoin Cash Engineer loved the product and went on to add it as a scaffold to BITBOX. So I stripped it down to the bare basics (by removing the dancers images and names.)
The app is now a BITBOX scaffold capable of being built and running within minutes using `bitbox new TipsMonitor — scaffold websockets`.
With a few modifications to the performers.js file, it’s really simple to get this up and running for any event.
Have you used the TipsMonitor yet? Let us know.
For more information on BitBox head to our developer.bitcoin.com.