本页目录

Web3-Onboard

Blocknative 的多钱包连接库，可用于 React、Vue 和原生 JavaScript。

注入式钱包模块可自动检测 OneKey。请使用实际安装的 OneKey 和库版本验证检测结果。

安装


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

基础设置


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 集成

运行 npm install @web3-onboard/react，安装 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>
  )
}

其他钱包模块

支持 WalletConnect 移动端钱包时：


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

此示例使用 ethers 6（npm install ethers@^6）。连接后，通过所选钱包的 provider 发送交易。发送前替换收款地址占位值：


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

自定义界面

主题


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

账户中心


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