Haven1
  • Get started
    • 🧑‍🚀Welcome Havenauts!
    • 📄Haven1 Litepaper
    • 🧮H1 Tokenomics
  • Foundations of Haven1
    • 📐Architecture & network design
    • 🔐Network-level security
    • 📚Haven1 Core protocols
    • 💱Best in class liquidity
    • 👮Network Guardians: Firewall on Haven1
    • 🌉hBridge: Intro to Haven1 Bridge
  • Learn
    • 💵What does Haven1 solve?
    • 💡Haven1: Use Cases
    • 📚Understanding GoQuorum
    • 🔤Haven1 Blockchain basics
    • 🛂KYC policies on Haven1 blockchain
    • Security at Haven1
    • 🔓What is esH1?
    • ⚖️Dispute resolution mechanism
    • 🛣️Haven1 Roadmap
    • 🖥️Haven1 is EVM compatible
  • Products
    • 🔃hSwap - Spot DEX on Haven1
    • 📍hsETH on Haven1
    • Earn on Haven1
    • 🛡️2FA Wallet Shield
    • 🧊Haven1 block explorer
    • 🏛️Governance & veH1
    • 🆔hPassport - Key to Haven1
      • Advantages of having ID verification at a network level
      • Understanding the ID Verification Process
    • 💼Vesting esH1 - Converting esH1 to H1
    • 📍Staking H1 & esH1 - Earning rewards on your H1 holdings
      • Flexible Staking
      • Locked Staking
  • hPerpetuals - Perps DEX on Haven1
  • Haven1 Guides
    • 🔗Quick links
    • ✅Haven1 onboarding Guide
      • 🪪KYC Guide
      • Business KYC(KYB) Guide
    • Adding multiple wallets to a hPassport
    • 🌉Simple Bridging Guide on Haven1 network
    • 🏠Haven1 Portal - Your Gateway into Haven1
    • 🔑2FA Set up Guide
    • 🤑Haven1 Airdrop: Claim Process and Strategies
    • Claim Process Walkthrough on Team Finance
    • 📄Contract Addresses
  • Build
    • 📖Getting started
    • 🌐Haven1 Network information
    • 🍦Novel developer benefits on Haven1
    • 📑High level guide for secure deployment
    • ⚙️Detailed deployment Guide
    • 🧰Developer tools
      • 👛Haven1 Gnosis Safe wallet
      • 🛠️Haven1 SDK
        • 🔌@haven1/sdk-api-client
          • Class: Haven1SDK
          • Class: AuthModule
          • Class: SdkModule
        • ⛓️@haven1/blockchain-sdk
          • Contracts
        • 🧰@haven1/wagmi-sdk
          • Constant Module
            • Variable: haven1Devnet
            • Variable: haven1Testnet
            • Variable: H1
          • Contract Module
            • ProofOfIdentity
            • ProofOfIdentityV2
            • NativeAppFee
          • Utility Module
            • bigIntMax
            • formatBigint
            • bigintFromDecimals
          • Hook Module
            • useWatch
            • useBalance
            • useApproveERC20
            • useContractWrite
        • ⚛️@haven1/react-sdk
          • useHaven1SDK
          • useAuth
          • useIdentity
          • useNotifications
          • useOTP
          • useSignIn
        • 📜Use cases & Examples
          • Adding the Notification Component to Your React UI
          • Check Proof of Identity (POI) Status
      • Oracles on Haven1
      • Subgraph on Haven1
      • Haven1 block explorer
      • Web3 libraries and tools
    • Development frameworks
    • 🔐Using hPassport in Your dApps
      • Integrating hPassport into Your dApp
      • Implementing Identity Checks in Smart Contracts
        • Country codes
      • Sample Application - Country ID
      • Sample Application - Composable verification level
      • Sample Application - User type
      • Repository Information
    • ⛽Application fees
      • FeeContract.sol
      • Example FeeContract Interactions
      • Case Studies
    • 👷Builders grants program
  • Additional resources
    • 📚Haven1 terminology
  • Quick Links
    • Website
    • Twitter
    • Blog
    • Telegram
    • Customer Support
Powered by GitBook
On this page
  • Features
  • Available Hooks
  • Usage
  • Usage Example
  1. Build
  2. Developer tools
  3. Haven1 SDK
  4. @haven1/wagmi-sdk

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.

PreviousbigintFromDecimalsNextuseWatch
🧰
🛠️
🧰