Raiden Map: Mockups

Our goal is to build a clean user interface providing valuable information about Raiden Network at a glance. We’re working on this project since November 2018 and now we’re ready to ingest feedback about what we’ve done so far.

We already wrote a post about the infrastructure and this time we’re going to talk about the first draft of the user interface and the technologies we plan to build it with.


The “Home” Page

Don’t focus on what the graphs are showing, those could be something very different when we deploy our product.

On the top there are some generic info about the crypto ecosystem as well as generic info about the userbase of Raiden Network. The graphs will show relevant time-series data about the userbase and token networks, like how many new users and token networks there are each week.
 The Twitter feed will act as a “window to the community”, something that We think is pretty useful if you are not already involved in the ecosystem of the project.
 This kind of dashboard can give a hint to people trying to answer questions like: “How is this project going?”, “How many people are involved?”, “Should I consider to invest in this?”.

Token Network Dashboard

Clicking on any token will bring the user to a dashboard dedicated to that token. As you can see, the aside content will be collapsible, leaving more space to the graphs. Most of the UI will be interactive, allowing the user to navigate through the history of every token network (the controls to do that are not in the mockup).

“But why is this project called Raiden Map?! I haven’t seen a map yet!” — You will ask. Well, last but not least we have the …

Map View

The image really talks for itself. We think this is a useful visualization tool. Hoping that light nodes can be distinguishable from full nodes, this map will enable hypothetical full nodes users to deploy full nodes (or nodes for pathfinding and monitoring) in strategical areas, with the aim to improve the service provided by that token network.


We’ve briefly introduced you to what the site could look like, now let’s talk about how do we plan to get there. Let’s get more technical.

Raiden Map will be a Single Page Application. We are deep in the process of choosing the right tool for the job, the front-end stack in this case. The last names to get into our “list” of possible choices are Vue and Blazor.

Vue, well … Is Vue. In this case Typescript will help us structure the project even more.

Blazor, on the other hand, is a really exciting new entry in the Web Development ecosystem, and the idea to use our beloved C# directly in the browser is what is keeping Blazor in this list. And if we pick it, we’ll have the opportunity to provide valuable feedback to the Blazor Open Source Project, which we hope will become an official product.


That’s it! Please reach out to us here on Medium, @raidenmap or in the community telegram raiden group, let us know what you think and please, if you think we are somehow going in the wrong direction, help us steer!