Satoshi Power
Rationale
This was my original summary from my post back in August this year
Pulling in data from blockchain.com exchange rates API I decided to create a tongue-in-cheek infographic, presenting a perspective on how the smallest fiat currency units stack up against satoshis (sats). Which is the smallest unit in Bitcoin. (there are 100m sats in 1 bitcoin)
Ever since then, I've taken the product beyond where I expected to take it. Initially I thought it'd be a fun side-project to play around with, and learn some next.js. With the addition of a satoshi price conversion tool, I think it's become something of more practical value.
With this change in direction, I've made changes to the roadmap I have planned for Satoshi Power. This post showcases the project and retrospectively talks about the major updates and challenges along the way.
Language and feel
Unashamedly cynical and Bitcoin maximalist. Using words like fiat shitcoins. Not pulling any punches, inclusion of the skulls, to indicate where fiat units of currency values have been surpassed, or killed by sats.
Homepage currency index
Grid layout showing each fiat currency's name with a percentage bar that depicts the value of a satoshi against that smallest unit, (example British Penny). Along the lines of the original goal, to be able to see, at a glance, this comparison across the most used fiat currencies.
I mocked up a grid layout, with each currency occupying a segment of the grid. Making sure there's no gaps or orphans on desktop and tablet view. This bought into focus the fact that I might have to omit some currencies that the API provides.
Ultimately I made the decision that this was to be a curated list of currencies, as opposed to show everything the API returns. With this, I can choose which currencies to show based on how well known they are, shock value (Nigerian Naira anyone?) And maintain control of the layout.
Dedicated currency screen with converter tool
At some point, I pondered how I could increase traffic by creating dedicated pages for each currency. But then the question arose, what can I put on such a page? With access to the currency and conversion data, possibilities ran through my mind. The initial idea, which I took as far as creating visual mockups for, was some charts to show fiat price over time, denominated in sats. I soon realised this would be more of a challenge than I had anticipated. Something for another article if I can get to it.
I settled on creating price conversion functionality. Building the first iteration of this was relatively straight-forward. But the design challenges that arose were numerous. Again, I will talk about this in another article when I get to it.
Units, sub-units and skull icons 💀💀
The biggest design challenge is what units to show. The initial idea is to show comparisons between satoshi's and the smallest units of fiat currencies, but when the smallest unit of Argentine currency for example—the Centavo, is already worth less than 1% of a sat, you can argue the more meaningful comparison is with the main unit, the peso.
However I came to the realisation that being selective about whether to show sub-units or main units, on a per-currency basis isn't the right solution. Considering the units are shown in order of their value against the sat, in percentage terms. You might have, for example the Russian Ruble close in this measure with the US cent—the sub-unit alongside the standard unit, with no visible delineation.
To solve this, I introduced the skull icons. One icon means the sub-unit is already "dead" or of lesser value than a sat. As an enhancement of this playful approach I decided to introduce another skull, to indicate currencies whereby both the sub-unit and main unit are dead. The ultimate badge of shame for inflating fiat currencies.
As I progress this project along the roadmap, this post will be updated. Check back soon!
Look & feel and typography
Bebas Neue was an obvious choice. I needed a condensed font to fit the currency names into the grid segments comfortably. With good language support, for currencies like the Danish Øre, or the Polish złoty.
Behind each currency name, is a block which expands/contracts based on the percentage. I needed to ensure the bg colour of the block has sufficient contrast against the text in line with WCAG guidance. The Bitcoin orange (hex: #f7931a) is not sufficient, So I had to tweak this colour to achieve the required 4.5:1 contrast ratio. When the percentage is > 100, the text can change to black, and the Bitcoin orange can be used. As a result there's a visible difference between the shades of orange used.