fix: loading page before lock

cardano-foundation · Apr 30, 2024 · d23f51d · d23f51d
1 parent ee12f34
commit d23f51d
Show file tree

Hide file tree

Showing 7 changed files with 97 additions and 97 deletions.
diff --git a/src/store/reducers/stateCache/stateCache.ts b/src/store/reducers/stateCache/stateCache.ts
@@ -13,7 +13,7 @@ const initialState: StateCacheProps = {
   initialized: false,
   routes: [],
   authentication: {
-    loggedIn: false,
+    loggedIn: undefined,
     userName: "",
     time: 0,
     passcodeIsSet: false,

diff --git a/src/store/reducers/stateCache/stateCache.types.ts b/src/store/reducers/stateCache/stateCache.types.ts
@@ -11,7 +11,7 @@ interface CurrentRouteCacheProps {
 }
 
 interface AuthenticationCacheProps {
-  loggedIn: boolean;
+  loggedIn: boolean | undefined;
   userName: string;
   time: number;
   passcodeIsSet: boolean;

diff --git a/src/ui/App.tsx b/src/ui/App.tsx
@@ -1,7 +1,12 @@
 import { StrictMode, useEffect, useMemo, useState } from "react";
-import { setupIonicReact, IonApp, getPlatforms } from "@ionic/react";
+import {
+  setupIonicReact,
+  IonApp,
+  getPlatforms,
+  IonSpinner,
+} from "@ionic/react";
 import { StatusBar, Style } from "@capacitor/status-bar";
-import { Routes } from "../routes";
+import { RoutePath, Routes } from "../routes";
 import "./styles/ionic.scss";
 import "./styles/style.scss";
 import "./App.scss";
@@ -19,7 +24,7 @@ import { OperationType } from "./globals/types";
 import { IncomingRequest } from "./pages/IncomingRequest";
 import { Settings } from "./pages/Settings";
 import { SetUserName } from "./components/SetUserName";
-import { TabsRoutePath } from "../routes/paths";
+import { PublicRoutes, TabsRoutePath } from "../routes/paths";
 import { MobileHeaderPreview } from "./components/MobileHeaderPreview";
 import { CustomToast } from "./components/CustomToast/CustomToast";
 import { LockModal } from "./components/LockModal/LockModal";
@@ -34,8 +39,7 @@ const App = () => {
   const toastMsg = useAppSelector(getToastMsg);
   const [showScan, setShowScan] = useState(false);
   const [showToast, setShowToast] = useState(false);
-
-  const [lockModalIsOpen, setLockModalIsOpen] = useState(true);
+  const [lockIsRendered, setLockIsRendered] = useState(false);
 
   const isPreviewMode = useMemo(
     () => new URLSearchParams(window.location.search).has("browserPreview"),
@@ -63,12 +67,14 @@ const App = () => {
 
   useEffect(() => {
     if (
-      authentication.userName?.length === 0 &&
+      authentication.loggedIn &&
+      (authentication.userName === undefined ||
+        authentication.userName?.length === 0) &&
       currentRoute?.path?.includes(TabsRoutePath.ROOT)
     ) {
       setShowSetUserName(true);
     }
-  }, [authentication, currentRoute]);
+  }, [authentication.loggedIn, currentRoute]);
 
   useEffect(() => {
     const platforms = getPlatforms();
@@ -82,25 +88,41 @@ const App = () => {
     }
   }, []);
 
+  const renderApp = () => {
+    if (!lockIsRendered) {
+      // We need to include the LockModal in the loading page to track when is rendered
+      return (
+        <>
+          <LockModal didEnter={() => setLockIsRendered(true)} />
+          <div className="loading-page">
+            <IonSpinner name="crescent" />
+          </div>
+        </>
+      );
+    } else if (showScan) {
+      return <FullPageScanner setShowScan={setShowScan} />;
+    } else {
+      return (
+        <>
+          {isPreviewMode ? <MobileHeaderPreview /> : null}
+          <Routes />
+        </>
+      );
+    }
+  };
+
   return (
     <IonApp>
       <AppWrapper>
         <StrictMode>
-          {showScan ? (
-            <FullPageScanner setShowScan={setShowScan} />
-          ) : (
-            <>
-              {isPreviewMode && <MobileHeaderPreview />}
-              <Routes />
-            </>
-          )}
+          {lockIsRendered && !authentication.loggedIn ? <LockModal /> : null}
+          {renderApp()}
           <SetUserName
             isOpen={showSetUserName}
             setIsOpen={setShowSetUserName}
           />
           <IncomingRequest />
           <Settings />
-          <LockModal />
           <CustomToast
             toastMsg={toastMsg}
             showToast={showToast}

diff --git a/src/ui/components/AppWrapper/AppWrapper.scss b/src/ui/components/AppWrapper/AppWrapper.scss
@@ -6,3 +6,10 @@
     margin-bottom: 2rem;
   }
 }
+.loading-page {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100vh;
+  width: 100vw;
+}
diff --git a/src/ui/components/AppWrapper/AppWrapper.tsx b/src/ui/components/AppWrapper/AppWrapper.tsx
@@ -43,7 +43,6 @@ import { FavouriteIdentifier } from "../../../store/reducers/identifiersCache/id
 import { NotificationRoute } from "../../../core/agent/modules/signify/signifyApi.types";
 import "./AppWrapper.scss";
 import { ConfigurationService } from "../../../core/configuration";
-import { PreferencesStorageItem } from "../../../core/storage/preferences/preferencesStorage.type";
 import { App } from "@capacitor/app";
 import { IonSpinner } from "@ionic/react";
 
@@ -111,10 +110,9 @@ const keriAcdcChangeHandler = async (
 const AppWrapper = (props: { children: ReactNode }) => {
   const dispatch = useAppDispatch();
   const authentication = useAppSelector(getAuthentication);
-  const [initialised, setInitialised] = useState(false);
   const [agentInitErr, setAgentInitErr] = useState(false);
 
-  const ACTIVITY_TIMEOUT = 60000;
+  const ACTIVITY_TIMEOUT = 5000;
   let timer: NodeJS.Timeout;
   let timeoutDuration = ACTIVITY_TIMEOUT;
 
@@ -214,22 +212,14 @@ const AppWrapper = (props: { children: ReactNode }) => {
   };
 
   const loadPreferences = async () => {
-    let userName: PreferencesStorageItem = { userName: "" };
-
-    try {
-      userName = await PreferencesStorage.get(PreferencesKeys.APP_USER_NAME);
-    } catch (e) {
-      if (
-        !(e instanceof Error) ||
-        !(
-          e instanceof Error &&
-          e.message ===
-            `${PreferencesStorage.KEY_NOT_FOUND} ${PreferencesKeys.APP_USER_NAME}`
-        )
-      ) {
-        throw e;
+    const getPreferenceSafe = async (key: string) => {
+      try {
+        return await PreferencesStorage.get(key);
+      } catch (e) {
+        // TODO: handle error
       }
-    }
+    };
+    const userName = await getPreferenceSafe(PreferencesKeys.APP_USER_NAME);
 
     const passcodeIsSet = await checkKeyStore(KeyStoreKeys.APP_PASSCODE);
     const seedPhraseIsSet = await checkKeyStore(
@@ -239,58 +229,32 @@ const AppWrapper = (props: { children: ReactNode }) => {
 
     const updatedAuthentication = {
       ...authentication,
-      userName: userName.userName as string,
+      loggedIn: false,
+      userName: userName?.userName as string,
       passcodeIsSet,
       seedPhraseIsSet,
       passwordIsSet,
     };
 
     dispatch(setAuthentication(updatedAuthentication));
 
-    // @TODO - handle error
-    try {
-      const identifiersFavourites = await PreferencesStorage.get(
-        PreferencesKeys.APP_IDENTIFIERS_FAVOURITES
-      );
-      dispatch(
-        setFavouritesIdentifiersCache(
-          identifiersFavourites.favourites as FavouriteIdentifier[]
-        )
-      );
-    } catch (e) {
-      if (
-        !(e instanceof Error) ||
-        !(
-          e instanceof Error &&
-          e.message ===
-            `${PreferencesStorage.KEY_NOT_FOUND} ${PreferencesKeys.APP_IDENTIFIERS_FAVOURITES}`
-        )
-      ) {
-        throw e;
-      }
-    }
+    const identifiersFavourites = await getPreferenceSafe(
+      PreferencesKeys.APP_IDENTIFIERS_FAVOURITES
+    );
+    dispatch(
+      setFavouritesIdentifiersCache(
+        identifiersFavourites?.favourites as FavouriteIdentifier[]
+      )
+    );
 
-    try {
-      const credsFavourites = await PreferencesStorage.get(
-        PreferencesKeys.APP_CREDS_FAVOURITES
-      );
-      dispatch(
-        setFavouritesCredsCache(
-          credsFavourites.favourites as FavouriteIdentifier[]
-        )
-      );
-    } catch (e) {
-      if (
-        !(e instanceof Error) ||
-        !(
-          e instanceof Error &&
-          e.message ===
-            `${PreferencesStorage.KEY_NOT_FOUND} ${PreferencesKeys.APP_CREDS_FAVOURITES}`
-        )
-      ) {
-        throw e;
-      }
-    }
+    const credsFavourites = await getPreferenceSafe(
+      PreferencesKeys.APP_CREDS_FAVOURITES
+    );
+    dispatch(
+      setFavouritesCredsCache(
+        credsFavourites?.favourites as FavouriteIdentifier[]
+      )
+    );
   };
 
   const initApp = async () => {
@@ -311,11 +275,9 @@ const AppWrapper = (props: { children: ReactNode }) => {
     }
 
     await loadPreferences();
-    // handleInitialRoute(updatedAuthentication);
-
-    setInitialised(true);
 
     await new ConfigurationService().start();
+
     try {
       await Agent.agent.start();
     } catch (e) {
@@ -327,7 +289,9 @@ const AppWrapper = (props: { children: ReactNode }) => {
     }
     dispatch(setPauseQueueIncomingRequest(true));
 
-    await loadDatabase();
+    await loadDatabase().catch((e) => {
+      /* TODO: handle error */
+    });
 
     Agent.agent.connections.onConnectionKeriStateChanged((event) => {
       return connectionKeriStateChangedHandler(event, dispatch);
@@ -382,15 +346,6 @@ const AppWrapper = (props: { children: ReactNode }) => {
     );
   }
 
-  if (!initialised) {
-    // if (false) {
-    return (
-      <div className="loading-page">
-        <IonSpinner name="crescent" />
-      </div>
-    );
-  }
-
   return <>{props.children}</>;
 };
 

diff --git a/src/ui/components/LockModal/LockModal.tsx b/src/ui/components/LockModal/LockModal.tsx
@@ -1,4 +1,8 @@
-import { IonModal } from "@ionic/react";
+import {
+  IonModal,
+  useIonViewDidEnter,
+  useIonViewWillEnter,
+} from "@ionic/react";
 import { i18n } from "../../../i18n";
 import "./LockModal.scss";
 import { RoutePath } from "../../../routes";
@@ -18,16 +22,18 @@ import {
 } from "../../../store/reducers/stateCache";
 import { useEffect, useState } from "react";
 import { KeyStoreKeys, SecureStorage } from "../../../core/storage";
-import { PublicRoutes } from "../../../routes/paths";
+import { PublicRoutes, TabsRoutePath } from "../../../routes/paths";
+import { LockModalTypes } from "./LockModal.types";
 
-const LockModal = () => {
+const LockModal = ({ didEnter }: LockModalTypes) => {
   const componentId = "lock-modal";
   const ionRouter = useAppIonRouter();
   const dispatch = useAppDispatch();
   const authentication = useAppSelector(getAuthentication);
   const [passcode, setPasscode] = useState("");
   const seedPhrase = authentication.seedPhraseIsSet;
   const [alertIsOpen, setAlertIsOpen] = useState(false);
+  const [showModalAfterRender, setShowModalAfterRender] = useState(false);
   const [passcodeIncorrect, setPasscodeIncorrect] = useState(false);
   const headerText = seedPhrase
     ? i18n.t("lockmodal.alert.text.verify")
@@ -37,6 +43,11 @@ const LockModal = () => {
     : i18n.t("lockmodal.alert.button.restart");
   const cancelButtonText = i18n.t("lockmodal.alert.button.cancel");
 
+  useEffect(() => {
+    didEnter && didEnter();
+    setShowModalAfterRender(true);
+  }, []);
+
   const handleClearState = () => {
     setAlertIsOpen(false);
     setPasscodeIncorrect(false);
@@ -114,7 +125,7 @@ const LockModal = () => {
 
   return (
     <IonModal
-      isOpen={lockApp}
+      isOpen={lockApp && showModalAfterRender}
       className="lock-modal"
       data-testid={componentId}
       animated={false}

diff --git a/src/ui/components/LockModal/LockModal.types.ts b/src/ui/components/LockModal/LockModal.types.ts
@@ -0,0 +1,5 @@
+interface LockModalTypes {
+  didEnter?: () => void;
+}
+
+export type { LockModalTypes };