Wallet Integration skill

Wallet Integration is an agent skill for AI coding assistants (Claude Code, OpenClaw, Cursor, Codex). Web3 wallet integration for React/Next.js dApps — RainbowKit, ConnectKit, WalletConnect, wagmi v2/viem, contract reads/writes, EIP-712 signing, chain switching, and SSR-safe hydration. Use when connecting wallets, sending transactions, signing messages, or fixing wallet hydration/precision/security issues. Install with: npx skills-ws install wallet-integration.

web3v1.11.0Updated
copied ✓
openclawclaude-codecursorcodex
0 installsSecurity scan: cleanSource code

Web3 Wallet Integration

Stack: wagmi v2 + viem v2 + @tanstack/react-query v5. ethers-era patterns are out. RainbowKit and ConnectKit are wallet-UI layers on top of wagmi. Note: wagmi v3 is the latest major (it renames useAccount to useConnection and hook action functions to mutate/mutateAsync, and makes connector SDKs optional peer deps), but RainbowKit and ConnectKit still peer-require wagmi 2.x, so this skill targets wagmi v2: install wagmi@2, not latest. For kit-free builds you can adopt wagmi v3 via https://wagmi.sh/react/guides/migrate-from-v2-to-v3 (the hooks below need the v3 renames applied).

Address typing rule (read first). wagmi/viem use the template-literal type `0x${string}` for every address. A placeholder like '0xRecipient...' (with a literal ...) is not assignable to that type — TypeScript will reject it and the example won't compile. Every address in this skill is a full 40-hex-char value. None of these are real or safe to use on mainnet — replace them with addresses you have verified for the correct chain. Centralize them so they're easy to swap:

// addresses.ts — verified per chain; replace before mainnet use.
import type { Address } from 'viem';

// USDC on Ethereum mainnet (chainId 1). USDC has a DIFFERENT address on every chain —
// never reuse an address across chains. Look up the canonical address per chain.
export const USDC_MAINNET: Address = '0xA0b86991c6218b36c1d19D4a2e9Eb0cE3606eB48';

// Obvious dummy recipients/contracts for examples. Do NOT send funds here.
export const RECIPIENT: Address      = '0x70997970C51812dc3A010C7d01b50e0d17dc79C8'; // Anvil acct #1
export const EXAMPLE_CONTRACT: Address = '0x5FbDB2315678afecb367f032d93F642f64180aa3'; // Anvil deploy #0
export const ZERO_ADDRESS: Address   = '0x0000000000000000000000000000000000000000';

Safety gate

Before executing commands or changing external systems, confirm scope, credentials, target environment, rollback, and required approval. Pin and verify third-party artifacts; never expose secrets to client code or logs.

Reference guide

Read only the references needed for the current request:

Related Web3 skills

← All 86 skills