DApp-1846 Notification toast for Channel notifications.

package.json

@@ -36,7 +36,7 @@
     "@mui/material": "^5.5.0",
     "@pushprotocol/restapi": "1.7.25",
     "@pushprotocol/socket": "0.5.3",
-    "@pushprotocol/uiweb": "1.4.3",
+    "@pushprotocol/uiweb": "1.5.0",
     "@radix-ui/react-dialog": "^1.1.1",
     "@radix-ui/react-dropdown-menu": "^2.1.1",
     "@radix-ui/react-switch": "^1.1.0",

src/App.tsx

@@ -52,7 +52,7 @@ import SpaceContextProvider from 'contexts/SpaceContext';
 import { SpaceWidgetSection } from 'sections/space/SpaceWidgetSection';
 import { blocksColors, getBlocksCSSVariables, Notification } from 'blocks';
 import APP_PATHS from 'config/AppPaths';
-import { useRewardsNotification } from 'common';
+import { useInAppNotifications, useRewardsNotification } from 'common';
 
 dotenv.config();
 
@@ -338,6 +338,8 @@ export default function App() {
     location?.pathname.includes('/snap') ||
     location?.pathname.includes(APP_PATHS.DiscordVerification);
 
+  useInAppNotifications();
+
   return (
     <ThemeProvider theme={darkMode ? themeDark : themeLight}>
       {/* {(!isActive || !allowedChain) && (

src/blocks/notification/Notification.tsx

@@ -1,7 +1,7 @@
 import { FC } from 'react';
 import styled from 'styled-components';
-import { Cross } from '../icons';
 import { NotificationProps } from './Notification.types';
+import { Cross } from 'blocks';
 import { toast, Toaster } from 'sonner';
 import { getTextVariantStyles } from 'blocks/Blocks.utils';
 import { deviceMediaQ } from 'blocks/theme';
@@ -24,7 +24,12 @@ const NotificationContainer = styled.div`
     width: -webkit-fill-available;
   }
 `;
-
+const StyledToaster = styled(Toaster)`
+  width: 397px;
+  @media${deviceMediaQ.mobileL} {
+    width: 100%;
+  }
+`;
 const TextContainer = styled.div`
   display: flex;
   flex-direction: column;
@@ -64,37 +69,42 @@ const CloseButton = styled.div`
   right: var(--spacing-xxs);
   top: var(--spacing-xxs);
 `;
+const Container = styled.div``;
 
-const NotificationItem: FC<NotificationProps> = ({ onClose, title, description, image, onClick }) => {
+const NotificationItem: FC<NotificationProps> = ({ overlay, onClose, title, description, image, onClick }) => {
   const handleNotificationClick = () => onClick?.();
-
   const handleNotificationClose = () => {
     onClose?.();
     notification.hide();
   };
-
   return (
-    <NotificationContainer onClick={handleNotificationClick}>
-      <IconContainer>{image}</IconContainer>
-      <CloseButton
-        onClick={(e) => {
-          e.stopPropagation();
-          handleNotificationClose();
-        }}
-      >
-        <Cross size={16} />
-      </CloseButton>
-      <TextContainer>
-        <NotificationTitle>{title}</NotificationTitle>
-        <NotificationDescription>{description}</NotificationDescription>
-      </TextContainer>
-    </NotificationContainer>
+    <Container onClick={handleNotificationClick}>
+      {overlay ? (
+        <>{overlay}</>
+      ) : (
+        <NotificationContainer>
+          {image && <IconContainer>{image}</IconContainer>}
+          <CloseButton
+            onClick={(e) => {
+              e.stopPropagation();
+              handleNotificationClose();
+            }}
+          >
+            <Cross size={16} />
+          </CloseButton>
+          <TextContainer>
+            <NotificationTitle>{title}</NotificationTitle>
+            <NotificationDescription>{description}</NotificationDescription>
+          </TextContainer>
+        </NotificationContainer>
+      )}
+    </Container>
   );
 };
 
 const Notification = () => {
   return (
-    <Toaster
+    <StyledToaster
       offset={15}
       visibleToasts={5}
     />

src/blocks/notification/Notification.types.ts

@@ -1,18 +1,19 @@
 import { ReactNode } from 'react';
 
 export type NotificationProps = {
-  /* Svg React component to be passed as the image. */
-  image: ReactNode;
+  image?: ReactNode;
   /* Title of the notification */
-  title: string;
+  title?: string;
   /* Description of the notification */
-  description: string;
-  /* Optional onClick event for the notification */
-  onClick?: () => void;
+  description?: string;
   /* Optional onClose action for the notification */
   onClose?: () => void;
+  /* Custom React component to be passed as the image. */
+  overlay?: ReactNode;
+  /* Optional onClick event for the notification */
+  onClick?: () => void;
   /* Position of the notification */
-  position?: 'bottom-right' | 'bottom-left';
+  position?: 'bottom-right' | 'bottom-left' | 'top-center';
   /* Optional duration of the notification component */
   duration?: number;
 };

src/common/Common.form.ts

@@ -1,6 +1,7 @@
 export const URLRegex = /^(http:\/\/|https:\/\/|www\.)?([\w-]+\.)+[\w-]{2,}(\/[\w.-]*)*\/?$/;
 
 export const getRequiredFieldMessage = (name: string) => `${name} is required.`;
+export const getValidURLMessage = (name: string) => `${name} is invalid.`;
 
 export const getMaxCharLimitFieldMessage = (limit: number) => `Maximum ${limit} characters allowed.`;
 

src/common/Common.utils.tsx

@@ -11,3 +11,17 @@ export const getSelectChains = (chainIdList: Array<number>) => {
     };
   });
 };
+
+export const isValidURL = (str: string | undefined) => {
+  if (!str) return false;
+  const pattern = new RegExp(
+    '^(https?:\\/\\/)' + // protocol
+      '((([a-z\\d]([a-z\\d-]*[a-z\\d])*)\\.)+[a-z]{2,}|' + // domain name
+      '((\\d{1,3}\\.){3}\\d{1,3}))' + // OR ip (v4) address
+      '(\\:\\d+)?(\\/[-a-z\\d%_.~+]*)*' + // port and path
+      '(\\?[;&a-z\\d%_.~+=-]*)?' + // query string
+      '(\\S*)?$',
+    'i'
+  ); // fragment locator
+  return !!pattern.test(str);
+};

src/common/components/InAppChannelNotifications.tsx

@@ -0,0 +1,44 @@
+import { NotificationEvent } from '@pushprotocol/restapi';
+import { NotificationItem, chainNameType } from '@pushprotocol/uiweb';
+import { Box, Link, notification } from 'blocks';
+import { useBlocksTheme } from 'blocks/Blocks.hooks';
+import APP_PATHS from 'config/AppPaths';
+import { FC } from 'react';
+
+type InAppNotificationsProps = {
+  notificationDetails: NotificationEvent | null;
+};
+
+const InAppChannelNotifications: FC<InAppNotificationsProps> = ({ notificationDetails }) => {
+  const payload = notificationDetails?.message?.payload;
+  const { mode } = useBlocksTheme();
+  return (
+    <Link
+      to={payload?.cta || APP_PATHS.Inbox}
+      target="_blank"
+    >
+      <Box
+        display="flex"
+        width="397px"
+      >
+        {notificationDetails && (
+          <NotificationItem
+            isToast
+            onClose={() => notification.hide()}
+            notificationTitle={payload?.title}
+            notificationBody={payload?.body}
+            cta={payload?.cta}
+            image={payload?.embed}
+            app={notificationDetails?.channel?.name}
+            icon={notificationDetails?.channel?.icon}
+            url={notificationDetails?.channel?.url}
+            chainName={notificationDetails?.source as chainNameType}
+            theme={mode}
+          />
+        )}
+      </Box>
+    </Link>
+  );
+};
+
+export { InAppChannelNotifications };

src/common/components/index.ts

@@ -5,3 +5,4 @@ export * from './UnsubscribeChannelDropdown';
 export * from './ModalHeader';
 export * from './StakingVariant';
 export * from './TokenFaucet';
+export * from './InAppChannelNotifications';

src/common/hooks/index.ts

@@ -2,3 +2,4 @@ export { useIsVisible } from './useIsVisible';
 export { usePushStakingStats } from './usePushStakingStats';
 export { useRewardsNotification } from './useRewardsNotification';
 export { useDisclosure } from './useDisclosure';
+export { useInAppNotifications } from './useInAppNotifications';

src/common/hooks/useInAppNotifications.tsx

@@ -0,0 +1,68 @@
+import { useEffect, useState } from 'react';
+
+import { CONSTANTS, NotificationEvent } from '@pushprotocol/restapi';
+import { useSelector } from 'react-redux';
+
+import { deviceSizes, notification } from 'blocks';
+import { InAppChannelNotifications } from 'common';
+
+import { useDeviceWidthCheck } from 'hooks';
+
+export const useInAppNotifications = () => {
+  const [isStreamConnected, setIsStreamConnected] = useState<boolean>(false);
+  const isMobile = useDeviceWidthCheck(parseInt(deviceSizes.mobileL));
+  const { userPushSDKInstance } = useSelector((state: any) => {
+    return state.user;
+  });
+  const attachListeners = async () => {
+    userPushSDKInstance?.stream?.on(CONSTANTS.STREAM.CONNECT, (err: Error) => {
+      console.debug(
+        'src::common::hooks::useStream::attachListeners::CONNECT::',
+        userPushSDKInstance?.uid,
+        userPushSDKInstance?.stream?.uid,
+        userPushSDKInstance?.stream
+      );
+      setIsStreamConnected(true);
+    });
+
+    userPushSDKInstance?.stream?.on(CONSTANTS.STREAM.DISCONNECT, (err: Error) => {
+      console.debug(
+        'src::common::hooks::useStream::attachListeners::DISCONNECT::',
+        userPushSDKInstance?.uid,
+        userPushSDKInstance?.stream?.uid,
+        userPushSDKInstance?.stream
+      );
+      setIsStreamConnected(false);
+    });
+    userPushSDKInstance?.stream?.on(CONSTANTS.STREAM.NOTIF, (data: NotificationEvent) => {
+      console.debug(
+        'src::common::hooks::useStream::attachListeners::NOTIF::',
+        userPushSDKInstance,
+        userPushSDKInstance?.uid,
+        userPushSDKInstance?.stream?.uid,
+        userPushSDKInstance?.stream
+      );
+      notification.show({
+        overlay: <InAppChannelNotifications notificationDetails={data} />,
+        position: isMobile ? 'top-center' : 'bottom-right',
+        duration: 5000,
+        onClick: () => {
+          notification.hide();
+        },
+      });
+    });
+  };
+
+  useEffect(() => {
+    (async () => {
+      if (userPushSDKInstance && userPushSDKInstance?.stream) {
+        await attachListeners();
+      }
+    })();
+
+    // Cleanup listener on unmount
+    return () => {};
+  }, [userPushSDKInstance?.account]);
+
+  return { isStreamConnected };
+};

src/contexts/AppContext.tsx

@@ -234,6 +234,8 @@ const AppContextProvider = ({ children }: { children: ReactNode }) => {
       alpha: { feature: ['SCALABILITY_V2'] },
     });
 
+    // sets up stream in read mode
+    await setupStream(userInstance);
     console.debug('src::contexts::AppContext::initializePushSdkReadMode::User Instance Initialized', userInstance);
     dispatch(setUserPushSDKInstance(userInstance));
     return userInstance;
@@ -300,21 +302,19 @@ const AppContextProvider = ({ children }: { children: ReactNode }) => {
 
   const setupStream = async (userInstance: any) => {
     // Connect stream as well
-    const stream = await userInstance.initStream([
-      CONSTANTS.STREAM.CONNECT,
-      CONSTANTS.STREAM.DISCONNECT,
-      CONSTANTS.STREAM.CHAT,
-      CONSTANTS.STREAM.CHAT_OPS,
-      CONSTANTS.STREAM.NOTIF,
-      CONSTANTS.STREAM.VIDEO,
-    ]);
-
-    stream.on(CONSTANTS.STREAM.CONNECT, () => {
-      console.debug('src::contexts::AppContext::setupStream::CONNECT::');
-    });
-
-    await stream.connect();
-    console.debug('src::contexts::AppContext::setupStream::User Intance Stream Connected', userInstance);
+    if (!userInstance.stream) {
+      const stream = await userInstance.initStream([
+        CONSTANTS.STREAM.CONNECT,
+        CONSTANTS.STREAM.DISCONNECT,
+        CONSTANTS.STREAM.CHAT,
+        CONSTANTS.STREAM.CHAT_OPS,
+        CONSTANTS.STREAM.NOTIF,
+        CONSTANTS.STREAM.VIDEO,
+      ]);
+
+      if (userInstance.readmode()) await stream.connect();
+      console.debug('src::contexts::AppContext::setupStream::User Intance Stream Connected', userInstance);
+    }
   };
 
   // To reformat errors

src/hooks/useStream.ts

@@ -8,7 +8,6 @@ import {
 import { VideoCallContext } from 'contexts/VideoCallContext';
 import { ADDITIONAL_META_TYPE } from '@pushprotocol/restapi/src/lib/payloads';
 import { VideoCallStatus } from '@pushprotocol/restapi';
-import { showNotifcationToast } from 'components/reusables/toasts/toastController';
 import { useSelector } from 'react-redux';
 
 const useSDKStream = () => {
@@ -60,8 +59,6 @@ const useSDKStream = () => {
                 retry: true,
               });
             }
-          } else {
-            showNotifcationToast(feedItem);
           }
         }
       } catch (e) {
@@ -73,9 +70,13 @@ const useSDKStream = () => {
   useEffect(() => {
     if (userPushSDKInstance?.signer) {
       (async () => {
-        const stream = await userPushSDKInstance.initStream([STREAM.CONNECT, STREAM.DISCONNECT, STREAM.NOTIF]);
-        stream.connect();
-        setStream(stream);
+        if (userPushSDKInstance?.stream && !userPushSDKInstance?.stream?.disconnected) {
+          setStream(userPushSDKInstance?.stream);
+        } else {
+          const stream = await userPushSDKInstance.initStream([STREAM.CONNECT, STREAM.DISCONNECT, STREAM.NOTIF]);
+          stream.connect();
+          setStream(stream);
+        }
       })();
     }
   }, [userPushSDKInstance]);