feat: lock app button

apps/mobile/src/app/(home)/settings/index.tsx

@@ -4,6 +4,7 @@ import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
 import { Divider } from '@/components/divider';
 import { NotifyUserSheet } from '@/components/sheets/notify-user-sheet.layout';
+import { useAuthContext } from '@/components/splash-screen-guard/use-auth-context';
 import { AppRoutes } from '@/routes';
 import { TestId } from '@/shared/test-id';
 import { t } from '@lingui/macro';
@@ -35,6 +36,7 @@ export default function SettingsScreen() {
   const feesSheetRef = useRef<SheetRef>(null);
   const theme = useTheme<Theme>();
   const router = useRouter();
+  const { lockApp } = useAuthContext();
 
   return (
     <>
@@ -204,7 +206,7 @@ export default function SettingsScreen() {
               </Text>
             </Box>
             <Button
-              onPress={() => {}}
+              onPress={lockApp}
               buttonState="outline"
               title={t({
                 id: 'settings.lock_button',

apps/mobile/src/components/splash-screen-guard/splash-screen-guard.tsx

@@ -15,6 +15,7 @@ import { Box, Button, Theme, useOnMount } from '@leather.io/ui/native';
 
 import { LeatherLockedSplash } from '../animations/leather-locked-splash';
 import { LeatherSplash } from '../animations/leather-splash';
+import { AuthContext } from './use-auth-context';
 import { useAuthState } from './use-auth-state';
 
 const DEFAULT_ANIMATION_FINISHED = false;
@@ -33,7 +34,7 @@ export function SplashScreenGuard({ children }: HasChildren) {
     lockedSplashRef.current?.play();
   }, []);
 
-  const { tryAuthentication, authState } = useAuthState({
+  const { tryAuthentication, authState, lockApp } = useAuthState({
     playSplash,
     setAnimationFinished,
   });
@@ -58,7 +59,7 @@ export function SplashScreenGuard({ children }: HasChildren) {
   }
 
   if (animationFinished) {
-    return children; // to their parents
+    return <AuthContext.Provider value={{ lockApp }}>{children}</AuthContext.Provider>;
   }
 
   const splash =

apps/mobile/src/components/splash-screen-guard/use-auth-context.ts

@@ -0,0 +1,11 @@
+import { createContext, useContext } from 'react';
+
+interface AuthContextArgs {
+  lockApp(): void;
+}
+
+export const AuthContext = createContext<AuthContextArgs>({
+  lockApp: () => {},
+});
+
+export const useAuthContext = () => useContext(AuthContext);

apps/mobile/src/components/splash-screen-guard/use-auth-state.ts → apps/mobile/src/components/splash-screen-guard/use-auth-state.tsx

@@ -60,9 +60,20 @@ export function useAuthState({
     if (securityLevelPreference === 'secure') {
       setAnimationFinished(false);
       setAuthState('started');
-      userLeavesApp(+new Date());
+
+      // add latest active timestamp only if the app was actually unlocked
+      const appUnlocked = authState === 'passed-on-first' || authState === 'passed-afterwards';
+      if (appUnlocked) {
+        userLeavesApp(+new Date());
+      }
     }
-  }, [securityLevelPreference, userLeavesApp, setAnimationFinished]);
+  }, [securityLevelPreference, userLeavesApp, setAnimationFinished, authState]);
+
+  const lockApp = useCallback(() => {
+    setAnimationFinished(false);
+    setAuthState('failed');
+    userLeavesApp(null);
+  }, [setAnimationFinished, setAuthState, userLeavesApp]);
 
   useAppState({
     onAppForeground,
@@ -72,5 +83,6 @@ export function useAuthState({
   return {
     tryAuthentication,
     authState,
+    lockApp,
   };
 }