https://github.com/dedis/columbus-united
📦➿📦➿📦 Intuitive and insightful blockchain explorer 🔎
https://github.com/dedis/columbus-united
blockchain blockchain-explorer typescript
Last synced: 3 months ago
JSON representation
📦➿📦➿📦 Intuitive and insightful blockchain explorer 🔎
- Host: GitHub
- URL: https://github.com/dedis/columbus-united
- Owner: dedis
- License: lgpl-3.0
- Created: 2020-04-20T15:32:41.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2023-03-04T13:28:22.000Z (over 2 years ago)
- Last Synced: 2025-04-04T09:36:15.474Z (6 months ago)
- Topics: blockchain, blockchain-explorer, typescript
- Language: TypeScript
- Homepage: https://status.dedis.ch/
- Size: 7.47 MB
- Stars: 18
- Watchers: 7
- Forks: 6
- Open Issues: 18
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# columbus-united
Implementation of an intuitive and insightful blockchain explorer. The Columbus
project is a project aiming to facilitate the visualization of the
[Byzcoin](https://github.com/dedis/cothority/tree/master/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**:
1) Rename `src/roster.ts.template` to `src/roster.ts`
2) Install dependencies with `npm install`
3) Bundle the app with `npm run bundle`
4) You are ready to go, open `index.html`
[Play with it](https://wookiee.ch/columbus/)
# 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:
```bash
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](https://demo.c4dt.org/omniledger/cached.db).
Then, run the node in "proxy" mode with :
```
./byzcoin proxy
```
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](https://status.dedis.ch).
The production branch must only be used that way:
```bash
# 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](https://wookiee.ch/columbus-dev).
The `deploy-dev` branch must only be used that way:
```bash
# Trigger a deployment:
git push origin :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](https://www.epfl.ch/labs/dedis/wp-content/uploads/2020/06/report-2020-1-Anthony-Iozzia-Columbus-II.pdf))
- Julien von Felten ([report](https://www.epfl.ch/labs/dedis/wp-content/uploads/2020/06/report-2020-1-Julien-von-Felten-Columbus-I.pdf))
Student project Fall 2020:
- Sophia Artioli
- Lucas Trognon
[Common report](https://www.epfl.ch/labs/dedis/wp-content/uploads/2021/01/report-2020-3-Columbus-Sophia-Artiolis-Lucas-Trognon-Columbus-III.pdf)
Student project Spring 2021:
- Rosa Jose Sara
- Pilar Marxer
[Common report](https://www.epfl.ch/labs/dedis/wp-content/uploads/2021/07/report-2021-1-Pilar-Rosa_Columbus_IV.pdf)