1. Overview
  2. Introduction

Overview

Web3-Onboard

The best way to connect a wallet 🚀

Web3-Onboard connect wallet modal

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 35 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.

  • Multiple Wallets and Accounts Connection, Multichain 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.

  • Unified Provider Interface: All wallet modules expose a provider that is patched to be compliant with the EIP-1193, EIP-1102, EIP-3085 and EIP-3326 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. 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.

  • Account Center: An interface to manage wallet connections and networks, with a minimal version for mobile

  • Notify: Real-time transaction notifications for all transaction states for the connected wallet address(es). In-notification speedups & cancels for hardware wallet connections.

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 information see initialization options.

  • Ethereum
  • Polygon
  • Base Goerli
  • Goerli
  • Sepolia
  • Arbitrum
  • Optimism
  • Avalanche
  • BNB Chain
  • Celo
  • Fantom
  • Gnosis Chain
  • Harmony One
  • Moonriver
  • All other EVM network

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 Onboard library, the injected wallets module and optionally ethers.js to support browser extension and mobile wallets:

You can find a link to web3-onboard's official NPM Documentation here: @web3-onboard/core Official NPM Documentation

Then initialize in your app:

ts 
        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
  // if using ethers v6 this is:
  // ethersProvider = new ethers.BrowserProvider(wallet.provider, 'any')
  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.

We recommend you add the Core Repo and consider adding the Injected Wallets module to get connected with wallets like Metamask, Trust, Coinbase Wallet & more right away.

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 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:

Next Contribution Guide ->