ვალუტის შეცვლა ინტერფეისში

1) პრინციპები

1. ჯერ მნიშვნელობა, შემდეგ UI. გამოყავით ანგარიშის ვალუტა (სააღრიცხვო ჭეშმარიტება) ჩვენების (მოხერხებულობის) ვალუტისა და ოპერაციის ვალუტისგან (ფულის ფაქტობრივი კონვერტაცია).
2. ნულოვანი ორაზროვნება. აჩვენეთ კოდი + სიმბოლო დაბნეულობის რისკის დროს ('აშშ დოლარი', 'CA $', 'MXN', 'R $'). Capital- ისთვის - ყოველთვის დაამატეთ კოდი დეტალებში.
3. კურსების პატიოსნება. ჩანს: კურსის წყარო, ბოლო განახლების მომენტი, შედის თუ არა კომისიები/მიმოწერა.
4. გაშვების სტაბილურობა. ვალუტის გადართვა არ უნდა „გადახტეს“ შეყვანის მნიშვნელობებს აშკარა თანხმობის გარეშე (განსაკუთრებით განაკვეთების/დეპოზიტების ფორმებში).
5. ფორმატის ლოკალიზაცია. გამყოფები, ხარვეზები, ვალუტის ნიშანი - მომხმარებლის იდაყვის მიხედვით; სიზუსტე - ვალუტით.

2) გადართვის მოდელები

რუქა (display-only): ყველა გამოთვლა რჩება ანგარიშის ვალუტაში, UI აჩვენებს ეკვივალენტს არჩეულ ვალუტაში. გამოიყენეთ კატალოგები, პროფილი, ანალიტიკოსები.
ჰიბრიდი (რბილი კონცერტი): არჩეულ ვალუტაში რუქა + ანგარიშის ვალუტაში ოპერაციის დადასტურება (ჩვენ ორივე ვაჩვენებთ).
ოპერაციული (მძიმე კონცერტი): მომხმარებელი ცვლის ოპერაციის ვალუტას (ანაბარი/გამომავალი/განაკვეთი). ჩვენ გვჭირდება აშკარა კურსები, საკომისიო, ფიქსაციის დრო.

წესი: ნაგულისხმევი - display-only, და „მკაცრი“ კონვერსია შედის მხოლოდ შესაბამის ნაკადებში (სალარო, გაყვანა, თანხების გადაცემა).

3) კონტროლი და განთავსება

ვალუტის გადართვა ქუდში/პროფილის პანელზე (ხატი „ikonka“) ან ვალუტის კოდი).
სელექტორი: ძებნა კოდი/სახელი/სიმბოლო; არჩეული/ხშირი ვალუტა - ზემოდან.
ფორმების შიგნით (ანაბარი/განაკვეთი): კომპაქტური სელექტორი თანხის ველის მარჯვნივ, რიგი მინიშნება „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)
• კრიპტოვალუტები: აჩვენეთ 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 წუთის წინ' და ფიქსაციის დრო ოპერაციის შესრულებისას.
Sprad/Company: აჩვენეთ აშკარა ხაზი: "კურსი 1 აშშ დოლარი = 36.60 UAH (შედის sprad 1. 5%)».
დამრგვალება: საბანკო ან ჩვეულებრივი - შეარჩიეთ ერთი და დაფიქსირდით პოლიტიკაში.

6) UX ტექსტი და ახსნა

ეკვივალენტი: „52.10 ევრო“ - ფერის მიერ გაჟღენთილი თანხის გვერდით, განახლდება რეალურ დროში.
იურიდიული დათქმები: „ფაქტობრივი კურსი და კომისია დაფიქსირდება დადასტურების ეტაპზე“.
გრძელი კოდები: გამოიყენეთ tooltips/მეორადი ხაზი: „აშშ დოლარი - აშშ დოლარი“.
კონვერტაცია კალათაში: ნუ შეცვლით „მთლიანობას“ ახსნის გარეშე; აჩვენეთ გადაანგარიშების ხაზი.

7) წვდომა (A11y)

'role = „listbox/option“' ვალუტის სელექციონერთან.
კლავიატურის მხარდაჭერა: ისრები, Enter, Type-ahead კოდი/სახელი.
კითხვა SR- სთვის: „ჩვენების ვალუტა: UAH - უკრაინული გრივნა“.
ფერი არის მნიშვნელობის ერთადერთი გადამზიდავი (ყოველთვის არის კოდი/ტექსტი).
RTL: რიცხვები/კოდები 'dir = "ltr" "არაბული ხაზების შიგნით.

8) შესრულება და ქეშირება

კურსები - მეხსიერებაში + localStorage ერთად TTL (მაგალითად, 5 წთ).
Butch განახლებები: გადაანგარიშეთ ეკვივალენტები პაკეტებით (RequestAnimationFrame, 100-200 ms დებიუტი).
ნუ გახსენებთ ჩამონათვალის დამატებით გამეორებას კურსის რყევებით <ბარიერი (მაგალითად, 0,1%).

9) iGaming სპეციფიკა

ანგარიშის ვალუტა - ძირითადი ანგარიშგებები (ანაბრები, ბალანსი, ისტორია).
განაკვეთის ვალუტა: ჩვეულებრივ = ანგარიშის ვალუტა; თუ კიდევ ერთი მოცემულია, აჩვენეთ ორმაგი ბლოკი: „დაიწერა X XXX აშშ დოლარში (UAH- ში Y YYY)“.
ფიქსაცია გაანგარიშებისას: მოგება გადაკეთებულია კურსზე გაანგარიშების დროს, და არა განაკვეთები - ეს უნდა ნახოთ კუპონის/ისტორიის დეტალებში.
ანაბარი/გამომავალი: PSP/Bank- ის კურსი და კომისია ცალკე ხაზია; 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) Snippets

ვალუტის შეცვლა (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 latence: ვალუტის გადართვის დრო ყველა ველის განახლებამდე (მიზანი 150 ms).
Correctness rate: საფორტეპიანო ზარების წილი „არასწორი თანხებით“ (<0.2%).
Display vs account mismatch: მოვლენები, სადაც მომხმარებელი აბნევს ვალუტას (ჩვენ ამცირებს რჩევებს).
CTR კურსის მინიშნებები: დაწკაპუნება „დამატებითი ინფორმაცია კურსის/კომისიის შესახებ“.
ბილეთის ოფისის აბანდონი კონვერტაციის დროს: უარის თქმის წილი, რომელიც დაკავშირებულია თანხის „მოულოდნელ“ ცვლილებასთან.

14) QA ჩეკის სია

მნიშვნელობა და გამჭვირვალეობა

• ანგარიშის ან/და ოპერაციების ვალუტა ყველგან ჩანს.
• დოლარისთვის ნაჩვენებია ქვეყნის კოდი (აშშ დოლარი, CA დოლარი და ა.შ.).
• არსებობს სტრიქონი კურსის, განახლების თარიღისა და პროფილის/კომისიის შესახებ.

ფორმატი და სიზუსტე

• ათობითი გამონადენი ვალუტით (JPY = 0, KWD = 3, crypto = 8-მდე).
• ნომრის/ვალუტის ლოკალი შეესაბამება UI ენას.
• ისტორიული ოპერაციები არ არის დათვლილი „მიმდინარე კურსით“ ჩანაწერის გარეშე.

საქციელი

• ვალუტის გადართვა არ ცვლის გაშვებას დადასტურების გარეშე.
• ეკვივალენტი განახლებულია შეუფერხებლად და სწრაფად.
• ვალუტის სელექტორი კლავიატურაა ხელმისაწვდომი, Type-ahead მუშაობს.

iGaming სპეციფიკა

• კუპონში: გაუქმება/მოგება და მათი ვალუტა გაფორმებულია, ფიქსაციის კურსი მითითებულია.
• სალაროებში: PSP/ბანკის კომისიები ცალკე ჩანს.
• ლიმიტებში: ნაჩვენებია ორივე მნიშვნელობა (ანგარიში და ნაჩვენები).

RTL/A11y

• კოდები/თანხები სწორად იკითხება RTL- ში ('dir = „ltr“ რიცხვებისთვის).
• კონტრასტი და ფოკუს ინდიკატორები შეესაბამება AA- ს.

15) დოკუმენტაცია დიზაინის სისტემაში

კომპონენტები: 'CurrencySwitch', 'Money', 'FxNote', 'DualAmount'.
სიზუსტის/დამრგვალების პოლიტიკა და ერთიანი ფორმატის ფუნქცია.
წესები: „როდესაც დისკი-მხოლოდ“, „როდესაც მძიმე კონცერტი“, „როგორ უნდა აჩვენოთ სპრადი“.
ვალუტის ცნობარი: კოდი, სიმბოლო, რიგები, რეგიონალური სიმბოლოების კონფლიქტები.
Do/Don 't Gallery: „$ კოდის გარეშე“, შეყვანა, ფარული საკომისიო.

მოკლე რეზიუმე

ვალუტების გადართვა არ არის მხოლოდ სელექციონერი „ITC//$“. ეს არის ფულის მკაფიო მოდელი (ანგარიშით ვალუტა vs vs ოპერაცია), გულწრფელი კურსი კომისიასთან, სწორი იდაყვის ფორმატირება და შეყვანის ველების ფრთხილად ქცევა. დააფიქსირეთ წესები დიზაინის სისტემაში, ავტომატიზაცია მოახდინეთ კურსების ფორმატირებასა და ქეშირებაზე - და მომხმარებლები დამაჯერებლად იმუშავებენ თანხებით, არ ეჭვობენ ციფრებში და არ კარგავენ ფულს „უხილავი“ ნაკადებზე.