feat: add app-wide unlock gate

packages/feature-shell/src/data-access/use-shell-unlock-gate.tsx

@@ -0,0 +1,79 @@
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
+import { useAppContext } from '@workspace/context-react/use-app-context'
+import type { WalletProtectionMode } from '@workspace/db/wallet/wallet'
+import { useAccountActive } from '@workspace/db-react/use-account-active'
+import { useWalletActive } from '@workspace/db-react/use-wallet-active'
+import { toastError } from '@workspace/ui/lib/toast-error'
+import { useVaultUnlockDialog } from '@workspace/vault-react/vault-unlock-provider'
+
+export type ShellUnlockGateState = {
+  isChecking: boolean
+  isLocked: boolean
+  isUnlocking: boolean
+  walletName: string
+  walletProtectionMode: WalletProtectionMode
+}
+
+export type ShellUnlockGate = {
+  actions: {
+    unlock(): Promise<void>
+  }
+  state: ShellUnlockGateState
+}
+
+function shellUnlockStatusQueryKey(walletId: string) {
+  return ['shellUnlockStatus', walletId] as const
+}
+
+export function useShellUnlockGate(): ShellUnlockGate {
+  const account = useAccountActive()
+  const context = useAppContext()
+  const queryClient = useQueryClient()
+  const wallet = useWalletActive()
+  const { requestUnlock } = useVaultUnlockDialog()
+  const statusQuery = useQuery({
+    queryFn: async () => {
+      try {
+        await context.vault.requireWalletKey({ walletId: account.walletId })
+        return true
+      } catch {
+        if (wallet.protectionMode === 'unsecured') {
+          await context.vault.unlockWallet({ credential: '', walletId: account.walletId })
+          return true
+        }
+        return false
+      }
+    },
+    queryKey: shellUnlockStatusQueryKey(account.walletId),
+    retry: false,
+  })
+  const unlockMutation = useMutation({
+    mutationFn: async () =>
+      await requestUnlock({
+        mode: wallet.protectionMode,
+        reason: 'generic',
+        walletId: account.walletId,
+      }),
+    onError: (caught) => toastError(caught instanceof Error ? caught.message : `${caught}`),
+    onSuccess: async (unlocked) => {
+      if (unlocked) {
+        await queryClient.invalidateQueries({ queryKey: shellUnlockStatusQueryKey(account.walletId) })
+      }
+    },
+  })
+
+  return {
+    actions: {
+      unlock: async () => {
+        await unlockMutation.mutateAsync().catch(() => undefined)
+      },
+    },
+    state: {
+      isChecking: statusQuery.isLoading,
+      isLocked: statusQuery.data === false,
+      isUnlocking: unlockMutation.isPending,
+      walletName: wallet.name,
+      walletProtectionMode: wallet.protectionMode,
+    },
+  }
+}

packages/feature-shell/src/ui/shell-ui-layout.tsx

@@ -9,6 +9,7 @@ import { NavLink, Outlet } from 'react-router'
 import { ShellUiCommandMenu } from './shell-ui-command-menu.tsx'
 import { ShellUiMenu } from './shell-ui-menu.tsx'
 import { ShellUiMenuActions } from './shell-ui-menu-actions.tsx'
+import { ShellUiUnlockGate } from './shell-ui-unlock-gate.tsx'
 import { ShellUiWarningExperimental } from './shell-ui-warning-experimental.tsx'
 
 export interface ShellLayoutLink {
@@ -43,7 +44,9 @@ export function ShellUiLayout() {
         </div>
       </header>
       <main className="flex-1 overflow-y-auto p-1 md:p-2 lg:p-4">
-        <Outlet />
+        <ShellUiUnlockGate>
+          <Outlet />
+        </ShellUiUnlockGate>
       </main>
       <footer className="flex items-center justify-between bg-secondary/30 pb-[env(safe-area-inset-bottom)]">
         {links.map(({ icon, label, to }) => (

packages/feature-shell/src/ui/shell-ui-unlock-gate.tsx

@@ -0,0 +1,34 @@
+import { useTranslation } from '@workspace/i18n'
+import { Button } from '@workspace/ui/components/button'
+import { UiCard } from '@workspace/ui/components/ui-card'
+import { UiLoaderFull } from '@workspace/ui/components/ui-loader-full'
+import type { ReactNode } from 'react'
+import { useShellUnlockGate } from '../data-access/use-shell-unlock-gate.tsx'
+
+export function ShellUiUnlockGate({ children }: { children: ReactNode }) {
+  const { t } = useTranslation('shell')
+  const { actions, state } = useShellUnlockGate()
+
+  if (state.isChecking) {
+    return <UiLoaderFull />
+  }
+
+  if (!state.isLocked) {
+    return children
+  }
+
+  return (
+    <div className="flex min-h-full items-center justify-center p-4">
+      <UiCard
+        className="w-full max-w-xs"
+        contentProps={{ className: 'space-y-4' }}
+        description={t(($) => $.unlockGateDescription, { walletName: state.walletName })}
+        title={t(($) => $.unlockGateTitle)}
+      >
+        <Button disabled={state.isUnlocking} onClick={actions.unlock} type="button">
+          {t(($) => $.unlockGateAction)}
+        </Button>
+      </UiCard>
+    </div>
+  )
+}

packages/i18n/locales/en/shell.json

@@ -20,6 +20,9 @@
   "labelSettings": "Settings",
   "labelTools": "Tools",
   "networkSettings": "Network settings",
+  "unlockGateAction": "Unlock",
+  "unlockGateDescription": "Unlock {{walletName}} to continue.",
+  "unlockGateTitle": "Wallet locked",
   "walletEdit": "Edit wallet",
   "walletSettings": "Wallet settings"
 }

packages/i18n/locales/es/shell.json

@@ -20,6 +20,9 @@
   "labelSettings": "Ajustes",
   "labelTools": "Herramientas",
   "networkSettings": "Ajustes de red",
+  "unlockGateAction": "Desbloquear",
+  "unlockGateDescription": "Desbloquea {{walletName}} para continuar.",
+  "unlockGateTitle": "Billetera bloqueada",
   "walletEdit": "Editar billetera",
   "walletSettings": "Ajustes de la billetera"
 }

packages/i18n/src/resources.d.ts

@@ -305,6 +305,9 @@ export default interface Resources {
     labelSettings: 'Settings'
     labelTools: 'Tools'
     networkSettings: 'Network settings'
+    unlockGateAction: 'Unlock'
+    unlockGateDescription: 'Unlock {{walletName}} to continue.'
+    unlockGateTitle: 'Wallet locked'
     walletEdit: 'Edit wallet'
     walletSettings: 'Wallet settings'
   }

packages/vault-react/src/data-access/use-vault-unlock-provider.ts

@@ -218,7 +218,7 @@ export function useVaultUnlockProvider(): VaultUnlockProviderValue {
       confirmPassword,
       confirmPasswordLabel: copy.confirmPasswordLabel,
       credential,
-      credentialInputType: pending?.mode === 'pin' ? 'text' : 'password',
+      credentialInputType: 'password',
       credentialLabel: pending?.mode === 'pin' ? copy.pinLabel : copy.passwordLabel,
       description: setupMode ? copy.setupDescription : (pending?.description ?? copy.defaultDescription),
       error,