Vault Dashboard — Preview

📁 File Structure 21 files

vault-dashboard/ ├── LICENSE ├── README.md ├── package.json ├── security-notes.md ├── src/ │ ├── App.tsx │ ├── components/ │ │ ├── APYChart.tsx │ │ ├── FeeTracker.tsx │ │ ├── Layout.tsx │ │ ├── PositionCard.tsx │ │ ├── StrategyBreakdown.tsx │ │ ├── TVLChart.tsx │ │ └── VaultOverview.tsx │ ├── hooks/ │ │ ├── useVault.ts │ │ └── useVaultHistory.ts │ ├── lib/ │ │ ├── constants.ts │ │ └── format.ts │ ├── main.tsx │ └── styles/ │ └── globals.css ├── tailwind.config.js ├── tsconfig.json └── vite.config.ts

📖 Documentation Preview README excerpt

vault-dashboard

Real-time React dashboard for ERC-4626 vault monitoring — TVL, APY, fee accrual, and user positions.

Price: $12.99 | Store: vault-forge | Product #4

Overview

vault-dashboard is a production-ready React dashboard template for monitoring ERC-4626 yield vaults. It connects directly to any ERC-4626 vault contract via wagmi/viem, displays real-time on-chain data, and renders historical charts using Recharts.

Features

Feature	Description
TVL Overview	Total Value Locked with 24h delta
APY Tracking	Estimated annualized yield from share price growth
Fee Accrual	Management + performance fee cumulative tracking
User Positions	Wallet-connected position with PnL calculation
TVL Chart	90-day line chart of TVL history
APY Chart	30-day bar chart with average reference line
Strategy Breakdown	Pie chart of multi-strategy allocations
Dark Theme	CryptoForge branded dark UI with responsive layout

Screenshots

The dashboard renders four main views:

1. Dashboard — KPI cards (TVL, APY, share price, depositors) + TVL and APY charts

2. Fee Tracker — Management and performance fee configuration and accrual

3. My Position — Connected wallet's shares, current value, and estimated PnL

4. Strategies — Pie chart + table of strategy allocations with per-strategy APY

Installation


# Clone the product
cp -r vault-dashboard/ my-vault-dashboard/
cd my-vault-dashboard

# Install dependencies
npm install

# Start development server
npm run dev

The dashboard opens at http://localhost:3000.

Prerequisites

Node.js 18+
npm 9+ or pnpm 8+
An RPC endpoint (Alchemy, Infura, or public)

... continues with setup instructions, usage examples, and more.

📄 Code Sample .js preview

tailwind.config.js /** @type {import('tailwindcss').Config} */ export default { content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"], darkMode: "class", theme: { extend: { colors: { // CryptoForge brand palette — dark theme first cf: { bg: { DEFAULT: "#0D0D1A", card: "#13132B", hover: "#1A1A3E", input: "#0A0A15", }, primary: { DEFAULT: "#FF6B00", light: "#FF8A33", dark: "#CC5500", muted: "rgba(255, 107, 0, 0.15)", }, accent: { DEFAULT: "#FFD700", light: "#FFE44D", muted: "rgba(255, 215, 0, 0.15)", }, text: { DEFAULT: "#E8E8F0", muted: "#8888AA", dim: "#555577", }, success: "#00D97E", danger: "#FF4D6A", warning: "#FFB020", border: "#2A2A4A", }, }, fontFamily: { sans: ['"Inter"', "system-ui", "-apple-system", "sans-serif"], mono: ['"JetBrains Mono"', '"Fira Code"', "monospace"], }, boxShadow: { glow: "0 0 20px rgba(255, 107, 0, 0.15)", "glow-accent": "0 0 20px rgba(255, 215, 0, 0.15)", }, animation: { "pulse-slow": "pulse 3s ease-in-out infinite", }, }, }, # ... 3 more lines ...