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);
});
});