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-16 17:46:19 +03:00
parent 90d0e29e8b
commit ba505f4405
3 changed files with 149 additions and 109 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
src/widgets/staking/ui/PositionsPanel.module.css
View File

@@ -2,10 +2,44 @@
background: var(--glass-bg);
border: 1px solid var(--glass-border);
border-radius: 20px;
padding: 24px;
overflow: hidden;
}
.inner {
display: flex;
flex-direction: column;
gap: 14px;
padding: 24px;
}
/* Шапка (заголовок + сумма) закреплена, скроллится только список ниже. */
.body {
display: flex;
flex-direction: column;
gap: 14px;
}
/* На десктопе (две колонки) высота блока позиций не превышает карточку стейкинга:
.inner вынесен из потока, поэтому высоту строки грида задаёт только левая колонка,
а список позиций при переполнении скроллится внутри. */
@media (min-width: 1101px) {
.panel {
position: relative;
}
.inner {
position: absolute;
inset: 0;
}
.body {
flex: 1;
min-height: 0;
overflow-y: auto;
/* отступ, чтобы контент не уходил под полосу прокрутки */
padding-right: 4px;
margin-right: -4px;
}
}
.head {

218
src/widgets/staking/ui/PositionsPanel.tsx
View File

@@ -39,126 +39,130 @@ export function PositionsPanel({ chain, onUnstakeEth, onUnstakeSol, onClaim, uns
return (
<div className={styles.panel}>
<div className={styles.head}>
<span className={styles.title}>Мои позиции</span>
<div className={styles.total}>
{truncateDecimals(isError ? '0' : total, 6)} <span className={styles.totalUnit}>{unit}</span>
<div className={styles.inner}>
<div className={styles.head}>
<span className={styles.title}>Мои позиции</span>
<div className={styles.total}>
{truncateDecimals(isError ? '0' : total, 6)} <span className={styles.totalUnit}>{unit}</span>
</div>
</div>
</div>
<WithdrawNotice compact />
<div className={styles.body}>
<WithdrawNotice compact />
{isLoading && <Spinner label="Загрузка позиций" />}
{isLoading && <Spinner label="Загрузка позиций" />}
{isError && <div className={styles.empty}>{getStakingErrorMessage(error)}</div>}
{isError && <div className={styles.empty}>{getStakingErrorMessage(error)}</div>}
{!isLoading && !isError && empty && (
<div className={styles.empty}>У вас пока нет активных позиций стейкинга.</div>
)}
{!isError && data?.chain === 'ETH' && !empty && (
<>
{(parseFloat(data.stEthBalanceWeiHuman) || 0) > 0 && (
<div className={styles.list}>
<div className={`${styles.pos} ${data.optimistic ? styles.pending : ''}`}>
<div className={styles.posTop}>
<span className={styles.coin}>
<TokenIcon letter="E" color="var(--grad-center)" logo={COIN_ICONS.ETH} size={24} />
stETH
</span>
<span className={`${styles.badge} ${styles.badgeActive}`}>
Активна{data.aprPercent != null ? ` · APR ${data.aprPercent}%` : ''}
</span>
</div>
<div className={styles.amount}>{truncateDecimals(data.stEthBalanceWeiHuman, 8)}</div>
<button
className={styles.btn}
onClick={() => onUnstakeEth(data.stEthBalanceWeiHuman)}
disabled={unstakePending}
>
Вывести
</button>
</div>
</div>
{!isLoading && !isError && empty && (
<div className={styles.empty}>У вас пока нет активных позиций стейкинга.</div>
)}
{data.withdrawalRequests.length > 0 && (
{!isError && data?.chain === 'ETH' && !empty && (
<>
<div className={styles.subhead}>Заявки на вывод</div>
<div className={styles.list}>
{data.withdrawalRequests.map((r) => {
const ready = r.isFinalized && !r.isClaimed
return (
<div key={r.requestId} className={`${styles.pos} ${ready ? styles.reqCard : ''}`}>
<div className={styles.posTop}>
<span className={styles.coin}>Заявка #{r.requestId}</span>
<span
className={`${styles.badge} ${
r.isClaimed ? styles.badgeMuted : ready ? styles.badgeReady : styles.badgeMuted
}`}
>
{r.isClaimed ? 'Выведено' : ready ? 'Готово к выводу' : 'В очереди'}
</span>
</div>
<div className={styles.amount}>{truncateDecimals(r.amountStEthWeiHuman, 8)} ETH</div>
{ready ? (
<button
className={`${styles.btn} ${styles.btnPrimary}`}
onClick={() => onClaim(r.requestId)}
disabled={claimPending}
>
Забрать ETH
</button>
) : r.isClaimed ? null : (
<div className={styles.note}>Ожидает финализации в Lido</div>
)}
{(parseFloat(data.stEthBalanceWeiHuman) || 0) > 0 && (
<div className={styles.list}>
<div className={`${styles.pos} ${data.optimistic ? styles.pending : ''}`}>
<div className={styles.posTop}>
<span className={styles.coin}>
<TokenIcon letter="E" color="var(--grad-center)" logo={COIN_ICONS.ETH} size={24} />
stETH
</span>
<span className={`${styles.badge} ${styles.badgeActive}`}>
Активна{data.aprPercent != null ? ` · APR ${data.aprPercent}%` : ''}
</span>
</div>
)
})}
</div>
<div className={styles.amount}>{truncateDecimals(data.stEthBalanceWeiHuman, 8)}</div>
<button
className={styles.btn}
onClick={() => onUnstakeEth(data.stEthBalanceWeiHuman)}
disabled={unstakePending}
>
Вывести
</button>
</div>
</div>
)}
{data.withdrawalRequests.length > 0 && (
<>
<div className={styles.subhead}>Заявки на вывод</div>
<div className={styles.list}>
{data.withdrawalRequests.map((r) => {
const ready = r.isFinalized && !r.isClaimed
return (
<div key={r.requestId} className={`${styles.pos} ${ready ? styles.reqCard : ''}`}>
<div className={styles.posTop}>
<span className={styles.coin}>Заявка #{r.requestId}</span>
<span
className={`${styles.badge} ${
r.isClaimed ? styles.badgeMuted : ready ? styles.badgeReady : styles.badgeMuted
}`}
>
{r.isClaimed ? 'Выведено' : ready ? 'Готово к выводу' : 'В очереди'}
</span>
</div>
<div className={styles.amount}>{truncateDecimals(r.amountStEthWeiHuman, 8)} ETH</div>
{ready ? (
<button
className={`${styles.btn} ${styles.btnPrimary}`}
onClick={() => onClaim(r.requestId)}
disabled={claimPending}
>
Забрать ETH
</button>
) : r.isClaimed ? null : (
<div className={styles.note}>Ожидает финализации в Lido</div>
)}
</div>
)
})}
</div>
</>
)}
</>
)}
</>
)}
{!isError && data?.chain === 'SOL' && !empty && (
<div className={styles.list}>
{data.positions.map((p) => {
const st = SOL_STATE_META[p.state]
return (
<div key={p.stakeAccount} className={`${styles.pos} ${p.optimistic ? styles.pending : ''}`}>
<div className={styles.posTop}>
<span className={styles.coin}>
<TokenIcon letter="S" color="var(--grad-center)" logo={COIN_ICONS.SOL} size={24} />
SOL
</span>
<span className={`${styles.badge} ${badgeClass[st.variant]}`}>{st.label}</span>
</div>
<div className={styles.amount}>{truncateDecimals(p.lamportsHuman, 8)}</div>
<div className={styles.meta}>
Валидатор: {p.validator} · {p.stakeAccount}
</div>
{p.state === 'active' && (
<button className={styles.btn} onClick={() => onUnstakeSol(p)} disabled={unstakePending}>
Вывести
</button>
)}
{p.state === 'inactive' && (
<button
className={`${styles.btn} ${styles.btnPrimary}`}
onClick={() => onUnstakeSol(p)}
disabled={unstakePending}
>
Вывести средства
</button>
)}
{p.state === 'deactivating' && <div className={styles.note}>Разблокируется через 1–2 эпохи</div>}
{p.state === 'activating' && <div className={styles.note}>Активируется…</div>}
</div>
)
})}
{!isError && data?.chain === 'SOL' && !empty && (
<div className={styles.list}>
{data.positions.map((p) => {
const st = SOL_STATE_META[p.state]
return (
<div key={p.stakeAccount} className={`${styles.pos} ${p.optimistic ? styles.pending : ''}`}>
<div className={styles.posTop}>
<span className={styles.coin}>
<TokenIcon letter="S" color="var(--grad-center)" logo={COIN_ICONS.SOL} size={24} />
SOL
</span>
<span className={`${styles.badge} ${badgeClass[st.variant]}`}>{st.label}</span>
</div>
<div className={styles.amount}>{truncateDecimals(p.lamportsHuman, 8)}</div>
<div className={styles.meta}>
Валидатор: {p.validator} · {p.stakeAccount}
</div>
{p.state === 'active' && (
<button className={styles.btn} onClick={() => onUnstakeSol(p)} disabled={unstakePending}>
Вывести
</button>
)}
{p.state === 'inactive' && (
<button
className={`${styles.btn} ${styles.btnPrimary}`}
onClick={() => onUnstakeSol(p)}
disabled={unstakePending}
>
Вывести средства
</button>
)}
{p.state === 'deactivating' && <div className={styles.note}>Разблокируется через 1–2 эпохи</div>}
{p.state === 'activating' && <div className={styles.note}>Активируется…</div>}
</div>
)
})}
</div>
)}
</div>
)}
</div>
</div>
)
}

4
src/widgets/staking/ui/StakingWidget.module.css
View File

@@ -8,7 +8,9 @@
display: grid;
grid-template-columns: 1.5fr 1fr;
gap: 20px;
align-items: start;
/* stretch: обе колонки получают высоту строки = высоту карточки стейкинга
(блок позиций вынесен из потока и сам высоту строки не задаёт). */
align-items: stretch;
}
@media (max-width: 1100px) {