Token Flow Viz

A ERC20 transfers as interactive token flow graphs using HyperSync & D3

Token Flow Viz

Created At

ETHOnline 2025

Project Description

HyperSync Token Flow Visualizer turns raw ERC20 transfer data into an interactive graph so teams can inspect value movement across wallets in seconds. A Rust/Axum backend hits HyperSync’s hyper-efficient query API—orders of magnitude faster than traditional JSON-RPC—to pull Transfer events for a token/chain and aggregate them into weighted edges. The frontend (plain HTML/JS with D3) calls the backend, then renders a force-directed network where node positions, link thickness, and labels immediately surface top counterparties, potential clusters, and high-volume routes. Because requests run through HyperSync, analysts can iterate on block ranges and tokens without waiting on slow RPC providers; we return a JSON graph structure ready for further automation, and there’s an included mock mode for demos when live creds aren’t available.

How it's Made

Rust + Axum + Tokio power the backend, with the official hypersync-client SDK handling all ERC20 transfer queries. That SDK compiles our filter (chain, token, block window) into HyperSync’s optimized plan format, manages pagination, retries and schema evolution, and pushes the results back in one shot—orders of magnitude faster than JSON-RPC calls. We immediately stream the returned events into a saturating u128 aggregator that tallies (from,to) pairs and emits a compact JSON {nodes,links} structure ready for graphing.

On the front end, a tiny vanilla HTML/JS page uses D3 for a force-directed layout: it fetches the JSON from Axum, scales link width by transfer magnitude, and abbreviates checksum addresses for readability.

background image mobile

Join the mailing list

Get the latest news and updates