OptIn, Opt Out, send notification and Create Channel guest mode

src/AppLogin.tsx

@@ -31,7 +31,7 @@ import { Button, Input, Span } from 'primaries/SharedStyling';
 import { AppContext } from 'contexts/AppContext';
 import { ethers } from 'ethers';
 import { useResolveWeb3Name } from 'hooks/useResolveWeb3Name';
-import { GlobalContext, ReadOnlyWalletMode } from 'contexts/GlobalContext';
+import { GlobalContext } from 'contexts/GlobalContext';
 
 const AppLogin = ({ toggleDarkMode }) => {
   // React GA Analytics
@@ -40,7 +40,7 @@ const AppLogin = ({ toggleDarkMode }) => {
   // Web3 React logic
   const { isActive, connect, wallet } = useAccount();
   const { web3NameList } = useContext(AppContext);
-  const { setReadOnlyWallet, readOnlyWallet, setReadOnlyWalletMode } = useContext(GlobalContext);
+  const { setReadOnlyWallet, readOnlyWallet, setMode } = useContext(GlobalContext);
   const { authError, setAuthError } = useContext(ErrorContext);
   const [errorMessage, setErrorMessage] = React.useState(undefined);
   const [modalHeight, setModalHeight] = React.useState(0);
@@ -120,27 +120,27 @@ const AppLogin = ({ toggleDarkMode }) => {
     if (walletAddress) {
       const isWallet = ethers.utils.isAddress(walletAddress);
       if (isWallet) {
-        setReadOnlyWalletMode(ReadOnlyWalletMode.READ_ONLY_MODE);
+        setMode('(Read Only)')
         setReadOnlyWallet(walletAddress);
       }
     }
   }
 
   const initiateGuestModa = () => {
     const guestModeAddress = '0x0000000000000000000000000000000000000000';
-    setReadOnlyWalletMode(ReadOnlyWalletMode.GUEST_MODE);
+    setMode('(Guest Mode)');
     setReadOnlyWallet(guestModeAddress);
   }
 
   const RenderGuestMode = () => {
     return (
       <div style={{ maxWidth: '768px' }}>
-        <GuestContainer padding='24px' gap='13px' background='#FFF' borderRadius='24px'>
+        <GuestContainer padding='24px' gap='13px' background={theme.modalSearchBarBackground} borderRadius='24px'>
           <ItemHV2 justifyContent='flex-start' gap='2px'>
-            <H2 margin='0px' size='20px' weight='500'>Read-Only Mode</H2>
+            <H2 margin='0px' size='20px' weight='500' color={theme.default.secondaryColor}>Read-Only Mode</H2>
             <InfoLogo width='20px' height='20px' />
           </ItemHV2>
-          <ItemHV2 gap='8px'>
+          <InputContainer>
 
             <Input
               autoFocus
@@ -150,9 +150,10 @@ const AppLogin = ({ toggleDarkMode }) => {
               padding="13px 16px"
               maxllength="300px"
               size="16px"
-              bg="white"
+              bg={theme.default.bg}
               height="auto"
-              border="1px solid #BAC4D6;"
+              border={`1px solid ${theme.stakingBorder}`}
+              color={theme.editChannelPrimaryText}
               focusBorder="1px solid #657795"
               radius="12px"
               placeholder='Enter wallet address'
@@ -163,10 +164,10 @@ const AppLogin = ({ toggleDarkMode }) => {
 
             <ButtonsContainer>
               <FilledButton onClick={initiateReadOnlyMode}>Read Only Mode</FilledButton>
-              <Span>Or</Span>
+              <Span color={theme.default.color}>Or</Span>
               <EmptyButton onClick={initiateGuestModa}>Continue as Guest</EmptyButton>
             </ButtonsContainer>
-          </ItemHV2>
+          </InputContainer>
         </GuestContainer>
       </div>
     )
@@ -216,43 +217,43 @@ const AppLogin = ({ toggleDarkMode }) => {
           {theme.scheme == 'dark' && <PushLogoDark />}
         </ItemVV2>
 
-        {modalHeight !== 0 &&
-          <ItemVV2 margin={`${modalHeight + 20}px 0 0 0`} flex="initial" maxWidth="920px">
-
-            <RenderGuestMode />
+        {/* {modalHeight !== 0 && */}
+        <ItemVV2 margin={`${modalHeight + 20}px 0 0 0`} flex="initial" maxWidth="920px">
+
+          <RenderGuestMode />
+
+          {/* TOS and PRIVACY */}
+          <SpanV2 fontSize="14px" padding="5px 5px" color={theme.default.color} lineHeight="140%">
+            By connecting your wallet, <b>You agree</b> to our{' '}
+            <AInlineV2 href="https://epns.io/tos" target="_blank">
+              Terms of Service
+            </AInlineV2>{' '}
+            and our{' '}
+            <AInlineV2 href="https://epns.io/privacy" target="_blank">
+              Privacy Policy
+            </AInlineV2>
+            .
+          </SpanV2>
 
-            {/* TOS and PRIVACY */}
-            <SpanV2 fontSize="14px" padding="5px 5px" color={theme.default.color} lineHeight="140%">
-              By connecting your wallet, <b>You agree</b> to our{' '}
-              <AInlineV2 href="https://epns.io/tos" target="_blank">
-                Terms of Service
+          <ItemVV2 margin="10px 0 0 0" flex="initial" maxWidth="920px">
+            <SpanV2 fontSize="14px" padding="0px 15px" lineHeight="140%" color={theme.default.color}>
+              Note: The Push Protocol has been under development for 2+ years now. It has successfully completed its latest security audits of {' '}
+              <AInlineV2 href="https://github.com/ChainSafe/audits/blob/main/EPNS/epns-protocol-05-2023.pdf" target="_blank">
+                Push Core V2
               </AInlineV2>{' '}
-              and our{' '}
-              <AInlineV2 href="https://epns.io/privacy" target="_blank">
-                Privacy Policy
+              smart contracts by Chainsafe. However, always DYOR and anticipate UI bugs or improvements. You can use our {' '}
+              <AInlineV2 href="https://zv9atndluia.typeform.com/to/KW3gwclM" target="_blank">
+                Bug Bounty Form
+              </AInlineV2>{' '}
+              to report bugs or communicate with us on our {' '}
+              <AInlineV2 href="https://discord.com/invite/pushprotocol" target="_blank">
+                Discord
               </AInlineV2>
               .
             </SpanV2>
-
-            <ItemVV2 margin="10px 0 0 0" flex="initial" maxWidth="920px">
-              <SpanV2 fontSize="14px" padding="0px 15px" lineHeight="140%" color={theme.default.color}>
-                Note: The Push Protocol has been under development for 2+ years now. It has successfully completed its latest security audits of {' '}
-                <AInlineV2 href="https://github.com/ChainSafe/audits/blob/main/EPNS/epns-protocol-05-2023.pdf" target="_blank">
-                  Push Core V2
-                </AInlineV2>{' '}
-                smart contracts by Chainsafe. However, always DYOR and anticipate UI bugs or improvements. You can use our {' '}
-                <AInlineV2 href="https://zv9atndluia.typeform.com/to/KW3gwclM" target="_blank">
-                  Bug Bounty Form
-                </AInlineV2>{' '}
-                to report bugs or communicate with us on our {' '}
-                <AInlineV2 href="https://discord.com/invite/pushprotocol" target="_blank">
-                  Discord
-                </AInlineV2>
-                .
-              </SpanV2>
-            </ItemVV2>
           </ItemVV2>
-        }
+        </ItemVV2>
+        {/* } */}
       </ItemVV2>
     </Container>
   );
@@ -278,21 +279,31 @@ const LoginButton = styled(ButtonV2)`
 `
 
 const GuestContainer = styled(ItemVV2)`
-  // @media ${device.tablet} {
-  //   flex-direction:column;
-  // }
+
 `
 
+const InputContainer = styled(ItemHV2)`
+  gap:8px;
+  @media ${device.mobileL} {
+    flex-direction:column;
+    gap:14px;
+  }
+
+  @media (max-width:600px) {
+    flex-direction:column;
+  }
+`
 
 const ButtonsContainer = styled.div`
   display:flex;
   flex-direction:row;
   gap:8px;
   align-items:center;
 
-  // @media ${device.tablet} {
-  //   flex-direction:column;
-  // }
+  @media ${device.mobileL} {
+    flex-direction:column;
+    width:100%;
+  }
 
 `
 
@@ -313,17 +324,20 @@ const FilledButton = styled(ButtonV2)`
     @media(max-width:600px){
         font-size: 14px;
     }
+    @media ${device.mobileL} {
+      width:100%;
+    }
 
 `;
 
 const EmptyButton = styled(ButtonV2)`
     font-size: 16px;
     line-height: 19px;
     flex-direction:row;
-    border: 1px solid #BAC4D6;
+    border: 1px solid  ${(props) => props.theme.stakingBorder};
     flex:1;
     padding: 13px 0px;
-    background:#fff;
+    background:${(props) => props.theme.modalSearchBarBackground};
     color:#657795;
     width:175px;
     border-radius: 15px;
@@ -341,4 +355,9 @@ const EmptyButton = styled(ButtonV2)`
     @media(max-width:600px){
         font-size: 14px;
     }
+    @media ${device.mobileL} {
+      width:100%;
+    }
+
+
 `

src/components/Dropdown.tsx

@@ -33,7 +33,7 @@ type DropdownProps = {
 function Dropdown({ dropdownValues, textColor, iconFilter, hoverBGColor }: DropdownProps) {
 
   const theme = useTheme();
-  const {readOnlyWalletMode} = useContext(GlobalContext);
+  const {getMode} = useContext(GlobalContext);
 
   const getTextColor = (dropdownValue:DropdownValueType) => {
     return dropdownValue.textColor ? dropdownValue.textColor:textColor? textColor : theme.snackbarBorderText;
@@ -75,11 +75,11 @@ function Dropdown({ dropdownValues, textColor, iconFilter, hoverBGColor }: Dropd
               spacing="1px"
               width="max-content"
             >
-              <DesktopAddress>{dropdownValue?.title} <SpanV2 fontWeight='600' margin='0 0 0 2px'>{readOnlyWalletMode}</SpanV2></DesktopAddress> 
+              <DesktopAddress>{dropdownValue?.title} <SpanV2 fontWeight='600' margin='0 0 0 2px'>{getMode}</SpanV2></DesktopAddress> 
 
               <MobileAddress>
                 {shortenText(dropdownValue?.title,3)} 
-                <SpanV2 fontWeight='600' margin='0 0 0 2px'>{readOnlyWalletMode}</SpanV2>
+                <SpanV2 fontWeight='600' margin='0 0 0 2px'>{getMode}</SpanV2>
               </MobileAddress>
             </Span>
             {dropdownValue?.invertedIcon && (

src/components/ProfileModal.tsx

@@ -15,7 +15,7 @@ const ProfileModal = ({ showDropdown, setShowDropdown, dropdownValues })=>{
 
     // to close the modal upon a click on backdrop
     // const containerRef = React.useRef(null);
-    const {readOnlyWalletMode} = useContext(GlobalContext);
+    const {getMode} = useContext(GlobalContext);
     // useClickAway(containerRef, () => onClose())
 
     return(
@@ -45,7 +45,7 @@ const ProfileModal = ({ showDropdown, setShowDropdown, dropdownValues })=>{
             >
               <MobileAddress>
                 {shortenText(dropdownValue?.title,3)}
-                <SpanV2 fontWeight='600' margin='0 0 0 2px'>{readOnlyWalletMode}</SpanV2>
+                <SpanV2 fontWeight='600' margin='0 0 0 2px'>{getMode}</SpanV2>
               </MobileAddress>
             </Span>
            {dropdownValue?.invertedIcon && <Image

src/components/SendNotifications.tsx

@@ -1,5 +1,5 @@
 // React + Web3 Essentials
-import React, { useEffect, useMemo, useState } from 'react';
+import React, { useContext, useEffect, useMemo, useState } from 'react';
 
 // External Packages
 import Switch from '@material-ui/core/Switch';
@@ -37,6 +37,7 @@ import { appConfig } from 'config';
 import { useAccount, useDeviceWidthCheck } from 'hooks';
 import APP_PATHS from 'config/AppPaths';
 import Tag from './reusables/labels/Tag';
+import { AppContext } from 'contexts/AppContext';
 
 // Constants
 const CORE_CHAIN_ID = appConfig.coreContractChain;
@@ -126,7 +127,7 @@ function SendNotifications() {
     return state.canSend;
   });
   const onCoreNetwork = CORE_CHAIN_ID === chainId;
-
+const {handleConnectWallet} = useContext(AppContext);
   const [nfProcessing, setNFProcessing] = useState(0);
   const [channelAddress, setChannelAddress] = useState('');
   const [nfRecipient, setNFRecipient] = useState(account);
@@ -296,6 +297,18 @@ function SendNotifications() {
   const handleSendMessage = async (e) => {
     // Check everything in order
     e.preventDefault();
+    console.log("User push sdk instance",userPushSDKInstance);
+
+    if (!userPushSDKInstance.signer) {
+      notificationToast.showMessageToast({
+        toastTitle: 'Error',
+        toastMessage: 'Your wallet is not connected.Please Connect.',
+        toastType: 'ERROR',
+        getToastIcon: (size) => <MdError size={size} color="red" />,
+      });
+      handleConnectWallet();
+      return;
+    }
 
     notificationToast.showLoaderToast({
       loaderMessage: 'Preparing Notification',

src/components/channel/NotificationSettings.tsx

@@ -47,6 +47,7 @@ function NotificationSettings() {
   const [settingToEdit, setSettingToEdit] = React.useState<ChannelSetting>(undefined);
   const [isLoading, setIsLoading] = React.useState(false);
   const [isLoadingSettings, setIsLoadingSettings] = React.useState(true);
+  const {handleConnectWallet} = useContext(AppContext);
 
   const { userPushSDKInstance } = useSelector((state: any) => {
     return state.user;
@@ -131,6 +132,18 @@ function NotificationSettings() {
 
   const saveSettings = async () => {
     try {
+
+      if (!userPushSDKInstance.signer) {
+        notificationToast.showMessageToast({
+          toastTitle: 'Error',
+          toastMessage: 'Your wallet is not connected.Please Connect.',
+          toastType: 'ERROR',
+          getToastIcon: (size) => <MdError size={size} color="red" />,
+        });
+        handleConnectWallet();
+        return;
+      }
+
       setIsLoading(true);
 
       notificationToast.showLoaderToast({ loaderMessage: 'Waiting for Confirmation...' });

src/components/dropdowns/ManageNotifSettingDropdown.tsx

@@ -111,6 +111,7 @@ const ManageNotifSettingDropdown: React.FC<ManageNotifSettingDropdownProps> = (o
     return state.user;
   });
   const dispatch = useDispatch();
+  const {handleConnectWallet} = useContext(AppContext);
 
   const channelSetting = useMemo(() => {
     if(channelDetail && channelDetail?.channel_settings) {
@@ -132,6 +133,18 @@ const ManageNotifSettingDropdown: React.FC<ManageNotifSettingDropdownProps> = (o
   const unsubscribeToast = useToast();
   const optOutHandler = async ({ setLoading }: { setLoading?: React.Dispatch<React.SetStateAction<boolean>> }) => {
     const setLoadingFunc = setLoading || (() => {});
+
+    if (!userPushSDKInstance.signer) {
+      unsubscribeToast.showMessageToast({
+        toastTitle: 'Error',
+        toastMessage: 'Your wallet is not connected.Please Connect.',
+        toastType: 'ERROR',
+        getToastIcon: (size) => <MdError size={size} color="red" />,
+      });
+      handleConnectWallet();
+      return;
+    }
+
     setLoadingFunc(true);
 
     try {