feat: create kyc page with api

src/widgets/converter-page/ui/CommissionPanel.tsx

@@ -0,0 +1,49 @@
+import { TIERS } from '@widgets/currency-converter'
+import styles from './CommissionPanel.module.css'
+
+const ru = (n: number) => n.toLocaleString('ru-RU')
+
+interface Props {
+  amount: number
+  progress: number
+  commission: number
+  effectiveRate: number
+}
+
+export function CommissionPanel({ amount, progress, commission, effectiveRate }: Props) {
+  return (
+    <div>
+      <div className={styles.title}>КОМИССИЯ СЕРВИСА</div>
+
+      <div className={styles.table}>
+        {TIERS.map((tier, i) => (
+          <div
+            key={i}
+            className={styles.row}
+            data-active={(amount >= tier.min && amount <= tier.max) || undefined}
+          >
+            <span className={styles.range}>
+              {ru(tier.min)} – {ru(tier.max)} ₽
+            </span>
+            <span className={styles.pct}>{tier.pct}%</span>
+          </div>
+        ))}
+      </div>
+
+      <div className={styles.progressBar}>
+        <div className={styles.progressFill} style={{ width: `${progress}%` }} />
+      </div>
+
+      <div className={styles.summary}>
+        <span className={styles.summaryLabel}>Комиссия</span>
+        <span className={styles.summaryValue}>
+          {commission.toLocaleString('ru-RU', { maximumFractionDigits: 2 })} ₽
+        </span>
+      </div>
+      <div className={styles.summary}>
+        <span className={styles.summaryLabel}>Курс с комиссией</span>
+        <span className={styles.summaryValue}>{effectiveRate.toFixed(2)} ₽</span>
+      </div>
+    </div>
+  )
+}