diff --git a/apps/extension/src/App/App.tsx b/apps/extension/src/App/App.tsx index 82e93722d..f993c3fcc 100644 --- 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 ( } > - {shouldLock ? : } + {shouldLock ? + + : } ); }; diff --git a/apps/extension/src/context/AccountContext.tsx b/apps/extension/src/context/AccountContext.tsx index 60636062f..111e66133 100644 --- 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([]); const [parentAccounts, setParentAccounts] = useState([]); @@ -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 index 7513c6caa..8ed27dd67 100644 --- 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; unlock: (password: string) => Promise; logout: () => Promise; checkPassword: (password: string) => Promise; - 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("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 => { await requester.sendMessage(Ports.Background, new LockVaultMsg()); - setLocked(true); + setLockStatus("locked"); }; const logout = async (): Promise => { 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 => { - 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,