feat: Monero coin favicon with paid indicator

- Official Monero coin logo as SVG favicon
- Dynamic green dot badge on favicon when invoice is paid
- Paid status shown both in page content and browser tab
This commit is contained in:
Alexander Schmidt
2026-03-25 09:52:22 +01:00
parent 270a4a79a6
commit cf1b06b5c9
3 changed files with 41 additions and 5 deletions

40
app.js
View File

@@ -550,6 +550,7 @@
})
});
}
showPaidStatus({ amount: xmrAmount, tx_hash: txHash });
} else {
proofResult.className = 'proof-result active error';
proofResult.textContent = I18n.t('proof_no_match');
@@ -567,12 +568,43 @@
.then(function (res) { return res.json(); })
.then(function (data) {
if (data.verified) {
paymentStatus.className = 'payment-status paid';
paymentStatus.innerHTML = '<div class="paid-badge">' + I18n.t('status_paid') +
'</div><div class="paid-detail">' + data.amount.toFixed(6) + ' XMR — TX ' +
data.tx_hash.substring(0, 8) + '...</div>';
showPaidStatus(data);
}
})
.catch(function () {});
}
function showPaidStatus(data) {
paymentStatus.className = 'payment-status paid';
paymentStatus.innerHTML = '<div class="paid-badge">' + I18n.t('status_paid') +
'</div><div class="paid-detail">' + data.amount.toFixed(6) + ' XMR — TX ' +
data.tx_hash.substring(0, 8) + '...</div>';
setPaidFavicon();
}
function setPaidFavicon() {
var canvas = document.createElement('canvas');
canvas.width = 32;
canvas.height = 32;
var ctx = canvas.getContext('2d');
// Draw Monero logo
var img = new Image();
img.onload = function () {
ctx.drawImage(img, 0, 0, 32, 32);
// Green dot (bottom-right)
ctx.beginPath();
ctx.arc(25, 25, 7, 0, Math.PI * 2);
ctx.fillStyle = '#fff';
ctx.fill();
ctx.beginPath();
ctx.arc(25, 25, 5.5, 0, Math.PI * 2);
ctx.fillStyle = '#4caf50';
ctx.fill();
// Set favicon
var link = document.getElementById('favicon');
link.href = canvas.toDataURL('image/png');
};
img.src = 'favicon.svg';
}
})();