Auf dieser Seite

React + wagmi

Diese Anleitung zeigt einen minimalen, EIP-1193-basierten Weg, OneKey aus React-Apps mit wagmi zu verbinden. Verwenden Sie den dedizierten Provider von OneKey (window.$onekey.ethereum), damit eine mit OneKey beschriftete Schaltfläche auch OneKey verbindet.

Installieren


npm i wagmi@^2 viem@^2 @tanstack/react-query@^5

wagmi v2 basiert auf viem. Diese Anleitung verwendet den Injected-Konnektor für injizierte Wallets (OneKey / andere EIP-1193-Provider).

Einen injizierten OneKey-Konnektor erstellen

Bevorzugen Sie die dedizierte OneKey-Injektion, um Mehrdeutigkeiten bei mehreren installierten Wallets zu vermeiden.


// onekeyConnector.ts
import { createConfig, http } from 'wagmi'
import { mainnet, polygon, arbitrum, base, optimism } from 'wagmi/chains'
import { injected } from 'wagmi/connectors'
 
import type { EIP1193Provider } from 'viem'
 
function getOneKeyProvider(): EIP1193Provider | undefined {
  if (typeof window === 'undefined') return undefined
  const walletWindow = window as Window & {
    $onekey?: { ethereum?: EIP1193Provider }
  }
  return walletWindow.$onekey?.ethereum
}
 
export const config = createConfig({
  chains: [mainnet, polygon, arbitrum, base, optimism],
  connectors: [
    injected({
      target() {
        return {
          id: 'onekey',
          name: 'OneKey',
          provider: getOneKeyProvider(),
        }
      },
      shimDisconnect: true,
    }),
  ],
  transports: {
    [mainnet.id]: http(),
    [polygon.id]: http(),
    [arbitrum.id]: http(),
    [base.id]: http(),
    [optimism.id]: http(),
  },
})

Hinweise

Bevorzugen Sie window.$onekey.ethereum, damit das Verhalten in Umgebungen mit mehreren Wallets eindeutig bleibt.
Wenn OneKey nicht verfügbar ist, zeigen Sie eine Installations- oder Wiederholungsoption an. Andere von wagmi erkannte Wallets behalten ihre eigenen Namen.
Auslösen: eth_requestAccounts über eine Nutzeraktion; behandeln Sie 4001 (vom Nutzer abgelehnt), ohne automatisch erneut zu versuchen.

App-Einrichtung


// main.tsx
import React from 'react'
import ReactDOM from 'react-dom/client'
import { WagmiProvider } from 'wagmi'
import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
import { config } from './onekeyConnector'
import App from './App'
 
const queryClient = new QueryClient()
 
ReactDOM.createRoot(document.getElementById('root')!).render(
  <React.StrictMode>
    <WagmiProvider config={config}>
      <QueryClientProvider client={queryClient}>
        <App />
      </QueryClientProvider>
    </WagmiProvider>
  </React.StrictMode>,
)

Verbinden und Konto lesen


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

Signieren und senden

Verwenden Sie die aktive wagmi-Verbindung zum Signieren. Führen Sie Wallet-Anfragen über Nutzeraktionen aus und zeigen Sie abgelehnte Anfragen in Ihrer Oberfläche an.


import { useState } from 'react'
import { useWalletClient } from 'wagmi'
 
function SignMessageButton() {
  const { data: walletClient } = useWalletClient()
  const [result, setResult] = useState('')
  const [pending, setPending] = useState(false)
 
  async function sign() {
    if (!walletClient) return
    setPending(true)
    try {
      const signature = await walletClient.signMessage({ message: 'Hello from my dApp' })
      setResult(signature)
    } catch (error) {
      setResult(error instanceof Error ? error.message : 'Signature request failed')
    } finally {
      setPending(false)
    }
  }
 
  return <>
    <button disabled={!walletClient || pending} onClick={sign}>Sign message</button>
    <p role="status">{result}</p>
  </>
}

Verwenden Sie für Transaktionen die wagmi-Methode useSendTransaction mit validiertem Empfänger, Betrag und ausgewählter Chain. Ein zurückgegebener Transaktionshash bedeutet, dass die Transaktion eingereicht wurde; warten Sie auf einen Beleg, um den Ausführungserfolg festzustellen. Siehe Transaktionen senden.

Ereignisse und Netzwerk

Reagieren Sie auf accountsChanged / chainChanged und aktualisieren Sie den Sitzungsstatus entsprechend.
Netzwerk wechseln/hinzufügen: wallet_switchEthereumChain und wallet_addEthereumChain.

Mobilgeräte und Erkennung

Verwenden Sie für mobile Wallets außerhalb eines Browsers mit injiziertem Provider einen WalletConnect-Konnektor oder eine Wallet-UI-Bibliothek. Ein Deeplink öffnet die Wallet; die WalletConnect-Sitzung stellt die Verbindung her.

wagmi kann EIP-6963-Wallets über die Option multiInjectedProviderDiscovery von createConfig erkennen. Für eine direkte Implementierung siehe Provider-Erkennung.

Fehlerbehebung

Wenn der Provider fehlt, prüfen Sie, ob OneKey installiert und für diese Website aktiviert ist, und versuchen Sie es erneut über die Verbinden-Schaltfläche.
Behandeln Sie Nutzerablehnungen (4001), indem Sie einen weiteren vom Nutzer ausgelösten Versuch ermöglichen.
Führen Sie den Zugriff auf Browser-Provider clientseitig aus. Die oben gezeigte typeof window-Prüfung verhindert Fehler beim serverseitigen Rendern.
Eine simulierte Trennung löscht den wagmi-Verbindungsstatus; sie widerruft nicht zwingend die Berechtigungen in der Wallet.