From 396124e8c28f2a712d8dfbcc6038cf43b93ba525 Mon Sep 17 00:00:00 2001
From: Edgar Khanzadian <edgar.khanzadian@gmail.com>
Date: Thu, 24 Oct 2024 14:16:47 +0400
Subject: [PATCH] feat: lock app button

---
 apps/mobile/src/app/(home)/settings/index.tsx    |  4 +++-
 .../splash-screen-guard/splash-screen-guard.tsx  |  5 +++--
 .../splash-screen-guard/use-auth-context.ts      | 11 +++++++++++
 .../{use-auth-state.ts => use-auth-state.tsx}    | 16 ++++++++++++++--
 4 files changed, 31 insertions(+), 5 deletions(-)
 create mode 100644 apps/mobile/src/components/splash-screen-guard/use-auth-context.ts
 rename apps/mobile/src/components/splash-screen-guard/{use-auth-state.ts => use-auth-state.tsx} (83%)

diff --git a/apps/mobile/src/app/(home)/settings/index.tsx b/apps/mobile/src/app/(home)/settings/index.tsx
index 7976c0f23..0cc3fb075 100644
--- a/apps/mobile/src/app/(home)/settings/index.tsx
+++ b/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',
diff --git a/apps/mobile/src/components/splash-screen-guard/splash-screen-guard.tsx b/apps/mobile/src/components/splash-screen-guard/splash-screen-guard.tsx
index 5de57f637..def84b656 100644
--- a/apps/mobile/src/components/splash-screen-guard/splash-screen-guard.tsx
+++ b/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 =
diff --git a/apps/mobile/src/components/splash-screen-guard/use-auth-context.ts b/apps/mobile/src/components/splash-screen-guard/use-auth-context.ts
new file mode 100644
index 000000000..749880703
--- /dev/null
+++ b/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);
diff --git a/apps/mobile/src/components/splash-screen-guard/use-auth-state.ts b/apps/mobile/src/components/splash-screen-guard/use-auth-state.tsx
similarity index 83%
rename from apps/mobile/src/components/splash-screen-guard/use-auth-state.ts
rename to apps/mobile/src/components/splash-screen-guard/use-auth-state.tsx
index ea6cf7de5..1b8a6fb62 100644
--- a/apps/mobile/src/components/splash-screen-guard/use-auth-state.ts
+++ b/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,
   };
 }