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); background: var(--glass-bg);
border: 1px solid var(--glass-border); border: 1px solid var(--glass-border);
border-radius: 20px; border-radius: 20px;
padding: 24px; overflow: hidden;
}
.inner {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 14px; 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 { .head {

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

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

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

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