{"id":15816606,"url":"https://github.com/ttttonyhe/stader-graph-dashboard","last_synced_at":"2026-03-04T15:02:30.211Z","repository":{"id":246685027,"uuid":"821351683","full_name":"ttttonyhe/stader-graph-dashboard","owner":"ttttonyhe","description":"Analytics Dashboard for \"Stader on ETH\" powered by The Graph.","archived":false,"fork":false,"pushed_at":"2024-07-04T06:30:11.000Z","size":410,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2024-10-06T05:05:33.561Z","etag":null,"topics":["analytics-dashboard","ant-design","ant-design-charts","blockchain-analytics","cloudflare-workers","crypto-dashboard","data-visualization","graphql","hono","next","subgraph-query","tailwindcss"],"latest_commit_sha":null,"homepage":"https://stader-dashboard.ouorz.com","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"gpl-3.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ttttonyhe.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-06-28T10:50:07.000Z","updated_at":"2024-09-11T12:39:33.000Z","dependencies_parsed_at":"2024-07-05T14:19:52.647Z","dependency_job_id":null,"html_url":"https://github.com/ttttonyhe/stader-graph-dashboard","commit_stats":null,"previous_names":["ttttonyhe/stader-graph-dashboard"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/ttttonyhe/stader-graph-dashboard","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ttttonyhe%2Fstader-graph-dashboard","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ttttonyhe%2Fstader-graph-dashboard/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ttttonyhe%2Fstader-graph-dashboard/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ttttonyhe%2Fstader-graph-dashboard/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ttttonyhe","download_url":"https://codeload.github.com/ttttonyhe/stader-graph-dashboard/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ttttonyhe%2Fstader-graph-dashboard/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":30084685,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-03-04T13:22:36.021Z","status":"ssl_error","status_checked_at":"2026-03-04T13:20:45.750Z","response_time":59,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["analytics-dashboard","ant-design","ant-design-charts","blockchain-analytics","cloudflare-workers","crypto-dashboard","data-visualization","graphql","hono","next","subgraph-query","tailwindcss"],"created_at":"2024-10-05T05:05:53.597Z","updated_at":"2026-03-04T15:02:30.184Z","avatar_url":"https://github.com/ttttonyhe.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Stader Graph Dashboard (SGD)\n\nAnalytics Dashboard for [_Stader on ETH_](https://www.staderlabs.com) powered by [The Graph](https://thegraph.com).\n\n![SGD screenshot](https://static.ouorz.com/sgd-screenshot.png)\n\n\u003cbr /\u003e\n\n## Dashboard Live URL\n\n[https://stader-dashboard.ouorz.com →](https://stader-dashboard.ouorz.com)\n\n\u003cbr /\u003e\n\n## Project Sustainability\n\nThis 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:\n\n- Worker ([Edge Compute](https://workers.cloudflare.com))\n  - Model-View-Controller-Service (MVCS)\n  - Factory\n  - Middleware\n  - D1 Database (SQLite)\n  - CRON\n- Dashboard\n  - stale-while-revalidate ([HTTP RFC 5861](https://datatracker.ietf.org/doc/html/rfc5861))\n  - Atomic CSS ([_Challenging CSS Best Practices_](https://www.smashingmagazine.com/2013/10/challenging-css-best-practices-atomic-approach))\n  - Cloudflare Web Analytics (Privacy-preserving website analytics)\n\nSGD uses the latest and greatest technology from the open-source community to implement its functionality:\n\n- Turborepo\n  - Turbopack\n- Hono\n  - [`graphql-request`](https://github.com/jasonkuhrt/graphql-request)\n- Next.js\n  - Pages router\n  - React compiler\n  - TailwindCSS\n  - Ant Design Charts\n  - [`react-content-loader`](https://github.com/danilowoz/react-content-loader)\n\n\u003cbr /\u003e\n\n## Architecture Overview\n\nTo optimize query performance and reduce GraphQL data request overhead, we utilized Cloudflare Workers to implement a lightweight caching layer between the [Stader Subgraph](https://thegraph.com/explorer/subgraphs/2RLAUqUMvGGFygtuJfmTyeo62zFSJswDZSRMTcu28fSa) and our data visualization dashboard.\n\nOur architectural design overview is shown below:\n\n![Stader Graph Dashboard](https://static.ouorz.com/stader-graph-dashboard-architecture-overview.jpg)\n\nColoured arrows indicate flow of data.\n\n\u003cbr /\u003e\n\n## Subgraph\n\nSGD sources blockchain data from Messari's Stader Ethereum subgraph (Subgraph ID: [2RLAUqUMvGGFygtuJfmTyeo62zFSJswDZSRMTcu28fSa](https://thegraph.com/explorer/subgraphs/2RLAUqUMvGGFygtuJfmTyeo62zFSJswDZSRMTcu28fSa))\n\n- For normal usage, there is no need for a Subgraph API key\n- Prior to deploying SGD, you need to generate an API key in [Subgraph Studio](https://thegraph.com/studio) and store the complete subgraph GraphSQL endpoint URL as a Worker environment variable: `SUBGRAPH_API_ENDPOINT`\n\n\u003cbr /\u003e\n\n## Cloudflare Worker\n\nSGD's worker app utilizes open-source web application framework [Hono](https://hono.dev) to handle, validate and process HTTP requests sent from dashboard users. Leveraging Cloudflare's serverless SQL database [D1](https://www.cloudflare.com/developer-platform/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.\n\nTo 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.\n\nMain worker routes:\n\n- GET: `/data`\n- GET: `/manual-sync` (Basic Authentication)\n- GET: `/ping` (Health check)\n\nPlease refer to [README.md](https://github.com/ttttonyhe/stader-graph-dashboard/tree/main/apps/worker) for detailed instructions on building and deploying the SGD worker app.\n\n\u003cbr /\u003e\n\n## Stader Dashboard\n\nSGD's dashboard is a Single Page App (SPA) powered by the popular React framework [Next.js](https://nextjs.org). Additionally, SGD adopts data visualization library [Ant Design Charts](https://ant-design-charts.antgroup.com) and Atomic CSS styling toolkit [TailwindCSS](https://www.tailwindcss.com) to present the Stader platform's recent and historical metrics.\n\nPlease refer to [README.md](https://github.com/ttttonyhe/stader-graph-dashboard/tree/main/apps/dashboard) for detailed instructions on building the dashboard web app.\n\n\u003cbr /\u003e\n\n## Development\n\nSGD uses [Turborepo](https://turbo.build/repo) for monorepo management, [PNPM](https://pnpm.io) for Node.js package management.\n\n- `@sgd/shared` package contains constants and utilities shared between apps\n- `@sgd/eslint-config` package contains ESLint configs for different apps\n- `@sgd/typescript-config` package contains TypeScript configs used in different apps\n\n\u003cbr /\u003e\n\n## Introduction to Stader\n\nStader 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.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fttttonyhe%2Fstader-graph-dashboard","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fttttonyhe%2Fstader-graph-dashboard","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fttttonyhe%2Fstader-graph-dashboard/lists"}