/ethstats-lite-explorer

Alethio's Light Weight Open Source Ethereum Explorer

Primary LanguageVueMIT LicenseMIT

EthStats Lite Explorer

The Lite Explorer is a client-side only web application that connects directly to a Ethereum JSON RPC compatible node.
This means you can have your own private Ethereum Explorer should you wish so. No need for servers, hosting or trusting any third parties to display chain data.

CircleCI

NOTICE
This is a big piece of work in progress.
Please report any bugs using Github's issues

Contents

Short Term Roadmap

  • Milstone 0.5 - Initial release
    • Docs and Examples
    • Allow Custom Node URLs
    • Infura Nodes Dropdown selector
    • Re-add Docker build
  • Milstone 1.0 - React-ified
    • Release EthStats React primitive components
    • Migrate app to React

Technical Details

Structure

The project is built using Vue.js and BulmaCSS.

main.js defines the library functions. You will mainly need lib_goToBlock, lib_goToAccount, lib_UID, lib_getTransaction, lib_getBlock. those functions are available to all Vue components instantiated in the project.

router.js defines the routes of the webapp, mainly /block, /account, /tx.

Data

The data that are available through the project are:

  • block: Same as web3js definition of a block (Cached)
  • transaction: Same as web3js definition of a transaction with embedded receipt. (Cached)
  • account: has the fields balance, bytecode and type. (Not cached)

Getting started

Prerequisites

Please make sure you have the following installed and running properly

Running in Docker

You can run the Lite Explorer in Docker without having to get the source code and build it.
The simplest command to run i is

$ docker run -p 80:80 alethio/ethstats-lite-explorer

which will start a container on port 80 of your computer with a nginx embedded to serve the pre-build explorer. You can then open localhost in your browser to use it.

To configure it you have the following environment variables you can set

ENV var Description
NODE_URL URL of RPC enabled node.
NODE_URL_USER If your RPC node is behind HTTP Basic Authentification then use this to set the username.
NODE_URL_PASS HTTP Basic Authentification Password.
INFURA_PROJECT_ID Infura Project ID. You can get this from your Infura Dashboard. Adding this will enable a dropdown to select from the available Infura endpoints.

NOTICE: if NODE_URL and NFURA_PROJECT_ID are both missing, the explorer will start with the Infura mainnet endpoint in anonymous mode (https://mainnet.infura.io/).

So for example if you want to start the explorer with both infura and a custom node url, and have the container auto delete itself after you close it, you would run something like

docker \
    run --rm \
    -p 80:80 \
    -e INFURA_PROJECT_ID=your-infura-proj-id \
    -e NODE_URL=https://kovan.infura.io \
    alethio/ethstats-lite-explorer

Setup/Build Instructions

Clone the explorer in a folder of your choosing

$ git clone https://github.com/Alethio/ethstats-lite-explorer.git
$ cd ethstats-lite-explorer

Install npm packages

$ npm install

Copy the sample environment variables

$ cp .env.example .env.local

Adjust .env.local to your needs. You can remove the variables you do not wish to change from default.

ENV var Description
VUE_APP_NODE_URL URL of RPC enabled node. Default 'https://mainnet.infura.io/'
VUE_APP_INFURA_PROJECT_ID Infura Project ID. You can get this from your Infura Dashboard. Adding this will enable a dropdown to select from the available Infura endpoints.
VUE_APP_BASE_URL Path of your app. Use '/' for root directory, 'subfolder-path' if your app live in another folder or '' if you want to open the app directly from the file system without any server. Default '/'.
VUE_APP_NODE_USER If your RPC node is behind HTTP Basic Authentification then use this to set the username.
VUE_APP_NODE_PASSWORD HTTP Basic Authentification Password.
VUE_APP_ROUTER_MODE Vue Router mode 'hash' (default mode) uses the URL hash for routing. Works in all Vue-supported browsers, including those that do not support HTML5 History API. 'history' requires HTML5 History API and server config. See HTML5 History Mode.

NOTICE: if VUE_APP_NODE_URL and VUE_APP_INFURA_PROJECT_ID are both missing, the explorer will start with the Infura mainnet endpoint in anonymous mode (https://mainnet.infura.io/).

After which you can run the explorer (in development mode)

$ npm run serve

or build it for deployment

$ npm run build

the dist folder will then contain the minimised and optimised version fo the app. Got ahead and deploy it somewhere.

Example setups

With Infura

Sign-up for an account or sign-in into your Infura account.

After that you have two options:

  • connect to a single network
    From the control panel, obtain your endpoint url for the network you are interested in (mainnet, ropsten, kovan, rinkeby). It will looks similar to https://mainnet.infura.io/v3/aa11bb22cc33......

    Update .env.local file and set VUE_APP_NODE_URL to your Infura endpoint.

  • have a choice of infura networks and be able to switch between them
    From the control panel obtain your Infura Project ID

    Update .env.local file and set VUE_APP_INFURA_PROJECT_ID to your project id to get a dropdown of all the available Infura networks.

Start Lite explorer

$ npm run serve

With Parity Light Client

This will allow you to run both your own node and explorer.
No third-party dependencies.
It will be slower to browse older data because it is fetching it real time from other ethereum peer nodes but it's fast to sync and low in resource usage.

Install Parity Ethereum through one of the convenient methods and start it with the --light cli flag.

As a simple step, if you have Docker, you could just run

$ docker run -d --restart always --name parity-light -p 127.0.0.1:8545:8545 parity/parity:stable --light --jsonrpc-interface all

Start Lite explorer

$ npm run serve

With Ganache

First of all, if you do not have it, download and install Ganache which will give you your own personal test chain.

After setting up and starting Ganache, update the .env.local file and set VUE_APP_NODE_URL to 'http://localhost:7545'.

Start Lite explorer

$ npm run serve

With Pantheon

This is a great way to use a full featured client, and to see how the explorer works with a private network.

First of all, if you do not have it, download and install Pantheon.

To get started, run a pantheon node in development mode, with the rpcs and websockets enabled, mining enabled, allowing traffic from all hosts and CORS origins (this is not a recommended way to run a production node securely).

$ pantheon --dev-mode --rpc-enabled --ws-enabled --miner-enabled --miner-coinbase=fe3b557e8fb62b89f4916b721be55ceb828dbd73 --host-whitelist=* --rpc-cors-origins=*

After running pantheon, update the .env.local fie, and set VUE_APP_NODE_URL to point to your running pantheon:

VUE_APP_NODE_URL='http://127.0.0.1:8545/'

Start Lite explorer

$ npm run serve

Example Deployments

surge.sh

Surge.sh is a simple, single-command web publishing service that you can use to deploy your own version of the Lite Explorer.

Make sure you have set a proper and accessible VUE_APP_NODE_URL

$ npm install --global surge
# build explorer
$ npm run build
# go to build dir
$ cd dist
# make push state work as it should
$ cp index.html 200.html && cp index.html 404.html
# deploy
$ surge