Cryptocurrency Trading App

UI/UX most convenient for trading

In order to understand what is expected of a crypto trading app we’ve analyzed the top 10 crypto trading solutions, i.e. we got authorized and tried trading. 

As a result we’ve established a list of key elements the users want to see right away when they open the app: the chart, depth of market, orders, and quotes for currency pairs. Those were the elements we put on the main screen in Twim.

The app features a dark theme, which is more suitable for late night work and is easier on the eyes. As for the other elements, we picked contrasting colors to make them stand out. The buttons are bright orange and the fonts are white because the colours are clearly visible on a dark screen.

Two different versions for enthusiasts and power traders

We figured out what enthusiasts and power traders want from a crypto trading app. The former only need the app to buy or sell cryptocurrency, monitor portfolio statistics, and keep an eye on changes in open interest or close a position at any time, if necessary. All of this can be done on a smartphone.

For power traders, however, these options aren’t enough. They need a bigger screen and a full-out trading terminal where they can analyze depth of market or place complex trade orders. They also use advanced tooling for stock analysis: charts, candlesticks, and indicators.

Power traders do use mobile apps as well but only to take a quick look at open positions.

Taking this into account, we implemented two versions of the crypto trading app — one for smartphones and the other for tablets. They had different functionality and suited both first-timers and power market players. 

Rapid updates on quotes and charts

Quote charts are among the key elements of an app for any stock exchange. It’s important that they are displayed accurately and updated very quickly. In order to plot charts in Twim, we used for cryptocurrency app development the library by TradingView, the most popular platform offering financial data visualization. Thanks to flexible settings, it allows you to display a massive number of indicators a trader may need.

To use TradingView charts we needed a WebView component. It helps incorporate web pages into Android apps. In order for the charts to be correctly displayed on both IOS and Android devices, we created extra wrappers — native wrappers on Swift and Kotlin.

This is what the process looked like:

• By means of the gRPC remote transfer protocol, data were transferred from the exchange server to TradingView.
• They were then converted into charts and sent to the app through WebView.
• Depending on which device the trader was using — iOS or Android — a corresponding native wrapper was used.

Fast data flow was important to maintain as we worked on the app — quotes had to be updated up to 20 times per second. In order to do so we used a combination of gRPC, HTTP/2, and protobufs.

gRPC is a high performance Remote Procedure Call framework developed at Google. It helped our app exchange data — cryptocurrency quotes — between the server and the client. The HTTP/2 protocol converted the data into a binary code. Together they reduced the amount of data exchanged, thus increasing the flow rate.

The protobuf serialization protocol provided an alternative for JSON. It encoded data transferred from both the client and the server and did it fast since they were binary, optimized for the minimum message size.

Stable app

Quotes are updated very quickly — a few times a second. These data are constantly received from the server. All changes are instantly displayed on a chart, which means the app has to redraw the interface in a flash.

Such an intense pace overheats old or slow devices and drains their batteries. The screens may flicker or freeze because the processors can’t keep up with the incoming events. Programmers need to stop this from happening.

We put the data in a stack. While the interface renders new data, more updates are received from the server and put into a stack ‘queue’ one after another. When the UI requests new data, it takes the latest, most relevant update and displays it. This way the processor has enough time to process the information while the battery operates under regular conditions.

Standard architecture that’s easy to maintain in-house

We provided Twim with native crypto trading apps for iOS and Android using the industry standard of architecture with some extra elements added. A standard solution is intuitive for programmers: you just know how to write the code, how the app behaves in this or that business scenario, and how to make autotesting easier. Each element of the architecture is documented. That’s why the support team won’t have trouble working with it.