document.addEventListener('DOMContentLoaded', () => { const assetSelect = document.getElementById('asset-select'); const toggleButton = document.getElementById('day-night-toggle'); const body = document.body; // Parse query parameters from the URL const params = new URLSearchParams(window.location.search); let selectedAsset = params.get('asset'); // Function to populate the asset select dropdown (no await) function populateAssetSelect() { fetch('/api?cmd=getAssets') .then(response => { if (!response.ok) { throw new Error(`HTTP error! Status: ${response.status}`); } return response.json(); }) .then(data => { // Clear existing options assetSelect.innerHTML = ''; // Populate the dropdown with fetched data data.forEach(asset => { const option = document.createElement('option'); option.value = asset; // Assuming data is an array of strings option.textContent = 'KNOLIX / '+asset; assetSelect.appendChild(option); }); // Set the initial value if (selectedAsset) { // If URL has an asset parameter, use it assetSelect.value = selectedAsset; } }) .catch(error => { console.error('Error fetching assets:', error); assetSelect.innerHTML = ''; }); } // Populate the dropdown on page load populateAssetSelect(); if( selectedAsset===null ) { selectedAsset = 'TRX'; } // Handle asset selection change assetSelect.addEventListener('change', () => { const newAsset = assetSelect.value; window.location.href = `/?asset=${newAsset}`; }); // Toggle Night/Day Mode toggleButton.addEventListener('click', () => { body.classList.toggle('night-mode'); toggleButton.textContent = body.classList.contains('night-mode') ? '🌞' : '🌙'; }); // Buy / Sell buyButton.addEventListener('click', () => { const assetAddress = prompt(`Enter ${selectedAsset} address:`); if (assetAddress) { fetch(`/api.php`, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ action: 'buy', address: assetAddress, asset: selectedAsset }) }) .then(response => response.json()) .then(data => { if (data.address) { //alert(`Buy confirmed for ${selectedAsset} at address: ${assetAddress}`); document.getElementById('modalpay').style.display='block'; document.getElementById('in-name').innerHTML = 'KNOLIX'; document.getElementById('in-address').innerHTML = data.address; document.getElementById('in-qr').src = 'https://quickchart.io/qr?text='+data.address; document.getElementById('out-name').innerHTML = selectedAsset; document.getElementById('out-address').innerHTML = assetAddress; } if (data.err) { alert(data.err); } }) .catch(error => { console.error('Error:', error); alert(`An error occurred while validating ${selectedAsset} address.`); }); } else { alert(' ${selectedAsset} address is required to proceed.'); } }); sellButton.addEventListener('click', () => { const knolixAddress = prompt(`Enter KNOLIX address:`); if (knolixAddress) { fetch(`/api.php`, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ action: 'sell', address: knolixAddress, asset: selectedAsset }) }) .then(response => response.json()) .then(data => { if (data.address) { //alert(`Sell confirmed for ${selectedAsset} at address: ${knolixAddress}`); document.getElementById('modalpay').style.display='block'; document.getElementById('in-name').innerHTML = selectedAsset; document.getElementById('in-address').innerHTML = data.address; document.getElementById('in-qr').src = 'https://quickchart.io/qr?text='+data.address; document.getElementById('out-name').innerHTML = 'KNOLIX'; document.getElementById('out-address').innerHTML = knolixAddress; } if (data.err) { alert(data.err); } }) .catch(error => { console.error('Error:', error); alert(`An error occurred while validating KNOLIX address.`); }); } else { alert(' KNOLIX address is required to proceed.'); } }); const tradesTable = document.getElementById('trades-table').querySelector('tbody'); // Function to render trade rows function renderTrades(trades) { tradesTable.innerHTML = ''; // Clear the table trades.forEach(trade => { const row = document.createElement('tr'); row.innerHTML = ` ${trade.price.toFixed(8)} ${trade.impact} ${trade.amount_coin.toFixed(8)} ${trade.amount_knolix.toFixed(8)} ${trade.time} ${trade.type} `; tradesTable.appendChild(row); }); } // Function to fetch trade history async function fetchTradeHistory(asset) { try { const response = await fetch(`/api.php?asset=${asset}&cmd=getTradeHistory`); const trades = await response.json(); renderTrades(trades); // Reuse your renderTrades function } catch (error) { console.error('Error fetching trade history:', error); } } // Fetch trade history after DOMContentLoaded fetchTradeHistory(selectedAsset); // Function to fetch pooled data async function fetchPooledData(asset) { try { const response = await fetch(`/api.php?asset=${asset}&cmd=getReserves`); const data = await response.json(); // Parse the values and validate them const balanceCoin = parseFloat(data.balance_coin); const balanceKnolix = parseFloat(data.balance_knolix); const usd_price = parseFloat(data.usd_price); if (isNaN(balanceCoin) || isNaN(balanceKnolix)) { throw new Error('Invalid data received: balance_coin or balance_knolix is not a number.'); } // Update DOM elements with the data document.getElementById('pooled-asset').textContent = balanceCoin.toFixed(8); document.getElementById('pooled-knolix').textContent = balanceKnolix.toFixed(8); document.getElementById('effective-price').textContent = `${(balanceKnolix / balanceCoin).toFixed(8)} KNOLIX`; document.getElementById('effective-usd-price').textContent = ((1/(balanceKnolix / balanceCoin))*usd_price).toFixed(2)+' USD'; } catch (error) { console.error('Error fetching pooled data:', error); } } // Call the function after DOMContentLoaded with the selected asset fetchPooledData(selectedAsset); // Function to fetch price_graph async function fetch_price_graph(asset) { try { const response = await fetch(`/api.php?asset=${asset}&cmd=price_graph`); const price_data = await response.json(); // Create chart with responsive layout const chart = LightweightCharts.createChart(document.getElementById('chart'), { layout: { background: { color: '#000' }, textColor: '#fff' }, grid: { vertLines: { color: '#333' }, horzLines: { color: '#333' } }, timeScale: { timeVisible: true, secondsVisible: false } }); // Add candlestick series with price scale formatting const candleSeries = chart.addCandlestickSeries({ upColor: '#26a69a', downColor: '#ef5350', borderVisible: false, priceScaleId: 'right', // Explicitly attach to right scale priceFormat: { type: 'price', precision: 8, // Show 8 decimals minMove: 0.00000001 // Smallest price movement (1e-8) } }); // Format data for chart (using date strings directly) const formattedData = price_data.map(item => ({ time: item.time, open: item.open, high: item.high, low: item.low, close: item.close })); // Set data and auto-scale candleSeries.setData(formattedData); chart.timeScale().fitContent(); // Handle window resizing window.addEventListener('resize', () => { chart.applyOptions({ width: document.getElementById('chart').clientWidth }); }); } catch (error) { console.error('Error fetching price_graph:', error); } } // Fetch trade history after DOMContentLoaded fetch_price_graph(selectedAsset); function amm_a( x, y, a) { k = x * y; return y - k / ( x + a ); } document.getElementById('buy-amount-sent').addEventListener('change', () => { let a = parseFloat(document.getElementById('buy-amount-sent').value); let x = parseFloat(document.getElementById('pooled-knolix').textContent); let y = parseFloat(document.getElementById('pooled-asset').textContent); let received = amm_a( x, y, a*0.99); document.getElementById('buy-amount-received').value = received.toFixed(8); }); document.getElementById('sell-amount-sent').addEventListener('change', () => { let a = parseFloat(document.getElementById('sell-amount-sent').value); let x = parseFloat(document.getElementById('pooled-asset').textContent); let y = parseFloat(document.getElementById('pooled-knolix').textContent); let received = amm_a( x, y, a*0.99); document.getElementById('sell-amount-received').value = received.toFixed(8); }); });