@oxyhq/services 6.9.42 → 6.9.44

package/src/ui/components/OxyProvider.tsx

@@ -1,9 +1,9 @@
-import type React from 'react';
-import { useEffect, useRef, useState, type FC } from 'react';
+import { lazy, Suspense, useEffect, useRef, useState, type ComponentType, type FC, type ReactNode } from 'react';
 import { AppState, Platform } from 'react-native';
 import type { OxyProviderProps } from '../types/navigation';
 import { OxyContextProvider, type OxyContextProviderProps } from '../context/OxyContext';
 import { QueryClientProvider, focusManager, onlineManager } from '@tanstack/react-query';
+import { BloomThemeProvider } from '@oxyhq/bloom';
 import { setupFonts } from './FontLoader';
 import { Toaster } from '../../lib/sonner';
 import { createQueryClient } from '../hooks/queryClient';
@@ -15,39 +15,27 @@ setupFonts();
 // Detect if running on web
 const isWeb = Platform.OS === 'web';
 
-// Conditionally import components
-let KeyboardProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => <>{children}</>;
-let BottomSheetRouter: React.ComponentType | null = null;
-let SignInModal: React.ComponentType | null = null;
-
-// KeyboardProvider only on native
-if (!isWeb) {
-    try {
-        KeyboardProvider = require('react-native-keyboard-controller').KeyboardProvider;
-    } catch {
-        // KeyboardProvider not available
-    }
-}
-
-// BottomSheetRouter works on all platforms
-try {
-    BottomSheetRouter = require('./BottomSheetRouter').default;
-} catch (error) {
-    if (__DEV__) {
-        console.error('[OxyProvider] Failed to load BottomSheetRouter:', error);
-    }
-}
-
-// SignInModal works on all platforms
-try {
-    SignInModal = require('./SignInModal').default;
-} catch {
-    // SignInModal not available
-}
-
-if (__DEV__ && !BottomSheetRouter) {
-    console.warn('[OxyProvider] BottomSheetRouter is null — bottom sheet navigation will not work. Check that BottomSheetRouter.tsx and its dependencies are importable.');
-}
+// Lazy-load optional components (avoids require() for ESM compatibility).
+// The .then() extracts + casts the default export so that `lazy()` sees
+// `Promise<{ default: ComponentType }>` instead of the full module namespace.
+const LazyBottomSheetRouter = lazy((): Promise<{ default: ComponentType }> =>
+    import('./BottomSheetRouter.js').then(
+        (mod) => ({ default: mod.default as unknown as ComponentType }),
+        (error) => {
+            if (__DEV__) {
+                console.error('[OxyProvider] Failed to load BottomSheetRouter:', error);
+            }
+            return { default: (() => null) as FC };
+        },
+    ),
+);
+
+const LazySignInModal = lazy((): Promise<{ default: ComponentType }> =>
+    import('./SignInModal.js').then(
+        (mod) => ({ default: mod.default as unknown as ComponentType }),
+        () => ({ default: (() => null) as FC }),
+    ),
+);
 
 /**
  * OxyProvider - Universal provider for Expo apps (native + web)
@@ -91,8 +79,21 @@ const OxyProvider: FC<OxyProviderProps> = ({
     authWebUrl,
     authRedirectUri,
     queryClient: providedQueryClient,
+    themeMode = 'system',
+    colorPreset,
 }) => {
 
+    // Dynamic KeyboardProvider for native (avoids require() for ESM compatibility)
+    const [KBProvider, setKBProvider] = useState<FC<{ children: ReactNode }> | null>(null);
+    useEffect(() => {
+        if (isWeb) return;
+        const moduleName = 'react-native-keyboard-controller';
+        import(/* webpackIgnore: true */ moduleName)
+            .then((mod) => setKBProvider(() => mod.KeyboardProvider))
+            .catch(() => { /* KeyboardProvider not available */ });
+    }, []);
+    const KeyboardWrapper: FC<{ children: ReactNode }> = KBProvider ?? (({ children }) => <>{children}</>);
+
     // Simple storage initialization for query persistence
     const storageRef = useRef<StorageInterface | null>(null);
     const queryClientRef = useRef<ReturnType<typeof createQueryClient> | null>(null);
@@ -218,26 +219,30 @@ const OxyProvider: FC<OxyProviderProps> = ({
     // Core content: QueryClient + OxyContext + UI overlays
     const coreContent = (
         <QueryClientProvider client={queryClient}>
-            <OxyContextProvider
-                oxyServices={oxyServices as OxyContextProviderProps['oxyServices']}
-                baseURL={baseURL}
-                authWebUrl={authWebUrl}
-                authRedirectUri={authRedirectUri}
-                storageKeyPrefix={storageKeyPrefix}
-                onAuthStateChange={onAuthStateChange as OxyContextProviderProps['onAuthStateChange']}
-            >
-                {children}
-                {BottomSheetRouter && <BottomSheetRouter />}
-                {SignInModal && <SignInModal />}
-                <Toaster />
-            </OxyContextProvider>
+            <BloomThemeProvider mode={themeMode} colorPreset={colorPreset}>
+                <OxyContextProvider
+                    oxyServices={oxyServices as OxyContextProviderProps['oxyServices']}
+                    baseURL={baseURL}
+                    authWebUrl={authWebUrl}
+                    authRedirectUri={authRedirectUri}
+                    storageKeyPrefix={storageKeyPrefix}
+                    onAuthStateChange={onAuthStateChange as OxyContextProviderProps['onAuthStateChange']}
+                >
+                    {children}
+                    <Suspense fallback={null}>
+                        <LazyBottomSheetRouter />
+                        <LazySignInModal />
+                    </Suspense>
+                    <Toaster />
+                </OxyContextProvider>
+            </BloomThemeProvider>
         </QueryClientProvider>
     );
 
     return (
-        <KeyboardProvider>
+        <KeyboardWrapper>
             {coreContent}
-        </KeyboardProvider>
+        </KeyboardWrapper>
     );
 };
 

package/src/ui/components/fileManagement/FileDetailsModal.tsx

@@ -36,7 +36,7 @@ export const FileDetailsModal: React.FC<FileDetailsModalProps> = ({
             presentationStyle="pageSheet"
             onRequestClose={onClose}
         >
-            <View className="bg-background" style={fileManagementStyles.modalContainer}>
+            <View style={[fileManagementStyles.modalContainer, { backgroundColor: colors.background }]}>
                 <View className="border-b border-border" style={fileManagementStyles.modalHeader}>
                     <TouchableOpacity
                         style={fileManagementStyles.modalCloseButton}

package/src/ui/components/fileManagement/UploadPreview.tsx

@@ -40,7 +40,7 @@ const UploadPreviewContent: React.FC<{
     const totalSize = pendingFiles.reduce((sum, f) => sum + f.size, 0);
 
     return (
-        <View className="bg-background" style={fileManagementStyles.uploadPreviewContainer}>
+        <View style={[fileManagementStyles.uploadPreviewContainer, { backgroundColor: colors.background }]}>
             <View className="border-b border-border" style={fileManagementStyles.uploadPreviewHeader}>
                 <Text className="text-foreground" style={fileManagementStyles.uploadPreviewTitle}>
                     Review Files ({pendingFiles.length})

package/src/ui/components/modals/DeleteAccountModal.tsx

@@ -78,7 +78,7 @@ const DeleteAccountModal: React.FC<DeleteAccountModalProps> = ({
                     activeOpacity={1}
                     onPress={handleClose}
                 />
-                <View className="bg-background" style={styles.modal}>
+                <View style={[styles.modal, { backgroundColor: theme.colors.background }]}>
                     <View style={styles.header}>
                         <OxyIcon name="alert" size={32} color={theme.colors.error} />
                         <Text className="text-destructive" style={styles.title}>

package/src/ui/context/OxyContext.tsx

@@ -10,7 +10,8 @@ import {
   type ReactNode,
 } from 'react';
 import { OxyServices } from '@oxyhq/core';
-import type { User, ApiError } from '@oxyhq/core';
+import type { User, ApiError, SessionLoginResponse } from '@oxyhq/core';
+import type { ManagedAccount, CreateManagedAccountInput } from '@oxyhq/core';
 import { KeyManager } from '@oxyhq/core';
 import type { ClientSession } from '@oxyhq/core';
 import { toast } from '../../lib/sonner';
@@ -58,13 +59,7 @@ export interface OxyContextState {
    * Handle session from popup authentication
    * Updates auth state, persists session to storage
    */
-  handlePopupSession: (session: {
-    sessionId: string;
-    accessToken?: string;
-    expiresAt?: string;
-    user: User;
-    deviceId?: string;
-  }) => Promise<void>;
+  handlePopupSession: (session: SessionLoginResponse) => Promise<void>;
 
   // Session management
   logout: (targetSessionId?: string) => Promise<void>;
@@ -86,10 +81,18 @@ export interface OxyContextState {
   updateDeviceName: (deviceName: string) => Promise<void>;
   clearSessionState: () => Promise<void>;
   clearAllAccountData: () => Promise<void>;
+  storageKeyPrefix: string;
   oxyServices: OxyServices;
   useFollow?: UseFollowHook;
   showBottomSheet?: (screenOrConfig: RouteName | { screen: RouteName; props?: Record<string, unknown> }) => void;
   openAvatarPicker: () => void;
+
+  // Managed accounts (sub-accounts / managed identities)
+  actingAs: string | null;
+  managedAccounts: ManagedAccount[];
+  setActingAs: (userId: string | null) => void;
+  refreshManagedAccounts: () => Promise<void>;
+  createManagedAccount: (data: CreateManagedAccountInput) => Promise<ManagedAccount>;
 }
 
 const OxyContext = createContext<OxyContextState | null>(null);
@@ -450,7 +453,7 @@ export const OxyProvider: React.FC<OxyContextProviderProps> = ({
 
   // Web SSO: Automatically check for cross-domain session on web platforms
   // Also used for popup auth - updates all state and persists session
-  const handleWebSSOSession = useCallback(async (session: any) => {
+  const handleWebSSOSession = useCallback(async (session: SessionLoginResponse) => {
     if (!session?.user || !session?.sessionId) {
       if (__DEV__) {
         loggerUtil.warn('handleWebSSOSession: Invalid session', { component: 'OxyContext' });
@@ -476,8 +479,19 @@ export const OxyProvider: React.FC<OxyContextProviderProps> = ({
 
     updateSessions([clientSession], { merge: true });
     setActiveSessionId(session.sessionId);
-    loginSuccess(session.user);
-    onAuthStateChange?.(session.user);
+
+    // Fetch the full user profile now that we have a valid access token.
+    // The session only carries MinimalUserData; the store and callbacks expect a full User.
+    let fullUser: User;
+    try {
+      fullUser = await oxyServices.getCurrentUser();
+    } catch {
+      // If the profile fetch fails, fall back to the minimal data from the session
+      // so the user is still logged in (the store accepts User, but the shapes overlap at runtime).
+      fullUser = session.user as unknown as User;
+    }
+    loginSuccess(fullUser);
+    onAuthStateChange?.(fullUser);
 
     // Persist to storage
     if (storage) {
@@ -567,7 +581,7 @@ export const OxyProvider: React.FC<OxyContextProviderProps> = ({
       pendingIdPCleanupRef.current?.();
       pendingIdPCleanupRef.current = null;
     };
-  }, [user, initialized, clearSessionState]);
+  }, [user, initialized, clearSessionState, authWebUrl]);
 
   const activeSession = activeSessionId
     ? sessions.find((session) => session.sessionId === activeSessionId)
@@ -639,6 +653,68 @@ export const OxyProvider: React.FC<OxyContextProviderProps> = ({
     showBottomSheet: showBottomSheetForContext,
   });
 
+  // --- Managed accounts state ---
+  const [actingAs, setActingAsState] = useState<string | null>(null);
+  const [managedAccounts, setManagedAccounts] = useState<ManagedAccount[]>([]);
+
+  // Restore actingAs from storage on startup
+  useEffect(() => {
+    if (!storage || !initialized) return;
+    let mounted = true;
+    (async () => {
+      try {
+        const stored = await storage.getItem(`${storageKeyPrefix}_acting_as`);
+        if (mounted && stored) {
+          setActingAsState(stored);
+          oxyServices.setActingAs(stored);
+        }
+      } catch (err) {
+        if (__DEV__) {
+          loggerUtil.debug('Failed to restore actingAs from storage', { component: 'OxyContext' }, err as unknown);
+        }
+      }
+    })();
+    return () => { mounted = false; };
+  }, [storage, initialized, storageKeyPrefix, oxyServices]);
+
+  // Load managed accounts when authenticated
+  const refreshManagedAccounts = useCallback(async (): Promise<void> => {
+    if (!isAuthenticated) return;
+    try {
+      const accounts = await oxyServices.getManagedAccounts();
+      setManagedAccounts(accounts);
+    } catch (err) {
+      if (__DEV__) {
+        loggerUtil.debug('Failed to load managed accounts', { component: 'OxyContext' }, err as unknown);
+      }
+    }
+  }, [isAuthenticated, oxyServices]);
+
+  useEffect(() => {
+    if (isAuthenticated && initialized && tokenReady) {
+      refreshManagedAccounts();
+    }
+  }, [isAuthenticated, initialized, tokenReady, refreshManagedAccounts]);
+
+  const setActingAs = useCallback((userId: string | null) => {
+    oxyServices.setActingAs(userId);
+    setActingAsState(userId);
+    // Persist to storage
+    if (storage) {
+      if (userId) {
+        storage.setItem(`${storageKeyPrefix}_acting_as`, userId).catch(() => {});
+      } else {
+        storage.removeItem(`${storageKeyPrefix}_acting_as`).catch(() => {});
+      }
+    }
+  }, [oxyServices, storage, storageKeyPrefix]);
+
+  const createManagedAccountFn = useCallback(async (data: CreateManagedAccountInput): Promise<ManagedAccount> => {
+    const account = await oxyServices.createManagedAccount(data);
+    await refreshManagedAccounts();
+    return account;
+  }, [oxyServices, refreshManagedAccounts]);
+
   const contextValue: OxyContextState = useMemo(() => ({
     user,
     sessions,
@@ -667,10 +743,16 @@ export const OxyProvider: React.FC<OxyContextProviderProps> = ({
     updateDeviceName,
     clearSessionState,
     clearAllAccountData,
+    storageKeyPrefix,
     oxyServices,
     useFollow: useFollowHook,
     showBottomSheet: showBottomSheetForContext,
     openAvatarPicker,
+    actingAs,
+    managedAccounts,
+    setActingAs,
+    refreshManagedAccounts,
+    createManagedAccount: createManagedAccountFn,
   }), [
     activeSessionId,
     signIn,
@@ -689,6 +771,7 @@ export const OxyProvider: React.FC<OxyContextProviderProps> = ({
     logoutAll,
     logoutAllDeviceSessions,
     oxyServices,
+    storageKeyPrefix,
     refreshSessionsWithUser,
     sessions,
     setLanguage,
@@ -701,6 +784,11 @@ export const OxyProvider: React.FC<OxyContextProviderProps> = ({
     user,
     showBottomSheetForContext,
     openAvatarPicker,
+    actingAs,
+    managedAccounts,
+    setActingAs,
+    refreshManagedAccounts,
+    createManagedAccountFn,
   ]);
 
   return (
@@ -742,8 +830,14 @@ const LOADING_STATE: OxyContextState = {
   updateDeviceName: noop,
   clearSessionState: noop,
   clearAllAccountData: noop,
+  storageKeyPrefix: 'oxy_session',
   oxyServices: null as any,
   openAvatarPicker: () => {},
+  actingAs: null,
+  managedAccounts: [],
+  setActingAs: () => {},
+  refreshManagedAccounts: noop,
+  createManagedAccount: noop,
 };
 
 export const useOxy = (): OxyContextState => {

package/src/ui/context/hooks/useAuthOperations.ts

@@ -8,7 +8,6 @@ import { handleAuthError, isInvalidSessionError } from '../../utils/errorHandler
 import type { StorageInterface } from '../../utils/storageHelpers';
 import type { OxyServices } from '@oxyhq/core';
 import { SignatureService } from '@oxyhq/core';
-import * as Crypto from 'expo-crypto';
 
 /** Type guard for error objects with optional code and status properties */
 function isErrorWithCodeOrStatus(error: unknown): error is { code?: string; status?: number; message?: string } {
@@ -133,6 +132,8 @@ export const useAuthOperations = ({
         }
 
         // Generate a local session ID using cryptographically secure randomness
+        const cryptoModule = 'expo-crypto';
+        const Crypto = await import(/* webpackIgnore: true */ cryptoModule);
         const localSessionId = `offline_${Crypto.getRandomUUID()}`;
         const localDeviceId = `device_${Crypto.getRandomUUID()}`;
         const expiresAt = new Date(Date.now() + 7 * 24 * 60 * 60 * 1000).toISOString(); // 7 days

package/src/ui/navigation/routes.ts

@@ -39,7 +39,8 @@ export type RouteName =
     | 'AboutKarma'
     | 'KarmaFAQ'
     | 'FollowersList'  // List of user's followers
-    | 'FollowingList'; // List of users being followed
+    | 'FollowingList' // List of users being followed
+    | 'CreateManagedAccount'; // Create a new managed sub-account
 
 // Lazy screen loaders - functions that return screen components on-demand
 // This breaks the require cycle by deferring imports until screens are actually needed
@@ -80,6 +81,7 @@ const screenLoaders: Record<RouteName, () => ComponentType<BaseScreenProps>> = {
     // User list screens (followers/following)
     FollowersList: () => require('../screens/FollowersListScreen').default,
     FollowingList: () => require('../screens/FollowingListScreen').default,
+    CreateManagedAccount: () => require('../screens/CreateManagedAccountScreen').default,
 };
 
 // Cache loaded components to avoid re-requiring

package/src/ui/screens/AccountCenterScreen.tsx

@@ -32,7 +32,7 @@ const AccountCenterScreen: React.FC<BaseScreenProps> = ({
     navigate,
 }) => {
     // Use useOxy() hook for OxyContext values
-    const { user, logout, isLoading, sessions, isAuthenticated } = useOxy();
+    const { user, logout, isLoading, sessions, isAuthenticated, managedAccounts } = useOxy();
     const { t } = useI18n();
     const bloomTheme = useTheme();
     const colorScheme = useColorScheme();
@@ -65,7 +65,7 @@ const AccountCenterScreen: React.FC<BaseScreenProps> = ({
 
     if (!isAuthenticated) {
         return (
-            <View style={styles.container} className="bg-background">
+            <View style={[styles.container, { backgroundColor: bloomTheme.colors.background }]}>
                 <Text style={styles.message} className="text-foreground">{t('common.status.notSignedIn') || 'Not signed in'}</Text>
             </View>
         );
@@ -73,14 +73,14 @@ const AccountCenterScreen: React.FC<BaseScreenProps> = ({
 
     if (isLoading) {
         return (
-            <View style={[styles.container, { justifyContent: 'center' }]} className="bg-background">
+            <View style={[styles.container, { justifyContent: 'center', backgroundColor: bloomTheme.colors.background }]}>
                 <ActivityIndicator size="large" color={bloomTheme.colors.primary} />
             </View>
         );
     }
 
     return (
-        <View style={styles.container} className="bg-background">
+        <View style={[styles.container, { backgroundColor: bloomTheme.colors.background }]}>
             {/* Header with user profile */}
             {user && (
                 <ProfileCard
@@ -181,6 +181,26 @@ const AccountCenterScreen: React.FC<BaseScreenProps> = ({
                     </SettingsListGroup>
                 )}
 
+                {/* Managed Accounts */}
+                {isAuthenticated && (
+                    <SettingsListGroup title="Managed Accounts">
+                        <SettingsListItem
+                            icon={<SettingsIcon name="account-switch" color={colors.iconStorage} />}
+                            title="Manage Identities"
+                            description={managedAccounts.length > 0
+                                ? `${managedAccounts.length} managed ${managedAccounts.length === 1 ? 'identity' : 'identities'}`
+                                : 'Sub-accounts you control'}
+                            onPress={() => navigate?.('AccountSwitcher')}
+                        />
+                        <SettingsListItem
+                            icon={<SettingsIcon name="account-plus" color={colors.iconPersonalInfo} />}
+                            title="Create New Identity"
+                            description="Add a managed sub-account"
+                            onPress={() => navigate?.('CreateManagedAccount')}
+                        />
+                    </SettingsListGroup>
+                )}
+
                 {/* Additional Options */}
                 <SettingsListGroup title={t('accountCenter.sections.moreOptions') || 'More Options'}>
                     {Platform.OS !== 'web' ? (

package/src/ui/screens/AccountOverviewScreen.tsx

@@ -320,7 +320,7 @@ const AccountOverviewScreen: React.FC<BaseScreenProps> = ({
 
     if (!isAuthenticated) {
         return (
-            <View style={styles.container} className="bg-background">
+            <View style={[styles.container, { backgroundColor: bloomTheme.colors.background }]}>
                 <Text style={styles.message} className="text-foreground">{t('common.status.notSignedIn')}</Text>
             </View>
         );
@@ -328,7 +328,7 @@ const AccountOverviewScreen: React.FC<BaseScreenProps> = ({
 
     if (isLoading) {
         return (
-            <View style={[styles.container, { justifyContent: 'center' }]} className="bg-background">
+            <View style={[styles.container, { justifyContent: 'center', backgroundColor: bloomTheme.colors.background }]}>
                 <ActivityIndicator size="large" color={themeColors.primaryColor} />
             </View>
         );
@@ -336,7 +336,7 @@ const AccountOverviewScreen: React.FC<BaseScreenProps> = ({
 
 
     return (
-        <View style={styles.container} className="bg-background">
+        <View style={[styles.container, { backgroundColor: bloomTheme.colors.background }]}>
             <ScrollView
                 style={styles.content}
                 contentContainerStyle={styles.scrollContent}

package/src/ui/screens/AccountSettingsScreen.tsx

@@ -316,14 +316,14 @@ const AccountSettingsScreen: React.FC<BaseScreenProps & { initialField?: string;
 
     if (userLoading || !isAuthenticated) {
         return (
-            <View style={[styles.container, { justifyContent: 'center' }]} className="bg-background">
+            <View style={[styles.container, { justifyContent: 'center', backgroundColor: bloomTheme.colors.background }]}>
                 <ActivityIndicator size="large" color={bloomTheme.colors.primary} />
             </View>
         );
     }
 
     return (
-        <View style={styles.container} className="bg-background">
+        <View style={[styles.container, { backgroundColor: bloomTheme.colors.background }]}>
             <ScrollView
                 ref={scrollViewRef}
                 style={styles.content}