add staking page

2026-06-16 17:00:07 +03:00
parent c9bebf71d6
commit ff1726ab02
9 changed files with 96 additions and 36 deletions
--- a/src/features/staking/model/useStaking.ts
+++ b/src/features/staking/model/useStaking.ts
@@ -50,7 +50,11 @@ export function useStake() {
  const qc = useQueryClient()
  return useMutation({
    mutationFn: ({ chain, amountHuman }: { chain: StakeChain; amountHuman: string }) => stake(chain, amountHuman),
-    onSuccess: (_data, { chain }) => qc.invalidateQueries({ queryKey: ['staking', 'positions', chain] }),
+    onSuccess: (_data, { chain }) => {
+      qc.invalidateQueries({ queryKey: ['staking', 'positions', chain] })
+      // Монеты ушли в стейк — обновляем баланс (prefix-match покрывает org/self).
+      qc.invalidateQueries({ queryKey: ['wallet', 'balance', chain] })
+    },
  })
 }

@@ -63,7 +67,11 @@ export function useUnstake() {
  return useMutation<EthUnstakeResult | SolUnstakeResult, Error, UnstakeVars>({
    mutationFn: (vars) =>
      vars.chain === 'ETH' ? unstakeEth(vars.amountHuman, vars.mode) : unstakeSol(vars.stakeAccount),
-    onSuccess: (_data, vars) => qc.invalidateQueries({ queryKey: ['staking', 'positions', vars.chain] }),
+    onSuccess: (_data, vars) => {
+      qc.invalidateQueries({ queryKey: ['staking', 'positions', vars.chain] })
+      // Монеты вернулись на кошелёк — обновляем баланс (prefix-match покрывает org/self).
+      qc.invalidateQueries({ queryKey: ['wallet', 'balance', vars.chain] })
+    },
  })
 }

@@ -71,6 +79,9 @@ export function useClaim() {
  const qc = useQueryClient()
  return useMutation({
    mutationFn: (requestId: string) => claimUnstake(requestId),
-    onSuccess: () => qc.invalidateQueries({ queryKey: ['staking', 'positions', 'ETH'] }),
+    onSuccess: () => {
+      qc.invalidateQueries({ queryKey: ['staking', 'positions', 'ETH'] })
+      qc.invalidateQueries({ queryKey: ['wallet', 'balance', 'ETH'] })
+    },
  })
 }
--- a/src/pages/staking/ui/StakingPage.module.css
+++ b/src/pages/staking/ui/StakingPage.module.css
@@ -1,6 +1,6 @@
 .page {
  width: 100%;
-  max-width: 960px;
+  max-width: 1200px;
  margin: 0 auto;
  padding: 32px 32px 48px;
 }
@@ -17,7 +17,7 @@
 }

 .subtitle {
-  font-size: 14px;
+  font-size: 16px;
  color: var(--text-secondary);
 }

--- a/src/widgets/staking/ui/PositionsPanel.module.css
+++ b/src/widgets/staking/ui/PositionsPanel.module.css
@@ -15,7 +15,7 @@
 }

 .title {
-  font-size: 12px;
+  font-size: 14px;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 1.2px;
@@ -24,7 +24,7 @@

 .total {
  font-family: var(--font-mono);
-  font-size: 24px;
+  font-size: 28px;
  color: var(--text-primary);
 }

@@ -34,7 +34,7 @@
 }

 .subhead {
-  font-size: 11px;
+  font-size: 12px;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 1px;
@@ -78,7 +78,7 @@

 .amount {
  font-family: var(--font-mono);
-  font-size: 18px;
+  font-size: 20px;
  color: var(--text-primary);
  margin-bottom: 4px;
 }
@@ -91,9 +91,9 @@
 }

 .badge {
-  font-size: 11px;
+  font-size: 12px;
  font-weight: 700;
-  padding: 3px 10px;
+  padding: 4px 10px;
  border-radius: 999px;
  white-space: nowrap;
 }
@@ -121,7 +121,7 @@
  background: transparent;
  color: var(--text-primary);
  font-weight: 600;
-  font-size: 13px;
+  font-size: 14px;
  font-family: var(--font-sans);
  cursor: pointer;
  transition: background 0.2s;
@@ -156,7 +156,7 @@
 }

 .empty {
-  font-size: 13px;
+  font-size: 14px;
  color: var(--text-secondary);
  text-align: center;
  padding: 24px 0;
--- a/src/widgets/staking/ui/StakeCard.module.css
+++ b/src/widgets/staking/ui/StakeCard.module.css
@@ -25,7 +25,7 @@
 }

 .tag {
-  font-size: 12px;
+  font-size: 14px;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 1.2px;
@@ -39,7 +39,7 @@
 }

 .apr {
-  font-size: 12px;
+  font-size: 14px;
  color: var(--success);
  background: rgba(38, 161, 123, 0.12);
  border: 1px solid rgba(38, 161, 123, 0.35);
@@ -59,8 +59,8 @@
  color: var(--text-secondary);
  border: none;
  border-radius: 999px;
-  padding: 5px 14px;
-  font-size: 12px;
+  padding: 6px 14px;
+  font-size: 14px;
  cursor: pointer;
  font-family: var(--font-sans);
  font-weight: 600;
@@ -85,7 +85,7 @@
  border: none;
  outline: none;
  font-family: var(--font-mono);
-  font-size: 40px;
+  font-size: 48px;
  font-weight: 700;
  color: var(--text-primary);
  width: 100%;
@@ -93,7 +93,7 @@
 }

 .input::placeholder {
-  color: rgba(255, 255, 255, 0.15);
+  color: rgba(255, 255, 255, 0.3);
 }

 .token {
@@ -114,7 +114,7 @@
 }

 .balance {
-  font-size: 13px;
+  font-size: 14px;
  color: var(--text-secondary);
  display: flex;
  align-items: center;
@@ -127,7 +127,7 @@
  color: var(--interactive);
  cursor: pointer;
  font-weight: 700;
-  font-size: 13px;
+  font-size: 14px;
  font-family: var(--font-sans);
  padding: 0;
 }
@@ -138,7 +138,7 @@

 .hint {
  margin: 14px 0 0;
-  font-size: 13px;
+  font-size: 14px;
  color: var(--error);
  font-weight: 600;
  line-height: 1.4;
--- a/src/widgets/staking/ui/StakeCard.tsx
+++ b/src/widgets/staking/ui/StakeCard.tsx
@@ -1,9 +1,11 @@
+import { useEffect, useState } from 'react'
 import { PrimaryButton, TokenIcon } from '@shared/ui'
 import { COIN_ICONS } from '@shared/assets/coins'
 import { truncateDecimals } from '@shared/lib/utils/truncateDecimals'
+import { toBaseUnits, fromBaseUnits } from '@shared/lib/utils/baseUnits'
 import { useDebounce } from '@shared/lib/hooks/useDebounce'
 import { useWalletBalance } from '@features/wallet'
-import { useStakeQuote, useOpCost, type StakeChain, type StakeQuote, type OpCost } from '@features/staking'
+import { useStakeQuote, useOpCost, STAKE_DECIMALS, type StakeChain, type StakeQuote, type OpCost } from '@features/staking'
 import { StakeQuotePanel, type QuoteRow } from './StakeQuotePanel'
 import { CHAIN_META } from '../model/meta'
 import styles from './StakeCard.module.css'
@@ -64,6 +66,7 @@ function buildRows(

 export function StakeCard({ chain, amount, onAmountChange, onStake, isStaking }: Props) {
  const meta = CHAIN_META[chain]
+  const decimals = STAKE_DECIMALS[chain]
  const { data: balance } = useWalletBalance(chain)
  const balanceHuman = balance?.native.formatted ?? '0'
  const balanceNum = parseFloat(balanceHuman) || 0
@@ -72,21 +75,62 @@ export function StakeCard({ chain, amount, onAmountChange, onStake, isStaking }:
  const { data: quote, isFetching } = useStakeQuote(chain, debounced)
  const { data: opCost, isError: opError } = useOpCost(chain, debounced)

+  // Газ за операцию резервируется в том же нативном токене, что и сумма стейка
+  // (op-cost → balance.gas.needReserve). Значит максимум к стейку = баланс − этот резерв.
+  // Считаем в смолл-юнитах через BigInt, чтобы не ловить ошибки float-вычитания.
+  const gasReserveHuman = opCost?.balance?.gas?.needReserve != null ? String(opCost.balance.gas.needReserve) : null
+  const stakeableHuman = (() => {
+    if (gasReserveHuman == null) return balanceHuman
+    const balBase = BigInt(toBaseUnits(balanceHuman, decimals))
+    const reserveBase = BigInt(toBaseUnits(gasReserveHuman, decimals))
+    const maxBase = balBase > reserveBase ? balBase - reserveBase : 0n
+    return fromBaseUnits(maxBase.toString(), decimals)
+  })()
+
+  // Клик по «МАКС/100%» до того, как известен резерв на газ: ставим полный баланс, чтобы
+  // дёрнуть op-cost, и уменьшаем сумму на резерв, как только он приходит (или сдаёмся при ошибке).
+  const [maxPending, setMaxPending] = useState(false)
+  useEffect(() => {
+    if (!maxPending) return
+    if (gasReserveHuman != null) {
+      onAmountChange(stakeableHuman)
+      setMaxPending(false)
+    } else if (opError) {
+      setMaxPending(false)
+    }
+  }, [maxPending, gasReserveHuman, stakeableHuman, opError, onAmountChange])
+
  const amountNum = parseFloat(amount) || 0
  const withinBalance = amountNum > 0 && amountNum <= balanceNum
  // Достаточность с учётом газа проверяет сервер (op-cost). Если эндпоинт недоступен —
  // не блокируем жёстко, откатываемся к проверке «не больше баланса».
  const sufficient = opError ? withinBalance : opCost?.sufficient === true
-  const insufficient = withinBalance && opCost?.sufficient === false
+  const insufficient = withinBalance && opCost?.sufficient === false && !maxPending
  const gasShort = insufficient && opCost?.balance?.gas?.sufficient === false
  const canStake = withinBalance && sufficient && !isStaking

-  const setPercent = (p: number) => onAmountChange(((balanceNum * p) / 100).toString())
+  const setPercent = (p: number) => {
+    if (p >= 100) {
+      // Максимум: либо сразу вычитаем известный резерв, либо ставим полный баланс и ждём op-cost.
+      if (gasReserveHuman != null) onAmountChange(stakeableHuman)
+      else {
+        setMaxPending(true)
+        onAmountChange(balanceHuman)
+      }
+      return
+    }
+    onAmountChange(((balanceNum * p) / 100).toString())
+  }

  const pills = (
    <>
      {PERCENTS.map((p) => (
-        <button key={p} className={styles.pill} onClick={() => setPercent(p)}>
+        <button
+          key={p}
+          className={styles.pill}
+          onClick={() => setPercent(p)}
+          aria-label={`${p}% от баланса`}
+        >
          {p}%
        </button>
      ))}
@@ -119,6 +163,7 @@ export function StakeCard({ chain, amount, onAmountChange, onStake, isStaking }:
              if (/^(\d+\.?\d*|\.?\d*)$/.test(v) || v === '') onAmountChange(v)
            }}
            placeholder="0"
+            aria-label={`Сумма стейка в ${meta.symbol}`}
          />
          <div className={styles.token}>
            <TokenIcon letter={meta.symbol[0]} color="var(--grad-center)" logo={COIN_ICONS[meta.symbol]} size={28} />
@@ -129,7 +174,11 @@ export function StakeCard({ chain, amount, onAmountChange, onStake, isStaking }:
        <div className={styles.bottom}>
          <span className={styles.balance}>
            Баланс: {truncateDecimals(balanceHuman, 6)} {meta.symbol}
-            <button className={styles.max} onClick={() => setPercent(100)}>
+            <button
+              className={styles.max}
+              onClick={() => setPercent(100)}
+              aria-label="Использовать весь баланс"
+            >
              МАКС
            </button>
          </span>
--- a/src/widgets/staking/ui/StakeQuotePanel.module.css
+++ b/src/widgets/staking/ui/StakeQuotePanel.module.css
@@ -15,7 +15,7 @@
  align-items: center;
  justify-content: space-between;
  gap: 12px;
-  padding: 13px 0;
+  padding: 14px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
 }

@@ -24,7 +24,7 @@
 }

 .label {
-  font-size: 13px;
+  font-size: 14px;
  color: var(--text-secondary);
 }

--- a/src/widgets/staking/ui/StakingWidget.module.css
+++ b/src/widgets/staking/ui/StakingWidget.module.css
@@ -6,12 +6,12 @@

 .grid {
  display: grid;
-  grid-template-columns: 1.2fr 1fr;
-  gap: 16px;
+  grid-template-columns: 1.5fr 1fr;
+  gap: 20px;
  align-items: start;
 }

-@media (max-width: 1024px) {
+@media (max-width: 1100px) {
  .grid {
    grid-template-columns: 1fr;
  }
--- a/src/widgets/staking/ui/UnstakeModal.module.css
+++ b/src/widgets/staking/ui/UnstakeModal.module.css
@@ -60,7 +60,7 @@
 }

 .tokenLabel {
-  font-size: 11px;
+  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--text-secondary);
@@ -110,14 +110,14 @@
 }

 .modeDesc {
-  font-size: 11px;
+  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.3;
 }

 .solNote {
  margin: 0;
-  font-size: 13px;
+  font-size: 14px;
  color: var(--text-secondary);
  line-height: 1.45;
 }
--- a/src/widgets/staking/ui/WithdrawNotice.module.css
+++ b/src/widgets/staking/ui/WithdrawNotice.module.css
@@ -6,7 +6,7 @@
  border: 1px solid rgba(0, 212, 255, 0.3);
  border-radius: 12px;
  padding: 12px 14px;
-  font-size: 13px;
+  font-size: 14px;
  line-height: 1.4;
  color: var(--text-secondary);
 }