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.

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

Quickstart

Install the core web3-onboard library, the injected wallets module, and optionally ethers.js to support browser extension and mobile wallets:

Npm
Yarn

terminal

        yarn add @web3-onboard/core @web3-onboard/injected-wallets ethers

terminal

        npm i @web3-onboard/core @web3-onboard/injected-wallets ethers

You can find a link to Web3 Onboard's official NPM Documentation here: @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({
  // This javascript object is unordered meaning props do not require a certain order
  wallets: [injected],
  chains: [
    {
      id: '0x1',
      token: 'ETH',
      label: 'Ethereum Mainnet',
      rpcUrl: MAINNET_RPC_URL
    },
    {
      id: 42161,
      token: 'ARB-ETH',
      label: 'Arbitrum One',
      rpcUrl: 'https://rpc.ankr.com/arbitrum'
    },
    {
      id: '0xa4ba',
      token: 'ARB',
      label: 'Arbitrum Nova',
      rpcUrl: 'https://nova.arbitrum.io/rpc'
    },
    {
      id: '0x2105',
      token: 'ETH',
      label: 'Base',
      rpcUrl: 'https://mainnet.base.org'
    },
    {
      id: '0xa4ec',
      token: 'ETH',
      label: 'Celo',
      rpcUrl: 'https://1rpc.io/celo'
    },
    {
      id: 666666666,
      token: 'DEGEN',
      label: 'Degen',
      rpcUrl: 'https://rpc.degen.tips'
    },
    {
      id: 2192,
      token: 'SNAXETH',
      label: 'SNAX Chain',
      rpcUrl: 'https://mainnet.snaxchain.io'
    }
  ]
})

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

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:

eth-scaffold

Web3 Onboard

# Features

# Natively Supported EVM Chains

# Quickstart

# Wallet Modules

# Test out the demo app

# React Demo

# More Examples