Overview
Web3 Onboard
The best way to connect a wallet 🚀
Web3 Onboard is the quickest and easiest way to add multi-wallet and multi-chain support to your project. With built-in modules for more than 80 unique hardware and software wallets, Web3 Onboard saves you time and headaches.
Features
Minimal Dependencies: All wallet dependencies are included in separate packages, so you only include the ones you want to use in your app.
Multi Wallet and Multi Chain Support: Allow your users to connect multiple wallets and multiple accounts within each wallet at the same time to your app. Let users switch between chains/networks with ease. ALL EVM networks supported.
Account Center: An interface to manage wallet connections and networks, with a minimal version for mobile.
Themable: Powerful customization options for all your needs. Style Web3 Onboard to fit into your existing designs, or pick from our pre-made themes.
Unified Provider Interface: All wallet modules expose a provider that is patched to be compliant with the EIP-1193, EIP-1102, EIP-3085, EIP-3326, and EIP-6963 specifications. Whether your user is using Ledger or Metamask, the provider will operate identically.
Dynamic Imports: Supporting multiple wallets in your app requires a lot of dependencies. Web3 Onboard dynamically imports a wallet and its dependencies only when the user selects it, so that minimal bandwidth is used.
Framework Agnostic: Avoid framework lock in -- Web3 Onboard works with any framework and includes helper packages for vue & react.
Notify: Real-time transaction notifications for all transaction states for the connected wallet address(es). In-notification speedups & cancels for hardware wallet connections.
Natively Supported EVM Chains
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 information see initialization options.
- Ethereum
- Arbitrum One
- Arbitrum Nova
- Base
- Polygon
- OP Mainnet
- Avalanche
- BNB Chain
- Celo
- Degen
- SNAX
- Fantom
- Gnosis Chain
- Harmony One
- Moonriver
- Sepolia
- Base Goerli
- Degen
- All other EVM networks
Optional - Use an API key to fetch real-time transaction data, balances & gas
Using a Blocknative API key with Web3 Onboard 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.
This step is not required to use Web3 Onboard. 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 web3-onboard library, the injected wallets module, and optionally ethers.js to support browser extension and mobile wallets:
- Npm
- Yarn
You can find a link to Web3 Onboard's official NPM Documentation here: @web3-onboard/core Official NPM Documentation
Then initialize in your app:
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 can be accessed through the subpages of Web3 Onboard docs on the left.
We recommend you add the Core Repo and consider adding the Injected Wallets module to get connected with wallets like Metamask, Trust, Coinbase Wallet, and more right away.
SDK Wallets
- Arcana Auth
- Blocto
- Capsule
- Coinbase
- Fortmatic
- Frame
- Safe
- Magic
- MetaMask
- MEW
- OKX
- Portis
- Web3Auth
- WalletConnect
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 git@github.com:blocknative/web3-onboard.git
- Change it to the onboard directory:
cd web3-onboard
- Checkout the main web3-onboard branch:
git checkout main
- 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
React 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/react-demo
More Examples
You can find starter examples from the web3 community here using Web3 Onboard: