ONEDeFi MCP Server

{% extends "base.html" %} {% block title %}Dashboard - ONEDeFi{% endblock %} {% block content %} <div class="container py-4"> <!-- Dashboard Header --> <div class="row mb-4"> <div class="col-12"> <div class="d-flex justify-content-between align-items-center"> <div> <h1 class="h3 mb-1"> <i data-feather="activity" class="me-2"></i> Dashboard </h1> <p class="text-muted mb-0">Monitor your DeFi operations and portfolio performance</p> </div> <div> <button class="btn btn-outline-secondary me-2" onclick="refreshDashboard()"> <i data-feather="refresh-cw" class="me-1"></i> Refresh </button> <div class="btn-group"> <button class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown"> <i data-feather="plus" class="me-1"></i> New Operation </button> <ul class="dropdown-menu"> <li><a class="dropdown-item" href="#" onclick="showSwapModal()"> <i data-feather="shuffle" class="me-2"></i>Token Swap </a></li> <li><a class="dropdown-item" href="#" onclick="showLendModal()"> <i data-feather="trending-up" class="me-2"></i>Lend Assets </a></li> <li><a class="dropdown-item" href="#" onclick="showFarmModal()"> <i data-feather="layers" class="me-2"></i>Yield Farm </a></li> </ul> </div> </div> </div> </div> </div> <!-- Status Cards --> <div class="row g-3 mb-4"> <div class="col-md-3"> <div class="card"> <div class="card-body"> <div class="d-flex align-items-center"> <div class="flex-shrink-0"> <i data-feather="dollar-sign" class="text-success"></i> </div> <div class="flex-grow-1 ms-3"> <div class="small text-muted">Total Portfolio Value</div> <div class="h5 mb-0" id="totalPortfolioValue">$0.00</div> </div> </div> </div> </div> </div> <div class="col-md-3"> <div class="card"> <div class="card-body"> <div class="d-flex align-items-center"> <div class="flex-shrink-0"> <i data-feather="trending-up" class="text-primary"></i> </div> <div class="flex-grow-1 ms-3"> <div class="small text-muted">Active Positions</div> <div class="h5 mb-0" id="activePositions">0</div> </div> </div> </div> </div> </div> <div class="col-md-3"> <div class="card"> <div class="card-body"> <div class="d-flex align-items-center"> <div class="flex-shrink-0"> <i data-feather="activity" class="text-warning"></i> </div> <div class="flex-grow-1 ms-3"> <div class="small text-muted">Pending Transactions</div> <div class="h5 mb-0" id="pendingTransactions">0</div> </div> </div> </div> </div> </div> <div class="col-md-3"> <div class="card"> <div class="card-body"> <div class="d-flex align-items-center"> <div class="flex-shrink-0"> <i data-feather="percent" class="text-info"></i> </div> <div class="flex-grow-1 ms-3"> <div class="small text-muted">Average APY</div> <div class="h5 mb-0" id="averageApy">0.00%</div> </div> </div> </div> </div> </div> </div> <!-- Main Content Grid --> <div class="row g-4"> <!-- Portfolio Chart --> <div class="col-lg-8"> <div class="card"> <div class="card-header"> <h5 class="card-title mb-0"> <i data-feather="pie-chart" class="me-2"></i> Portfolio Allocation </h5> </div> <div class="card-body"> <div id="portfolioChartContainer" style="height: 300px;"> <canvas id="portfolioChart"></canvas> </div> <div id="portfolioEmpty" class="text-center py-5" style="display: none;"> <i data-feather="inbox" class="text-muted mb-2" style="width: 48px; height: 48px;"></i> <p class="text-muted mb-0">No portfolio data available</p> <p class="text-muted small">Connect a wallet to view your portfolio</p> </div> </div> </div> </div> <!-- Quick Actions --> <div class="col-lg-4"> <div class="card"> <div class="card-header"> <h5 class="card-title mb-0"> <i data-feather="zap" class="me-2"></i> Quick Actions </h5> </div> <div class="card-body"> <div class="d-grid gap-2"> <button class="btn btn-outline-primary btn-sm" onclick="showSwapModal()"> <i data-feather="shuffle" class="me-2"></i> Token Swap </button> <button class="btn btn-outline-success btn-sm" onclick="showLendModal()"> <i data-feather="trending-up" class="me-2"></i> Lend Assets </button> <button class="btn btn-outline-warning btn-sm" onclick="showFarmModal()"> <i data-feather="layers" class="me-2"></i> Add Liquidity </button> <hr class="my-3"> <button class="btn btn-outline-secondary btn-sm" onclick="showWalletModal()"> <i data-feather="credit-card" class="me-2"></i> Manage Wallets </button> <button class="btn btn-outline-secondary btn-sm" onclick="showApiKeyModal()"> <i data-feather="key" class="me-2"></i> API Settings </button> </div> </div> </div> </div> </div> <!-- Recent Transactions --> <div class="row mt-4"> <div class="col-12"> <div class="card"> <div class="card-header"> <div class="d-flex justify-content-between align-items-center"> <h5 class="card-title mb-0"> <i data-feather="list" class="me-2"></i> Recent Transactions </h5> <button class="btn btn-outline-secondary btn-sm" onclick="loadTransactions()"> <i data-feather="refresh-cw" class="me-1"></i> Refresh </button> </div> </div> <div class="card-body"> <div id="transactionsTable"> <div class="table-responsive"> <table class="table table-hover"> <thead> <tr> <th>Type</th> <th>Blockchain</th> <th>Protocol</th> <th>Amount</th> <th>Status</th> <th>Time</th> <th>Actions</th> </tr> </thead> <tbody id="transactionsBody"> <!-- Transactions will be loaded here --> </tbody> </table> </div> </div> <div id="transactionsEmpty" class="text-center py-5" style="display: none;"> <i data-feather="inbox" class="text-muted mb-2" style="width: 48px; height: 48px;"></i> <p class="text-muted mb-0">No transactions found</p> <p class="text-muted small">Your transaction history will appear here</p> </div> </div> </div> </div> </div> <!-- Active Positions --> <div class="row mt-4"> <div class="col-12"> <div class="card"> <div class="card-header"> <div class="d-flex justify-content-between align-items-center"> <h5 class="card-title mb-0"> <i data-feather="layers" class="me-2"></i> Active DeFi Positions </h5> <button class="btn btn-outline-secondary btn-sm" onclick="loadPositions()"> <i data-feather="refresh-cw" class="me-1"></i> Refresh </button> </div> </div> <div class="card-body"> <div id="positionsTable"> <div class="table-responsive"> <table class="table table-hover"> <thead> <tr> <th>Protocol</th> <th>Type</th> <th>Asset</th> <th>Amount</th> <th>APY</th> <th>Rewards</th> <th>Actions</th> </tr> </thead> <tbody id="positionsBody"> <!-- Positions will be loaded here --> </tbody> </table> </div> </div> <div id="positionsEmpty" class="text-center py-5" style="display: none;"> <i data-feather="inbox" class="text-muted mb-2" style="width: 48px; height: 48px;"></i> <p class="text-muted mb-0">No active positions</p> <p class="text-muted small">Start lending or farming to see your positions here</p> </div> </div> </div> </div> </div> </div> <!-- Swap Modal --> <div class="modal fade" id="swapModal" tabindex="-1"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title"> <i data-feather="shuffle" class="me-2"></i> Token Swap </h5> <button type="button" class="btn-close" data-bs-dismiss="modal"></button> </div> <div class="modal-body"> <form id="swapForm"> <div class="mb-3"> <label class="form-label">Blockchain</label> <select class="form-select" name="blockchain" required> <option value="">Select blockchain</option> <option value="ethereum">Ethereum</option> <option value="polygon">Polygon</option> <option value="solana">Solana</option> </select> </div> <div class="mb-3"> <label for="swapWalletAddress" class="form-label"> <i data-feather="credit-card" class="me-1"></i> Wallet Address </label> <input type="text" class="form-control" id="swapWalletAddress" name="wallet_address" placeholder="0x..." required> </div> <div class="mb-3"> <label class="form-label">From Token</label> <input type="text" class="form-control" name="token_in" placeholder="Token contract address" required> </div> <div class="mb-3"> <label class="form-label">To Token</label> <input type="text" class="form-control" name="token_out" placeholder="Token contract address" required> </div> <div class="mb-3"> <label class="form-label">Amount</label> <input type="number" class="form-control" name="amount_in" step="any" required> </div> <div class="mb-3"> <label class="form-label">Slippage (%)</label> <input type="number" class="form-control" name="slippage" value="0.5" step="0.1" min="0" max="50"> </div> <button type="submit" class="btn btn-primary w-100">Execute Swap</button> </form> </div> </div> </div> </div> <!-- Lend Modal --> <div class="modal fade" id="lendModal" tabindex="-1"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title"> <i data-feather="trending-up" class="me-2"></i> Lend Assets </h5> <button type="button" class="btn-close" data-bs-dismiss="modal"></button> </div> <div class="modal-body"> <form id="lendForm"> <div class="mb-3"> <label class="form-label">Blockchain</label> <select class="form-select" name="blockchain" required> <option value="">Select blockchain</option> <option value="ethereum">Ethereum</option> <option value="polygon">Polygon</option> </select> </div> <div class="mb-3"> <label class="form-label">Protocol</label> <select class="form-select" name="protocol" required> <option value="">Select protocol</option> <option value="aave">Aave</option> <option value="compound">Compound</option> </select> </div> <div class="mb-3"> <label class="form-label">Wallet Address</label> <input type="text" class="form-control" name="wallet_address" required> </div> <div class="mb-3"> <label class="form-label">Token</label> <input type="text" class="form-control" name="token" placeholder="Token contract address" required> </div> <div class="mb-3"> <label class="form-label">Amount</label> <input type="number" class="form-control" name="amount" step="any" required> </div> <button type="submit" class="btn btn-success w-100">Lend Assets</button> </form> </div> </div> </div> </div> <!-- Farm Modal --> <div class="modal fade" id="farmModal" tabindex="-1"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title"> <i data-feather="layers" class="me-2"></i> Add Liquidity </h5> <button type="button" class="btn-close" data-bs-dismiss="modal"></button> </div> <div class="modal-body"> <form id="farmForm"> <div class="mb-3"> <label class="form-label">Blockchain</label> <select class="form-select" name="blockchain" required> <option value="">Select blockchain</option> <option value="ethereum">Ethereum</option> <option value="polygon">Polygon</option> <option value="solana">Solana</option> </select> </div> <div class="mb-3"> <label class="form-label">Protocol</label> <select class="form-select" name="protocol" required> <option value="">Select protocol</option> <option value="uniswap">Uniswap</option> <option value="quickswap">QuickSwap</option> <option value="raydium">Raydium</option> </select> </div> <div class="mb-3"> <label class="form-label">Wallet Address</label> <input type="text" class="form-control" name="wallet_address" required> </div> <div class="mb-3"> <label class="form-label">Pool ID</label> <input type="text" class="form-control" name="pool_id" placeholder="Liquidity pool identifier" required> </div> <div class="row"> <div class="col-md-6"> <div class="mb-3"> <label class="form-label">Token A</label> <input type="text" class="form-control" name="token_a" required> </div> </div> <div class="col-md-6"> <div class="mb-3"> <label class="form-label">Amount A</label> <input type="number" class="form-control" name="amount_a" step="any" required> </div> </div> </div> <div class="row"> <div class="col-md-6"> <div class="mb-3"> <label class="form-label">Token B</label> <input type="text" class="form-control" name="token_b" required> </div> </div> <div class="col-md-6"> <div class="mb-3"> <label class="form-label">Amount B</label> <input type="number" class="form-control" name="amount_b" step="any" required> </div> </div> </div> <button type="submit" class="btn btn-warning w-100">Add Liquidity</button> </form> </div> </div> </div> </div> {% endblock %} {% block extra_scripts %} <script> let portfolioChart = null; // Initialize dashboard document.addEventListener('DOMContentLoaded', function() { initializeDashboard(); feather.replace(); }); function initializeDashboard() { loadDashboardData(); setupEventListeners(); } function setupEventListeners() { // Swap form document.getElementById('swapForm').addEventListener('submit', handleSwapSubmit); // Lend form document.getElementById('lendForm').addEventListener('submit', handleLendSubmit); // Farm form document.getElementById('farmForm').addEventListener('submit', handleFarmSubmit); } function loadDashboardData() { // This would load real data from the API updatePortfolioStats(); loadPortfolioChart(); loadTransactions(); loadPositions(); } function updatePortfolioStats() { // In a real implementation, this would fetch actual data document.getElementById('totalPortfolioValue').textContent = '$0.00'; document.getElementById('activePositions').textContent = '0'; document.getElementById('pendingTransactions').textContent = '0'; document.getElementById('averageApy').textContent = '0.00%'; } function loadPortfolioChart() { const ctx = document.getElementById('portfolioChart').getContext('2d'); // Show empty state by default document.getElementById('portfolioChartContainer').style.display = 'none'; document.getElementById('portfolioEmpty').style.display = 'block'; // In a real implementation, this would load actual portfolio data // For now, we'll show an empty state } function loadTransactions() { const tbody = document.getElementById('transactionsBody'); tbody.innerHTML = ''; // Show empty state document.getElementById('transactionsTable').style.display = 'none'; document.getElementById('transactionsEmpty').style.display = 'block'; } function loadPositions() { const tbody = document.getElementById('positionsBody'); tbody.innerHTML = ''; // Show empty state document.getElementById('positionsTable').style.display = 'none'; document.getElementById('positionsEmpty').style.display = 'block'; } function refreshDashboard() { showToast('Refreshing dashboard...', 'info'); loadDashboardData(); feather.replace(); } function showSwapModal() { new bootstrap.Modal(document.getElementById('swapModal')).show(); } function showLendModal() { new bootstrap.Modal(document.getElementById('lendModal')).show(); } function showFarmModal() { new bootstrap.Modal(document.getElementById('farmModal')).show(); } function handleSwapSubmit(event) { event.preventDefault(); const formData = new FormData(event.target); const data = Object.fromEntries(formData.entries()); showToast('Swap functionality requires API key configuration', 'warning'); } function handleLendSubmit(event) { event.preventDefault(); const formData = new FormData(event.target); const data = Object.fromEntries(formData.entries()); showToast('Lending functionality requires API key configuration', 'warning'); } function handleFarmSubmit(event) { event.preventDefault(); const formData = new FormData(event.target); const data = Object.fromEntries(formData.entries()); showToast('Farming functionality requires API key configuration', 'warning'); } </script> {% endblock %}