Opt-In is now working in guest mode

src/App.tsx

@@ -55,6 +55,7 @@ import {
 } from '@pushprotocol/uiweb';
 import SpaceComponentContextProvider from 'contexts/SpaceComponentsContext';
 import { useUpdateTheme } from '@web3-onboard/react';
+import { GlobalContext } from 'contexts/GlobalContext';
 
 dotenv.config();
 
@@ -76,7 +77,7 @@ export interface IUseSpaceReturnValues {
 
 export default function App() {
  const dispatch = useDispatch();
- const {setReadOnlyWallet,readOnlyWallet} = useContext(AppContext);
+ const {setReadOnlyWallet,readOnlyWallet} = useContext(GlobalContext);
 
  const { isActive, account, chainId, provider } = useAccount();
  const [currentTime, setcurrentTime] = React.useState(0);
@@ -111,29 +112,6 @@ export default function App() {
  dispatch(resetUserSlice());
  }, [account]);
 
- useEffect(() => {
- const librarySigner = provider?.getSigner(account);
- if (!account || !librarySigner || !appConfig?.appEnv || userPushSDKInstance) return;
-
- const initializePushSDK = async () => {
- try {
- const userInstance = await PushAPI.initialize(librarySigner, {
- env: appConfig.appEnv, // defaults to staging
- account: ''
- });
- // const userInstance = await PushAPI.initialize({
- // account: `0x0000000000000000000000000000000000000000`,
- // env: appConfig.appEnv,
- // });
-
- dispatch(setUserPushSDKInstance(userInstance));
- } catch (error) {
- // Handle initialization error
- }
- };
-
- initializePushSDK();
- }, [account, provider]);
 
  // console.log(isActive, chainId, account);
  // handle logic to reconnect in response to certain events from the provider

src/AppLogin.tsx

@@ -31,14 +31,16 @@ 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';
 
 const AppLogin = ({ toggleDarkMode }) => {
  // React GA Analytics
  ReactGA.pageview('/login');
 
  // Web3 React logic
- const { isActive, connect,wallet } = useAccount();
- const { setReadOnlyWallet, readOnlyWallet, web3NameList } = useContext(AppContext);
+ const { isActive, connect, wallet } = useAccount();
+ const { web3NameList } = useContext(AppContext);
+ const { setReadOnlyWallet, readOnlyWallet, setReadOnlyWalletMode } = useContext(GlobalContext);
  const { authError, setAuthError } = useContext(ErrorContext);
  const [errorMessage, setErrorMessage] = React.useState(undefined);
  const [modalHeight, setModalHeight] = React.useState(0);
@@ -69,8 +71,10 @@ const AppLogin = ({ toggleDarkMode }) => {
  try {
  setAuthError(undefined);
  setTimeout(() => {
- if(!readOnlyWallet){
+ if (!readOnlyWallet) {
  connect();
+ setModalHeight(undefined);
+ setModalWidth(undefined);
  }
  setTimeout(() => {
  const onboardModal = document.getElementById("onboard-container");
@@ -79,28 +83,28 @@ const AppLogin = ({ toggleDarkMode }) => {
  setModalWidth(onboardModal.offsetWidth);
  });
 
- if(!readOnlyWallet){
+ if (!readOnlyWallet) {
  onboardModal.style.display = 'block';
  observer.observe(onboardModal);
- }else{
+ } else {
  onboardModal.style.display = 'none';
  observer.unobserve(onboardModal);
  observer.disconnect();
  }
- 
+
  }, 500)
  }, 500);
  }
  catch (error) {
- console.log("Error !!!!! >>>>>>>",error);
+ console.log("Error !!!!! >>>>>>>", error);
  setAuthError(error);
  }
  return () => {
  observer?.disconnect();
  }
  }, [isActive]);
 
- const handleConnectWallet = ()=>{
+ const handleConnectWallet = () => {
  connect();
  }
 
@@ -116,13 +120,15 @@ const AppLogin = ({ toggleDarkMode }) => {
  if (walletAddress) {
  const isWallet = ethers.utils.isAddress(walletAddress);
  if (isWallet) {
+ setReadOnlyWalletMode(ReadOnlyWalletMode.READ_ONLY_MODE);
  setReadOnlyWallet(walletAddress);
  }
  }
  }
 
- const initiateGuestModa = ()=>{
+ const initiateGuestModa = () => {
  const guestModeAddress = '0x0000000000000000000000000000000000000000';
+ setReadOnlyWalletMode(ReadOnlyWalletMode.GUEST_MODE);
  setReadOnlyWallet(guestModeAddress);
  }
 

src/components/Dropdown.tsx

@@ -1,13 +1,15 @@
 // React + Web3 Essentials
 import { shortenText } from 'helpers/UtilityHelper';
-import React from 'react';
+import React, { useContext } from 'react';
 import { Link } from 'react-router-dom';
 
 // External Packages
 import styled, { useTheme } from 'styled-components';
 
 // Internal Components
 import { A, Image, ItemH, Span } from '../primaries/SharedStyling';
+import { GlobalContext } from 'contexts/GlobalContext';
+import { SpanV2 } from './reusables/SharedStylingV2';
 
 export type DropdownValueType = {
  id: number|string,
@@ -31,6 +33,7 @@ type DropdownProps = {
 function Dropdown({ dropdownValues, textColor, iconFilter, hoverBGColor }: DropdownProps) {
 
  const theme = useTheme();
+ const {readOnlyWalletMode} = useContext(GlobalContext);
 
  const getTextColor = (dropdownValue:DropdownValueType) => {
  return dropdownValue.textColor ? dropdownValue.textColor:textColor? textColor : theme.snackbarBorderText;
@@ -72,9 +75,11 @@ function Dropdown({ dropdownValues, textColor, iconFilter, hoverBGColor }: Dropd
  spacing="1px"
  width="max-content"
  >
- <DesktopAddress>{dropdownValue?.title}</DesktopAddress>
+ <DesktopAddress>{dropdownValue?.title} <SpanV2 fontWeight='600' margin='0 0 0 2px'>{readOnlyWalletMode}</SpanV2></DesktopAddress> 
+
  <MobileAddress>
- {shortenText(dropdownValue?.title,6)}
+ {shortenText(dropdownValue?.title,3)} 
+ <SpanV2 fontWeight='600' margin='0 0 0 2px'>{readOnlyWalletMode}</SpanV2>
  </MobileAddress>
  </Span>
  {dropdownValue?.invertedIcon && (
@@ -181,6 +186,7 @@ const SpanAddress = styled(Span)`
  width: max-content;
 `;
 const MobileAddress = styled(SpanAddress)`
+margin: 11px 0px 11px 2px;
  @media (min-width: 993px) {
  display: none;
  }

src/components/ProfileModal.tsx

@@ -1,9 +1,11 @@
-import React from 'react';
+import React, { useContext } from 'react';
 import styled, { useTheme } from "styled-components";
 
 import { A, Button, Image, Item, ItemH, Span} from 'primaries/SharedStyling';
 import { BsXLg } from 'react-icons/bs'
 import { shortenText } from 'helpers/UtilityHelper';
+import { SpanV2 } from './reusables/SharedStylingV2';
+import { GlobalContext } from 'contexts/GlobalContext';
 
 
 const ProfileModal = ({ showDropdown, setShowDropdown, dropdownValues })=>{
@@ -13,6 +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);
  // useClickAway(containerRef, () => onClose())
 
  return(
@@ -41,8 +44,8 @@ const ProfileModal = ({ showDropdown, setShowDropdown, dropdownValues })=>{
  width="max-content"
  >
  <MobileAddress>
- {shortenText(dropdownValue?.title,6)}
-
+ {shortenText(dropdownValue?.title,3)}
+  <SpanV2 fontWeight='600' margin='0 0 0 2px'>{readOnlyWalletMode}</SpanV2>
  </MobileAddress>
  </Span>
  {dropdownValue?.invertedIcon && <Image