mcpField
W
wagmi-v3

wagmi-v3

github.com/blockmaticDevelopment1221 installsUpdated 5w ago
Repository

About wagmi-v3

A skill for React and Next.js developers integrating wallets and EVM contract interactions with Wagmi v3. It covers wallet state, address validation, transaction simulation, and SSR handling.

Key features

  1. 01Wallet connection state management
  2. 02Contract read and write hooks
  3. 03Address validation and transaction utilities with viem
  4. 04Contract simulation before writes
  5. 05Wallet state handling for Next.js SSR

Use cases

  1. 01Adding EVM wallet integration to a React app
  2. 02Reading contract data and managing its cache
  3. 03Simulating and submitting contract transactions
  4. 04Persisting wallet state in Next.js

Install

Copy the command and run it in a terminal.

$npx skills add https://github.com/blockmatic/basilic-skills --skill wagmi-v3

After installing, type/wagmi-v3in Claude Code to confirm it loaded.

Bundled filesPATTERNS.mdreferences/GUIDE.md

Details

From the project README

Skill: wagmi

Scope

  • React/Next.js wallet integration with Wagmi v3 for EVM chains
  • Contract interactions using viem v2 for address validation and transaction building
  • Transaction state management and error handling
  • Custom hooks wrapping wagmi for contract-specific interactions

Does NOT cover:

  • Solana frontend development
  • Backend RPC interactions
  • Smart contract development

Assumptions

  • Wagmi v3.3.2+
  • viem v2.44.4
  • React 18+ or Next.js 14+
  • TypeScript v5+ with strict mode
  • TanStack Query v5+ (peer dependency of wagmi)
  • WalletConnect v2+ (optional, for WalletConnect connector)

Principles

  • Use Wagmi v3.x hooks for wallet state (useAccount, useWriteContract, useReadContract, useWaitForTransactionReceipt, useSimulateContract)
  • Use viem v2 for address validation (getAddress) and transaction utilities (parseEther, parseGwei)
  • Create custom hooks wrapping wagmi for contract-specific interactions
  • Handle connection states explicitly: disconnected, connecting, connected, reconnecting
  • Validate addresses with getAddress() from viem before use (never cast directly as Address)
  • Use generated contract ABIs and types from OpenAPI specs
  • Use TanStack Query (via wagmi) for caching and refetching contract data
  • Simulate contracts before writing to validate and estimate gas
  • Use conditional queries with enabled flags to prevent unnecessary fetches
  • Handle SSR properly with cookie storage for persistent wallet state

Constraints

MUST
  • Use Wagmi v3.x (not v1 or v2) - v1/v2 patterns are incompatible
  • Validate addresses with getAddress() from viem - never cast strings directly
  • Handle SSR properly in Next.js (use dynamic with ssr: false for wallet components)
SHOULD
  • Create custom hooks for contract interactions
  • Simulate contracts before writing (useSimulateContract)
  • Use conditional queries with enabled flags
  • Use cookie storage for SSR persistence
  • Handle all connection states explicitly
AVOID
  • Wrapping generated hooks from OpenAPI clients unless necessary for abstraction
  • Exposing private keys or sensitive wallet data in components
  • Skipping address validation

Interactions

  • Uses generated contract ABIs/types from OpenAPI specs
  • Complements fastify for API development

Patterns and code samples: PATTERNS.md.

Comments

Markdown supported