@oxyhq/services 5.14.0 → 5.15.1

package/src/ui/hooks/useThemeStyles.ts

@@ -0,0 +1,85 @@
+import { useMemo } from 'react';
+import { useColorScheme } from './use-color-scheme';
+import { Colors } from '../constants/theme';
+import { normalizeColorScheme } from '../utils/themeUtils';
+
+export interface ThemeStyles {
+    textColor: string;
+    backgroundColor: string;
+    secondaryBackgroundColor: string;
+    borderColor: string;
+    mutedTextColor: string;
+    isDarkTheme: boolean;
+    // Common semantic colors used across screens
+    primaryColor: string;
+    dangerColor: string;
+    successColor: string;
+    // Normalized color scheme and theme colors
+    colorScheme: 'light' | 'dark';
+    colors: typeof Colors.light;
+}
+
+/**
+ * Reusable hook for theme styles
+ * Replaces duplicated themeStyles useMemo pattern across multiple screens
+ * 
+ * Provides consistent theme colors across all service screens:
+ * - Base colors (text, background, borders)
+ * - Semantic colors (primary, danger, success)
+ * - Theme-aware calculations
+ * - Normalized color scheme and Colors object
+ * 
+ * @param theme - Theme string ('light' | 'dark')
+ * @param colorSchemeFromHook - Optional color scheme from useColorScheme() hook. If not provided, will call useColorScheme() internally.
+ * @returns ThemeStyles object with consistent color values
+ * 
+ * @example
+ * ```tsx
+ * const themeStyles = useThemeStyles(theme);
+ * <View style={{ backgroundColor: themeStyles.backgroundColor }}>
+ *   <Text style={{ color: themeStyles.textColor }}>Hello</Text>
+ * </View>
+ * ```
+ * 
+ * @example
+ * ```tsx
+ * const colorScheme = useColorScheme();
+ * const themeStyles = useThemeStyles(theme, colorScheme);
+ * const iconColor = themeStyles.colors.iconSecurity;
+ * ```
+ */
+export const useThemeStyles = (
+    theme: string,
+    colorSchemeFromHook?: string | null
+): ThemeStyles => {
+    const hookColorScheme = useColorScheme();
+    const colorSchemeToUse = colorSchemeFromHook ?? hookColorScheme;
+    
+    return useMemo(() => {
+        const colorScheme = normalizeColorScheme(colorSchemeToUse, theme);
+        const isDarkTheme = colorScheme === 'dark';
+        const colors = Colors[colorScheme];
+        
+        return {
+            // Base colors
+            textColor: isDarkTheme ? '#FFFFFF' : '#000000',
+            backgroundColor: isDarkTheme ? '#121212' : '#FFFFFF',
+            secondaryBackgroundColor: isDarkTheme ? '#222222' : '#F5F5F5',
+            borderColor: isDarkTheme ? '#444444' : '#E0E0E0',
+            mutedTextColor: '#8E8E93', // Same for both themes
+            
+            // Semantic colors (consistent across themes)
+            primaryColor: '#007AFF',
+            dangerColor: '#FF3B30',
+            successColor: '#34C759',
+            
+            // Theme flag
+            isDarkTheme,
+            
+            // Normalized color scheme and theme colors
+            colorScheme,
+            colors,
+        };
+    }, [theme, colorSchemeToUse]);
+};
+

package/src/ui/index.ts

@@ -7,7 +7,7 @@
 import isFrontend from './isFrontend';
 
 // Real UI exports
-let OxyProvider, OxySignInButton, OxyLogo, Avatar, FollowButton, OxyPayButton, FontLoader, setupFonts, OxyIcon, useOxy, useOxyAuth, useOxyUser, useOxyKarma, useOxyPayments, useOxyDevices, useOxyNotifications, useOxySocket, useOxyQR, OxyContextProvider, OxyContextState, OxyContextProviderProps, useFollow, ProfileScreen, OxyRouter, useAuthStore, useAccountStore, fontFamilies, fontStyles, toast;
+let OxyProvider, OxySignInButton, OxyLogo, Avatar, FollowButton, OxyPayButton, FontLoader, setupFonts, OxyIcon, useOxy, useOxyAuth, useOxyUser, useOxyKarma, useOxyPayments, useOxyDevices, useOxyNotifications, useOxySocket, useOxyQR, OxyContextProvider, OxyContextState, OxyContextProviderProps, useFollow, ProfileScreen, useAuthStore, useAccountStore, fontFamilies, fontStyles, toast;
 
 if (isFrontend) {
   OxyProvider = require('./components/OxyProvider').default;
@@ -25,7 +25,6 @@ if (isFrontend) {
   OxyContextProviderProps = require('./context/OxyContext').OxyContextProviderProps;
   useFollow = require('./hooks').useFollow;
   ProfileScreen = require('./screens/ProfileScreen').default;
-  OxyRouter = require('./navigation/OxyRouter').default;
   useAuthStore = require('./stores/authStore').useAuthStore;
   useAccountStore = require('./stores/accountStore').useAccountStore;
   fontFamilies = require('./styles/fonts').fontFamilies;
@@ -50,7 +49,6 @@ if (isFrontend) {
   OxyContextProviderProps = {};
   useFollow = noopHook;
   ProfileScreen = noopComponent;
-  OxyRouter = noopComponent;
   useAuthStore = noopHook;
   useAccountStore = noopHook;
   fontFamilies = {};
@@ -74,7 +72,6 @@ export {
   OxyContextProviderProps,
   useFollow,
   ProfileScreen,
-  OxyRouter,
   useAuthStore,
   useAccountStore,
   fontFamilies,

package/src/ui/navigation/bottomSheetManager.ts

@@ -0,0 +1,191 @@
+import type { RouteName } from './routes';
+import { isValidRoute } from './routes';
+import { createStore } from 'zustand/vanilla';
+
+/**
+ * Bottom Sheet Manager - Pure state management module
+ * 
+ * Uses Zustand (vanilla) for robust state management without React dependencies.
+ * This ensures the manager can be imported safely anywhere.
+ */
+
+export interface NavigationHistoryEntry {
+    screen: RouteName;
+    props: Record<string, unknown>;
+    step?: number; // For step-based screens
+}
+
+export interface BottomSheetRouterState {
+    currentScreen: RouteName | null;
+    screenProps: Record<string, unknown>;
+    currentStep?: number; // Current step in step-based screen
+    navigationHistory: NavigationHistoryEntry[];
+    isOpen: boolean;
+}
+
+// Initial state
+const initialState: BottomSheetRouterState = {
+    currentScreen: null,
+    screenProps: {},
+    currentStep: undefined,
+    navigationHistory: [],
+    isOpen: false,
+};
+
+// Create vanilla store
+export const bottomSheetStore = createStore<BottomSheetRouterState>(() => initialState);
+
+// Use a generic ref type to avoid importing React types
+type BottomSheetRefObject = { current: { present: () => void; dismiss: () => void } | null } | null;
+let bottomSheetRef: BottomSheetRefObject = null;
+
+/**
+ * Set the bottom sheet ref so showBottomSheet can control it
+ */
+export const setBottomSheetRef = (ref: BottomSheetRefObject) => {
+    bottomSheetRef = ref;
+};
+
+/**
+ * Update the bottom sheet state
+ * (Kept for backward compatibility, but prefer using store directly if possible)
+ */
+export const updateBottomSheetState = (updates: Partial<BottomSheetRouterState>) => {
+    bottomSheetStore.setState((state) => ({ ...state, ...updates }));
+};
+
+/**
+ * Subscribe to bottom sheet state changes
+ * (Wrapper around store.subscribe for backward compatibility)
+ */
+export const subscribeToBottomSheetState = (listener: (state: BottomSheetRouterState) => void) => {
+    return bottomSheetStore.subscribe(listener);
+};
+
+/**
+ * Get the current bottom sheet state
+ * (Wrapper around store.getState for backward compatibility)
+ */
+export const getBottomSheetState = (): BottomSheetRouterState => {
+    return bottomSheetStore.getState();
+};
+
+/**
+ * Show the bottom sheet with a specific screen (internal - no route validation)
+ */
+export const managerShowBottomSheet = (
+    screen: RouteName,
+    props?: Record<string, unknown>,
+    options?: { addToHistory?: boolean; step?: number },
+): void => {
+    const currentState = bottomSheetStore.getState();
+    const addToHistory = options?.addToHistory !== false; // Default to true
+    
+    // If adding to history and there's a current screen, push it to history
+    if (addToHistory && currentState.currentScreen) {
+        const historyEntry: NavigationHistoryEntry = {
+            screen: currentState.currentScreen,
+            props: { ...currentState.screenProps },
+            step: currentState.currentStep,
+        };
+        
+        // We need to create a new array for immutability
+        const newHistory = [...currentState.navigationHistory, historyEntry];
+        bottomSheetStore.setState({ navigationHistory: newHistory });
+    }
+    
+    // Determine the new step
+    const newStep = options?.step ?? 
+        (props?.initialStep !== undefined ? props.initialStep : 
+         (addToHistory ? undefined : currentState.currentStep));
+    
+    bottomSheetStore.setState({
+        currentScreen: screen,
+        screenProps: props || {},
+        currentStep: newStep !== null && newStep !== undefined ? (newStep as number) : undefined,
+        isOpen: true,
+    });
+
+    // Present the sheet after state update
+    if (bottomSheetRef?.current) {
+        bottomSheetRef.current.present();
+    }
+};
+
+/**
+ * Close the bottom sheet (internal)
+ */
+export const managerCloseBottomSheet = (): void => {
+    bottomSheetStore.setState({
+        currentScreen: null,
+        screenProps: {},
+        currentStep: undefined,
+        navigationHistory: [],
+        isOpen: false,
+    });
+
+    if (bottomSheetRef?.current) {
+        bottomSheetRef.current.dismiss();
+    }
+};
+
+/**
+ * Go back in navigation history
+ * Returns true if back navigation was successful, false if history is empty
+ */
+export const managerGoBack = (): boolean => {
+    const currentState = bottomSheetStore.getState();
+
+    // If there's history, pop and navigate to previous screen
+    if (currentState.navigationHistory.length > 0) {
+        const previous = currentState.navigationHistory[currentState.navigationHistory.length - 1];
+        const newHistory = currentState.navigationHistory.slice(0, -1);
+        
+        bottomSheetStore.setState({
+            currentScreen: previous.screen,
+            screenProps: previous.props,
+            currentStep: previous.step,
+            navigationHistory: newHistory,
+            isOpen: true,
+        });
+        
+        return true;
+    }
+    
+    return false;
+};
+
+/**
+ * Public API for showing bottom sheets
+ */
+export const showBottomSheet = (
+    screenOrConfig: RouteName | { screen: RouteName; props?: Record<string, unknown> },
+): void => {
+    let screen: RouteName;
+    let props: Record<string, unknown> = {};
+
+    if (typeof screenOrConfig === 'string') {
+        screen = screenOrConfig;
+    } else {
+        screen = screenOrConfig.screen;
+        props = screenOrConfig.props || {};
+    }
+
+    if (!isValidRoute(screen)) {
+        if (__DEV__) {
+            console.warn(`[BottomSheetAPI] Invalid route: ${screen}`);
+        }
+        return;
+    }
+
+    managerShowBottomSheet(screen, props);
+};
+
+/**
+ * Public API for closing bottom sheets
+ */
+export const closeBottomSheet = (): void => {
+    managerCloseBottomSheet();
+};
+
+

package/src/ui/navigation/routes.ts

@@ -1,195 +1,113 @@
 import type { ComponentType } from 'react';
-import SignInScreen from '../screens/SignInScreen';
-import SignUpScreen from '../screens/SignUpScreen';
-import AccountCenterScreen from '../screens/AccountCenterScreen';
-import AccountSwitcherScreen from '../screens/AccountSwitcherScreen';
-import SessionManagementScreen from '../screens/SessionManagementScreen';
-import AccountOverviewScreen from '../screens/AccountOverviewScreen';
-import AccountSettingsScreen from '../screens/AccountSettingsScreen';
-import PremiumSubscriptionScreen from '../screens/PremiumSubscriptionScreen';
-import AppInfoScreen from '../screens/AppInfoScreen';
-import FeedbackScreen from '../screens/FeedbackScreen';
-import KarmaCenterScreen from '../screens/karma/KarmaCenterScreen';
-import KarmaLeaderboardScreen from '../screens/karma/KarmaLeaderboardScreen';
-import KarmaRulesScreen from '../screens/karma/KarmaRulesScreen';
-import KarmaAboutScreen from '../screens/karma/KarmaAboutScreen';
-import KarmaRewardsScreen from '../screens/karma/KarmaRewardsScreen';
-import KarmaFAQScreen from '../screens/karma/KarmaFAQScreen';
-import ProfileScreen from '../screens/ProfileScreen';
-import UserLinksScreen from '../screens/UserLinksScreen';
-import FileManagementScreen from '../screens/FileManagementScreen';
-import RecoverAccountScreen from '../screens/RecoverAccountScreen';
-import PaymentGatewayScreen from '../screens/PaymentGatewayScreen';
-import WelcomeNewUserScreen from '../screens/WelcomeNewUserScreen';
-import LanguageSelectorScreen from '../screens/LanguageSelectorScreen';
-import HistoryViewScreen from '../screens/HistoryViewScreen';
-import SavesCollectionsScreen from '../screens/SavesCollectionsScreen';
-import SearchSettingsScreen from '../screens/SearchSettingsScreen';
-import HelpSupportScreen from '../screens/HelpSupportScreen';
-import LegalDocumentsScreen from '../screens/LegalDocumentsScreen';
-import PrivacySettingsScreen from '../screens/PrivacySettingsScreen';
-import AccountVerificationScreen from '../screens/AccountVerificationScreen';
+import type { BaseScreenProps } from '../types/navigation';
 
-export interface RouteConfig {
-  component: ComponentType<any>;
-  snapPoints: string[];
-}
+// Lazy loading: Screens are loaded on-demand to break require cycles
+// This prevents screens (which import OxyContext) from being loaded
+// before OxyContext is fully initialized
 
-// Keep a literal list of route names for a precise union type
-export const routeNames = [
-  'SignIn',
-  'SignUp',
-  'RecoverAccount',
-  'AccountCenter',
-  'AccountSwitcher',
-  'SessionManagement',
-  'AccountOverview',
-  'EditProfile',
-  'PremiumSubscription',
-  'AppInfo',
-  'Feedback',
-  'KarmaCenter',
-  'KarmaLeaderboard',
-  'KarmaRules',
-  'AboutKarma',
-  'KarmaRewards',
-  'KarmaFAQ',
-  'Profile',
-  'UserLinks',
-  'FileManagement',
-  'PaymentGateway',
-  'WelcomeNewUser',
-  'LanguageSelector',
-  'HistoryView',
-  'SavesCollections',
-  'SearchSettings',
-  'HelpSupport',
-  'LegalDocuments',
-  'PrivacySettings',
-  'AccountVerification',
-] as const;
+// Define all available route names
+// Note: SignIn has been replaced with OxyAuth for cross-app authentication via Oxy Accounts
+export type RouteName =
+    | 'OxyAuth'          // Sign in with Oxy (QR code / deep link to Accounts app)
+    | 'AccountOverview'
+    | 'AccountSettings'
+    | 'AccountCenter'
+    | 'AccountSwitcher'
+    | 'AccountVerification'
+    | 'SessionManagement'
+    | 'PaymentGateway'
+    | 'Profile'
+    | 'LanguageSelector'
+    | 'PrivacySettings'
+    | 'SearchSettings'
+    | 'FileManagement'
+    | 'HelpSupport'
+    | 'Feedback'
+    | 'LegalDocuments'
+    | 'AppInfo'
+    | 'PremiumSubscription'
+    | 'WelcomeNewUser'
+    | 'UserLinks'
+    | 'HistoryView'
+    | 'SavesCollections'
+    | 'EditProfile' // For backward compatibility, maps to AccountSettings
+    | 'KarmaCenter'
+    | 'KarmaLeaderboard'
+    | 'KarmaRewards'
+    | 'KarmaRules'
+    | 'AboutKarma'
+    | 'KarmaFAQ'
+    // Legacy aliases for backward compatibility
+    | 'SignIn';  // Maps to OxyAuth
 
-export type RouteName = typeof routeNames[number];
+// Lazy screen loaders - functions that return screen components on-demand
+// This breaks the require cycle by deferring imports until screens are actually needed
+const screenLoaders: Record<RouteName, () => ComponentType<BaseScreenProps>> = {
+    OxyAuth: () => require('../screens/OxyAuthScreen').default,
+    // Legacy alias - SignIn now maps to OxyAuth
+    SignIn: () => require('../screens/OxyAuthScreen').default,
+    AccountOverview: () => require('../screens/AccountOverviewScreen').default,
+    AccountSettings: () => require('../screens/AccountSettingsScreen').default,
+    AccountCenter: () => require('../screens/AccountCenterScreen').default,
+    AccountSwitcher: () => require('../screens/AccountSwitcherScreen').default,
+    AccountVerification: () => require('../screens/AccountVerificationScreen').default,
+    SessionManagement: () => require('../screens/SessionManagementScreen').default,
+    PaymentGateway: () => require('../screens/PaymentGatewayScreen').default,
+    Profile: () => require('../screens/ProfileScreen').default,
+    LanguageSelector: () => require('../screens/LanguageSelectorScreen').default,
+    PrivacySettings: () => require('../screens/PrivacySettingsScreen').default,
+    SearchSettings: () => require('../screens/SearchSettingsScreen').default,
+    FileManagement: () => require('../screens/FileManagementScreen').default,
+    HelpSupport: () => require('../screens/HelpSupportScreen').default,
+    Feedback: () => require('../screens/FeedbackScreen').default,
+    LegalDocuments: () => require('../screens/LegalDocumentsScreen').default,
+    AppInfo: () => require('../screens/AppInfoScreen').default,
+    PremiumSubscription: () => require('../screens/PremiumSubscriptionScreen').default,
+    WelcomeNewUser: () => require('../screens/WelcomeNewUserScreen').default,
+    UserLinks: () => require('../screens/UserLinksScreen').default,
+    HistoryView: () => require('../screens/HistoryViewScreen').default,
+    SavesCollections: () => require('../screens/SavesCollectionsScreen').default,
+    // Backward compatibility - EditProfile maps to AccountSettings
+    EditProfile: () => require('../screens/AccountSettingsScreen').default,
+    // Karma screens
+    KarmaCenter: () => require('../screens/karma/KarmaCenterScreen').default,
+    KarmaLeaderboard: () => require('../screens/karma/KarmaLeaderboardScreen').default,
+    KarmaRewards: () => require('../screens/karma/KarmaRewardsScreen').default,
+    KarmaRules: () => require('../screens/karma/KarmaRulesScreen').default,
+    AboutKarma: () => require('../screens/karma/KarmaAboutScreen').default,
+    KarmaFAQ: () => require('../screens/karma/KarmaFAQScreen').default,
+};
+
+// Cache loaded components to avoid re-requiring
+const screenCache = new Map<RouteName, ComponentType<BaseScreenProps>>();
+
+// Helper function to get a screen component by route name (lazy loaded)
+export const getScreenComponent = (routeName: RouteName): ComponentType<BaseScreenProps> | undefined => {
+    // Return cached component if available
+    if (screenCache.has(routeName)) {
+        return screenCache.get(routeName);
+    }
+
+    // Lazy load the component
+    const loader = screenLoaders[routeName];
+    if (loader) {
+        try {
+            const component = loader();
+            screenCache.set(routeName, component);
+            return component;
+        } catch (error) {
+            if (__DEV__) {
+                console.error(`[Routes] Failed to load screen: ${routeName}`, error);
+            }
+            return undefined;
+        }
+    }
+
+    return undefined;
+};
 
-export const routes: Record<RouteName, RouteConfig> = {
-  SignIn: {
-    component: SignInScreen as unknown as ComponentType<any>,
-    snapPoints: ['10%', '80%'],
-  },
-  SignUp: {
-    component: SignUpScreen as unknown as ComponentType<any>,
-    snapPoints: ['10%', '90%'],
-  },
-  RecoverAccount: {
-    component: RecoverAccountScreen as unknown as ComponentType<any>,
-    snapPoints: ['10%', '80%'],
-  },
-  AccountCenter: {
-    component: AccountCenterScreen as unknown as ComponentType<any>,
-    snapPoints: ['60%', '100%'],
-  },
-  AccountSwitcher: {
-    component: AccountSwitcherScreen as unknown as ComponentType<any>,
-    snapPoints: ['70%', '100%'],
-  },
-  SessionManagement: {
-    component: SessionManagementScreen as unknown as ComponentType<any>,
-    snapPoints: ['70%', '100%'],
-  },
-  AccountOverview: {
-    component: AccountOverviewScreen as unknown as ComponentType<any>,
-    snapPoints: ['60%', '85%'],
-  },
-  EditProfile: {
-    component: AccountSettingsScreen as unknown as ComponentType<any>,
-    snapPoints: ['60%', '100%'],
-  },
-  PremiumSubscription: {
-    component: PremiumSubscriptionScreen as unknown as ComponentType<any>,
-    snapPoints: ['70%', '100%'],
-  },
-  AppInfo: {
-    component: AppInfoScreen as unknown as ComponentType<any>,
-    snapPoints: ['60%', '90%'],
-  },
-  Feedback: {
-    component: FeedbackScreen as unknown as ComponentType<any>,
-    snapPoints: ['70%', '100%'],
-  },
-  KarmaCenter: {
-    component: KarmaCenterScreen as unknown as ComponentType<any>,
-    snapPoints: ['60%', '100%'],
-  },
-  KarmaLeaderboard: {
-    component: KarmaLeaderboardScreen as unknown as ComponentType<any>,
-    snapPoints: ['60%', '100%'],
-  },
-  KarmaRules: {
-    component: KarmaRulesScreen as unknown as ComponentType<any>,
-    snapPoints: ['60%', '90%'],
-  },
-  AboutKarma: {
-    component: KarmaAboutScreen as unknown as ComponentType<any>,
-    snapPoints: ['60%', '90%'],
-  },
-  KarmaRewards: {
-    component: KarmaRewardsScreen as unknown as ComponentType<any>,
-    snapPoints: ['60%', '90%'],
-  },
-  KarmaFAQ: {
-    component: KarmaFAQScreen as unknown as ComponentType<any>,
-    snapPoints: ['60%', '90%'],
-  },
-  Profile: {
-    component: ProfileScreen as unknown as ComponentType<any>,
-    snapPoints: ['60%', '90%'],
-  },
-  UserLinks: {
-    component: UserLinksScreen as unknown as ComponentType<any>,
-    snapPoints: ['60%', '90%'],
-  },
-  FileManagement: {
-    component: FileManagementScreen as unknown as ComponentType<any>,
-    snapPoints: ['70%', '100%'],
-  },
-  PaymentGateway: {
-    component: PaymentGatewayScreen as unknown as ComponentType<any>,
-    snapPoints: ['60%', '90%'],
-  },
-  WelcomeNewUser: {
-    component: WelcomeNewUserScreen as unknown as ComponentType<any>,
-    snapPoints: ['65%', '90%'],
-  },
-  LanguageSelector: {
-    component: LanguageSelectorScreen as unknown as ComponentType<any>,
-    snapPoints: ['70%', '100%'],
-  },
-  HistoryView: {
-    component: HistoryViewScreen as unknown as ComponentType<any>,
-    snapPoints: ['70%', '100%'],
-  },
-  SavesCollections: {
-    component: SavesCollectionsScreen as unknown as ComponentType<any>,
-    snapPoints: ['70%', '100%'],
-  },
-  SearchSettings: {
-    component: SearchSettingsScreen as unknown as ComponentType<any>,
-    snapPoints: ['70%', '100%'],
-  },
-  HelpSupport: {
-    component: HelpSupportScreen as unknown as ComponentType<any>,
-    snapPoints: ['70%', '100%'],
-  },
-  LegalDocuments: {
-    component: LegalDocumentsScreen as unknown as ComponentType<any>,
-    snapPoints: ['70%', '100%'],
-  },
-  PrivacySettings: {
-    component: PrivacySettingsScreen as unknown as ComponentType<any>,
-    snapPoints: ['60%', '100%'],
-  },
-  AccountVerification: {
-    component: AccountVerificationScreen as unknown as ComponentType<any>,
-    snapPoints: ['70%', '100%'],
-  },
+// Helper function to check if a route exists
+// Uses the screenLoaders object to check existence without loading the screen
+export const isValidRoute = (routeName: string): routeName is RouteName => {
+    return routeName in screenLoaders;
 };