Реализация стейкинг-интерфейса на сайте

Реализация стейкинг-интерфейса на сайте

Стейкинг-интерфейс — форма и дашборд для депонирования токенов в контракт с начислением наград. Пользователь вносит токены, видит накопленные rewards в реальном времени, может клеймить и выводить. Под капотом — approve + stake, periodic reward calculation, unstaking с возможным lock-периодом.

Типичный ABI стейкинг-контракта

// Стандартный Synthetix-подобный стейкинг
const STAKING_ABI = parseAbi([
  // View
  'function totalSupply() view returns (uint256)',
  'function balanceOf(address account) view returns (uint256)',
  'function earned(address account) view returns (uint256)',
  'function rewardRate() view returns (uint256)',
  'function rewardPerToken() view returns (uint256)',
  'function periodFinish() view returns (uint256)',
  'function lockPeriod() view returns (uint256)',    // опционально
  'function unlockTime(address) view returns (uint256)', // опционально
  // Write
  'function stake(uint256 amount) nonpayable',
  'function withdraw(uint256 amount) nonpayable',
  'function getReward() nonpayable',
  'function exit() nonpayable', // withdraw all + getReward
]);

Расчёт APR/APY

APR считается по rewardRate (токенов в секунду) и totalSupply (всего застейкано):

import { formatUnits } from 'viem';

export function calculateAPR(
  rewardRate: bigint,        // reward tokens per second
  totalSupply: bigint,       // staked tokens
  stakingTokenPrice: number, // USD
  rewardTokenPrice: number,  // USD
  stakingDecimals = 18,
  rewardDecimals = 18,
): number {
  if (totalSupply === 0n) return 0;

  const rewardPerYear =
    (parseFloat(formatUnits(rewardRate, rewardDecimals)) * 31_536_000) * rewardTokenPrice;

  const totalStakedUSD =
    parseFloat(formatUnits(totalSupply, stakingDecimals)) * stakingTokenPrice;

  return (rewardPerYear / totalStakedUSD) * 100;
}

// APY с учётом compound (если клеймить раз в день и рестейкать)
export function aprToApy(apr: number, compoundsPerYear = 365): number {
  return (Math.pow(1 + apr / 100 / compoundsPerYear, compoundsPerYear) - 1) * 100;
}

Хук состояния стейкинга

// hooks/useStakingState.ts
import { useReadContracts } from 'wagmi';
import { erc20Abi, formatUnits } from 'viem';

const STAKING = process.env.NEXT_PUBLIC_STAKING_CONTRACT as `0x${string}`;
const STAKE_TOKEN = process.env.NEXT_PUBLIC_STAKE_TOKEN as `0x${string}`;
const REWARD_TOKEN = process.env.NEXT_PUBLIC_REWARD_TOKEN as `0x${string}`;

export function useStakingState() {
  const { address } = useAccount();

  const { data } = useReadContracts({
    contracts: [
      // Глобальное состояние
      { address: STAKING, abi: STAKING_ABI, functionName: 'totalSupply' },
      { address: STAKING, abi: STAKING_ABI, functionName: 'rewardRate' },
      { address: STAKING, abi: STAKING_ABI, functionName: 'periodFinish' },
      // Баланс токена пользователя
      { address: STAKE_TOKEN, abi: erc20Abi, functionName: 'balanceOf', args: [address!] },
      { address: STAKE_TOKEN, abi: erc20Abi, functionName: 'allowance', args: [address!, STAKING] },
      // Позиция пользователя
      { address: STAKING, abi: STAKING_ABI, functionName: 'balanceOf', args: [address!] },
      { address: STAKING, abi: STAKING_ABI, functionName: 'earned', args: [address!] },
    ],
    query: {
      enabled: !!address,
      refetchInterval: 12_000, // каждый блок
    },
  });

  const totalSupply = data?.[0].result as bigint ?? 0n;
  const rewardRate = data?.[1].result as bigint ?? 0n;
  const periodFinish = Number(data?.[2].result as bigint ?? 0n);
  const walletBalance = data?.[3].result as bigint ?? 0n;
  const allowance = data?.[4].result as bigint ?? 0n;
  const stakedBalance = data?.[5].result as bigint ?? 0n;
  const earned = data?.[6].result as bigint ?? 0n;

  const isActive = periodFinish > Date.now() / 1000;

  return {
    totalSupply,
    rewardRate,
    walletBalance,
    allowance,
    stakedBalance,
    earned,
    isActive,
    // Нужен approve?
    needsApprove: (amount: bigint) => allowance < amount,
  };
}

Approve + Stake в одном флоу

// hooks/useStakeAction.ts
import { useWriteContract, useWaitForTransactionReceipt } from 'wagmi';
import { erc20Abi, parseUnits } from 'viem';
import { waitForTransactionReceipt } from '@wagmi/core';
import { config } from '@/lib/wagmi';

export function useStakeAction() {
  const { writeContractAsync } = useWriteContract();
  const [step, setStep] = useState<'idle' | 'approving' | 'staking' | 'done' | 'error'>('idle');
  const [txHash, setTxHash] = useState<`0x${string}`>();
  const { needsApprove } = useStakingState();

  const stake = async (amount: string, decimals: number) => {
    const amountWei = parseUnits(amount, decimals);

    try {
      if (needsApprove(amountWei)) {
        setStep('approving');
        const approveTx = await writeContractAsync({
          address: STAKE_TOKEN,
          abi: erc20Abi,
          functionName: 'approve',
          args: [STAKING, amountWei],
        });
        await waitForTransactionReceipt(config, { hash: approveTx });
      }

      setStep('staking');
      const stakeTx = await writeContractAsync({
        address: STAKING,
        abi: STAKING_ABI,
        functionName: 'stake',
        args: [amountWei],
      });
      setTxHash(stakeTx);
      setStep('done');
    } catch (e) {
      setStep('error');
      throw e;
    }
  };

  return { stake, step, txHash };
}

Realtime счётчик наград

earned() обновляется при каждом вызове, но постоянно читать контракт дорого. Промежуточные значения интерполируем локально:

// hooks/useEarnedRealtime.ts
export function useEarnedRealtime(
  earnedOnChain: bigint,
  stakedBalance: bigint,
  rewardPerToken: bigint,
  lastUpdatedAt: number,
): bigint {
  const [displayed, setDisplayed] = useState(earnedOnChain);

  useEffect(() => {
    if (stakedBalance === 0n) {
      setDisplayed(earnedOnChain);
      return;
    }

    const interval = setInterval(() => {
      const elapsed = BigInt(Math.floor((Date.now() / 1000) - lastUpdatedAt));
      // Упрощённая экстраполяция: earned + staked * rewardPerTokenPerSec * elapsed
      const delta = (stakedBalance * rewardPerToken * elapsed) / BigInt(1e18);
      setDisplayed(earnedOnChain + delta);
    }, 100);

    return () => clearInterval(interval);
  }, [earnedOnChain, stakedBalance, rewardPerToken, lastUpdatedAt]);

  return displayed;
}

Счётчик тикает каждые 100ms — визуально плавно, нагрузки на RPC нет.

UI компонент

export function StakingWidget() {
  const { totalSupply, rewardRate, walletBalance, stakedBalance, earned, isActive } = useStakingState();
  const { stake, step } = useStakeAction();
  const { withdraw } = useWithdrawAction();
  const { claimReward } = useClaimAction();
  const [stakeAmount, setStakeAmount] = useState('');

  const apr = useMemo(() => calculateAPR(rewardRate, totalSupply, stakingTokenPrice, rewardTokenPrice), [rewardRate, totalSupply]);

  return (
    <div className="space-y-6 rounded-2xl border border-white/10 bg-neutral-900 p-6">
      <div className="grid grid-cols-2 gap-4 sm:grid-cols-3">
        <Stat label="APR" value={`${apr.toFixed(1)}%`} highlight />
        <Stat label="Всего застейкано" value={`${formatUnits(totalSupply, 18)} TOKEN`} />
        <Stat label="Активно" value={isActive ? 'Да' : 'Завершён'} />
      </div>

      <StakeForm amount={stakeAmount} onChange={setStakeAmount} max={walletBalance} onSubmit={stake} step={step} />
      <UserPosition staked={stakedBalance} earned={earned} onClaim={claimReward} onWithdraw={withdraw} />
    </div>
  );
}

Сроки: стейкинг-интерфейс со стандартным контрактом (approve + stake + claim + withdraw), APR-расчётом и realtime счётчиком наград — 3–5 дней.