A basic Ethereum block explorer written in TypeScript that updates in real-time using websockets
███████╗████████╗██╗ ██╗███████╗██████╗ ███████╗██╗ ██╗███╗ ███╗
██╔════╝╚══██╔══╝██║ ██║██╔════╝██╔══██╗██╔════╝██║ ██║████╗ ████║
█████╗ ██║ ███████║█████╗ ██████╔╝█████╗ ██║ ██║██╔████╔██║
██╔══╝ ██║ ██╔══██║██╔══╝ ██╔══██╗██╔══╝ ██║ ██║██║╚██╔╝██║
███████╗ ██║ ██║ ██║███████╗██║ ██║███████╗╚██████╔╝██║ ╚═╝ ██║
╚══════╝ ╚═╝ ╚═╝ ╚═╝╚══════╝╚═╝ ╚═╝╚══════╝ ╚═════╝ ╚═╝ ╚═╝
██████╗ ██╗ ██████╗ ██████╗██╗ ██╗
██╔══██╗██║ ██╔═══██╗██╔════╝██║ ██╔╝
██████╔╝██║ ██║ ██║██║ █████╔╝
██╔══██╗██║ ██║ ██║██║ ██╔═██╗
██████╔╝███████╗╚██████╔╝╚██████╗██║ ██╗
╚═════╝ ╚══════╝ ╚═════╝ ╚═════╝╚═╝ ╚═╝
███████╗██╗ ██╗██████╗ ██╗ ██████╗ ██████╗ ███████╗██████╗
██╔════╝╚██╗██╔╝██╔══██╗██║ ██╔═══██╗██╔══██╗██╔════╝██╔══██╗
█████╗ ╚███╔╝ ██████╔╝██║ ██║ ██║██████╔╝█████╗ ██████╔╝
██╔══╝ ██╔██╗ ██╔═══╝ ██║ ██║ ██║██╔══██╗██╔══╝ ██╔══██╗
███████╗██╔╝ ██╗██║ ███████╗╚██████╔╝██║ ██║███████╗██║ ██║
╚══════╝╚═╝ ╚═╝╚═╝ ╚══════╝ ╚═════╝ ╚═╝ ╚═╝╚══════╝╚═╝ ╚═╝
...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?
node v10.13.0+
npm | yarn
a computer
cd <CLONED_DIRECTORY>
yarn
if you're of the persuarion, else npm i
$ npm run build && npm run start:prod
$ npm start
web3.eth.getBlock(BLOCK_NUMER)
for the newest block would return null
.# MORE TXs
at the bottom of the block cards when over TX count is >100.