A cyberpunk-themed, single-page DeFi dashboard for token swapping, liquidity pool management, staking, and portfolio tracking.
Live Demo · Architecture · Report Bug
DeFi is a feature-rich, visually stunning decentralized finance dashboard built with pure HTML, CSS, and JavaScript — no frameworks required. It features a cyberpunk aesthetic with neon glows, scan-line effects, animated floating orbs, and a dark terminal-style interface. The application simulates a fully functional DeFi protocol with real-time data animations and interactive components.
- Protocol Overview — Real-time metrics for Total Value Locked (TVL), 24h volume, active pools, and total stakers
- TVL History Chart — Canvas-rendered area chart with gradient fills and animated data points
- Trending Tokens — Live price feed for ETH, USDC, DEFI, ARB, and OP with real-time fluctuations
- Recent Transactions — Simulated transaction feed with status indicators
- Instant Swap Interface — Swap between multiple token pairs (ETH, USDC, DEFI, ARB, OP)
- Slippage Tolerance Settings — Configurable (0.1%, 0.5%, 1.0%)
- Price Chart — Live price history visualization for selected pair
- Recent Swaps Feed — Transaction history for recent swap activity
- Swap Details — Rate info, price impact, minimum received, and network fee breakdown
- Pool Browser — Browse all available liquidity pools with APY, TVL, and 24h volume
- Pool Filtering — Filter by All, Stable, and Volatile pool types
- Add/Remove Liquidity — Interactive buttons for managing liquidity positions
- Pool Metrics — Fee tiers, pool types, and performance indicators
- Flexible Staking — Stake/Unstake DEFI tokens with configurable lock periods
- Lock Period Tiers — 30-day, 90-day, and 180-day options with variable APY
- Rewards Dashboard — Track pending rewards, claimable tokens, and total staked
- Staking Stats — Total staked across protocol, APY rates, and total stakers
- Holdings Overview — Total portfolio value with 24h change percentage
- Asset Allocation Chart — Canvas-rendered donut chart with token breakdown
- Token Holdings Table — Individual token balances, values, and price changes
- Transaction History — Historical portfolio activity log
- Cyberpunk Aesthetic — Dark theme with neon cyan, green, amber, and purple accents
- Scan-line Effect — Animated CRT-style scan line overlay
- Floating Orbs — Ambient animated gradient orbs for depth
- Glass Morphism — Frosted glass panels with subtle blur effects
- Micro-animations — Smooth transitions, counter animations, hover effects
- Responsive Design — Mobile-first with collapsible sidebar navigation
- Toast Notifications — Contextual feedback for user actions
| Layer | Technology |
|---|---|
| Structure | HTML5 (Semantic) |
| Styling | Vanilla CSS (Custom Properties, Grid, Flexbox, Animations) |
| Logic | Vanilla JavaScript (ES6+) |
| Charts | HTML5 Canvas API |
| Fonts | Google Fonts — Exo 2 & Share Tech Mono |
| Deployment | GitHub Pages via GitHub Actions |
DeFi/
├── .github/
│ └── workflows/
│ └── deploy.yml # GitHub Actions workflow for Pages deployment
├── index.html # Main application — single-page DeFi dashboard
├── styles.css # Complete design system & component styles
├── app.js # Application logic — all modules & interactions
├── architecture.html # Architecture blueprint — 6-layer system design
└── README.md # Project documentation
The project includes a detailed Architecture Blueprint (architecture.html) showcasing a production-grade 6-layer DeFi protocol design:
| Layer | Name | Components |
|---|---|---|
| 01 | Presentation / UI | Web dApp, Mobile App, Wallet Integration, Analytics Dashboard, IPFS Hosting |
| 02 | Protocol / Backend | GraphQL API, Keeper Network, WebSocket Server, Indexer/Cache, Price Oracle |
| 03 | Smart Contracts | AMM/DEX Engine, Lending Protocol, Yield Aggregator, Governance DAO, Cross-chain Bridge |
| 04 | DevOps & Infra | Hardhat/Foundry, CI/CD Pipeline, Monitoring, Cloud Infrastructure |
| 05 | Blockchain Networks | Ethereum Mainnet, Arbitrum/Optimism (L2), zkSync/Polygon zkEVM, RPC Node Cluster |
| 06 | Security & Risk | Smart Contract Audit, Multi-Sig Governance, Bug Bounty, Risk Engine, Insurance Reserve |
- A modern web browser (Chrome, Firefox, Edge, Safari)
- Git for cloning
# Clone the repository
git clone https://github.com/Selvaragavanvsbec/DecentralizedFinance.git
# Navigate to the project
cd DecentralizedFinance
# Open in browser (any of these methods work)
# Option 1: Direct file open
start index.html # Windows
open index.html # macOS
xdg-open index.html # Linux
# Option 2: Use a local server (recommended)
npx serve .
# or
python -m http.server 8000The project is configured for automatic deployment to GitHub Pages via GitHub Actions. Any push to the main branch triggers deployment.
Manual deployment:
- Go to the repository on GitHub
- Navigate to Settings → Pages
- Ensure source is set to GitHub Actions
- Push to
main— deployment happens automatically
| Module | Description |
|---|---|
initNavigation() |
Sidebar nav with section switching and mobile toggle |
initWallet() |
Wallet connection flow (MetaMask, WalletConnect, Coinbase) |
initDashboard() |
Protocol stats, TVL chart, trending tokens, transactions |
initSwap() |
Token swap with price calculation and slippage settings |
initPools() |
Liquidity pool browser with filtering and sorting |
initStaking() |
Stake/unstake with lock periods and reward tracking |
populatePortfolio() |
Portfolio holdings, allocation chart, and history |
startPriceTicker() |
Live price simulation with random micro-fluctuations |
| Token | Symbol | Network |
|---|---|---|
| Ethereum | ETH | Mainnet |
| USD Coin | USDC | Mainnet |
| DeFi Token | DEFI | Mainnet |
| Arbitrum | ARB | L2 |
| Optimism | OP | L2 |
This project is open source and available under the MIT License.
Contributions are welcome! Please feel free to submit a Pull Request.
- Fork the project
- Create your feature branch (
git checkout -b feature/amazing-feature) - Commit your changes (
git commit -m 'Add amazing feature') - Push to the branch (
git push origin feature/amazing-feature) - Open a Pull Request
Built with ❤️ and Cyberpunk Aesthetics
⬡ DeFi Protocol — Decentralized Finance Dashboard v2.0