@oxyhq/services 6.9.46 → 6.10.2

package/src/ui/components/OxyProvider.tsx

@@ -1,20 +1,47 @@
 import { lazy, Suspense, useEffect, useRef, useState, type ComponentType, type FC, type ReactNode } from 'react';
-import { AppState, Platform } from 'react-native';
+import { AppState, Platform, StyleSheet, View } 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 { BloomDialogProvider, BloomThemeProvider } from '@oxyhq/bloom';
+import { ToastOutlet } from '@oxyhq/bloom/toast';
 import { setupFonts } from './FontLoader';
-import { Toaster } from '../../lib/sonner';
-import { createQueryClient } from '../hooks/queryClient';
+import { attachQueryPersistence, createQueryClient } from '../hooks/queryClient';
 import { createPlatformStorage, type StorageInterface } from '../utils/storageHelpers';
 
+/**
+ * Background color shown for the brief window between mount and the
+ * persisted-cache hydration completing. Matches the typical splash-screen
+ * backgrounds used across Oxy apps (dark surface, white-on-dark text), so
+ * the transition reads as a continuation of the splash instead of a
+ * white flash. Apps that need a different boot color can keep doing their
+ * own `expo-splash-screen` orchestration — this placeholder just guarantees
+ * we never render a transparent `null` while we wait.
+ *
+ * Light-mode background. Apps that boot into dark mode see a brief light
+ * flash here, which is unavoidable without re-implementing the BloomTheme
+ * resolver outside of `<BloomThemeProvider>`. The light value is far less
+ * jarring than `null` (transparent) on either theme.
+ */
+const BOOT_BG_COLOR = '#ffffff';
+
+const bootStyles = StyleSheet.create({
+    bootShell: {
+        flex: 1,
+        backgroundColor: BOOT_BG_COLOR,
+    },
+});
+
 // Initialize fonts automatically
 setupFonts();
 
 // Detect if running on web
 const isWeb = Platform.OS === 'web';
 
+// Variable indirection: the module name is computed at runtime so Metro's
+// static analyzer cannot trace this into the web bundle. Native-only.
+const KEYBOARD_CONTROLLER_MODULE = 'react-native-keyboard-controller';
+
 // 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.
@@ -83,22 +110,37 @@ const OxyProvider: FC<OxyProviderProps> = ({
     colorPreset,
 }) => {
 
-    // Dynamic KeyboardProvider for native (avoids require() for ESM compatibility).
-    // Literal-string import: Hermes/Metro require static strings in production
-    // bundles, not variable expressions or webpackIgnore comments.
+    // Dynamic KeyboardProvider for native. Uses variable indirection
+    // (KEYBOARD_CONTROLLER_MODULE) so Metro's static analyzer cannot trace
+    // the import into the web bundle. On web, the runtime guard short-circuits
+    // before the import runs.
     const [KBProvider, setKBProvider] = useState<FC<{ children: ReactNode }> | null>(null);
     useEffect(() => {
         if (isWeb) return;
-        import('react-native-keyboard-controller')
+        const moduleName = KEYBOARD_CONTROLLER_MODULE;
+        import(moduleName)
             .then((mod) => setKBProvider(() => mod.KeyboardProvider))
-            .catch(() => { /* KeyboardProvider not available */ });
+            .catch((error) => {
+                if (__DEV__) {
+                    console.warn('[OxyProvider] react-native-keyboard-controller not available, skipping keyboard support', error);
+                }
+            });
     }, []);
     const KeyboardWrapper: FC<{ children: ReactNode }> = KBProvider ?? (({ children }) => <>{children}</>);
 
-    // Simple storage initialization for query persistence
+    // Storage + persistence wiring.
+    //
+    // We MUST await the restore() promise before exposing the QueryClient to
+    // children — otherwise the first render sees an empty cache and any
+    // <Suspense> queries or `enabled: !!cached` gates would skip the offline
+    // hit. Once the persisted blob has been hydrated (or definitively failed
+    // to hydrate), we mark the client ready and unblock rendering.
     const storageRef = useRef<StorageInterface | null>(null);
     const queryClientRef = useRef<ReturnType<typeof createQueryClient> | null>(null);
-    // Initialize immediately if provided via prop to avoid a null-render frame
+    const persistenceUnsubRef = useRef<(() => void) | null>(null);
+
+    // If the consumer supplied their own QueryClient we use it as-is and skip
+    // persistence — their host app owns that lifecycle.
     const [queryClient, setQueryClient] = useState<ReturnType<typeof createQueryClient> | null>(() => {
         if (providedQueryClient) {
             queryClientRef.current = providedQueryClient;
@@ -114,31 +156,44 @@ const OxyProvider: FC<OxyProviderProps> = ({
             return;
         }
 
-        // Initialize storage and create query client
         let mounted = true;
-        createPlatformStorage()
-            .then((storage) => {
-                if (mounted && !queryClientRef.current) {
-                    storageRef.current = storage;
-                    const client = createQueryClient(storage);
-                    queryClientRef.current = client;
-                    setQueryClient(client);
-                }
-            })
-            .catch((error) => {
-                // If storage fails, create query client without persistence
-                if (mounted && !queryClientRef.current) {
-                    if (__DEV__) {
-                        console.warn('[OxyProvider] Failed to initialize storage for query persistence', error);
-                    }
-                    const client = createQueryClient(null);
-                    queryClientRef.current = client;
-                    setQueryClient(client);
+
+        const bootstrap = async (): Promise<void> => {
+            let storage: StorageInterface | null = null;
+            try {
+                storage = await createPlatformStorage();
+            } catch (error) {
+                if (__DEV__) {
+                    console.warn('[OxyProvider] Failed to initialize storage for query persistence', error);
                 }
-            });
+            }
+
+            if (!mounted || queryClientRef.current) return;
+
+            storageRef.current = storage;
+            const client = createQueryClient();
+            const { restored, unsubscribe } = attachQueryPersistence(client, storage);
+            persistenceUnsubRef.current = unsubscribe;
+
+            // Block first render until the persisted cache is restored so
+            // offline reads land synchronously on the very first paint.
+            await restored;
+
+            if (!mounted) {
+                unsubscribe();
+                return;
+            }
+
+            queryClientRef.current = client;
+            setQueryClient(client);
+        };
+
+        bootstrap();
 
         return () => {
             mounted = false;
+            persistenceUnsubRef.current?.();
+            persistenceUnsubRef.current = null;
         };
     }, [providedQueryClient]);
 
@@ -212,30 +267,54 @@ const OxyProvider: FC<OxyProviderProps> = ({
         };
     }, []);
 
-    // Ensure we have a valid QueryClient
+    // While the QueryClient is being created and the persisted cache is
+    // hydrating, render a solid-color shell instead of `null`. Returning
+    // `null` here on mid-range Android devices flashed a transparent
+    // surface for 200–600ms after the native splash hid, which read as a
+    // glitch. The shell keeps the screen filled with a sensible default
+    // until children can mount under a real <QueryClientProvider>.
     if (!queryClient) {
-        return null;
+        return (
+            <KeyboardWrapper>
+                <View style={bootStyles.bootShell} />
+            </KeyboardWrapper>
+        );
     }
 
     // Core content: QueryClient + OxyContext + UI overlays
     const coreContent = (
         <QueryClientProvider client={queryClient}>
+            {/*
+              * OxyProvider mounts BloomThemeProvider internally as a convenience —
+              * consumers do NOT need to wrap their own BloomThemeProvider. Any
+              * outer BloomThemeProvider from the consuming app will be shadowed
+              * by this one. Pass `themeMode` and `colorPreset` props instead.
+              */}
             <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>
+                {/*
+                  * BloomDialogProvider hosts the imperative `alert()` queue from
+                  * `@oxyhq/bloom`. Any code (event handlers, async callbacks,
+                  * module-scope helpers) calling `alert()` is rendered by this
+                  * provider. Mount once here so every consumer of OxyProvider
+                  * gets it without ceremony.
+                  */}
+                <BloomDialogProvider>
+                    <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>
+                        <ToastOutlet />
+                    </OxyContextProvider>
+                </BloomDialogProvider>
             </BloomThemeProvider>
         </QueryClientProvider>
     );

package/src/ui/components/OxySignInButton.tsx

@@ -4,7 +4,7 @@ import { TouchableOpacity, Text, View, StyleSheet, type ViewStyle, type TextStyl
 import { useAuthStore } from '../stores/authStore';
 import { useShallow } from 'zustand/react/shallow';
 import { useTheme } from '@oxyhq/bloom/theme';
-import { fontFamilies } from '../styles/fonts';
+import { useOxy } from '../context/OxyContext';
 import OxyLogo from './OxyLogo';
 import { showSignInModal, subscribeToSignInModal } from './SignInModal';
 
@@ -84,27 +84,37 @@ export const OxySignInButton: React.FC<OxySignInButtonProps> = ({
     showWhenAuthenticated = false,
 }) => {
     const theme = useTheme();
+    const { showBottomSheet } = useOxy();
     const { isAuthenticated, isLoading } = useAuthStore(
         useShallow((state) => ({ isAuthenticated: state.isAuthenticated, isLoading: state.isLoading }))
     );
+    // Tracks visibility of the web full-screen sign-in modal so we can show
+    // "Signing in..." while it's open. On native we open a bottom sheet whose
+    // visibility is owned by the sheet manager — no subscription needed.
     const [isModalOpen, setIsModalOpen] = useState(false);
 
-    // Subscribe to modal close events
+    // Subscribe to web modal visibility only — bottom sheet manages its own state.
     useEffect(() => {
+        if (Platform.OS !== 'web') return;
         return subscribeToSignInModal(setIsModalOpen);
     }, []);
 
-    // Handle button press - opens full-screen sign-in modal with QR code and auth options
+    // Handle button press
+    // - Web: legacy full-screen Modal (dialog UX fits desktop / browser)
+    // - Native: bottom sheet (sheet UX fits iOS/Android)
     const handlePress = useCallback(() => {
         if (onPress) {
             onPress();
             return;
         }
 
-        setIsModalOpen(true);
-        // Show the full-screen sign-in modal on all platforms
-        showSignInModal();
-    }, [onPress]);
+        if (Platform.OS === 'web') {
+            setIsModalOpen(true);
+            showSignInModal();
+        } else {
+            showBottomSheet?.('OxyAuth');
+        }
+    }, [onPress, showBottomSheet]);
 
     const themedStyles = useMemo(() => StyleSheet.create({
         button: {
@@ -114,7 +124,7 @@ export const OxySignInButton: React.FC<OxySignInButtonProps> = ({
             justifyContent: 'center',
         },
         buttonDefault: {
-            backgroundColor: '#FFFFFF',
+            backgroundColor: theme.colors.card,
             borderWidth: 1,
             borderColor: theme.colors.borderLight,
             ...Platform.select({
@@ -147,7 +157,9 @@ export const OxySignInButton: React.FC<OxySignInButtonProps> = ({
             justifyContent: 'center',
         },
         text: {
-            fontFamily: fontFamilies.interSemiBold,
+            // Bloom's BloomThemeProvider sets the default font via Text.defaultProps,
+            // so we intentionally do NOT set fontFamily here. Setting it would defeat
+            // the theme-wide font.
             fontWeight: Platform.OS === 'web' ? '600' : undefined,
             fontSize: 16,
             marginLeft: 10,

package/src/ui/components/ProfileCard.tsx

@@ -6,13 +6,14 @@ import { useI18n } from '../hooks/useI18n';
 import Avatar from './Avatar';
 import { useOxy } from '../context/OxyContext';
 import { useFileDownloadUrl } from '../hooks';
-import { fontFamilies } from '../styles/fonts';
+import { getAccountDisplayName, getAccountFallbackHandle } from '@oxyhq/core';
 
 interface ProfileCardProps {
     user: {
-        username: string;
+        username?: string;
         email?: string;
-        name?: { full?: string };
+        name?: { full?: string; first?: string; last?: string };
+        publicKey?: string;
         avatar?: string; // file id
     };
     theme: 'light' | 'dark';
@@ -30,9 +31,12 @@ const ProfileCard: React.FC<ProfileCardProps> = ({
 }) => {
     const { colors } = useTheme();
     const { oxyServices } = useOxy();
-    const { t } = useI18n();
+    const { t, locale } = useI18n();
 
     const avatarUrl = useFileDownloadUrl(oxyServices, user?.avatar, { variant: 'thumb' }).url || undefined;
+    const displayName = getAccountDisplayName(user, locale);
+    const handle = getAccountFallbackHandle(user);
+    const secondaryLine = user?.email ?? (handle && user?.username ? `@${handle}` : handle) ?? null;
 
     return (
         <View style={styles.headerSection}>
@@ -47,17 +51,17 @@ const ProfileCard: React.FC<ProfileCardProps> = ({
                 <View style={styles.userProfile}>
                     <Avatar
                         uri={user?.avatar ? avatarUrl : undefined}
-                        name={user?.name?.full || user?.username}
+                        name={displayName}
                         size={60}
                         theme={theme}
                     />
                     <View style={styles.userInfo}>
-                        <Text className="text-foreground" style={styles.userName}>{user.username}</Text>
-                        {user.email && (
+                        <Text className="text-foreground" style={styles.userName}>{displayName}</Text>
+                        {secondaryLine ? (
                             <Text className="text-muted-foreground" style={styles.userEmail}>
-                                {user.email}
+                                {secondaryLine}
                             </Text>
-                        )}
+                        ) : null}
                         {onEditPress && (
                             <TouchableOpacity
                                 style={styles.editProfileButton}
@@ -112,7 +116,6 @@ const styles = StyleSheet.create({
     userName: {
         fontSize: 22,
         fontWeight: 'bold',
-        fontFamily: fontFamilies.interBold,
         marginBottom: 4,
     },
     userEmail: {

package/src/ui/components/QuickActions.tsx

@@ -17,7 +17,7 @@ interface QuickActionsProps {
 }
 
 const QuickActions: React.FC<QuickActionsProps> = ({ actions, theme }) => {
-    const { isDark } = useTheme();
+    const { colors } = useTheme();
 
     return (
         <View
@@ -34,7 +34,7 @@ const QuickActions: React.FC<QuickActionsProps> = ({ actions, theme }) => {
                         <TouchableOpacity
                             style={[
                                 styles.quickActionCircle,
-                                { backgroundColor: isDark ? 'rgba(255,255,255,0.08)' : 'rgba(0,0,0,0.03)' }
+                                { backgroundColor: colors.backgroundTertiary }
                             ]}
                             onPress={action.onPress}
                         >