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
  • 1. Import the Notification Component
  • 2. Use the Notification Component
  • 3. Define the Required Props
  • 4. Render the Component
  • 5. Notification Behavior
  1. Build
  2. Developer tools
  3. Haven1 SDK
  4. Use cases & Examples

Adding the Notification Component to Your React UI

To add the Notification component to your React UI, follow these steps:

1. Import the Notification Component

First, ensure you import the Notification component into the file where you want to use it.

import { Notification } from '@haven1/react-sdk/component';

2. Use the Notification Component

You can now use the Notification component in your JSX. You need to pass the required props to it. Based on the NotificationProps interface, here are the props you need to provide:

<Notification
  isSignedIn={isSignedIn}
  onSignIn={handleSignIn}
  isSigningIn={isSigningIn}
  address={userAddress}
  refetchInterval={15000} // Optional, defaults to 15000ms
  filters={notificationFilters} // Optional
  portalContainerDesktop={desktopContainer} // Optional
  portalContainerMobile={mobileContainer} // Optional
  enablePopupTxTypes={popupTxTypes} // Optional
/>
  • isSignedIn: A boolean indicating if the user is signed in.

  • onSignIn: A callback function to handle sign-in actions.

  • isSigningIn: A boolean indicating if the sign-in process is ongoing.

  • address: The user's address (optional).

  • refetchInterval: The interval for refetching notifications (optional).

  • filters: Filters for customizing notification display (optional).

  • portalContainerDesktop: Container for desktop notifications (optional).

  • portalContainerMobile: Container for mobile notifications (optional).

  • enablePopupTxTypes: Specifies transaction types for popup notifications (optional).

3. Define the Required Props

Ensure you have the necessary state and functions defined in your component to pass as props to the Notification component. For example:

const [isSignedIn, setIsSignedIn] = useState(false);
const [isSigningIn, setIsSigningIn] = useState(false);
const userAddress = '0x123...'; // Example address
const handleSignIn = () => {
  // Sign-in logic here
};
const notificationFilters = {}; // Define your filters
const desktopContainer = document.getElementById('desktop-notifications');
const mobileContainer = document.getElementById('mobile-notifications');
const popupTxTypes = {}; // Define your popup transaction types

4. Render the Component

Finally, render the Notification component within your applicationโ€™s component tree where you want the notifications to appear.

5. Notification Behavior

This component renders a notification bell when the user connects their wallet. The notification will appear once the wallet address is defined.

The notifications will be fetched from the server only after the user signs in to the Haven1 SDK. Ensure that the useSignIn hook is properly implemented to manage the sign-in state and trigger the fetching of notifications. For more information on how to use the useSignIn hook, refer to the Haven1 SDK documentation.

By following these steps, you should be able to integrate the Notification component into your React UI effectively.

PreviousUse cases & ExamplesNextCheck Proof of Identity (POI) Status
๐Ÿงฐ
๐Ÿ› ๏ธ
๐Ÿ“œ