@subter/react-tezos-wallet-guard

1.0.0 • Public • Published

Reactjs Tezos Wallet Guard

A reactjs component that is meant to wrap around your routes to manage connection and disconnect of the wallet (through Beacon SDK)

Installation & Usage

To install, run:

npm install @subter/react-tezos-wallet-guard

You can then use it in your code as follows:

// index.js
import { ProvideAuth } from "@subter/react-tezos-wallet-guard";
import { BeaconEvent } from "@airgap/beacon-sdk";

// Your component code
// ...
// ...
ReactDOM.render(
  <React.StrictMode>
    <ProvideAuth
      network="hangzhounet"
      contractAddress={process.env.REACT_APP_BACKEND_CONTRACT_ADDRESS}
      beaconWalletOptions={{
        name: "Subter Development",
        disableDefaultEvents: true,
        eventHandlers={{
          [BeaconEvent.LOCAL_RATE_LIMIT_REACHED]: {
            handler: data => console.log("Local rate limit reached")
          }
        }}
      }}
    >
      {/** React Router */}
      <BrowserRouter>
        <Routes>
          <Route path="/" element={<App />} />
          <Route path="/dashboard" element={<Dashboard />} />
        </Routes>
      </BrowserRouter>
    </ProvideAuth>
  </React.StrictMode>,
  document.getElementById("root")
);

and then in any of your defined components:

import { useAuth } from "@subter/react-tezos-wallet-guard";

// Your component code
// ...
// ...
const { contract, storage, onTransaction, userAddress } = useAuth();

Props

network (string)(required)

The network in which to lookup the domain. Supported values:

  • mainnet
  • hangzhounet

contractAddress (string)(required)

Your backend contract address

beaconWalletOptions (object)(optional)

The config object passed to BeaconWallet from the @taquito/beacon-wallet package.

  • The preferredNetwork is set to the value passed for the network prop
  • For the eventHandlers, the BeaconEvent.PAIR_INIT and the BeaconEvent.PAIR_SUCCESS are being used by the library (and it will override any event handlers defined by you)

Exports

<ProvideAuth /> component

A reactjs context provider.

useAuth() hook

A reactjs hook that provides the following details:

  • Tezos => The TezosToolkit()
  • contract => The backend contract
  • publicToken => Once the wallet is paired, the public key of the user's wallet address
  • wallet => The BeaconWallet()
  • userAddress => The Wallet's address
  • userBalance => The tezos balance in the user's wallet
  • storage => The storage on the backend contract
  • onTransaction => Function to be called after each blockchain transaction, to update the contract's storage and user's balance details
  • beaconConnection => Read this value to know if the wallet is connected or not
  • connectWallet => Function to initiate connection with the user's wallet
  • disconnectWallet => Function to initiate disconnection with the user's wallet

Package Sidebar

Install

npm i @subter/react-tezos-wallet-guard

Weekly Downloads

1

Version

1.0.0

License

MIT

Unpacked Size

92.3 kB

Total Files

10

Last publish

Collaborators

  • lazybaer