CME Prediction Markets MCP Server

{% extends "base.html" %} {% block title %}Contract Explorer - CME MCP Server{% endblock %} {% block content %} <div class="row"> <div class="col-lg-4"> <!-- Search Panel --> <div class="card"> <div class="card-header"> <h5 class="mb-0"> <i class="fas fa-search me-2"></i>Contract Search </h5> </div> <div class="card-body"> <form id="search-form"> <div class="mb-3"> <label for="contract-symbol" class="form-label">Contract Symbol:</label> <input type="text" class="form-control" id="contract-symbol" placeholder="e.g., BTC_95000_YES" required> <div class="form-text">Enter exact contract symbol or search term</div> </div> <button type="submit" class="btn btn-primary w-100"> <i class="fas fa-search me-2"></i>Search Contract </button> </form> <!-- Quick Contract Buttons --> <hr> <h6>Quick Access:</h6> <div class="d-grid gap-2"> <button class="btn btn-outline-primary btn-sm" onclick="searchContract('BTC_95000_YES')"> BTC $95K YES </button> <button class="btn btn-outline-primary btn-sm" onclick="searchContract('BTC_95000_NO')"> BTC $95K NO </button> <button class="btn btn-outline-primary btn-sm" onclick="searchContract('ETH_4000_YES')"> ETH $4K YES </button> </div> </div> </div> </div> <div class="col-lg-8"> <!-- Contract Details Panel --> <div class="card"> <div class="card-header"> <h5 class="mb-0"> <i class="fas fa-file-contract me-2"></i>Contract Details </h5> </div> <div class="card-body"> <div id="contract-details"> <div class="text-center text-muted py-5"> <i class="fas fa-search fa-3x mb-3"></i> <p>Search for a contract to view details</p> </div> </div> </div> </div> </div> </div> <!-- Contract Analysis --> <div class="row mt-4" id="analysis-section" style="display: none;"> <div class="col-12"> <div class="card"> <div class="card-header"> <h5 class="mb-0"> <i class="fas fa-chart-pie me-2"></i>Contract Analysis </h5> </div> <div class="card-body"> <div id="analysis-content"></div> </div> </div> </div> </div> {% endblock %} {% block scripts %} <script> $(document).ready(function() { $('#search-form').on('submit', async function(e) { e.preventDefault(); const symbol = $('#contract-symbol').val().trim(); if (symbol) { await searchContract(symbol); } }); }); async function searchContract(symbol) { $('#contract-symbol').val(symbol); const detailsDiv = document.getElementById('contract-details'); showLoading(detailsDiv); try { const response = await mcpClient.callTool('get_contract_info', { contract_symbol: symbol }); if (response.success) { displayContractDetails(response.result); showAnalysis(response.result); } else { showError(detailsDiv, response.error || 'Contract not found'); $('#analysis-section').hide(); } } catch (error) { showError(detailsDiv, 'Network error: ' + error.message); $('#analysis-section').hide(); } } function displayContractDetails(contract) { const statusBadge = contract.is_active ? '<span class="badge bg-success">Active</span>' : '<span class="badge bg-secondary">Inactive</span>'; const settledBadge = contract.is_settled ? '<span class="badge bg-info">Settled</span>' : '<span class="badge bg-warning">Pending</span>'; let html = ` <div class="row"> <div class="col-md-8"> <h4>${contract.symbol}</h4> <p class="lead text-muted">${contract.description}</p> <div class="row mb-3"> <div class="col-md-6"> <strong>Type:</strong> <span class="badge bg-primary">${contract.type}</span> </div> <div class="col-md-6"> <strong>Settlement Date:</strong> ${new Date(contract.settlement_date).toLocaleDateString()} </div> </div> <div class="row mb-3"> <div class="col-md-6"> <strong>Status:</strong> ${statusBadge} </div> <div class="col-md-6"> <strong>Settlement:</strong> ${settledBadge} </div> </div> ${contract.paired_contract ? ` <div class="mb-3"> <strong>Paired Contract:</strong> <button class="btn btn-outline-secondary btn-sm ms-2" onclick="searchContract('${contract.paired_contract}')"> ${contract.paired_contract} </button> </div> ` : ''} </div> <div class="col-md-4"> <div class="card bg-light"> <div class="card-body text-center"> <h6 class="card-title">Market Data</h6> ${contract.current_price !== null ? ` <div class="mb-2"> <small class="text-muted">Current Price</small> <div class="h5">${contract.current_price}</div> </div> ` : ''} ${contract.implied_probability !== null ? ` <div class="mb-2"> <small class="text-muted">Implied Probability</small> <div class="h6">${Math.round(contract.implied_probability * 100)}%</div> <div class="progress"> <div class="progress-bar" role="progressbar" style="width: ${contract.implied_probability * 100}%"> </div> </div> </div> ` : ''} ${contract.last_trade_time ? ` <div> <small class="text-muted">Last Trade</small> <div>${new Date(contract.last_trade_time).toLocaleString()}</div> </div> ` : '<div class="text-muted">No recent trades</div>'} </div> </div> </div> </div> `; document.getElementById('contract-details').innerHTML = html; } function showAnalysis(contract) { let html = ` <div class="row"> <div class="col-md-4"> <div class="card text-center"> <div class="card-body"> <i class="fas fa-calendar fa-2x text-primary mb-2"></i> <h6>Time to Settlement</h6> <div class="h5">${getDaysToSettlement(contract.settlement_date)} days</div> </div> </div> </div> <div class="col-md-4"> <div class="card text-center"> <div class="card-body"> <i class="fas fa-chart-line fa-2x text-success mb-2"></i> <h6>Market Activity</h6> <div class="h5">${contract.current_price !== null ? 'Active' : 'Inactive'}</div> </div> </div> </div> <div class="col-md-4"> <div class="card text-center"> <div class="card-body"> <i class="fas fa-balance-scale fa-2x text-warning mb-2"></i> <h6>Risk Level</h6> <div class="h5">${getRiskLevel(contract)}</div> </div> </div> </div> </div> <div class="mt-3"> <button class="btn btn-primary me-2" onclick="viewTradingData('${contract.symbol}')"> <i class="fas fa-chart-candlestick me-1"></i>View Trading Data </button> <button class="btn btn-info me-2" onclick="generateClaim('${contract.symbol}')"> <i class="fas fa-lightbulb me-1"></i>Generate Test Claim </button> </div> `; document.getElementById('analysis-content').innerHTML = html; $('#analysis-section').show(); } function getDaysToSettlement(settlementDate) { const today = new Date(); const settlement = new Date(settlementDate); const diffTime = settlement - today; const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24)); return Math.max(0, diffDays); } function getRiskLevel(contract) { if (!contract.implied_probability) return 'Unknown'; const prob = contract.implied_probability; if (prob < 0.2 || prob > 0.8) return 'High'; if (prob < 0.4 || prob > 0.6) return 'Medium'; return 'Low'; } function viewTradingData(symbol) { window.location.href = `/gui/trading-data?contract=${encodeURIComponent(symbol)}`; } function generateClaim(symbol) { const claims = [ `${symbol} will reach its settlement value`, `${symbol} has high trading volume today`, `${symbol} price has increased this week` ]; const randomClaim = claims[Math.floor(Math.random() * claims.length)]; window.location.href = `/gui/claim-verification?claim=${encodeURIComponent(randomClaim)}`; } </script> {% endblock %}