Hooks de React

Hooks de React con seguridad de tipos para Ethereum. Crea tu propia interfaz de conexión de carteras con control total sobre la experiencia de usuario.

Bibliotecas disponibles

Cuándo usarlos

Usa hooks de React si:

• Necesitas control total sobre la interfaz de conexión de carteras
• Quieres hooks con seguridad de tipos para interactuar con Ethereum
• Estás creando una aplicación React
• No necesitas un modal de selección de carteras listo para usar

Ejemplo rápido

Configura WagmiProvider y QueryClientProvider con la guía de wagmi primero. Este componente usa los conectores configurados.

import { useAccount, useConnect, useDisconnect } from 'wagmi'
 
function ConnectButton() {
  const { address, isConnected } = useAccount()
  const { connect, connectors, isPending, error } = useConnect()
  const { disconnect } = useDisconnect()
 
  if (isConnected) {
    return (
      <div>
        <p>{address}</p>
        <button onClick={() => disconnect()}>Disconnect</button>
      </div>
    )
  }
 
  return (
    <div>
      {connectors.map((connector) => (
        <button key={connector.uid} disabled={isPending} onClick={() => connect({ connector })}>
          Connect {connector.name}
        </button>
      ))}
      {error && <p role="alert">{error.message}</p>}
    </div>
  )
}

Alternativa: con interfaz de cartera

Si quieres un modal de selección de carteras listo para usar, considera:

• RainbowKit - Selector de carteras para React
• Web3Modal - Interfaz de conexión de carteras de Reown