Web3-Onboard
Blocknative’s open-source, framework agnostic JavaScript library to onboard users to web3 apps. Help your users transact with ease by enabling wallet connection and real-time transaction states.
web3-onboard and its documentation now live entirely on github; you can find the open source site and the docs experience here
Default Connect Wallet screen (standard theme)

Features

  • Minimal Dependencies: All wallet dependencies are included in separate packages, so you only include the ones you want to use in your app.
  • Multiple Wallets and Accounts Connection: Allow your users to connect multiple wallets and multiple accounts within each wallet at the same time to your app.
  • Multiple Chain Support: Allow users to switch between chains/networks with ease.
  • Account Center: An interface to manage wallet connections and networks, with a minimal version for mobile
  • Notify: Real-time transaction notifications for the connected wallet addresses for all transaction states
  • Wallet Provider Standardization: All wallet modules expose a provider that is patched to be compliant with the EIP-1193, EIP-1102, EIP-3085 and EIP-3326 specifications.
  • Dynamic Imports: Supporting multiple wallets in your app requires a lot of dependencies. Onboard dynamically imports a wallet and it's dependencies only when the user selects it, so that minimal bandwidth is used.
You can find the web3-onboard Github repo here

Supported Networks

web3-onboard supports all EVM networks. Supporting a new network is simply a matter of adding its details in the Chains section upon initialization. For more info, see Initialization Options.
  • Arbitrum
  • Avalanche
  • BNB Chain
  • Celo
  • Ethereum
  • Fantom
  • Gnosis Chain
  • Harmony One
  • Moonriver
  • Optimism
  • Polygon
  • Any other EVM network

[Optional] Create a Blocknative Account

While having a Blocknative account is not necessary to use web3-onboard, using a Blocknative API key even on the free plan will allow you to gain the benefits of Blocknative balance & transaction services. Blocknative has a free forever plan you can always use.
You can skip to the Quickstart step below if you want to use web3-onboard without API services or if you already have a Blocknative account & API key.
Setup your Account
Go to the Account Dashboard at https://explorer.blocknative.com/account and setup an account with an email address. You will receive an email to confirm your account.

Create your API Key

On the Account Dashboard at https://explorer.blocknative.com/account, create an API key with your choice of name or use/rename the Default Key. Consider using different API keys for development, staging, and production releases.

Quickstart

Install the core Onboard library, the injected wallets module and optionally ethers.js to support browser extension and mobile wallets:
NPM npm i @web3-onboard/core @web3-onboard/injected-wallets ethers
Yarn
yarn add @web3-onboard/core @web3-onboard/injected-wallets ethers
Then initialize in your app:
import Onboard from '@web3-onboard/core'
import injectedModule from '@web3-onboard/injected-wallets'
import { ethers } from 'ethers'
const MAINNET_RPC_URL = 'https://mainnet.infura.io/v3/<INFURA_KEY>'
const injected = injectedModule()
const onboard = Onboard({
wallets: [injected],
chains: [
{
id: '0x1',
token: 'ETH',
label: 'Ethereum Mainnet',
rpcUrl: MAINNET_RPC_URL
}
]
})
const wallets = await onboard.connectWallet()
console.log(wallets)
if (wallets[0]) {
// create an ethers provider with the last connected wallet provider
const ethersProvider = new ethers.providers.Web3Provider(
wallets[0].provider,
'any'
)
const signer = ethersProvider.getSigner()
// send a transaction with the ethers provider
const txn = await signer.sendTransaction({
to: '0x',
value: 100000000000000
})
const receipt = await txn.wait()
console.log(receipt)
}

and you are live!

Wallet Modules

Add other wallet modules such as Wallet Connect or Ledger to increase the support and functionality of your web3-onboard implementation. All modules are listed below and can be accessed through the subpages of web3-onboard docs on the left.
Core Repo
Injected Wallets
SDK Wallets
Hardware Wallets
Frameworks

Test out the demo app

Test out the current functionality of web3-onboard in a small browser demo:
  • Clone the repo: git clone [email protected]:blocknative/web3-onboard.git
  • Change it to the onboard directory: cd web3-onboard
  • Checkout the main web3-onboard branch: git checkout v2-web3-onboard
  • Install the dependencies: yarn (if running a M1 mac - yarn install-m1-mac)
  • Run all packages in dev mode: yarn dev

Live Demo

Checkout our live demo using React at https://reactdemo.blocknative.com/
The demo is open source so you can see a sample implementation of web3-onboard: https://github.com/blocknative/onboard-notify-react

Starter kits & Sample Repos

Below repos are examples of web3-onboard you can use to easily integrate or look at as examples:

Screencasts

See the below Overview Screencast:
For a web3-onboard code review and deeper dive, see this screencast:
To understand your extensive customization options with web3-onboard, see this screencast:
Last modified 16d ago
Copy link
On this page
Features
Supported Networks
[Optional] Create a Blocknative Account
Quickstart
and you are live!
Wallet Modules
Test out the demo app
Starter kits & Sample Repos
Screencasts