Download

arrow_down

Swap

Card

Developer sercices

arrow_down

More

arrow_down
activityactivityactivityactivity
  • themelight

  • languageIcon

  • menu
Skip to Content
EnDocs
Connect Wallet
AdaptorWeb3-Onboard

Web3-Onboard

A wallet connection library developed by Blocknative, supporting multiple wallets and frameworks.

Connect to Wallet

@web3-onboard/core

Connect to a wallet using the native Web3-Onboard API. This approach is suitable for vanilla JS or non-React environments.

Params

// No params required for connectWallet()

Returns

// Returns an array of connected wallet objects
Array<{
  label: string;
  accounts: Array<{ address: string; ens?: { name?: string } }>;
  chains: Array<{ id: string; namespace: string; rpcUrl: string }>;
  // ...other wallet info
}>

Example

import Onboard from '@web3-onboard/core'
import BitGetWallet from '@web3-onboard/bitget'
import InjectedWallet from '@web3-onboard/injected-wallets'
 
const onboard = Onboard({
  wallets: [
    new BitGetWallet(),
    new InjectedWallet()
  ],
  chains: [
    {
      id: 1,
      token: 'ETH',
      label: 'Ethereum Mainnet',
      rpcUrl: 'https://api.pimlico.io/v2/1/rpc?apikey=YOUR_KEY',
    },
  ]
})
 
async function connectWallet() {
  const wallets = await onboard.connectWallet()
  console.log(wallets)
}
 
// In your UI:
// <button onclick={connectWallet}>Connect Bitget wallet</button>
Wallet Connect

@web3-onboard/react

Web3-Onboard also provides a React context and hooks for easier integration in React apps.

Params

// No params required for useConnectWallet()

Returns

// useConnectWallet returns [state, connect, disconnect]
[
  {
    wallet: WalletState | null,
    connecting: boolean,
    // ...
  },
  connect: () => Promise<void>,
  disconnect: (wallet: WalletState) => Promise<void>
]

Example

import { useConnectWallet, Web3OnboardProvider, init } from '@web3-onboard/react'
import BitGetWallet from '@web3-onboard/bitget'
import InjectedWallet from '@web3-onboard/injected-wallets'
 
const reactOnBoard = init({
  wallets: [
    new BitGetWallet(),
    new InjectedWallet()
  ],
  chains: [
    {
      id: 1,
      token: 'ETH',
      label: 'Ethereum Mainnet',
      rpcUrl: 'https://api.pimlico.io/v2/1/rpc?apikey=YOUR_KEY',
    },
  ]
})
 
function ConnectDemo() {
  const [{ wallet, connecting }, connect, disconnect] = useConnectWallet()
  return (
    <button disabled={connecting} onClick={() => (wallet ? disconnect(wallet) : connect())}>
      {connecting ? 'connecting' : wallet ? 'disconnect' : 'connect'}
    </button>
  )
}
 
function App() {
  return (
    <Web3OnboardProvider web3Onboard={reactOnBoard}>
      <ConnectDemo />
    </Web3OnboardProvider>
  )
}
Wallet Connect

Manage Network

Switch Chain

Complete Example

import { useConnectWallet } from '@web3-onboard/react'
import { Button, Input } from 'antd'
import React from 'react'
 
function SwitchChainDemo() {
  const [{ wallet }] = useConnectWallet()
  const provider = wallet?.provider
  const [chainId, setChainId] = React.useState('0x1')
  const [result, setResult] = React.useState('')
  const [err, setErr] = React.useState('')
 
  async function handleSwitchChain() {
    setErr(''); setResult('')
    if (!provider) return setErr('No provider')
    try {
      await provider.request({
        method: 'wallet_switchEthereumChain',
        params: [{ chainId }],
      })
      setResult('Switched to chain: ' + chainId)
    } catch (e) {
      setErr(e?.message || String(e))
    }
  }
 
  return (
    <div>
      <Input style={{ width: 200, marginRight: 8 }} value={chainId} onChange={e => setChainId(e.target.value)} placeholder="chainId (hex, e.g. 0x1)" />
      <Button disabled={!provider} onClick={handleSwitchChain}>Switch Chain</Button>
      {result && <div style={{ color: 'green' }}>{result}</div>}
      {err && <div style={{ color: 'red' }}>{err}</div>}
    </div>
  )
}

Parameters

interface SwitchChainParams {
  chainId: string // hex string, e.g. '0x1' for Ethereum Mainnet
}

Returns

// Returns null if successful, throws error if failed
null

Usage

await provider.request({
  method: 'wallet_switchEthereumChain',
  params: [{ chainId: '0x1' }],
})

Try It

Switch Chain
Ethereum Mainnet

Add Chain

Example

import { useConnectWallet } from '@web3-onboard/react'
import { Button, Input } from 'antd'
import React from 'react'
 
function AddChainDemo() {
  const [{ wallet }] = useConnectWallet()
  const provider = wallet?.provider
  const [addChainParams, setAddChainParams] = React.useState('')
  const [result, setResult] = React.useState('')
  const [err, setErr] = React.useState('')
 
  async function handleAddChain() {
    setErr(''); setResult('')
    if (!provider) return setErr('No provider')
    let params
    try {
      params = JSON.parse(addChainParams)
    } catch {
      setErr('Invalid JSON for chain params')
      return
    }
    try {
      await provider.request({
        method: 'wallet_addEthereumChain',
        params: [params],
      })
      setResult('Chain added: ' + params.chainId)
    } catch (e) {
      setErr(e?.message || String(e))
    }
  }
 
  return (
    <div>
      <Input style={{ width: 400, marginRight: 8 }} value={addChainParams} onChange={e => setAddChainParams(e.target.value)} placeholder='Add Chain Params (JSON)' />
      <Button disabled={!provider} onClick={handleAddChain}>Add Chain</Button>
      {result && <div style={{ color: 'green' }}>{result}</div>}
      {err && <div style={{ color: 'red' }}>{err}</div>}
    </div>
  )
}

Parameters

interface AddChainParams {
  chainId: string
  chainName: string
  rpcUrls: string[]
  nativeCurrency: { name: string; symbol: string; decimals: number }
  blockExplorerUrls?: string[]
  iconUrls?: string[]
}

Returns

// Returns null if successful, throws error if failed
null

Usage

await provider.request({
  method: 'wallet_addEthereumChain',
  params: [chainParams],
})

Try It

Add Chain
Ethereum Mainnet

Get Chain ID

Complete Example

import { useConnectWallet } from '@web3-onboard/react'
import { Button } from 'antd'
import React from 'react'
 
function GetChainIdDemo() {
  const [{ wallet }] = useConnectWallet()
  const provider = wallet?.provider
  const [result, setResult] = React.useState('')
  const [err, setErr] = React.useState('')
 
  async function handleGetChainId() {
    setErr(''); setResult('')
    if (!provider) return setErr('No provider')
    try {
      const chainId = await provider.request({
        method: 'eth_chainId',
      })
      setResult('Current Chain ID: ' + chainId)
    } catch (e) {
      setErr(e?.message || String(e))
    }
  }
 
  return (
    <div>
      <Button disabled={!provider} onClick={handleGetChainId}>Get Chain ID</Button>
      {result && <div style={{ color: 'green', wordBreak: 'break-all' }}>{result}</div>}
      {err && <div style={{ color: 'red' }}>{err}</div>}
    </div>
  )
}

Parameters

// No params required for eth_chainId
type GetChainIdParams = void

Returns

// Returns the current chain ID as a hex string
string // e.g. '0x1'

Usage

await provider.request({
  method: 'eth_chainId',
})

Try It

Get Chain ID

Sign Message

Sign Typed Data

Sign EIP-712 typed data using eth_signTypedData_v4.

Parameters

interface SignTypedDataParams {
  typedData: object // EIP-712 typed data object (must be valid JSON)
  address: string   // address to sign with
}

Returns

// Returns the signature string
type SignTypedDataResult = string // e.g. '0x...'

Usage

await provider.request({
  method: 'eth_signTypedData_v4',
  params: [address, JSON.stringify(typedData)],
})

Input Example

{
  "types": {
    "EIP712Domain": [{"name": "name", "type": "string"}],
    "Person": [{"name": "name", "type": "string"}]
  },
  "primaryType": "Person",
  "domain": {"name": "Bitget"},
  "message": {"name": "Alice"}
}

Try It

Sign Typed Data

Sign Personal Message

Sign a message using personal_sign.

Parameters

interface SignPersonalMessageParams {
  message: string
  address: string
}

Returns

// Returns the signature string
type SignPersonalMessageResult = string // e.g. '0x...'

Usage

await provider.request({
  method: 'personal_sign',
  params: [message, address],
})

Try It

Sign Message

Transaction

Get Balance

Complete Example

import { useConnectWallet } from '@web3-onboard/react'
import { Button } from 'antd'
import React from 'react'
 
function GetBalanceDemo() {
  const [{ wallet }] = useConnectWallet()
  const provider = wallet?.provider
  const address = wallet?.accounts?.[0]?.address
  const [result, setResult] = React.useState('')
  const [err, setErr] = React.useState('')
 
  async function handleGetBalance() {
    setErr(''); setResult('')
    if (!provider || !address) return setErr('No provider or address')
    try {
      const balance = await provider.request({
        method: 'eth_getBalance',
        params: [address, 'latest'],
      })
      setResult(balance)
    } catch (e) {
      setErr(e?.message || String(e))
    }
  }
 
  return (
    <div>
      <Button disabled={!provider || !address} onClick={handleGetBalance}>Get Balance</Button>
      {result && <div style={{ color: 'green', wordBreak: 'break-all' }}>{result}</div>}
      {err && <div style={{ color: 'red' }}>{err}</div>}
    </div>
  )
}

Parameters

interface GetBalanceParams {
  address: string
  blockTag?: string // e.g. 'latest'
}

Returns

// Returns the balance as a hex string
string // e.g. '0x...' (wei)

Usage

await provider.request({
  method: 'eth_getBalance',
  params: [address, 'latest'],
})

Try It

Get Balance

Sign Transaction

Example

import { useConnectWallet } from '@web3-onboard/react'
import { Button, Input } from 'antd'
import React from 'react'
 
function SignTransactionDemo() {
  const [{ wallet }] = useConnectWallet()
  const provider = wallet?.provider
  const address = wallet?.accounts?.[0]?.address
  const [tx, setTx] = React.useState('{"to":"0x...","value":"0x0"}')
  const [result, setResult] = React.useState('')
  const [err, setErr] = React.useState('')
 
  async function handleSignTx() {
    setErr(''); setResult('')
    if (!provider || !address) return setErr('No provider or address')
    let txObj
    try {
      txObj = JSON.parse(tx)
    } catch {
      setErr('Invalid JSON for tx')
      return
    }
    try {
      const sig = await provider.request({
        method: 'eth_signTransaction',
        params: [txObj],
      })
      setResult(sig)
    } catch (e) {
      setErr(e?.message || String(e))
    }
  }
 
  return (
    <div>
      <Input style={{ width: 400, marginRight: 8 }} value={tx} onChange={e => setTx(e.target.value)} placeholder='Tx JSON (to, value, ...)' />
      <Button disabled={!provider || !address} onClick={handleSignTx}>Sign Transaction</Button>
      {result && <div style={{ color: 'green', wordBreak: 'break-all' }}>{result}</div>}
      {err && <div style={{ color: 'red' }}>{err}</div>}
    </div>
  )
}

Parameters

interface SignTransactionParams {
  to: string
  value: string // hex string
  // ...other tx fields (gas, gasPrice, data, nonce, etc.)
}

Returns

// Returns the signed transaction as a hex string
string // e.g. '0x...'

Usage

await provider.request({
  method: 'eth_signTransaction',
  params: [txObj],
})

Send Transaction

Example

import { useConnectWallet } from '@web3-onboard/react'
import { Button, Input } from 'antd'
import React from 'react'
 
function SendTransactionDemo() {
  const [{ wallet }] = useConnectWallet()
  const provider = wallet?.provider
  const address = wallet?.accounts?.[0]?.address
  const [tx, setTx] = React.useState('{"to":"0x...","value":"0x0"}')
  const [result, setResult] = React.useState('')
  const [err, setErr] = React.useState('')
 
  async function handleSendTx() {
    setErr(''); setResult('')
    if (!provider || !address) return setErr('No provider or address')
    let txObj
    try {
      txObj = JSON.parse(tx)
    } catch {
      setErr('Invalid JSON for tx')
      return
    }
    try {
      const txHash = await provider.request({
        method: 'eth_sendTransaction',
        params: [txObj],
      })
      setResult(txHash)
    } catch (e) {
      setErr(e?.message || String(e))
    }
  }
 
  return (
    <div>
      <Input style={{ width: 400, marginRight: 8 }} value={tx} onChange={e => setTx(e.target.value)} placeholder='Tx JSON (to, value, ...)' />
      <Button disabled={!provider || !address} onClick={handleSendTx}>Send Transaction</Button>
      {result && <div style={{ color: 'green', wordBreak: 'break-all' }}>{result}</div>}
      {err && <div style={{ color: 'red' }}>{err}</div>}
    </div>
  )
}

Parameters

interface SendTransactionParams {
  to: string
  value: string // hex string
  // ...other tx fields (gas, gasPrice, data, nonce, etc.)
}

Returns

// Returns the transaction hash as a hex string
string // e.g. '0x...'

Usage

await provider.request({
  method: 'eth_sendTransaction',
  params: [txObj],
})

API Reference

Last updated on
WalletConnectWeb3-React