// Track all transactions in a Map
const transactions = new Map();
client.on('transaction:queued', (ticket) => {
transactions.set(ticket.ticket_id, {
id: ticket.ticket_id,
status: 'queued',
message: ticket.message,
timestamp: new Date()
});
updateUI();
});
client.on('transaction:confirmed', (tx) => {
const existing = transactions.get(tx.ticket_id);
if (existing) {
existing.status = 'confirmed';
existing.block_height = tx.block_height;
existing.tx_hash = tx.tx_hash;
updateUI();
}
});
client.on('transaction:failed', (tx) => {
const existing = transactions.get(tx.ticket_id);
if (existing) {
existing.status = 'failed';
existing.error = tx.error;
updateUI();
}
});
function updateUI() {
const list = document.getElementById('transactions');
list.innerHTML = '';
transactions.forEach((tx, id) => {
const item = document.createElement('div');
item.className = `transaction ${tx.status}`;
item.innerHTML = `
<span class="id">${id}</span>
<span class="status">${tx.status}</span>
${tx.block_height ? `<span>Block: ${tx.block_height}</span>` : ''}
${tx.error ? `<span class="error">${tx.error}</span>` : ''}
`;
list.appendChild(item);
});
}