@oxyhq/services 5.16.0 → 5.16.2

package/src/crypto/signatureService.ts

@@ -82,6 +82,36 @@ export interface AuthChallenge {
 }
 
 export class SignatureService {
+  /**
+   * Generate a random challenge string (for offline use)
+   * Uses expo-crypto in React Native, crypto.randomBytes in Node.js
+   */
+  static async generateChallenge(): Promise<string> {
+    if (isReactNative() || !isNodeJS()) {
+      // Use expo-crypto for React Native (expo-random is deprecated)
+      const Crypto = await initExpoCrypto();
+      const randomBytes = await Crypto.getRandomBytesAsync(32);
+      return Array.from(randomBytes)
+        .map((b: number) => b.toString(16).padStart(2, '0'))
+        .join('');
+    }
+    
+    // Node.js fallback
+    try {
+      // eslint-disable-next-line @typescript-eslint/no-implied-eval
+      const getCrypto = new Function('return require("crypto")');
+      const crypto = getCrypto();
+      return crypto.randomBytes(32).toString('hex');
+    } catch (error) {
+      // Fallback to expo-crypto if Node crypto fails
+      const Crypto = await initExpoCrypto();
+      const randomBytes = await Crypto.getRandomBytesAsync(32);
+      return Array.from(randomBytes)
+        .map((b: number) => b.toString(16).padStart(2, '0'))
+        .join('');
+    }
+  }
+
   /**
    * Hash a message using SHA-256
    */

package/src/index.ts

@@ -100,7 +100,10 @@ export type {
   AssetDeleteSummary,
   AssetUploadProgress,
   AssetUpdateVisibilityRequest,
-  AssetUpdateVisibilityResponse
+  AssetUpdateVisibilityResponse,
+  // Account storage usage
+  AccountStorageCategoryUsage,
+  AccountStorageUsageResponse
 } from './models/interfaces';
 
 export type {

package/src/models/interfaces.ts

@@ -384,6 +384,29 @@ export interface AssetUpdateVisibilityResponse {
   };
 }
 
+/**
+ * Account storage usage (server-side usage, not local AsyncStorage)
+ */
+export interface AccountStorageCategoryUsage {
+  bytes: number;
+  count: number;
+}
+
+export interface AccountStorageUsageResponse {
+  plan: 'basic' | 'pro' | 'business';
+  totalUsedBytes: number;
+  totalLimitBytes: number;
+  categories: {
+    documents: AccountStorageCategoryUsage;
+    mail: AccountStorageCategoryUsage;
+    photosVideos: AccountStorageCategoryUsage;
+    recordings: AccountStorageCategoryUsage;
+    family: AccountStorageCategoryUsage;
+    other: AccountStorageCategoryUsage;
+  };
+  updatedAt: string;
+}
+
 export interface AssetUploadProgress {
   fileId: string;
   uploaded: number;

package/src/ui/components/GroupedSection.tsx

@@ -27,7 +27,7 @@ const GroupedSectionComponent = ({ items }: GroupedSectionProps) => {
     return (
         <View style={{ width: '100%' }}>
             {items.map((item, index) => (
-                <View key={item.id} style={{ marginBottom: index < items.length - 1 ? 4 : 0 }}>
+                <View key={`${item.id}-${index}`} style={{ marginBottom: index < items.length - 1 ? 4 : 0 }}>
                     <GroupedItem
                         icon={item.icon}
                         iconColor={item.iconColor}

package/src/ui/components/OxyProvider.tsx

@@ -1,14 +1,16 @@
-import { useEffect, useRef, type FC } from 'react';
+import { useEffect, useRef, useState, type FC } from 'react';
 import { AppState } from 'react-native';
 import { GestureHandlerRootView } from 'react-native-gesture-handler';
 import { SafeAreaProvider } from 'react-native-safe-area-context';
 import { KeyboardProvider } from 'react-native-keyboard-controller';
 import type { OxyProviderProps } from '../types/navigation';
 import { OxyContextProvider } from '../context/OxyContext';
-import { QueryClient, QueryClientProvider, focusManager } from '@tanstack/react-query';
+import { QueryClientProvider, focusManager, onlineManager } from '@tanstack/react-query';
 import { setupFonts } from './FontLoader';
 import BottomSheetRouter from './BottomSheetRouter';
 import { Toaster } from '../../lib/sonner';
+import { createQueryClient } from '../hooks/queryClient';
+import { useStorage } from '../hooks/useStorage';
 
 // Initialize fonts automatically
 setupFonts();
@@ -26,31 +28,32 @@ const OxyProvider: FC<OxyProviderProps> = ({
     onAuthStateChange,
     storageKeyPrefix,
     baseURL,
-    queryClient,
+    queryClient: providedQueryClient,
 }) => {
     // contextOnly is retained for backwards compatibility while the UI-only
     // bottom sheet experience is removed. At the moment both modes behave the same.
     void contextOnly;
 
-    // Initialize React Query Client (use provided client or create a default one once)
-    const queryClientRef = useRef<QueryClient | null>(null);
-    if (!queryClientRef.current) {
-        const defaultClient = new QueryClient({
-            defaultOptions: {
-                queries: {
-                    staleTime: 30_000,
-                    gcTime: 5 * 60_000,
-                    retry: 2,
-                    refetchOnReconnect: true,
-                    refetchOnWindowFocus: false,
-                },
-                mutations: {
-                    retry: 1,
-                },
-            },
-        });
-        queryClientRef.current = queryClient ?? defaultClient;
-    }
+    // Get storage for query persistence
+    const { storage, isReady: isStorageReady } = useStorage();
+    
+    // Initialize React Query Client with persistence
+    const queryClientRef = useRef<ReturnType<typeof createQueryClient> | null>(null);
+    const [queryClient, setQueryClient] = useState<ReturnType<typeof createQueryClient> | null>(null);
+
+    useEffect(() => {
+        if (providedQueryClient) {
+            queryClientRef.current = providedQueryClient;
+            setQueryClient(providedQueryClient);
+        } else if (isStorageReady) {
+            // Create query client with persistence once storage is ready
+            if (!queryClientRef.current) {
+                const client = createQueryClient(storage);
+                queryClientRef.current = client;
+                setQueryClient(client);
+            }
+        }
+    }, [providedQueryClient, isStorageReady, storage]);
 
     // Hook React Query focus manager into React Native AppState
     useEffect(() => {
@@ -62,28 +65,79 @@ const OxyProvider: FC<OxyProviderProps> = ({
         };
     }, []);
 
+    // Setup network status monitoring for offline detection
+    useEffect(() => {
+        let cleanup: (() => void) | undefined;
+
+        const setupNetworkMonitoring = async () => {
+            try {
+                // For React Native, try to use NetInfo
+                if (typeof window === 'undefined' || (typeof navigator !== 'undefined' && navigator.product === 'ReactNative')) {
+                    try {
+                        const NetInfo = await import('@react-native-community/netinfo');
+                        const state = await NetInfo.default.fetch();
+                        onlineManager.setOnline(state.isConnected ?? true);
+                        
+                        const unsubscribe = NetInfo.default.addEventListener((state: { isConnected: boolean | null }) => {
+                            onlineManager.setOnline(state.isConnected ?? true);
+                        });
+                        
+                        cleanup = () => unsubscribe();
+                    } catch {
+                        // NetInfo not available, default to online
+                        onlineManager.setOnline(true);
+                    }
+                } else {
+                    // For web, use navigator.onLine
+                    onlineManager.setOnline(navigator.onLine);
+                    const handleOnline = () => onlineManager.setOnline(true);
+                    const handleOffline = () => onlineManager.setOnline(false);
+                    
+                    window.addEventListener('online', handleOnline);
+                    window.addEventListener('offline', handleOffline);
+                    
+                    cleanup = () => {
+                        window.removeEventListener('online', handleOnline);
+                        window.removeEventListener('offline', handleOffline);
+                    };
+                }
+            } catch (error) {
+                // Default to online if detection fails
+                onlineManager.setOnline(true);
+            }
+        };
+
+        setupNetworkMonitoring();
+
+        return () => {
+            cleanup?.();
+        };
+    }, []);
+
     // Ensure we have a valid QueryClient
-    const client = queryClientRef.current;
-    if (!client) {
-        throw new Error('QueryClient initialization failed');
+    if (!queryClient) {
+        // Return loading state or fallback
+        return null;
     }
 
     return (
         <SafeAreaProvider>
             <GestureHandlerRootView style={{ flex: 1 }}>
                 <KeyboardProvider>
-                    <QueryClientProvider client={client}>
-                        <OxyContextProvider
-                            oxyServices={oxyServices as any}
-                            baseURL={baseURL}
-                            storageKeyPrefix={storageKeyPrefix}
-                            onAuthStateChange={onAuthStateChange as any}
-                        >
-                            {children}
-                            <BottomSheetRouter />
-                            <Toaster />
-                        </OxyContextProvider>
-                    </QueryClientProvider>
+                    {queryClient && (
+                        <QueryClientProvider client={queryClient}>
+                            <OxyContextProvider
+                                oxyServices={oxyServices as any}
+                                baseURL={baseURL}
+                                storageKeyPrefix={storageKeyPrefix}
+                                onAuthStateChange={onAuthStateChange as any}
+                            >
+                                {children}
+                                <BottomSheetRouter />
+                                <Toaster />
+                            </OxyContextProvider>
+                        </QueryClientProvider>
+                    )}
                 </KeyboardProvider>
             </GestureHandlerRootView>
         </SafeAreaProvider>

package/src/ui/components/profile/EditDisplayNameModal.tsx

@@ -36,7 +36,7 @@ export const EditDisplayNameModal: React.FC<EditDisplayNameModalProps> = ({
     const colorScheme = useColorScheme();
     const themeStyles = useThemeStyles(theme || 'light', colorScheme);
     const colors = themeStyles.colors;
-    const { updateField, isSaving } = useProfileEditing();
+    const { saveProfile, isSaving } = useProfileEditing();
 
     const [displayName, setDisplayName] = useState(initialDisplayName);
     const [lastName, setLastName] = useState(initialLastName);
@@ -48,8 +48,6 @@ export const EditDisplayNameModal: React.FC<EditDisplayNameModalProps> = ({
         }
     }, [visible, initialDisplayName, initialLastName]);
 
-    const { saveProfile } = useProfileEditing();
-
     const handleSave = async () => {
         const updates = {
             displayName,

package/src/ui/context/OxyContext.tsx

@@ -26,6 +26,9 @@ import { getStorageKeys } from '../utils/storageHelpers';
 import { isInvalidSessionError } from '../utils/errorHandlers';
 import type { RouteName } from '../navigation/routes';
 import { showBottomSheet as globalShowBottomSheet } from '../navigation/bottomSheetManager';
+import { useQueryClient } from '@tanstack/react-query';
+import { clearQueryCache } from '../hooks/queryClient';
+import { useAccountStore } from '../stores/accountStore';
 
 export interface OxyContextState {
   user: User | null;
@@ -34,6 +37,7 @@ export interface OxyContextState {
   isAuthenticated: boolean;
   isLoading: boolean;
   isTokenReady: boolean;
+  isStorageReady: boolean;
   error: string | null;
   currentLanguage: string;
   currentLanguageMetadata: ReturnType<typeof useLanguageManagement>['metadata'];
@@ -48,6 +52,7 @@ export interface OxyContextState {
   getPublicKey: () => Promise<string | null>;
   isIdentitySynced: () => Promise<boolean>;
   syncIdentity: () => Promise<User>;
+  deleteIdentityAndClearAccount: (skipBackup?: boolean, force?: boolean, userConfirmed?: boolean) => Promise<void>;
 
   // Identity sync state (reactive, from Zustand store)
   identitySyncState: {
@@ -73,6 +78,8 @@ export interface OxyContextState {
   >;
   logoutAllDeviceSessions: () => Promise<void>;
   updateDeviceName: (deviceName: string) => Promise<void>;
+  clearSessionState: () => Promise<void>;
+  clearAllAccountData: () => Promise<void>;
   oxyServices: OxyServices;
   useFollow?: UseFollowHook;
   showBottomSheet?: (screenOrConfig: RouteName | { screen: RouteName; props?: Record<string, unknown> }) => void;
@@ -182,7 +189,55 @@ export const OxyProvider: React.FC<OxyContextProviderProps> = ({
 
   const storageKeys = useMemo(() => getStorageKeys(storageKeyPrefix), [storageKeyPrefix]);
 
-  const { storage } = useStorage({ onError, logger });
+  const { storage, isReady: isStorageReady } = useStorage({ onError, logger });
+
+  // Identity integrity check and auto-restore on startup
+  useEffect(() => {
+    if (!storage || !isStorageReady) return;
+
+    const checkAndRestoreIdentity = async () => {
+      try {
+        const { KeyManager } = await import('../../crypto/index.js');
+        // Check if identity exists and verify integrity
+        const hasIdentity = await KeyManager.hasIdentity();
+        if (hasIdentity) {
+          const isValid = await KeyManager.verifyIdentityIntegrity();
+          if (!isValid) {
+            // Try to restore from backup
+            const restored = await KeyManager.restoreIdentityFromBackup();
+            if (restored) {
+              if (__DEV__) {
+                logger('Identity restored from backup successfully');
+              }
+            } else {
+              if (__DEV__) {
+                logger('Identity integrity check failed - user may need to restore from recovery phrase');
+              }
+            }
+          } else {
+            // Identity is valid - ensure backup is up to date
+            await KeyManager.backupIdentity();
+          }
+        } else {
+          // No identity - try to restore from backup
+          const restored = await KeyManager.restoreIdentityFromBackup();
+          if (restored && __DEV__) {
+            logger('Identity restored from backup on startup');
+          }
+        }
+      } catch (error) {
+        if (__DEV__) {
+          logger('Error during identity integrity check', error);
+        }
+        // Don't block app startup - user can recover with recovery phrase
+      }
+    };
+
+    checkAndRestoreIdentity();
+  }, [storage, isStorageReady, logger]);
+
+  // Offline queuing is now handled by TanStack Query mutations
+  // No need for custom offline queue
 
   const {
     currentLanguage,
@@ -198,6 +253,8 @@ export const OxyProvider: React.FC<OxyContextProviderProps> = ({
     logger,
   });
 
+  const queryClient = useQueryClient();
+
   const {
     sessions,
     activeSessionId,
@@ -220,6 +277,7 @@ export const OxyProvider: React.FC<OxyContextProviderProps> = ({
     setAuthError: (message) => setAuthState({ error: message }),
     logger,
     setTokenReady,
+    queryClient,
   });
 
   const {
@@ -231,7 +289,7 @@ export const OxyProvider: React.FC<OxyContextProviderProps> = ({
     hasIdentity,
     getPublicKey,
     isIdentitySynced,
-    syncIdentity,
+    syncIdentity: syncIdentityBase,
   } = useAuthOperations({
     oxyServices,
     storage,
@@ -254,6 +312,124 @@ export const OxyProvider: React.FC<OxyContextProviderProps> = ({
     logger,
   });
 
+  // syncIdentity - TanStack Query handles offline mutations automatically
+  const syncIdentity = useCallback(async () => {
+    return await syncIdentityBase();
+  }, [syncIdentityBase]);
+
+  // Clear all account data when identity is lost (for accounts app)
+  // In accounts app, identity = account, so losing identity means losing everything
+  const clearAllAccountData = useCallback(async (): Promise<void> => {
+    // Clear TanStack Query cache (in-memory)
+    queryClient.clear();
+    
+    // Clear persisted query cache
+    if (storage) {
+      try {
+        await clearQueryCache(storage);
+      } catch (error) {
+        if (logger) {
+          logger('Failed to clear persisted query cache', error);
+        }
+      }
+    }
+    
+    // Clear session state (sessions, activeSessionId, storage)
+    await clearSessionState();
+    
+    // Clear identity sync state from storage
+    if (storage) {
+      try {
+        await storage.removeItem('oxy_identity_synced');
+      } catch (error) {
+        if (logger) {
+          logger('Failed to clear identity sync state', error);
+        }
+      }
+    }
+    
+    // Reset auth store identity sync state
+    useAuthStore.getState().setIdentitySynced(false);
+    useAuthStore.getState().setSyncing(false);
+    
+    // Reset account store
+    useAccountStore.getState().reset();
+    
+    // Clear HTTP service cache
+    oxyServices.clearCache();
+  }, [queryClient, storage, clearSessionState, logger, oxyServices]);
+
+  // Delete identity and clear all account data
+  // In accounts app, deleting identity means losing the account completely
+  const deleteIdentityAndClearAccount = useCallback(async (
+    skipBackup: boolean = false,
+    force: boolean = false,
+    userConfirmed: boolean = false
+  ): Promise<void> => {
+    // First, clear all account data
+    await clearAllAccountData();
+    
+    // Then delete the identity keys
+    const { KeyManager } = await import('../../crypto/keyManager.js');
+    await KeyManager.deleteIdentity(skipBackup, force, userConfirmed);
+  }, [clearAllAccountData]);
+
+  // Network reconnect sync - TanStack Query automatically retries mutations on reconnect
+  // We only need to sync identity if it's not synced
+  useEffect(() => {
+    if (!storage) return;
+
+    let wasOffline = false;
+    let checkInterval: NodeJS.Timeout | null = null;
+
+    const checkNetworkAndSync = async () => {
+      try {
+        // Try a lightweight health check to see if we're online
+        await oxyServices.healthCheck().catch(() => {
+          wasOffline = true;
+          return;
+        });
+
+        // If we were offline and now we're online, sync identity if needed
+        if (wasOffline) {
+          if (__DEV__ && logger) {
+            logger('Network reconnected, checking identity sync...');
+          }
+
+          // Sync identity first (if not synced)
+          try {
+            const isSynced = await storage.getItem('oxy_identity_synced');
+            if (isSynced === 'false') {
+              await syncIdentity();
+            }
+          } catch (syncError) {
+            if (__DEV__ && logger) {
+              logger('Error syncing identity on reconnect', syncError);
+            }
+          }
+
+          // TanStack Query will automatically retry pending mutations
+          wasOffline = false;
+        }
+      } catch (error) {
+        // Network check failed - we're offline
+        wasOffline = true;
+      }
+    };
+
+    // Check immediately
+    checkNetworkAndSync();
+
+    // Check periodically (every 10 seconds when app is active)
+    checkInterval = setInterval(checkNetworkAndSync, 10000);
+
+    return () => {
+      if (checkInterval) {
+        clearInterval(checkInterval);
+      }
+    };
+  }, [oxyServices, storage, syncIdentity, logger]);
+
   const { getDeviceSessions, logoutAllDeviceSessions, updateDeviceName } = useDeviceManagement({
     oxyServices,
     activeSessionId,
@@ -404,6 +580,7 @@ export const OxyProvider: React.FC<OxyContextProviderProps> = ({
     isAuthenticated,
     isLoading,
     isTokenReady: tokenReady,
+    isStorageReady,
     error,
     currentLanguage,
     currentLanguageMetadata,
@@ -416,6 +593,7 @@ export const OxyProvider: React.FC<OxyContextProviderProps> = ({
     getPublicKey,
     isIdentitySynced,
     syncIdentity,
+    deleteIdentityAndClearAccount,
     identitySyncState: {
       isSynced: isIdentitySyncedStore ?? true,
       isSyncing: isSyncing ?? false,
@@ -429,6 +607,8 @@ export const OxyProvider: React.FC<OxyContextProviderProps> = ({
     getDeviceSessions,
     logoutAllDeviceSessions,
     updateDeviceName,
+    clearSessionState,
+    clearAllAccountData,
     oxyServices,
     useFollow: useFollowHook,
     showBottomSheet: showBottomSheetForContext,
@@ -441,6 +621,7 @@ export const OxyProvider: React.FC<OxyContextProviderProps> = ({
     getPublicKey,
     isIdentitySynced,
     syncIdentity,
+    deleteIdentityAndClearAccount,
     isIdentitySyncedStore,
     isSyncing,
     currentLanguage,
@@ -460,7 +641,9 @@ export const OxyProvider: React.FC<OxyContextProviderProps> = ({
     setLanguage,
     switchSessionForContext,
     tokenReady,
+    isStorageReady,
     updateDeviceName,
+    clearAllAccountData,
     useFollowHook,
     user,
     showBottomSheetForContext,