Web3-Onboard

Search…
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
​@web3-onboard/core Official NPM Documentation​
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
​Core​
Injected Wallets
​Injected​
SDK Wallets
​Coinbase​
​WalletConnect​
​Gnosis​
​Magic​
​Fortmatic​
​MEW​
​Portis​
​Web3Auth​
Hardware Wallets
​Ledger​
​Trezor​
​Keystone​
​KeepKey​
​D'cent​
Frameworks
​React​
​Vue​
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
​View demo app in the browser​
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:
​eth-scaffold​
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:
Mempool SDK
Core
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