Phase 3 of Guest Mode (#1423)

* Phase 3 of Guest Mode * Updated read mode feature * Chat is fixed for Guest Mode and sort imports is fixed * Fixed the infinte render issue * Fixed the Opt-in/opt-out and other flow for guest mode
push-protocol · Feb 22, 2024 · f57813e · f57813e
1 parent d35a432
commit f57813e
Show file tree

Hide file tree

Showing 15 changed files with 233 additions and 201 deletions.
diff --git a/src/App.tsx b/src/App.tsx
@@ -101,6 +101,7 @@ const extendConsole = () => {
 extendConsole();
 
 // Disable consolve
+
 if (appConfig?.appEnv === "prod") {
  console.enable("debug", false);
  console.enable("log", false);
@@ -259,78 +260,81 @@ export default function App() {
 
  return (
  <ThemeProvider theme={darkMode ? themeDark : themeLight}>
- {(!isActive || !allowedChain) && (
- <SectionV2 minHeight="100vh">
- <AppLogin toggleDarkMode={toggleDarkMode} />
- </SectionV2>
- )}
-
-
- {isActive && !authError && allowedChain && (
- <>
- <GlobalStyle />
- <InitState />
- <NavigationContextProvider>
- <SpaceContextProvider>
- <SpaceComponentContextProvider spaceUI={spaceUI}>
- <Joyride
- run={run}
- steps={steps}
- continuous={tutorialContinous}
- stepIndex={stepIndex}
- // hideFooter={true}
- // primaryProps={false}
- hideBackButton={true}
- hideCloseButton={false}
- disableScrolling={true}
- disableScrollParentFix={true}
- // disableFlip={true}
- // showNextButton={false}
- showSkipButton={false}
- disableOverlayClose={true}
- callback={handleJoyrideCallback}
- styles={{
- options: {
- arrowColor: darkMode ? themeDark.dynamicTutsBg : themeLight.dynamicTutsBg,
- backgroundColor: darkMode ? themeDark.dynamicTutsBg : themeLight.dynamicTutsBg,
- overlayColor: darkMode ? themeDark.dynamicTutsBgOverlay : themeLight.dynamicTutsBgOverlay,
- primaryColor: darkMode ? themeDark.dynamicTutsPrimaryColor : themeLight.dynamicTutsPrimaryColor,
- textColor: darkMode ? themeDark.dynamicTutsFontColor : themeLight.dynamicTutsFontColor,
- zIndex: 1000,
- },
- }}
- />
-
- <HeaderContainer>
- <Header
- isDarkMode={darkMode}
- darkModeToggle={toggleDarkMode}
- />
- </HeaderContainer>
-
- <ParentContainer
- bg={darkMode ? themeDark.backgroundBG : !isActive ? themeLight.connectWalletBg : themeLight.backgroundBG}
- headerHeight={GLOBALS.CONSTANTS.HEADER_HEIGHT}
- >
- {!isSnapPage &&
- <LeftBarContainer leftBarWidth={sidebarCollapsed ? GLOBALS.CONSTANTS.COLLAPSABLE_LEFT_BAR_WIDTH : GLOBALS.CONSTANTS.LEFT_BAR_WIDTH}>
- <Navigation />
- </LeftBarContainer>
- }
-
- <ContentContainer leftBarWidth={sidebarCollapsed ? GLOBALS.CONSTANTS.COLLAPSABLE_RIGHT_BAR_WIDTH : GLOBALS.CONSTANTS.LEFT_BAR_WIDTH}>
- {/* Shared among all pages, load universal things here */}
- <SpacesUIProvider spaceUI={spaceUI} theme={darkMode ? darkTheme : lightTheme}>
- <MasterInterfacePage />
- <SpaceWidgetSection />
- </SpacesUIProvider>
- </ContentContainer>
- </ParentContainer>
- </SpaceComponentContextProvider>
- </SpaceContextProvider>
- </NavigationContextProvider>
- </>
- )}
+ {/* {(!isActive || !allowedChain) && (
+ <SectionV2 minHeight="100vh">
+ <AppLogin toggleDarkMode={toggleDarkMode} />
+ </SectionV2>
+ )} */}
+
+ <>
+ <GlobalStyle />
+ <InitState />
+ <NavigationContextProvider>
+ <SpaceContextProvider>
+ <SpaceComponentContextProvider spaceUI={spaceUI}>
+ <Joyride
+ run={run}
+ steps={steps}
+ continuous={tutorialContinous}
+ stepIndex={stepIndex}
+ // hideFooter={true}
+ // primaryProps={false}
+ hideBackButton={true}
+ hideCloseButton={false}
+ disableScrolling={true}
+ disableScrollParentFix={true}
+ // disableFlip={true}
+ // showNextButton={false}
+ showSkipButton={false}
+ disableOverlayClose={true}
+ callback={handleJoyrideCallback}
+ styles={{
+ options: {
+ arrowColor: darkMode ? themeDark.dynamicTutsBg : themeLight.dynamicTutsBg,
+ backgroundColor: darkMode ? themeDark.dynamicTutsBg : themeLight.dynamicTutsBg,
+ overlayColor: darkMode ? themeDark.dynamicTutsBgOverlay : themeLight.dynamicTutsBgOverlay,
+ primaryColor: darkMode ? themeDark.dynamicTutsPrimaryColor : themeLight.dynamicTutsPrimaryColor,
+ textColor: darkMode ? themeDark.dynamicTutsFontColor : themeLight.dynamicTutsFontColor,
+ zIndex: 1000,
+ },
+ }}
+ />
+
+ <HeaderContainer>
+ <Header
+ isDarkMode={darkMode}
+ darkModeToggle={toggleDarkMode}
+ />
+ </HeaderContainer>
+
+ <ParentContainer
+ bg={darkMode ? themeDark.backgroundBG : !isActive ? themeLight.connectWalletBg : themeLight.backgroundBG}
+ headerHeight={GLOBALS.CONSTANTS.HEADER_HEIGHT}
+ >
+ {!isSnapPage &&
+ <LeftBarContainer leftBarWidth={sidebarCollapsed ? GLOBALS.CONSTANTS.COLLAPSABLE_LEFT_BAR_WIDTH : GLOBALS.CONSTANTS.LEFT_BAR_WIDTH}>
+ <Navigation />
+ </LeftBarContainer>
+ }
+
+ <ContentContainer leftBarWidth={sidebarCollapsed ? GLOBALS.CONSTANTS.COLLAPSABLE_RIGHT_BAR_WIDTH : GLOBALS.CONSTANTS.LEFT_BAR_WIDTH}>
+ {/* Shared among all pages, load universal things here */}
+ <SpacesUIProvider spaceUI={spaceUI} theme={darkMode ? darkTheme : lightTheme}>
+ <MasterInterfacePage />
+ <SpaceWidgetSection />
+ </SpacesUIProvider>
+ </ContentContainer>
+ </ParentContainer>
+ </SpaceComponentContextProvider>
+ </SpaceContextProvider>
+ </NavigationContextProvider>
+
+ </>
+
+
+
+
+
  </ThemeProvider>
  );
 }

diff --git a/src/components/Dropdown.tsx b/src/components/Dropdown.tsx
@@ -75,11 +75,10 @@ function Dropdown({ dropdownValues, textColor, iconFilter, hoverBGColor }: Dropd
  spacing="1px"
  width="max-content"
  >
- <DesktopAddress>{dropdownValue?.title} <SpanV2 fontWeight='600' margin='0 0 0 2px'>{mode}</SpanV2></DesktopAddress> 
+ <DesktopAddress>{dropdownValue?.title}</DesktopAddress> 
 
  <MobileAddress>
  {shortenText(dropdownValue?.title,3)} 
- <SpanV2 fontWeight='600' margin='0 0 0 2px'>{mode}</SpanV2>
  </MobileAddress>
  </Span>
  {dropdownValue?.invertedIcon && (

diff --git a/src/components/NavigationButton.js b/src/components/NavigationButton.js
@@ -92,7 +92,7 @@ function NavigationButton({ item, data, sectionID, active, bg = 'none' }) {
  margin={definedMargin}
  bg={bg}
  active={active ? 1 : 0}
- onClick={disallowNavigation && handleDisallowedNav}
+ // onClick={disallowNavigation && handleDisallowedNav}
  className={data?.name?.toLowerCase()}
  >
  {data.iconFactory ? (

diff --git a/src/components/ProfileModal.tsx b/src/components/ProfileModal.tsx
@@ -45,7 +45,6 @@ const ProfileModal = ({ showDropdown, setShowDropdown, dropdownValues })=>{
  >
  <MobileAddress>
  {shortenText(dropdownValue?.title,3)}
- <SpanV2 fontWeight='600' margin='0 0 0 2px'>{mode}</SpanV2>
  </MobileAddress>
  </Span>
  {dropdownValue?.invertedIcon && <Image

diff --git a/src/config/NavigationList.js b/src/config/NavigationList.js
@@ -71,7 +71,7 @@ const NavigationList = {
  isRoute: true,
  hasMenuLogic: true,
  hidden: false,
- allowReadOnly: false,
+ // allowReadOnly: false,
  headerTag: {
  title: 'Chat',
  light: {
@@ -96,7 +96,7 @@ const NavigationList = {
  isRoute: true,
  hasMenuLogic: true,
  hidden: false,
- allowReadOnly: false,
+ // allowReadOnly: false,
  headerTag: {
  title: 'Spaces',
  light: {

diff --git a/src/connectors/web3Onboard.tsx b/src/connectors/web3Onboard.tsx
@@ -34,7 +34,7 @@ export const web3Onboard = Onboard({
  disableClose: false,
  },
  containerElements: {
- connectModal: "#onboard-container"
+ // connectModal: "#onboard-container"
  },
  wallets: [injected, walletConnect, coinbase],
  chains: chains,

diff --git a/src/contexts/AppContext.tsx b/src/contexts/AppContext.tsx
@@ -5,7 +5,7 @@ import { ProgressHookType, PushAPI } from '@pushprotocol/restapi';
 
 
 // Internal Components
-import { AppContextType, BlockedLoadingI, ConnectedPeerIDType, LocalPeerType, Web3NameListType, onboardingProgressI } from "types/context"
+import { AppContextType, BlockedLoadingI, ConnectedPeerIDType, LocalPeerType, onboardingProgressI, Web3NameListType } from "types/context"
 import { useAccount } from "hooks";
 import { appConfig } from "config";
 import { useDispatch, useSelector } from "react-redux";
@@ -23,7 +23,6 @@ export const AppContext = createContext<AppContextType | null>(null);
 const AppContextProvider = ({ children }) => {
  const { connect, provider, account, wallet, connecting } = useAccount();
  const web3onboardToast = useToast();
- const { setReadOnlyWallet, readOnlyWallet, setMode } = useContext(GlobalContext);
 
  const [web3NameList, setWeb3NameList] = useState<Web3NameListType>({});
  const [snapInstalled, setSnapInstalled] = useState(false);
@@ -56,7 +55,7 @@ const AppContextProvider = ({ children }) => {
 
  const dispatch = useDispatch();
 
- const handleConnectWallet = (showToast = false, toastMessage?: string) => {
+ const handleConnectWallet = async (showToast = false, toastMessage?: string) => {
  if (showToast) {
  web3onboardToast.showMessageToast({
  toastMessage: toastMessage || "Please connect your wallet to continue",
@@ -66,42 +65,33 @@ const AppContextProvider = ({ children }) => {
  });
  }
 
- const onboardModal = document.getElementById("onboard-container");
- onboardModal.style.display = 'block';
- // Open the onboard modal
- connect();
-
- // Create a resize observer to detect when the onboard modal is rendered
- const observer = new ResizeObserver(() => {
- const sectionElement = document.querySelector('onboard-v2')?.shadowRoot?.querySelector('.svelte-baitaa');
- const divElement = sectionElement?.querySelector('div');
- if (divElement) {
- // Disconnect the observer once the divElement is found
- observer.unobserve(onboardModal);
- observer.disconnect();
-
- // Apply custom styles
- divElement.style.position = 'fixed';
- divElement.style.top = '0px';
- divElement.style.right = '0px';
- divElement.style.height = '100vh';
- divElement.style.left = '0px';
- divElement.style.backgroundColor = 'rgba(0, 0, 0, 0.2)';
- divElement.style.backdropFilter = 'blur(5px)';
- }
- });
 
- // Start observing the DOM for changes
- observer.observe(onboardModal);
+ if (wallet?.accounts?.length > 0) {
+ await initializePushSDK();
+ } else {
+ connect();
+ }
+
  }
 
 
 
  const initialisePushSdkGuestMode = async () => {
+ console.log("Initialising Push SDK Guest Mode");
+ let userInstance;
+ userInstance = await PushAPI.initialize({
+ account: '0x0000000000000000000000000000000000000000',
+ env: appConfig.appEnv,
+ });
+ dispatch(setUserPushSDKInstance(userInstance));
+ }
+
+ const initialisePushSdkReadMode = async () => {
+ console.log("Initialising Push SDK Read Mode");
  let userInstance;
  userInstance = await PushAPI.initialize({
- account: readOnlyWallet,
  env: appConfig.appEnv,
+ account: account,
  });
  dispatch(setUserPushSDKInstance(userInstance));
  }
@@ -115,7 +105,7 @@ const AppContextProvider = ({ children }) => {
  hookInfo: progressHook,
  spinnerType: LOADER_SPINNER_TYPE.PROCESSING,
  progress: 0,
- errorMessage:''
+ errorMessage: ''
  };
 
  if (progressHook) {
@@ -184,17 +174,17 @@ const AppContextProvider = ({ children }) => {
  onboardingProgress.progress = 99;
  break;
  case "PUSH-ERROR-00":
- onboardingProgress.errorMessage="User Rejected Signature";
+ onboardingProgress.errorMessage = "User Rejected Signature";
  onboardingProgress.hookInfo.progressTitle = "User Rejected Signature";
  onboardingProgress.spinnerType = LOADER_SPINNER_TYPE.ERROR;
  break;
  case "PUSH-ERROR-01":
- onboardingProgress.errorMessage="Upgrade Failed";
+ onboardingProgress.errorMessage = "Upgrade Failed";
  onboardingProgress.hookInfo.progressTitle = "Upgrade Failed";
  onboardingProgress.spinnerType = LOADER_SPINNER_TYPE.ERROR;
  break;
  case "PUSH-ERROR-02":
- onboardingProgress.errorMessage="Decrypting Keys Failed";
+ onboardingProgress.errorMessage = "Decrypting Keys Failed";
  onboardingProgress.hookInfo.progressTitle = "Decrypting Keys Failed";
  onboardingProgress.spinnerType = LOADER_SPINNER_TYPE.ERROR;
  break;
@@ -211,18 +201,17 @@ const AppContextProvider = ({ children }) => {
  progressEnabled: onboardingProgress.progress ? true : false,
  progress: onboardingProgress.progress,
  progressNotice: onboardingProgress.hookInfo.progressInfo,
- errorMessage:onboardingProgress.errorMessage,
+ errorMessage: onboardingProgress.errorMessage,
  });
 
  };
 
  const initializePushSDK = async () => {
- console.log("Initialising Push Sdk");
  let userInstance;
  try {
  const librarySigner = provider?.getSigner(account);
- userInstance = await PushAPI.initialize(librarySigner, {
- env: appConfig.appEnv, // defaults to staging
+ userInstance = await PushAPI.initialize(librarySigner!, {
+ env: appConfig.appEnv,
  account: account,
  progressHook: onboardingProgressReformatter,
  });
@@ -245,10 +234,8 @@ const AppContextProvider = ({ children }) => {
  };
 
  const getUser = async () => {
- console.debug("getUser");
  const caip10: string = w2wHelper.walletToCAIP10({ account });
  const user = await userPushSDKInstance.info();
- console.log("User push sdk instance", userPushSDKInstance, user);
  let connectedUser: ConnectedUser;
 
  // TODO: Change this to do verification on ceramic to validate if did is valid
@@ -291,9 +278,9 @@ const AppContextProvider = ({ children }) => {
 
  useEffect(() => {
  const librarySigner = provider?.getSigner(account);
- if (!account || !appConfig?.appEnv) return;
+ // if (!account || !appConfig?.appEnv) return;
  if (wallet?.accounts?.length > 0) {
- initializePushSDK();
+ initialisePushSdkReadMode();
  } else {
  initialisePushSdkGuestMode();
  }
@@ -355,7 +342,8 @@ const AppContextProvider = ({ children }) => {
  setConnectedPeerID,
  displayQR,
  setDisplayQR,
- createUserIfNecessary
+ createUserIfNecessary,
+ initialisePushSdkReadMode
  }}>
  {children}
  </AppContext.Provider>