Skip to content

Commit

Permalink
Merge pull request #1426 from ethereum-push-notification-service/stag…
Browse files Browse the repository at this point in the history 
…ing-deployment

Phase 3 of Guest Mode (#1423)
  • Loading branch information
@0xNilesh
0xNilesh authored Feb 22, 2024
2 parents d35a432 + f57813e commit 19d64f0
Show file tree
Hide file tree
Showing 15 changed files with 233 additions and 201 deletions.
148 changes: 76 additions & 72 deletions src/App.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -101,6 +101,7 @@ const extendConsole = () => {
extendConsole();

// Disable consolve

if (appConfig?.appEnv === "prod") {
console.enable("debug", false);
console.enable("log", false);
Expand Down Expand Up @@ -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>
);
}
Expand Down
3 changes: 1 addition & 2 deletions src/components/Dropdown.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 && (
Expand Down
2 changes: 1 addition & 1 deletion src/components/NavigationButton.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 ? (
Expand Down
1 change: 0 additions & 1 deletion src/components/ProfileModal.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
4 changes: 2 additions & 2 deletions src/config/NavigationList.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -71,7 +71,7 @@ const NavigationList = {
isRoute: true,
hasMenuLogic: true,
hidden: false,
allowReadOnly: false,
// allowReadOnly: false,
headerTag: {
title: 'Chat',
light: {
Expand All @@ -96,7 +96,7 @@ const NavigationList = {
isRoute: true,
hasMenuLogic: true,
hidden: false,
allowReadOnly: false,
// allowReadOnly: false,
headerTag: {
title: 'Spaces',
light: {
Expand Down
2 changes: 1 addition & 1 deletion src/connectors/web3Onboard.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,7 @@ export const web3Onboard = Onboard({
disableClose: false,
},
containerElements: {
connectModal: "#onboard-container"
// connectModal: "#onboard-container"
},
wallets: [injected, walletConnect, coinbase],
chains: chains,
Expand Down
74 changes: 31 additions & 43 deletions src/contexts/AppContext.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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";
Expand All @@ -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);
Expand Down Expand Up @@ -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",
Expand All @@ -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));
}
Expand All @@ -115,7 +105,7 @@ const AppContextProvider = ({ children }) => {
hookInfo: progressHook,
spinnerType: LOADER_SPINNER_TYPE.PROCESSING,
progress: 0,
errorMessage:''
errorMessage: ''
};

if (progressHook) {
Expand Down Expand Up @@ -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;
Expand All @@ -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,
});
Expand All @@ -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
Expand Down Expand Up @@ -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();
}
Expand Down Expand Up @@ -355,7 +342,8 @@ const AppContextProvider = ({ children }) => {
setConnectedPeerID,
displayQR,
setDisplayQR,
createUserIfNecessary
createUserIfNecessary,
initialisePushSdkReadMode
}}>
{children}
</AppContext.Provider>
Expand Down
Loading

0 comments on commit 19d64f0

Please sign in to comment.