Auf dieser Seite

Web3-Onboard

Die Bibliothek von Blocknative zum Verbinden mehrerer Wallets. Frameworkunabhängig mit Unterstützung für React, Vue und reines JavaScript.

OneKey wird über das Modul für injizierte Wallets automatisch erkannt. Prüfen Sie die Erkennung mit den installierten OneKey- und Bibliotheksversionen.

Installation


npm install @web3-onboard/core @web3-onboard/injected-wallets

Grundlegende Einrichtung


import Onboard from '@web3-onboard/core'
import injectedModule from '@web3-onboard/injected-wallets'
 
const injected = injectedModule()
 
const onboard = Onboard({
  wallets: [injected],
  chains: [
    {
      id: '0x1',
      token: 'ETH',
      label: 'Ethereum Mainnet',
      rpcUrl: 'https://mainnet.infura.io/v3/YOUR_INFURA_KEY',
    },
    {
      id: '0x89',
      token: 'POL',
      label: 'Polygon',
      rpcUrl: 'https://polygon-rpc.com',
    },
  ],
  appMetadata: {
    name: 'My dApp',
    icon: '<svg>...</svg>',
    description: 'My dApp description',
  },
})
 
// Connect wallet
async function connect() {
  const wallets = await onboard.connectWallet()
  console.log('Connected wallets:', wallets)
}

React-Integration

Installieren Sie das React-Modul mit npm install @web3-onboard/react.

App.tsx


import { init, useConnectWallet, useWallets } from '@web3-onboard/react'
import injectedModule from '@web3-onboard/injected-wallets'
 
const injected = injectedModule()
 
init({
  wallets: [injected],
  chains: [
    {
      id: '0x1',
      token: 'ETH',
      label: 'Ethereum',
      rpcUrl: 'https://mainnet.infura.io/v3/YOUR_KEY',
    },
  ],
})
 
function App() {
  const [{ wallet, connecting }, connect, disconnect] = useConnectWallet()
  // useWallets() is available when managing multiple connections.
 
  if (wallet) {
    return (
      <div>
        <p>Connected: {wallet.accounts[0].address}</p>
        <button onClick={() => disconnect({ label: wallet.label })}>
          Disconnect
        </button>
      </div>
    )
  }
 
  return (
    <button disabled={connecting} onClick={() => connect()}>
      {connecting ? 'Connecting...' : 'Connect Wallet'}
    </button>
  )
}

Zusätzliche Wallet-Module

Für WalletConnect-Unterstützung (mobile Wallets):


npm install @web3-onboard/walletconnect


import walletConnectModule from '@web3-onboard/walletconnect'
 
const walletConnect = walletConnectModule({
  projectId: 'YOUR_WALLETCONNECT_PROJECT_ID',
})
 
const onboard = Onboard({
  wallets: [injected, walletConnect],
  // ...
})

Provider abrufen

Dieses Beispiel verwendet ethers 6 (npm install ethers@^6). Verwenden Sie nach dem Verbinden den ausgewählten Wallet-Provider für Transaktionen. Ersetzen Sie den Empfängerplatzhalter vor dem Senden:


import { ethers } from 'ethers'
 
const wallets = await onboard.connectWallet()
 
if (wallets[0]) {
  const provider = new ethers.BrowserProvider(wallets[0].provider)
  const signer = await provider.getSigner()
 
  // Send transaction
  const tx = await signer.sendTransaction({
    to: '0x...',
    value: ethers.parseEther('0.1'),
  })
}

Anpassung

Design


const onboard = Onboard({
  // ...
  // Use a custom theme object, or replace it with 'dark', 'light', or 'system'.
  theme: {
    '--w3o-background-color': '#1a1a1a',
    '--w3o-foreground-color': '#ffffff',
    '--w3o-text-color': '#ffffff',
    '--w3o-border-color': '#333333',
    '--w3o-action-color': '#00B812',
  },
})

Kontozentrale


const onboard = Onboard({
  // ...
  accountCenter: {
    desktop: {
      enabled: true,
      position: 'topRight',
    },
    mobile: {
      enabled: true,
      position: 'topRight',
    },
  },
})