Conecta tu dApp a wallets y lee datos on-chain desde el frontend
El frontend Web3 usa bibliotecas como ethers.js y wagmi para conectar wallets (MetaMask, WalletConnect), leer datos de contratos (balances, estados) y firmar transacciones. RainbowKit ofrece UI de conexión con múltiples wallets.
1. El usuario hace clic en "Conectar Wallet". 2. RainbowKit muestra opciones de wallet. 3. Usuario elige y firma. 4. La dApp obtiene la dirección y puede leer datos. 5. Para enviar TX, el usuario firma con su wallet.
RainbowKit + wagmi: useAccount() da la dirección y estado de conexión. useBalance() lee el saldo. ethers.js provider.getBalance(address) lee ETH de una dirección. signer.sendTransaction() envía una TX.
No usar provider.estimateGas() antes de enviar una transacción. El gas estimado evita fallos y optimiza costos. Otro error: no manejar el cambio de red (chain ID) del usuario.
wagmi + RainbowKit son el stack más popular para dApps en 2026. ethers.js v6+ es el estándar para interacción con EVM. La experiencia de conexión Web3 es crítica para adopción.
El frontend Web3 se conecta con dashboards (06) para visualizar datos, cross-chain (07) para puentes, y automatización (09) para keepers.
Instala dependencias y configura provider, chains, y connectors.
Usa useConnect y useAccount para manejar el estado de conexión.
useBalance, useContractRead, provider.getBalance.
Prueba conectar, leer balance y enviar TX en el simulador.
2 de 3 correctas = insignia de Frontend Developer.