React Hooks

Typsichere React Hooks für Ethereum. Erstellen Sie Ihre eigene Wallet-Verbindungsoberfläche mit voller Kontrolle über das Nutzererlebnis.

Verfügbare Bibliotheken

Wann verwenden

Verwenden Sie React Hooks, wenn Sie:

• Volle Kontrolle über die Wallet-Verbindungsoberfläche benötigen
• Typsichere Hooks für Ethereum-Interaktionen wünschen
• Eine React-Anwendung entwickeln
• Keinen vorgefertigten Wallet-Auswahldialog benötigen

Kurzes Beispiel

Richten Sie WagmiProvider und QueryClientProvider mithilfe der wagmi-Anleitung zuerst ein. Diese Komponente verwendet die konfigurierten Konnektoren.

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: Mit Wallet-Oberfläche

Wenn Sie einen vorgefertigten Wallet-Auswahldialog wünschen, kommen infrage:

• RainbowKit - React-Wallet-Auswahl
• Web3Modal - Reown-Wallet-Verbindungsoberfläche