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

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

Стейкинг-інтерфейс — форма та дашборд для депонування токенів у контракт з нарахуванням винагород. Користувач вносить токени, бачить накопичені rewards у реальному часі, може клеймити та виводити. Під капотом — approve + stake, періодичний розрахунок винагород, 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;
}

Hook стану стейкингу

// 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 };
}

Лічильник винагород у реальному часі

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-розрахунком та лічильником винагород у реальному часі — 3–5 днів.