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.