Розробка стейкінг-інтерфейсу: від approve до realtime-нагород

Реалізація стейкінг-інтерфейсу: від approve до realtime-нагород

Користувач заходить на сайт, підключає гаманець через MetaMask і бачить APR 18.5%. Кнопка 'Stake' сіра — allowance менше запитуваної суми. Типова біль DeFi: approve і stake — дві окремі дії, які ламають UX, якщо не передбачити автоматичний approve. Ми збираємо їх в єдиний флоу: спочатку перевіряємо allowance, при необхідності відправляємо approve-транзакцію, потім stake. Весь процес займає дві транзакції, але користувач бачить лише одну — ми ховаємо approve за лаштунками або пропонуємо підписати обидві одразу. Realtime-лічильник нагород, що оновлюється кожні 100 мс, додатково утримує користувача на сторінці: нагороди зростають на очах.

Стейкінг-інтерфейс — форма та дашборд для депонування токенів у контракт з нарахуванням нагород. Користувач вносить токени, бачить накопичені rewards у реальному часі, може клеймити та виводити. Під капотом — approve + stake, періодичний розрахунок нагород, unstaking з можливим lock-періодом. Ми використовуємо стандартний Synthetix-подібний контракт, який легко адаптується під будь-який ABI.

Типові проблеми одобрення та стейкінгу

Головна проблема — користувач не розуміє, чому потрібно спочатку approve, а потім stake. Ми вирішуємо це через useStakeAction, який автоматично перевіряє allowance і запускає approve перед staking, якщо allowance недостатній. Друга проблема — користувач забуває підписати approve у MetaMask, і транзакція зависає. Ми показуємо статус: 'Approve required', 'Approving...', 'Staking...'. Третє — газовий ліміт: approve за стандартом ERC-20 коштує ~45k gas, stake ~150k gas. Якщо баланс малий, транзакція може відвалитися. Ми попереджаємо про мінімальний баланс.

Стек і архітектура

В основі — wagmi/viem для взаємодії з контрактами. All state читається через useReadContracts з інтервалом 12 секунд. Для локальної інтерполяції нагород використовуємо useEarnedRealtime. UI — Tailwind CSS, компоненти без сторонніх бібліотек.

Типовий ABI стейкінг-контракту:

const STAKING_ABI = parseAbi([
  '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)',
  'function stake(uint256 amount) nonpayable',
  'function withdraw(uint256 amount) nonpayable',
  'function getReward() nonpayable',
  'function exit() nonpayable',
]);

Розрахунок APR/APY:

import { formatUnits } from 'viem';

export function calculateAPR(
  rewardRate: bigint,
  totalSupply: bigint,
  stakingTokenPrice: number,
  rewardTokenPrice: number,
  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;
}

export function aprToApy(apr: number, compoundsPerYear = 365): number {
  return (Math.pow(1 + apr / 100 / compoundsPerYear, compoundsPerYear) - 1) * 100;
}

Хук стану стейкінгу:

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,
    needsApprove: (amount: bigint) => allowance < amount,
  };
}

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

import { useWriteContract } 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 лічильник нагород:

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));
      const delta = (stakedBalance * rewardPerToken * elapsed) / BigInt(1e18);
      setDisplayed(earnedOnChain + delta);
    }, 100);
    return () => clearInterval(interval);
  }, [earnedOnChain, stakedBalance, rewardPerToken, lastUpdatedAt]);

  return displayed;
}

Порівняння: прямий запит vs локальна інтерполяція

Що входить у роботу

Як довго чекати результат?

Базовий стейкінг-інтерфейс зі стандартним контрактом (approve + stake + claim + withdraw), APR-розрахунком та realtime-лічильником — від 3 до 5 днів. Якщо потрібен кастомний lock-період, мультипули або інтеграція з ораклами (Chainlink, Pyth) — терміни збільшуються до 7–10 днів. Вартість розраховується індивідуально — пишіть для оцінки.

Чому realtime-лічильник нагород важливий для UX?

Без інтерполяції користувач бачить стрибки нагород раз на 12 секунд (частота блоків). Це збиває довіру — здається, що нагороди нараховуються нерівномірно. Наш useEarnedRealtime екстраполює значення між запитами, створюючи плавне зростання. Порівняйте: інтерполяція дає приріст 0.001 токена/сек проти стрибків ~0.06 токена/блок. Візуальне сприйняття змінюється кардинально. Отримайте консультацію щодо впровадження під ваш контракт.

Що в результаті

Ми постачаємо готовий стейкінг-інтерфейс з вихідними кодами, документацією з розгортання та 2-тижневою підтримкою. Гарантуємо сумісність з Ethereum, Polygon, BSC та будь-якими EVM-мережами. Маємо 5 років досвіду роботи з DeFi-контрактами — зв'яжіться для оцінки вашого проєкту.

Фронтенд-розробка React: від аудиту до production

Бандл виріс до 3.1 MB gzip — це реальна цифра з проєкту, який прийшов до нас на аудит. Причина: moment.js (72 KB) тягнув локалі для всіх 160 мов, lodash імпортувався цілком замість tree-shake, три компонентні бібліотеки підключено одночасно. TTFB відмінний, але TTI (Time to Interactive) на мобільному — 14 секунд. Користувачі йшли, конверсія впала на 40%. Ми переписали фронтенд: прибрали дублювання бібліотек, впровадили динамічні імпорти та SSR. Результат — бандл зменшився до 850 KB gzip, TTI — 2.1 секунди, LCP — 1.8 с.

Frontend — це не «намалювати красиво». Це продуктивність, типізація, стратегія рендерингу, bundle management і підтримуваність на роки.

Чому Next.js — стандартний вибір для SEO?

React — наш основний UI-фреймворк для складних інтерфейсів. Next.js — стандартний вибір для проєктів з SEO-вимогами або SSR. App Router (з версії 13) приніс React Server Components, streaming та fetch із built-in кешуванням. Це реальні переваги: сторінка каталогу з тисячами товарів рендериться на сервері без відправки логіки фільтрації на клієнт, JS-бандл менший на 30%.

Але App Router — інший спосіб мислення. "use client" потрібно ставити свідомо. Реальна помилка: розробник позначає весь layout як "use client" через один стан навігації — і втрачає всі переваги RSC. Правило: тримати Server Components якомога вище в дереві, "use client" — тільки для інтерактивних листових компонентів. ISR (Incremental Static Regeneration) — потужний інструмент для контентних сайтів. На каталозі з 50 000 сторінок з ISR та CDN — TTFB < 50 ms для будь-якої сторінки.

Як TypeScript запобігає багам у продакшені?

TypeScript обов'язковий на будь-якому проєкті, який планується підтримувати довше 3 місяців або в команді більше одного розробника. Аргумент «пишемо швидко без типів» працює лише перші 2 тижні. Після — баги, пов'язані з невизначеними значеннями, виникають щотижня.

Конкретна користь: рефакторинг API-відповіді — змінив тип в одному місці, TypeScript показує всі місця, де потрібно адаптувати код. Без типів — баг у продакшені через тиждень. strict: true в tsconfig.json — обов'язково. noImplicitAny, strictNullChecks, strictFunctionTypes. Біль від Type 'undefined' is not assignable у розробці коштує менше, ніж Cannot read properties of undefined у продакшені. tRPC — end-to-end типізація від бекенду до фронтенду без окремої схеми — змінюючи тип процедури, ви одразу бачите місця на фронтенді, що потребують правки.

Vue 3 + Nuxt 3 — альтернативний стек для SSR

Vue 3 з Composition API — інший стиль розробки, ближчий до React Hooks. <script setup> та composables роблять код більш перевикористовуваним. Nuxt 3 — фреймворк для Vue з SSR/SSG, аналогічний Next.js. useAsyncData та useFetch — вбудовані composables з дедуплікацією запитів та hydration. Auto-imports зручні, але можуть заплутувати при debug. Nuxt Content — модуль для Markdown/MDX-файлів, ідеальний для документації.

Hydration mismatch — специфічний біль SSR на Vue та React. Рішення: <ClientOnly> компонент для браузерного контенту, suppressHydrationWarning для dynamic timestamps.

Продуктивність: метрики та інструменти

Bundle analysis — стартова точка. @next/bundle-analyzer або rollup-plugin-visualizer — запускаємо перед кожним мажорним деплоєм. Мета: жодна сторінка не повинна вимагати > 200 KB JS gzip для first paint.

Динамічні імпорти для важких компонентів:

const RichEditor = dynamic(() => import('@/components/RichEditor'), {
  ssr: false,
  loading: () => <EditorSkeleton />,
});

Редактор (Tiptap, Quill, CodeMirror) — типові кандидати на dynamic import. Без цього вони потрапляють в основний бандл. React DevTools Profiler — для пошуку зайвих ре-рендерів. React.memo, useMemo, useCallback — точкові інструменти. Передчасна мемоізація всього підряд додає overhead без користі. Профілюйте спочатку, оптимізуйте потім.

Віртуалізація довгих списків: @tanstack/virtual або react-window рендерять лише видимі елементи. Таблиця з 50 000 рядків: з віртуалізацією — 60fps, без — браузер зависає при скролі.

State management: без овериніжирингу

Для більшості додатків достатньо:

• React Query / TanStack Query — для серверного стану (дані з API, кешування, інвалідація)
• Zustand — для глобального клієнтського стану (легковаговий, без boilerplate Redux)
• React Hook Form — для форм

Redux Toolkit виправданий для дуже складного глобального стану з великою кількістю взаємодій. Для більшості задач — це overkill. Recoil, Jotai — атомарні підходи для незалежних шматків стану.

CSS та дизайн-система

Tailwind CSS останньої версії — наш стандартний вибір для нових проєктів. Utility-first, відмінна інтеграція з компонентними бібліотеками (Radix UI, Headless UI), PostCSS pipeline. CSS Modules — альтернатива, коли потрібна більш явна ізоляція стилів. Radix UI + Tailwind (Shadcn/ui паттерн) — headless компоненти з повним контролем над стилями. Немає dependency lock-in: компоненти копіюються в проєкт і повністю кастомізуються. Storybook — для документування компонентної бібліотеки. React DevTools Profiler — офіційний інструмент від команди React.

Тестування

E2E тести через Playwright — для checkout, авторизації, критичних форм. Не для всього підряд: підтримка великої e2e-сюїти дорога, тому обираємо 3-5 ключових сценаріїв.

Орієнтири за термінами та складом робіт

Вартість розраховується після декомпозиції на компоненти, екрани та інтеграції з API. Ми використовуємо N+1 оцінку: додаємо 20% на ризики.

Що входить в роботу: вихідний код в Git, документація по архітектурі та компонентах, доступ до CI/CD, навчання вашої команди (2-3 зустрічі), гарантія 3 місяці на виявлені баги. Додатково — покриття юніт-тестами ключових модулів.

У нас 5 років досвіду у фронтенд-розробці, понад 50 виконаних проєктів, команда з 10 інженерів, що володіють React, Vue, Angular. Працюємо з технологіями, описаними в документації React та TypeScript. Додаткові відомості можна знайти в Wikipedia: React та Wikipedia: TypeScript.

Який стек обрати для фронтенд-розробки React?

Ми порівнюємо інструменти за реальними метриками. Next.js швидший за Nuxt у збірці SSR на 20–30% при однаковому розмірі сторінки. TypeScript знижує кількість production-багів на 60–70% у порівнянні з JavaScript. Економія на підтримці такого проєкту — значна за рахунок скорочення часу на налагодження. Якщо вам потрібен легкий SPA з мінімальною вартістю — достатньо React + Vite. Для контентного сайту з SEO — Next.js з ISR дає TTFB нижче 50 мс навіть при 50 000 сторінок.

Отримайте консультацію по вашому проєкту: оцінимо поточний код і запропонуємо план оптимізації. Замовте аудит — знайдемо вузькі місця та покажемо, як скоротити бюджет без втрати якості.