columbus-united

Implementation of an intuitive and insightful blockchain explorer. The Columbus project is a project aiming to facilitate the visualization of the Byzcoin blockchain by providing a unified and interactive visualization tool.

This tool is a web based application written in typescript, bundled with webpack, and using the d3 and rxjs librairies.

👌 Quick TL;DR setup:

Rename src/roster.ts.template to src/roster.ts
Install dependencies with npm install
Bundle the app with npm run bundle
You are ready to go, open index.html

Play with it

Features

"Browsable" chain

Browse the chain with your mouse with drag and zoom. Blocks will naturally load. Actions are also accessible through buttons.

Explore block

Click on blocks to check their content. Many element display additional hints.

Follow evolution of an instance

Check the evolution of a smart contract instance. You can get blocks and instruction related to a particular instance.

Perform search

Use the top search bar to retrieve a particular block. You can select among many different search attribute.

... and many more

Additional features include:

Block export to json
Tutorial to introduce functionalities to new users
Upload of a custom roster
Statistics and status about the chain
Ability to follow block links

Stack

Typescript, as the frontend language
NPM, as the package manager
Webpack, as the bundler
d3, as the visualization library
RxJS, as the reactive programming library
UIkit, as the CSS framework

Setup (ubuntu)

See details

Install nodejs and npm:

sudo apt-get install nodejs
sudo apt-get install npm

Rename src/roster.ts.template to src/roster.ts. By default it uses the DEDIS roster.

Otherwise, follow instructions in the next section to run a local conode and get a local roster configuration.

Finally, install dependencies with npm install.

You are ready to use the app: bundle it with npm run bundle and open index.html.

If you need to run a local blockchain

If you are developing on Columbus you will need to use a local blockchain in order to avoid over-loading a node running the production blockchain.

Download and extract the latest binaries from https://github.com/c4dt/byzcoin/releases. Choose the folder corresponding to your environment (only Mac and Linux is supported) and run the byzcoin binary in "proxy" mode. You need to provide an existing database. You can download a cached database reflecting the production data at https://demo.c4dt.org/omniledger/cached.db.

Then, run the node in "proxy" mode with :

./byzcoin proxy <MY_DATABASE.db>

That's it ! This will run a node listening on 127.0.0.1:7771.

You can stop it with ctrl + C.

There are additional options that you can spot with ./byzcoin proxy -h.

You can then use the following roster in your roster.ts:

[[servers]]
  Url = "http://127.0.0.1:7771"
  Suite = "Ed25519"
  Public = "0000000000000000000000000000000000000000000000000000000000000000"

Some useful commands

Bundle the project (from the root): npm run bundle
Watch for source code changes and automatically bundle: npm run watch
Check TypeScript code formatting: npm run lint
Check if the code is well formatted: npm run isPretty
Format the code: npm run makePretty

Recommendations for Visual Studio Code

See details

Settings

Add vertical lines at columns 80 and 100: editor.rulers -> Edit in settings.json -> "editor.rulers": [80,100]

Extensions

Live Server

Purpose: Automatically refresh the html upon compile
Install: ritwickdey.liveserver
Use:

Right click on index.html
Open with Live Server

Prettier - Code formatter

Purpose: Automatically format the code
Install: esbenp.prettier-vscode
Setup: setting editor.defaultFormatter -> select esbenp.prettier-vscode
Use:

Open Command Palette (Ctrl+Shift+P)
Format Document

TypeScript Hero

Purpose: Automatically organize TypeScript imports
Install: rbbit.typescript-hero
Use:

Open Command Palette (Ctrl+Shift+P)
TS Hero: Organize imports

Rewrap

Purpose: Automatically reformat comments to a given line length (default is 80)
Install: stkb.rewrap
Use:

Open Command Palette (Ctrl+Shift+P)
Rewrap Comment / Text

Comment Anchor

Purpose: Place anchor tags within comments for easy file & workspace navigation. Install: ext install ExodiusStudios.comment-anchors Use:

Use \\ANCHOR and \\SECTION to delimitate code regions
Use \\TODO, \\FIXME to mark specific areas
Read the documentation for more features

Production deployment

A change on the production branch automatically triggers a deployment on https://status.dedis.ch.

The production branch must only be used that way:

# Trigger a deployment:
git push origin master:production

Dev deployment

A change on the deploy-dev branch automatically triggers a deployment on https://wookiee.ch/columbus-dev.

The deploy-dev branch must only be used that way:

# Trigger a deployment:
git push origin <source branch>:deploy-dev

Documentation

Generate the documentation: npm run doc

Design Guidelines

Can be found in the most recent report

Contributors

Supervision and integration

Noémien Kocher

Student project Spring 2020:

Anthony Iozzia (report)
Julien von Felten (report)

Student project Fall 2020:

Sophia Artioli
Lucas Trognon

Common report

Student project Spring 2021:

Rosa Jose Sara
Pilar Marxer