פיתוח dApp ב-React עם Wagmi: הגדרה, Hooks והעברה

מדריך זה מכסה אינטגרציית wagmi react, מיגרציית wagmi v2, ו-hooks של wagmi לקריאה וכתיבה לחוזים. זה חיוני לפיתוח dapp ב-react וליצירת frontend web3 ב-Ethereum. פיתוח React ב-Ethereum מפושט עם Wagmi. אינטגרציית WalletConnect React פועלת דרך ה-connector של walletConnect. אינטגרציית SSR Wagmi Next.js דורשת הפרדה נכונה בין client ל-server.

SSR hydration ב-Next.js App Router עם Wagmi הוא כאב ראש נפוץ. נתקלנו בפרויקטים שבהם useAccount() מחזיר disconnected ב-server, מה שגורם לדה-סינכרון של ה-store ב-client. הפתרון הוא הפרדה קפדנית בין רכיבי client ו-server והגדרה נכונה של WagmiProvider. הניסיון שלנו בפיתוח Web3 משתרע על פני יותר מ-5 שנים, עם יותר מ-50 אינטגרציות לפרויקטי DeFi ו-NFT. Wagmi הוא התקן דה-פקטו לפיתוח React ב-Ethereum. בהשוואה ל-ethers.js גולמי, Wagmi מקצר את זמן הפיתוח פי 3 ומפחית את נפח הקוד ב-60%. Wagmi v2 מחצה עוד יותר את בקשות ה-RPC, מה שמוריד עלויות תשתית. באמצעות Wagmi v2, ניתן לקצץ עלויות RPC ב-50%, ולחסוך מאות דולרים מדי חודש על תשתית. Wagmi v2 מבצע פי 2 טוב יותר מ-v1 מבחינת יעילות RPC ושימוש בזיכרון. בקשו הערכת פרויקט — נציע את הארכיטקטורה האופטימלית.

למה לבחור ב-Wagmi ל-Frontend של React?

Wagmi v2 הוא התקן דה-פקטו ל-React + EVM. בניגוד לשימוש ישיר ב-ethers.js או Web3.js, Wagmi מנהל את מצב הארנק אוטומטית, מעדכן נתונים בעת שינוי ברשת או בחשבון, ומבצע אופטימיזציה לבקשות RPC דרך TanStack Query. זה מקצר את זמן הפיתוח פי 3: במקום שבו ethers.js דורש 100 שורות לניהול יתרות ורשת, Wagmi עושה זאת ב-30. חיסכון בזמן בכל פרויקט מגיע ל-70% בפעולות שגרתיות. הספרייה גם מטפלת במעברי רשת וחשבון, ומעדכנת את המצב ללא re-renders מיותרים. התוצאה היא UX חלק וקוד ניתן לתחזוקה.

איך להגדיר Wagmi ב-5 שלבים

1. התקינו תלויות: npm i wagmi viem @tanstack/react-query. שימו לב ש-wagmi v2 דורש viem כספק — ethers.js כבר לא בשימוש.
2. צרו קונפיגורציה ב-config.ts עם transports ו-connectors מרובי-רשתות. כל transport צריך להצביע ל-RPC פרטי — נקודות קצה ציבוריות לרוב יש להן מגבלות בקשות וגורמות לעיכובים.
3. עטפו את האפליקציה ב-WagmiProvider ו-QueryClientProvider. WagmiProvider חייב להיות ממוקם רק ב-client root כדי למנוע בעיות SSR.
4. יישמו read hooks (useReadContract) עם query.enabled כדי למנוע בקשות מיותרות. השתמשו ב-staleTime ו-gcTime כדי לשלוט ב-caching.
5. הוסיפו write hooks (useWriteContract) עם טיפול באישור באמצעות useWaitForTransactionReceipt. כדי להעריך gas לפני שליחה, השתמשו ב-useSimulateContract — זה מונע שגיאות out-of-gas בלתי צפויות.

קונפיגורציה והתקנה

// config.ts
import { createConfig, http } from 'wagmi';
import { mainnet, polygon, arbitrum, base } from 'wagmi/chains';
import { injected, coinbaseWallet, walletConnect } from 'wagmi/connectors';

export const config = createConfig({
  chains: [mainnet, polygon, arbitrum, base],
  transports: {
    [mainnet.id]: http('https://eth-mainnet.g.alchemy.com/v2/YOUR_KEY'),
    [polygon.id]: http('https://polygon-mainnet.g.alchemy.com/v2/YOUR_KEY'),
    [arbitrum.id]: http('https://arb-mainnet.g.alchemy.com/v2/YOUR_KEY'),
    [base.id]: http('https://base-mainnet.g.alchemy.com/v2/YOUR_KEY'),
  },
  connectors: [
    injected(),
    coinbaseWallet({ appName: 'AppName' }),
    walletConnect({ projectId: process.env.VITE_WC_PROJECT_ID! }),
  ],
});

WagmiProvider עוטף את האפליקציה; QueryClientProvider נדרש — Wagmi משתמש בו ל-caching. חשוב להעביר transports עבור כל רשת, אחרת בקשות יישלחו ל-RPC ציבוריים, מה שגורם למגבלות ועיכובים.

דפוסים מרכזיים

קריאת נתונים

useReadContract לקריאה בודדת, useReadContracts לקריאה בקבוצה דרך Multicall3:

const { data: balance } = useReadContract({
  address: TOKEN_ADDRESS,
  abi: erc20Abi,
  functionName: 'balanceOf',
  args: [address],
  query: { enabled: !!address },
});

// config.ts import { createConfig, http } from 'wagmi'; import { mainnet, polygon, arbitrum, base } from 'wagmi/chains'; import { injected, coinbaseWallet, walletConnect } from 'wagmi/connectors'; export const config = createConfig({ chains: [mainnet, polygon, arbitrum, base], transports: { [mainnet.id]: http('https://eth-mainnet.g.alchemy.com/v2/YOUR_KEY'), [polygon.id]: http('https://polygon-mainnet.g.alchemy.com/v2/YOUR_KEY'), [arbitrum.id]: http('https://arb-mainnet.g.alchemy.com/v2/YOUR_KEY'), [base.id]: http('https://base-mainnet.g.alchemy.com/v2/YOUR_KEY'), }, connectors: [ injected(), coinbaseWallet({ appName: 'AppName' }), walletConnect({ projectId: process.env.VITE_WC_PROJECT_ID! }), ], }); הוא קריטי: בלעדיו, ה-hook מנסה לקרוא לפני שה-address מוגדר. const { data: balance } = useReadContract({ address: TOKEN_ADDRESS, abi: erc20Abi, functionName: 'balanceOf', args: [address], query: { enabled: !!address }, }); ו-query.enabled שולטים בתדירות שבה נתונים נטענים מחדש — 30 שניות ליתרות, 5 דקות לפרמטרים של חוזה שמשתנים לאט.

כתיבה (טרנזקציות)

const { writeContractAsync } = useWriteContract();
const { isLoading: isConfirming } = useWaitForTransactionReceipt({ hash });

const handleStake = async () => {
  const hash = await writeContractAsync({
    address: STAKING_ADDRESS,
    abi: stakingAbi,
    functionName: 'stake',
    args: [parseEther(amount)],
  });
  // hash получен — транзакция отправлена, ждём подтверждения
};

חתימה

לחתימות SIWE ו-permit — השתמשו ב-useSignMessage ו-useSignTypedData:

const { signTypedDataAsync } = useSignTypedData(); // EIP-712 типизированные данные для permit
const signature = await signTypedDataAsync({
  domain,
  types,
  primaryType: 'Permit',
  message: permitMessage,
});

איך למנוע שליחות כפולות של טרנזקציות?

לאחר שליחת טרנזקציה, המתינו לאישורה ובטלו את ה-cache. השתמשו ב-useWaitForTransactionReceipt עם onSuccess:

const queryClient = useQueryClient();
useWaitForTransactionReceipt({
  hash,
  onSuccess: () => {
    queryClient.invalidateQueries({ queryKey: ['readContract'] });
  },
});

זה מונע שליחות כפולות של טרנזקציות ומבטיח עדכניות נתונים בממשק המשתמש.

Wagmi v1 לעומת Wagmi v2

מיגרציה מ-v1 ל-v2 היא משימה טיפוסית: אנו מחליפים תלויות, כותבים מחדש קונפיגורציה ו-hooks, ובודקים ב-Tenderly. כל התהליך אורך 1–2 ימים.

תוצרים

אנו מספקים אינטגרציה מלאה:

• קונפיגורציית transports ו-connectors מרובי-רשתות.
• יישום כל ה-read/write hooks הנדרשים.
• הגדרת חתימה אוטומטית ונתונים טיפוסיים (EIP-712).
• בדיקת טרנזקציות דרך Tenderly וסימולציה ב-Foundry.
• תיעוד והערות קוד.
• גישה ל-repositories פרטיים.
• מפגש הדרכה לצוות שלכם.
• 30 ימי תמיכה לאחר השקה.
• מיגרציה מ-Wagmi v1 ל-v2.

כל העבודה מגובה באחריות תאימות לגרסאות העדכניות ביותר של Wagmi ו-Viem.

הערכות זמנים

התקנה מאפס (multi-chain, ממשק ארנק, read/write hooks בסיסיים): מיום אחד. אינטגרציה עם אפליקציית React קיימת עם מספר חוזים חכמים ומיגרציה מ-v1: 2–3 ימים. צרו קשר להערכה אישית — נכין את הארכיטקטורה ונחשב זמנים מדויקים. עבור אינטגרציית Wagmi טיפוסית, העלות נעה בין $500 ל-$1000 עבור התקנה בסיסית, וחוסכת $3000 בזמן פיתוח בהשוואה לבנייה מאפס.