Интерфейстегі валюталарды ауыстырып қосу

1) Қағидаттар

1. Алдымен мағынасы, содан кейін UI. Шот валютасын (бухгалтерлік ақиқат) көрсету валютасынан (қолайлылық) және операция валютасынан (ақшаны нақты айырбастау) бөліңіз.
2. Нөлдік екіұштылық. Шатасу қаупі кезінде кодты + символды көрсетіңіз ('US $', 'CA $', 'MXN', 'R $'). Ол үшін әрқашан егжей-тегжейлі кодты қосыңыз.
3. Курстардың адалдығы. Курс көзі, соңғы жаңару сәті, комиссиялар/спрэд қосылған-қосылмағаны көрініп тұр.
4. Енгізу тұрақтылығы. Валютаны ауыстырып қосу анық келiсiмсiз (әсiресе ставкалар/депозиттер нысандарында) енгiзу мәнiн «секiрмеуi» тиiс.
5. Пішімдерді оқшаулау. Бөлгіштер, бос орындар, валюта белгісі - пайдаланушының локалы бойынша; дәлдік - валюта бойынша.

2) Ауыстыру модельдері

Көрсету (display-only): барлық есеп айырысулар шот валютасында қалады, UI таңдалған валютадағы баламасын көрсетеді. Каталог, профиль, талдау үшін пайдаланыңыз.
Гибрид (soft convert): таңдалған валютада көрсету + есеп валютасындағы операцияны растау (екеуін де көрсетеміз).
Операциялық (hard convert): пайдаланушы операция валютасын (депозит/шығарылым/мөлшерлеме) өзгертеді. Нақты курстар, комиссиялар, тіркеу уақыты қажет.

Әдепкі ереже - display-only, ал «қатты» конверсияны тек тиісті ағындарда (касса, ақша шығару, ақша аудару) қосыңыз.

3) Бақылау және орналастыру

Профайл панеліндегі/қалпақшадағы валютаны ауыстырып қосу (« /€/$» белгісі немесе валюта коды).
Селектор: код/атау/символ бойынша іздеу; таңдалған/жиі валюталар - жоғарыдан.
Нысандар ішінде (депозит/ставка): жиынтық өрісінің оң жағындағы ықшам селектор, қатар «XXX-дегі ≈ эквивалент» деген сөз.
Ұялы паттерн: тізімі және сүзу үшін енгізу бар 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) Пішімдеу және дәлдік

Минор бірліктері: соманы тұтас ең төменгі бірліктерде сақтаңыз (тиын, цент, сатош).

• 0: JPY, KRW, CLP
• 2: USD, EUR, UAH, TRY
• 3 +: кейбір валюталар ZAR (2), KWD (3), крипто (4-8)
• Cryptocurrencies: 8 таңбаға дейін көрсетіңіз (динамикалық дәлдік, бірақ оқуға қабілеттілік үшін төменгі шегі бар).
• Кестелік сандар: 'font-variant-numeric: tabular-nums;' бағандарды түзету үшін.

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).
Кэш: курстарды ақылға қонымды жиілікпен жаңартыңыз (мысалы, әрбір 60-300 сек) + талап ету бойынша инкременталды жаңартулар.
Тіркеу уақыты: 'жаңарған N минут артын' және операцияны рәсімдеу кезінде тіркеу уақытын көрсетіңіз.
Спрэд/комиссия: айқын жолды көрсетіңіз: "1 USD = 36,60 UAH бағамы (1 спрэд қосылған. 5%)».
Дөңгелектеу: банктік немесе кәдімгі - біреуін таңдап, саясатта белгілеңіз.

6) UX мәтін және түсініктемелер

Баламасы: «≈ 52,10 €» - түспен тұншықтырылған соманың жанында нақты уақытта жаңартылады.
Заңдық ескертулер: «Нақты бағам мен комиссия растау қадамында тіркелетін болады».
Ұзын кодтар: tooltips/қосалқы жолды пайдаланыңыз: «US $ - АҚШ доллары».
Себеттегі конверсия: түсіндірмей «жиынтығын» өзгертпеңіз; қайта санау жолын көрсетіңіз.

7) Қол жетімділік (A11y)

'role =' listbox/option 'валюталар селекторында.
Пернетақтаны қолдау: код/атау бойынша көрсеткілер, Enter, Type-ahead.
SR үшін оқу: «Көрсету валютасы: UAH - украин гривнасы».
Түсі ≠ мағынаның жалғыз тасымалдаушысы (әрқашан код/мәтін бар).
RTL: араб жолдарының ішінде 'dir =' ltr 'сандары/кодтары.

8) Перформанс және кэштеу

Курстар - жадында + TTL бар localStorage (мысалы, 5 мин).
Батч-жаңарту: эквиваленттерді бумалармен қайта санаңыз (requestAnimationFrame, дебаунс 100-200 мс).
Бағамның <табалдырықтың ауытқуы кезінде тізімнің артық ререндерін триггерлемеңіз (мысалы, 0,1%).

9) iGaming ерекшелігі

Есепшот валютасы - базалық есептілік (депозиттер, баланс, тарих).
Ставка валютасы: әдетте = есеп валютасы; егер басқасы берілсе - «Х XXX USD-мен есептен шығарылды (≈ Y YYY UAH-мен)» деген қос блокты көрсетіңіз.
Есептеу кезіндегі белгілеу: ұтыстар ставка емес, есептеу сәтіндегі бағам бойынша айырбасталады - бұл купонның/тарихтың егжей-тегжейінен көрінуі тиіс.
Депозит/шығару: PSP/банктің бағамы және комиссиясы - жеке жолда; ETA әдісі бойынша.
Жауапты ойын лимиттері: шоттың валютасымен анықталады; егер UI басқа валютада болса - екі мәнді де көрсетіңіз.
Турнирлер мен жүлделер: жүлде қорының валютасы белгіленеді; балама бейнеленген кезде - бағдарлы, белгісі бар.

10) Антипаттерндер

Валютаны ауыстыру кезінде енгізу өрісіндегі мәннің «сиқырлы» өзгеруі - айқын келісімсіз.
Ел кодынсыз бір «$» таңбасын пайдалану.
Жасырын комиссия курста (спрэд туралы жол жоқ).
Локаль мен валютаны араластыру ('UAH' үшін 'en-US' пішімдеңіз).
JPY/KRW үшін «2 таңба» немесе барлық криптовалюталар үшін «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) Сниппеттер

Валютаны ауыстыру (React, контексті + 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 latency: валютаны ауыстырып қосудан бастап барлық өрістерді жаңартуға дейінгі уақыт (мақсат ≤ 150 мс).
Correctness rate: «қате сомалар» бойынша саппорттағы өтініштердің үлесі (<0,2%).
Display vs account mismatch: пайдаланушы валюталарды шатастыратын оқиғалар (кеңестермен төмендетеміз).
CTR курс кеңестері: «Курс/комиссия туралы толығырақ».
Конверсия кезіндегі касса абандоны: соманың «кенеттен» өзгеруіне байланысты істен шығу үлесі.

14) QA-чек парағы

Мағынасы мен ашықтығы

• Барлық жерде шот және/немесе операция валютасы көрінеді.
• $ үшін елдің коды көрсетілген (US $, CA $ және т.б.).
• Курс, жаңарту күні және спрэд/комиссия туралы жол бар.

Пішім және дәлдік

• Валюта бойынша ондық разрядтар (JPY = 0, KWD = 3, crypto = 8-ге дейін).
• Сан/валюта локалы UI тіліне сәйкес келеді.
• Тарихи операциялар «ағымдағы бағам бойынша» белгілеусіз қайта есептелмеген.

Мінез-құлық

• Валютаны ауыстырып қосу растаусыз енгізуді өзгертпейді.
• «≈» баламасы біртіндеп және тез жаңартылады.
• Валюта селекторы клавиатурада қол жетімді, Type-ahead жұмыс істейді.

iGaming ерекшелігі

• Купонда: есептен шығару/ұтыс және олардың валютасына қол қойылды, бекіту бағамы көрсетілген.
• Кассада: PSP/банк комиссиялары жеке көрінеді.
• Лимиттерде: екі өлшем де көрсетіледі (аккаунттық және көрсетілетін).

RTL/A11y

• Кодтар/сомалар RTL-де дұрыс оқылады ('dir = «ltr»' сандар үшін).
• Контраст және фокус-индикаторлар AA-ға сәйкес келеді.

15) Дизайн-жүйедегі құжаттама

Құрауыштар: 'CurrencySwitch', 'Money', 'FxNote', 'DualAmount'.
Дәлдік/дөңгелектеу саясаты және бірыңғай пішімдеу функциясы.
Ережелер: «display-only қашан», «hard-convert қашан», «спрэдті қалай көрсету керек».
Валюта анықтамалығы: код, символ, разрядтар, символдардың аймақтық коллизиялары.
Do/Don 't галереясы: «$ кодсыз», автопрыжок енгізу, жасырын комиссиялар.

Қысқаша түйіндеме

Валютаны ауыстырып қосу - жай ғана « /€/$» селекторы емес. Бұл ақшаның айқын моделі (аккаунт валютасы vs көрсету vs операция), комиссиямен адал бағам, жергілікті бойынша дұрыс пішімдеу және енгізу өрістерінің ұқыпты мінез-құлқы. Ережелерді дизайн-жүйеде бекітіңіз, курстарды пішімдеуді және кэштеуді автоматтандырыңыз - және пайдаланушылар сандарға күмән келтірмей және «көзге көрінбейтін» спрэдтерде ақша жоғалтпастан сомалармен сенімді жұмыс істейді.