2023 way to connect to a metamask wallet or other web3 browsers

README.md

Connect to wallet using web3js

There is a lot of confusion out there as to how to connect to a web3 browser using web3js, this gist shows how to connect using the most recent (2023) API updates and also providing backwards compatibilty for legacy web3 browsers.

Using JavaScript

Take a look at connect.js below

Using TypeScript

Take a look at connect.ts and global.d.ts for window.ethereum and window.web3 type definitions

Take a look at this demo to see how it is used

connect.js

// Install 'web3'
// npm install web3
import Web3 from 'web3'

let accounts = undefined;

if (window.ethereum) {
  // Modern DApp browsers
  try {
    // Requests account access. If already connected, returns the connected accounts.
    accounts = await window.ethereum.request({ method: 'eth_requestAccounts' })
  } catch (error) {
    // User denied account access...
    console.log('User denied access:', error)
  }
} else if (window.web3) {
  // Legacy DApp browsers
  window.web3 = new Web3(window.web3.currentProvider)
  accounts = await window.web3.eth.getAccounts()
} else {
  // Non-DApp browsers
  console.log('Buuuzz! Non-ethereum browser detected. Install metamask on Chrome or Firefox, or use the Opera Crypto Browser, or Brave or something else')
}

// You can now retrieve data from the connected wallet
if (accounts) {
  console.log('Accounts:', accounts)

  window.web3 = new Web3(window.ethereum)

  // Example: Get the ETH balance of the first account
  const balance = await window.web3.eth.getBalance(accounts[0])
  const balanceInEther = window.web3.utils.fromWei(balance, 'ether')
  console.log('ETH Balance:', balanceInEther)
}

connect.ts

import Web3 from 'web3'

let accounts: string[] | undefined = undefined;

if (window.ethereum) {
  // Modern DApp browsers
  try {
    // Requests account access. If already connected, returns the connected accounts.
    accounts = await window.ethereum.request({ method: 'eth_requestAccounts' }) as string[]
  } catch (error) {
    // User denied account access...
    console.log('User denied access:', error)
  }
} else if (window.web3) {
  // Legacy DApp browsers
  window.web3 = new Web3(window.web3.currentProvider)
  accounts = await window.web3.eth.getAccounts()
} else {
  // Non-DApp browsers
  console.log('Buuuzz! Non-ethereum browser detected. Install metamask on Chrome or Firefox, or use the Opera Crypto Browser, or Brave or something else')
}

// You can now retrieve data from the connected wallet
if (accounts) {
  console.log('Accounts:', accounts)

  window.web3 = new Web3(window.ethereum)

  // Example: Get the ETH balance of the first account
  const balance = await window.web3.eth.getBalance(accounts[0])
  const balanceInEther = window.web3.utils.fromWei(balance, 'ether')
  console.log('ETH Balance:', balanceInEther)
}

global.d.ts

// Place this file at the root of your project or your types dir
// Install '@metamask/providers'
// npm install @metamask/providers

import Web3 from 'web3'
import { MetaMaskInpageProvider } from '@metamask/providers'

declare global {
	interface Window {
		ethereum?: MetaMaskInpageProvider;
		web3?: Web3;
	}
}