Raiden WebUI

Getting Started ∙ Contact

Raiden WebUI is a simple web application that 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 functionality.

Table of Contents

• Table of Contents
• About The Project
• Getting Started
  • Learn about Raiden
  • Using the WebUI
  • Prerequisites
  • Development
    • Configuration
    • Running the WebUI
    • Python package
• Contributing
• License
• Contact

About The Project

The Raiden Network is an off-chain scaling solution, enabling near-instant, low-fee and scalable payments. It’s complementary to the Ethereum blockchain and works with any ERC20 compatible token.

The Raiden client code is available here and has been released for mainnet with a limited alpha release of the Raiden Network in December 2018.

Raiden WebUI is built using the following technologies:

• Angular
• Angular Material
• Angular Flex-Layout
• Web3.js

Getting Started

Learn about Raiden

If you haven't used Raiden before, you can:

• Checkout the developer portal
• Look at the documentation
• Learn more by watching explanatory videos
• Read the blog posts on Medium

Using the WebUI

If you want to learn how to use the Raiden WebUI an updated tutorial has been published in the new documentation for Raiden.

Prerequisites

If you just want to use the WebUI all you need to do is install and run Raiden. A version of the WebUI comes bundled with each Raiden release and is accessible from http://127.0.0.1:5001.

For details on how to easily install Raiden:

Read the Quick Start section in the documentation.

If you want to work on the WebUI codebase you need:

• Node >=10.13.0
• A working Raiden client.
• Git for version control.

Development

Before you start working on the WebUI you need to install the WebUI dependencies.

npm install

Configuration

Before you begin to work on the WebUI you have to make sure that you have the proper configuration. Check if the proxy configuration corresponds to your actual environment configuration.

Since you will not be running the WebUI embedded into Raiden you need to provide both the Ethereum RPC endpoint and the Raiden REST API endpoint to the proxy.config.json.

By default the configurations looks like this:

{
    "/api": {
        "target": "http://localhost:5001",
        "proxyTimeout": 600000
    },
    "/web3": {
        "target": "http://localhost:8545",
        "pathRewrite": { "^/web3": "" },
        "changeOrigin": true,
        "proxyTimeout": 60000
    }
}

The configuration assumes that the Ethereum RPC endpoint listens on http://localhost:8545 and the Raiden REST API is on http://localhost:5001. If you are using a different configuration make sure to update the corresponding fields in the configuration.

For example if you run Raiden on port 5002 and you use Infura as your RPC provider you would have to modify the proxy.config.json to like like:

{
    "/api": {
        "target": "http://localhost:5002",
        "proxyTimeout": 600000
    },
    "/web3": {
        "target": "http://goerli.infura.io/v3/YOUR_API_KEY",
        "pathRewrite": { "^/web3": "" },
        "changeOrigin": true,
        "proxyTimeout": 60000
    }
}

Info: On development mode there is no way to guarantee that raiden and the RPC provider run on the same chain. You have to be careful, because if you start for example Raiden on Rinkeby and pass Görli as the RPC endpoint, WebUI will fail to work.

Important: Modifications on proxy.config.json make sure never be part of your PR.

Running the WebUI

After you are done with the configuration you can start the development server:

npm run serve

After the development server starts you have to navigate to http://localhost:4200/ui, in order to use the WebUI.

Python package

The WebUI is build as a python package and it's available on PyPI. This package is pinned as a dependency on Raiden. The PyPI package provides a precompiled version of the WebUI that is bundled with Raiden and can be used out of the box.

The python package provides a static variable that points to the location of the WebUI static content root directory. This can be imported by raiden to expose the bundled WebUI resources:

from raiden_webui import RAIDEN_WEBUI_PATH

The package can build the python package by calling:

python setup.py build sdist bdist_wheel

The command calls npm build:prod to build the static production version of the WebUI so that it can get included in the python package.

If you need to install the package locally to your development virtual environment you can do so by running:

python setup.py build install

In case you need to use the debug version of the WebUI with in your virtual environment you can also run:

python setup.py compile_webui -D install

This will build the debug version of the WebUI to include in your package.

Contributing

Contributions are what make the open source community such an amazing place to learn, inspire, and create. Any contributions you make are greatly appreciated.

Also have a look at the Raiden WebUI Development Guide for more info.

License

Distributed under the MIT License.

Contact

Dev Chat: Gitter

Twitter: @raiden_network

Website: Raiden Network

Mail: contact@raiden.network

Project Link: https://github.com/raiden-network/light-client