Files
kashilo/js/components/app-footer.js

59 lines
1.8 KiB
JavaScript

import { t } from '../i18n.js'
import { getXmrRates, formatFiat } from '../services/currency.js'
class AppFooter extends HTMLElement {
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() {
const year = new Date().getFullYear()
this.innerHTML = /* html */`
<div class="footer-inner container">
<p class="footer-copyright">
&copy; ${year} dgray.io - <span data-i18n="footer.rights">${t('footer.rights')}</span>
</p>
<span class="xmr-rate" title="CoinGecko">1 XMR ≈ ...</span>
<nav class="footer-links">
<a href="#/about" data-i18n="footer.about">${t('footer.about')}</a>
<a href="#/privacy" data-i18n="footer.privacy">${t('footer.privacy')}</a>
<a href="#/terms" data-i18n="footer.terms">${t('footer.terms')}</a>
<a href="#/contact" data-i18n="footer.contact">${t('footer.contact')}</a>
</nav>
</div>
`
}
updateTranslations() {
this.render()
if (this.xmrRate) this.updateRateDisplay()
}
}
customElements.define('app-footer', AppFooter)