ETH Tokyo hackathon project animating a USDC/WETH Uniswap V3 pool over time.
The flow of USDC (blue) and WETH (pink) in and out of the pool. The larger the circle the larger the liquidity transfer.
This project animates what happened to the Uniswap V3 USDC/ETH pool with 0.3% fee over different time periods. Most DeFI analytics are static snapshots of time, eg pool reserve balances, or charts of historical prices and volumes. Using animated visuals, details like which accounts liquidity flows can be made from when can be shown.
The workings of Uniswap's Automated Market Maker (AMM) can be seen with the classic xy=k graph. As liquidity is added or removed to the pool via a swap, mint or burn, the chart transitions to the new state.
This idea can be extended to other DeFi AMMs like Curve and Balancer. It could also be made to work with a live feed of a pool.
The dashboard uses Uniswap’s V3 Subgraph to get the Uniswap V3 USDC/ETH pool data. Specifically, it uses two GraphQL queries to get
- The starting total value locked (TVL) of USDC and ETH in the pool.
- Any flow of liquidity in and out of the pool. That is any Mint, Burn or Swap transactions between a set time period.
The dashboard is made up of a number of visuals that use D3.js to animate what is happening over time. The D3.js library is a low-level tool that helps control the browser's DOM. Specifically, it uses Scalable Vector Graphics (SVG) objects like circles, lines, curves and text. These are built up to create animated visual components.
The website uses Vite as a package manager. The project was created using the vanilla TypeScript template. For the hackathon, the site was just run locally on the developer's machine.
Sponsored technologies
Clone this repository and install the dependencies using yarn.
git clone git@github.com:naddison36/defi-anime.git
yarn
Run a local Vite server to see the application
yarn devThis will start a local development server on port 5173 by default. It will be a higher port if its already used.
yarn test