Stader Graph Dashboard (SGD)

Analytics Dashboard for Stader on ETH powered by The Graph.

Dashboard Live URL

https://stader-dashboard.ouorz.com →

Project Sustainability

This project follows industry standard practices for designing reusable, maintainable and scalable web software. This means that SGD can be easily extended or used as a template for building analytics dashboard for other subgraphs on The Graph. Some of the design patterns we follow are:

• Worker (Edge Compute)
  • Model-View-Controller-Service (MVCS)
  • Factory
  • Middleware
  • D1 Database (SQLite)
  • CRON
• Dashboard
  • stale-while-revalidate (HTTP RFC 5861)
  • Atomic CSS (Challenging CSS Best Practices)
  • Cloudflare Web Analytics (Privacy-preserving website analytics)

SGD uses the latest and greatest technology from the open-source community to implement its functionality:

• Turborepo
  • Turbopack
• Hono
  • graphql-request
• Next.js
  • Pages router
  • React compiler
  • TailwindCSS
  • Ant Design Charts
  • react-content-loader

Architecture Overview

To optimize query performance and reduce GraphQL data request overhead, we utilized Cloudflare Workers to implement a lightweight caching layer between the Stader Subgraph and our data visualization dashboard.

Our architectural design overview is shown below:

Coloured arrows indicate flow of data.

Subgraph

SGD sources blockchain data from Messari's Stader Ethereum subgraph (Subgraph ID: 2RLAUqUMvGGFygtuJfmTyeo62zFSJswDZSRMTcu28fSa)

• For normal usage, there is no need for a Subgraph API key
• Prior to deploying SGD, you need to generate an API key in Subgraph Studio and store the complete subgraph GraphSQL endpoint URL as a Worker environment variable: SUBGRAPH_API_ENDPOINT

Cloudflare Worker

SGD's worker app utilizes open-source web application framework Hono to handle, validate and process HTTP requests sent from dashboard users. Leveraging Cloudflare's serverless SQL database D1, SGD worker backend can effectively cache the GraphQL data returned by the subgraph and serve them to users around the world via a performant edge RESTful API.

To ensure data consistency between our caching DB and the subgraph, SGD implements a worker CRON job that automatically fetch and synchronize the latest data indexed by the subgraph with the D1 database on a daily basis.

Main worker routes:

• GET: /data
• GET: /manual-sync (Basic Authentication)
• GET: /ping (Health check)

Please refer to README.md for detailed instructions on building and deploying the SGD worker app.

Stader Dashboard

SGD's dashboard is a Single Page App (SPA) powered by the popular React framework Next.js. Additionally, SGD adopts data visualization library Ant Design Charts and Atomic CSS styling toolkit TailwindCSS to present the Stader platform's recent and historical metrics.

Please refer to README.md for detailed instructions on building the dashboard web app.

Development

SGD uses Turborepo for monorepo management, PNPM for Node.js package management.

• @sgd/shared package contains constants and utilities shared between apps
• @sgd/eslint-config package contains ESLint configs for different apps
• @sgd/typescript-config package contains TypeScript configs used in different apps

Introduction to Stader

Stader is a cutting-edge liquid restaking platform designed to enhance the staking experience in the decentralized finance (DeFi) ecosystem. By allowing users to restake their assets seamlessly, Stader maximizes yield opportunities while maintaining liquidity. It offers a secure and user-friendly interface for managing staking activities, providing detailed metrics and insights to help users make informed decisions. Stader’s innovative approach ensures optimal returns and flexibility, making it an essential tool for both novice and experienced stakers in the DeFi space.