Bitcoin, created in 2009, was the first decentralized cryptocurrency. Since then, numerous cryptocurrencies have been created. These are frequently called altcoins, as a blend of bitcoin alternative. Bitcoin and its derivatives use decentralized control as opposed to centralized electronic money/centralized banking systems. The decentralized control is related to the use of bitcoin’s blockchain transaction database in the role of a distributed ledger.

In the modern world, cryptocurrencies have become a part of our lives. ONLINICO believes that money transfers with cryptocurrencies are faster and cheaper than bank wire transfers. Or, at least, they used to be faster and cheaper. A couple of months ago fees for small amounts of money have become comparable to fiat transfers. So the idea of creating a site which will help people compare fees and choose the best solution for money transfer emerged.

CryptoFees is an open-source project made with a single purpose – to showcase which cryptocurrency provides best fees for money transfers by analyzing the most recent transactions from two most popular cryptocurrencies – Bitcoin and Ethereum.

Architecture

Site logic is implemented using React.js, and responsive HTML+CSS markup is based on Twitter Bootstrap. All logic is completely client-side so a page can even be downloaded and opened locally.

Data for fees calculation is retrieved in BTCProvider and ETHProvider classes. These are subclasses of CurrencyInfoProvider class. This base class has nothing but a simple XHR wrapping code for it to be standalone and not to rely on any 3rd-party libraries.

BTC provides uses open blockr.io API to retrieve data. First, it gets current Bitcoin exchange rate and a number of the latest block in Bitcoin blockchain. Then it retrieves transactions from last 8 blocks which is a large enough dataset to calculate meaningful and accurate median fees.

ETHProvider retrieves data from etherchain.org API. Ethereum transactions are a bit tricky – there are regular account transactions which transfer only Ether cryptocurrency between two accounts, and contract transactions which have a higher fee for additional data payload. So to compare apples to apples all contract ETH transactions are omitted.

Both providers return data in common format. They combine and map data from APIs to create data set ready to be consumed by React components. This makes it easy to change APIs if necessary and implement new providers for other cryptocurrencies, like Litecoin, Monero or Ripple.

Providers have initialize() functions with two callbacks for successful initialization and failure. This function gets current cryptocurrency exchange rate and some other necessary basic information. After successful initialization, getLastTransactions() function can be called to retrieve transactions. It also takes two callback arguments to inform about success and errors.

View layer is implemented with a few React.js components. Let’s take a look at them.

The simplest component taking part in rendering results is Transaction. This class has no logic and its only purpose is to render a single transaction item. It takes transaction amount, fee, percentage, and link to a transaction from props and renders a single table row with provided data.

All final data processing (preliminary filtering of data is done by data CurrencyInfoProviders) is done in FeeVisualizer component. First, it takes data provider, transaction min and max amount values from props and uses this data to filter only transactions within provided range. Then it renders them to a set of Transaction components and calculates average, median, min and max fees.

Finally, App component creates instances of providers and sets up two FeeVisualizers to display data. Also, it implements two inputs to enter transaction amount range and provides entered data to FeeVisualizers by updating state when a user requests refreshing data by submitting the form.

Deployment

Deployment is implemented using surge.sh service. Because site content is completely static it doesn’t require any back-end. So surge.sh appears to be a perfect publishing tool.

Thanks to Create React App preconfigured environment and surge.sh ease of use all build and deployment is done with these two commands:

Feedback and Improvements

For the very first site launch, I decided to make a post on Reddit. Reddit Ethereum community was really helpful in testing site and proposing improvements to the algorithm. Because of their help comparison between two quite different cryptocurrencies is more accurate and meaningful.

Further improvement for this service is obvious – to provide transactions information from more cryptocurrencies.

And of course feel free taking source code from GitHub to improve or reuse it – it uses MIT license.