@oxyhq/services 5.25.0 → 5.26.1

package/src/shared/utils/networkUtils.ts

@@ -0,0 +1,248 @@
+/**
+ * Network Utility Functions
+ *
+ * Consolidated network utilities including circuit breaker pattern
+ * and exponential backoff for resilient API calls.
+ *
+ * @module shared/utils/networkUtils
+ */
+
+/**
+ * State for circuit breaker pattern.
+ */
+export interface CircuitBreakerState {
+  /** Number of consecutive failures */
+  consecutiveFailures: number;
+  /** Current interval between retries (ms) */
+  currentInterval: number;
+  /** Base interval for retries (ms) */
+  baseInterval: number;
+  /** Maximum interval cap (ms) */
+  maxInterval: number;
+  /** Number of failures before circuit opens */
+  maxFailures: number;
+  /** Whether the circuit is currently open (blocking requests) */
+  isOpen?: boolean;
+  /** Timestamp when circuit was opened */
+  openedAt?: number;
+}
+
+/**
+ * Configuration for circuit breaker.
+ */
+export interface CircuitBreakerConfig {
+  /** Base interval between retries in milliseconds. Default: 10000 (10s) */
+  baseInterval?: number;
+  /** Maximum interval cap in milliseconds. Default: 60000 (60s) */
+  maxInterval?: number;
+  /** Number of consecutive failures before opening circuit. Default: 5 */
+  maxFailures?: number;
+  /** Time to wait before attempting recovery in milliseconds. Default: 30000 (30s) */
+  recoveryTimeout?: number;
+}
+
+/**
+ * Default circuit breaker configuration.
+ */
+export const DEFAULT_CIRCUIT_BREAKER_CONFIG: Required<CircuitBreakerConfig> = {
+  baseInterval: 10000,
+  maxInterval: 60000,
+  maxFailures: 5,
+  recoveryTimeout: 30000,
+};
+
+/**
+ * Creates initial circuit breaker state.
+ *
+ * @param config - Optional custom configuration
+ * @returns Initial circuit breaker state
+ *
+ * @example
+ * ```ts
+ * const state = createCircuitBreakerState({ maxFailures: 3 });
+ * ```
+ */
+export const createCircuitBreakerState = (
+  config: CircuitBreakerConfig = {}
+): CircuitBreakerState => {
+  const { baseInterval, maxInterval, maxFailures } = {
+    ...DEFAULT_CIRCUIT_BREAKER_CONFIG,
+    ...config,
+  };
+
+  return {
+    consecutiveFailures: 0,
+    currentInterval: baseInterval,
+    baseInterval,
+    maxInterval,
+    maxFailures,
+    isOpen: false,
+  };
+};
+
+/**
+ * Calculates next interval using exponential backoff.
+ *
+ * @param state - Current circuit breaker state
+ * @returns Next interval in milliseconds
+ *
+ * @example
+ * ```ts
+ * const nextInterval = calculateBackoffInterval(state);
+ * await delay(nextInterval);
+ * ```
+ */
+export const calculateBackoffInterval = (state: CircuitBreakerState): number => {
+  const { consecutiveFailures, baseInterval, maxInterval } = state;
+
+  if (consecutiveFailures === 0) return baseInterval;
+
+  const backoffMultiplier = Math.min(
+    Math.pow(2, consecutiveFailures - 1),
+    maxInterval / baseInterval
+  );
+
+  return Math.min(baseInterval * backoffMultiplier, maxInterval);
+};
+
+/**
+ * Records a failure and updates circuit breaker state.
+ *
+ * @param state - Current circuit breaker state
+ * @returns Updated state after recording failure
+ *
+ * @example
+ * ```ts
+ * try {
+ *   await apiCall();
+ *   state = recordSuccess(state);
+ * } catch (error) {
+ *   state = recordFailure(state);
+ * }
+ * ```
+ */
+export const recordFailure = (state: CircuitBreakerState): CircuitBreakerState => {
+  const newFailures = state.consecutiveFailures + 1;
+  const newInterval = calculateBackoffInterval({
+    ...state,
+    consecutiveFailures: newFailures,
+  });
+
+  const shouldOpenCircuit = newFailures >= state.maxFailures;
+  const finalInterval = shouldOpenCircuit ? state.maxInterval : newInterval;
+
+  return {
+    ...state,
+    consecutiveFailures: newFailures,
+    currentInterval: finalInterval,
+    isOpen: shouldOpenCircuit,
+    openedAt: shouldOpenCircuit ? Date.now() : state.openedAt,
+  };
+};
+
+/**
+ * Records a success and resets circuit breaker state.
+ *
+ * @param state - Current circuit breaker state
+ * @returns Reset state after successful request
+ */
+export const recordSuccess = (state: CircuitBreakerState): CircuitBreakerState => {
+  return {
+    ...state,
+    consecutiveFailures: 0,
+    currentInterval: state.baseInterval,
+    isOpen: false,
+    openedAt: undefined,
+  };
+};
+
+/**
+ * Checks if the circuit breaker should allow a request.
+ *
+ * When the circuit is open, it will only allow requests after
+ * the recovery timeout has passed (half-open state).
+ *
+ * @param state - Current circuit breaker state
+ * @param recoveryTimeout - Time to wait before allowing recovery attempts
+ * @returns true if request should be allowed
+ */
+export const shouldAllowRequest = (
+  state: CircuitBreakerState,
+  recoveryTimeout: number = DEFAULT_CIRCUIT_BREAKER_CONFIG.recoveryTimeout
+): boolean => {
+  if (!state.isOpen) return true;
+
+  if (!state.openedAt) return true;
+
+  const timeSinceOpen = Date.now() - state.openedAt;
+  return timeSinceOpen >= recoveryTimeout;
+};
+
+/**
+ * Delays execution for a specified duration.
+ *
+ * @param ms - Milliseconds to delay
+ * @returns Promise that resolves after the delay
+ *
+ * @example
+ * ```ts
+ * await delay(1000); // Wait 1 second
+ * ```
+ */
+export const delay = (ms: number): Promise<void> =>
+  new Promise(resolve => setTimeout(resolve, ms));
+
+/**
+ * Executes a function with exponential backoff retry.
+ *
+ * @param fn - Async function to execute
+ * @param options - Retry options
+ * @returns Result of the function
+ * @throws Last error if all retries fail
+ *
+ * @example
+ * ```ts
+ * const result = await withRetry(
+ *   () => fetchData(),
+ *   { maxRetries: 3, baseDelay: 1000 }
+ * );
+ * ```
+ */
+export const withRetry = async <T>(
+  fn: () => Promise<T>,
+  options: {
+    maxRetries?: number;
+    baseDelay?: number;
+    maxDelay?: number;
+    shouldRetry?: (error: unknown) => boolean;
+    onRetry?: (error: unknown, attempt: number) => void;
+  } = {}
+): Promise<T> => {
+  const {
+    maxRetries = 3,
+    baseDelay = 1000,
+    maxDelay = 30000,
+    shouldRetry = () => true,
+    onRetry,
+  } = options;
+
+  let lastError: unknown;
+
+  for (let attempt = 0; attempt <= maxRetries; attempt++) {
+    try {
+      return await fn();
+    } catch (error) {
+      lastError = error;
+
+      if (attempt === maxRetries || !shouldRetry(error)) {
+        throw error;
+      }
+
+      const delayMs = Math.min(baseDelay * Math.pow(2, attempt), maxDelay);
+      onRetry?.(error, attempt + 1);
+      await delay(delayMs);
+    }
+  }
+
+  throw lastError;
+};

package/src/shared/utils/themeUtils.ts

@@ -0,0 +1,115 @@
+/**
+ * Theme Utility Functions
+ *
+ * Consolidated theme utilities for normalizing and handling color schemes
+ * across the OxyServices ecosystem.
+ *
+ * @module shared/utils/themeUtils
+ */
+
+/**
+ * Valid theme values in the Oxy ecosystem.
+ */
+export type ThemeValue = 'light' | 'dark';
+
+/**
+ * Normalizes a theme value to ensure it's always 'light' or 'dark'.
+ *
+ * @param theme - Theme value (may be 'light' | 'dark' | string | undefined)
+ * @returns Normalized 'light' | 'dark' theme (defaults to 'light')
+ *
+ * @example
+ * ```ts
+ * normalizeTheme('dark');     // 'dark'
+ * normalizeTheme('light');    // 'light'
+ * normalizeTheme('unknown');  // 'light'
+ * normalizeTheme(undefined);  // 'light'
+ * normalizeTheme(null);       // 'light'
+ * ```
+ */
+export const normalizeTheme = (theme?: string | null): ThemeValue =>
+  theme === 'light' || theme === 'dark' ? theme : 'light';
+
+/**
+ * Normalizes a color scheme value with optional fallback chain.
+ *
+ * Handles null/undefined cases from React Native's useColorScheme() hook
+ * with a proper fallback chain.
+ *
+ * @param colorScheme - The color scheme from useColorScheme() hook (may be null/undefined)
+ * @param theme - Optional theme prop as fallback
+ * @returns Normalized 'light' | 'dark' color scheme
+ *
+ * @example
+ * ```ts
+ * // In a React Native component:
+ * const systemScheme = useColorScheme(); // might be null
+ * const colorScheme = normalizeColorScheme(systemScheme, props.theme);
+ *
+ * normalizeColorScheme('dark', 'light');      // 'dark'
+ * normalizeColorScheme(null, 'dark');         // 'dark'
+ * normalizeColorScheme(undefined, undefined); // 'light'
+ * ```
+ */
+export const normalizeColorScheme = (
+  colorScheme?: string | null,
+  theme?: string
+): ThemeValue => {
+  if (colorScheme === 'light' || colorScheme === 'dark') {
+    return colorScheme;
+  }
+
+  if (theme === 'light' || theme === 'dark') {
+    return theme;
+  }
+
+  return 'light';
+};
+
+/**
+ * Gets the opposite theme value.
+ *
+ * @param theme - Current theme value
+ * @returns The opposite theme ('light' → 'dark', 'dark' → 'light')
+ *
+ * @example
+ * ```ts
+ * getOppositeTheme('light'); // 'dark'
+ * getOppositeTheme('dark');  // 'light'
+ * ```
+ */
+export const getOppositeTheme = (theme: ThemeValue): ThemeValue =>
+  theme === 'light' ? 'dark' : 'light';
+
+/**
+ * Checks if the system prefers dark mode.
+ *
+ * This function only works in browser environments.
+ * Returns false in non-browser environments (Node.js, React Native).
+ *
+ * @returns true if system prefers dark mode, false otherwise
+ *
+ * @example
+ * ```ts
+ * if (systemPrefersDarkMode()) {
+ *   setTheme('dark');
+ * }
+ * ```
+ */
+export const systemPrefersDarkMode = (): boolean => {
+  if (typeof window === 'undefined') return false;
+  return window.matchMedia?.('(prefers-color-scheme: dark)').matches ?? false;
+};
+
+/**
+ * Gets the system's preferred color scheme.
+ *
+ * @returns 'dark' if system prefers dark mode, 'light' otherwise
+ *
+ * @example
+ * ```ts
+ * const theme = getSystemColorScheme();
+ * ```
+ */
+export const getSystemColorScheme = (): ThemeValue =>
+  systemPrefersDarkMode() ? 'dark' : 'light';

package/src/ui/components/BottomSheetRouter.tsx

@@ -4,7 +4,7 @@ import { useStore } from 'zustand';
 import type { RouteName } from '../navigation/routes';
 import { getScreenComponent, isValidRoute } from '../navigation/routes';
 import type { BaseScreenProps } from '../types/navigation';
-import { useColorScheme } from '../hooks/use-color-scheme';
+import { useColorScheme } from '../hooks/useColorScheme';
 import { Colors } from '../constants/theme';
 import BottomSheet, { type BottomSheetRef } from './BottomSheet';
 import {

package/src/ui/components/FontLoader.tsx

@@ -1,5 +1,4 @@
-import type React from 'react';
-import { useState, useEffect } from 'react';
+import React, { useState, useEffect } from 'react';
 import { Platform } from 'react-native';
 import * as Font from 'expo-font';
 

package/src/ui/components/GroupedItem.tsx

@@ -3,7 +3,7 @@ import { View, Text, TouchableOpacity, StyleSheet } from 'react-native';
 import { Ionicons } from '@expo/vector-icons';
 // @ts-ignore - MaterialCommunityIcons is available at runtime
 import { MaterialCommunityIcons } from '@expo/vector-icons';
-import { useColorScheme } from '../hooks/use-color-scheme';
+import { useColorScheme } from '../hooks/useColorScheme';
 import { darkenColor } from '../utils/colorUtils';
 import { normalizeColorScheme } from '../utils/themeUtils';
 import { Colors } from '../constants/theme';

package/src/ui/components/Header.tsx

@@ -14,7 +14,7 @@ import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { Ionicons } from '@expo/vector-icons';
 import OxyIcon from './icon/OxyIcon';
 import { fontFamilies } from '../styles/fonts';
-import { useColorScheme } from '../hooks/use-color-scheme';
+import { useColorScheme } from '../hooks/useColorScheme';
 import { normalizeColorScheme } from '../utils/themeUtils';
 import { Colors } from '../constants/theme';
 

package/src/ui/components/OxyProvider.tsx

@@ -19,6 +19,7 @@ const isWeb = Platform.OS === 'web';
 // Conditionally import components
 let KeyboardProvider: any = ({ children }: any) => children;
 let BottomSheetRouter: any = null;
+let SignInModal: any = null;
 
 // KeyboardProvider only on native
 if (!isWeb) {
@@ -36,6 +37,13 @@ try {
     // BottomSheetRouter not available
 }
 
+// SignInModal works on all platforms
+try {
+    SignInModal = require('./SignInModal').default;
+} catch {
+    // SignInModal not available
+}
+
 /**
  * OxyProvider - Universal provider for Expo apps (native + web)
  *
@@ -206,6 +214,8 @@ const OxyProvider: FC<OxyProviderProps> = ({
                 {children}
                 {/* Only render bottom sheet router on native */}
                 {BottomSheetRouter && <BottomSheetRouter />}
+                {/* Sign-in modal for all platforms */}
+                {SignInModal && <SignInModal />}
                 <Toaster />
             </OxyContextProvider>
         </QueryClientProvider>

package/src/ui/components/OxySignInButton.tsx

@@ -1,9 +1,10 @@
 import type React from 'react';
-import { useState } from 'react';
+import { useCallback, useState, useEffect } from 'react';
 import { TouchableOpacity, Text, View, StyleSheet, type ViewStyle, type TextStyle, type StyleProp, Platform } from 'react-native';
 import { useAuth } from '../hooks/useAuth';
 import { fontFamilies } from '../styles/fonts';
 import OxyLogo from './OxyLogo';
+import { showSignInModal, subscribeToSignInModal } from './SignInModal';
 
 export interface OxySignInButtonProps {
     /**
@@ -81,36 +82,33 @@ export const OxySignInButton: React.FC<OxySignInButtonProps> = ({
     disabled = false,
     showWhenAuthenticated = false,
 }) => {
-    const { isAuthenticated, signIn, isLoading } = useAuth();
-    const [isSigningIn, setIsSigningIn] = useState(false);
+    const { isAuthenticated, isLoading } = useAuth();
+    const [isModalOpen, setIsModalOpen] = useState(false);
+
+    // Subscribe to modal close events
+    useEffect(() => {
+        return subscribeToSignInModal(setIsModalOpen);
+    }, []);
 
     // Don't show the button if already authenticated (unless explicitly overridden)
     if (isAuthenticated && !showWhenAuthenticated) return null;
 
-    // Default handler that uses useAuth's signIn method
-    // This works for both web (popup) and native (bottom sheet)
-    const handlePress = async () => {
+    // Handle button press - opens full-screen sign-in modal with QR code and auth options
+    const handlePress = useCallback(() => {
         if (onPress) {
             onPress();
             return;
         }
 
-        if (isSigningIn) return;
-
-        setIsSigningIn(true);
-        try {
-            await signIn();
-        } catch (error) {
-            // Sign-in handled by the auth flow
-            if (__DEV__) {
-                console.log('OxySignInButton: Sign-in flow initiated', error);
-            }
-        } finally {
-            setIsSigningIn(false);
-        }
-    };
+        // Set state immediately before showing modal
+        console.log('[OxySignInButton] Setting isModalOpen to true');
+        setIsModalOpen(true);
+        // Show the full-screen sign-in modal on all platforms
+        showSignInModal();
+    }, [onPress]);
 
-    const isButtonDisabled = disabled || isLoading || isSigningIn;
+    console.log('[OxySignInButton] render - isModalOpen:', isModalOpen);
+    const isButtonDisabled = disabled || isLoading || isModalOpen;
 
     // Determine the button style based on the variant
     const getButtonStyle = () => {
@@ -151,7 +149,7 @@ export const OxySignInButton: React.FC<OxySignInButtonProps> = ({
                     style={isButtonDisabled ? { opacity: 0.6 } : undefined}
                 />
                 <Text style={[styles.text, getTextStyle(), isButtonDisabled && styles.textDisabled]}>
-                    {isSigningIn ? 'Signing in...' : text}
+                    {isLoading || isModalOpen ? 'Signing in...' : text}
                 </Text>
             </View>
         </TouchableOpacity>

package/src/ui/components/ProfileCard.tsx

@@ -7,7 +7,7 @@ import { useOxy } from '../context/OxyContext';
 import { useFileDownloadUrl } from '../hooks';
 import { fontFamilies } from '../styles/fonts';
 import { useThemeStyles } from '../hooks/useThemeStyles';
-import { useColorScheme } from '../hooks/use-color-scheme';
+import { useColorScheme } from '../hooks/useColorScheme';
 
 interface ProfileCardProps {
     user: {

package/src/ui/components/QuickActions.tsx

@@ -2,7 +2,7 @@ import type React from 'react';
 import { View, Text, TouchableOpacity, StyleSheet } from 'react-native';
 import { Ionicons } from '@expo/vector-icons';
 import { useThemeStyles } from '../hooks/useThemeStyles';
-import { useColorScheme } from '../hooks/use-color-scheme';
+import { useColorScheme } from '../hooks/useColorScheme';
 
 interface QuickAction {
     id: string;

package/src/ui/components/Section.tsx

@@ -1,7 +1,7 @@
 import type React from 'react';
 import { View, StyleSheet, type StyleProp, type ViewStyle } from 'react-native';
 import SectionTitle from './SectionTitle';
-import { useColorScheme } from '../hooks/use-color-scheme';
+import { useColorScheme } from '../hooks/useColorScheme';
 import { normalizeColorScheme } from '../utils/themeUtils';
 
 interface SectionProps {

package/src/ui/components/SectionTitle.tsx

@@ -1,7 +1,7 @@
 import type React from 'react';
 import { Text, StyleSheet, type StyleProp, type TextStyle } from 'react-native';
 import { fontFamilies } from '../styles/fonts';
-import { useColorScheme } from '../hooks/use-color-scheme';
+import { useColorScheme } from '../hooks/useColorScheme';
 import { normalizeColorScheme } from '../utils/themeUtils';
 import { useThemeStyles } from '../hooks/useThemeStyles';