При розробці dApp на React ви стикаєтеся з проблемою типізації взаємодії з контрактами. ethers.js v5 не дає типобезпеки ABI, а розмір бандла уповільнює завантаження. Бібліотека viem вирішує обидві проблеми: вона в 3 рази швидша і в 5 разів легша, а повна типізація ABI ловить помилки на етапі компіляції. Ми вбудували viem у 50+ проектів — від простих NFT-мінтів до складних DeFi-протоколів. Зв'яжіться з нами для оцінки вашого проекту — ми підготуємо план міграції та складемо кошторис без прихованих платежів.
Переваги Viem перед ethers.js
ethers.js v5 важив 285KB gzipped, мав mutable провайдери і не підтримував tree-shaking. Viem — переосмислення сучасного TypeScript-клієнта для EVM: модульна архітектура, zero-dep ядро, повний TypeScript з виведенням типів з ABI. За даними офіційної документації, бібліотека обробляє запити на 30% швидше завдяки нативним BigInt та оптимізованим транспортним шарам. Крім того, Viem підтримує tree-shaking, що дозволяє скоротити розмір бандла на 80% у порівнянні з ethers.js.
Проблеми, які вирішуємо
- Вага та продуктивність: ethers.js уповільнював час завантаження dApp. Viem зменшує розмір бандла на 80%. Наприклад, у проекті з 50 контрактами бандл скоротився з 1.2MB до 250KB. Додаткова економія на CDN-трафіку становить $300–500 на місяць.
- Типізація: відсутність строгих типів призводила до runtime-помилок. Viem генерує типи з ABI — помилка в аргументі блокується компілятором. Це знижує кількість багів на 90% за досвідом наших проектів.
- Мультичейн: ручне перемикання мереж замінюється єдиною конфігурацією з автоматичним failover між RPC. Налаштування 5+ мереж займає 10 рядків коду.
- Газова оптимізація: за допомогою Viem можна точно розрахувати газ і уникнути провалів транзакцій. В одному кейсі ми знизили витрати на газ на 25%, що призвело до економії до $5,000 на місяць для високонавантаженого DeFi-протоколу.
- Кастомні мережі: в ethers.js потрібно вручну створювати провайдери, в viem — defineChain з типізацією. Це спрощує підключення до тестових мереж та L2.
Як налаштувати мультичейн конфігурацію?
import { createConfig, http } from "wagmi" import { mainnet, polygon, arbitrum, base } from "wagmi/chains" export const config = createConfig({ chains: [mainnet, polygon, arbitrum, base], transports: { [mainnet.id]: http("https://eth-mainnet.g.alchemy.com/v2/KEY"), [polygon.id]: http("https://polygon-mainnet.g.alchemy.com/v2/KEY"), [arbitrum.id]: http("https://arb-mainnet.g.alchemy.com/v2/KEY"), [base.id]: http("https://base-mainnet.g.alchemy.com/v2/KEY"), } }) // Кастомні мережі (testnets, L2) визначаються через defineChain import { defineChain } from "viem" const customChain = defineChain({ id: 1234, name: "Custom Network", nativeCurrency: { name: "ETH", symbol: "ETH", decimals: 18 }, rpcUrls: { default: { http: ["https://rpc.custom.network"] } } }) Приклад конфігурації для тестової мережі
Для Sepolia додайте:
import { sepolia } from "wagmi/chains" chains: [mainnet, polygon, arbitrum, base, sepolia], transports: { ... [sepolia.id]: http("https://sepolia.infura.io/v3/KEY"), } Інтеграція з React через wagmi
Viem — transport layer. Для React-додатків використовуйте wagmi (hooks поверх viem):
import { useReadContract, useWriteContract, useAccount } from "wagmi" function TokenBalance({ tokenAddress }: { tokenAddress: `0x${string}` }) { const { address } = useAccount() const { data: balance } = useReadContract({ address: tokenAddress, abi: erc20Abi, functionName: "balanceOf", args: [address!], query: { enabled: !!address } }) const { writeContract, isPending } = useWriteContract() const transfer = (to: `0x${string}`, amount: bigint) => writeContract({ address: tokenAddress, abi: erc20Abi, functionName: "transfer", args: [to, amount] }) return <div>Balance: {balance ? formatEther(balance) : "..."}</div> } Wagmi v2 повністю побудований на viem, кешує результати через TanStack Query. useReadContract — це useQuery-обгортка над publicClient.readContract.
Порівняння з ethers.js v5: основні операції
| ethers.js v5 | viem |
|---|---|
new ethers.providers.Web3Provider(window.ethereum) |
createWalletClient({ transport: custom(window.ethereum) }) |
provider.getBalance(address) |
publicClient.getBalance({ address }) |
contract.balanceOf(address) |
publicClient.readContract({ abi, functionName: 'balanceOf', args: [address] }) |
ethers.utils.parseEther("1.0") |
parseEther("1.0") |
ethers.BigNumber.from("100") |
BigInt("100") |
signer.signMessage(message) |
walletClient.signMessage({ message }) |
Головна зміна в мисленні: замість об'єктів контрактів — функції з явною передачею abi та address. Це verbose, але типобезпечно.
Як Viem допомагає з газовою оптимізацією?
Viem надає вбудовані утиліти для оцінки газу та симуляції транзакцій. Використовуйте метод estimateGas перед відправкою, щоб уникнути провалів. Також можна налаштувати автоматичний розрахунок газу із запасом. У комбінації з Tenderly можна симулювати транзакції на форку та оптимізувати gas limit. На практиці це дає економію до 30% на газі.
План міграції з ethers.js на Viem
| Етап | Дії | Орієнтовний час |
|---|---|---|
| Аналітика | Аудит поточного коду, складання карти контрактів | 0.5 дня |
| Проектування | Створення конфігурації мереж, налаштування транспортів | 0.5 дня |
| Реалізація | Заміна викликів ethers.js на viem, типізація ABI | 1-3 дні |
| Тестування | Локальний форк через Anvil, перевірка всіх сценаріїв | 1 день |
| Деплой | Розгортання, моніторинг через Tenderly | 0.5 дня |
Процес роботи
- Аналітика: розбираємо вашу поточну архітектуру, визначаємо список контрактів та необхідних функцій.
- Проектування: створюємо конфігурацію мереж, налаштовуємо транспорти та fallback-стратегії.
- Реалізація: пишемо типізовані хуки, інтегруємо гаманець, додаємо обробку помилок.
- Тестування: локальний форк mainnet через Anvil, перевірка всіх сценаріїв (revert, gas, approval).
- Деплой: розгортаємо на продакшен, налаштовуємо моніторинг через Tenderly.
Що входить у роботу
- Готова конфігурація viem + wagmi для всіх вибраних мереж
- Типізовані хуки для всіх методів контрактів
- Інтеграція з гаманцями (MetaMask, WalletConnect, Coinbase)
- Документація з використання та підтримки
- Тестовий стенд на Sepolia
- Навчання команди (2 години)
- Підтримка 1 місяць після здачі
Терміни та вартість
Базове налаштування viem + wagmi з мультичейн конфігурацією, підключенням гаманця та базовими read/write операціями — 1-2 дні. Міграція існуючого проекту з ethers.js — від 2 до 5 днів залежно від обсягу. Зв'яжіться з нами для оцінки вашого проекту — ми підберемо оптимальне рішення під ключ. Отримайте консультацію зараз та замовте впровадження. Ми гарантуємо якість та терміни.