Steem Explorer based on Steem-JS

in #utopian-io6 years ago (edited)

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, whose purpose is the creation of a Block Explorer for a private chain. The task proposed to use the code of 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 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

  • Account page. This page (example 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) shows general information of a specific post: payout, body, votes, and some useful info. The votes include vote value, and curation, like steemblockexplorer does.

    • Extras: Detailed info of beneficiaries and their payouts. Payout distribution, including the calculation of the curation remainder that returns to the reward pool.

    steemexplorer3b.png

  • 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 and it is currently working.
Website: https://explorer.blkcc.xyz

Technology Stack

  • vue.js: Steem Explorer Website.
  • 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, or contact me on Discord (jga#0699), steem.chat (jga), or steem (@jga).

GitHub Account

https://github.com/joticajulian

Sort:  

Thanks for the contribution, @jga! Very interesting contribution and it looks really great - amazing stuff! I really like the real time updating on the homepage, it is really satisfying to watch for some reason haha.

Some feedback about the code: you should use let and const instead of varand there are some minor inconsistencies that could be prevented by using a linter like ESLint for example. I also think that sometimes the readability of your code would benefit from some added whitespace and comments, but of course this is just my opinion.

Other than that it's really great. I'm already looking forward to your next contribution!


Your contribution has been evaluated according to Utopian policies and guidelines, as well as a predefined set of questions pertaining to the category.

To view those questions and the relevant answers related to your post, click here.


Need help? Write a ticket on https://support.utopian.io/.
Chat with us on Discord.
[utopian-moderator]

Hi @amosbastian, thank you very much for the review and feedback, I appreciate that. I will look the ESLint.

Thank you for your review, @amosbastian!

So far this week you've reviewed 16 contributions. Keep up the good work!

I was looking for working Steem explorer lately. steemd and steemblockexplorer don't have everything what I need. What I need is to gather tx data without knowing it's block ID. Is this possible via this explorer?
eg.
joticajulian.github.io/steemexplorer/#/b/26853403/f4ecae901d851031ab816d3ed1fb66e9032bbeb3

Hi @mys, very good question.
Depends on the RPC node that you connect to.

When you run a full rpc node there is an option called SKIP_BY_TX_ID. If it is set OFF you can query transactions by id. But not if it's set ON (and the node saves a lot of CPU time).

This steem explorer connects with https://api.steemit.com, which set this option ON. For this reason, I search transactions using the block ID.

It would be good to know if someone has a public node with this option OFF.

Excelente amigo. como siempre con buenas, esto esta genial. ya vi como funciona. Te felicito es un honor conocerlo mi pana.

Hey, @jga!

Thanks for contributing on Utopian.
We’re already looking forward to your next contribution!

Get higher incentives and support Utopian.io!
Simply set @utopian.pay as a 5% (or higher) payout beneficiary on your contribution post (via SteemPlus or Steeditor).

Want to chat? Join us on Discord https://discord.gg/h52nFrV.

Vote for Utopian Witness!

Hi @jga!

Your post was upvoted by @steem-ua, new Steem dApp, using UserAuthority for algorithmic post curation!
Your post is eligible for our upvote, thanks to our collaboration with @utopian-io!
Feel free to join our @steem-ua Discord server

You got a 49.60% upvote from @ocdb courtesy of @jga!

Congratulations @jga! You have completed the following achievement on the Steem blockchain and have been rewarded with new badge(s) :

You made more than 14000 upvotes. Your next target is to reach 15000 upvotes.

Click here to view your Board of Honor
If you no longer want to receive notifications, reply to this comment with the word STOP

Do not miss the last post from @steemitboard:

SteemFest3 and SteemitBoard - Meet the Steemians Contest

Support SteemitBoard's project! Vote for its witness and get one more award!

Coin Marketplace

STEEM 0.18
TRX 0.14
JST 0.029
BTC 57956.22
ETH 3126.99
USDT 1.00
SBD 2.45