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,