web3-frontend

name	web3-frontend
description	Master Web3 frontend development with wallet integration, viem/wagmi, and dApp UX
sasmp_version	1.3.0
version	2.0.0
updated	2025-01
bonded_agent	05-web3-frontend
bond_type	PRIMARY_BOND
atomic	true
single_responsibility	web3_frontend
parameters	{"topic":{"type":"string","required":true,"enum":["wallet","transactions","signing","hooks","errors"]},"framework":{"type":"string","default":"react","enum":["react","next","vue","vanilla"]}}
retry_config	{"max_attempts":3,"backoff":"exponential","initial_delay_ms":1000}
logging	{"level":"info","include_timestamps":true,"track_usage":true}

Web3 Frontend Skill

Master Web3 frontend development with wallet integration, modern libraries (viem/wagmi), and production dApp patterns.

Quick Start

# Invoke this skill for Web3 frontend development
Skill("web3-frontend", topic="wallet", framework="react")

Topics Covered

1. Wallet Integration

Connect users to Web3:

• RainbowKit: Beautiful wallet modal
• WalletConnect: Mobile support
• Account Abstraction: ERC-4337
• Multi-chain: Network switching

2. Transaction Management

Handle blockchain interactions:

• Write Operations: Contract writes
• State Tracking: Pending, confirmed
• Gas Estimation: Fee display
• Error Handling: User-friendly messages

3. Signing & Auth

Verify user identity:

• EIP-712: Typed data signing
• SIWE: Sign-In with Ethereum
• Permit: Gasless approvals
• Message Signing: Personal sign

4. React Hooks

Modern patterns with wagmi:

• useAccount: Connection state
• useWriteContract: Transactions
• useReadContract: Data fetching
• useWaitForTransactionReceipt: Confirmations

Code Examples

Connect Wallet

'use client';

import { ConnectButton } from '@rainbow-me/rainbowkit';
import { useAccount } from 'wagmi';

export function WalletConnect() {
   { address, isConnected } = ();

   (
    
  );
}