diff --git a/src/App.tsx b/src/App.tsx index 07e5a4bf84..e06d7e444b 100644 --- a/src/App.tsx +++ b/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(AppContext); @@ -347,11 +348,7 @@ export default function App() { <> - + = (allProps) => { +const NotificationImg: FC = (allProps) => { const { svgProps: props, ...restProps } = allProps; return ( = (allProps) => { ); }; -export default Notification; +export default NotificationImg; diff --git a/src/blocks/illustrations/index.ts b/src/blocks/illustrations/index.ts index f518202178..a3593c8624 100644 --- a/src/blocks/illustrations/index.ts +++ b/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'; diff --git a/src/blocks/index.ts b/src/blocks/index.ts index 48a2060dc8..9568da301d 100644 --- a/src/blocks/index.ts +++ b/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'; diff --git a/src/blocks/notification/Notification.tsx b/src/blocks/notification/Notification.tsx index 536e252b19..fc0ee1853b 100644 --- a/src/blocks/notification/Notification.tsx +++ b/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 = ({ onClose, title, description, image, onClick }) => { +const NotificationItem: FC = ({ onClose, title, description, image, onClick }) => { const handleNotificationClick = () => onClick?.(); const handleNotificationClose = () => { @@ -88,13 +88,23 @@ const Notification: FC = ({ onClose, title, description, imag ); }; +const Notification = () => { + return ( + + ); +}; + // Store the toastId(s) in an array to manage multiple notifications const toastIds: Array = []; // Export the notification object with show and hide methods const notification = { show: (config: NotificationProps) => { - const toastId = toast.custom(() => , { + const toastId = toast.custom(() => , { duration: config.duration || Infinity, position: config.position || 'bottom-right', }); @@ -108,4 +118,4 @@ const notification = { }, }; -export { notification }; +export { notification, Notification }; diff --git a/src/common/hooks/useRewardsNotification.tsx b/src/common/hooks/useRewardsNotification.tsx new file mode 100644 index 0000000000..ac19970fc6 --- /dev/null +++ b/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: , + 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]); +}; diff --git a/src/modules/dashboard/components/DashboardSubHeader.tsx b/src/modules/dashboard/components/DashboardSubHeader.tsx index 01c44b7573..d4ad2d3cbe 100644 --- a/src/modules/dashboard/components/DashboardSubHeader.tsx +++ b/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 = () => { alignItems="center" width={{ tb: '-webkit-fill-available', initial: 'inherit' }} > - {mode === 'dark' ? : } + {mode === 'dark' ? : }