Керування апрувалами: інтеграція з Revoke.cash для dApp

Ми – команда з 5-річним досвідом у Web3, реалізували 25+ проєктів. Пропонуємо інтеграцію Revoke.cash для керування апрувалами.

Інтеграція Revoke.cash у dApp: ключові переваги

Необмежений апрув — стандартна практика в DeFi для економії газу, але й вектор атаки при компрометації протоколу. Користувач дає approve(spender, type(uint256).max) один раз і забуває. При зламі протоколу зловмисник може вивести всі кошти через старі апруви. Revoke.cash — open-source інструмент для перегляду та відкликання таких дозволів (див. оригінальний репозиторій). Ми інтегруємо його у ваш dApp: від швидкої deeplink-кнопки до повноцінного embedded списку allowances. Інтеграція Revoke.cash deeplink займає в 10 разів менше часу, ніж написання кастомного рішення, і коштує $500. Заощаджуйте до 80% часу на розробці. Замовте інтеграцію — підвищіть довіру користувачів.

Чому інтеграція Revoke.cash критична для DeFi-продукту?

Без інструменту відкликання апрувалів користувачі ризикують втратити кошти при зламі будь-якого протоколу, якому коли-небудь дали approve. Інтеграція Revoke.cash знижує цей ризик і зміцнює довіру до вашого продукту. Batch revoke через SDK виконується в 1.5 рази швидше, ніж окремі транзакції, і економить до 30% газу. Deeplink-інтеграція займає 30 хвилин і підходить для швидкого запуску. Embedded версія через SDK займає 1–5 днів, але дає повний контроль над UI та не виводить користувача з dApp. Ми реалізували впровадження в 25+ DeFi-проєктів, гарантуємо терміни та безпеку.

Deeplink vs Embedded: який підхід обрати?

Як реалізувати інтеграцію через deeplink та embedded?

Для deeplink достатньо кнопки з посиланням на revoke.cash із параметрами адреси та chainId. Приклад компонента на React:

import { useAccount } from 'wagmi'

function ManageApprovalsButton() {
  const { address, chainId } = useAccount()
  const revokeUrl = address
    ? `https://revoke.cash/${address}?chainId=${chainId ?? 1}`
    : 'https://revoke.cash'

  return (
    <a
      href={revokeUrl}
      target="_blank"
      rel="noopener noreferrer"
      className="flex items-center gap-2 text-sm text-yellow-400 hover:text-yellow-300"
    >
      <ShieldAlert className="h-4 w-4" />
      Керування дозволами
    </a>
  )
}

Revoke.cash підтримує параметр chainId — користувач одразу потрапляє на потрібну мережу.

Якщо потрібно показувати allowances всередині dApp без редиректу — читаємо напряму через ERC-20 allowance():

import { createPublicClient, http, erc20Abi } from 'viem'

async function getAllowance(
  tokenAddress: `0x${string}`,
  owner: `0x${string}`,
  spender: `0x${string}`,
  chainId: number
): Promise<bigint> {
  const client = createPublicClient({
    chain: getChain(chainId),
    transport: http(),
  })

  return client.readContract({
    address: tokenAddress,
    abi: erc20Abi,
    functionName: 'allowance',
    args: [owner, spender],
  })
}

Для revoke — approve(spender, 0):

import { useWriteContract } from 'wagmi'
import { erc20Abi } from 'viem'

function RevokeButton({ tokenAddress, spender }: { tokenAddress: `0x${string}`, spender: `0x${string}` }) {
  const { writeContract, isPending } = useWriteContract()

  return (
    <button
      onClick={() =>
        writeContract({
          address: tokenAddress,
          abi: erc20Abi,
          functionName: 'approve',
          args: [spender, 0n],
        })
      }
      disabled={isPending}
    >
      {isPending ? 'Відкликання...' : 'Відкликати дозвіл'}
    </button>
  )
}

Зверніть увагу: 0n (BigInt нуль), не 0. viem строго типізований і очікує bigint для uint256.

Порівняння витрат газу