En esta página

Web3-Onboard

Biblioteca de conexión de varias carteras de Blocknative. Independiente del framework, con compatibilidad con React, Vue y JavaScript sin framework.

OneKey se detecta automáticamente mediante el módulo de carteras inyectadas. Verifica la detección con las versiones instaladas de OneKey y de la biblioteca.

Instalación


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

Configuración básica


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

Integración con React

Instala el módulo de React con 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>
  )
}

Módulos de carteras adicionales

Para admitir WalletConnect (carteras móviles):


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],
  // ...
})

Obtener el proveedor

Este ejemplo usa ethers 6 (npm install ethers@^6). Después de conectar, usa el proveedor de la cartera seleccionada para las transacciones. Sustituye el destinatario de ejemplo antes de enviar:


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

Personalización

Tema


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

Centro de cuentas


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