A React Web3 wallet hook for Onboard.js library

by React

use-onboard

React Web3 wallet hook for the Onboard.js library.

View Demo View Github

Features

  • Fully configurable as much as Onboard itself
  • selectWallet and disconnectWallet functions to manage wallet state
  • Optional initialData to pass for initial address and balance values while wallet is loading

Install

pnpm i use-onboard

Example

import React from 'react'
import { useOnboard } from 'use-onboard'

const App = ({ initialData }) => {
  // in case you are authorized before this won't ask to login from the wallet
  const { selectWallet, address, isWalletSelected, disconnectWallet, balance } = useOnboard({
    options: {
      dappId: process.env.DAPP_ID, // optional API key
      networkId: 1 // Ethereum network ID
    },
    initialData // optional initial to data to pass while wallet is loading
  })

  return (
    <div>
      {
        <button
          onClick={async () => {
            if (isWalletSelected) disconnectWallet()
            else await selectWallet()
          }}>
          {isWalletSelected ? 'Disconnect' : 'Connect'}
        </button>
      }
      <p>Address: {address}</p>
      <p>Balance: {balance} ETH</p>
    </div>
  )
}