Blocknative Documentation
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.
.png?alt=media&token=95006715-6419-41df-ba0c-72b0764832aa)
Sample Compound-branded Connect Wallet screen
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.
- 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.
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 and the injected wallets module to support browser extension and mobile wallets:
npm i @web3-onboard/core @web3-onboard/injected-walletsThen initialize in your app:
1
import Onboard from '@web3-onboard/core'
2
import injectedModule from '@web3-onboard/injected-wallets'
3
4
const MAINNET_RPC_URL = 'https://mainnet.infura.io/v3/<INFURA_KEY>'
5
6
const injected = injectedModule()
7
8
const onboard = Onboard({
9
wallets: [injected],
10
chains: [
11
{
12
id: '0x1', // chain ID must be in hexadecimel
13
token: 'ETH', // main chain token
14
label: 'Ethereum Mainnet',
15
rpcUrl: `https://mainnet.infura.io/v3/${INFURA_ID}` // rpcURL required for wallet balances
16
},
17
{
18
id: '0x3',
19
token: 'tROP',
20
label: 'Ethereum Ropsten Testnet',
21
rpcUrl: `https://ropsten.infura.io/v3/${INFURA_ID}`
22
},
23
{
24
id: '0x4',
25
token: 'rETH',
26
label: 'Ethereum Rinkeby Testnet',
27
rpcUrl: `https://rinkeby.infura.io/v3/${INFURA_ID}`
28
},
29
{
30
id: '0x38',
31
token: 'BNB',
32
label: 'Binance Smart Chain',
33
rpcUrl: 'https://bsc-dataseed.binance.org/'
34
},
35
{
36
id: '0x89',
37
token: 'MATIC',
38
label: 'Matic Mainnet',
39
rpcUrl: 'https://matic-mainnet.chainstacklabs.com'
40
},
41
{
42
id: '0xfa',
43
token: 'FTM',
44
label: 'Fantom Mainnet',
45
rpcUrl: 'https://rpc.ftm.tools/'
46
}
47
],
48
appMetadata: {
49
name: 'My App',
50
icon: '<SVG_ICON_STRING>',
51
logo: '<SVG_LOGO_STRING>',
52
description: 'My app using Onboard',
53
recommendedInjectedWallets: [
54
{ name: 'Coinbase', url: 'https://wallet.coinbase.com/' },
55
{ name: 'MetaMask', url: 'https://metamask.io' }
56
]
57
}
58
})
59
60
const wallets = await onboard.connectWallet()
61
62
console.log(wallets)
Copied!
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/onboard.git - Change it to the onboard directory:
cd onboard - Checkout the main web3-onboard branch:
git checkout 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
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 14d ago