Egg Shell

Problem Statement

Eggshell is a full-stack Web3 dApp scaffold combining smart contract logic, Graph indexing, and a frontend UI. It includes:On-chain components (in contracts/) written in Solidity for essential functions.A subgraph (in graph/) that listens to contract events and transforms them into queryable entities.Frontend UI (in client/) that connects wallets, retrieves data via the Graph, and allows user interactions.Scripts & tooling to deploy contracts, build & deploy the subgraph, and run tests.The architecture enables real-time, efficient data from the blockchain without needing users to scan logs manually — the Graph provides structured APIs. It’s likely built to support token staking, transfer tracking, and dynamic user dashboards.

Solution

We built the project as a full-stack Web3 dApp combining smart contracts, The Graph, and a React frontend.Smart Contracts (Solidity) We wrote and deployed a staking contract on Sepolia testnet. The contract emits events whenever a user stakes, unstakes, or claims rewards. These events are the backbone of our data layer since they represent the real state changes happening on-chain.Indexing Layer (The Graph Protocol) To make the raw blockchain data usable, we deployed a custom subgraph.The subgraph listens to the staking contract events.It indexes them into structured entities (e.g., User, Stake, Reward).This gives us a GraphQL API for fast and easy queries instead of scanning logs or contract storage manually. This approach drastically reduces complexity, improves performance, and gives us real-time updates.Frontend (React + TypeScript + Next.js) The frontend is a dashboard where users can:Connect their wallet (MetaMask / WalletConnect).Fetch staking data directly from the subgraph.View balances, staked amounts, and pending rewards. We used ethers.js (and wagmi hooks where needed) to handle wallet connections and contract interactions.Integration Between ComponentsContract → emits eventsSubgraph → listens & indexes themFrontend → queries subgraph + contract for live data Together, these three layers create a real-time staking dashboard with smooth UX.Partner TechnologiesThe Graph was the key enabler. Without it, building a performant staking dashboard would have required running heavy blockchain queries. The subgraph simplified indexing, querying, and aggregating data.Sepolia testnet let us test everything live without mainnet costs.Hacky / Notable PartsWe had to carefully sync event mappings in the subgraph schema to avoid data mismatches between the blockchain and frontend.To speed up development, we built a minimal staking contract with just the essentials (stake, unstake, claim), then iterated.We also structured the project repo into contracts/, graph/, and client/ — so everything runs as a single unified stack.