interfeysdə valyuta keçid

1) Prinsiplər

1. Əvvəlcə məna, sonra UI. Hesab valyutasını (mühasibat həqiqəti) ekran valyutasından (rahatlıq) və əməliyyat valyutasından (faktiki pul konvertasiyası) ayırın.
2. Sıfır qeyri-müəyyənlik. Qarışıqlıq riski olan kodu + simvolu göstərin ('US $', 'CA $', 'MXN', 'R $'). Hər zaman ətraflı kod əlavə edin.
3. Kursların dürüstlüyü. Görünür: kursun mənbəyi, son yeniləmə anı, komissiyalar/spred daxil olub.
4. Giriş sabitliyi. Valyutanın dəyişdirilməsi açıq razılıq olmadan giriş dəyərini «atlamamalıdır» (xüsusilə bahis/depozit formalarında).
5. Formatların lokallaşdırılması. Ayırıcılar, boşluqlar, valyuta işarəsi - istifadəçinin lokalına görə; dəqiqlik - valyuta.

2) Keçid modelləri

Ekran (display-only): bütün hesablar hesab valyutasında qalır, UI seçilmiş valyuta ekvivalentini göstərir. Kataloq, profil, analitika üçün istifadə edin.
Hibrid (soft convert): seçilmiş valyutada göstərilməsi + hesabın valyutasında əməliyyatın təsdiqi (hər ikisini göstəririk).
Əməliyyat (hard convert): istifadəçi əməliyyatın valyutasını dəyişir (depozit/çıxarış/bahis). Açıq kurslar, komissiyalar, fiksasiya vaxtı lazımdır.

Qayda: default - display-only və «sərt» çevirmə yalnız müvafiq axınlar (kassa, pul çıxarma, pul köçürmə) daxil edin.

3) Nəzarət və yerləşdirmə

Şapka/profil panelində valyuta keçid (simvol « /€/$» və ya valyuta kodu).
Selector: kod/ad/simvol üzrə axtarış; seçilmiş/tez-tez valyuta - yuxarıdan.
Formalar daxilində (depozit/bahis): yığım sahəsinin sağında yığcam selektor, yanında «XXX-də ≈ ekvivalenti» işarəsi.
Mobil model: filtrasiya üçün siyahı və giriş ilə bottom sheet.

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) Formatlaşdırma və dəqiqlik

Kiçik vahidlər: məbləğləri bütün minimum vahidlərdə (qəpik, sent, satoş) saxlayın.

• 0: JPY, KRW, CLP
• 2: USD, EUR, UAH, TRY
• 3 +: bəzi valyutalar ZAR (2), KWD (3), kripto (4-8)
• Kriptovalyutalar: 8 işarəyə qədər göstərin (dinamik dəqiqlik, lakin oxunabilirlik üçün aşağı hədd ilə).
• Cədvəl nömrələri: 'font-variant-numeric: tabular-nums;' sütunların hizalanması üçün.

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) Kurslar və yeniləmələr

Mənbə: məzənnə provayderini təyin edin (daxili qiymət/bank/FX-API).
Cache: Kursları ağlabatan bir tezliklə (məsələn, hər 60-300 saniyədə) + tələbə görə artıqlaması ilə yeniləyin.
Fiksasiya vaxtı: 'yenilənmiş N min geri' və əməliyyatın qeydiyyatı zamanı göstərin.
Spred/Komissiya: Aydın sətri göstərin: "Kurs 1 USD = 36,60 UAH (spred 1 daxil edilmişdir. 5%)».
Yuvarlaqlaşdırma: bank və ya adi - birini seçin və siyasətdə qeyd edin.

6) UX mətn və izahları

Ekvivalent: «≈ 52,10 €» - səssiz rəng məbləğinin yanında, real vaxt rejimində yenilənir.
Hüquqi şərtlər: «Faktiki kurs və komissiya təsdiq mərhələsində qeydə alınacaq».
Uzun kodlar: tooltips/ikinci sətir istifadə edin: «US $ - ABŞ dolları».
Səbətdə dönüşüm: izah etmədən «cəmi» dəyişməyin; yenidən hesablama xəttini göstərin.

7) Mövcudluq (A11y)

'role =' listbox/option '' valyuta selektorunda.
Klaviatura dəstəyi: ok, Enter, Type-ahead kod/ad.
SR üçün oxu: «Ekran valyutası: UAH - Ukrayna qrivnası».
Rəng ≠ yeganə məna daşıyıcısı (həmişə kod/mətn var).
RTL: ədədlər/kodlar 'dir =' ltr '' ərəb sətirləri daxilində.

8) Performans və caching

Kurslar - TTL ilə + localStorage yaddaşında (məsələn, 5 dəq).
Batch yeniləmələri: ekvivalentləri paketlərlə (requestAnimationFrame, debauns 100-200 ms) yenidən hesablayın.
Məzənnə dalğalanması <eşik (məsələn, 0,1%) olduqda əlavə rerender siyahısını tetikləməyin.

9) iGaming xüsusiyyətləri

Hesabın valyutası - baza hesabatı (depozitlər, balans, tarix).
Məzənnə valyutası: adətən = hesab valyutası; başqa verilirsə - ikili blok göstərin: «USD-də X XXX (UAH-da ≈ Y YYY)».
Hesablama zamanı fiksasiya: uduşlar hesablama anındakı məzənnə ilə çevrilir, dərəcələr deyil - bu, kupon/tarixin təfərrüatlarında görünməlidir.
Depozit/çıxarış: PSP/bankın məzənnəsi və komissiyası - ayrıca sətirdə; ETA metodu ilə.
Məsuliyyətli oyunun limitləri: hesab valyutasında müəyyən edilir; başqa bir valyuta UI varsa - hər iki dəyəri göstərin.
Turnirlər və mükafatlar: mükafat fondunun valyutası qeyd olunur; ekvivalent göstərildikdə - təxmini, işarə ilə.

10) Antipattern

Valyuta keçid zamanı giriş sahəsində «sehrli» dəyər dəyişikliyi - açıq razılıq olmadan.
Ölkə kodu olmadan bir «$» simvolu istifadə.
Gizli komissiya (spred haqqında heç bir sətir yoxdur).
Lokal və valyuta qarışdırılması ('UAH' üçün 'en-US' formatında).
JPY/KRW üçün «2 işarə» və ya bütün kriptovalyutalar üçün «8 işarə».
Tarixi əməliyyatların cari məzənnə üzrə "geriyə hesablanması -" yenidən hesablama "işarəsi olmadan.

11) Dizayn sistemi tokenləri (nümunə)

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) Snippetlər

Valyuta keçid (React, kontekst + 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>;
}

Cüt ekran (əməliyyat çevirmə)

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

FX latency: valyuta dəyişməsindən bütün sahələrin yenilənməsinə qədər olan vaxt (hədəf ≤ 150 ms).
Correctness rate: «Səhv məbləğlər» üzrə sapport müraciətlərinin payı (<0,2%).
Display vs account mismatch: istifadəçinin valyutaları qarışdırdığı hadisələr (ipuçları ilə azaldır).
CTR Kurs İpuçları: «Kurs/Komissiya haqqında daha çox məlumat».
Abandon kassa çevirmə zamanı: məbləğin «qəfil» dəyişməsi ilə bağlı uğursuzluqların payı.

14) QA-çek siyahısı

Məna və şəffaflıq

• Hər yerdə hesabın və/və ya əməliyyatın valyutası görünür.
• $ üçün ölkə kodu göstərilir (US $, CA $ və s.).
• Kurs, yeniləmə tarixi və spred/komissiya haqqında bir sətir var.

Format və dəqiqlik

• Valyuta üzrə onluq dərəcələr (JPY = 0, KWD = 3, crypto = 8-ə qədər).
• Ədədin/valyutanın yeri UI dilinə uyğundur.
• Tarixi əməliyyatlar qeyd edilmədən «cari məzənnə» ilə yenidən hesablanmır.

Davranış

• Valyuta keçid təsdiq olmadan giriş dəyişmir.
• «≈» ekvivalenti rəvan və tez yenilənir.
• Valyuta seçicisi klaviatura mövcuddur, Type-ahead işləyir.

iGaming spesifikasiyası

• Kuponda: debet/uduşlar və onların valyutası imzalanır, sabit məzənnə göstərilir.
• Kassada: PSP/Bank komissiyaları ayrıca görünür.
• Limitlərdə: hər iki kəmiyyət göstərilir (hesab və göstərilən).

RTL/A11y

• Kodlar/məbləğlər RTL-də düzgün oxunur ('dir = «ltr»' ədədlər üçün).
• Kontrast və fokus göstəriciləri AA-ya uyğundur.

15) Dizayn sistemində sənədləşmə

Komponentlər: 'CurrencySwitch', 'Money', 'FxNote', 'DualAmount'.
Dəqiqlik/yuvarlaqlaşdırma siyasəti və vahid formatlaşdırma funksiyası.
Qaydalar: «display-only zaman», «hard-convert zaman», «spred necə göstərilir».
Valyuta kataloqu: kod, simvol, boşalmalar, regional simvol toqquşmaları.
Do/Don 't Qalereyası: «Kodsuz $», Avtomatik atlama giriş, gizli komissiyalar.

Qısa xülasə

Valyutanın dəyişdirilməsi sadəcə bir seçici deyil. Bu aydın pul modelidir (hesab valyutası vs ekran vs əməliyyat), komissiya ilə ədalətli kurs, yerli düzgün formatlaşdırma və giriş sahələrinin diqqətli davranışı. Dizayn sistemində qaydaları düzəldin, kursların formatlaşdırılmasını və keşləşdirilməsini avtomatlaşdırın - və istifadəçilər rəqəmlərə şübhə etmədən və «görünməz» spredlərdə pul itirmədən məbləğlərlə inamla işləyəcəklər.