Building a Crypto Price Tracker for Touch Bar
Click here to share this article on LinkedIn »
I’ve been keeping my eye on crypto since the 2013 spike in bitcoin price, whilst interesting, I never dug into the technology in depth. Towards the end of 2016, I saw more of a resurgence in the hype around blockchain, bitcoin and cryptocurrency in general. I think the price increase within bitcoin has been a rollercoaster that has sparked a lot of interest, both in the tech community and now in general population thanks to the media hype.
Bitcoin price has certainly been a ride — and regardless of which side of the ‘is it a bubble?’ question you sit — there has barely been a week without a large spike, upwards or downwards.
The Problem
There was a massive explosion of coins each moth, each with their own claims to fame and each with an associated price. ICOs became a thing, and hard forks more prevalent. This brought me to the problem:
How do I keep track of all of these prices, preferably in an easy/un-intrusive way? I was already checking my phone many times a day, flicking between currencies. At the same time I started a new job — and whilst not buying into the hype myself — I was delivered a fancy new MacBook with a touch bar, something I never thought I would make use of.
As the gears in my head turned, I found some people had had similar ideas — crypto price tracking on the touch bar! The first project I found was by Ryan Gordon who was originally inspired by this article. It was a great start! In fact, I ran my own customised version of Ryan’s script for a couple of months.
Then the problems set in, not the problems with the scripts, more that people started seeing it on my device and, of course, the questions started rolling in:
- Can I get a copy?
- Can you change it to work with this exchange?
- Can you add x,y,z coin?
As this happened a couple of times a month, I could see that firstly, people wanted it — which at first surprised me. Secondly, I was sick of building out the json files, copy and pasting scripts, fudging around with icons — all of which was very manual.
The Solution
I had to save myself from a lot of work, so it seemed clear to me that I should build a web app for this, keep it open source and piggy-back on the great work done from people already regarding things like icons. I would also describe myself as a hacker (not in the media sense) — more that I hack my way through a solution, iterating as ideas work and fail — this means I can deliver something quickly, but usually with a bit of code smell.
https://chrislennon.github.io/Crypto-Touchbar-App/ was born. Living on GitHub, deployed via GitHub pages to avoid having hosting overhead. Below are the general steps and phases I went through in creation of this application.
Building a template and logic for population
The previous examples had all made use of BetterTouchTool, which I had grown to love. The first step was to create a basic schema that would allow me to export/import a JSON file and populate it based on the coins the user wanted.
I already had examples of the style I wanted — a group to capture all the coins under one button (now optional), the coins them self each with their own symbol, their price, an simple indicator of whether it is up or down since the day started, and finally a close group button to back out of the coin group.
Each of these components were created, at first in BetterTouchTool, then later manually tweaked.
The schema that I ended up with is available in ./data/BTTSchema.js
The next stage was populating that from a list of coins. For the coins themselves, I identified some information, such as their name, the ticker used on exchanges and their icon. I would also need this for the traditional currencies — dollars, euros etc. ./data/coins.js & ./data/fiat.js
From previous experiments, I had already built a basic applescript (similar to those provided by the inspirational projects). I found a common API that would be able to cope with multiple crypto currencies and also the conversion to multiple traditional currencies — https://www.cryptocompare.com/api/# .
With this information, it was a fairly easy task to iterate over the coin list, and populate parts of the schema and script that were required for each coin. You can see this in action in the ‘generateJSON’ function of ./js/crypto.js . Initially this was just a static array, with no user selection — however, that was about to change.
User selection, and User Interface
So to be able to give users the power to create their own toolbar, a UI was needed. One problem was that I usually have no time for CSS or style — but I understand its importance.
I decided to start with the ‘easy’ bit, using the same coin list as before to iterate out a series of checkboxes that users could select. After users had selected their desired cryptos and clicked ‘export’ I picked up the selected checkboxes and made that the static json that was fed into my generateJSON function outlined above. You can see the population of the checkboxes and inputs in the ‘loadData’ function of ./js/crypto.js .
Doing this, I encountered a few issues, mainly in my iteration logic and lack of expert knowledge JS, I could see the issue but wasn’t 100% on my options to fix it — begging a colleague (thanks Bart!) to look at it he was very quick to offer up a solution. I was overwriting the object over each iteration rather than cloning it to its own independent version. A few `let` statements and Object.assign() statements later, and I was back on track.
The next step was tidying up the interface and providing a preview to the user. Both the preview of the touch bar and layout of the main page was a bit of a CSS fiddle, but with some guidance from my resident CSS monkey and GitHub pages guru (thanks Thomas!) I decided on implementing the basic GitHub pages slate style (but manually as its only built for markdown via Jekyll) and built myself some fancy buttons and a preview touch bar. The styling for this is available within the ./style directory, specifically ./style/styles.css for the custom elements.
Whats Next?
Honestly? Who knows… This grew out of saving me some work for friends and colleagues who wanted something to show and I felt it appropriate to open it up to the world too. I am tracking ideas and taking suggestions via my GitHub issues page and have been bashing away on implementing them as I get time and inspiration.
Some ideas that have surfaced (most of which made it into the code before this article goes out):
- Providing a user-defined refresh interval for the API price check (done)
- Providing a user-defined colour picker for changing the colour of the toolbar buttons (done)
- Providing a toggle to enable/disable the grouping of coins into a group (done)
- Implement a dynamic list of coins from an API (TODO, has some issues)
- Tidy up some of the ‘code evolution’ that has occurred:
- Refactor the JS into something a bit more pretty and usable for other developers
- Handle the use of SVG icons and base64 PNG (for BTT) conversion nicer
I am open to comments and suggestions — please just get in touch via GitHub, this article, or twitter.
Edit: Can’t believe I left out a picture of the end result! Here is an export I did for some coins versus USD — now moved to the top of the article.
