feat: close all tabs on wallet lock

src/app/components/guards/singleTab.tsx

@@ -1,6 +1,6 @@
 import { useEffect } from 'react';
 
-type GuardType = 'onboarding' | 'importLedger' | 'resetWallet';
+type GuardType = 'onboarding' | 'importLedger' | 'closeWallet';
 
 const getChannelAndPingNames = (guardName: GuardType) => {
   const channelName = `${guardName}Channel`;

src/app/components/guards/walletResetGuard.tsx → src/app/components/guards/walletCloseGuard.tsx

@@ -1,17 +1,17 @@
 import { useSingleTabGuard } from '@components/guards/singleTab';
 
-type WalletResetGuardProps = {
+type WalletCloseGuardProps = {
   children?: React.ReactElement | React.ReactElement[];
 };
 
 /**
- * This guard is used to close any open tabs when the wallet is reset.
+ * This guard is used to close any open tabs when the wallet is locked or reset.
  * It should only be rendered at the root of the options page.
  */
-function WalletResetGuard({ children }: WalletResetGuardProps): React.ReactNode {
-  useSingleTabGuard('resetWallet', false);
+function WalletCloseGuard({ children }: WalletCloseGuardProps): React.ReactNode {
+  useSingleTabGuard('closeWallet', false);
 
   return children;
 }
 
-export default WalletResetGuard;
+export default WalletCloseGuard;

src/app/stores/wallet/actions/actionCreators.ts

@@ -28,6 +28,8 @@ export function unlockWalletAction(seed: string) {
 }
 
 export function lockWalletAction() {
+  // We post the closeWallet action to the guard so that any open tabs will close
+  PostGuardPing('closeWallet');
   return {
     type: actions.LockWalletKey,
   };
@@ -48,8 +50,8 @@ export function setWalletSeedPhraseAction(seedPhrase: string): actions.SetWallet
 }
 
 export function resetWalletAction(): actions.ResetWallet {
-  // We post the resetWallet action to the guard so that any open tabs will close
-  PostGuardPing('resetWallet');
+  // We post the closeWallet action to the guard so that any open tabs will close
+  PostGuardPing('closeWallet');
   return {
     type: actions.ResetWalletKey,
   };

src/pages/Options/index.tsx

@@ -1,4 +1,4 @@
-import WalletResetGuard from '@components/guards/walletResetGuard';
+import WalletCloseGuard from '@components/guards/walletCloseGuard';
 import { decryptMnemonic } from '@stacks/encryption';
 import rootStore from '@stores/index';
 import { setWalletSeedPhraseAction } from '@stores/wallet/actions/actionCreators';
@@ -29,9 +29,9 @@ const renderApp = async () => {
   const container = document.getElementById('app');
   const root = createRoot(container!);
   return root.render(
-    <WalletResetGuard>
+    <WalletCloseGuard>
       <App />
-    </WalletResetGuard>,
+    </WalletCloseGuard>,
   );
 };