Интерфейсте акча которуу

1) Принциптер

1. Биринчи мааниси, андан кийин UI. Эсептин валютасын (бухгалтердик чындык) көрсөтүү валютасынан (ыңгайлуулук) жана операциянын валютасынан (акчаны иш жүзүндө конвертациялоо) бөлүп алыңыз.
2. Нөлдүк бүдөмүк. Башаламандык коркунучунда кодду + символду көрсөтүңүз ('US $', 'CA $', 'MXN', 'R $'). Ал үчүн/,/, - ар дайым майда-чүйдөсүнө чейин кодун кошуу.
3. Курстардын чынчылдыгы. Көрүнүп турат: курстун булагы, акыркы жаңылануу учуру, комиссиялар/спрэд камтылганбы.
4. Киргизүү туруктуулугу. Валютаны которуу ачык макулдугусуз (өзгөчө коюмдардын/депозиттердин формаларында) киргизүү маанисин "секирбөөгө" тийиш.
5. Форматтарды локалдаштыруу. Бөлгүчтөр, боштуктар, валюта белгиси - колдонуучунун локалы боюнча; тактык - валюта боюнча.

2) өзгөртүү моделдери

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

Эреже: демейки боюнча - display-only, ал эми "катуу" конверсия тиешелүү агымдарда гана (касса, акча каражаттарын чыгаруу, которуу) кирет.

3) Контролдоо жана жайгаштыруу

Cap/кароо панелинде акча которуу (белги " /€/$" же акча коду).
Селектор: код/аталыш/символ боюнча издөө; тандалган/тез-тез акча - жогору.
Формалардын ичинде (депозит/коюм): сумманын талаасынын оң жагындагы компакттуу селектор, "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)
• Cryptocurrency: чейин көрсөтүү 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 '' валюталык селектордо.
Klaviatura колдоо: жебелер, Enter, Type-ahead код/аталышы боюнча.
SR үчүн окуу: "Акча көрсөтүү: UAH - украин Hryvnia".
түс ≠ гана маани алып жүрүүчү (ар дайым код/текст бар).
RTL: арабча сандар/коддор 'dir = "ltr"' ичинде.

8) Аткаруу жана кэш

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

9) iGaming өзгөчөлүктөрү

Эсеп валютасы - базалык отчеттуулук (депозиттер, баланс, тарых).
Коюмдун валютасы: адатта = эсеп валютасы; Эгер башка берилсе, кош блокту көрсөтүңүз: "Эсептен чыгарылган X XXX USD (≈ Y YYY UAH)".
Эсептешүүдө фиксация: утуштар эсептешүү учурундагы курс боюнча конвертацияланат, ставкалар эмес - бул купондун/тарыхтын деталдарынан байкалууга тийиш.
Аманат/чегерүү: PSP/банктын курсу жана комиссиясы - өзүнчө сапта; ETA ыкмасы боюнча.
Жоопкерчиликтүү оюндун лимиттери: эсеп валютасында аныкталат; эгерде UI башка валютада болсо - эки маанини тең көрсөтүңүз.
Турнирлер жана байгелер: байге фондунун валютасы белгиленет; эквивалентти көрсөтүүдө - болжолдуу, белгиси бар.

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

Валютаны которууда киргизүү талаасындагы маанини "сыйкырдуу" өзгөртүү - ачык макулдугусуз.
Өлкө коду жок бир "$" символун колдонуу.
Жашыруун комиссия билишет (спрэд жөнүндө сап жок).
Локал менен валютаны аралаштыруу ('UAH' үчүн 'en-US' боюнча форматтаңыз).
Катуу тактык "2 белги" үчүн JPY/KRW же "8 белги" үчүн бардык cryptocurrency.
Учурдагы курс боюнча тарыхый транзакцияларды "артка" эсептөө - "кайра эсептөө" белгиси жок.

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 ms) өзгөртүү үчүн акча которуу убакыт.
Correctness rate: "туура эмес суммалар" боюнча саппортко кайрылуулардын үлүшү (<0,2%).
Display vs account mismatch: колдонуучу валюталарды чаташтырган окуялар (кеңештер менен төмөндөтөбүз).
CTR курсу боюнча кеңештер: "Курс/комиссия жөнүндө кененирээк" басуу.
Абандон кассасы конверсиялоодо: сумманын "капыстан" өзгөрүшүнө байланыштуу баш тартуулардын үлүшү.

14) QA-чек тизмеси

Мааниси жана ачык-айкындуулук

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

Формат жана тактык

• Валюта боюнча ондук разряддар (JPY = 0, KWD = 3, крипто = 8 чейин).
• Жергиликтүү саны/акча UI тилине туура келет.
• Тарыхый операциялар "учурдагы курс боюнча" белгиленбестен кайра эсептелбейт.

Жүрүм-турум

• акча которуу ырастоо жок кириш өзгөрбөйт.
• "≈" эквиваленти жылмакай жана тез жаңыланат.
• Акча селектор клавиатура жеткиликтүү, Type-ahead иштейт.

iGaming өзгөчөлүгү

• Купондо: эсептен чыгаруу/утуш жана алардын валютасы кол коюлган, бекитүү курсу көрсөтүлгөн.
• Кассада: PSP/банктын комиссиялары өзүнчө көрүнүп турат.
• Лимиттерде: эки чоңдук тең көрсөтүлөт (эсеп жана көрсөтүлгөн).

RTL/A11y

• Коддор/суммалар RTLде туура окулат ('dir = "ltr"' сандар үчүн).
• Контраст жана фокус көрсөткүчтөрү ААга туура келет.

15) Дизайн системасында документтер

Компоненттери: 'CurrencySwitch', 'Money', 'FxNote', 'DualAmount'.
Тактык/тегеректөө саясаты жана бирдиктүү формат функциясы.
Эрежелер: "качан display-only", "качан hard-convert", "кантип spred көрсөтүү керек".
Валюта каталогу: код, символ, разряддар, символдордун аймактык коллизиялары.
Галерея Do/Don 't: "$ коду жок", auto-секирүү киргизүү, жашыруун комиссиялар.

Кыскача резюме

Акча которуу - бул жөн гана тандоо эмес " /€/$". Бул акчанын так модели (эсеп акча vs көрсөтүү vs операция), комиссия менен чынчыл курс, жергиликтүү туура форматтоо жана киргизүү талааларынын кылдат жүрүм-туруму. Дизайн системасында эрежелерди бекитүү, курстарды форматтоону жана кэштоону автоматташтыруу - жана колдонуучулар сандардан күмөн санабастан жана "көрүнбөгөн" спрэддерде акча жоготпостон, суммалар менен ишенимдүү иштешет.