Flow State

Screenshots

Problem Statement

Flow State is designed to view the state of all flows and transfers of Super Tokens through Superfluid.The accounting tool focuses on data visualization and displaying account information within a given timeframe. The objective is to view not just the full historical data of an account, but to also offer snapshots of active flows and the account balance of a given timestamp.The transaction tool is designed to be a user-friendly, "dazzling checkout experience" for creating new flows from the user to another wallet.

Solution

This project uses React.js, HTML, and CSS to build the user interface. Other front-end tools include Three.js + react-three-fiber for rendering 3D graphics in the browser, Ethers.js as the Web 3 Provider, and react-blockies to render wallet visualizations!For Superfluid-related functionality, the Superfluid Javascript SDK was used, and for querying historical data, we used The Graph!Probably the most notable thing about the project, aside from the UI, is the snapshot functionality in the accounting tool. For accounting, using historical data of constant token flows requires a snapshot of the account balance and state given an arbitrary timestamp. To calculate this, we had to query historical data, filter out every event that happened after the timestamp, then from the relevant events, update the balance based on every token transfer, the sum of all closed flows, and the state of all open flows at the time of the snapshot. For the data visualization, this timestamp snapshot function had to be used for each point plotted on the graph!