useReach

Utility to use the Reach API inside React applications.

Install

npm install @collecteurs/use-reach --save or yarn add @collecteurs/use-reach

Peer dependencies

Don't forget to install the peer dependencies:

• react >= 17.0.0
• @reach-sh/stdlib >= 0.1.0

Basic Usage

import React from 'react'
import { ReachProvider } from '@collecteurs/use-reach'

const loadContract = async () => {
  return await import("../MyContract")
}

// Wrap your app with the ReachProvider
export const App = () => (
  return (
    <ReachProvider
      debug
      network="TESTNET"
      loadContract={loadContract}
      config={{ storage: { key: "my-reach-app" } }}>
      <MyComponent />
    </ReachProvider>
  )
)

import React, { useState } from "react";
import { useReach } from "@collecteurs/use-reach";

// Use the useReach hook
export const MyComponent = () => {
  const { account, balance } = useReach();

  return (
    <div>
      <p>Network: {network}</p>
      <p>Currency: {account.currency}</p>
      <p>Provider: {account.provider}</p>
      <p>Account: {account.address}</p>
      <p>Balance: {balance}</p>
    </div>
  );
};

API

ReachProvider

The ReachProvider is a wrapper around the Reach API. It provides the context to the useReach hook.

Props

• debug (boolean): Enable debug mode. Default: false
• network (string): The network to use. Default: TESTNET
• loadContract (function): A function that returns the contract. Default: () => {}
• config (object): The Reach config. Default: {}
• children (node): The children to render.

Config

• storage (object): The storage config. Default: { key: "reach" }
• algo (object): The Algorand config. Default: {}
• logger (string): The logger config. More info here

useReach

The useReach hook provides the Reach API to the React application.

Returns

• status (string): The status of the Reach API. Can be loading, ready, error.

• network (string): The network name. Can be TESTNET, MAINNET.

• lib (object): The Reach.sh stdlib.

• reach (object): The Reach API.

• contract (object): The contract object you loaded.

• getSigningLogs (function): Get the signing logs.

• connectWallet (function): Connect the wallet.

• disconnectWallet (function): Disconnect the wallet.

• getBalance (function): Get any account address' balance.

• account (object): The account object.

• fetching (boolean): Is any api is fetching?