Zield Protocol - Frontend

A Next.js-based decentralized finance (DeFi) platform that enables users to deposit yield-bearing collateral and borrow zUSD stablecoin while earning yield on their deposited assets.

🌟 Features

• Multi-Protocol Support: Deposit yield-bearing tokens from:

  • Lido (wstETH) - Liquid staking for Ethereum
  • Aave (aUSDC) - Decentralized lending protocol
  • Compound (cDAI) - Algorithmic money market

• Collateralized Borrowing: Borrow zUSD stablecoin against your deposited collateral

• Health Factor Monitoring: Real-time tracking of position health (150% collateralization ratio)

• Yield Accumulation: Earn yield on deposited collateral while borrowing

• Activity Tracking: Monitor all deposits, withdrawals, borrows, and repayments

• Wallet Integration: Connect via RainbowKit with WalletConnect support

• Farcaster Integration: Native support for Farcaster miniapp SDK

🛠 Tech Stack

• Framework: Next.js 15.5.4 (with Turbopack)
• Language: TypeScript
• Styling: Tailwind CSS 4.1 + Radix UI components
• Web3: wagmi 2.17, viem 2.38, RainbowKit 2.2
• State Management: Zustand + TanStack Query
• Forms: React Hook Form + Zod validation
• Animations: Framer Motion
• Charts: Recharts + Lightweight Charts
• Package Manager: pnpm 10.18.1

📋 Prerequisites

• Node.js 18+
• pnpm 10.18.1
• A Web3 wallet (MetaMask, Rainbow, etc.)

🚀 Getting Started

Installation

pnpm install

Environment Setup

Copy the example environment file and configure:

cp .env.local.example .env.local

Update .env.local with your contract addresses:

# Core Contracts
NEXT_PUBLIC_CDP_ADDRESS=0x...
NEXT_PUBLIC_REGISTRY_ADDRESS=0x...
NEXT_PUBLIC_STABLECOIN_ADDRESS=0x...

# Yield Token Addresses
NEXT_PUBLIC_WSTETH_ADDRESS=0x...  # Lido wstETH
NEXT_PUBLIC_AUSDC_ADDRESS=0x...   # Aave aUSDC
NEXT_PUBLIC_CDAI_ADDRESS=0x...    # Compound cDAI

# Network Configuration
NEXT_PUBLIC_CHAIN_ID=11155111
NEXT_PUBLIC_CHAIN_NAME=Sepolia
NEXT_PUBLIC_RPC_URL=https://...
NEXT_PUBLIC_BLOCK_EXPLORER=https://sepolia.etherscan.io

# Optional
NEXT_PUBLIC_WALLETCONNECT_PROJECT_ID=your_project_id
NEXT_PUBLIC_BACKEND_URL=http://localhost:3002

Development

Run the development server with Turbopack:

pnpm dev

Open http://localhost:3000 in your browser.

Build

Build for production:

pnpm build

Production Server

Start the production server:

pnpm start

Linting

Run ESLint with auto-fix:

pnpm lint

📁 Project Structure

/
├── app/                      # Next.js app directory
│   ├── page.tsx             # Dashboard (main CDP interface)
│   ├── activity/            # Transaction history
│   ├── faucet/              # Test token faucet
│   └── api/                 # API routes (price feeds)
├── components/              # React components
│   ├── cdp/                # CDP-specific components
│   ├── layout/             # Layout components
│   ├── ui/                 # Reusable UI components (Radix)
│   └── providers.tsx       # Context providers
├── hooks/                   # Custom React hooks
│   ├── mutation/           # Transaction mutations
│   ├── query/              # Data queries
│   └── use-zield-cdp.ts    # Main CDP hook
├── lib/                     # Utility functions
├── config/                  # Configuration files
│   ├── contracts.ts        # Contract ABIs & addresses
│   └── site.ts             # Site metadata
├── types/                   # TypeScript type definitions
└── public/                  # Static assets

🔑 Key Components

Main CDP Hook

import { useZieldCDP } from '@/hooks/use-zield-cdp';

const {
  collateralValue,    // Total collateral in USD
  totalDebt,          // Total borrowed zUSD
  healthFactor,       // Position health (150%+)
  maxBorrow,          // Available to borrow
  totalApy,           // Combined APY from all deposits
  depositCollateral,  // Deposit function
  withdrawCollateral, // Withdraw function
  borrow,            // Borrow zUSD
  repay,             // Repay debt
} = useZieldCDP();

Supported Protocols

import { SUPPORTED_PROTOCOLS } from '@/config/contracts';

// Lido, Aave, and Compound integrations
SUPPORTED_PROTOCOLS.forEach(protocol => {
  console.log(protocol.name, protocol.token, protocol.apy);
});

🌐 API Routes

• /api/prices - Get token prices
• /api/prices/set - Set individual token price
• /api/prices/set-all - Batch update prices

🔗 Contract Integration

The app interacts with:

1. MultiProtocolCDP - Main collateral debt position contract
2. VaultRegistry - Protocol registry & APY tracking
3. Mock Yield Tokens - wstETH, aUSDC, cDAI (testnet)
4. Stablecoin - zUSD stablecoin
5. Protocol Adapters - Lido, Aave, Compound adapters

📊 Subgraph

Query blockchain data via The Graph:

import { SUBGRAPH_URL } from '@/config/contracts';
// Uses Goldsky-hosted subgraph for activity tracking

🔐 Security Features

• Content Security Policy (CSP)
• Strict Transport Security (HSTS)
• XSS Protection
• Frame Options
• Secure cookie handling
• API proxy for backend communication

🎨 UI Components

Built with shadcn/ui (Radix primitives):

• Buttons, Cards, Dialogs, Sheets
• Form inputs, Selects, Sliders
• Tables, Tabs, Tooltips
• Progress indicators
• Toast notifications (Sonner)

📱 Responsive Design

Fully responsive with mobile-first approach, optimized for desktop and mobile viewing.

🧪 Development Tools

• ESLint with Next.js, React, TypeScript configs
• Prettier for code formatting
• TypeScript strict mode
• Turbopack for fast refresh

🌍 Deployment

The app includes a Netlify build script:

pnpm build:netlify

📝 License

Private - Hackathon Project

🤝 Contributing

This is a hackathon project. For contributions or questions, please contact the development team.

🔗 Links

• App: https://app.zield.space
• Chain: Base Sepolia / Ethereum Sepolia testnet
• Block Explorer: https://sepolia.basescan.org

---

Built with ❤️ for hackathon