@tezos-il/tezos-react-hooks

Tezos-hooks

Provides react hooks for Tezos Taquito (and Beacon)

How to install

For now, this library requires your dapp to use typescript. In the near future we will make it available for all users. We're also, for now, requiring you use @taquito/taquito and @taquito/beacon-wallet

Run:

# for yarn users
yarn add @tezos-il/tezos-react-hooks @taquito/taquito @taquito/beacon-wallet

# for npm users
npm i @tezos-il/tezos-react-hooks @taquito/taquito @taquito/beacon-wallet

How to use

just import the required hook into your app:

import {TezosContextProvider, useTezosContext, useBeaconWallet, useContract, useBalance} from `@tezos-il/tezos-react-hooks`

TezosContext

We're providing a context provider/hook pair that is required for all of our hooks. The way to use it this:

Usually you'll want to configure the Tezos object you get from taquito. Otherwise we supply a default that connects to mainnet on https://mainnet.smartpy.io

Wrap the components where you use the tezos hooks with TezosContextProvider - usually you do this in your root component.

import {TezosToolkit} from '@taquito/taquito'
import {TezosContextProvider} from '@tezos-il/tezos-react-hooks'

const tezos = new TezosToolkit()

// configure tezos here

<TezosContextProvider tezos={tezos}>
    <App />
</TezosContextProvider>

and inside your app you can use the hooks useBeaconWallet, useBalance, useContract which use this tezos object, or you can get this object by using useTezosContext:

import {useTezosContext} from '@tezos-il/tezos-react-hooks'

function Component() {
    const {tezos} = useTezosContext()
    ...
}

useBeaconWallet

This example will connect to the wallet automatically and will show the address once connected:

import {useEffect}, React from 'react'
import {useBeaconWallet} from '@tezos-il/tezos-react-hooks'

function App() {
    const {
        wallet, // the wallet object returned from taquito
        initialized, // true iff the wallet is initialized
        address, // null when wallet is not initialized, otherwise it's the wallet's address
        connect, //call this function with DAppClientOptions to connect to a beacon wallet
        loading, // true when wallet is loading
        balance, // holds the account's balance (for now it's not reactive)
        error, // string, not empty when there's an error
        clearErrors // can be called to clear the error
    } = useBeaconWallet()

    useEffect(() => {
        connect()
    }, [])

    return <div>{balance}</div>
}

Expose other utility values as error, loading, initialized

useContract

import {useEffect}, React from 'react'
import {useContract} from '@tezos-il/tezos-react-hooks'

function App() {
  const {
    contract, // WalletContract object
    error,
    storage, // contract storage
    loading,
    connect, // a function to connect to the contract
    clearError
  } = useContract(CONTRACT_ADDRESS)
  ...
}

By calling connect with a valid contract address the contract object will be a WalletContract. Using this object you can call an entrypoint by calling contract.methods.entrypoint().send(). This is just a simple example, you can see more in Taquito docs.

useBalance

import {useEffect}, React from 'react'
import {useBalance} from '@tezos-il/tezos-react-hooks'

function App() {
  const {
    balance, // the balance of ACCOUNT_ADDRESS (mutes)
    error,
    loading,
    clearError,
    balanceInTez // a function to get `balance` in tez
  } = useBalance(ACCOUNT_ADDRESS)
...
}

Contributors ✨

Thanks goes to these wonderful people (emoji key):

Claude Barde 💻

Chaim Lev-Ari 💻

This project follows the all-contributors specification. Contributions of any kind welcome!