تعویض ارز در رابط

1) اصول

1. اول معنی، سپس UI. ارز حساب (حقیقت حسابداری) را از ارز نمایش (راحتی) و ارز معامله (تبدیل پول واقعی) جدا کنید.
2. ابهام صفر نمایش کد + نماد در معرض خطر سردرگمی ('US $'، 'CA $'، 'MXN'، 'R $'). برای ₴/₸/₼، همیشه کد را در جزئیات اضافه کنید.
3. یکپارچگی دوره. شما می توانید ببینید: منبع دوره، لحظه آخرین به روز رسانی، آیا کمیسیون/گسترش گنجانده شده است.
4. ثبات ورودی. تعویض ارز نباید مقادیر ورودی را بدون رضایت صریح (به ویژه در فرم های نرخ/سپرده) پرش کند.
5. محلی سازی فرمت ها محدود کننده ها، فضاها، علامت ارز - توسط محلی کاربر ؛ دقت - توسط ارز.

2) مدل های سوئیچینگ

فقط نمایش - تمام محاسبات در ارز حساب باقی می ماند، UI معادل ارز انتخاب شده را نشان می دهد. برای کاتالوگ، مشخصات، ابعاد استفاده کنید.
ترکیبی (تبدیل نرم): نمایش در ارز انتخاب شده + تایید معامله در ارز حساب (هر دو را نشان می دهد).
عامل (تبدیل سخت): کاربر ارز معامله را تغییر می دهد (سپرده/برداشت/نرخ). ما نیاز به دوره های صریح، کمیسیون، زمان تثبیت.

قانون: به طور پیش فرض - فقط نمایش داده می شود و تبدیل «سخت» را فقط در جریان های مربوطه (نقدی، برداشت، انتقال وجوه) تبدیل می کند.

3) کنترل و قرار دادن

سوئیچ ارز در پانل هدر/مشخصات (نماد «₴/€/$» یا کد ارز).
انتخاب: جستجو بر اساس کد/نام/نماد ؛ ارزهای انتخاب شده/مکرر - بالا.
در داخل فرم ها (سپرده/نرخ): انتخاب جمع و جور به سمت راست میدان مقدار، در کنار اشاره «معادل ≈ در XXX».
الگوی تلفن همراه: ورق پایین با یک لیست و ورودی برای فیلتر کردن.

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، سعی کنید
• 3 +: برخی از ZAR (2)، KWD (3)، ارزهای رمزنگاری (4-8)
• Cryptocurrencies: نمایش تا 8 کاراکتر (دقت پویا، اما با یک حد پایین برای خواندن).
• ارقام جدول: 'font-variant-numeric: tabular-numers;' برای تراز ستون.

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 €" - در کنار مقدار، رنگ خاموش، به روز شده در زمان واقعی است.
اخطار قانونی: «نرخ واقعی و کمیسیون در مرحله تأیید ثبت خواهد شد».
کدهای طولانی: از نکات ابزار/رشته ثانویه استفاده کنید: «US $ - US dollar».
تبدیل در سبد: «کل» را بدون توضیح تغییر ندهید ؛ خط شمارش را نشان می دهد.

7) در دسترس بودن (A11y)

'role = «listbox/option»' در انتخابگر ارز.
پشتیبانی از صفحه کلید: فلش، را وارد کنید، نوع پیش رو با کد/نام.
خواندن برای SR: «نمایش ارز: UAH - hryvnia اوکراین».
رنگ تنها رسانه معنی ≠ (همیشه کد/متن وجود دارد).
RTL: اعداد/کدهای "dir =" ltr "در رشته های عربی.

8) عملکرد و ذخیره سازی

دوره های آموزشی - در حافظه + localStorage با TTL (به عنوان مثال، 5 دقیقه).
به روز رسانی دسته: محاسبه معادل در دسته (requestAnimationFrame، debunks 100-200 میلی ثانیه).
یک لیست مجدد لیست اضافی را هنگامی که دوره نوسان <آستانه (به عنوان مثال، 0. 1%).

9) ویژگی های iGaming

ارز حساب - گزارش اولیه (سپرده ها، تعادل، تاریخ).
نرخ ارز: معمولا = ارز حساب ؛ اگر یکی دیگر از مشخص شده است، نشان می دهد یک بلوک دو: «بدهکار X XXX در USD (≈ Y YYY در UAH)».
حل و فصل رفع: برنده در نرخ در زمان حل و فصل تبدیل, شرط نیست - این باید در جزئیات کوپن/تاریخ دیده می شود.
سپرده/برداشت: نرخ و کمیسیون PSP/بانک - در یک خط جداگانه ؛ ETA با روش.
محدودیت های بازی مسئول: تعریف شده در ارز حساب ؛ اگر UI در یک ارز متفاوت باشد، هر دو مقدار را نشان می دهد.
مسابقات و جوایز: ارز صندوق جایزه ثابت است; هنگامی که نمایش داده می شود، معادل تقریبی، مشخص شده است.

10) ضد گلوله

تغییر مقدار «سحر و جادو» در فیلد ورودی هنگام تعویض ارز - بدون رضایت صریح.
استفاده از یک کاراکتر «$» بدون کد کشور.
کمیسیون پنهان در دانستن (بدون خط در مورد گسترش).
مخلوط کردن محلی و ارز (فرمت توسط «EN-US» برای «UAH»).
دقت سخت «2 کاراکتر» برای JPY/KRW یا «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) قطعه

سوئیچ ارز (واکنش، زمینه + بین المللی)

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: زمان از سوئیچ ارز برای به روز رسانی تمام زمینه ها (هدف ≤ 150 میلی ثانیه).
میزان صحت: سهم تماسها برای پشتیبانی از «مقادیر نادرست» (<0. 2%).
عدم تطابق نمایش در مقابل حساب: رویدادهایی که کاربر ارزها را گیج می کند (نکات پایین).
نکات دوره CTR: روی «بیشتر در مورد دوره/کمیسیون» کلیک کنید.
تخفیف نقدی در تبدیل: سهم شکستهای مرتبط با تغییر «ناگهانی» در مبلغ.

14) چک لیست QA

معنی و شفافیت

• ارز حساب و/یا معامله در همه جا قابل مشاهده است.
• $ کد کشور را نشان می دهد (US $، CA $، و غیره).
• یک خط در مورد نرخ، تاریخ به روز رسانی و گسترش/کمیسیون وجود دارد.

فرمت و دقت

• مکان های اعشاری توسط ارز (JPY = 0، KWD = 3، رمزنگاری = تا 8).
• شماره/ارز محلی مربوط به زبان UI است.
• معاملات تاریخی بدون علامت گذاری «با نرخ ارز فعلی» محاسبه نمی شوند.

رفتار ها

• تغییر ارز می کند ورود بدون تایید را تغییر دهید.
• معادل «≈» به راحتی و به سرعت به روز می شود.
• انتخاب ارز صفحه کلید در دسترس است، نوع پیش رو کار می کند.

ویژگی های iGaming

• در کوپن: شارژ/برنده و ارز خود را امضا, نرخ تثبیت نشان داده شده است.
• در تا: هزینه PSP/بانک به طور جداگانه دیده می شود.
• در حد: هر دو مقدار نشان داده شده است (حساب و نمایش داده شده).

RTL/A11y

• کدها/مقادیر به درستی در RTL خوانده می شوند («dir =» ltr «» برای اعداد).
• شاخص های کنتراست و تمرکز مربوط به AA است.

15) مستندات در سیستم طراحی

اجزاء: «CurrencySwitch»، «Money»، «FxNote»، «DualAmount».
سیاست دقیق/گرد کردن و عملکرد قالب بندی تک.
قوانین: «هنگامی که فقط صفحه نمایش»، «هنگامی که سخت تبدیل»، «چگونه برای نشان دادن گسترش».
مرجع ارز: کد، نماد، ارقام، برخورد شخصیت های منطقه ای.
گالری انجام/انجام ندهید: «$ بدون کد», پرش خودکار ورودی, کمیسیون پنهان.

خلاصه ای کوتاه

تعویض ارزها فقط یک انتخاب ₴/€/$ نیست. این یک مدل واضح از پول (ارز حساب در مقابل نمایش در مقابل عملیات)، نرخ منصفانه با کمیسیون، قالب بندی صحیح با محلی و رفتار دقیق از زمینه های ورودی است. قوانین را در سیستم طراحی ثابت کنید، قالب بندی و ذخیره دوره ها را به صورت خودکار انجام دهید - و کاربران با اطمینان با مقادیر کار می کنند، بدون شک تعداد و از دست دادن پول در گسترش «نامرئی».