Arayüzdeki para birimlerini değiştirme

1) İlkeler

1. Önce anlamı, sonra kullanıcı arayüzü. Görüntüleme para biriminden (kolaylık) ve işlem para biriminden (gerçek para dönüşümü) ayrı hesap para birimi (muhasebe gerçeği).
2. Sıfır belirsizlik. Karışıklık riski altında kod + sembolü göster ('US $', 'CA $', 'MXN', 'R $'). ₴/₸/₼ için, her zaman ayrıntılara kod ekleyin.
3. Kurs bütünlüğü. Görebilirsiniz: kursun kaynağı, son güncelleme anı, komisyon/spread dahil olup olmadığı.
4. Giriş kararlılığı. Para birimi değiştirme, açık onay olmadan giriş değerlerini "atlamamalıdır" (özellikle kur/mevduat formlarında).
5. Formatların yerelleştirilmesi. Sınırlayıcılar, boşluklar, para birimi işareti - kullanıcı yerel ayarına göre; Doğruluk - para birimi ile.

2) Anahtarlama modelleri

Yalnızca görüntüleme - Tüm hesaplamalar hesap para biriminde kalır, UI seçilen para birimindeki eşdeğeri gösterir. Katalog, profil, boyut için kullanın.
Hibrit (soft convert): Seçilen para biriminde görüntüleme + hesap para biriminde işlemin onaylanması (her ikisini de göster).
İşletim (sabit dönüştürme): Kullanıcı işlem para birimini değiştirir (para yatırma/çekme/faiz oranı). Açık kurslara, komisyonlara, sabitleme süresine ihtiyacımız var.

Kural: varsayılan olarak - yalnızca görüntüleme ve yalnızca ilgili akışlarda (nakit, para çekme, fon transferi) "sert" dönüşümü açın.

3) Kontroller ve yerleştirme

Üstbilgi/profil panelinde para birimi anahtarı ("₴/€/$" simgesi veya para birimi kodu).
Seçici: kod/isim/sembol ile arama; seçilmiş/sık para birimleri - üst.
Formların içinde (depozito/oran): miktar alanının sağındaki kompakt seçici, "XXX'de ≈ eşdeğeri" ipucunun yanında.
Mobil desen: filtreleme için bir liste ve giriş içeren alt sayfa.

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) Biçimlendirme ve doğruluk

Küçük birimler: Tüm minimum birimlerde (pennies, sent, satoshi) miktarları depolayın.

• 0: JPY, KRW, CLP
• 2: USD, EUR, UAH, TRY
• 3 +: bazı ZAR (2), KWD (3), kripto (4-8) para birimleri
• Kripto para birimleri: 8 karaktere kadar gösterir (dinamik doğruluk, ancak okunabilirlik için daha düşük bir sınırla).
• Tablo rakamları: 'font-variant-numeric: tabular-nums;' sütun hizalaması iç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 ve güncellemeler

Kaynak: kurs sağlayıcısını düzeltin (dahili fiyatlandırma/banka/FX-API).
Önbellek: Kursları makul sıklıkta güncelleyin (örn. Her 60-300 saniyede) + talep üzerine artan güncellemeler.
Sabitleme süresi: Ekran 'N dakika önce güncellendi've ödeme sırasında sabitleme süresi.
Yayılma/Komisyon: Açık bir satır gösterin: "Oran 1 USD = 36. 60 UAH (Spread 1 dahil. 5%)».
Yuvarlama: banka veya normal - birini seçin ve politikada düzeltin.

6) UX metni ve açıklamaları

Eşdeğer: "≈ 52. 10 €" - miktarın yanında, gerçek zamanlı olarak güncellenen sessiz renk.
Yasal uyarılar: "Gerçek oran ve komisyon onay adımına kaydedilecektir".
Uzun kodlar: araç ipuçlarını/ikincil dizeyi kullanın: "US $ - US dollar".
Sepetteki dönüşüm: açıklama yapmadan "toplam'ı değiştirmeyin; Yeniden sayım çizgisini göster.

7) Kullanılabilirlik (A11y)

'role = "listbox/option"' para birimi seçicisinde.
Klavye desteği: oklar, Enter, Kod/isme göre Type-ahead.
SR için okuma: "Para birimini göster: UAH - Ukrayna grivnası".
Renk ≠ tek anlam aracıdır (her zaman kod/metin vardır).
RTL: Arapça dizelerde'dir = 'ltr' cinsinden sayılar/kodlar.

8) Performans ve önbelleğe alma

Kurslar - TTL ile bellek + localStorage (örneğin, 5 dakika).
Toplu güncellemeler: Eşdeğerleri gruplar halinde yeniden hesaplayın (requestAnimationFrame, debunks 100-200 ms).
Kurs <eşiği dalgalandığında ekstra bir liste yeniden yönlendiricisini tetiklemeyin (örneğin, 0. 1%).

9) iGaming'in özellikleri

Hesap para birimi - temel raporlama (mevduat, denge, geçmiş).
Kur para birimi: genellikle = hesap para birimi; Başka bir tane belirtilmişse, çift blok gösterin: "USD cinsinden Debited X XXX (UAH cinsinden ≈ Y YYY)".
Uzlaşma Sabitleme: Kazançlar, bahisler değil, uzlaşma sırasındaki oranda dönüştürülür - bu, kupon/tarih ayrıntılarında görülmelidir.
Para yatırma/çekme: PSP/bankanın oranı ve komisyonu - ayrı bir satırda; ETA yöntemi ile.
Sorumlu oyun limitleri: hesap para biriminde tanımlanır; Kullanıcı arayüzü farklı bir para birimindeyse, her iki değeri de gösterin.
Turnuvalar ve ödüller: ödül fonu para birimi sabittir; Görüntülendiğinde, eşdeğer yaklaşık, işaretlidir.

10) Antipatterns

Para birimini değiştirirken giriş alanında "Magic" değeri değişir - açık onay olmadan.
Ülke kodu olmadan bir "$" karakterinin kullanılması.
Bilinen gizli komisyon (yayılma hakkında satır yok).
Yerel ve para birimini karıştırma ('UAH' için'en-US'ile biçimlendirme).
JPY/KRW için "2 karakter" veya tüm kripto para birimleri için "8 karakter" hassasiyeti.
Tarihsel işlemlerin "geriye dönük olarak" mevcut döviz kuru üzerinden yeniden hesaplanması - "yeniden hesaplama" işareti olmadan.

11) Tasarım sistemi belirteçleri (örnek)

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) Parçacıklar

Para birimi anahtarı (React, context + 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>;
}

Çift Ekran (Operasyonel Dönüşüm)

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 gecikmesi: para birimi anahtarından tüm alanların güncellenmesine kadar geçen süre (hedef ≤ 150 ms).
Doğruluk oranı: "Yanlış miktarlar" için destek çağrılarının payı (<0. 2%).
Ekran vs hesap uyumsuzluğu: kullanıcının para birimlerini karıştırdığı olaylar (daha düşük ipuçları).
TO kursu ipuçları: "Kurs/komisyon hakkında daha fazla" seçeneğine tıklanır.
Dönüşümde nakit indirimi: Tutardaki'ani'bir değişiklikle ilişkili başarısızlıkların payı.

14) KG kontrol listesi

Anlam ve şeffaflık

• Hesabın ve/veya işlemin para birimi her yerde görülebilir.
• $ ülke kodunu gösterir (US $, CA $, vb.).
• Oran, güncelleme tarihi ve yayılma/komisyon hakkında bir satır var.

Format ve doğruluk

• Para birimine göre ondalık basamaklar (JPY = 0, KWD = 3, kripto = 8'e kadar).
• Sayı/para birimi yerel ayarı UI diline karşılık gelir.
• Tarihsel işlemler işaretlenmeden "cari döviz kuru" üzerinden yeniden hesaplanamaz.

Davranış

• Para birimi değişimi, onay olmadan girişi değiştirmez.
• "≈" eşdeğeri sorunsuz ve hızlı bir şekilde güncellenir.
• Para birimi seçici klavye ile erişilebilir, Type-ahead çalışır.

iGaming özellikleri

• Kuponda: şarj/kazan ve para birimleri imzalanır, sabitleme oranı belirtilir.
• kadar: PSP/banka ücretleri ayrı ayrı görülür.
• Limitlerde: her iki değer de gösterilir (hesap ve görüntülenir).

RTL/A11y

• Kodlar/miktarlar RTL'de doğru okunur (sayılar için'dir = 'ltr' ').
• Kontrast ve odak göstergeleri AA'ya karşılık gelir.

15) Tasarım sistemindeki belgeler

Bileşenler: 'CurrencySwitch', 'Money', 'FxNote', 'DualAmount'.
Hassas/yuvarlama politikası ve tek biçimlendirme işlevi.
Kurallar: "Yalnızca görüntülendiğinde", "zor dönüştürüldüğünde", "yayılma nasıl gösterilir".
Para birimi referansı: kod, sembol, rakamlar, bölgesel karakter çarpışmaları.
Galeri Yap/Yapma: "Kodsuz $", otomatik atlama girişi, gizli komisyonlar.

Kısa özet

Para birimlerini değiştirmek sadece bir ₴/€/$ seçici değildir. Bu, açık bir para modelidir (hesap para birimi vs görüntüleme vs işlem), komisyonla adil oran, yerel ayarlarla doğru biçimlendirme ve giriş alanlarının dikkatli davranışıdır. Tasarım sistemindeki kuralları düzeltin, kursların biçimlendirilmesini ve önbelleğe alınmasını otomatikleştirin - ve kullanıcılar güvenle miktarlarla çalışacak, sayılardan şüphe etmeyecek ve "görünmez" spreadlerde para kaybetmeyeceklerdir.