Steem Explorer based on Steem-JS

View this thread on: d.buzz | hive.blog | peakd.com | ecency.com
·@jga·
0.000 HBD
Steem Explorer based on Steem-JS
![steemexplorer1.png](https://cdn.steemitimages.com/DQmNcMhioy9JjFQinRysccgJMEpD7rj2cnaw1jmRsuMddSD/steemexplorer1.png)

#### Repository
https://github.com/joticajulian/steemexplorer/

#### Website
https://joticajulian.github.io/steemexplorer/

### Block Explorer
This work is the response to a [task proposed by the EFTG project of the European Commision](https://steemit.com/utopian-io/@utopian.tasks/steem-bounty-european-commission-eftg-project-european-financial-transparency-gateway-adapting-a-blockexplorer-for-use-with-a), whose purpose is the creation of a Block Explorer for a private chain. The task proposed to use the code of [steemdb](https://github.com/aaroncox/steemdb) developed by @jesta which is open source. That explorer creates a copy of the blockchain and stores it using mongodb. For this reason, it is server-side, all the magic happens in the server. 

After some research and analysis, I figured out that there is no block explorer for client-side, that is, one that runs on the client and query directly to the seed nodes using the API, without the need to download the whole blockchain. The intention of the current work is closing this issue, and at the same time providing a light-weight block explorer which is easily installed on private blockchains.

### Features
The explorer has the traditional features to consult the state of the blockchain and some extra features:

- **Homepage**. The [homepage](https://joticajulian.github.io/steemexplorer/#/) contains links to last blocks and useful information of the global state of the blockchain, like steem supply, reward pool, vesting fund, and steem per million vests, among others.
  * **Extras**: Blocks and schedule of witnesses in real time, current inflation, new steem per day, the percentage of stake and SBD.
  
  ![steemexplorer2c.png](https://cdn.steemitimages.com/DQmeXCnZ9gnXPrdfapDqs2W5gx63kLXFhobyRFGKYj5VR8N/steemexplorer2c.png)

- **Account page**. This page (example [utopian-io](https://joticajulian.github.io/steemexplorer/#/@utopian-io)) shows general information of a specific user, the authorities, witness info if it is the case, and the transaction history. Like steemd does, the transaction history is divided into groups of 250 transactions and there are links to jump to other pages.

- **Post page**. This page (example [this one](https://joticajulian.github.io/steemexplorer/#/@jga/steem-explorer-based-on-steem-js-1539631316061)) shows general information of a specific post: payout, body, votes, and some useful info. The votes include vote value, and curation, like [steemblockexplorer](steemblockexplorer.com) does.
  * **Extras**: Detailed info of beneficiaries and their payouts. Payout distribution, including the calculation of the curation remainder that returns to the reward pool.
  
  <center>![steemexplorer3b.png](https://cdn.steemitimages.com/DQmXQ965e7Qb6EFXZQszx28DFRNtn5edhPW8wXG8jGQCwKm/steemexplorer3b.png)</center>

- **Block page**. Consult the transactions of a specific block and its headers.

- **Transaction page**. Consult transactions using the id and the block number.

### Installation
Open the file `src/config.js` and update the following constants using the constants of private blockchain (it is not necessary to modify them if it is the main steem blockchain).

```
const SBD = 'SBD'
const STEEM = 'STEEM'
const SP = 'SP'
const VESTS = 'VESTS'
const RPC_NODE = { url: 'https://api.steemit.com' }
const HARDFORK = 20
const STEEM_100_PERCENT = 10000
const STEEM_VOTE_REGENERATION_SECONDS = 5*24*60*60
const STEEM_INFLATION_RATE_START_PERCENT = 978
const STEEM_INFLATION_NARROWING_PERIOD = 250000
const STEEM_INFLATION_RATE_STOP_PERCENT = 95
const STEEM_BLOCKS_PER_YEAR = 365*24*60*60/3
const STEEM_BLOCKS_PER_DAY = 24*60*60/3
const STEEM_SBD_START_PERCENT = 900
const STEEM_SBD_STOP_PERCENT = 1000
``` 

Install dependencies
`
npm install
`

Option 1: Serve with hot reload at localhost:8080
`
npm run dev
`

Option 2: Build for production with minification
`
npm run build
`

### EFTG Block Explorer
This explorer was sucessfully installed on the [EFTG blockchain](https://steemit.com/utopian-io/@utopian.tasks/steem-bounty-european-commission-eftg-project-european-financial-transparency-gateway-adapting-a-blockexplorer-for-use-with-a) and it is currently working.
**Website**: https://explorer.blkcc.xyz

### Technology Stack
- [vue.js](https://vuejs.org): Steem Explorer Website.
- [steem-js](https://github.com/steemit/steem-js): API to access the blockchain.

### Roadmap
The future plans and work with this project include:
- Design a logo.
- Page with top 100 witnesses.

### How to contribute?
Any type of contribution is very welcome. You can make pull requests to the [Github repository](https://github.com/joticajulian/steemexplorer), or contact me on Discord (jga#0699), steem.chat (jga), or steem (@jga).

#### GitHub Account
https://github.com/joticajulian
👍 , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , ,