• Stars
    star
    738
  • Rank 61,429 (Top 2 %)
  • Language
    TypeScript
  • License
    MIT License
  • Created almost 5 years ago
  • Updated 6 months ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

👛 useWallet() · All-in-one solution to connect a dapp to an Ethereum provider.

👛 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: { rpc: { 1: 'https://rpc-url', 3: 'https://rpc-url' } }
  • walletlink: { url, appName, appLogoUrl }

See the web3-react documentation for more details.

autoConnect

Automatically connect to wallet on page load. Defaults to false.

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.

More Repositories

1

client

(Aragon 1) Create and manage decentralized organizations on Ethereum.
JavaScript
825
star
2

aragonOS

(Aragon 1) Reference implementation for aragonOS: a Solidity framework for building complex dApps and protocols
Solidity
650
star
3

aragon-apps

(Aragon 1) Aragon apps developed by Aragon Core Devs (smart contracts + webapps)
JavaScript
386
star
4

ui

🦚 UI kit for decentralized apps
JavaScript
342
star
5

govern

🦅 Optimistic DAOs
TypeScript
154
star
6

dao-templates

(Aragon 1) Monorepo for all Aragon made organization templates
JavaScript
154
star
7

connect

(Aragon 1) Seamlessly integrate DAO functionality into web and node.js apps.
TypeScript
144
star
8

evm-storage-proofs

Trustlessly prove a past storage value in a contract to other contracts
Solidity
141
star
9

nest

A grants program to support the development of the ecosystem
140
star
10

radspec

🤘 Radspec is a safe interpreter for Ethereum's NatSpec
JavaScript
139
star
11

aragon-network-token

Smart contracts for the Aragon Network Token
Solidity
116
star
12

aragon-court

🧿 A subjective oracle secured by cryptoeconomics
JavaScript
113
star
13

whitepaper

An opt-in digital jurisdiction for DAOs and sovereign individuals
112
star
14

aragon-cli

CLI for creating and publishing Aragon apps
JavaScript
90
star
15

osx

Aragon OSx Protocol
TypeScript
85
star
16

aragon.js

(Aragon 1) A monorepo of JavaScript libraries for interacting with Aragon
JavaScript
83
star
17

aragon-wiki

The Aragon wiki
HTML
76
star
18

AGPs

Aragon Goverance Proposals repository
Standard ML
60
star
19

deployments

Real-world deployments of code powering Aragon organizations to Ethereum networks
Solidity
54
star
20

governance

Proposals about governance models for the Aragon project and the Aragon Network
52
star
21

aragon-monthly

Aragon Monthly is a community curated monthly digital newspaper about DAOs and the Aragon ecosystem
50
star
22

flock

The grants program for the Aragon project teams
45
star
23

app

Human-centered DAO infrastructure
TypeScript
45
star
24

aragon-react-boilerplate

(Aragon 1) React boilerplate for Aragon applications
JavaScript
43
star
25

court-dashboard

Aragon Court dashboard
JavaScript
39
star
26

aragon-desktop

(Aragon 1) Managing an decentralized organization on a desktop near you
JavaScript
37
star
27

labs

Used for organization and collaboration on research and development initiatives under the Aragon Labs umbrella.
33
star
28

hack

(Aragon 1) Content and source code for the Aragon Developer Portal
JavaScript
31
star
29

design

UI/UX designs for the Aragon client and associated apps
30
star
30

staking

Staking app
Solidity
30
star
31

aragon-id

Aragon's simple identity solution to allow easy and secure ENS name assignments
Solidity
27
star
32

KeybaseRegistry

On-chain registry of Ethereum addreses <> https://keybase.io identities
JavaScript
27
star
33

sdk

Aragon JS SDK
TypeScript
25
star
34

buidler-aragon

(Aragon 1) Buidler plugin for Aragon App development
Solidity
24
star
35

aragon-chain

(Deprecated) Proof-of-Stake, EVM-compatible blockchain focused on DAOs
Go
24
star
36

your-first-aragon-app

(Aragon 1) Template to help you build your first Aragon application
JavaScript
21
star
37

token-amount

💸 TokenAmount · A transportable object for token amounts with formatting.
TypeScript
20
star
38

aragen

(Aragon 1) Generate an Aragon environment
JavaScript
20
star
39

aragon-chain-spec

Reference specification for Aragon Chain
18
star
40

use-token

💰 useToken() · No fuss Ethereum token metadata.
JavaScript
18
star
41

aragon-react-kit-boilerplate

React boilerplate for Aragon applications
JavaScript
17
star
42

apm.js

JavaScript library for the Aragon Package Manager
JavaScript
16
star
43

aragon-example-application

A simple example module for Aragon
JavaScript
15
star
44

convert.aragon.org

Convert between your Aragon tokens
JavaScript
14
star
45

protocol

Aragon Protocol
JavaScript
14
star
46

use-inside

🔬useInside() · Deep tree inspection for your React components.
TypeScript
14
star
47

plumbery

A collection of experiments and research artifacts for Aragon Connect.
TypeScript
13
star
48

aragon.org

Aragon's website
JavaScript
13
star
49

court-subgraph

Aragon Court subgraph
TypeScript
13
star
50

network

The source code, implementation spec, and Agreement of the Aragon Network.
13
star
51

liquidity.aragon.org

liquidity.aragon.org
TypeScript
12
star
52

use-viewport

🌅 useViewport() · Viewport sizes and helper functions for responsive applications, quick and easy.
TypeScript
12
star
53

contract-helpers

Helpers for Aragon smart contract development
JavaScript
11
star
54

multichain-voting

Solidity
10
star
55

minime

Minime Token
Solidity
10
star
56

protocol-dashboard

Aragon Protocol Dashboard
JavaScript
10
star
57

anj.aragon.org

Aragon Court jurors onboarding microsite
JavaScript
10
star
58

apm-serve

Web 2.0 server for Web 3.0 APM hosted dApps
JavaScript
9
star
59

ods

Implementation of the Aragon's Open Design System
TypeScript
8
star
60

solidity-inspector

Extract actionable metadata from Solidity source code
JavaScript
8
star
61

network-dashboard

Aragon Network Cash DAO Dashboard
JavaScript
8
star
62

aragon-app-dx

This project is meant to discuss and shape the ideal experience we want for Aragon app developers (based on the Aragon React Kit Boilerplate).
JavaScript
8
star
63

simple-storage-example-plugin

Starter of an Aragon OSx Plugin project developed with Solidity and HardHat
TypeScript
7
star
64

aragon-network-deploy

Aragon Network deployment scripts and outputs
JavaScript
7
star
65

protocol-backend

Aragon Protocol Backend
JavaScript
7
star
66

court-precedence-campaign

Dispute contents for Aragon Court's precedence campaign
Solidity
6
star
67

erc3k-legacy

Reference executable spec of ERC-3000, the standard for binding off-chain voting
6
star
68

apm-contracts

Deprecated repo, please see aragonOS
6
star
69

prototypes

Concepts / prototypes / experiments
JavaScript
6
star
70

osx-cli

deploy and manage osx plugins with ease
TypeScript
6
star
71

aragondac-community

5
star
72

aracon-website

Website for Aracon - The Aragon Conference
JavaScript
5
star
73

blog.aragon.org

Ghost theme for the Aragon Project blog
HTML
5
star
74

aragonette

An Aragon OSx simplified UI template for your custom DAO
TypeScript
5
star
75

strategy-governance-hyperstructure

A strategy document explaining how Aragon could become a governance hyperstructure.
5
star
76

aragon-bare-boilerplate

Bare boilerplate for Aragon applications
JavaScript
5
star
77

concierge

Aragon Concierge Kits
JavaScript
5
star
78

forum.aragon.org

Aragon Forum's theme
SCSS
5
star
79

ppf

JavaScript
4
star
80

osx-plugin-template-hardhat

TypeScript
4
star
81

svrp

Simple Voting Relay Protocol
JavaScript
4
star
82

signaling

Aragon Signaling App
JavaScript
4
star
83

issues

A centralized repo for managing public issues with the Aragon desktop app, the web app and the contracts that power them. Purely technical topics belong to each project repository.
4
star
84

console

(Aragon 1) The place to fine-tune all parts of your organization.
TypeScript
4
star
85

faucet

JavaScript
4
star
86

github

Github practices and code standards
4
star
87

slack-bot

Slack bot that monitors public channels to help users
PHP
4
star
88

specs

A collection of specs describing how Aragon works
4
star
89

network-dao-charter

This repository versions the Aragon Network DAO Charter document.
TeX
4
star
90

geo-browser-contracts

Smart contracts powering the GeoBrowser foundation
TypeScript
3
star
91

dao-subgraph

Aragon organization subgraph
TypeScript
3
star
92

agp-sign

Script to automate the Aragon Association board approval or rejection of AGPs
JavaScript
3
star
93

convert-recover.aragon.org

Mini recovery page for Buy and Sell Orders for ANT/ANJ on the bonding curve.
JavaScript
3
star
94

intertron

IPC for Electron
JavaScript
3
star
95

help

Documentation and files related to help.aragon.org
HTML
3
star
96

research-blog

HTML
3
star
97

security-review

In-flight requests for Aragon Network components that require external security review
3
star
98

optimistic-token-voting-plugin

Optimistic governance plugin for OSx
Solidity
3
star
99

community

Organizing Aragon community efforts in an accessible, collaborative format
3
star
100

osx-plugin-template-foundry

Solidity
3
star