Web3-Onboard
Open-source, framework-agnostic JavaScript library to onboard users to web3 apps. Help your users transact with ease by enabling wallet connection, real-time transaction states, and more. 
npm i @web3-onboard/core @web3-onboard/injected-wallets
onboard connect wallet
Framework Agnostic
Support all your favorite frameworks.
Use web3-onboard with any of your favorite Javascript libraries.
Minimal Dependencies
All wallet dependencies are included in separate packages, so you only include the ones you want to use in your app.
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.
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.
Multiple Chain Support
Allow users to switch between chains/networks with ease.
Enable Multi-Wallet and Multi-Chain functionality with one library
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.
onboard connect wallets
Real-time transaction notifications
Real-time transaction notifications for all connected wallet addresses and all transaction states.
Account Center
Multiple Wallets and Accounts Connection:
Allow your users to connect multiple wallets and multiple accounts within each wallet at the same time to your dapp.
Themeable
Powerfull customization options for all your needs
Style web3-onboard to fit into your existing designs, or pick from our pre-made themes.
:root {
  /* COLORS */
  --account-select-modal-white: white;
  --account-select-modal-black: black;
  --account-select-modal-primary-100: #eff1fc;
  --account-select-modal-primary-200: #d0d4f7;
  --account-select-modal-primary-300: #b1b8f2;
  --account-select-modal-primary-500: #6370e5;
  --account-select-modal-primary-600: #454ea0;
  --account-select-modal-gray-100: #ebebed;
  --account-select-modal-gray-200: #c2c4c9;
  --account-select-modal-gray-300: #999ca5;
  --account-select-modal-gray-500: #33394b;
  --account-select-modal-gray-700: #1a1d26;
  --account-select-modal-danger-500: #ff4f4f;
}
onboard connect wallet themes

Who's using web3-onboard?

Web3-Onboard-users

Getting Started

Installation

Install the core Onboard library and the injected wallets module to support browser extension and mobile wallets:

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

Quick Start

Then initialize in your app:

js 
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)
}