Installs into .claude/skills of the current project.
Are you the author of 2528 Wagmi React 0f0f1e95?
Add the live security badge to your README. It updates with every re-scan.
[](https://www.skillsdirectory.com/skills/tools-only-2528-wagmi-react-0f0f1e95)
# Wagmi React Hook Setup Test Case
Set up a React application with wagmi hooks for wallet connection and token balance display.
## Context
- React/Next.js frontend application
- Need to connect browser wallets (MetaMask, WalletConnect, Coinbase Wallet)
- Display connected account's ERC-20 token balance (USDC)
- Support multiple chains (Ethereum mainnet, Arbitrum, Base)
## Requirements
1. Create a wagmi config with createConfig, multiple chains, and connectors (injected, walletConnect, coinbaseWallet)
2. Set up WagmiProvider and QueryClientProvider in the app root
3. Build a wallet connection component using useAccount and useConnect hooks
4. Read an ERC-20 token balance using useReadContract with a parsed ABI
5. Display loading, error, and success states correctly
6. Include TypeScript types (Register interface for wagmi config)
## Constraints
- Must use wagmi (not raw viem) for React hooks
- Must use @tanstack/react-query as a peer dependency
- Must import chains from 'wagmi/chains' and connectors from 'wagmi/connectors'
- Must handle wallet connection states (connecting, connected, disconnected)
- Should follow wagmi best practices for loading and error states
## Expected Output
A working React/TypeScript code example that configures wagmi with multiple chains and connectors, wraps the app in the required providers, connects a wallet, and reads a token balance using wagmi hooks.
