A live demo of instant confirmations on Etherlink, Tezos' Layer 2 with EVM compatibility. Watch transactions appear, get pre-confirmed in well under a second, then settle into a block, all driven by WebSocket streams from a running node.
With instant confirmation, Etherlink returns a receipt for every transaction in less than 50ms after it is submitted, long before the next block is produced. The UI makes that flow tangible:
- Inclusion preconfirmation. The sequencer promises the transaction will land in the next block. It appears in the active list, in grey.
- Speculative receipt. The transaction turns green the moment a receipt arrives.
- Block cementation. The head advances and the transaction settles into a block on the left column.
Three subscriptions are wired up over one WebSocket connection:
| Subscription | Purpose |
|---|---|
| tez_newIncludedTransactions | New transaction enters the active list |
| tez_newPreconfirmedReceipts | Transaction flips to validated. This is the feature. |
| newHeads | Block is produced and the active list drains into a block card |
Requires Node.js 18+ and a WebSocket endpoint to an Etherlink node (or a local sandbox) that exposes the tez_* methods.
npm install
echo "VITE_TEZOS_WS_URL=ws://127.0.0.1:8545/ws" > .env
npm run devThen open the printed URL. Connection status for each stream shows as a badge at the top. All three should read connected.
Set VITE_TEZOS_WS_URL to any reachable endpoint that supports eth_subscribe with the methods listed above:
VITE_TEZOS_WS_URL=wss://your-etherlink-node.example/ws npm run devVite, React 18, TypeScript, Tailwind, shadcn/ui. No backend, no extra services. All state is derived from the WebSocket feed.
src/
components/
TransactionMonitor.tsx # subscriptions and state
TransactionItem.tsx # row with enter, validate, exit animation
BlockColumn.tsx # settled blocks
pages/Index.tsx
npm run build # production bundle to dist/
npm run preview # serve the built bundle locally