इंटरफ़ेस में मुद्राएँ बदलना
1) सिद्धांत
1. पहले अर्थ, फिर यूआई। प्रदर्शन मुद्रा (सुविधा) और लेनदेन मुद्रा (वास्तविक मुद्रा रूपांतरण) से अलग खाता मुद्रा (लेखा सत्य)।
2. शून्य अस्पष्टता। भ्रम के जोखिम पर कोड + प्रतीक दिखाएं ('यूएस $', 'सीए $', 'एमएक्सएन', 'आर $')। ₴/₸/₼ के लिए, हमेशा विवरण में कोड जोड़ें।
3. पाठ्यक्रम अखंडता। आप देख सकते हैं: पाठ्यक्रम का स्रोत, अंतिम अपडेट का क्षण, चाहे आयोग/प्रसार शामिल हों।
4. इनपुट स्थिरता। मुद्रा स्विचिंग को स्पष्ट सहमति (विशेष रूप से दर/जमा रूपों में) के बिना प्रवेश मूल्यों को "कूद" नहीं करना चाहिए।
5. प्रारूपों का स्थानीयकरण। परिसीमन, रिक्त स्थान, मुद्रा हस्ताक्षर - उपयोगकर्ता लोकेल द्वारा; सटीकता - मुद्रा द्वारा।
2) स्विचिंग मॉडल
डिस्प्ले-ओनली - सभी गणनाएं खाता मुद्रा में बनी हुई हैं, यूआई चयनित मुद्रा में बराबर दिखाता है। कैटलॉग, प्रोफ़ाइल, आयाम के लिए उपयोग करें।
हाइब्रिड (सॉफ्ट कन्वर्ट): खाता मुद्रा (दोनों दिखाएं) में लेनदेन की चयनित मुद्रा + पुष्टि में प्रदर्शित करें।
ऑपरेटिंग (हार्ड कन्वर्ट): उपयोगकर्ता लेनदेन मुद्रा (जमा/निकासी/दर) को बदल देता है। हमें स्पष्ट पाठ्यक्रमों, आयोगों, निर्धारण समय की आवश्यकता है।
नियम: डिफ़ॉल्ट रूप से - केवल डिस्प्ले-ओनली, और "हार्ड" रूपांतरण को केवल इसी प्रवाह (नकदी, निकासी, धन का हस्तांतरण) में चालू करें।
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: जेपीवाई, केआरडब्ल्यू, सीएलपी
- 2: USD, EUR, UAH, TRY
- 3 +: कुछ ZAR (2), KWD (3), क्रिप्टो (4-8) मुद्राएँ
- क्रिप्टोकरेंसी: 8 वर्णों तक दिखाएं (गतिशील सटीकता, लेकिन पढ़ाई के लिए कम बाध्य के साथ)।
- तालिका अंक: 'फ़ॉन्ट-वेरिएंट-न्यूमेरिक: टैबुलर-नम्स;' स्तंभ संरेखण के लिए।
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) पाठ्यक्रम और अपडेट
स्रोत: पाठ्यक्रम प्रदाता (आंतरिक मूल्य निर्धारण/बैंक/एफएक्स-एपीआई) को ठीक करें।
कैश: उचित आवृत्ति के साथ पाठ्यक्रम अद्यतन करें (उदा। हर 60-300 सेकंड) + मांग पर वृद्धिशील अपडेट।
निर्धारण समय: 'अद्यतन एन मिनट पहले' और चेकआउट पर निर्धारण समय प्रदर्शित करें।
स्प्रेड/कमीशन: एक स्पष्ट लाइन दिखाएं: "दर 1 USD = 36। 60 यूएएच (स्प्रेड 1 शामिल है। 5%)».
राउंडिंग: बैंक या नियमित - एक का चयन करें और इसे नीति में ठीक करें।
6) यूएक्स पाठ और स्पष्टीकरण
समतुल्य: "≈ 52। 10 €" - राशि के बगल में, मौन रंग, वास्तविक समय में अद्यतन।
कानूनी चेतावनी: "वास्तविक दर और आयोग पुष्टि चरण में दर्ज किया जाएगा।"
लंबे कोड: टूलटिप्स/सेकेंडरी स्ट्रिंग का उपयोग करें: "यूएस $ - यूएस डॉलर।"
टोकरी में रूपांतरण: स्पष्टीकरण के बिना "कुल" को न बदलें; रिकाउंट लाइन दिखाएँ।
7) उपलब्धता (A11y)
मुद्रा चयनकर्ता पर 'रोल = "लिस्टबॉक्स/विकल्प"।
कुंजीपट समर्थन: तीर, दर्ज करें, कोड/नाम से आगे टाइप करें.
एसआर के लिए पढ़ ना: "प्रदर्शन मुद्रा: यूएएच - यूक्रेनी hryvnia।"
रंग - अर्थ का एकमात्र माध्यम (हमेशा कोड/पाठ होता है)।
RTL: संख्या/कोड 'dir = "ltr" में अरबी तार के अंदर।
8) प्रदर्शन और कैशिंग
पाठ्यक्रम - टीटीएल के साथ स्मृति + लोकसंग्रहण में (उदाहरण के लिए, 5 मिनट)।
बैच अपडेट: बैचों में समकक्षों की पुनरावृत्ति ( एनिमेशनफ्रेम, डिबंक 100-200 एमएस)।
जब पाठ्यक्रम में उतार-चढ़ाव आता है (उदाहरण के लिए, 0। 1%).
9) iGaming की बारीकियां
लेखा मुद्रा - मूल रिपोर्टिंग (जमा, शेष, इतिहास)।
दर मुद्रा: आमतौर पर = खाता मुद्रा; यदि किसी अन्य को निर्दिष्ट किया जाता है, तो एक डबल ब्लॉक दिखाएं: "USD में डेबिटेड X XXX (UAH में YY YY)।"
सेटलमेंट फिक्सिंग: जीत को निपटान के समय दर पर परिवर्तित किया जाता है, दांव नहीं - इसे कूपन/इतिहास विवरण में देखा जाना चाहिए।
जमा/निकासी: पीएसपी/बैंक की दर और कमीशन - एक अलग लाइन में; विधि से ईटीए।
जिम्मेदार खेल सीमाएं: खाता मुद्रा में परिभाषित; यदि यूआई एक अलग मुद्रा में है, तो दोनों मूल्यों को दिखाएं।
टूर्नामेंट और पुरस्कार: पुरस्कार राशि मुद्रा तय है; जब प्रदर्शित किया जाता है, समतुल्य अनुमानित है, चिह्नित
10) एंटीपैटर्न
मुद्रा को स्विच करते समय इनपुट क्षेत्र में "जादू" मूल्य परिवर्तन - स्पष्ट सहमति के बिना।
देश कोड के बिना एक "$" अक्षर का उपयोग।
ज्ञान में छिपा हुआ आयोग (प्रसार के बारे में कोई पंक्ति नहीं)।
मिक्सिंग लोकेल और मुद्रा ('यूएएच' के लिए 'एन-यूएस' द्वारा प्रारूप)।
सभी क्रिप्टोकरेंसी के लिए JPY/KRW या "8 वर्ण" के लिए "2 वर्ण" की कठिन सटीकता।
वर्तमान विनिमय दर पर ऐतिहासिक लेनदेन "पूर्वव्यापी" का पुनर्गणना - "पुनर्गणना" के बिना।
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 विलंबता: मुद्रा स्विच से सभी क्षेत्रों के अद्यतन (लक्ष्य ≤ 150 ms) तक का समय।
शुद्धता दर: "गलत मात्रा" के लिए समर्थन करने के लिए कॉल का हिस्सा (<0। 2%).
प्रदर्शन बनाम खाता बेमेल: उन घटनाओं जहां उपयोगकर्ता मुद्राओं (कम संकेत) को भ्रमित करता है।
सीटीआर कोर्स टिप्स: "पाठ्यक्रम/आयोग के बारे में अधिक" पर क्लिक करें।
रूपांतरण पर नकद छूट: राशि में "अचानक" परिवर्तन से जुड़ी विफलताओं का हिस्सा।
14) क्यूए चेकलिस्ट
अर्थ और पारदर्शिता
- खाते और/या लेनदेन की मुद्रा हर जगह दिखाई देती है।
- $ देश कोड (यूएस $, सीए $, आदि) दिखाता है।
- दर, अद्यतन तिथि और प्रसार/कमीशन के बारे में एक पंक्ति है।
प्रारूप और सटीकता
- मुद्रा द्वारा दशमलव स्थान (JPY = 0, KWD = 3, क्रिप्टो = 8 तक)।
- संख्या/मुद्रा स्थान यूआई भाषा से मेल खाता है।
- ऐतिहासिक लेनदेन को बिना चिह्नित किए "वर्तमान विनिमय दर पर" पुनर्गणना नहीं की जाती है।
व्यवहार
- मुद्रा परिवर्तन पुष्टि के बिना प्रविष्टि को नहीं बदलता है।
- "≈" समकक्ष को आसानी से और जल्दी से अपडेट किया जाता है।
- मुद्रा चयनकर्ता कीबोर्ड-सुलभ है, टाइप-फॉरवर्ड काम करता है।
iGaming-बारीकियों
- कूपन में: चार्ज/जीत और उनकी मुद्रा पर हस्ताक्षर किए जाते हैं, निर्धारण दर का संकेत दिया जाता है।
- तक: PSP/बैंक शुल्क अलग से देखा जाता है।
- सीमाओं में: दोनों मान दिखाए जाते हैं (खाता और प्रदर्शित)।
RTL/A11y
- कोड/मात्रा RTL में सही ढंग से पढ़े जाते हैं (संख्या के लिए 'dir = "ltr"')।
- कंट्रास्ट और फोकस संकेतक एए के अनुरूप हैं।
15) डिजाइन प्रणाली में प्रलेखन
घटक: ' स्विच', 'मनी', 'FxNote', 'DualMont'।
परिशुद्धता/गोलाकार नीति और एकल स्वरूपण कार्य।
नियम: "जब प्रदर्शन-केवल", "जब हार्ड-रूपांतरित होता है", "प्रसार कैसे दिखाएं।"
मुद्रा संदर्भ: कोड, प्रतीक, अंक, क्षेत्रीय वर्ण टकराव।
गैलरी करो/मत करो: "$ बिना कोड के", ऑटो जंप इनपुट, छिपे हुए कमीशन।
संक्षिप्त सारांश
मुद्राओं को बदलना सिर्फ एक ₴/€/$ चयनकर्ता नहीं है। यह पैसे का एक स्पष्ट मॉडल है (खाता मुद्रा बनाम प्रदर्शन बनाम संचालन), कमीशन के साथ उचित दर, लोकेल द्वारा सही स्वरूपण और इनपुट क्षेत्रों का सावधानीपूर्वक व्यवहार। डिजाइन प्रणाली में नियमों को ठीक करें, पाठ्यक्रमों के स्वरूपण और कैशिंग को स्वचालित करें - और उपयोगकर्ता आत्मविश्वास से मात्रा के साथ काम करेंगे, संख्याओं पर संदेह नहीं करेंगे और "अदृश्य" फैलाव पर पैसा नहीं खोएंगे।