111 lines
3.8 KiB
TypeScript
111 lines
3.8 KiB
TypeScript
import { GAS_PRICE, USDT_RATE } from '@shared/config/constants'
|
||
import { useConverter } from '../model/useConverter'
|
||
import { AgreementCheckbox } from './AgreementCheckbox'
|
||
import { CommissionTable } from './CommissionTable'
|
||
import styles from './Converter.module.css'
|
||
import { Title } from '@shared/ui/Title/Title'
|
||
|
||
export function Converter() {
|
||
const c = useConverter({ usdtRate: USDT_RATE })
|
||
|
||
return (
|
||
<section className={styles.section} id="converter">
|
||
<div className={styles.wrap}>
|
||
<div className={styles.header}>
|
||
<div>
|
||
<Title>Конвертация</Title>
|
||
<div className={styles.subtitle}>Данные обновляются в реальном времени</div>
|
||
</div>
|
||
<div className={styles.pills}>
|
||
<div className={styles.pill}>
|
||
Цена газа в RUB <span className={styles.pillValue}>{GAS_PRICE.toFixed(2)} RUB</span>
|
||
</div>
|
||
<div className={styles.pill}>
|
||
USDT/RUB <span className={styles.pillValue}>{USDT_RATE.toFixed(2)} ₽</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div className={styles.body}>
|
||
<div>
|
||
<div className={styles.tabs}>
|
||
<button
|
||
type="button"
|
||
className={styles.tab}
|
||
data-active={c.mode === 'buy' || undefined}
|
||
onClick={() => c.setMode('buy')}
|
||
>
|
||
КУПИТЬ
|
||
</button>
|
||
<button
|
||
type="button"
|
||
className={styles.tab}
|
||
data-active={c.mode === 'sell' || undefined}
|
||
onClick={() => c.setMode('sell')}
|
||
disabled
|
||
>
|
||
ПРОДАТЬ
|
||
</button>
|
||
</div>
|
||
|
||
<div className={styles.field}>
|
||
<div className={styles.fieldLabel}>Конвертируете</div>
|
||
<div className={styles.fieldInput}>
|
||
<input
|
||
type="text"
|
||
value={c.rubVal}
|
||
onChange={(e) => c.updateRub(e.target.value)}
|
||
placeholder="0"
|
||
inputMode="decimal"
|
||
/>
|
||
<div className={styles.currency}>
|
||
<span className={`${styles.currencyIcon} ${styles.currencyRub}`}>₽</span> RUB
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div className={styles.swapWrap}>
|
||
<button
|
||
type="button"
|
||
className={styles.swapBtn}
|
||
aria-label="Поменять направление"
|
||
>
|
||
<svg width={16} height={16} viewBox="0 0 16 16" fill="none">
|
||
<path
|
||
d="M8 2v12M4 10l4 4 4-4"
|
||
stroke="currentColor"
|
||
strokeWidth={1.5}
|
||
strokeLinecap="round"
|
||
strokeLinejoin="round"
|
||
/>
|
||
</svg>
|
||
</button>
|
||
</div>
|
||
|
||
<div className={styles.field}>
|
||
<div className={styles.fieldLabel}>Получаете</div>
|
||
<div className={styles.fieldInput}>
|
||
<input type="text" value={c.usdtVal} readOnly />
|
||
<div className={styles.currency}>
|
||
<span className={`${styles.currencyIcon} ${styles.currencyUsdt}`}>₮</span> USDT
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<CommissionTable
|
||
amount={c.numRub}
|
||
progress={c.progress}
|
||
commission={c.commission}
|
||
effectiveRate={c.effectiveRate}
|
||
/>
|
||
</div>
|
||
|
||
<div className={styles.bottom}>
|
||
<AgreementCheckbox checked={c.agreed} onToggle={() => c.setAgreed(!c.agreed)} />
|
||
</div>
|
||
</div>
|
||
</section>
|
||
)
|
||
}
|