Αλλαγή νομισμάτων στη διεπαφή

1) Αρχές

1. Πρώτα το νόημα, μετά το UI. Ξεχωριστό νόμισμα λογαριασμού (λογιστική αλήθεια) από εμφανιζόμενο νόμισμα (ευκολία) και νόμισμα συναλλαγής (πραγματική μετατροπή χρήματος).
2. Μηδενική ασάφεια. Εμφάνιση κώδικα + σύμβολο σε κίνδυνο σύγχυσης ('US $', 'CA $', 'MXN', 'R $'). Για ₴/₸/₼, να προσθέτετε πάντα τον κωδικό στις λεπτομέρειες.
3. Ακεραιότητα πορείας. Μπορείτε να δείτε: την πηγή του μαθήματος, τη στιγμή της τελευταίας ενημέρωσης, εάν περιλαμβάνονται προμήθειες/διασπορά.
4. Σταθερότητα εισόδου. Η αλλαγή νομίσματος δεν θα πρέπει να επηρεάζει τις τιμές εισόδου χωρίς ρητή συγκατάθεση (ιδίως στα έντυπα επιτοκίων/καταθέσεων).
5. Εντοπισμός μορφοτύπων. Οριοθετητές, χώροι, νομισματικό σήμα - ανά τόπο χρήστη. ακρίβεια - κατά νόμισμα.

2) Μοντέλα αλλαγής

Μόνο απεικόνιση - Όλοι οι υπολογισμοί παραμένουν στο νόμισμα του λογαριασμού, ο UI δείχνει το ισοδύναμο στο επιλεγμένο νόμισμα. Χρήση για κατάλογο, προφίλ, διάσταση.
Υβριδικό (soft convert): εμφάνιση στο επιλεγμένο νόμισμα + επιβεβαίωση της συναλλαγής στο νόμισμα λογαριασμού (εμφανίζονται και τα δύο).
Λειτουργία (σκληρή μετατροπή): ο χρήστης μεταβάλλει το νόμισμα συναλλαγής (κατάθεση/ανάληψη/ισοτιμία). Χρειαζόμαστε σαφείς κύκλους μαθημάτων, επιτροπές, χρόνο καθορισμού.

Κανόνας: εξ ορισμού - μόνο απεικόνιση και ενεργοποίηση της «σκληρής» μετατροπής μόνο στις αντίστοιχες ροές (μετρητά, ανάληψη, μεταφορά κεφαλαίων).

3) Έλεγχοι και τοποθέτηση

Διακόπτης νομίσματος στον πίνακα κεφαλίδων/προφίλ (εικονίδιο «₴/€/$» ή κωδικός νομίσματος).
Επιλογέας: αναζήτηση με κωδικό/όνομα/σύμβολο. επιλεγμένα/συχνά νομίσματα - άνω.
Μέσα στις μορφές (κατάθεση/ρυθμός): συμπαγής επιλογέας στα δεξιά του πεδίου ποσότητας, δίπλα στην ένδειξη «≈ ισοδύναμο σε XXX».
Κινητό μοτίβο: κάτω φύλλο με κατάλογο και είσοδο για φιλτράρισμα.

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) Διαμόρφωση και ακρίβεια

Ελάσσονες μονάδες: Αποθηκεύονται ποσότητες σε ολόκληρες ελάχιστες μονάδες (πένες, σεντς, σατόσι).

• 0: JPY, KRW, CLP
• 2: USD, EUR, UAH, ΔΟΚΙΜΑΣΙΑ
• 3 +: ορισμένα νομίσματα ZAR (2), KWD (3), crypto (4-8)
• Κρυπτογραφήσεις: Εμφάνιση έως 8 χαρακτήρων (δυναμική ακρίβεια, αλλά με χαμηλότερο όριο αναγνωσιμότητας).
• Ψηφία πίνακα: 'αριθμητικό γραμματοσειράς-παραλλαγής: αριθμοί πινάκων·' για ευθυγράμμιση στήλης.

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) Μαθήματα και επικαιροποιήσεις

Πηγή: καθορισμός του παρόχου μαθημάτων (εσωτερική τιμολόγηση/τράπεζα/FX-API).
Cache: Ενημερωμένα μαθήματα με εύλογη συχνότητα (π.χ. κάθε 60-300 δευτερόλεπτα) + προσαυξητικές επικαιροποιήσεις της ζήτησης.
Χρόνος στερέωσης: Εμφάνιση 'updated N minutes' και χρόνος στερέωσης στο checkout.
Spread/Επιτροπή: Εμφάνιση ρητής γραμμής: "Rate 1 USD = 36. 60 UAH (περιλαμβάνεται η διασπορά 1. 5%)».
Στρογγυλοποίηση: τράπεζα ή τακτική - επιλέξτε ένα και διορθώστε το στην πολιτική.

6) Κείμενο UX και εξηγήσεις

Ισοδύναμο: "≈ 52. 10 €" - δίπλα στην ποσότητα, μεταλλαγμένο χρώμα, επικαιροποιημένο σε πραγματικό χρόνο.
Νομικές επιφυλάξεις: «Ο πραγματικός συντελεστής και η προμήθεια θα καταγράφονται στο στάδιο επιβεβαίωσης».
Μακρύς κωδικός: χρήση εργαλείων/δευτερεύουσας συμβολοσειράς: «δολάρια ΗΠΑ - δολάριο ΗΠΑ».
Μετατροπή στο καλάθι: μην αλλάζετε το «σύνολο» χωρίς εξήγηση. εμφανίζει τη γραμμή επανακαταμέτρησης.

7) Διαθεσιμότητα (A11y)

'role = «listbox/option»' στον επιλογέα νομίσματος.
Υποστήριξη πληκτρολογίου: βέλη, Εισάγετε, Πληκτρολογήστε με κωδικό/όνομα.
Ανάγνωση για SR: «Εμφάνιση νομίσματος: UAH - Ουκρανική hryvnia».
Χρώμα ≠ το μόνο μέσο νοήματος (υπάρχει πάντα κωδικός/κείμενο).
RTL: αριθμοί/κωδικοί στο 'dir = «ltr»' εντός των αραβικών συμβολοσειρών.

8) Επιδόσεις και εγκλωβισμός

Μαθήματα - στη μνήμη + localStorage with TTL (για παράδειγμα, 5 λεπτά).
Ενημερώσεις παρτίδων: επανυπολογίζονται ισοδύναμα σε παρτίδες (revestanAnimationFrame, debunks 100-200 ms).
Μην ενεργοποιείτε έναν επιπλέον επανακατηγορητή λίστας όταν η πορεία κυμαίνεται <κατώτατο όριο (για παράδειγμα, 0. 1%).

9) Οι ιδιαιτερότητες του iGaming

Νόμισμα λογαριασμού - βασική παροχή στοιχείων (καταθέσεις, υπόλοιπο, ιστορικό).
νόμισμα ισοτιμίας: συνήθως = νόμισμα λογαριασμού· εάν ορίζεται κάποιο άλλο, σημειώστε ένα διπλό μπλοκ: «Χρεωμένο X XXX σε USD (≈ Y YYY σε UAH)».
Διακανονισμός: Τα κέρδη μετατρέπονται με την ισοτιμία τη στιγμή του διακανονισμού και όχι με τα στοιχήματα - αυτό θα πρέπει να φαίνεται στις λεπτομέρειες τοκομεριδίου/ιστορικού.
Κατάθεση/απόσυρση: επιτόκιο και προμήθεια ΠΥΠ/τράπεζας - σε χωριστή γραμμή. ΕΤΑ κατά μέθοδο.
Όρια υπεύθυνου παιχνιδιού: ορίζεται στο νόμισμα λογαριασμού. Εάν ο ΚΠΕ βρίσκεται σε διαφορετικό νόμισμα, εμφανίζονται και οι δύο αξίες.
Τουρνουά και βραβεία: το νόμισμα του βραβείου είναι καθορισμένο. όταν απεικονίζεται, το ισοδύναμο είναι κατά προσέγγιση σημειωμένο.

10) Αντιπατερίδια

«Μαγική» μεταβολή της τιμής στο πεδίο εισόδου κατά την αλλαγή νομίσματος - χωρίς ρητή συναίνεση.
Χρήση ενός χαρακτήρα «$» χωρίς κωδικό χώρας.
Κρυφή προμήθεια στη γνώση (καμία γραμμή σχετικά με την εξάπλωση).
Ανάμειξη τοπικού και νομίσματος (μορφότυπος «en-US» για «UAH»).
Αυστηρή ακρίβεια «2 χαρακτήρων» για JPY/KRW ή «8 χαρακτήρες» για όλες τις κρυπτογραφήσεις.
Επανυπολογισμός των ιστορικών συναλλαγών «αναδρομικά» με την τρέχουσα συναλλαγματική ισοτιμία - χωρίς το σήμα «επανυπολογισμός».

11) Μάρκες συστήματος σχεδιασμού (παράδειγμα)

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

Αλλαγή νομίσματος (Αντιδράστε, πλαίσιο + 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>;
}

Διπλή απεικόνιση (επιχειρησιακή μετατροπή)

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) Μετρήσεις

Καθυστέρηση FX: χρόνος από τη μετάβαση στο νόμισμα έως την επικαιροποίηση όλων των πεδίων (στόχος ≤ 150 ms).
Ποσοστό ορθότητας: το μερίδιο των κλήσεων προς υποστήριξη «εσφαλμένων ποσών» (<0. 2%).
Εμφάνιση έναντι αναντιστοιχίας λογαριασμού: γεγονότα στα οποία ο χρήστης μπερδεύει νομίσματα (χαμηλότερες υποδείξεις).
Συμβουλές μαθημάτων CTR: κλικ στο «Περισσότερα για το μάθημα/προμήθεια».
Προεξόφληση σε μετρητά κατά τη μετατροπή: το μερίδιο των πτωχεύσεων που συνδέεται με μια «αιφνίδια» μεταβολή του ποσού.

14) Κατάλογος ελέγχου QA

Σημασία και διαφάνεια

• Το νόμισμα του λογαριασμού ή/και της συναλλαγής είναι ορατό παντού.
• $ δείχνει τον κωδικό χώρας (US $, CA $ κ.λπ.).
• Υπάρχει μια γραμμή σχετικά με το ποσοστό, την ημερομηνία επικαιροποίησης και το περιθώριο/προμήθεια.

Μορφότυπος και ακρίβεια

• Δεκαδικά ψηφία ανά νόμισμα (JPY = 0, KWD = 3, crypto = έως 8).
• Ο τοπικός αριθμός/νόμισμα αντιστοιχεί στη γλώσσα UI.
• Οι ιστορικές συναλλαγές δεν υπολογίζονται εκ νέου «με την τρέχουσα συναλλαγματική ισοτιμία» χωρίς σήμανση.

Συμπεριφορά

• Η μετατροπή νομίσματος δεν μεταβάλλει την εγγραφή χωρίς επιβεβαίωση.
• Το «≈» ισοδύναμο ενημερώνεται ομαλά και γρήγορα.
• Ο επιλογέας νομίσματος είναι προσβάσιμος στο πληκτρολόγιο, έργα τύπου-μπροστά.

Ιδιαιτερότητες iGaming

• Σε τοκομερίδιο: η χρέωση/νίκη και το νόμισμά τους υπογράφονται, αναγράφεται ο συντελεστής σταθεροποίησης.
• Στο till: PSP/τραπεζικές προμήθειες εμφανίζονται ξεχωριστά.
• Σε όρια: εμφανίζονται και οι δύο τιμές (λογαριασμός και απεικόνιση).

RTL/A11y

• Οι κωδικοί/ποσά διαβάζονται σωστά σε RTL ('dir = «ltr»' για αριθμούς).
• Οι δείκτες αντίθεσης και εστίασης αντιστοιχούν σε ΣΣ.

15) Τεκμηρίωση στο σύστημα σχεδιασμού

Συστατικά στοιχεία: ' Switch', 'Money', 'FxNote', 'DualPosure'.
Πολιτική ακριβείας/στρογγυλοποίησης και λειτουργία απλής μορφοποίησης.
Κανόνες: «όταν εμφανίζονται μόνο», «όταν μετατρέπονται σκληρά», «πώς να εμφανιστεί η εξάπλωση».
Αναφορά νομίσματος: κωδικός, σύμβολο, ψηφία, περιφερειακές συγκρούσεις χαρακτήρων.
Γκαλερί Do/Don: «$ without code», αυτόματη είσοδος άλματος, κρυφές προμήθειες.

Σύντομη περίληψη

Η αλλαγή νομίσματος δεν είναι απλώς ένας ₴/€/$ επιλογέας. Αυτό είναι ένα σαφές μοντέλο του χρήματος (νόμισμα λογαριασμού έναντι επίδειξης έναντι λειτουργίας), δίκαιη ισοτιμία με προμήθεια, σωστή μορφοποίηση από τοπικό και προσεκτική συμπεριφορά των πεδίων εισόδου. Καθορίστε τους κανόνες στο σύστημα σχεδιασμού, αυτοματοποιήστε τη διαμόρφωση και την αποθήκευση των μαθημάτων - και οι χρήστες θα εργάζονται με αυτοπεποίθηση με ποσά, χωρίς να αμφισβητούν τους αριθμούς και χωρίς να χάνουν χρήματα σε «αόρατα» περιθώρια.