DSC Protocol Frontend

A modern, responsive frontend for the Decentralized Stable Coin (DSC) protocol built with Next.js, TypeScript, and Web3 technologies.

🔗 Complete System

This repository contains the frontend application for the DSC Protocol. For the complete system:

Component	Repository	Description
Smart Contracts	DSC	Core protocol logic, deployment scripts, and tests
Frontend Application	DSC_FE	Next.js web interface for interacting with the protocol (this repository)

💡 Quick Start: Deploy the smart contracts from the DSC repository first, then run this frontend to interact with your deployed contracts.

Features

• 🔗 Wallet Integration: Connect with MetaMask and other wallets via RainbowKit
• 💰 Collateral Management: Deposit and redeem WETH/WBTC collateral
• 🪙 DSC Operations: Mint and burn DSC stablecoins
• 📊 Health Factor Monitoring: Real-time health factor tracking with warnings
• ⚡ Liquidation Interface: Liquidate undercollateralized positions
• 📈 Protocol Statistics: Live price feeds and protocol metrics
• 🌙 Dark Mode: Full dark/light theme support
• 📱 Responsive Design: Works on desktop and mobile devices

Screenshots

Landing Page

Clean, modern landing page introducing the DSC Protocol

Wallet Connection

Seamless wallet integration with RainbowKit

Dashboard

Comprehensive dashboard showing portfolio overview, health factor, and protocol statistics

Collateral Management

Intuitive interface for depositing and redeeming WETH/WBTC collateral

DSC Management

Simple DSC minting and burning interface with real-time health factor monitoring

Analytics

Detailed protocol analytics and performance metrics

Tech Stack

• Framework: Next.js 15 with App Router
• Language: TypeScript
• Styling: Tailwind CSS v4
• Web3: Wagmi v2, Viem, RainbowKit
• State Management: Zustand, TanStack Query
• UI Components: Headless UI, Heroicons
• Notifications: React Hot Toast

Prerequisites

Before running the frontend, ensure you have the DSC protocol smart contracts deployed locally:

1. Clone and set up the smart contracts repository:

   git clone https://github.com/ProngsDev/DSC.git
   cd DSC
   make install

2. Start Anvil blockchain:

   make anvil

3. Deploy contracts (in a new terminal):

   make deploy-local
   make export-frontend

4. Get test tokens:

   make deposit-local

Getting Started

1. Install dependencies:

   npm install

2. Configure environment:

   • Copy .env.local and update contract addresses if needed
   • The default addresses should work with make deploy-local

3. Start the development server:

   npm run dev

4. Open the application:

   • Navigate to http://localhost:3000
   • Connect your wallet (use the test account or import the private key)
   • Start using the DSC protocol!

Wallet Setup

Add Anvil Network to MetaMask

• Network Name: Anvil Local
• RPC URL: http://localhost:8545
• Chain ID: 31337
• Currency Symbol: ETH

Import Test Account

Use the default Anvil test account:

• Private Key: 0xac0974bec39a17e36ba4a6b4d238ff944bacb478cbed5efcae784d7bf4f2ff80
• Address: 0xf39Fd6e51aad88F6F4ce6aB8827279cffFb92266

Usage Guide

1. Deposit Collateral

• Select WETH or WBTC
• Enter amount to deposit
• Approve token spending (first time)
• Confirm deposit transaction

2. Mint DSC

• Enter DSC amount to mint
• Ensure sufficient collateral (health factor > 1.0)
• Confirm mint transaction

3. Monitor Health Factor

• Keep health factor above 1.0 to avoid liquidation
• Yellow warning appears below 1.1
• Red alert appears below 1.0 (liquidatable)

4. Burn DSC & Redeem Collateral

• Burn DSC to reduce debt
• Redeem collateral when health factor allows
• Maintain minimum collateralization ratio

5. Liquidate Positions

• Find users with health factor < 1.0
• Cover their debt to earn 10% bonus
• Help maintain protocol stability

Project Structure

src/
├── app/                 # Next.js app router
├── components/          # React components
│   ├── providers/       # Context providers
│   ├── Dashboard.tsx    # Main dashboard
│   ├── Header.tsx       # Navigation header
│   ├── UserPortfolio.tsx # Portfolio overview
│   ├── CollateralManager.tsx # Collateral operations
│   ├── DSCManager.tsx   # DSC mint/burn
│   ├── LiquidationMonitor.tsx # Liquidation interface
│   └── ProtocolStats.tsx # Protocol statistics
├── lib/
│   ├── hooks/           # Custom React hooks
│   ├── abis/            # Contract ABIs
│   ├── config.ts        # Wagmi configuration
│   └── utils.ts         # Utility functions
└── types/               # TypeScript definitions

Development

Available Scripts

• npm run dev - Start development server
• npm run build - Build for production
• npm run start - Start production server
• npm run lint - Run ESLint

Environment Variables

Key environment variables in .env.local:

NEXT_PUBLIC_CHAIN_ID=31337
NEXT_PUBLIC_RPC_URL=http://localhost:8545
NEXT_PUBLIC_DSC_ADDRESS=0x...
NEXT_PUBLIC_DSC_ENGINE_ADDRESS=0x...
NEXT_PUBLIC_WETH_ADDRESS=0x...
NEXT_PUBLIC_WBTC_ADDRESS=0x...

Troubleshooting

Common Issues

1. "Contract not deployed":

   • Ensure Anvil is running
   • Run make deploy-local in DSC directory
   • Check contract addresses in .env.local

2. "Insufficient funds":

   • Run make deposit-local to get test tokens
   • Ensure you're using the correct test account

3. "Transaction failed":

   • Check health factor before minting
   • Ensure sufficient allowances
   • Verify network connection

4. "Wallet not connecting":

   • Add Anvil network to MetaMask
   • Import test account private key
   • Refresh page and try again

Reset Local State

If you encounter persistent issues:

1. Reset Anvil blockchain:

   # Stop Anvil (Ctrl+C) and restart
   make anvil

2. Redeploy contracts:

   make deploy-local
   make export-frontend

3. Clear browser cache and reconnect wallet

Contributing

1. Fork the repository
2. Create a feature branch
3. Make your changes
4. Add tests if applicable
5. Submit a pull request

License

This project is licensed under the MIT License.