Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/tlip/ethereum-block-explorer
A basic Ethereum block explorer written in TypeScript that updates in real-time using websockets
https://github.com/tlip/ethereum-block-explorer
block-explorer blockchain crypto cryptocurrency cryptocurrency-price-ticker eth ethereum explorer infura javascript react react-context react-hooks real-time realtime socketio transaction typescript web3 websocket
Last synced: 25 days ago
JSON representation
A basic Ethereum block explorer written in TypeScript that updates in real-time using websockets
- Host: GitHub
- URL: https://github.com/tlip/ethereum-block-explorer
- Owner: tlip
- Created: 2019-04-29T18:31:58.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2023-01-07T05:18:41.000Z (almost 2 years ago)
- Last Synced: 2024-10-04T13:42:50.637Z (about 1 month ago)
- Topics: block-explorer, blockchain, crypto, cryptocurrency, cryptocurrency-price-ticker, eth, ethereum, explorer, infura, javascript, react, react-context, react-hooks, real-time, realtime, socketio, transaction, typescript, web3, websocket
- Language: TypeScript
- Homepage: http://explorer.thom.li
- Size: 3.61 MB
- Stars: 19
- Watchers: 5
- Forks: 1
- Open Issues: 12
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Ethereum Block Explorer
```
███████╗████████╗██╗ ██╗███████╗██████╗ ███████╗██╗ ██╗███╗ ███╗
██╔════╝╚══██╔══╝██║ ██║██╔════╝██╔══██╗██╔════╝██║ ██║████╗ ████║
█████╗ ██║ ███████║█████╗ ██████╔╝█████╗ ██║ ██║██╔████╔██║
██╔══╝ ██║ ██╔══██║██╔══╝ ██╔══██╗██╔══╝ ██║ ██║██║╚██╔╝██║
███████╗ ██║ ██║ ██║███████╗██║ ██║███████╗╚██████╔╝██║ ╚═╝ ██║
╚══════╝ ╚═╝ ╚═╝ ╚═╝╚══════╝╚═╝ ╚═╝╚══════╝ ╚═════╝ ╚═╝ ╚═╝
██████╗ ██╗ ██████╗ ██████╗██╗ ██╗
██╔══██╗██║ ██╔═══██╗██╔════╝██║ ██╔╝
██████╔╝██║ ██║ ██║██║ █████╔╝
██╔══██╗██║ ██║ ██║██║ ██╔═██╗
██████╔╝███████╗╚██████╔╝╚██████╗██║ ██╗
╚═════╝ ╚══════╝ ╚═════╝ ╚═════╝╚═╝ ╚═╝
███████╗██╗ ██╗██████╗ ██╗ ██████╗ ██████╗ ███████╗██████╗
██╔════╝╚██╗██╔╝██╔══██╗██║ ██╔═══██╗██╔══██╗██╔════╝██╔══██╗
█████╗ ╚███╔╝ ██████╔╝██║ ██║ ██║██████╔╝█████╗ ██████╔╝
██╔══╝ ██╔██╗ ██╔═══╝ ██║ ██║ ██║██╔══██╗██╔══╝ ██╔══██╗
███████╗██╔╝ ██╗██║ ███████╗╚██████╔╝██║ ██║███████╗██║ ██║
╚══════╝╚═╝ ╚═╝╚═╝ ╚══════╝ ╚═════╝ ╚═╝ ╚═╝╚══════╝╚═╝ ╚═╝
```
...is obviously an Ethereum block explorer that updates in real-time by hooking into Infura's websocket API. It is rendered on the server side, is written in `Typescript`, and built with `React v16.18`.
It manages Web3 data in the App state by using React's `useReducer` hooks wrapped in `Context` higher-order components to bless any component with direct access to anything it needs.
## Demo
Want to check out a live action demo?
### [Here you go!](http://explorer.thom.li)
## Getting started
1) Make sure you have:
* `node v10.13.0+`
* `npm | yarn`
* `a computer`
2) Clone this repository
3) `cd `
4) `yarn` if you're of the persuarion, else `npm i`
### Building and running
```bash
$ npm run build && npm run start:prod
```
### Running dev mode
```bash
$ npm start
```
## Notes
* Operates one block behind current block
* Temporary fix because sometimes calling `web3.eth.getBlock(BLOCK_NUMER)` for the newest block would return `null`.
* Doesn't reconnect to websocket if it closes after inactivity (Infura disconnects after 1 hour unless pinged).
## TO-DO
* ~~Add `# MORE TXs` at the bottom of the block cards when over TX count is >100.~~
* ~~Add ability to expand card to view overflow transactions.~~
* ~~Add transaction USD price data from CoinMarketCap or CryptoCompare.~~
* Add more tests (only 1 right now, sorry).