fix: don't flash lock screen when opening extension

Fixes #968.
anoma · Aug 27, 2024 · bbcc253 · bbcc253
1 parent 4f090ea
commit bbcc253
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 21 deletions.
diff --git a/apps/extension/src/App/App.tsx b/apps/extension/src/App/App.tsx
@@ -9,36 +9,42 @@ import routes from "./routes";
 export const App: React.FC = () => {
   const location = useLocation();
 
-  const { isLocked, unlock, passwordInitialized } = useVaultContext();
+  const { lockStatus, unlock, passwordInitialized } = useVaultContext();
 
   const displayReturnButton = (): boolean => {
     const setupRoute = routes.setup();
     const indexRoute = routes.viewAccountList();
     return Boolean(
-      !isLocked &&
-        isLocked !== undefined &&
+      lockStatus === "unlocked" &&
         !matchPath(setupRoute, location.pathname) &&
         !matchPath(indexRoute, location.pathname)
     );
   };
 
-  const shouldLock = passwordInitialized && isLocked;
-  if (passwordInitialized === undefined) return null;
+  if (passwordInitialized === undefined || lockStatus === "pending") {
+    return null;
+  }
+
+  const shouldLock = passwordInitialized && lockStatus === "locked";
 
   return (
     <Container
       size="popup"
       header={
         <AppHeader
-          settingsButton={!isLocked && passwordInitialized}
+          settingsButton={lockStatus === "unlocked" && passwordInitialized}
           lockButton={
-            !isLocked && passwordInitialized && !displayReturnButton()
+            lockStatus === "unlocked" &&
+            passwordInitialized &&
+            !displayReturnButton()
           }
           returnButton={displayReturnButton()}
         />
       }
     >
-      {shouldLock ? <Login onLogin={unlock} /> : <AppContent />}
+      {shouldLock ?
+        <Login onLogin={unlock} />
+      : <AppContent />}
     </Container>
   );
 };
diff --git a/apps/extension/src/context/AccountContext.tsx b/apps/extension/src/context/AccountContext.tsx
@@ -64,7 +64,7 @@ export const AccountContextWrapper = ({
   children,
 }: AccountContextProps): JSX.Element => {
   const requester = useRequester();
-  const { isLocked, logout } = useVaultContext();
+  const { lockStatus, logout } = useVaultContext();
 
   const [accounts, setAccounts] = useState<DerivedAccount[]>([]);
   const [parentAccounts, setParentAccounts] = useState<DerivedAccount[]>([]);
@@ -166,11 +166,11 @@ export const AccountContextWrapper = ({
   };
 
   useEffect(() => {
-    if (!isLocked) {
+    if (lockStatus === "unlocked") {
       void fetchAll();
       void fetchActiveAccountId();
     }
-  }, [isLocked]);
+  }, [lockStatus]);
 
   useEffect(() => {
     setParentAccounts(accounts.filter((account) => !account.parentId));

diff --git a/apps/extension/src/context/VaultContext.tsx b/apps/extension/src/context/VaultContext.tsx
@@ -17,13 +17,15 @@ import React, { createContext, useContext, useEffect, useState } from "react";
 import { useNavigate } from "react-router-dom";
 import { Ports } from "router";
 
+type LockStatus = "locked" | "unlocked" | "pending";
+
 // Add types here
 type VaultContextType = {
   lock: () => Promise<void>;
   unlock: (password: string) => Promise<boolean>;
   logout: () => Promise<void>;
   checkPassword: (password: string) => Promise<boolean>;
-  isLocked: boolean;
+  lockStatus: LockStatus;
   changePassword: (
     oldPassword: string,
     newPassword: string
@@ -38,7 +40,7 @@ const createVaultContext = (): VaultContextType => {
     unlock: async (_password: string) => false,
     logout: async () => {},
     checkPassword: async (_password: string) => false,
-    isLocked: true,
+    lockStatus: "locked",
     changePassword: async (_oldPassword: string, _newPassword: string) =>
       Result.ok(null),
     passwordInitialized: undefined,
@@ -57,7 +59,7 @@ export const VaultContextWrapper = ({
 }: VaultContextWrapperProps): JSX.Element => {
   const requester = useRequester();
   const navigate = useNavigate();
-  const [locked, setLocked] = useState(true);
+  const [lockStatus, setLockStatus] = useState<LockStatus>("pending");
   const [passwordInitialized, setPasswordInitialized] = useState<
     undefined | boolean
   >();
@@ -69,20 +71,20 @@ export const VaultContextWrapper = ({
     );
 
     if (unlocked) {
-      setLocked(!unlocked);
+      setLockStatus("unlocked");
     }
     return unlocked;
   };
 
   const lock = async (): Promise<void> => {
     await requester.sendMessage(Ports.Background, new LockVaultMsg());
-    setLocked(true);
+    setLockStatus("locked");
   };
 
   const logout = async (): Promise<void> => {
     await requester.sendMessage(Ports.Background, new LogoutMsg());
     setPasswordInitialized(false);
-    setLocked(true);
+    setLockStatus("locked");
     navigate(routes.setup());
   };
 
@@ -114,13 +116,15 @@ export const VaultContextWrapper = ({
   };
 
   const queryIsLocked = async (): Promise<void> => {
-    setLocked(
-      await requester.sendMessage(Ports.Background, new CheckIsLockedMsg())
+    const isLocked = await requester.sendMessage(
+      Ports.Background,
+      new CheckIsLockedMsg()
     );
+    setLockStatus(isLocked ? "locked" : "unlocked");
   };
 
   useEventListener(Events.ExtensionLocked, () => {
-    setLocked(true);
+    setLockStatus("locked");
   });
 
   useEffect(() => {
@@ -133,7 +137,7 @@ export const VaultContextWrapper = ({
       value={{
         lock,
         unlock,
-        isLocked: locked,
+        lockStatus,
         checkPassword,
         passwordInitialized,
         changePassword,