Egg Shell

Web3 Portfolio Manager: Track, analyze & manage DeFi assets with real-time subgraph data.

Egg Shell

Created At

ETHGlobal New Delhi

Project Description

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.

How it's Made

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 Components

Contract → emits events

Subgraph → listens & indexes them

Frontend → queries subgraph + contract for live data Together, these three layers create a real-time staking dashboard with smooth UX.

Partner Technologies

The 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 Parts

We 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.

background image mobile

Join the mailing list

Get the latest news and updates