Umschalten von Währungen in der Benutzeroberfläche

1) Grundsätze

1. Erst Sinn, dann UI. Trennen Sie die Kontowährung (Rechnungslegungswahrheit) von der Anzeigewährung (Bequemlichkeit) und der Transaktionswährung (tatsächliche Währungsumrechnung).
2. Null Zweideutigkeit. Code + Symbol bei Verwechslungsgefahr anzeigen ('US $', 'CA $', 'MXN','R $'). Fügen Sie ₴/₸/₼ immer den Code im Detail hinzu.
3. Ehrlichkeit der Kurse. Man sieht: Kursquelle, Zeitpunkt der letzten Aktualisierung, ob Provisionen/Spread enthalten sind.
4. Stabilität der Eingabe. Die Umschaltung der Währung darf ohne ausdrückliche Zustimmung (insbesondere bei Wett-/Einzahlungsformularen) nicht zu den Eingabewerten „springen“.
5. Lokalisierung von Formaten. Trennzeichen, Leerzeichen, Währungszeichen - nach Standort des Benutzers; Genauigkeit nach Währung.

2) Schaltmodelle

Anzeige (nur Display): Alle Berechnungen bleiben in der Kontowährung, die UI zeigt den Gegenwert in der gewählten Währung an. Verwenden Sie für Katalog, Profil, Analyse.
Hybrid (Soft Convert): Anzeige in der gewählten Währung + Bestätigung der Transaktion in der Kontowährung (beide anzeigen).
Operativ (hard convert): Der Benutzer ändert die Transaktionswährung (Einzahlung/Auszahlung/Wette). Wir brauchen explizite Kurse, Provisionen, Fixierzeiten.

Die Regel: Standardmäßig ist display-only und die „harte“ Conversion nur in den entsprechenden Streams (Kasse, Auszahlung, Überweisung) enthalten.

3) Kontrollen und Platzierung

Währungsumschalter in der Kopf-/Profilleiste (Symbol „₴/€/$“ oder Währungscode).
Selektor: Suche nach Code/Name/Symbol; ausgewählte/häufige Währungen - von oben.
Innerhalb der Formulare (Einzahlung/Wette): kompakter Selektor rechts neben dem Betragsfeld, neben dem Hinweis „≈ Äquivalent in XXX“.
Mobiles Muster: unteres Blatt mit Liste und Eingabe zum Filtern.

html
<button aria-haspopup="listbox" aria-expanded="false" class="currency-switch">UAH</button>
<ul role="listbox" class="currency-menu" hidden>
<li role="option" aria-selected="true">UAH — ₴</li>
<li role="option">USD — US$</li>
<li role="option">EUR — €</li>
<li role="option">TRY — ₺</li>
</ul>

4) Formatierung und Genauigkeit

Kleinere Einheiten: Halten Sie die Beträge in ganzen Mindesteinheiten (Cent, Cent, Satoshi).

• 0: JPY, KRW, CLP
• 2: USD, EUR, UAH, TRY
• 3 +: einige Währungen ZAR (2), KWD (3), Krypto (4-8)
• Kryptowährungen: Zeigen Sie bis zu 8 Zeichen (dynamische Genauigkeit, aber mit einer unteren Grenze für die Lesbarkeit).
• Tabellarische Zahlen: 'font-variant-numeric: tabular-nums;' zum Ausrichten der Spalten.

js const fmt = (amountMinor, currency, locale) => {
const fraction = { JPY:0, KRW:0, KWD:3 }[currency]?? 2;
return new Intl.NumberFormat(locale, { style:'currency', currency, minimumFractionDigits:fraction, maximumFractionDigits:fraction })
.format(amountMinor / 10fraction);
};
fmt(200000, 'UAH', 'uk-UA'); // 2 000,00 ₴

5) Kurse und Updates

Quelle: Kursanbieter fixieren (internes Pricing/Bank/FX-API).
Cache: Aktualisieren Sie Kurse mit angemessener Häufigkeit (z. B. alle 60-300 Sekunden) + inkrementelle Updates auf Abruf.
Fixierzeit: Zeigen Sie' aktualisiert N min zurück 'und Fixierzeit beim Abschluss der Operation.
Spread/Provision: Zeigen Sie die explizite Zeile: "Kurs 1 USD = 36,60 UAH (Spread 1 enthalten. 5%)».
Rundungen: Bank- oder regulär - wählen Sie eine aus und fixieren Sie sie in der Richtlinie.

6) UX Text und Erklärungen

Das Äquivalent: „≈ 52,10 €“ - neben dem Betrag in gedämpfter Farbe, wird in Echtzeit aktualisiert.
Rechtliche Vorbehalte: „Der tatsächliche Kurs und die Provision werden im Bestätigungsschritt fixiert“.
Lange Codes: Verwenden Sie Tooltips/sekundäre Zeichenfolge: „US $ - US Dollar“.
Konvertierung im Warenkorb: Ändern Sie nicht „Gesamt“ ohne Erklärung; Zeigen Sie die Zeile der Umrechnung an.

7) Verfügbarkeit (A11y)

'role =' listbox/option 'am Währungswähler.
Tastaturunterstützung: Pfeile, Enter, Type-ahead nach Code/Name.
Lesung für SR: „Anzeigewährung: UAH - Ukrainische Hrywnja“.
Farbe ≠ der einzige Bedeutungsträger (es gibt immer Code/Text).
RTL: Zahlen/Codes in 'dir =' ltr''innerhalb der arabischen Zeilen.

8) Performance und Caching

Kurse - im Speicher + localStorage mit TTL (z.B. 5 min).
Batch-Updates: Äquivalente in Stapeln neu berechnen (requestAnimationFrame, debunce 100-200 ms).
Lösen Sie bei Kursschwankungen <Schwelle (z.B. 0,1%) keinen zusätzlichen Listenrender aus.

9) Die Besonderheiten von iGaming

Kontowährung - Basis-Reporting (Einzahlungen, Guthaben, Historie).
Einsatzwährung: normalerweise = Kontowährung; Wenn ein anderer gesetzt ist, zeigen Sie einen doppelten Block: „X XXX in USD (≈ Y YYY in UAH) abgeschrieben“.
Fixierung bei der Berechnung: Gewinne werden zum Zeitpunkt der Berechnung zum Kurs umgerechnet, nicht Wetten - dies sollte in den Details des Coupons/der Geschichte sichtbar sein.
Einzahlung/Auszahlung: Kurs und Provision der PSP/Bank - in einer separaten Zeile; ETA nach Methode.
Verantwortungsvolle Spiellimits: werden in der Währung des Kontos festgelegt; Wenn der UI in einer anderen Währung ist, zeigen Sie beide Werte an.
Turniere und Preise: Die Währung des Preispools wird festgelegt; wenn das Äquivalent angezeigt wird - indikativ, markiert.

10) Antipatterns

„Magische“ Wertänderung im Eingabefeld beim Währungswechsel - ohne ausdrückliche Zustimmung.
Verwenden Sie ein einzelnes „$“ -Zeichen ohne Ländercode.
Versteckte Kommission auf dem Laufenden (keine Zeile über Spread).
Mischen Sie den Ort und die Währung (formatieren Sie mit 'en-US' für 'UAH').
Harte Genauigkeit von „2 Zeichen“ für JPY/KRW oder „8 Zeichen“ für alle Kryptowährungen.
Neuberechnung historischer Transaktionen „rückwirkend“ zum aktuellen Wechselkurs - ohne Markierung „Neuberechnung“.

11) Design-System-Token (Beispiel)

json
{
"currency": {
"default": "UAH",
"displayList": ["UAH","USD","EUR","TRY","PLN","BRL","MXN"],
"fractions": { "JPY":0, "KRW":0, "KWD":3, "BTC":8 },
"showCodeWithSymbol": ["USD","CAD","AUD","NZD"],
"approxPrefix": "≈ "
},
"format": {
"tabularNums": true,
"grouping": "locale",
"negative": "−"
},
"fx": {
"ttlSec": 300,
"changeThresholdPct": 0.1,
"showSpread": true
}
}

12) Snippets

Währungsumschalter (Reaktion, Kontext + Intl)

tsx import { createContext, useContext, useState, useMemo } from 'react';

type Cur = 'UAH'    'USD'    'EUR'    'TRY';
const CurrencyCtx = createContext<{cur:Cur,set:(c:Cur)=>void, rate:(from:Cur,to:Cur)=>number}>({cur:'UAH',set:()=>{},rate:()=>1});

export function CurrencyProvider({children}:{children:React.ReactNode}){
const [cur, set] = useState<Cur>('UAH');
// fx: получить из кэша/апи; здесь — заглушка const table = { UAH:{USD:0.027,EUR:0.025,TRY:0.89,UAH:1}, USD:{UAH:36.6,EUR:0.93,TRY:33.0,USD:1}, EUR:{UAH:39.2,USD:1.07,TRY:35.4,EUR:1}, TRY:{UAH:1.12,USD:0.030,EUR:0.028,TRY:1} };
const rate = (from:Cur,to:Cur)=> table[from][to];
const value = useMemo(()=>({cur, set, rate}),[cur]);
return <CurrencyCtx.Provider value={value}>{children}</CurrencyCtx.Provider>;
}

export function useCurrency(){ return useContext(CurrencyCtx); }

export function Money({minor, iso}:{minor:number, iso:Cur}){
const { cur, rate } = useCurrency();
const fraction = { JPY:0, KRW:0, KWD:3 }[cur as any]?? 2;
const v = (minor/10fraction) rate(iso, cur);
return <span style={{fontVariantNumeric:'tabular-nums'}}>{new Intl.NumberFormat(undefined,{style:'currency',currency:cur, minimumFractionDigits:fraction, maximumFractionDigits:fraction}).format(v)}</span>;
}

Doppelte Anzeige (operative Umstellung)

html
<div class="amount">
<label>Сумма депозита</label>
<div class="row">
<input type="number" inputmode="decimal" aria-describedby="fxnote">
<select aria-label="Валюта операции">
<option>USD</option><option>EUR</option><option>UAH</option>
</select>
</div>
<small id="fxnote">≈ 2 000,00 ₴ · Курс будет зафиксирован на следующем шаге</small>
</div>

13) Metriken

FX-Latenz: Zeit vom Währungswechsel bis zur Aktualisierung aller Felder (Ziel ≤ 150 ms).
Korrekturrate: Anteil der Zugriffe auf den Sapport für „falsche Beträge“ (<0,2%).
Anzeige vs Konto mismatch: Ereignisse, bei denen der Benutzer Währungen verwechselt (wir reduzieren mit Hinweisen).
CTR der Kurshinweise: Klicks auf „Mehr zum Kurs/Provision“.
Das Abandon der Kasse bei der Umstellung: der Anteil der Ausfälle, der mit der „plötzlichen“ Änderung der Summe verbunden ist.

14) QS-Checkliste

Sinn und Transparenz

• Die Währung des Kontos und/oder der Transaktion ist überall sichtbar.
• Für $ wird der Ländercode angezeigt (US $, CA $ usw.).
• Es gibt eine Zeile über Kurs, Aktualisierungsdatum und Spread/Provision.

Format und Genauigkeit

• Dezimalstellen nach Währung (JPY = 0, KWD = 3, crypto = bis zu 8).
• Die lokale Zahl/Währung entspricht der UI-Sprache.
• Historische Transaktionen werden ohne Markierung nicht „zum aktuellen Kurs“ neu berechnet.

Verhalten

• Das Umschalten der Währung ändert die Eingabe ohne Bestätigung nicht.
• Das Äquivalent von „≈“ wird reibungslos und schnell aktualisiert.
• Currency selector keyboard-available, Type-ahead working.

iGaming-Besonderheit

• Im Coupon: Die Abbuchung/der Gewinn und ihre Währung sind unterschrieben, der Fixierkurs ist angegeben.
• An der Kasse: PSP/Bank Gebühren sind separat sichtbar.
• In Limits: Beide Größen (Konto und angezeigt) werden angezeigt.

RTL/A11y

• Codes/Summen werden in RTL korrekt gelesen ('dir =' ltr''für Zahlen).
• Kontrast- und Fokusindikatoren entsprechen AA.

15) Dokumentation im Konstruktionssystem

Bestandteile: 'CurrencySwitch', 'Money', 'FxNote', 'DualAmount'.
Präzisions-/Rundungsrichtlinie und einheitliche Formatierungsfunktion.
Regeln: „wenn display-only“, „wenn hard-convert“, „wie Spread zeigen“.
Währungsverzeichnis: Code, Symbol, Ziffern, regionale Symbolkollisionen.
Do/Don't Gallery: „$ without code“, automatische Eingabe, versteckte Provisionen.

Kurze Zusammenfassung

Der Wechsel von Währungen ist nicht nur ein „₴/€/$“ Selektor. Dies ist ein klares Geldmodell (Kontowährung vs Anzeige vs Betrieb), ehrlicher Kurs mit Provision, korrekte Formatierung nach Standort und vorsichtiges Verhalten der Eingabefelder. Fixieren Sie die Regeln im Design-System, automatisieren Sie die Formatierung und das Caching der Kurse - und die Nutzer arbeiten souverän mit den Beträgen, ohne an den Zahlen zu zweifeln oder Geld auf „unsichtbaren“ Spreads zu verlieren.