diff --git a/css/components.css b/css/components.css index 862c151..b38ee99 100644 --- a/css/components.css +++ b/css/components.css @@ -309,6 +309,17 @@ app-footer .footer-inner { gap: var(--space-md); } +app-footer .xmr-rate { + font-size: var(--font-size-xs); + color: var(--color-text-muted); + opacity: 0; + transition: opacity var(--transition-fast); +} + +app-footer .xmr-rate.loaded { + opacity: 1; +} + app-footer .footer-links { display: flex; gap: var(--space-md); diff --git a/js/components/app-footer.js b/js/components/app-footer.js index 3989e16..23561a7 100644 --- a/js/components/app-footer.js +++ b/js/components/app-footer.js @@ -1,8 +1,33 @@ import { t } from '../i18n.js' +import { getXmrRates, formatFiat } from '../services/currency.js' class AppFooter extends HTMLElement { - connectedCallback() { + constructor() { + super() + this.xmrRate = null + } + + async connectedCallback() { this.render() + await this.loadXmrRate() + } + + async loadXmrRate() { + try { + const rates = await getXmrRates() + this.xmrRate = rates.EUR + this.updateRateDisplay() + } catch (e) { + console.error('Failed to load XMR rate:', e) + } + } + + updateRateDisplay() { + const rateEl = this.querySelector('.xmr-rate') + if (rateEl && this.xmrRate) { + rateEl.textContent = `1 XMR ≈ ${formatFiat(this.xmrRate, 'EUR')}` + rateEl.classList.add('loaded') + } } render() { @@ -13,6 +38,7 @@ class AppFooter extends HTMLElement {
+ 1 XMR ≈ ...