Skip to content
πŸš€ Ethereum Block explorer from Applied Blockchain - this should be open source
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.circleci
media
public
src
.editorconfig
.gitattributes
.gitignore
.nvmrc
Dockerfile
LICENSE.md
README.md
package-lock.json
package.json
server.js

README.md

Uses JS badge Built with love badge Check it out badge

Sponsored by Applied Blockchain

Β 

Project

The goal of this project is to have a single Block explorer for all Applied Blockchain projects that is both simple and easy to customise. The standard Block explorer comes as a single Docker image and custom Block explorers can be created using a CLI tool.

Features

  • πŸ–₯ View latest Blocks & Transactions
  • ⚑️ Simple, Powerful, & Intuitive API
  • πŸ™ Customizable React Frontend
  • πŸ₯ Customizable Block explorer Koa server
  • 🐳 Use as Docker Image

Β 

Table of Contents

Β 

Requirements

Node

The Block explorer requires Node.js and npm (npm comes prebundled with node) for development. The source code for the server is written in ES2015+ so Node.js V8+ is recommended. Node.js version can be checked using the node -v CLI command.

Docker

Docker installtion is not required for development but can be useful for running the production app locally.

Β 

Getting Started

🐳 Using Docker Image

If the Block explorer does not require customization then the Docker image can be used to run the Block explorer with ease. An optional config file can be used to display extra information for transactions sent to a deployed contract. This includes method parameters with values and event logs. The config file has contract (ABI, deployments) and addressbook entries.

Project structure

block-explorer/
  β”œβ”€β”€ config.json
  └── docker-compose.yml

Simple docker-compose.yml example (without config.json)

version: '3'

services:
  explorer:
    image: appliedblockchain/b-explorer
    ports:
      - 3000:3000
    environment:
      - ETHEREUM_JSONRPC_ENDPOINT=http://network.project.com:8545/

docker-compose.yml example (with config.json)

version: '3'

services:
  explorer:
    container_name: explorer
    image: appliedblockchain/b-explorer
    volumes:
      - ${PWD}/config.json:/home/explorer/app/config.json:ro
    ports:
      - 3000:3000
    environment:
      - ETHEREUM_JSONRPC_ENDPOINT=http://parity:8545/
      - CONFIG_FILE_PATH=/home/explorer/app/config.json

config.json example

NOTE: All addresses must be checksummed

{
  "contracts": {
    ":Foo": {
      "name": "Foo",
      "abi": [],
      "deployments": [
        { "address": "6b62d428eebde5e452ffa997d7be34709bbaa6ae4ca1d74b5c2310c952903b59" }
      ]
    }
  },

  "addressBook": {
    "108d65fdbe2baf0eaeb3f1755af8a96614c914d453e92d915284175360ce7027": "Bob"
  }
}

Run explorer

Verify that you have docker-compose installed using the docker-compose -v command

> docker-compose up

Β 

⚑️ create-block-explorer

create block explorer CLI

create-block-explorer is the quickest way to get started with creating a Block explorer with customization. The CLI tool can read all your contracts and create the right config.json file for the explorer. Please refer to the document for appliedblockchain/block-explorer-server and appliedblockchain/block-explorer-client for components that can be configured.

Usage

> npx @appliedblockchain/create-block-explorer appii

create block explorer CLI usage

Project structure

appii-block-explorer/
  β”œβ”€β”€ .circleci/
  β”‚Β Β  └── config.yml
  β”œβ”€β”€ .editorconfig
  β”œβ”€β”€ .gitignore
  β”œβ”€β”€ .nvmrc
  β”œβ”€β”€ Dockerfile
  β”œβ”€β”€ README.md
  β”œβ”€β”€ config.json
  β”œβ”€β”€ package-lock.json
  β”œβ”€β”€ package.json
  β”œβ”€β”€ public/
  β”‚Β Β  β”œβ”€β”€ favicon.ico
  β”‚Β Β  β”œβ”€β”€ index.html
  β”‚Β Β  └── manifest.json
  β”œβ”€β”€ server.js
  └── src/
      └── index.js

Scripts

  • npm start: Starts the development server for React frontend and Koa api.
  • npm run start:api: Starts the development server for Koa api.
  • npm run start:client: Starts the development server for React frontend.
  • npm run build: Builds the production static files for React frontend.

Β 

Browser Support

At present, we aim to support the last two versions of the following browsers:

Chrome Firefox Internet Explorer Edge Safari Opera
βœ”οΈ βœ”οΈ βœ–οΈ βœ”οΈ βœ”οΈ βœ”οΈ

Β 

Modules

block-explorer-server

Installation

> npm install @appliedblockchain/block-explorer-server

block-explorer-server npm module

Usage

import { createServer } from '@appliedblockchain/block-explorer-server'

/** Koa server */
const server = createServer({ /* options */ })

server.listen(3000)

createServer() options

Option Type Default Value Description
prefix String false Creates a Koa server instance where all the API routes are prefixed with the given prefix value.
ethereumJsonRPC String 'http://localhost:8546' HTTP JSON-RPC endpoint for a node on the ethereum based network.
networkConfigPath String path.resolve('./config.json') Path to the config.json file used by the standard handler to get contract information.
useStandardHandler Boolean true Toggle standard handler use.
txHandler Function null Customise the output of /transactions/:txHash route.

Server routes

  • /transactions
  • /transactions/:txHash
  • /blocks
  • /blocks/:number

Β 

block-explorer-client

Installation

> npm install @appliedblockchain/block-explorer-client

Usage

import React from 'react'
import { render } from 'react-dom'
import { createApp } from '@appliedblockchain/block-explorer-client'

/** Block explorer styling */
import '@appliedblockchain/block-explorer-client/index.scss'

const App = createApp({ /* options */ })

render(<App />, document.querySelector('#root'))

createApp() options

Option Type Default Value Description
navbar Function @appliedblockchain/block-explorer-client/components/Navbar React presentational component to render the navbar.
homepage Function @appliedblockchain/block-explorer-client/components/HomeView React presentational component to render the home page.
blockPage Function @appliedblockchain/block-explorer-client/components/BlockView React presentational component to render the view block page.
transactionPage Function @appliedblockchain/block-explorer-client/components/TransactionView React presentational component to render the view transaction page.

Β 

Examples

Β 

Repositories

Repository Description
block-explorer-main This repository has all the Block explorer documentation and creates & pushes the main Docker image that can be pulled from Docker Hub.
block-explorer-server Main repository for @appliedblockchain/block-explorer-server npm module.
block-explorer-client Main repository for @appliedblockchain/block-explorer-client npm module.
create-block-explorer Main repository for @appliedblockchain/create-block-explorer npm module.

Β 

Contributors

In alphabetical order:

Mario Gemoll (Project Lead)

Tahseen Malik (Developer)

Β 

License

UNLICENSED

You can’t perform that action at this time.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.