このページの内容

Web3-Onboard

Blocknative のマルチウォレット接続ライブラリ。特定のフレームワークに依存せず、React、Vue、バニラ JavaScript に対応します。

OneKey は injected wallets モジュールによって自動検出されます。インストール済みの 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 統合

React モジュールを次でインストールします: 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>
  )
}

追加のウォレットモジュール

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

プロバイダーを取得

この例では ethers 6 を使用します (npm install ethers@^6)。接続後は選択したウォレットのプロバイダーでトランザクションを処理します。送信前に受取人のプレースホルダーを置き換えてください:


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