<!DOCTYPE html>
<html lang="en" class="dark">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Configuration - Polymarket MCP Dashboard</title>
<link rel="stylesheet" href="/static/css/style.css">
</head>
<body>
<nav class="navbar">
<div class="container">
<div class="nav-brand">
<h1>Polymarket MCP</h1>
</div>
<ul class="nav-menu">
<li><a href="/">Dashboard</a></li>
<li><a href="/config" class="active">Configuration</a></li>
<li><a href="/markets">Markets</a></li>
<li><a href="/monitoring">Monitoring</a></li>
</ul>
</div>
</nav>
<main class="container main-content">
<h1>Configuration Management</h1>
{% if config %}
<!-- Wallet Information -->
<section class="section">
<div class="card">
<div class="card-header">
<h3>Wallet Information</h3>
</div>
<div class="card-body">
<div class="info-grid">
<div class="info-item">
<strong>Address:</strong>
<span class="mono">{{ config.wallet.address }}</span>
</div>
<div class="info-item">
<strong>Chain ID:</strong>
<span>{{ config.wallet.chain_id }} ({{ "Polygon Mainnet" if config.wallet.chain_id == 137 else "Amoy Testnet" }})</span>
</div>
<div class="info-item">
<strong>API Credentials:</strong>
<span class="{% if config.has_api_credentials %}text-success{% else %}text-warning{% endif %}">
{{ "Configured" if config.has_api_credentials else "Not Configured (Read-Only Mode)" }}
</span>
</div>
</div>
</div>
</div>
</section>
<!-- Safety Limits Configuration -->
<section class="section">
<h2>Safety Limits</h2>
<div class="card">
<div class="card-body">
<form id="config-form">
<div class="form-group">
<label for="max_order_size">Max Order Size (USD)</label>
<input type="range" id="max_order_size" name="max_order_size_usd"
min="100" max="10000" step="100"
value="{{ config.safety_limits.max_order_size_usd }}"
oninput="updateRangeValue('max_order_size', this.value)">
<span class="range-value" id="max_order_size_value">${{ config.safety_limits.max_order_size_usd }}</span>
</div>
<div class="form-group">
<label for="max_exposure">Max Total Exposure (USD)</label>
<input type="range" id="max_exposure" name="max_total_exposure_usd"
min="1000" max="50000" step="1000"
value="{{ config.safety_limits.max_total_exposure_usd }}"
oninput="updateRangeValue('max_exposure', this.value)">
<span class="range-value" id="max_exposure_value">${{ config.safety_limits.max_total_exposure_usd }}</span>
</div>
<div class="form-group">
<label for="max_position">Max Position Per Market (USD)</label>
<input type="range" id="max_position" name="max_position_size_per_market"
min="500" max="20000" step="500"
value="{{ config.safety_limits.max_position_size_per_market }}"
oninput="updateRangeValue('max_position', this.value)">
<span class="range-value" id="max_position_value">${{ config.safety_limits.max_position_size_per_market }}</span>
</div>
<div class="form-group">
<label for="min_liquidity">Min Liquidity Required (USD)</label>
<input type="range" id="min_liquidity" name="min_liquidity_required"
min="1000" max="100000" step="1000"
value="{{ config.safety_limits.min_liquidity_required }}"
oninput="updateRangeValue('min_liquidity', this.value)">
<span class="range-value" id="min_liquidity_value">${{ config.safety_limits.min_liquidity_required }}</span>
</div>
<div class="form-group">
<label for="max_spread">Max Spread Tolerance (%)</label>
<input type="range" id="max_spread" name="max_spread_tolerance"
min="0.01" max="0.20" step="0.01"
value="{{ config.safety_limits.max_spread_tolerance }}"
oninput="updateRangeValue('max_spread', (this.value * 100).toFixed(0))">
<span class="range-value" id="max_spread_value">{{ (config.safety_limits.max_spread_tolerance * 100)|int }}%</span>
</div>
<hr>
<h3>Trading Controls</h3>
<div class="form-group">
<label class="checkbox-label">
<input type="checkbox" name="enable_autonomous_trading"
{% if config.trading_controls.enable_autonomous_trading %}checked{% endif %}>
Enable Autonomous Trading
</label>
<p class="help-text">Allow trading without manual confirmation for each order</p>
</div>
<div class="form-group">
<label for="confirmation_threshold">Require Confirmation Above (USD)</label>
<input type="range" id="confirmation_threshold" name="require_confirmation_above_usd"
min="100" max="5000" step="100"
value="{{ config.trading_controls.require_confirmation_above_usd }}"
oninput="updateRangeValue('confirmation_threshold', this.value)">
<span class="range-value" id="confirmation_threshold_value">${{ config.trading_controls.require_confirmation_above_usd }}</span>
</div>
<div class="form-group">
<label class="checkbox-label">
<input type="checkbox" name="auto_cancel_on_large_spread"
{% if config.trading_controls.auto_cancel_on_large_spread %}checked{% endif %}>
Auto-Cancel on Large Spread
</label>
<p class="help-text">Automatically cancel orders if spread exceeds tolerance</p>
</div>
<div class="button-group">
<button type="submit" class="btn btn-primary">Save Configuration</button>
<button type="button" class="btn btn-secondary" onclick="resetForm()">Reset</button>
<button type="button" class="btn btn-secondary" onclick="testConfig()">Test Configuration</button>
</div>
</form>
</div>
</div>
</section>
{% else %}
<div class="card">
<div class="card-body text-center">
<p class="text-warning">Configuration not loaded. Please check your .env file.</p>
<button class="btn btn-primary" onclick="location.reload()">Retry</button>
</div>
</div>
{% endif %}
</main>
<footer class="footer">
<div class="container">
<p>© 2025 Polymarket MCP Dashboard</p>
</div>
</footer>
<script src="/static/js/app.js"></script>
<script>
function updateRangeValue(id, value) {
document.getElementById(`${id}_value`).textContent = value.toString().includes('.') ? value : `$${value}`;
}
document.getElementById('config-form').addEventListener('submit', async (e) => {
e.preventDefault();
const formData = new FormData(e.target);
const config = {
max_order_size_usd: parseFloat(formData.get('max_order_size_usd')),
max_total_exposure_usd: parseFloat(formData.get('max_total_exposure_usd')),
max_position_size_per_market: parseFloat(formData.get('max_position_size_per_market')),
min_liquidity_required: parseFloat(formData.get('min_liquidity_required')),
max_spread_tolerance: parseFloat(formData.get('max_spread_tolerance')),
enable_autonomous_trading: formData.get('enable_autonomous_trading') === 'on',
require_confirmation_above_usd: parseFloat(formData.get('require_confirmation_above_usd')),
auto_cancel_on_large_spread: formData.get('auto_cancel_on_large_spread') === 'on',
};
try {
showNotification('Saving configuration...', 'info');
const response = await fetch('/api/config', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify(config),
});
const result = await response.json();
if (response.ok) {
showNotification(result.message, 'success');
} else {
showNotification('Failed to save: ' + result.detail, 'error');
}
} catch (error) {
showNotification('Save failed: ' + error.message, 'error');
}
});
function resetForm() {
if (confirm('Reset configuration to current values?')) {
location.reload();
}
}
async function testConfig() {
showNotification('Testing configuration...', 'info');
try {
const response = await fetch('/api/test-connection');
const data = await response.json();
if (data.success) {
showNotification('Configuration test successful!', 'success');
} else {
showNotification('Test failed: ' + data.error, 'error');
}
} catch (error) {
showNotification('Test failed: ' + error.message, 'error');
}
}
</script>
</body>
</html>
