diff --git a/js/components/app-footer.js b/js/components/app-footer.js index 23561a7..f6a1f4d 100644 --- a/js/components/app-footer.js +++ b/js/components/app-footer.js @@ -4,28 +4,43 @@ import { getXmrRates, formatFiat } from '../services/currency.js' class AppFooter extends HTMLElement { constructor() { super() - this.xmrRate = null + this.rates = null + this.handleCurrencyChange = this.handleCurrencyChange.bind(this) } async connectedCallback() { this.render() - await this.loadXmrRate() + await this.loadXmrRates() + window.addEventListener('currency-changed', this.handleCurrencyChange) } - async loadXmrRate() { + disconnectedCallback() { + window.removeEventListener('currency-changed', this.handleCurrencyChange) + } + + handleCurrencyChange() { + this.updateRateDisplay() + } + + getCurrency() { + return localStorage.getItem('dgray_currency') || 'USD' + } + + async loadXmrRates() { try { - const rates = await getXmrRates() - this.xmrRate = rates.EUR + this.rates = await getXmrRates() this.updateRateDisplay() } catch (e) { - console.error('Failed to load XMR rate:', e) + console.error('Failed to load XMR rates:', e) } } updateRateDisplay() { const rateEl = this.querySelector('.xmr-rate') - if (rateEl && this.xmrRate) { - rateEl.textContent = `1 XMR ≈ ${formatFiat(this.xmrRate, 'EUR')}` + if (rateEl && this.rates) { + const currency = this.getCurrency() + const rate = this.rates[currency] || this.rates.USD + rateEl.textContent = `1 XMR ≈ ${formatFiat(rate, currency)}` rateEl.classList.add('loaded') } } @@ -51,7 +66,7 @@ class AppFooter extends HTMLElement { updateTranslations() { this.render() - if (this.xmrRate) this.updateRateDisplay() + if (this.rates) this.updateRateDisplay() } } diff --git a/js/components/listing-card.js b/js/components/listing-card.js index 9d112c8..69fe2ef 100644 --- a/js/components/listing-card.js +++ b/js/components/listing-card.js @@ -15,6 +15,7 @@ class ListingCard extends HTMLElement { this.isFavorite = false this.rates = null this.isOwner = false + this.handleCurrencyChange = this.handleCurrencyChange.bind(this) } async connectedCallback() { @@ -23,6 +24,16 @@ class ListingCard extends HTMLElement { await this.checkOwnership() this.render() this.setupEventListeners() + window.addEventListener('currency-changed', this.handleCurrencyChange) + } + + disconnectedCallback() { + window.removeEventListener('currency-changed', this.handleCurrencyChange) + } + + handleCurrencyChange() { + this.render() + this.setupEventListeners() } async checkOwnership() { diff --git a/js/components/pages/page-create.js b/js/components/pages/page-create.js index fcf9388..6ddf602 100644 --- a/js/components/pages/page-create.js +++ b/js/components/pages/page-create.js @@ -2,7 +2,7 @@ import { t, i18n } from '../../i18n.js' import { router } from '../../router.js' import { auth } from '../../services/auth.js' import { directus } from '../../services/directus.js' -import { SUPPORTED_CURRENCIES } from '../../services/currency.js' +import { SUPPORTED_CURRENCIES, getDisplayCurrency } from '../../services/currency.js' import { escapeHTML } from '../../utils/helpers.js' import '../location-picker.js' import '../pow-captcha.js' @@ -25,11 +25,16 @@ class PageCreate extends HTMLElement { } getEmptyFormData() { + // Use user's preferred currency from settings as default + const defaultCurrency = getDisplayCurrency() + // Map display currencies to listing currencies (XMR not for fiat listings) + const currency = ['EUR', 'USD', 'CHF'].includes(defaultCurrency) ? defaultCurrency : 'EUR' + return { title: '', description: '', price: '', - currency: 'EUR', + currency, price_mode: 'fiat', price_type: 'fixed', category: '', diff --git a/js/components/pages/page-listing.js b/js/components/pages/page-listing.js index eae387a..901b6a5 100644 --- a/js/components/pages/page-listing.js +++ b/js/components/pages/page-listing.js @@ -17,6 +17,7 @@ class PageListing extends HTMLElement { this.isFavorite = false this.rates = null this.isOwner = false + this.handleCurrencyChange = this.handleCurrencyChange.bind(this) } connectedCallback() { @@ -24,10 +25,16 @@ class PageListing extends HTMLElement { this.render() this.loadListing() this.unsubscribe = i18n.subscribe(() => this.render()) + window.addEventListener('currency-changed', this.handleCurrencyChange) } disconnectedCallback() { if (this.unsubscribe) this.unsubscribe() + window.removeEventListener('currency-changed', this.handleCurrencyChange) + } + + handleCurrencyChange() { + this.render() } async loadListing() { diff --git a/js/components/pages/page-settings.js b/js/components/pages/page-settings.js index ee6952a..f4ef13d 100644 --- a/js/components/pages/page-settings.js +++ b/js/components/pages/page-settings.js @@ -50,6 +50,12 @@ class PageSettings extends HTMLElement { i18n.setLocale(e.target.value) }) + // Currency select + this.querySelector('#currency-select')?.addEventListener('change', (e) => { + this.setCurrency(e.target.value) + this.showToast(t('settings.currencyChanged')) + }) + // Clear favorites this.querySelector('#clear-favorites')?.addEventListener('click', () => { if (confirm(t('settings.confirmClearFavorites'))) { @@ -93,6 +99,15 @@ class PageSettings extends HTMLElement { return localStorage.getItem('theme') || 'system' } + getCurrentCurrency() { + return localStorage.getItem('dgray_currency') || 'USD' + } + + setCurrency(currency) { + localStorage.setItem('dgray_currency', currency) + window.dispatchEvent(new CustomEvent('currency-changed', { detail: { currency } })) + } + showToast(message) { const existing = document.querySelector('.settings-toast') existing?.remove() @@ -152,6 +167,15 @@ class PageSettings extends HTMLElement { + +