UseWallet() allows dapp users to connect to the provider of their choice in a way that is as straightforward as possibleUseWallet() allows dapp users to connect to the provider of their choice in a way that is as straightforward as possible

Overview

👛 useWallet()

useWallet() allows dapp users to connect to the provider of their choice in a way that is as straightforward as possible. It provides a common data structure for any connected account, no matter what provider has been chosen by the user. It aims to provide some features that are often reimplemented by dapp developers: connecting to a wallet, keeping track of transactions, and more (submit a issue or PR!).

Features

  • All-in-one solution to connect to Ethereum providers.
  • Completely library agnostic (use Web3.js, ethers.js, …).
  • Provides the current balance.
  • Keeps track of the recent transactions (coming soon).

Opinionated?

Oh yes:

  • React only.
  • Ethereum only (for now).
  • Supports one network at a time.
  • Embeds as many providers as possible.
  • Every prop and parameter is optional.

What useWallet() is not

  • An Ethereum wallet implementation.
  • A low-level, fully configurable connection system for Ethereum providers (see web3-react if you are after that).
  • An general library to interact with Ethereum (see ethers.js, Web3.js, etc.).

Used by

Usage

Add it to your project:

yarn add use-wallet

Use it in your React app:

// App.js

import React from 'react'
import { useWallet, UseWalletProvider } from 'use-wallet'

function App() {
  const wallet = useWallet()
  const blockNumber = wallet.getBlockNumber()

  return (
    <>
      <h1>Wallet</h1>
      {wallet.status === 'connected' ? (
        <div>
          <div>Account: {wallet.account}</div>
          <div>Balance: {wallet.balance}</div>
          <button onClick={() => wallet.reset()}>disconnect</button>
        </div>
      ) : (
        <div>
          Connect:
          <button onClick={() => wallet.connect()}>MetaMask</button>
          <button onClick={() => wallet.connect('frame')}>Frame</button>
          <button onClick={() => wallet.connect('portis')}>Portis</button>
        </div>
      )}
    </>
  )
}

// Wrap everything in <UseWalletProvider />
export default () => (
  <UseWalletProvider
    chainId={1}
    connectors={{
      // This is how connectors get configured
      portis: { dAppId: 'my-dapp-id-123-xyz' },
    }}
  >
    <App />
  </UseWalletProvider>
)

API

<UseWalletProvider />

This is the provider component. It should be placed above any component using useWallet(). Apart from children, it accepts two other props:

chainId

The Chain ID supported by the connection. Defaults to 1.

connectors

Configuration for the different connectors. If you use a connector that requires a configuration but do not provide one, an error will be thrown.

  • injected: no configuration needed.
  • frame: no configuration needed.
  • fortmatic: { apiKey }
  • portis: { dAppId }
  • provided: { provider }
  • authereum: no configuration needed.
  • squarelink: { clientId, options }
  • walletconnect: { rpcUrl }
  • walletlink: { url, appName, appLogoUrl }

See the web3-react documentation for more details.

useWallet()

This is the hook to be used throughout the app.

It takes an optional object as a single param, containing the following:

  • pollBalanceInterval: the interval used to poll the wallet balance. Defaults to 2000.
  • pollBlockNumberInterval: the interval used to poll the block number. Defaults to 5000.

It returns an object representing the connected account (“wallet”), containing:

  • account: the address of the account, or null when disconnected.
  • balance: the balance of the account, in wei.
  • chainId: The specified Chain ID of the network you're connected to.
  • connect(connectorId): call this function with a connector ID to “connect” to a provider (see above for the connectors provided by default).
  • connector: The "key" of the wallet you're connected to (e.g "metamask", "portis").
  • connectors: the full list of connectors.
  • error: contains an error object with the corresponding name and message if status is set to error.
  • ethereum: the connected Ethereum provider.
  • getBlockNumber(): this function returns the current block number. This is a function because the block number updates often, which could trigger as many extra renders. Making an explicit call for the block number allows users of useWallet() to avoid extra renders when the block number is not needed.
  • isConnected(): this function returns whether the wallet is connected.
  • networkName: a human-readable name corresponding to the Chain ID.
  • reset(): call this function to “disconnect” from the current provider. This will also clean the latest error value stored in use-wallet's state.
  • status: contains the current status of the wallet connection. The possible values are:
    • "disconnected": no wallet connected (default state).
    • "connecting": trying to connect to the wallet.
    • "connected": connected to the wallet (i.e. the account is available).
    • "error": a connection error happened.
  • type: whether or not the account is a contract. Can be null when you're disconnected, or either "contract" or "normal".

Examples

To run the examples, switch to the respective directories. Then, simply run yarn install to install, and yarn start to run the examples on localhost:1234.

Special thanks

useWallet() is a built on web3-react and its connectors, which are doing all the hard work internally.

You might also like...
Youtube Tutorial showcasing how to create a fullstack NFT mingint dapp.
Youtube Tutorial showcasing how to create a fullstack NFT mingint dapp.

Emoji Faces NFT Minting dApp This a complete example of fullstack NFT minting dApp. EmojiFaces is built with the purpose of providing an entry point f

Hotel-ETH - A Bed and Breakfast dApp run on Ethereum. Includes a token + schedule system (Solidity) and full front-end (React + ethers.js) built with Hardhat
Compares Discord libraries and their support of new API features. Made with React, Next.js, and Bulma.

Compares Discord libraries and their support of new API features. Made with React, Next.js, and Bulma.

Make your React Components aware of their width and height!
Make your React Components aware of their width and height!

Make your React Components aware of their width and/or height! Hyper Responsive Components! Performant. Easy to use. Extensive browser support. Suppor

A Simple React Review UI For Customers To Send Their Feedback

A Simple React Review UI For Customers To Send Their Feedback

:speech_balloon: Easy way to create conversation chats
:speech_balloon: Easy way to create conversation chats

React Simple Chatbot A simple chatbot component to create conversation chats Getting Start npm install react-simple-chatbot --save Usage There are sev

A simple React component to reproduce the way iOS deletes an item in a list
A simple React component to reproduce the way iOS deletes an item in a list

react-swipe-to-delete-ios A simple React component to reproduce the way iOS deletes an item in a list. Demo Installation yarn add react-swipe-to-delet

The easiest way to move your React application to Server-Side Rendering. Handles Side Effects and synchronizes State.
The easiest way to move your React application to Server-Side Rendering. Handles Side Effects and synchronizes State.

The easiest way to move your React application to Server-Side Rendering. Handles Side Effects and synchronizes State. Table of Contents Articles Featu

An easy way to build Rarity games with React

rarity-react An easy way to build Rarity games with React. It started with a simple app... I wanted to see my summoners and the prizes they'd won whil

Owner
null
Github-profile-readme-maker - Best Profile Generator, Create your perfect GitHub Profile ReadMe in the best possible way

GPRM : GitHub Profile ReadMe Maker Features We got everything that you need ! Cr

Vishwa Gaurav 333 Dec 20, 2022
A curated list of resources to learn React and related web technologies as fast as possible.

React Learning Resources A curated list of resources to learn React and related web technologies as fast as possible. The goal is to help you create p

Naresh Bhatia 61 Dec 31, 2022
a offcial wallet provider for DexMask wallet

wallet-provider a offcial wallet provider for DexMask wallet Useage install connector package yarn add dex-wallet-connector use connector in compon

null 1 Nov 22, 2021
An application for use in recording the details and maintenance history of the air conditioning assets of an HVAC service provider.

This is an application for use in recording the details and maintenance history of the air conditioning assets of an HVAC service provider. It has been developed using a MERN SPA framework and accordingly, utilizes a MongoDB database, Express, React and Node with GraphQL.

Mark Horsfall 3 Apr 15, 2022
React hooks and components that help notify users to claim their $ENS airdrop.

ens-claim This package provides React hooks and components helpful in notifying users of products that they have unclaimed $ENS tokens from the ENS DA

Metaphor 1 Nov 14, 2021
A simple way to write re-usable features with React + EffectorA simple way to write re-usable features with React + Effector

Effector Factorio The simplest way to write re-usable features with React + Effector Install npm install effector-factorio Why this? People became to

Anton Kosykh 39 Dec 25, 2022
This repo shows how to connect your React app to StarkNet.

StarkNet.js + React This repo shows how to connect your React app to StarkNet. Content Contracts The contracts directory contains a simple Cairo contr

Francesco Ceccon 44 Sep 23, 2022
An app designed to connect customers with translators in realtime, with translations provided through image, chat and live video calls.

Transl8r About the Project Transl8r is an app designed to connect people and translators to provide fast, effective translations via live chat, video

Richard Barnes 8 Oct 27, 2022
Interview Scheduler is a mock application that allows users to book and cancel interviews.

Interview Scheduler Project Interview Scheduler is a mock application that allows users to book and cancel interviews. Setup Install dependencies with

Alvin 1 May 27, 2022
a simple dapp login interface made it with react-ts-chakra-ui and usedapp

a simple dapp login interface made it with react-ts-chakra-ui and usedapp

Sergio 1 May 5, 2022