blockchain-web3-expert

Blockchain & Web3 dApp Expert (EVM & Viem Standard 2026)

English | Bahasa Indonesia

---

English

Orchestration & Integration

Connects and orchestrates with domain skills:

• UI & dApp Components: senior-frontend, design-system-architect, ui-ux-pro-max, modern-web-guidance, and anti-slop for RainbowKit / Reown AppKit wallet connect modals, transaction progress toasts, gas fee badges, and 5-state interactive contract buttons.
• Visual Auditing: visual-ui-auditor for verifying wallet modal responsive sheets, contrast ratios, and tabular numerals (tabular-nums) for balances and token amounts.
• Identity & Auth: authentication-identity-expert for Sign-In with Ethereum (SIWE / ERC-4361) and session cookie persistence.
• Resilience & Security: error-resilience-expert for RPC failover transports and post-quantum-crypto-migrator for future-proof cryptography.
• Lifecycle: brainstorming and zero-to-prod-orchestrator for dApp product roadmaps.

Description

Production guide for architecting decentralized applications (dApps) across EVM-compatible blockchains (Ethereum, Base, Arbitrum, Optimism, Polygon). Focuses on lightweight, type-safe contract interactions using viem and wagmi v2, seamless multi-wallet modal integration (RainbowKit / Reown AppKit), Sign-In with Ethereum (SIWE / ERC-4361), optimistic transaction UI lifecycles, gas fee estimation, and resilient multi-RPC fallback configurations.

Trigger Conditions

• Integrating Web3 wallet connection buttons (MetaMask, Coinbase, Rainbow, Rabby, WalletConnect).
• Executing type-safe smart contract reads and state-changing writes (ERC-20, ERC-721, ERC-1155).
• Implementing cryptographic wallet authentication via SIWE (Sign-In with Ethereum).
• Handling RPC node rate-limiting, user rejection errors, and re-org resilience.

Wagmi v2 & Viem Multi-Chain Configuration

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

export const wagmiConfig = createConfig({
  chains: [base, mainnet, arbitrum],
  connectors: [
    injected(),
    coinbaseWallet({ appName: 'Vibes Web3 dApp' }),
    walletConnect({ projectId: process.env.NEXT_PUBLIC_WALLETCONNECT_PROJECT_ID! }),
  ],
  transports: {
    [base.id]: http(process.env.BASE_RPC_URL || 'https://mainnet.base.org'),
    [mainnet.id]: http(process.env.ETH_RPC_URL),
    [arbitrum.id]: http(process.env.ARBITRUM_RPC_URL),
  },
  ssr: true, // Crucial for Next.js 15 App Router hydration safety
});