Web Application Tutorial¶
In order to quickly give an overview and idea of what the Raiden Developer Preview is capable of, a simple web application has been created. This application utilizes the Raiden REST API endpoints to allow the user to interact with token networks, make token payments, see the current status of open channels along with closing and settling channels to name some of the functionalities. For a more specific guide of the API itself see the API Walkthrough.
The main focus of the web application is to display functionality and not to look pretty. Should you however want to make it pretty, don’t hesitate to create a pull request.
Running the web application¶
There are a few simple steps that needs to be carried out in order to run the Raiden web application. Firstly, Raiden needs to be installed. See install instructions for this.
The only dependency needed to run the web application is node.js.
Once Raiden and node.js has been installed, it is quite easy to install and start the web application. From the root of the Raiden directory do:
python setup.py compile_webui
This could be run automatically as part of installing Raiden, but to keep the run time of tests down, it’s not.
With the web application installed, we can fire up Raiden. Make sure, you add the CORS domain to the start parameters of your ethereum client:
geth <...other parameters...> --rpccorsdomain "http://localhost:5001"
Raiden can be started without the web application by providing the
Now all that is left to do is to navigate to localhost:5001 and interaction with Raiden through a web application can begin.
The landing page¶
The first thing that will meet the user is the landing page. The landing page is meant to give a short introduction to Raiden and link to some relevant documentation.
Below is a screenshot of the landing page.
One last thing that might be interesting to note is that the address of the running Raiden node is always displayed in the top bar.
Wallet view provides information about the registered token networks. Furthermore it also allows for automatically joining an existing token network along with registering a new token network.
The first thing to notice in this view is the list of tokens for which a token network exists. All tokens that have been registered in Raiden will show up in this list. If the user knows the name or the address of a token, it’s very easy to search for it using the
Filter input. If the token the user searches for does not show up, it most likely means that it is not yet registered. Registering can however be done by pressing the
Circular Plus button and provide the token address. For each token in the list of tokens some information is provided. This information includes the
Symbol of the token, the
Address of the token, the
Name of the token and the user’s
Balance of a specific token. It’s easy to sort the tokens, so that only tokens that a user actually holds, show up in the beginning of the list. This is done simply by selecting an entry on the
Sort by dropdown menu. You can change the sorting order by pressing the arrow on the right side of the
Sort by dropdown menu.
You can access the
Network Events by selecting the
View network events option of the overflow menu.
Initially, before joining any token network, the only button available will be the
Join Network. After pressing the button, a pop up will then appear where the user can choose how many tokens to automatically join the token network with. See connect for more details on how this works.
After joining the network the
Pay button becomes available. This will allow the user to choose an address to send tokens to that the user is not directly connected to. This is done by mediating transfers through nodes that are connected with each other.
Should it at some point in time be desired to entirely leave a token network. The
Leave Network button point allows you to do so. This will automatically close and settle all open channels within a specified token network. For more information on how this works, please see leave.
The overflow menu provides the
View token events option. This will simply redirect you to a new page where you can see all channels created and deleted for the specific token.
In further releases it will also be possible to perform token swaps with the
Swap Tokens button. This function is not part of the Red Eyes release.
Above is a screenshot of the
Wallet view with some registered tokens.
Channels page is where a lot of the interesting stuff is going on. If a node has no open channels, not a lot of interesting information is displayed here. Under the
Network Events tab it is however possible to see whenever a new token is registered. With no open channels the most interesting thing that can be done from this view is to manually open a new channel. This is done by pressing the
Circular Plus button and filling in the information in the pop up formula.
Once a channel is opened it will show up in the list of open channels. For each channel some relevant data is shown. The
Partner fields represent the address of the payment channel itself, the address of the partner and the address of the token that the channel is opened with. Furthermore the
Balance shows the amount of tokens that the Raiden node has available for the specific channel. You can view more information about the token just by hovering over the token
Symbol above the
State represents the current state of the channel i.e. if it is opened, closed or settled. Lastly there are buttons that represent the interactions that can be made with a channel.
Pay sends a payment to the counterparty of the channel.
Deposit allows the user to deposit more funds in the channel.
Close closes the channel and updates the
State of the channel to
closed. Once the channel is closed no more payments can be carried out and the
settle_timeout is initialised. Furthermore once the
settle_timeout has expired the channel will settle and payout the correct amount of the deposit to each channel participant. It is possible to sort the list of channels by the
Sort By dropdown menu and change the sorting order by the arrow on the right of the field, or to search for a specific partner or token address etc. using the
Above is a screenshot of the
Channels view with some open channels.