damanukyan/frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add staking page

Browse Source
This commit is contained in:
Артём Рассадин
2026-06-17 18:41:14 +03:00
parent e135fc1a9d
commit 076452bc18
8 changed files with 82 additions and 59 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
dist/assets/index-DO4w311N.js → dist/assets/index-BYdWOI3m.js vendored
View File

File diff suppressed because one or more lines are too long

2
dist/assets/index-BqMPDWqk.css → dist/assets/index-BtHpZOfG.css vendored
View File

File diff suppressed because one or more lines are too long

4
dist/index.html vendored
View File

@@ -5,8 +5,8 @@
<link rel="icon" type="image/svg+xml" href="/favicon.svg" /> <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>ЭКСА — Ваш мост в мир цифровых активов</title> <title>ЭКСА — Ваш мост в мир цифровых активов</title>
<script type="module" crossorigin src="/assets/index-DO4w311N.js"></script> <script type="module" crossorigin src="/assets/index-BYdWOI3m.js"></script>
<link rel="stylesheet" crossorigin href="/assets/index-BqMPDWqk.css"> <link rel="stylesheet" crossorigin href="/assets/index-BtHpZOfG.css">
</head> </head>
<body> <body>
<div id="root"></div> <div id="root"></div>

7
src/pages/pools/ui/PoolsPage.tsx
View File

@@ -7,7 +7,12 @@ export function PoolsPage() {
<header className={styles.head}> <header className={styles.head}>
<h1 className={styles.title}>Пулы</h1> <h1 className={styles.title}>Пулы</h1>
<p className={styles.subtitle}> <p className={styles.subtitle}>
Ликвидность в пулах Uniswap v3 (ETH). Комиссия сервиса на депозит — 0.7%. Выберите пул из списка, укажите, количество каждого токена, и
задайте диапазон цен, в котором ваши деньги будут работать. Пока цена
остаётся в этом диапазоне, вы зарабатываете на комиссиях с каждой сделки
в пуле (это и есть APR). Внесённая позиция учитывается как NFT в
блоке «Мои позиции», откуда её можно вывести вместе с накопленными
комиссиями. Комиссия сервиса на депозит — 0.7%.
</p> </p>
</header> </header>
<PoolsWidget /> <PoolsWidget />

8
src/pages/staking/ui/StakingPage.tsx
View File

@@ -6,7 +6,13 @@ export function StakingPage() {
<div className={styles.page}> <div className={styles.page}>
<header className={styles.head}> <header className={styles.head}>
<h1 className={styles.title}>Стейкинг</h1> <h1 className={styles.title}>Стейкинг</h1>
<p className={styles.subtitle}>Зарабатывайте на хранении ETH и SOL. Комиссия сервиса — 0.7%.</p> <p className={styles.subtitle}>
Выберите сеть и укажите, сколько монет хотите застейкать.
Ваши средства отправляются в стейкинг и начинают приносить доход (APR). Все ваши вклады видны в
блоке «Мои позиции», откуда их можно вывести вместе с накопленной
наградой. Учтите, что вывод средств занимает некоторое время. Комиссия сервиса —
0.7%.
</p>
</header> </header>
<StakingWidget /> <StakingWidget />
</div> </div>

68
src/widgets/pools/ui/LpDepositCard.module.css
View File

@@ -137,52 +137,50 @@
flex-shrink: 0; flex-shrink: 0;
} }
.toggle { /* Выбор способа оплаты: ETH / WETH — взаимоисключающие «таблетки». */
.payment {
display: flex;
flex-direction: column;
gap: 6px;
}
.segment {
display: flex; display: flex;
align-items: center;
gap: 8px; gap: 8px;
font-size: 14px;
color: var(--text-secondary);
cursor: pointer;
} }
.toggle input { .segItem,
appearance: none; .segActive {
-webkit-appearance: none; padding: 7px 16px;
position: relative; border-radius: 999px;
flex-shrink: 0;
width: 18px;
height: 18px;
margin: 0;
border: 1px solid var(--glass-border); border: 1px solid var(--glass-border);
border-radius: 5px; background: transparent;
background: var(--bg-deep); color: var(--text-secondary);
font-family: var(--font-sans);
font-size: 14px;
font-weight: 600;
cursor: pointer; 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); border-color: var(--interactive);
color: var(--text-primary);
} }
.toggle input:checked { .segItem:focus-visible,
background: var(--interactive); .segActive:focus-visible {
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 {
outline: 2px solid var(--highlight); outline: 2px solid var(--highlight);
outline-offset: 2px; outline-offset: 2px;
} }

29
src/widgets/pools/ui/LpDepositCard.tsx
View File

@@ -162,14 +162,27 @@ export function LpDepositCard({
placeholder="1" placeholder="1"
/> />
</label> </label>
<label className={styles.toggle}> <div className={styles.payment}>
<input <span className={styles.priceLabel}>Оплата</span>
type="checkbox" <div className={styles.segment} role="group" aria-label="Способ оплаты">
checked={useNativeEth} <button
onChange={(e) => onUseNativeEthChange(e.target.checked)} type="button"
/> className={!useNativeEth ? styles.segActive : styles.segItem}
<span>Использовать нативный ETH</span> aria-pressed={!useNativeEth}
</label> 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>
<div className={styles.quote} data-loading={quoteFetching ? 'true' : undefined}> <div className={styles.quote} data-loading={quoteFetching ? 'true' : undefined}>

3
src/widgets/pools/ui/PoolsWidget.tsx
View File

@@ -37,7 +37,8 @@ export function PoolsWidget() {
const [priceLower, setPriceLower] = useState('') const [priceLower, setPriceLower] = useState('')
const [priceUpper, setPriceUpper] = useState('') const [priceUpper, setPriceUpper] = useState('')
const [slippage, setSlippage] = useState('1') 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 [removeTarget, setRemoveTarget] = useState<LpPosition | null>(null)
const [toast, setToast] = useState<Toast>(null) const [toast, setToast] = useState<Toast>(null)