Skip to content

AutoYield is a decentralized finance (DeFi) application that allows users to deposit USDC and earn yield through automated ETH investment strategies. Built on the Ethereum Sepolia testnet, it provides a user-friendly interface for managing crypto investments with real-time price tracking and automated rebalancing.

Notifications You must be signed in to change notification settings

Tmalone1250/auto-yield-dash

Repository files navigation

AutoYield – DeFi Yield Vault

AutoYield is a decentralized finance (DeFi) application that allows users to deposit USDC and earn yield through automated ETH investment strategies. Built on the Ethereum Sepolia testnet, it provides a user-friendly interface for managing crypto investments with real-time price tracking and automated rebalancing.

🚀 Features

Core Functionality

  • USDC Deposits: Securely deposit USDC into the yield vault
  • ETH Growth Strategy: Automatically invest deposited USDC into ETH for potential growth
  • Flexible Withdrawals: Withdraw your USDC holdings at any time
  • Real-time Tracking: Monitor your vault positions and ETH price movements
  • Admin Controls: Owner-only functions for investment strategy management

User Interface

  • Dashboard: Comprehensive overview of vault statistics and personal holdings
  • Live Price Feeds: Real-time ETH/USD prices via Chainlink oracles
  • Responsive Design: Optimized for both desktop and mobile devices
  • Dark/Light Theme: Toggle between themes for better user experience
  • Transaction Feedback: Real-time notifications for all blockchain interactions

Web3 Integration

  • MetaMask Support: Seamless wallet connection and transaction signing
  • Network Management: Automatic Sepolia testnet detection and switching
  • Smart Contract Interaction: Direct integration with AutoYieldVault contract
  • Real-time Updates: Live blockchain data updates via event listeners

🏗️ Architecture

Smart Contract Integration

The application interacts with the AutoYieldVault smart contract deployed on Sepolia:

  • Vault Address: 0x8EeAa896e0820944bBe31d3E4dA9b2C389E38E8E
  • USDC Token: 0x1c7D4B196Cb0C7B01d743Fbc6116a902379C7238
  • Chainlink Price Feed: 0x694AA1769357215DE4FAC081bf1f309aDC325306

Key Components

  • Web3Provider: Manages wallet connections and blockchain state
  • Contract Utilities: Handles all smart contract interactions
  • Price Hooks: Real-time ETH price fetching from Chainlink
  • UI Components: Reusable components built with shadcn/ui

📱 Pages & Functionality

Dashboard (/)

  • Vault Statistics: Total USDC and ETH holdings in the vault
  • Personal Holdings: Your individual USDC and ETH positions
  • Wallet Balance: Available USDC in your connected wallet
  • Live ETH Price: Current ETH/USD price with USD value calculations
  • Quick Actions: Direct links to deposit and withdraw functions

Deposit (/deposit)

  • Amount Input: Specify USDC amount to deposit
  • Balance Display: Shows available wallet USDC balance
  • Max Button: Quick selection of maximum available balance
  • Approval Flow: Automatic ERC-20 token approval handling
  • Transaction Status: Real-time feedback on deposit progress

Withdraw (/withdraw)

  • Withdrawal Amount: Specify USDC amount to withdraw from vault
  • Vault Balance: Shows your current vault USDC holdings
  • Max Withdrawal: Quick selection of maximum withdrawable amount
  • Instant Processing: Direct withdrawal from your vault position

Admin Panel (/admin)

Owner-only features for vault management:

  • Investment Control: Set percentage of vault USDC to invest in ETH (0-100%)
  • Strategy Preview: Review investment details before execution
  • Rebalancing: Convert ETH holdings back to USDC based on current prices
  • Owner Verification: Automatic access control based on configured owner address
  • Real-time Stats: Live vault statistics for informed decision making

🛠️ Technology Stack

Frontend

  • React 18 - Modern React with hooks and concurrent features
  • TypeScript - Type-safe development with full IntelliSense
  • Vite - Fast build tool and development server
  • Tailwind CSS - Utility-first CSS framework
  • shadcn/ui - High-quality, accessible UI components
  • React Router - Client-side routing and navigation

Web3 & Blockchain

  • ethers.js v6 - Ethereum library for blockchain interactions
  • MetaMask Integration - Wallet connection and transaction signing
  • Chainlink Price Feeds - Real-time ETH/USD price data
  • Sepolia Testnet - Ethereum test network for safe development

State Management & Data

  • TanStack Query - Server state management and caching
  • React Context - Global Web3 state management
  • Custom Hooks - Reusable logic for price fetching and mobile detection

Development Tools

  • ESLint - Code linting and quality enforcement
  • PostCSS - CSS processing and optimization
  • TypeScript ESLint - TypeScript-specific linting rules

🚀 Getting Started

Prerequisites

  • Node.js 18+ and npm
  • MetaMask browser extension
  • Sepolia testnet ETH for gas fees
  • Sepolia USDC tokens for testing

Installation

# Clone the repository
git clone <repository-url>
cd autoyield

# Install dependencies
npm install

# Start development server
npm run dev

Environment Setup

  1. Connect MetaMask to Sepolia testnet
  2. Get Sepolia ETH from a faucet for gas fees
  3. Obtain Sepolia USDC tokens for testing deposits
  4. Access the application at http://localhost:5173

Usage Flow

  1. Connect Wallet: Click "Connect Wallet" and approve MetaMask connection
  2. Switch Network: Automatically switch to Sepolia if needed
  3. Deposit USDC: Navigate to /deposit and deposit test USDC
  4. Monitor Growth: Watch your position on the dashboard
  5. Withdraw: Use /withdraw to retrieve your USDC plus any gains

🔧 Development

Available Scripts

npm run dev          # Start development server
npm run build        # Build for production
npm run build:dev    # Build in development mode
npm run lint         # Run ESLint
npm run preview      # Preview production build

Project Structure

src/
├── components/      # Reusable UI components
├── context/         # React context providers
├── hooks/          # Custom React hooks
├── pages/          # Route components
├── web3/           # Blockchain interaction utilities
├── lib/            # Utility functions
└── styles/         # Global styles and Tailwind config

🔒 Security Features

  • Owner-only Admin Functions: Access control for sensitive operations
  • Input Validation: Comprehensive validation on all user inputs
  • Network Verification: Operations restricted to Sepolia testnet
  • Approval Flows: Secure ERC-20 token approval handling
  • Error Boundaries: Graceful error handling and user feedback

🌐 Deployment

The application can be deployed to any static hosting service:

# Build for production
npm run build

# Deploy the dist/ folder to your hosting service

Recommended platforms:

  • Vercel
  • Netlify
  • GitHub Pages
  • AWS S3 + CloudFront

📄 License

This project is open source and available under the MIT License.

About

AutoYield is a decentralized finance (DeFi) application that allows users to deposit USDC and earn yield through automated ETH investment strategies. Built on the Ethereum Sepolia testnet, it provides a user-friendly interface for managing crypto investments with real-time price tracking and automated rebalancing.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published