🛹 React Web3 wallet hook for the Onboard.js library.

Last update: Mar 13, 2022

useOnboard()




NPM NPM Bundle size

A React Web3 wallet hook for Onboard.js library.


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

CodeSandbox

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

GitHub

https://github.com/talentlessguy/use-onboard
You might also like...

The reactive library for the spreadsheet driven development

Sunrise Spreadsheet-like dataflow programming in TypeScript Example import { cell, formula, swap, deref } from '@snapview/sunrise' const inc = (a) =

Mar 7, 2022

A Web library to simply integrate Agora Video Calling or Live Video Streaming to your website with just a few lines of code

Agora React Web UIKit Instantly integrate Agora video calling or streaming into your web application using a React based UIKit for the Agora Web SDK.

Mar 30, 2022

A desktop app for inspecting your React JS and React Native projects. macOS, Linux, and Windows.

A desktop app for inspecting your React JS and React Native projects. macOS, Linux, and Windows.

Join our Community Slack Quick Installation Guide What is Reactotron? Reactotron is a macOS, Windows, and Linux app for inspecting your React JS and R

May 18, 2022

A desktop app for inspecting your React JS and React Native projects. macOS, Linux, and Windows.

A desktop app for inspecting your React JS and React Native projects. macOS, Linux, and Windows.

Join our Community Slack Quick Installation Guide What is Reactotron? Reactotron is a macOS, Windows, and Linux app for inspecting your React JS and R

May 16, 2022

A desktop app for inspecting your React JS and React Native projects. macOS, Linux, and Windows.

A desktop app for inspecting your React JS and React Native projects. macOS, Linux, and Windows.

Join our Community Slack Quick Installation Guide What is Reactotron? Reactotron is a macOS, Windows, and Linux app for inspecting your React JS and R

May 14, 2022

A mobile-first React prototyping tool with React-Bootstrap component integration

A mobile-first React prototyping tool with React-Bootstrap component integration

A mobile-first React prototyping tool with React-Bootstrap component integration

Apr 17, 2022

Let's learn React by building react within 100 lines of code

Let's learn React by building react within 100 lines of code

kReact Let's learn React by building react within 100 lines of code 🏂🏻 Medium article: https://kamesh-dev.medium.com/kreact-building-your-own-react-

Nov 4, 2021

Add Prometheus metrics to your React App. Built on top of promjs and react-performance libraries

  Add Prometheus metrics to your React App. Built on top of promjs and react-performance libraries

prom-react Add Prometheus metrics to your React App. Built on top of promjs and react-performance libraries Scope and purpose The main objective of th

Mar 23, 2022

React hooks for generating QRCode for your next React apps.

next-qrcode React hooks for generating QR code for your next React apps. 🎁 Features Render as Canvas & Image Support Numeric, Alphanumeric, Kanji and

May 6, 2022
Comments
  • 1. Tests

    fixes #1 This is a draft pr. Currently having trouble getting tests to work with ganache web3 provider. I keep getting an error "Expected private key to be an Uint8Array"

    Reviewed by Clish254 at 2021-08-06 21:48
  • 2. Single instance of Onboard in Provider

    Wondering if there's any plans on moving the core logic to a Provider so that you can use useOnboard in multiple places in the app without instantiating it multiple times. Also, would it be possible to use this alongside https://usedapp.readthedocs.io/ ?

    Reviewed by META-DREAMER at 2021-08-07 05:26
  • 3. Write integration tests

    Bounty on Gitcoin (0.02 ETH reward): https://gitcoin.co/issue/talentlessguy/use-onboard/1/100026116

    I'm not good at integration testing and better that someone else does it.

    What's needed

    • Pick a integration testing tool, the smaller and faster it is the better
    • write lots of tests and achieve 100% coverage (you can check coverage locally)
    • pull request the tests

    What you shouldn't do

    • don't hardcore wallet addresses in tests. Either use env variables or create a wallet with random key using ethers.js. PM me to add secrets in a GitHub env
    • don't use any CommonJS transpilators for tests. Tests must be pure ESM as well as the source. CommonJS fallback that is used in Rollup will be soon removed, since Next.js got ESM externals feature in the 11.0.2-canary.10 release, so please be aware of that.
    • don't use jest (bc it's too heavy and contains too much unnecessary stuff)

    What to consider

    • please keep the formatting correct and fix all lint errors you get. It's already handled by husky, but still
    • would be awesome if the tool you choose has a GitHub app, so it can report coverage change on commit / PR

    Some test examples

    Not the full list, just to give an idea which tests are required:

    • wallet options
      • should work without constructor
      • should work without appId
      • should support different chains (with networkId)
      • should support passed wallet providers
      • should use initial data while the hook is loading
    • hook properties
      • isWalletSelected
      • false by default
      • should set isWalletSelected to true after successful wallet connect

    thanks to whoever writes the tests, I appreciate it a lot :)

    Reviewed by talentlessguy at 2021-07-17 23:17
Simple useGlobalState hook for React!

useGlobalState Simple useGlobalState hook for React! Do you need your data shared across other components, and you simply don't want to pass props all

Apr 26, 2022
Simple hook to truncate items in the given list

useTagTruncator Installation yarn add react-use-tag-truncator npm install react-use-tag-truncator TODO Minor stuff need to be done in project: Fix r

Jul 19, 2021
Docusaurus-theme-frontmatter - Docusaurus theme to expose front matter through a component hook

docusaurus-theme-frontmatter This package enhances the Docusaurus classic theme

Apr 27, 2022
Commonninja-react - A small library for using Common Ninja's plugins in React projects

Common Ninja for React A small library for using Common Ninja's plugins in React

Jan 3, 2022
The recommended Code Splitting library for React ✂️✨
The recommended Code Splitting library for React ✂️✨

React code splitting made easy. Reduce your bundle size without stress ✂️ ✨ . npm install @loadable/component Docs See the documentation at loadable-c

May 18, 2022
Chainable, easy to read, React testing library

##Legit Tests This is a super friendly testing library for React, inspired by express middleware, it's easily extendable. Why did I make this when you

Dec 24, 2021
The relevant React Events Library.
The relevant React Events Library.

rel-events To read the docs, go to our docs folder. :) To see the app demo, go to our codesandbox page! Welcome to the rel-events github repo! rel-eve

Jan 1, 2022
Show More Less: React library to manage long paragraphs

ShowMoreLess React library to manage long paragraphs Install npm install --save show-more-less Usage import React, { useState } from 'react' import st

Dec 19, 2021
JHipster React library

Greetings, Java Hipster! This is the JHipster React utilities library Full documentation and information is available on our website at http://www.jhi

Mar 1, 2022
Lightweight unit test library for ReactJS

react-unit React Unit is a lightweight unit test library for ReactJS with very few (js-only) dependencies. By using react-unit you can run your ReactJ

Jul 22, 2021