SwitchFi
DEX FrontendFull StackA decentralized exchange frontend with token swaps, liquidity management, and real-time on-chain interactions. Built with Next.js, TailwindCSS, wagmi, and viem for a seamless Web3 user experience.
Overview
What it does: SwitchFi provides a clean, production-grade frontend for interacting with on-chain DEX contracts. Users can swap tokens, add and remove liquidity, and track their positions: all with wallet-native signing via wagmi and low-level EVM interactions via viem.
Token Swaps
Real-time price quotes with slippage tolerance, swap preview, and one-click execution via connected wallet.
Liquidity Management
Add and remove liquidity to pools with LP token tracking, share percentage display, and pool health indicators.
On-Chain Interactions
All actions write directly to smart contracts via viem: no intermediary, no API, pure on-chain execution.
Architecture
Frontend (Next.js)
- App Router architecture
- Server and client components
- TailwindCSS design system
- Responsive layout
Web3 Layer (wagmi + viem)
- wagmi for wallet connection
- viem for contract calls
- Multi-wallet support
- Network switching
State Management
- Real-time price feeds
- Position tracking
- Transaction status updates
- Optimistic UI updates
Contract Integration
- ERC-20 token approval flow
- Swap router integration
- Liquidity pair management
- Event-based UI sync
Core Features
Swap Interface
- Token selector with search
- Live price impact display
- Slippage tolerance setting
- Deadline configuration
Liquidity Interface
- Pool creation and joining
- LP token balance display
- Share percentage calculation
- Removal with preview
Tech Stack
Next.js
React framework with App Router
TailwindCSS
Utility-first styling
wagmi
React hooks for Web3
viem
TypeScript EVM client