Hook Module

This module provides custom React hooks for interacting with blockchain data and events. These hooks are designed to simplify the process of fetching and managing blockchain-related data within React applications.

Features

  • Custom hooks for blockchain data fetching.

  • Easy integration with React components.

  • Support for various blockchain operations.

Available Hooks

  • useBalance: Fetches the balance of a specified token for a given wallet address.

  • useWatch: Watches for changes in blockchain data and updates the component state accordingly.

  • useApproveERC20: Manages ERC-20 token approval to a specific contract.

  • useContractWrite: Handles writing to a smart contract with various configurations.

Usage

Import the necessary hooks from this module to use them in your React components. These hooks provide a simple API to interact with blockchain data and handle state management efficiently.

Usage Example

Here is an example of how to use the useBalance hook in a React component:

import React from 'react';
import { useBalance } from '@haven1/wagmi-sdk/hook';

const BalanceComponent = ({ address, tokenAddress }) => {
  const balance = useBalance(address, tokenAddress);

  return (
    <div>
      <h3>Token Balance</h3>
      {balance ? (
        <p>
          {balance.formatted} {balance.symbol}
        </p>
      ) : (
        <p>Loading...</p>
      )}
    </div>
  );
};

export default BalanceComponent;

In this example, the useBalance hook is used to fetch the balance of a specified token for a given wallet address. The balance is then displayed in the component.