החלפת מטבעות בממשק

1) עקרונות

1. קודם כל המשמעות, אחר כך UI. מטבע חשבון נפרד (אמת חשבונאית) ממטבע תצוגה (נוחות) ומטבע העברה (המרת כסף בפועל).
2. אפס אי בהירות. הצג קוד + סמל בסיכון לבלבול (”US $”, ”CA $”, ”MXN”, ”R $”). עבור ₴/₸/₼, תמיד להוסיף קוד בפרטים.
3. יושרה כמובן. ניתן לראות: מקור הקורס, רגע העדכון האחרון, האם נכללות עמלות/התפשטות.
4. יציבות קלט. שינוי מטבע לא צריך ”לקפוץ” ערכי כניסה ללא הסכמה מפורשת (במיוחד בטפסי דירוג/הפקדה).
5. לוקליזציה של פורמטים. Delimiters, רווחים, סימן מטבע - על ידי המשתמש locale; דיוק - על ידי מטבע.

2) החלפת מודלים

תצוגה בלבד - כל החישובים נותרו במטבע החשבון, UI מציג את המקבילה במטבע הנבחר. השתמש לקטלוג, פרופיל, מימד.
היברידי (המרה רכה): הצג במטבע הנבחר + אישור של העסקה במטבע החשבון (הצג את שניהם).
הפעלה (המרה קשה): המשתמש משנה את מטבע העסקה (הפקדה/משיכה/קצב). אנחנו צריכים קורסים מפורשים, עמלות, זמן קיבעון.

חוק: כברירת מחדל - הצגה בלבד, והפעל את ההמרה ”קשה” רק בזרימות המתאימות (מזומן, משיכה, העברת כספים).

3) שליטה ומיקום

מתג מטבע בפאנל כותרת/פרופיל (”₴/€/$” אייקון או קוד מטבע).
בחר: חיפוש לפי קוד/שם/סמל; מטבעות נבחרים/תכופים - למעלה.
בתוך הטפסים (deposit/rate): סלקטור קומפקטי מימין לשדה הכמות, ליד הרמז ”composition” המקביל ל ־ 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) מטבעות
• Cryptocurencies: הצג עד 8 תווים (דיוק דינמי, אך עם קשירה נמוכה יותר לקריאה).
• ספרות טבלה: ”פונט-וריאנט-מספרי: 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 יורו" - ליד הסכום, צבע מרופד, מעודכן בזמן אמת.
התקוממויות משפטיות: ”התעריף והוועדה בפועל יירשמו בצעד האישור”.
קודים ארוכים: השתמש בקצות כלים/מחרוזת משנית: ”דולר אמריקאי”.
המרה בסל: לא לשנות את ”הכולל” ללא הסבר; תראה את הספירה החוזרת.

7) זמינות (A11y)

Role = ”listbox/option” ”” בבחירת המטבע.
תמיכה במקלדת: חיצים, הזן, סוג קדימה על ידי קוד/שם.
קריאה עבור SR: ”הצג מטבע: UAH - אוקראינית hryvnia”.
צבע הוא התווך היחיד במשמעות (תמיד יש קוד/טקסט).
RTL: מספרים/קודים ב- ”dir” = ”סגן” בתוך המיתרים הערביים.

8) ביצועים והצטיידות

קורסים - בזיכרון + אחסון עם TTL (לדוגמה, 5 דקות).
עדכוני Batch: לחשב מחדש מקבילות בחבורות ( AnimationPrame, debunks 100-200 ms).
אל תפעיל רשימה נוספת חוזרת כאשר המסלול משתנה <סף (לדוגמה, 0. 1%).

9) הפרטים של iGaming

מטבע חשבון - דיווח בסיסי (פיקדונות, איזון, היסטוריה).
מטבע דירוג: בדרך כלל מטבע חשבון; אם צוין אחרת, הצג בלוק כפול: ”Divited X XXX in USD (ראשי תיבות של Y YYYY in UAH)”.
תיקון התנחלות: הזכיות מומרות בקצב בזמן ההתנחלות, לא בהימורים - יש לראות זאת בפרטי הקופון/היסטוריה.
הפקדה/משיכה: שיעור ועמלה של PSP/Bank - בקו נפרד; זמן הגעה משוער לפי שיטה.
גבולות משחק אחראיים: מוגדר במטבע החשבון; אם 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) קטעים

מתג מטבע (תגובה, הקשר + 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).
שיעור התקינות: חלק הקריאות לתמיכה ב ”סכומים לא נכונים” (<0. 2%).
הצג נגד אי התאמה לחשבון: אירועים בהם המשתמש מבלבל בין מטבעות (רמזים נמוכים).
טיפים לקורס CTR: קליקים על ”יותר על קורס/עמלה”.
הנחה במזומן על המרה: נתח הכשלונות הקשורים לשינוי ”פתאומי” בסכום.

14) רשימת QA

משמעות ושקיפות

[ ] מטבע החשבון ו/או העסקה גלויים לעין בכל מקום.

[ ] דולר מראים את קוד המדינה (דולר אמריקאי, $ CA וכו ').

[ ] יש קו על התעריף, עדכון תאריך והתפשטות/עמלה.

תבנית ודיוק

[ ] מקומות עשרוניים לפי מטבע (JPY = 0, KWD = 3, קריפטו = עד 8).

[ ] מקום המספר/מטבע מתאים לשפת UI.

[ עסקאות היסטוריות ] אינן מחושבות מחדש ”בקצב החליפין הנוכחי” ללא סימון.

התנהגות

[ ] מטבע לא משנה את הכניסה ללא אישור.

[ ] המקבילה ה ”יומית” מתעדכנת בצורה חלקה ומהירה.

[ ] בחירת המטבע היא נגישה למקלדת, עבודות סוג קדימה.

iGaming-port

[ ] בקופון: חיוב/ניצחון והמטבע שלהם חתומים, שיעור הקיבעון מופיע.

[ ] בקופה: עמלות PSP/בנק נראים בנפרד.

[ ] בגבולות: שני הערכים מוצגים (תיאור ומוצגים).

RTL/A11y

[ ] קודים/כמויות נקראים נכון ב- RTL ('dir =' ltr 'עבור מספרים).

[ ] מחווני ניגוד וריכוז תואמים לאלכוהוליסטים אנונימיים.

15) תיעוד במערכת התכנון

רכיבים: ”החלפה”, ”כסף”, ”FxNote”, ”DualSume”.
מדיניות דיוק/עיגול ופונקציית עיצוב יחידה.
חוקים: ”כאשר תצוגה בלבד”, ”כאשר קשה להמיר”, ”איך להראות התפשטות”.
התייחסות למטבע: קוד, סמל, ספרות, התנגשויות אופי אזוריות.
גלריה דו/אל: ”$ ללא קוד”, קלט קפיצה אוטומטית, עמלות נסתרות.

סיכום קצר

החלפת מטבעות אינה רק בחירה ₴/€/$. זהו מודל ברור של כסף (מטבע חשבון נגד תצוגה נגד פעולה), שיעור הוגן עם עמלה, עיצוב נכון על ידי מיקום והתנהגות זהירה של שדות קלט. תקן את הכללים במערכת העיצוב, תקן אוטומטית את עיצוב הקורסים והמטמונים - והמשתמשים יעבדו בביטחון עם סכומים, לא יפקפקו במספרים ולא יפסידו כסף על התפשטות ”בלתי נראית”.