add staking page
This commit is contained in:
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
4
dist/index.html
vendored
4
dist/index.html
vendored
@@ -5,8 +5,8 @@
|
||||
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>ЭКСА — Ваш мост в мир цифровых активов</title>
|
||||
<script type="module" crossorigin src="/assets/index-DO4w311N.js"></script>
|
||||
<link rel="stylesheet" crossorigin href="/assets/index-BqMPDWqk.css">
|
||||
<script type="module" crossorigin src="/assets/index-BYdWOI3m.js"></script>
|
||||
<link rel="stylesheet" crossorigin href="/assets/index-BtHpZOfG.css">
|
||||
</head>
|
||||
<body>
|
||||
<div id="root"></div>
|
||||
|
||||
@@ -7,7 +7,12 @@ export function PoolsPage() {
|
||||
<header className={styles.head}>
|
||||
<h1 className={styles.title}>Пулы</h1>
|
||||
<p className={styles.subtitle}>
|
||||
Ликвидность в пулах Uniswap v3 (ETH). Комиссия сервиса на депозит — 0.7%.
|
||||
Выберите пул из списка, укажите, количество каждого токена, и
|
||||
задайте диапазон цен, в котором ваши деньги будут работать. Пока цена
|
||||
остаётся в этом диапазоне, вы зарабатываете на комиссиях с каждой сделки
|
||||
в пуле (это и есть APR). Внесённая позиция учитывается как NFT в
|
||||
блоке «Мои позиции», откуда её можно вывести вместе с накопленными
|
||||
комиссиями. Комиссия сервиса на депозит — 0.7%.
|
||||
</p>
|
||||
</header>
|
||||
<PoolsWidget />
|
||||
|
||||
@@ -6,7 +6,13 @@ export function StakingPage() {
|
||||
<div className={styles.page}>
|
||||
<header className={styles.head}>
|
||||
<h1 className={styles.title}>Стейкинг</h1>
|
||||
<p className={styles.subtitle}>Зарабатывайте на хранении ETH и SOL. Комиссия сервиса — 0.7%.</p>
|
||||
<p className={styles.subtitle}>
|
||||
Выберите сеть и укажите, сколько монет хотите застейкать.
|
||||
Ваши средства отправляются в стейкинг и начинают приносить доход (APR). Все ваши вклады видны в
|
||||
блоке «Мои позиции», откуда их можно вывести вместе с накопленной
|
||||
наградой. Учтите, что вывод средств занимает некоторое время. Комиссия сервиса —
|
||||
0.7%.
|
||||
</p>
|
||||
</header>
|
||||
<StakingWidget />
|
||||
</div>
|
||||
|
||||
@@ -137,52 +137,50 @@
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.toggle {
|
||||
/* Выбор способа оплаты: ETH / WETH — взаимоисключающие «таблетки». */
|
||||
.payment {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.segment {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
font-size: 14px;
|
||||
color: var(--text-secondary);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.toggle input {
|
||||
appearance: none;
|
||||
-webkit-appearance: none;
|
||||
position: relative;
|
||||
flex-shrink: 0;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
margin: 0;
|
||||
.segItem,
|
||||
.segActive {
|
||||
padding: 7px 16px;
|
||||
border-radius: 999px;
|
||||
border: 1px solid var(--glass-border);
|
||||
border-radius: 5px;
|
||||
background: var(--bg-deep);
|
||||
background: transparent;
|
||||
color: var(--text-secondary);
|
||||
font-family: var(--font-sans);
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: background 0.2s, border-color 0.2s;
|
||||
transition: background 0.18s, border-color 0.18s, color 0.18s, opacity 0.18s;
|
||||
}
|
||||
|
||||
.toggle input:hover {
|
||||
/* Невыбранный вариант «гаснет». */
|
||||
.segItem {
|
||||
opacity: 0.45;
|
||||
}
|
||||
|
||||
.segItem:hover {
|
||||
opacity: 0.75;
|
||||
border-color: rgba(255, 255, 255, 0.18);
|
||||
}
|
||||
|
||||
.segActive {
|
||||
background: rgba(74, 109, 255, 0.15);
|
||||
border-color: var(--interactive);
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.toggle input:checked {
|
||||
background: var(--interactive);
|
||||
border-color: var(--interactive);
|
||||
}
|
||||
|
||||
.toggle input:checked::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 2px;
|
||||
left: 6px;
|
||||
width: 4px;
|
||||
height: 8px;
|
||||
border: solid #fff;
|
||||
border-width: 0 2px 2px 0;
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
|
||||
.toggle input:focus-visible {
|
||||
.segItem:focus-visible,
|
||||
.segActive:focus-visible {
|
||||
outline: 2px solid var(--highlight);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
@@ -162,14 +162,27 @@ export function LpDepositCard({
|
||||
placeholder="1"
|
||||
/>
|
||||
</label>
|
||||
<label className={styles.toggle}>
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={useNativeEth}
|
||||
onChange={(e) => onUseNativeEthChange(e.target.checked)}
|
||||
/>
|
||||
<span>Использовать нативный ETH</span>
|
||||
</label>
|
||||
<div className={styles.payment}>
|
||||
<span className={styles.priceLabel}>Оплата</span>
|
||||
<div className={styles.segment} role="group" aria-label="Способ оплаты">
|
||||
<button
|
||||
type="button"
|
||||
className={!useNativeEth ? styles.segActive : styles.segItem}
|
||||
aria-pressed={!useNativeEth}
|
||||
onClick={() => onUseNativeEthChange(false)}
|
||||
>
|
||||
WETH
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
className={useNativeEth ? styles.segActive : styles.segItem}
|
||||
aria-pressed={useNativeEth}
|
||||
onClick={() => onUseNativeEthChange(true)}
|
||||
>
|
||||
ETH
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className={styles.quote} data-loading={quoteFetching ? 'true' : undefined}>
|
||||
|
||||
@@ -37,7 +37,8 @@ export function PoolsWidget() {
|
||||
const [priceLower, setPriceLower] = useState('')
|
||||
const [priceUpper, setPriceUpper] = useState('')
|
||||
const [slippage, setSlippage] = useState('1')
|
||||
const [useNativeEth, setUseNativeEth] = useState(true)
|
||||
// По умолчанию оплата идёт в WETH (ERC-20); юзер может переключить на нативный ETH.
|
||||
const [useNativeEth, setUseNativeEth] = useState(false)
|
||||
const [removeTarget, setRemoveTarget] = useState<LpPosition | null>(null)
|
||||
const [toast, setToast] = useState<Toast>(null)
|
||||
|
||||
|
||||
Reference in New Issue
Block a user