Member of BlockBlockData Team; Associate Professor of Business Analytics, UAE University, Abu Dhabi, UAE
This project proposes design of an analytics dashboard to interactively and dynamically display swap gas fees (swap fees) on Uniswap. The dashboard also displays other charts that give analytical insights into the Uniswap ecosystem.
The proposed SwapGasFees app is not implemented during the period of UniCode Competition 2021, due to lack of time and difficulties in finding team members. Yet, it outlines a blue print of how such a system can be implemented over an extended time period. In other words, the design provides a template, through which such a dashboard can be coded.
- A separate detailed tutorial describes the working of the designed app, explaining step by step, the different screens of the app.
- The full UI design can be downloaded as a pdf file from here.
Uniswap is the by far most popular decentralized exchange in the world, enabling swaps (exchanges) of many different tokens and coins on the Ethereum layer 1 blockchain network.
One of the fundamental issues in swaps is the "swap gas fee", which is in a way the fee paid to the blockchain network for evaluating and recording a swap transaction. The swap gas fees, or in short, swap fees, can change significantly over time, depending on the congestion of the Ethereum network, level of liquidity, trade volume, and many other factors. Swap fees strongly depend on the gas fees of the Ethereum blockchain, which are explained in this Hackernoon tutorial article, this BeInCrypto tutorial article and this Amberdata tutorial article.
Since the swap gas fees vary over time continuously, and sometimes significantly, it is important to have an analytics tool that can provide insights on how the gas fees are changing over time.
While there exist some websites/apps that report/visualize the Ethereum gas fees, to the author's best knowledge, there does not exist a website/app that shows swap gas fees for the Unicode ecosystem. This project involves the design and communication of such an analytics app, as a first Dapp of its kind.
When designing the user interface, the Gestalt Principles of School of M. Wertheimer (Wertheimer, 2020) and the knowledge visualization guidelines of Eppler and Burkhard (2008) were applied.
For selecting the visualizations most suitable for each analysis, the D3 Visualization Gallery available under ObservableHQ were scanned and the following guideline documents were used as reference:
The following resources/libraries can be used for data extraction from Uniswap:
- The most important resource is the Uniswap v3 contract maps, which document the Pool Contract, Factory Contract, and Position Manager.
- BitQuery (to query data from blockchains)
- Flipside Crypto (to query data from blockchains)
- GraphQL (to extract data from Uniswap)
This section describes the basic design of the user interface (UI) for the proposed SwapGasFees app.
- A separate detailed tutorial describes the working of the designed app, explaining step by step, the different screens of the app.
- The full UI design can be downloaded as a pdf file from here.
There are two main screens/interfaces in the app:
- Interface 1: Analytics for gas fees for a selected swap pair (under the
Swap,Pools, andFavoritestabs) - Interface 2: Analytics for gas fees and Uniswap pools, in general (under the
Chartstab)
Now let us look into both of these interfaces, and explain each.
- After the
Show Swap Feesbutton is clicked, the app extracts data from a database populated apriori, and displays two visualizations. - The first visualization, on the upper right, is the swap gas fee for the selected fee,
by Hourof the day. - In the
by Hourvisualization, there are four rows, corresponding to the swap fees fortoday,yesterday,this week, andthis month. - The black rectangle with the thick border shows the current time of the day.
- The legend on the right hand side displays the fees with respect to the color scale.
- The important text are shown in bold, including the text for
today, current time, and fees for the current time and benchmark time points. - The second visualization is on the lower right hand side, displaying swap gas fees
by Day. - The
by Dayvisualization again displays the gas fees, but based on day of the year and month, enabling benchmark with previous months of the same year and the similar days of the past year. - In both visualizations, the unrealized future time periods are shown as blank (white color).
- Using the two visualizations, a user can visually grasp whether now is a good time to swap or not.
- Sample source code for implementing the first visualization can be found as "World History Timeline". Sample source code for the second calendar visualization can be found as "Calendar", both under the ObservableHQ Gallery. The JavaScript visualization library used is D3.js.
- The second main function of the SwapGasFees app is the display of various charts, under the
Chartstab, to enable a deeper understanding of the Uniswap ecosystem. - The
Chartstab implements a different interface than the earlier three tabs: There is a display (possibly with a legend) and two navigation buttons, namelyPrevious ChartandNext Chart. This interface design again is targeted to minimize the cognitive load on the user, allowing the user to digest the reported results one at a time. - The first screen has the
Previous Chartbutton disabled, yet still in display, to provide a hint of what is to come. - The first screen of the
Chartstab immediately provides the most important information, off the bat: "What are the best times for swaps of top pairs?" - The visualization shows time on the x axis and top pairs on the y axis (as rows).
- Each bar displays the favorable times for each swap pair. There has to be a consistent rule for all pairs, to identify the best times, such as "Select the times where the price is at the lower 30% quartile".
- While the presented visualization shows bars as a single color, each bar can potentially be drawn to allow a color spectrum.
- Sample source code for implementing this visualization can be found as "World timeline visualization", under ObservableHQ Gallery. The JavaScript visualization library used is D3.js.
The main library to be used for visualizations is selected as D3.js:
- D3 Visualization Gallery (JavaScript library for manipulating documents based on data)
The following are sample code for the visualizations presented throughout the SwapGasFees app:
- Visualizations for the first three tabs
- Visualizations for the Charts tab
- Timeline (for Screen 7) (to see which are the cheapest hours or the day/week for each swap pair, where pairs are the rows, color is the gas fee)
- Bubble chart (for Screen 8) (showing volumes of all pairs, or coins in pools, size is volume, color can be volume/liquidity, red color tones if above median)
- Stacked Area Chart (for Screen 9) (to see changes in volume and liquidity, color is pair)
- Animated scatter plot (for Screen 10) (to see changes in multiple dimensions, as an animation)
- Chord diagram (for Screen 11) (to see volume & liquidity changes in pools, and in coins)
- Other possible visualizations under Charts
- Realtime Horizon Chart (scrolling data, where time is x axis, pair is y axis, and color is the gas fee)
- Treemap (showing volumes of all pairs)
- Sankey Diagram (changes in volume of pairs, color shows pair)
- Arc diagram (to see the pairs in the pools, color shows the main coin, such as ETH, USDT, USDC, DAI)
- For the backend, the above data extraction tools can be tested, and the one that provides the fastest and most reliable results can be selected.
- For the frontend, the easiest thing to do would be to fork the Uniswap front-end code and do modifications on that.
- For visualizations, as mentioned earlier, the most suitable library is thought to be D3.js. The D3 Visualization Gallery at Observable HQ provides sample source codes for all the essential charts, that can be used in the SwapGasFees app.
As mentioned earlier, there exist websites/apps that report/visualize the Ethereum gas fees. Some notable ones are the following:
- Crypto.com DeFi Dashboard - Gas Fees: This online service is most related to our proposed app, as it displays not only the Ethereum gas fees but also the gas fees for different swap pairs.
- EthereumPrice.org: This website displays gas price over time, and time of the day. Especially the visualization of fees through heat map is impressive. While the information provided in SwapGasFees app overlaps with the information provided at EthereumPrice.org, the interface is designed to yield much more insights, through benchmarking. Furthermore, the mentioned website displays only Ethereum gas price and not the swap fees, whereas the SwapGasFees app designed in this project displays the latter.
- Matteo Leibowitz's Dune Analytics Dashboards: This rich collection of dashboards display several statistics for the Uniswap ecosystem. In comparison to this collection, the goal of the SwapGasFees project was to develop a single intuitive dashboard app that presents only the most essential few visualizations.
 |
Gürdal Ertek is an Associate Professor at UAE University (UAEU), Al Ain, UAE. He received his Ph.D. from Georgia Institute of Technology, Atlanta, GA, in 2001. Dr. Ertek served in educational and research organizations in Turkey, USA, Singapore, Kuwait and UAE, as well as an on-site reviewer for 50+ industrial R&D projects. His research and teaching areas include applied data science, business analytics, supply chain management, project management, and R&D management. His earlier hackathon in the Ethereum ecosystem was the "Medalla Data Challenge," where Dr. Ertek was the only participant from academia. Joint work of teammate Joseph Kholodenko and Gurdal Ertek, as BlockBlockData Team, was awarded with Bronze Medal. Dr. Ertek's research and other work can be accessed through ErtekProjects.com |