שילוב בלוקצ'יין עם ethers.js ו-web3.js

תארו לעצמכם בניית אתר לפרוטוקול DeFi. אתם מחברים ארנק דרך MetaMask, אבל היתרות לא נטענות — שגיאת hydration של SSR כי ethers.js ניגש ל-.on(), או צומת RPC נכשל ברגע הכי קריטי. ממקרים כאלה, פיתחנו מתודולוגיית עבודה: שימוש ב-ethers.js v6 ככלי העיקרי, ו-web3.js v4 לפרויקטים legacy. להלן, אנו מפרקים דפוסים אופייניים שאנו מיישמים בפיתוח אינטגרציית בלוקצ'יין turnkey. 5+ שנות ניסיון עם רשתות EVM, 20+ אינטגרציות לסטארטאפים וארגונים.

ethers.js v6 טוב פי 2-3 מ-web3.js v4 בגודל החבילה ובמהירות הייבוא: tree-shaking מסיר מודולים שאינם בשימוש. נכון, web3.js v4 נכתב מחדש ב-TypeScript, אבל ethers.js מציע API נקי יותר, BigInt מקורי, ותמיכה מובנית ב-ESM. לפרויקט חדש — בהחלט ethers.

איך לבחור בין ethers.js ל-web3.js?

לפרויקטים חדשים, אנו בהחלט ממליצים על ethers.js v6: הוא קל יותר, מהיר יותר, ויש לו טיפוסים טובים יותר. web3.js v4 נשאר רלוונטי לפרויקטים שמבצעים מיגרציה מגרסאות ישנות יותר.

מה כוללת עבודת האינטגרציה?

אנו מספקים סט מלא:

• ניתוח דרישות ובחירת ספרייה.
• עיצוב שכבת האינטראקציה עם החוזה (ABI, כתובות, רשתות).
• יישום קריאה/כתיבת נתונים, הרשמה לאירועים, טיפול בשגיאות.
• פיתוח ספקי fallback לסובלנות תקלות.
• בדיקת אינטגרציה ברשתות בדיקה (Goerli, Sepolia).
• תיעוד והעברת גישה.

לאחר סיום, אנו מבטיחים פעולה יציבה — אם מתעוררות בעיות תוך חודש, אנו מתקנים אותן ללא עלות.

איך להבטיח סובלנות תקלות של RPC?

שימו לב: כשצומת RPC אחד נופל, היישום צריך לעבור מיד לצומת אחר. אנו משתמשים ב-import { FallbackProvider, JsonRpcProvider } from 'ethers'; const fallbackProvider = new FallbackProvider([ { provider: new JsonRpcProvider('https://rpc1.example.com'), priority: 1, weight: 2 }, { provider: new JsonRpcProvider('https://rpc2.example.com'), priority: 2, weight: 1 }, ]); מ-ethers.js עם חלוקת משקל ועדיפות. דוגמת תצורה:

import { FallbackProvider, JsonRpcProvider } from 'ethers';

const fallbackProvider = new FallbackProvider([
  {
    provider: new JsonRpcProvider('https://rpc1.example.com'),
    priority: 1,
    weight: 2
  },
  {
    provider: new JsonRpcProvider('https://rpc2.example.com'),
    priority: 2,
    weight: 1
  },
]);

אנו גם מטפלים בשגיאות דרך try-catch ומתעדים כשלים לניטור.

למה ethers.js v6 מהיר יותר מ-web3.js v4?

בזכות tree-shaking אגרסיבי: ethers.js מייצא מודולים כקבצי ESM נפרדים, כך שהבאנדלר מסיר חלקים שאינם בשימוש. ב-web3.js v4, למרות TypeScript, פונקציות רבות מקושרות למודול אחד, מה שמגדיל את הגודל.

ethers.js v6: מושגי מפתח

import { BrowserProvider, JsonRpcProvider, FallbackProvider, Contract, formatEther, parseEther, formatUnits, parseUnits, isAddress, getAddress, } from 'ethers';

// Серверный провайдер
const serverProvider = new JsonRpcProvider(process.env.ETH_RPC_URL);

// Клиентский провайдер
async function getWalletProvider() {
  if (!window.ethereum) throw new Error('Wallet not found');
  const provider = new BrowserProvider(window.ethereum);
  const signer = await provider.getSigner();
  return { provider, signer };
}

// Fallback-провайдер (несколько RPC)
const fallbackProvider = new FallbackProvider([
  {
    provider: new JsonRpcProvider('https://rpc1.example.com'),
    priority: 1,
    weight: 2
  },
  {
    provider: new JsonRpcProvider('https://rpc2.example.com'),
    priority: 2,
    weight: 1
  },
]);

עבודה עם חוזים ואירועים

const ERC20_ABI = [
    'function balanceOf(address owner) view returns (uint256)',
    'function transfer(address to, uint256 amount) returns (bool)',
    'function approve(address spender, uint256 amount) returns (bool)',
    'function allowance(address owner, address spender) view returns (uint256)',
    'event Transfer(address indexed from, address indexed to, uint256 value)',
];

// Read-only
const tokenRead = new Contract(TOKEN_ADDRESS, ERC20_ABI, serverProvider);
const balance = await tokenRead.balanceOf(walletAddress);

// Write с подписью
const { signer } = await getWalletProvider();
const tokenWrite = new Contract(TOKEN_ADDRESS, ERC20_ABI, signer);
const tx = await tokenWrite.transfer(recipientAddress, parseUnits('10', 18));
const receipt = await tx.wait();

// Подписка на события
const filter = tokenRead.filters.Transfer(null, walletAddress);
tokenRead.on(filter, (from, to, value) => {
    console.log(`Получено ${formatUnits(value, 18)} от ${from}`);
});

// Исторические события
const events = await tokenRead.queryFilter(filter, fromBlock, 'latest');

web3.js v4

import { Web3 } from 'web3';
const web3 = new Web3(window.ethereum);
const erc20Contract = new web3.eth.Contract(ERC20_ABI, TOKEN_ADDRESS);

// Чтение
const balance = await erc20Contract.methods.balanceOf(walletAddress).call();

// Запись
const accounts = await web3.eth.getAccounts();
const receipt = await erc20Contract.methods
  .transfer(recipient, web3.utils.toWei('10', 'ether'))
  .send({ from: accounts[0] });

BigInt וכלי עזר

// Сериализация BigInt (JSON.stringify не поддерживает)
const replacer = (_: string, value: unknown) =>
  typeof value === 'bigint' ? value.toString() : value;

// Сокращение адреса
function shortenAddress(address: string): string {
  return `${address.slice(0, 6)}…${address.slice(-4)}`;
}

// Конвертация timestamp блока
async function blockToDate(blockNumber: number): Promise<Date> {
  const block = await serverProvider.getBlock(blockNumber);
  return new Date(Number(block!.timestamp) * 1000);
}