███████╗████████╗██╗ ██╗███████╗██████╗ ███████╗██╗ ██╗███╗ ███╗
██╔════╝╚══██╔══╝██║ ██║██╔════╝██╔══██╗██╔════╝██║ ██║████╗ ████║
█████╗ ██║ ███████║█████╗ ██████╔╝█████╗ ██║ ██║██╔████╔██║
██╔══╝ ██║ ██╔══██║██╔══╝ ██╔══██╗██╔══╝ ██║ ██║██║╚██╔╝██║
███████╗ ██║ ██║ ██║███████╗██║ ██║███████╗╚██████╔╝██║ ╚═╝ ██║
╚══════╝ ╚═╝ ╚═╝ ╚═╝╚══════╝╚═╝ ╚═╝╚══════╝ ╚═════╝ ╚═╝ ╚═╝
██████╗ ██╗ ██████╗ ██████╗██╗ ██╗
██╔══██╗██║ ██╔═══██╗██╔════╝██║ ██╔╝
██████╔╝██║ ██║ ██║██║ █████╔╝
██╔══██╗██║ ██║ ██║██║ ██╔═██╗
██████╔╝███████╗╚██████╔╝╚██████╗██║ ██╗
╚═════╝ ╚══════╝ ╚═════╝ ╚═════╝╚═╝ ╚═╝
███████╗██╗ ██╗██████╗ ██╗ ██████╗ ██████╗ ███████╗██████╗
██╔════╝╚██╗██╔╝██╔══██╗██║ ██╔═══██╗██╔══██╗██╔════╝██╔══██╗
█████╗ ╚███╔╝ ██████╔╝██║ ██║ ██║██████╔╝█████╗ ██████╔╝
██╔══╝ ██╔██╗ ██╔═══╝ ██║ ██║ ██║██╔══██╗██╔══╝ ██╔══██╗
███████╗██╔╝ ██╗██║ ███████╗╚██████╔╝██║ ██║███████╗██║ ██║
╚══════╝╚═╝ ╚═╝╚═╝ ╚══════╝ ╚═════╝ ╚═╝ ╚═╝╚══════╝╚═╝ ╚═╝
...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.
Want to check out a live action demo?
- Make sure you have:
node v10.13.0
npm | yarn
a computer
- Clone this repository
cd <CLONED_DIRECTORY>
yarn
if you're of the persuarion, elsenpm i
$ npm run build && npm run start:prod
$ npm start
- Operates one block behind current block
- Temporary fix because sometimes calling
web3.eth.getBlock(BLOCK_NUMER)
for the newest block would returnnull
.
- Temporary fix because sometimes calling
- Doesn't reconnect to websocket if it closes after inactivity (Infura disconnects after 1 hour unless pinged).
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).