在接口中切换货币

1）原则

1.首先是意义，然后是UI。将帐户货币（会计真理）与显示货币（便利）和交易货币（实际货币转换）分开。
2.零歧义。在出现溷淆风险时显示代码+符号（'US$'、'CA$'、'MXN'、'R$'）。对于₴/₸/₼-始终在详细信息中添加代码。
3.课程诚实。可以看出：课程来源，最新更新的时刻，是否包括佣金/sprad。
4.输入稳定性。货币转换不得未经明确同意（尤其是在利率/存款形式中）"跳跃"输入值。
5.格式本地化。分隔符，空格，货币符号-沿着用户的位置；精确度按货币计算。

2）开关型号

显示（仅显示）：所有结算均以帐户货币进行,UI以所选货币显示等效值。用于目录、配置文件、分析。
溷合体（soft convert）：以选定货币显示+以帐户货币确认交易（我们同时显示两者）。
运营（硬转换）：用户更改交易货币（存款/退款/利率）。我们需要明确的课程，佣金，固定时间。

规则：默认情况下,仅显示,"硬"转换仅在相应的流（结帐、结帐、资金转移）中启用。

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）格式和精度

次要单位：将金额存储在整个最小单位（便士，美分，satoshi）中。

• 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/佣金： 显示一个明确的字符串："汇率1 USD=36.60 UAH（包括sprad 1.5%)».

四舍五入：银行或常规-选择一个并记录在政治中。

6） UX文本和解释

等效项："≈ 52.10-在颜色柔和的金额旁边实时更新。

法律条款： "实际路线和佣金将记录在确认步骤中。"

长代码：使用tooltips/次要字符串："US$-美元"。
篮子里的转换：不要在没有解释的情况下改变"总数"；显示重新计票的行。

7）可用性（A11y）

货币选择器中的'role='listbox/option'。
键盘支持：箭头,Enter, Type-ahead,按代码/名称。
阅读SR："显示货币：UAH-乌克兰格里夫纳"。
颜色≠唯一的意义载体（总是有代码/文本）。
RTL：阿拉伯语行中"dir="ltr"中的数字/代码。

8）表演和缓存

课程在具有TTL的存储器+localStorage中（例如5分钟）。
Butch更新：用包重新计算等效项（requestAnimationFrame, debowns 100-200 ms）。
在汇率波动<阈值（例如,0.1%）时,不要触发多余的列表继电器。

9） iGaming的细节

帐户货币-基本报告（存款，资产负债表，历史记录）。
利率货币：通常=帐户货币；如果另一个设置为-显示双块："注销X XXX至USD（≈ Y YYY至UAH）"。
结算中的固定：在结算时按汇率而不是费率转换获胜-这必须在优惠券/历史细节中可见。
存款/提取：PSP/银行的课程和佣金-单独一行；ETA方法。
负责任的游戏限制：以帐户货币确定；如果UI是其他货币-显示两个值。
比赛和奖品：确定奖金的货币；显示时，等效项为指示性，带有标记。

10）反模式

货币转换时输入字段中值的"神奇"变化-未经明确同意。
使用一个没有国家代码的"$"字符。
隐藏佣金是最新的（没有关于sprad的行）。
混合本地和货币（格式为"UAH"的"en-US"）。
JPY/KRW的"2个标志"或所有cryptocurrency的"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 latency：从货币切换到更新所有字段的时间（目标≤ 150毫秒）。
Correctness rate：以"不正确金额"（<0.2%）向札幌申请的比例。
Display vs account mismatch：用户溷淆货币的事件（通过减少提示）。
CTR课程提示：点击查看有关课程/佣金的更多信息。
转换中的Abandon结账：与"突然"金额变化有关的故障率。

14） QA支票清单

含义和透明度

• 任何地方都可以看到帐户和/或交易的货币。
• 显示了$的国家代码（US$, CA$等）。
• 有关于课程、更新日期和sprad/佣金的行。

格式和准确性

• 货币十进制（JPY=0, KWD=3, crypto=最多8）。
• 数字/货币区域对应于UI语言。
• 历史操作未按"当前课程"重新计算而没有标记。

行为行为

• 货币转换不会在没有确认的情况下改变输入。
• "≈"等效项以平稳和快速的方式更新。
• 键盘货币选择器可用,Type-ahead工作。

iGaming特点

• 优惠券：注销/赢利及其货币已签名,固定汇率已注明。
• 在结帐处：PSP/银行佣金可单独看到。
• 限制：显示两个值（帐户和显示）。

RTL/A11y

• 在RTL中正确读取代码/和数（数字为'dir='ltr'）。
• 对比度和焦点指标对应于AA。

15）设计系统中的文档

组件："CurrencySwitch"，"Money"，"FxNote"，"DualAmount"。
精度/四舍五入策略和单个格式化功能。

规则： "何时只显示"，"何时进行硬转换"，"如何显示sprad。"

货币目录：代码、符号、位、区域字符冲突。
Do/Do n't Gallery： "$not code"、自动喷射输入、隐藏佣金。

简短的摘要

货币转换不仅仅是"₴/€/$"选择器。这是一种清晰的货币模型（帐户货币vs映射vs手术），具有佣金的诚实路线，正确的本地格式以及精益的输入字段行为。记录设计系统中的规则，自动化课程的格式和缓存-用户将自信地处理金额，而不必怀疑数字，而不必在"隐形"sprads上亏损。