ERC4626 Vault Management Platform

A comprehensive full-stack DeFi application for monitoring and interacting with ERC4626 vaults. Built with modern technologies and best practices for educational and demo purposes.

🏗️ Architecture Overview

This monorepo contains two main applications:

• /indexer - Node.js/TypeScript indexing service with GraphQL API
• /web - Next.js React frontend with wallet integration

Tech Stack

Backend (Indexer)

• Node.js + TypeScript - Runtime and language
• PostgreSQL + Prisma - Database and ORM
• Apollo GraphQL - API layer with caching
• viem - Ethereum client for blockchain interactions
• Docker - Containerization and deployment

Frontend (Web)

• Next.js 14 - React framework with App Router
• TypeScript - Type safety
• Tailwind CSS - Styling
• wagmi + viem - Ethereum wallet integration
• RainbowKit - Wallet connection UI
• React Query - Data fetching and caching
• GraphQL - API communication

🚀 Quick Start

Prerequisites

• Node.js 18+
• PostgreSQL 14+
• Docker (optional)

1. Clone and Install

git clone <repository-url>
cd vault-fullstack

# Install dependencies for both apps
cd indexer && npm install
cd ../web && npm install

2. Environment Setup

Indexer Environment

Create /indexer/.env:

# Database
DATABASE_URL="postgresql://username:password@localhost:5432/vault_indexer"

# Blockchain
RPC_URL="https://eth-mainnet.g.alchemy.com/v2/your-api-key"
VAULT_ADDRESS="0x..." # Your ERC4626 vault address
START_BLOCK=18000000 # Starting block number

# GraphQL
GRAPHQL_PORT=4000

Web Environment

Create /web/.env:

# API
NEXT_PUBLIC_GRAPHQL_URL="http://localhost:4000/graphql"
NEXT_PUBLIC_VAULT_ADDRESS="0x..." # Same as indexer

# Wallet Connect
NEXT_PUBLIC_WALLETCONNECT_PROJECT_ID="your-project-id"

3. Database Setup

cd indexer
npm run db:generate # Generate Prisma client
npm run db:push     # Create tables

4. Start Development

Terminal 1 - Start Indexer

cd indexer
npm run dev

Terminal 2 - Start Web App

cd web
npm run dev

Visit:

• Frontend: http://localhost:3000
• GraphQL Playground: http://localhost:4000/graphql

📁 Project Structure

vault-fullstack/
├── indexer/                  # Backend indexing service
│   ├── src/
│   │   ├── abis/              # Contract ABIs
│   │   ├── services/          # Indexing logic
│   │   ├── graphql/           # GraphQL schema & resolvers
│   │   └── index.ts           # Entry point
│   ├── prisma/                # Database schema
│   ├── docker-compose.yml     # Local PostgreSQL
│   └── package.json
│
├── web/                     # Frontend Next.js app
│   ├── src/
│   │   ├── components/       # React components
│   │   ├── lib/              # Utilities & ABIs
│   │   ├── contexts/         # React contexts
│   │   └── config/           # wagmi configuration
│   ├── app/                  # Next.js App Router
│   └── package.json
│
└── README.md                 # This file

🔧 Features

Indexer Service

• Real-time Event Indexing: Processes vault deposits, withdrawals, and harvests
• Historical Data: Batch processes past events from specified block
• Vault Snapshots: Creates time-series data for analytics
• User Positions: Tracks individual user interactions
• GraphQL API: Provides efficient data access with caching
• Database Persistence: Stores all indexed data in PostgreSQL

Web Application

• Wallet Integration: Connect with MetaMask, WalletConnect, etc.
• Live Blockchain Data: Real-time TVL and share prices
• Vault Actions: Deposit and withdraw directly from the UI
• User Dashboard: View personal positions and P&L
• Analytics Charts: Historical performance visualization
• Responsive Design: Works on desktop and mobile

🤝 Contributing

1. Fork the repository
2. Create a feature branch
3. Make your changes
4. Submit a pull request