Interfeýsde walýutalary üýtgetmek

1) Ýörelgeler

1. Ilki manysy, soň UI. Hasabyň walýutasyny (buhgalteriýa hakykaty) görkezilýän walýutadan (amatlylyk) we amalyň walýutasyndan (puluň hakyky konwersiýasy) aýyryň.
2. Nol düşnüksizlik. Bulaşyklyk töwekgelçiliginde kod + nyşan görkeziň ('US $', 'CA $', 'MXN', 'R $'). KDE üçin kody elmydama jikme-jik goşuň.
3. Kurslaryň dogruçyllygy. Görnüşi ýaly: kursyň çeşmesi, soňky täzeleniş pursaty, komissiýanyň/sprediň goşulandygy.
4. Giriş durnuklylygy. Walýuta çalşygy aç-açan razylyksyz giriş manysyny "bökmeli" däldir (esasanam stawkalaryň/goýumlaryň görnüşlerinde).
5. Formatlaryň lokalizasiýasy. Bölüjiler, boşluklar, walýuta belgisi - ulanyjynyň lokalizasiýasy boýunça; takyklygy - walýuta boýunça.

2) Geçiş modelleri

Görkezilişi (display-only): ähli hasaplaşyklar hasabyň walýutasynda galýar, UI saýlanan walýutanyň ekwiwalentini görkezýär. Katalog, profil, analitika üçin ulanyň.
Gibrid (soft convert): saýlanan walýutada görkezmek + hasabyň walýutasynda amalyň tassyklanmagy (ikisini hem görkezýäris).
Operasiýa otagy (hard convert): ulanyjy amalyň walýutasyny üýtgedýär (goýum/çykarmak/stawka). Anyk kurslar, komissiýalar, kesgitleniş wagty gerek.

Düzgün: Adaty ýagdaýda - display-only, "gaty" öwrülişigi diňe degişli akymlarda (kassa, pul çykarmak, pul geçirmek) goşuň.

3) Gözegçilikler we ýerleşdiriş

Profil panelinde/şlýapada walýuta geçişi (" /€/$" nyşany ýa-da walýuta kody).
Selektor: kod/at/nyşan boýunça gözlemek; saýlanan/ýygy-ýygydan walýutalar - ýokardan.
Görnüşleriň içinde (goýum/stawka): jemiň meýdanynyň sag tarapyndaky ykjam selektor, gapdalynda "≈ XXX-daky ekwiwalent" diýen yşarat bar.
Jübi patterni: süzmek üçin sanaw we giriş bilen 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) Formatlamak we takyklyk

Minor birlikler: jemi iň az birliklerde saklaň (teňňe, sent, satoş).

• 0: JPY, KRW, CLP
• 2: USD, EUR, UAH, TRY
• 3 +: käbir walýutalar ZAR (2), KWD (3), kripto (4-8)
• Cryptocurrencies: 8 belgä çenli görkeziň (dinamiki takyklyk, ýöne okamak üçin aşaky çägi bilen).
• Tablo sanlary: 'font-variant-numeric: tabular-nums;' sütünleri deňlemek üçin.

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 we täzelenmeler

Çeşme: nyrhyň üpjün edijisini belläň (içerki praýsing/bank/FX-API).
Nagt pul: Kurslary akylly ýygylyk bilen täzeläň (mysal üçin, her 60-300 sekunt) + talap boýunça içerki täzelenmeler.
Fiksasiýa wagty: 'täzelenen N minut yzda' we amal düzülende fiksasiýa wagtyny görkeziň.
Spred/komissiýa: aç-açan setiri görkeziň: "1 USD = 36,60 UAH (1-nji spred goşulýar. 5%)».
Tegelek: bank ýa-da adaty - birini saýlap, syýasatda belläň.

6) UX teksti we düşündirişleri

Ekwiwalenti: "≈ 52,10 €" - sessiz reňkli mukdaryň gapdalynda hakyky wagtda täzelenýär.
Hukuk bellikleri: "Hakyky kurs we komissiýa tassyklama ädiminde kesgitlener".
Uzyn kodlar: tooltips/ikinjisini ulanyň: "US $ - ABŞ dollary".
Sebetdäki konwersiýa: düşündirişsiz "jemi" üýtgetmäň; Sanamak setirini görkeziň.

7) Elýeterlilik (A11y)

'role = "listbox/option"' walýuta saýlaýjysynda.
Klawiatura goldawy: kod/at boýunça oklar, Enter, Type-ahead.
SR üçin okamak: "Görkeziş walýutasy: UAH - ukrain griwniýasy".
Reňk ≠ ýeke-täk many göteriji (hemişe kod/tekst bar).
RTL: sanlar/kodlar v 'dir = "ltr"' arap satrlarynyň içinde.

8) Ýerine ýetiriş we kesmek

Kurslar - TTL bilen ýatda + localStorage (mysal üçin 5 minut).
Batch-täzelenmeler: ekwiwalentleri paketler bilen sanaň (requestAnimationFrame, debauns 100-200 ms).
Nyrhyň üýtgemegi <bosagada (mysal üçin, 0,1%) sanawyň goşmaça rerenderini triggerlemäň.

9) iGaming aýratynlyklary

Hasabyň walýutasy - esasy hasabat (goýumlar, balans, taryh).
Nyrhyň walýutasy: adatça = hasabyň walýutasy; başga bir zat soralsa, goşa bloky görkeziň: "USD-de X XXX (UAH-da ≈ Y YYY)".
Hasaplamada düzüliş: ýeňişler nyrh däl-de, hasaplama pursatyndaky hümmet boýunça konwersiýa edilýär - muny kuponyň/taryhyň jikme-jikliklerinde görkezmeli.
Depozit/çykarmak: PSP/bankyň hümmeti we komissiýasy - aýratyn setirde; ETA usuly boýunça.
Jogapkär oýnuň çäkleri: hasabyň walýutasynda kesgitlenýär; eger UI başga walýutada bolsa, iki manyny hem görkeziň.
Ýaryşlar we baýraklar: baýrak gaznasynyň walýutasy ýazylýar; görkezilende ekwiwalent - takmynan, bellik bilen.

10) Antipatternler

Walýuta çalşylanda giriş meýdanyndaky manynyň "jadyly" üýtgemegi - aç-açan razylyksyz.
Countryurt kody bolmazdan bir "$" nyşanyny ulanmak.
Gizlin komissiýa bilýär (spred hakda setir ýok).
Lokallary we walýutalary garyşdyrmak ('UAH' üçin 'en-US' -y formatlaň).
JPY/KRW üçin "2 belgi" ýa-da ähli kriptografik walýutalar üçin "8 belgi".
Taryhy amallary häzirki nyrh boýunça "yzky gün" bilen gaýtadan hasaplamak - "gaýtadan hasaplamak" belgisi bolmazdan.

11) Dizaýn-ulgamyň bellikleri (mysal)

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

Walýuta geçişi (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>;
}

Iki gezek görkezmek (operasiýa öwrülişigi)

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

FX latency: walýuta çalşygyndan başlap, ähli meýdanlary täzelemäge çenli wagt (maksat ≤ 150 ms).
Correctness rate: "nädogry summalar" boýunça sapporta ýüz tutmalaryň paýy (<0,2%).
Display vs account mismatch: Ulanyjynyň walýutalary bulaşdyrýan wakalary (maslahatlar bilen peseldýäris).
Kurs maslahatlarynyň CTR: "Kurs/komissiýa barada has giňişleýin maglumat".
Kassa abandony konwersiýa edilende: mukdaryň "duýdansyz" üýtgemegi bilen baglanyşykly şowsuzlyklaryň paýy.

14) QA-çek-sanawy

Manysy we aç-açanlygy

• Hasabyň we/ýa-da amalyň walýutasy hemme ýerde görünýär.
• $ üçin ýurduň kody görkezilýär (US $, CA $ we ş.m.).
• Kurs, täzeleniş senesi we spred/komissiýa barada bir setir bar.

Format we takyklyk

• Walýuta boýunça onluk kategoriýalar (JPY = 0, KWD = 3, crypto = 8-e çenli).
• San/walýutanyň lokalizasiýasy UI diline laýyk gelýär.
• Taryhy amallar belliksiz "häzirki kurs boýunça" gaýtadan hasaplanmady.

Özüni alyp barşy

• Walýutany üýtgetmek tassyklamazdan girişi üýtgetmeýär.
• "≈" ekwiwalenti haýal we çalt täzelenýär.
• Walýuta saýlaýjysy klawiatura elýeterlidir, Type-ahead işleýär.

iGaming aýratynlygy

• Kuponda: hasapdan çykarmak/ýeňiş we olaryň walýutasy gol çekilýär, kesgitleniş hümmeti görkezilýär.
• Kassada: PSP/bankyň komissiýalary aýratyn görünýär.
• Çäklerde: iki ululyk hem görkezilýär (hasap we görkezilýän).

RTL/A11y

• Kodlar/pullar RTL-de dogry okalýar ('dir = "ltr"' sanlar üçin).
• Kontrast we fokus görkezijileri AA-a laýyk gelýär.

15) Dizaýn-ulgamdaky resminamalar

Komponentler: 'CurrencySwitch', 'Money', 'FxNote', 'DualAmount'.
Takyklyk/tegelek syýasaty we ýeke-täk format funksiýasy.
Düzgünler: "haçan display-only", "haçan hard-convert", "nädip spred görkezmeli".
Walýuta gollanmasy: kod, nyşan, kategoriýalar, nyşanlaryň sebitleýin gapma-garşylyklary.
Do/Don 't galereýasy: "Kodsyz $", giriş awto bökmek, gizlin komissiýalar.

Gysgaça gysgaça

Walýuta çalşygy diňe " /€/$" saýlaýjy däl. Bu, puluň aýdyň modeli (hasap walýutasy vs görkezmek vs amal), komissiýa bilen adalatly kurs, lokal taýdan dogry formatlamak we giriş meýdanlarynyň seresaply hereketi. Düzgünleri dizaýn ulgamynda düzüň, kurslaryň formatlanmagyny we kesilmegini awtomatlaşdyryň - ulanyjylar sanlara şübhelenmezden we "görünmeýän" spredlerde pul ýitirmezden mukdar bilen ynamly işlärler.