Nexus DeFi Staking dApp

A modern decentralized staking application built with React, TypeScript, Vite, Ethers.js, Wagmi, and Framer Motion. Nexus provides an institutional-grade interface for connecting wallets, selecting Ethereum networks, staking assets, monitoring rewards, tracking portfolio metrics, and viewing staking activity.

🌐 Live Demo

Production Deployment:
https://nexus-defi-staking-dapp-jg2cb7nxm.vercel.app

Overview

Nexus is a responsive Web3 staking dashboard that enables users to:

Connect an Ethereum wallet using MetaMask
Select between Ethereum Mainnet and Sepolia Testnet
Stake ETH through an intuitive interface
Unstake assets
Claim staking rewards
Enable automatic reward compounding
Monitor protocol health metrics
Track portfolio performance
View staking analytics
Review transaction history
Access protocol documentation

The application features a modern glassmorphism-inspired UI with smooth animations powered by Framer Motion.

Features

🔗 Wallet Connection

Connect your Ethereum wallet directly from the application.

Supported Functionality

MetaMask integration
Account detection
Wallet address display
Connection state management

Connected wallets display a shortened address format:

0x7a62...431e

instead of the default Connect Wallet button.

🌐 Network Selection

The staking dashboard includes a custom network selector.

Available Networks

Network	Chain ID
Ethereum Mainnet	0x1
Ethereum Sepolia	0xaa36a7

Users can easily switch between supported networks before staking.

💰 Staking Dashboard

The staking dashboard serves as the primary interaction point for users.

Stake Assets

Users can:

Select a network
Enter a staking amount
Use the MAX button
Submit a staking request

Unstake Assets

Users can:

Enter an unstake amount
Withdraw previously staked assets

Claim Rewards

Users can:

View accumulated rewards
Claim pending rewards

Auto-Compound

Users can enable:

Automatic reward reinvestment
Validator diversification
Daily reward sweeping

📊 Protocol Health Monitoring

The hero section displays key protocol metrics.

Metrics Displayed

Protocol Solvency
Slashing Coverage
Oracle Confidence
Liquidity Buffer
Validator Set Size
Epoch Yield

Animated progress bars provide visual insight into protocol health.

📈 Portfolio Tracking

The portfolio section provides a snapshot of user positions.

Included Information

Total staked assets
Reward balances
APY exposure
Asset allocation
Strategy distribution

📉 Analytics Dashboard

The analytics section provides visual performance metrics.

Available Charts

TVL (Total Value Locked)
Rewards Growth
APY History
User Earnings

The chart architecture is designed for future integration with live blockchain analytics APIs.

🧾 Transaction History

Users can review staking activity through a detailed transaction log.

Supported Status Types

Active
Pending
Completed

Transaction Details

Transaction type
Timestamp
Amount
Status
Transaction hash

This creates a transparent and auditable history of protocol activity.

📚 Documentation Hub

The documentation section provides access to protocol resources.

Available Resources

Protocol Documentation
Risk Framework
Security Reports

These sections are designed to support future protocol documentation and audit reports.

🛠 Technology Stack

Frontend

React 18
TypeScript
Vite

Web3

Ethers.js v6
Wagmi
RainbowKit

UI & Animations

Tailwind CSS
Framer Motion
Lucide React

Deployment

GitHub
Vercel

📂 Project Structure

frontend/
└── nexus-dapp/
    ├── src/
    │   ├── components/
    │   ├── data/
    │   ├── lib/
    │   ├── App.tsx
    │   └── main.tsx
    │
    ├── public/
    ├── package.json
    ├── vite.config.ts
    ├── tailwind.config.js
    └── tsconfig.json

🚀 Getting Started

Clone the Repository

git clone https://github.com/Sharon-dev-create/Nexus-defi-staking-dapp.git

Navigate to the Frontend

cd Nexus-defi-staking-dapp/frontend/nexus-dapp

Install Dependencies

pnpm install

Start Development Server

pnpm dev

Open:

http://localhost:5173

🏗 Build for Production

Generate a production build:

pnpm build

Preview the build locally:

pnpm preview

⚙ Environment Variables

Create a .env file in the project root:

VITE_RPC_URL=https://your-rpc-url
VITE_CHAIN_ID=11155111

Example:

VITE_RPC_URL=https://eth-sepolia.g.alchemy.com/v2/YOUR_API_KEY
VITE_CHAIN_ID=11155111

☁ Deployment

Vercel Deployment

This project is deployed using Vercel.

Deployment Steps

Push the repository to GitHub.
Import the repository into Vercel.
Set the Root Directory:

frontend/nexus-dapp

Configure environment variables.
Deploy the application.

Live Application

https://nexus-defi-staking-dapp-jg2cb7nxm.vercel.app

✅ Current Functionality

Implemented

Wallet connection with MetaMask
Ethereum network selection
Staking interface
Unstaking interface
Reward claiming interface
Auto-compound controls
Portfolio dashboard
Analytics dashboard
Protocol metrics
Responsive design
Vercel deployment

🔮 Future Improvements

Planned Features

Smart contract integration
Live staking transactions
Real reward calculations
Wallet network switching
WalletConnect support
Multi-chain staking
Historical analytics
On-chain transaction verification
Live APY feeds
User profile management

🔒 Security Considerations

This project currently serves as a frontend demonstration of a decentralized staking platform.

Before production deployment, the following should be implemented:

Smart contract audits
Transaction validation
Reentrancy protection
Slashing protection mechanisms
Oracle security verification
Monitoring and alerting systems
Access control reviews

🤝 Contributing

Contributions are welcome.

To contribute:

Fork the repository
Create a feature branch
Commit your changes
Push your branch
Open a Pull Request

📄 License

This project is licensed under the MIT License.

👨‍💻 Author

Sharon Dev

GitHub Repository

https://github.com/Sharon-dev-create/Nexus-defi-staking-dapp

Live Deployment

https://nexus-defi-staking-dapp-jg2cb7nxm.vercel.app

Built with React, TypeScript, Vite, Ethers.js, Wagmi, Tailwind CSS, and Framer Motion to demonstrate a modern decentralized staking experience.

Name		Name	Last commit message	Last commit date
.vscode		.vscode
contract		contract
frontend/nexus-dapp		frontend/nexus-dapp
node_modules		node_modules
.gitignore		.gitignore
README.md		README.md
package.json		package.json
pnpm-lock.yaml		pnpm-lock.yaml

Latest commit

History

Folders and files

Repository files navigation

Nexus DeFi Staking dApp

🌐 Live Demo

Overview

Features

🔗 Wallet Connection

Supported Functionality

🌐 Network Selection

Available Networks

💰 Staking Dashboard

Stake Assets

Unstake Assets

Claim Rewards

Auto-Compound

📊 Protocol Health Monitoring

Metrics Displayed

📈 Portfolio Tracking

Included Information

📉 Analytics Dashboard

Available Charts

🧾 Transaction History

Supported Status Types

Transaction Details

📚 Documentation Hub

Available Resources

🛠 Technology Stack

Frontend

Web3

UI & Animations

Deployment

📂 Project Structure

🚀 Getting Started

Clone the Repository

Navigate to the Frontend

Install Dependencies

Start Development Server

🏗 Build for Production

⚙ Environment Variables

☁ Deployment

Vercel Deployment

Deployment Steps

Live Application

✅ Current Functionality

Implemented

🔮 Future Improvements

Planned Features

🔒 Security Considerations

🤝 Contributing

📄 License

👨‍💻 Author

GitHub Repository

Live Deployment

About

Resources

Stars

Watchers

Forks

Releases

Packages

Contributors

Languages