Optics Dashboard 📊
Monitor the activity, metrics, and health of Celo's Optics cross-chain bridges in a single dashboard.
Live Demo: https://optics-dashboard.vercel.app/
This is a submission for Celo's Make Crypto Mobile Hackathon.
Contents
Optics Dashboard (features and video demos)
Intro
Project details
Hackathon Track
Interoperability Track
Region location
London, UK
Team
Karl Lee, dev
Problem
'The next frontier in blockchain technology is communication', as stated by the team behind Wormhole bridge.
With DeFi apps, protocols, and financial products appearing in different crypto ecosystems, a major barrier arises. Capital flows across chains are restricted by limited communications between them.
Without cross-chain communication, crypto is forced to flow back to centralized exchanges or even to fiat off-ramps in order to cross different chains. Decentralized finance cannot be so decentralized after all if we rely on centralized actors for bridging.
Why Optics? (A protocol designed by Celo)
Bridging assets across chains is often costly due to gas fees.
According to Celo's documentation, Optics is expected to cut '90% of gas costs' compared to a traditional cross-chain system. This is because Optics is a protocol that facilitates communication without header verification.
Barriers to adoption and development of Optics
Optics is currently in a beta release phase.
While security is always a key issue for cross-chain bridges, there is also a lack of information on how Optic's bridges are currently being utilized.
For Optics, we are currently lacking:
- Official or community dashboard for monitoring activity on Optics
- Analytics for Optics
- A way for individual users to track their bridging activity
Motivation behind the project
Insights and analytics into cross-chain bridging seem to be far and few between. How much crypto are users bridging? Which currencies are bridged the most? Who are the most intensive users of bridges?
Could trends in bridging activity indicate new opportunities for traders, devs, and protocols?
This project was an opportunity to draw out and discover insights into Optics usage that were unavailable.
I wanted to combine and apply my previous experience of designing front-ends with crypto-driven data to a more complex, multi-chain application.
Previous projects:
- LUNAtic score calculator for Terra users: https://github.com/karlxlee/lunatic-score-calculator
- PolyDAO analytics: https://github.com/karlxlee/polydao-analytics
- Previous hackathon wins: https://gitcoin.co/karlxlee
Optics Dashboard
Optics Dashboard serves several stakeholders:
Provides activity and trends for bridge operators and developers
Provides insights for blockchain teams that are looking to potentially integrate with Optics
Exposes opportunities for cross-chain apps, protocols, and DAOs, that can integrate Optics to increase liquidity
Allows bridging users to monitor their transactions in one place
Features
Track key metrics with Overview
From bridge balance to transaction count, see key metrics, visualized.
Explore trends
See the assets that are most popular with Optics users.
Check smart contract activity
Bridges can enter failure cases due to unexpected circumstances or errors. One indicator of an error and a disruption in bridge usage would be that bridge smart contracts stop sending regular updates.
The health tab allows operators to monitor the key contracts that power Optics. See smart contract activity over the past 24 hours in one place. N.B. the blockchain data source has a lag period of a few hours currently, but should see better future performance.
Search for bridging activity by address
Want to see Optics activity for a specific address (including your own)? With Optics Dashboard you can see your bridging activity in seconds.
Compare Optics fees with other cross-chain bridges
URLs
Demo: https://optics-dashboard.vercel.app/
Codebase: https://github.com/karlxlee/make-crypto-mobile-hackathon/tree/project/optics_dashboard
Next steps
- Integrate bridge activity to and from Celo blockchain
- Extend fee comparison feature to more bridges
- Explore activity on a specific day
- Explore activity for a specific asset
Technical documentation
Optics Dashboard needed to fulfil several technical needs:
- Fetch the latest blockchain data
- Visualize many data points in a useful way to stakeholders
- Provide a speedy user interface
- Allows for fast changes and improvements in both the frontend and backend
For these reasons, the technology chosen for this app was:
- Fast and modular front-end using Next.js and Chakra UI
- Effective visualization library using ApexCharts
- Flexible and easily-editable backend using Flipside Crypto
SQL data queries
SQL queries expose the key metrics that Optics Dashboard displays. You can find a list of the SQL queries used below.
Local development
- Clone the repo
- Install modules
- Run
yarn dev - Open http://localhost:3000/
Deploy
Deploy in one click using Vercel
License
This repository is available under the MIT license. See the LICENSE file.
Built With
- flipside
- next
- nextjs
- react
Log in or sign up for Devpost to join the conversation.