Cambio di valuta nell'interfaccia

1) Principi

1. Prima il senso, poi l'UI. Separare la valuta dell'account (verità contabile) dalla valuta di visualizzazione (convenienza) e dalla valuta di transazione (conversione effettiva del denaro).
2. Zero ambiguità. Mostra codice + simbolo in caso di rischio di confusione («US $», «CA $», «MXN», «R $»). Per ₴/₸/₼, aggiungi sempre il codice nei dettagli.
3. L'onestà del corso. L'origine del corso, il momento dell'ultimo aggiornamento, se le commissioni/spread sono abilitate.
4. Stabilità dell'input. Il cambio di valuta non deve «saltare» i valori di immissione senza un consenso esplicito (soprattutto nelle forme di puntata/deposito).
5. Localizzazione dei formati. Separatori, spazi, valuta - per punto utente; precisione: valuta.

2) Modelli di commutazione

Visualizza (display-only) - Tutti i calcoli rimangono nella valuta dell'account, l'UI mostra l'equivalente nella valuta selezionata. Utilizzare per catalogo, profilo, analisi.
Ibrido (soft convert) - Visualizza nella valuta selezionata + conferma l'operazione nella valuta dell'account (visualizzate entrambe).
Operativo (hard convert) - L'utente cambia la valuta della transazione (deposito/ritiro/tasso). Ci servono corsi chiari, commissioni, tempo di fissazione.

Regola: l'impostazione predefinita è display-only, mentre la conversione rigida include solo i flussi appropriati (cassa, ritiro, trasferimento).

3) Controlli e posizionamento

Commutatore di valuta nel cappello/riquadro del profilo (icona ₴/€/$ o codice valuta).
Selettore: ricerca codice/nome/carattere; le valute preferite/frequenti sono sopra.
All'interno dei moduli (deposito/tasso): selettore compatto a destra del campo della somma, accanto al suggerimento «equivalente in XXX».
Pattern mobile: bottom sheet con elenco e input per filtrare.

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) Formattazione e precisione

Unità minori: conserva le somme in unità minime intere (centesimi, centesimi, satoshi).

• 0: JPY, KRW, CLP
• 2: USD, EUR, UAH, TRY
• 3 +: alcune valute ZAR (2), KWD (3), cripto (4-8)
• Criptovalute: mostra fino a 8 caratteri (precisione dinamica, ma con limite inferiore per la leggibilità).
• I numeri tabellari sono: 'font-variant-numeric'per l'allineamento delle colonne.

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) Corsi e aggiornamenti

Fonte: fissa il provider di rotta (price/banca/FX-API).
Cache: aggiornare i corsi a frequenza ragionevole (ad esempio, ogni 60-300 secondi) + aggiornamenti incrementali su richiesta.
Tempo di fissazione: mostra «aggiornato N min indietro» e l'ora di fissazione durante l'operazione.
Spred/commissione: mostra una stringa esplicita: "Corso 1 USD = 36,60 UAH (spred 1 abilitato. 5%)».
Arrotondamenti - Bancario o normale - Seleziona uno e fissa il criterio.

6) UX testo e spiegazioni

L'equivalente di «≈ 52,10 €» - accanto a un importo abbattuto dal colore, viene aggiornato in tempo reale.
Riserve legali: «Il corso effettivo e la commissione saranno registrati al passo di conferma».
Codici lunghi: usa tooltips/stringa secondaria: «US $ - dollaro USA».
Conversione nel cestino: non cambiare «totale» senza una spiegazione; Mostra la riga di riconteggio.

7) Disponibilità (A11y)

"role =" listbox/opzione "presso il selettore di valute.
Supporto della tastiera: frecce, invio, tipo-ahead per codice/nome.
Lettura SR: «Valuta di visualizzazione: UAH - criniera ucraina».
Il colore è l'unico supporto di significato (c'è sempre il codice/testo).
RTL: numeri/codici in dir = «ltr» all'interno delle righe arabe.

8) Performance e cache

Corsi - memoria + con TTL (ad esempio 5 min).
Aggiornamenti batch: contate gli equivalenti con pacchetti (requestAnimationFrame, debount 100-200 mc).
Non azionare il renderer della lista in caso di fluttuazioni del corso <soglia (ad esempio 0,1%).

9) Specificità del iGaming

La valuta dell'account è il report di base (depositi, saldo, cronologia).
Valuta puntata: solitamente = valuta account; Se ne è impostata un'altra, mostrate una doppia unità: «X XXX cancellato in USD (≈ Y YYY in UAH)».
Fissa nel calcolo: le vincite vengono convertite in base al tasso di cambio al momento del calcolo e non in base alla puntata.
Deposito/ritiro: il tasso di cambio e la commissione PSP/banca sono una riga separata; ETA secondo il metodo.
I limiti del gioco responsabile sono definiti nella valuta dell'account; se l'UI è in valuta diversa, indicare entrambi i valori.
Tornei e premi: la valuta del premio è fissata; Quando viene visualizzato, l'equivalente è indicativo, contrassegnato.

10) Antipattern

Modifica magica del valore nella casella di testo quando si cambia valuta, senza consenso esplicito.
Utilizza un solo simbolo «$» senza codice paese.
La commissione nascosta è al corrente (nessuna riga relativa allo spread).
Mescolare locali e valute (formattare in-US per UAH).
Precisione rigida «2 caratteri» per JPY/KRW o «8 caratteri» per tutte le criptovalute.
Riconteggio delle transazioni storiche «retroattive» per il tasso di cambio corrente, senza il punteggio di riconteggio.

11) Token di progettazione (esempio)

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) Snippet

Pulsante di scelta valuta (React, contesto + 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>;
}

Doppia visualizzazione (conversione operativa)

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) Metriche

FX latency: tempo dal cambio di valuta all'aggiornamento di tutti i campi (obiettivo 150 ms).
Cortettness rate: percentuale di accessi allo zapport per «importi errati» (<0,2%).
Display vs account mismatch è un evento in cui l'utente confonde le valute (riducendo i suggerimenti).
CTR suggerimenti del corso: click su Più informazioni sul corso/commissione.
Abandon cassa alla conversione, la percentuale di rifiuto associata a una variazione improvvisa.

14) Foglio di assegno QA

Significato e trasparenza

• La valuta dell'account e/o dell'operazione è visibile ovunque.
• Per $ è indicato il codice paese (US $, CA $, ecc.).
• C'è una riga sul corso, la data di aggiornamento e lo spread/commissione.

Formato e precisione

• Cifre decimali per valuta (JPY = 0, KWD = 3, crypto = fino a 8).
• Locale numero/valuta corrisponde al linguaggio UI.
• Le operazioni storiche non sono state conteggiate «al corso corrente» senza essere contrassegnate.

Comportamento

• Il cambio di valuta non cambia l'input senza conferma.
• L'equivalente «≈» viene aggiornato in modo fluido e rapido.
• Il selettore valuta tastiera è disponibile, in funzione Type-ahead.

Specifica iGaming

• In coupon: prelievo/vincita e loro valuta sono firmati, il tasso di fissa è indicato.
• Le commissioni PSP/banca sono visibili separatamente.
• I limiti visualizzano entrambe le dimensioni (account e visualizzazione).

RTL/A11y

• I codici/gli importi vengono letti correttamente in RTL ('dir = «ltr» per i numeri).
• Il contrasto e i focus indicatori corrispondono a AA.

15) Documentazione in progettazione

Componenti: «CurrencySwitch», «Money», «FxNote», «DualAmount».
Criterio di precisione/arrotondamento e un'unica funzione di formattazione.
Le regole sono «quando display-only», «quando hard-convert», «come mostrare lo spread».
Riferimento valuta: codice, carattere, cifre, conflitti di caratteri regionali.
Galleria Do/Don't: $ senza codice, corredo automatico, commissione nascosta.

Breve riepilogo

Il cambio di valuta non è solo un selettore di ₴/€/$. Questo è un modello di denaro chiaro (la valuta di account vs visualizza l'operazione vs), il corso onesto con la commissione, la formattazione corretta su locali e il comportamento attento dei campi di input. Fissare le regole del sistema di progettazione, automatizzare la formattazione e la cache dei corsi e garantire che gli utenti lavorino con le somme senza dubitare dei numeri e senza perdere denaro con gli spread «invisibili».