update hook and export component

src/App.tsx

@@ -1,5 +1,5 @@
 // React + Web3 Essentials
-import { FC, useContext, useEffect, useMemo, useRef, useState } from 'react';
+import { FC, useContext, useEffect, useMemo, useState } from 'react';
 
 // External Packages
 import * as dotenv from 'dotenv';
@@ -11,7 +11,6 @@ import styled, { ThemeProvider } from 'styled-components';
 
 import { ChatUIProvider, darkChatTheme, IChatTheme } from '@pushprotocol/uiweb';
 import { createGlobalStyle } from 'styled-components';
-import { Toaster } from 'sonner';
 
 // Internal Compoonents
 import InitState from 'components/InitState';
@@ -51,8 +50,9 @@ import { darkTheme, lightTheme } from 'config/spaceTheme';
 import SpaceComponentContextProvider from 'contexts/SpaceComponentsContext';
 import SpaceContextProvider from 'contexts/SpaceContext';
 import { SpaceWidgetSection } from 'sections/space/SpaceWidgetSection';
-import { blocksColors, getBlocksCSSVariables } from 'blocks';
+import { blocksColors, getBlocksCSSVariables, Notification } from 'blocks';
 import APP_PATHS from 'config/AppPaths';
+import { useRewardsNotification } from 'common/hooks/useRewardsNotification';
 
 dotenv.config();
 
@@ -193,6 +193,7 @@ export default function App() {
   const dispatch = useDispatch();
 
   const { isActive, account, provider } = useAccount();
+  useRewardsNotification();
   const [currentTime, setcurrentTime] = useState(0);
 
   const { pgpPvtKey } = useContext<any>(AppContext);
@@ -347,11 +348,7 @@ export default function App() {
       <>
         <GlobalStyle />
         <InitState />
-        <Toaster
-          style={{ minWidth: '397px', height: '111px' }}
-          offset={15}
-          visibleToasts={5}
-        />
+        <Notification />
         <NavigationContextProvider>
           <ChatUIProvider
             user={userPushSDKInstance}

src/blocks/illustrations/components/Notification.tsx → src/blocks/illustrations/components/NotificationImg.tsx

@@ -2,11 +2,11 @@ import { FC } from 'react';
 import { IllustrationWrapper } from '../IllustrationWrapper';
 import { IllustrationProps } from '../Illustrations.types';
 
-const Notification: FC<IllustrationProps> = (allProps) => {
+const NotificationImg: FC<IllustrationProps> = (allProps) => {
   const { svgProps: props, ...restProps } = allProps;
   return (
     <IllustrationWrapper
-      componentName="Notification"
+      componentName="NotificationImg"
       illustration={
         <svg
           width={restProps.width ?? '56'}
@@ -83,4 +83,4 @@ const Notification: FC<IllustrationProps> = (allProps) => {
   );
 };
 
-export default Notification;
+export default NotificationImg;

src/blocks/illustrations/index.ts

@@ -23,7 +23,7 @@ export { default as Points } from './components/Points';
 
 export { default as Metamask } from './components/Metamask';
 
-export { default as Notification } from './components/Notification';
+export { default as NotificationImg } from './components/NotificationImg';
 export { default as NotificationDark } from './components/NotificationDark';
 
 export { default as RewardsBell } from './components/RewardsBell';

src/blocks/index.ts

@@ -7,7 +7,7 @@ export { Link, type LinkProps } from './link';
 export { Lozenge, type LozengeProps } from './lozenge';
 export { Menu, type MenuProps, MenuItem, type MenuItemComponentProps } from './menu';
 export { Modal, type ModalProps, modal } from './modal';
-export { notification } from './notification';
+export { notification, Notification } from './notification';
 export { ProgressBar, type ProgressBarProps } from './progressBar';
 export { Separator, type SeparatorProps } from './separator';
 export { Skeleton, type SkeletonProps } from './skeleton';

src/blocks/notification/Notification.tsx

@@ -2,7 +2,7 @@ import { FC } from 'react';
 import styled from 'styled-components';
 import { Cross } from '../icons';
 import { NotificationProps } from './Notification.types';
-import { toast } from 'sonner';
+import { toast, Toaster } from 'sonner';
 import { getTextVariantStyles } from 'blocks/Blocks.utils';
 
 const NotificationContainer = styled.div`
@@ -61,7 +61,7 @@ const CloseButton = styled.div`
   top: var(--spacing-xxs);
 `;
 
-const Notification: FC<NotificationProps> = ({ onClose, title, description, image, onClick }) => {
+const NotificationItem: FC<NotificationProps> = ({ onClose, title, description, image, onClick }) => {
   const handleNotificationClick = () => onClick?.();
 
   const handleNotificationClose = () => {
@@ -88,13 +88,23 @@ const Notification: FC<NotificationProps> = ({ onClose, title, description, imag
   );
 };
 
+const Notification = () => {
+  return (
+    <Toaster
+      style={{ minWidth: '397px', height: '111px' }}
+      offset={15}
+      visibleToasts={5}
+    />
+  );
+};
+
 // Store the toastId(s) in an array to manage multiple notifications
 const toastIds: Array<string | number> = [];
 
 // Export the notification object with show and hide methods
 const notification = {
   show: (config: NotificationProps) => {
-    const toastId = toast.custom(() => <Notification {...config} />, {
+    const toastId = toast.custom(() => <NotificationItem {...config} />, {
       duration: config.duration || Infinity,
       position: config.position || 'bottom-right',
     });
@@ -108,4 +118,4 @@ const notification = {
   },
 };
 
-export { notification };
+export { notification, Notification };

src/common/hooks/useRewardsNotification.tsx

@@ -0,0 +1,40 @@
+// React and other libraries
+import { useState, useEffect } from 'react';
+import { useNavigate } from 'react-router-dom';
+
+// components
+import { notification, RewardPoints } from 'blocks';
+
+export const useRewardsNotification = () => {
+  const navigate = useNavigate();
+  const [showNotif, setShowNotif] = useState(false);
+
+  const notificationAlreadyShown = localStorage.getItem('notificationShown') === 'true';
+  const isPointsPage = location?.pathname.includes('/points');
+
+  const showNotification = () => {
+    notification.show({
+      title: 'Push Points are Live',
+      description: 'Complete Tasks on Push. Check-in, Earn Push Points, Unlock Rewards and Level up!',
+      image: <RewardPoints />,
+      onClick: () => {
+        navigate('/points');
+        localStorage.setItem('notificationShown', 'true');
+        notification.hide();
+      },
+      onClose: () => {
+        localStorage.setItem('notificationShown', 'true');
+      },
+    });
+    setShowNotif(true);
+  };
+
+  useEffect(() => {
+    if (!isPointsPage && !notificationAlreadyShown) {
+      if (!showNotif) showNotification();
+    } else {
+      notification.hide();
+      setShowNotif(false);
+    }
+  }, [location?.pathname]);
+};

src/modules/dashboard/components/DashboardSubHeader.tsx

@@ -11,7 +11,7 @@ import {
   ChatIllustration,
   Communication,
   CommunicationDark,
-  Notification,
+  NotificationImg,
   NotificationDark,
   Text,
 } from 'blocks';
@@ -52,7 +52,7 @@ const DashboardSubHeader: FC<DashboardSubHeaderProps> = () => {
         alignItems="center"
         width={{ tb: '-webkit-fill-available', initial: 'inherit' }}
       >
-        {mode === 'dark' ? <NotificationDark /> : <Notification />}
+        {mode === 'dark' ? <NotificationDark /> : <NotificationImg />}
         <Text
           variant="h5-semibold"
           color="text-primary"