Hooks React

Hooks React avec sécurité de typage pour Ethereum. Créez votre propre interface de connexion au portefeuille en gardant le contrôle total sur l’expérience utilisateur.

Bibliothèques disponibles

Quand les utiliser

Utilisez les hooks React si vous :

• Avez besoin d’un contrôle total sur l’interface de connexion au portefeuille
• Souhaitez des hooks avec sécurité de typage pour les interactions Ethereum
• Créez une application React
• N’avez pas besoin d’une fenêtre de sélection de portefeuille prête à l’emploi

Exemple rapide

Configurez d’abord WagmiProvider et QueryClientProvider à l’aide du guide wagmi. Ce composant utilise les connecteurs configurés.

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>
  )
}

Alternative : avec une interface de portefeuille

Si vous souhaitez une fenêtre de sélection de portefeuille prête à l’emploi, envisagez :

• RainbowKit - Sélecteur de portefeuille React
• Web3Modal - Interface de connexion de portefeuilles Reown