@oxy.so/services 11.2.0-oxy-one.3 → 11.2.0-oxy-one.4

package/src/ui/components/OxyConsentScreen.tsx

@@ -260,7 +260,12 @@ export function OxyConsentScreen({
             <View style={[styles.dot, { backgroundColor: theme.colors.border }]} />
             <View style={[styles.dot, { backgroundColor: theme.colors.border }]} />
           </View>
-          <View style={[styles.logoBadge, { backgroundColor: theme.colors.backgroundSecondary ?? theme.colors.card }]}>
+          <View
+            style={[
+              styles.logoBadge,
+              { backgroundColor: theme.colors.backgroundSecondary ?? theme.colors.card },
+            ]}
+          >
             <LogoIcon height={30} color={theme.colors.primary} />
           </View>
         </View>
@@ -273,7 +278,12 @@ export function OxyConsentScreen({
       </View>
 
       {/* Provenance */}
-      <View style={[styles.card, { borderColor: theme.colors.border, backgroundColor: theme.colors.card }]}>
+      <View
+        style={[
+          styles.card,
+          { borderColor: theme.colors.border, backgroundColor: theme.colors.card },
+        ]}
+      >
         <Text testID="consent-provenance" style={[styles.provenance, { color: theme.colors.text }]}>
           {provenanceLabel}
         </Text>
@@ -294,7 +304,10 @@ export function OxyConsentScreen({
           </Text>
           <View
             testID="consent-resource"
-            style={[styles.resourceCard, { borderColor: theme.colors.border, backgroundColor: theme.colors.card }]}
+            style={[
+              styles.resourceCard,
+              { borderColor: theme.colors.border, backgroundColor: theme.colors.card },
+            ]}
           >
             <Avatar
               source={resource.application.iconUrl}
@@ -326,7 +339,12 @@ export function OxyConsentScreen({
         <Text style={[styles.sectionLabel, { color: theme.colors.textSecondary }]}>
           {t('consent.permissions.title')}
         </Text>
-        <View style={[styles.card, { borderColor: theme.colors.border, backgroundColor: theme.colors.card }]}>
+        <View
+          style={[
+            styles.card,
+            { borderColor: theme.colors.border, backgroundColor: theme.colors.card },
+          ]}
+        >
           {permissionRows.length > 0 ? (
             permissionRows.map((row) => (
               <View key={row.scope} testID={`consent-scope-${row.scope}`} style={styles.row}>
@@ -352,12 +370,25 @@ export function OxyConsentScreen({
           <Text style={[styles.sectionLabel, { color: theme.colors.textSecondary }]}>
             {t('consent.writeActions.title')}
           </Text>
-          <View style={[styles.card, { borderColor: theme.colors.border, backgroundColor: theme.colors.card }]}>
+          <View
+            style={[
+              styles.card,
+              { borderColor: theme.colors.border, backgroundColor: theme.colors.card },
+            ]}
+          >
             {resource.writeActions.map((action) => (
-              <View key={`${action.name}:${action.version}`} testID={`consent-write-action-${action.name}`} style={styles.actionRow}>
+              <View
+                key={`${action.name}:${action.version}`}
+                testID={`consent-write-action-${action.name}`}
+                style={styles.actionRow}
+              >
                 <View style={styles.actionCopy}>
-                  <Text style={[styles.rowText, { color: theme.colors.text }]}>{action.description}</Text>
-                  <Text style={[styles.actionName, { color: theme.colors.textSecondary }]}>{action.name}</Text>
+                  <Text style={[styles.rowText, { color: theme.colors.text }]}>
+                    {action.description}
+                  </Text>
+                  <Text style={[styles.actionName, { color: theme.colors.textSecondary }]}>
+                    {action.name}
+                  </Text>
                 </View>
                 <View style={[styles.effectBadge, { borderColor: theme.colors.border }]}>
                   <Text style={[styles.effectText, { color: theme.colors.textSecondary }]}>
@@ -374,7 +405,10 @@ export function OxyConsentScreen({
       {user ? (
         <View
           testID="consent-account"
-          style={[styles.accountRow, { borderColor: theme.colors.border, backgroundColor: theme.colors.card }]}
+          style={[
+            styles.accountRow,
+            { borderColor: theme.colors.border, backgroundColor: theme.colors.card },
+          ]}
         >
           <Avatar source={user.avatarUri} name={accountName} size={40} />
           <View style={styles.accountText}>
@@ -386,7 +420,10 @@ export function OxyConsentScreen({
               {accountName}
             </Text>
             {user.handle && user.handle !== accountName ? (
-              <Text numberOfLines={1} style={[styles.accountHandle, { color: theme.colors.textSecondary }]}>
+              <Text
+                numberOfLines={1}
+                style={[styles.accountHandle, { color: theme.colors.textSecondary }]}
+              >
                 {user.handle}
               </Text>
             ) : null}
@@ -439,7 +476,8 @@ export function OxyConsentScreen({
       <View style={styles.actions}>
         <Button
           testID="consent-allow"
-          appearance="solid" tone="accent"
+          appearance="solid"
+          tone="accent"
           onPress={handleAllow}
           disabled={busy || allowDisabled}
           loading={busy}
@@ -449,7 +487,8 @@ export function OxyConsentScreen({
         </Button>
         <Button
           testID="consent-deny"
-          appearance="plain" tone="neutral"
+          appearance="plain"
+          tone="neutral"
           onPress={onDeny}
           disabled={busy}
           style={styles.actionButton}

package/src/ui/components/OxyProvider.tsx

@@ -10,7 +10,11 @@ import { ToastOutlet } from '@oxy.so/bloom/toast';
 import { logger as loggerUtil } from '@oxy.so/core';
 import { RequireOxyAuth } from './RequireOxyAuth';
 import { attachQueryPersistence, createQueryClient } from '../hooks/queryClient';
-import { createMemoryStorage, createPlatformStorage, type StorageInterface } from '../utils/storageHelpers';
+import {
+  createMemoryStorage,
+  createPlatformStorage,
+  type StorageInterface,
+} from '../utils/storageHelpers';
 import { isNetConnectivityOnline } from '../utils/netConnectivity';
 import { KeyboardBoundary } from './KeyboardBoundary';
 import { ProductAnalyticsObserver } from '../analytics/productAnalytics';
@@ -18,9 +22,9 @@ import { LanguageBridge } from './LanguageBridge';
 import { BloomLocaleBridge } from './BloomLocaleBridge';
 
 const bootStyles = StyleSheet.create({
-    providerRoot: {
-        flex: 1,
-    },
+  providerRoot: {
+    flex: 1,
+  },
 });
 
 // Detect if running on web
@@ -76,204 +80,207 @@ const isWeb = Platform.OS === 'web';
  * ```
  */
 const OxyProvider: FC<OxyProviderProps> = ({
-    oxyServices,
-    children,
-    onAuthStateChange,
-    productAnalytics,
-    storageKeyPrefix,
-    clientId,
-    baseURL,
-    authWebUrl,
-    authRedirectUri,
-    authorizeBaseUrl,
-    sessionMode = 'account',
-    webAuthMode = 'popup',
-    queryClient: providedQueryClient,
-    accountQueries,
-    requireAuth = 'off',
-    backgroundSession = false,
-    language,
+  oxyServices,
+  children,
+  onAuthStateChange,
+  productAnalytics,
+  storageKeyPrefix,
+  clientId,
+  baseURL,
+  authWebUrl,
+  authRedirectUri,
+  authorizeBaseUrl,
+  sessionMode = 'account',
+  webAuthMode = 'popup',
+  queryClient: providedQueryClient,
+  accountQueries,
+  requireAuth = 'off',
+  backgroundSession = false,
+  language,
 }) => {
+  // Storage + persistence wiring.
+  //
+  // The QueryClient exists synchronously so cache I/O can never delay the app
+  // tree's first render. Persistence hydrates in the background; TanStack's
+  // persisted-client timestamps prevent older stored data from replacing a
+  // newer query that settled while restore was in flight.
+  const queryClientRef = useRef<ReturnType<typeof createQueryClient> | null>(null);
+  const persistenceUnsubRef = useRef<(() => void) | null>(null);
+  const ownsQueryClientRef = useRef(providedQueryClient === undefined);
+  // `accountQueries` is read once, at mount, like the client itself.
+  const accountQueriesRef = useRef(accountQueries);
+  const [platformStorage, setPlatformStorage] = useState<StorageInterface | null>(null);
 
-    // Storage + persistence wiring.
-    //
-    // The QueryClient exists synchronously so cache I/O can never delay the app
-    // tree's first render. Persistence hydrates in the background; TanStack's
-    // persisted-client timestamps prevent older stored data from replacing a
-    // newer query that settled while restore was in flight.
-    const queryClientRef = useRef<ReturnType<typeof createQueryClient> | null>(null);
-    const persistenceUnsubRef = useRef<(() => void) | null>(null);
-    const ownsQueryClientRef = useRef(providedQueryClient === undefined);
-    // `accountQueries` is read once, at mount, like the client itself.
-    const accountQueriesRef = useRef(accountQueries);
-    const [platformStorage, setPlatformStorage] = useState<StorageInterface | 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] = useState<ReturnType<typeof createQueryClient>>(() => {
+    if (providedQueryClient) {
+      queryClientRef.current = providedQueryClient;
+      return providedQueryClient;
+    }
+    const client = createQueryClient();
+    queryClientRef.current = client;
+    return client;
+  });
 
-    // If the consumer supplied their own QueryClient we use it as-is and skip
-    // persistence — their host app owns that lifecycle.
-    const [queryClient] = useState<ReturnType<typeof createQueryClient>>(() => {
-        if (providedQueryClient) {
-            queryClientRef.current = providedQueryClient;
-            return providedQueryClient;
+  useEffect(() => {
+    let mounted = true;
+
+    const bootstrap = async (): Promise<void> => {
+      let storage: StorageInterface | null = null;
+      try {
+        storage = await createPlatformStorage();
+      } catch (error) {
+        if (__DEV__) {
+          loggerUtil.warn(
+            'Failed to initialize storage for query persistence',
+            { component: 'OxyProvider' },
+            error,
+          );
         }
-        const client = createQueryClient();
-        queryClientRef.current = client;
-        return client;
-    });
+        storage = createMemoryStorage();
+      }
 
-    useEffect(() => {
-        let mounted = true;
+      if (!mounted) return;
 
-        const bootstrap = async (): Promise<void> => {
-            let storage: StorageInterface | null = null;
-            try {
-                storage = await createPlatformStorage();
-            } catch (error) {
-                if (__DEV__) {
-                    loggerUtil.warn('Failed to initialize storage for query persistence', { component: 'OxyProvider' }, error);
-                }
-                storage = createMemoryStorage();
-            }
+      setPlatformStorage(storage);
+      const client = queryClientRef.current;
+      if (!client || !ownsQueryClientRef.current) return;
+      const persistence = attachQueryPersistence(client, storage, accountQueriesRef.current);
+      persistenceUnsubRef.current = persistence.unsubscribe;
+      await persistence.restored;
+    };
 
-            if (!mounted) return;
+    bootstrap();
 
-            setPlatformStorage(storage);
-            const client = queryClientRef.current;
-            if (!client || !ownsQueryClientRef.current) return;
-            const persistence = attachQueryPersistence(client, storage, accountQueriesRef.current);
-            persistenceUnsubRef.current = persistence.unsubscribe;
-            await persistence.restored;
-        };
+    return () => {
+      mounted = false;
+      persistenceUnsubRef.current?.();
+      persistenceUnsubRef.current = null;
+    };
+  }, []);
 
-        bootstrap();
+  // Hook React Query focus manager into app state (native) or visibility (web)
+  useEffect(() => {
+    if (isWeb) {
+      // Web: use document visibility
+      const handleVisibilityChange = () => {
+        focusManager.setFocused(document.visibilityState === 'visible');
+      };
+      document.addEventListener('visibilitychange', handleVisibilityChange);
+      return () => {
+        document.removeEventListener('visibilitychange', handleVisibilityChange);
+      };
+    }
+    // Native: use AppState
+    const subscription = AppState.addEventListener('change', (state) => {
+      focusManager.setFocused(state === 'active');
+    });
+    return () => {
+      subscription.remove();
+    };
+  }, []);
 
-        return () => {
-            mounted = false;
-            persistenceUnsubRef.current?.();
-            persistenceUnsubRef.current = null;
-        };
-    }, []);
+  // Setup network status monitoring for offline detection
+  useEffect(() => {
+    let cleanup: (() => void) | undefined;
 
-    // Hook React Query focus manager into app state (native) or visibility (web)
-    useEffect(() => {
+    const setupNetworkMonitoring = async () => {
+      try {
         if (isWeb) {
-            // Web: use document visibility
-            const handleVisibilityChange = () => {
-                focusManager.setFocused(document.visibilityState === 'visible');
-            };
-            document.addEventListener('visibilitychange', handleVisibilityChange);
-            return () => {
-                document.removeEventListener('visibilitychange', handleVisibilityChange);
-            };
-        }
-            // Native: use AppState
-            const subscription = AppState.addEventListener('change', (state) => {
-                focusManager.setFocused(state === 'active');
-            });
-            return () => {
-                subscription.remove();
-            };
-    }, []);
+          // Web: use navigator.onLine
+          onlineManager.setOnline(navigator.onLine);
+          const handleOnline = () => onlineManager.setOnline(true);
+          const handleOffline = () => onlineManager.setOnline(false);
 
-    // Setup network status monitoring for offline detection
-    useEffect(() => {
-        let cleanup: (() => void) | undefined;
+          window.addEventListener('online', handleOnline);
+          window.addEventListener('offline', handleOffline);
 
-        const setupNetworkMonitoring = async () => {
-            try {
-                if (isWeb) {
-                    // Web: use navigator.onLine
-                    onlineManager.setOnline(navigator.onLine);
-                    const handleOnline = () => onlineManager.setOnline(true);
-                    const handleOffline = () => onlineManager.setOnline(false);
+          cleanup = () => {
+            window.removeEventListener('online', handleOnline);
+            window.removeEventListener('offline', handleOffline);
+          };
+        } else {
+          // Native: try to use NetInfo
+          try {
+            const NetInfo = await import('@react-native-community/netinfo');
+            const state = await NetInfo.default.fetch();
+            onlineManager.setOnline(isNetConnectivityOnline(state));
 
-                    window.addEventListener('online', handleOnline);
-                    window.addEventListener('offline', handleOffline);
+            const unsubscribe = NetInfo.default.addEventListener(
+              (state: { isConnected: boolean | null; isInternetReachable?: boolean | null }) => {
+                onlineManager.setOnline(isNetConnectivityOnline(state));
+              },
+            );
 
-                    cleanup = () => {
-                        window.removeEventListener('online', handleOnline);
-                        window.removeEventListener('offline', handleOffline);
-                    };
-                } else {
-                    // Native: try to use NetInfo
-                    try {
-                        const NetInfo = await import('@react-native-community/netinfo');
-                        const state = await NetInfo.default.fetch();
-                        onlineManager.setOnline(isNetConnectivityOnline(state));
-
-                        const unsubscribe = NetInfo.default.addEventListener((state: { isConnected: boolean | null; isInternetReachable?: boolean | null }) => {
-                            onlineManager.setOnline(isNetConnectivityOnline(state));
-                        });
-
-                        cleanup = () => unsubscribe();
-                    } catch {
-                        // NetInfo not available, default to online
-                        onlineManager.setOnline(true);
-                    }
-                }
-            } catch (error) {
-                // Default to online if detection fails
-                onlineManager.setOnline(true);
-            }
-        };
+            cleanup = () => unsubscribe();
+          } catch {
+            // NetInfo not available, default to online
+            onlineManager.setOnline(true);
+          }
+        }
+      } catch (error) {
+        // Default to online if detection fails
+        onlineManager.setOnline(true);
+      }
+    };
 
-        setupNetworkMonitoring();
+    setupNetworkMonitoring();
 
-        return () => {
-            cleanup?.();
-        };
-    }, []);
+    return () => {
+      cleanup?.();
+    };
+  }, []);
 
-    // Core content: QueryClient + OxyContext + UI overlays.
-    //
-    // Theming is owned by `@oxy.so/bloom`. Consumers must mount their own
-    // `<BloomThemeProvider>` in their app root and configure it directly
-    // (defaultColorPreset, defaultMode, persistKey, storage, fonts, etc.).
-    // OxyProvider does NOT wrap a BloomThemeProvider — that would create a
-    // duplicate scope that silently shadows the consumer's configuration.
-    // It DOES set Bloom's locale (`BloomLocaleBridge`) to Oxy's language, but
-    // defers to a locale the app already set above it.
-    const coreContent = (
-        <QueryClientProvider client={queryClient}>
-            <OxyRuntimeProvider
-                oxyServices={oxyServices as OxyRuntimeProviderProps['oxyServices']}
-                baseURL={baseURL}
-                authWebUrl={authWebUrl}
-                authRedirectUri={authRedirectUri}
-                authorizeBaseUrl={authorizeBaseUrl}
-                storageKeyPrefix={storageKeyPrefix}
-                clientId={clientId}
-                sessionMode={sessionMode}
-                webAuthMode={webAuthMode}
-                backgroundSession={backgroundSession}
-                platformStorage={platformStorage}
-                accountQueries={accountQueries}
-                onAuthStateChange={onAuthStateChange as OxyRuntimeProviderProps['onAuthStateChange']}
-            >
-                {productAnalytics ? <ProductAnalyticsObserver analytics={productAnalytics} /> : null}
-                {language ? <LanguageBridge {...language} /> : null}
-                <BloomLocaleBridge>
-                    <SurfaceProvider>
-                        {requireAuth === 'off' ? (
-                            children
-                        ) : (
-                            <RequireOxyAuth prompt={requireAuth}>{children}</RequireOxyAuth>
-                        )}
-                    </SurfaceProvider>
-                    <ToastOutlet />
-                </BloomLocaleBridge>
-            </OxyRuntimeProvider>
-        </QueryClientProvider>
-    );
+  // Core content: QueryClient + OxyContext + UI overlays.
+  //
+  // Theming is owned by `@oxy.so/bloom`. Consumers must mount their own
+  // `<BloomThemeProvider>` in their app root and configure it directly
+  // (defaultColorPreset, defaultMode, persistKey, storage, fonts, etc.).
+  // OxyProvider does NOT wrap a BloomThemeProvider — that would create a
+  // duplicate scope that silently shadows the consumer's configuration.
+  // It DOES set Bloom's locale (`BloomLocaleBridge`) to Oxy's language, but
+  // defers to a locale the app already set above it.
+  const coreContent = (
+    <QueryClientProvider client={queryClient}>
+      <OxyRuntimeProvider
+        oxyServices={oxyServices as OxyRuntimeProviderProps['oxyServices']}
+        baseURL={baseURL}
+        authWebUrl={authWebUrl}
+        authRedirectUri={authRedirectUri}
+        authorizeBaseUrl={authorizeBaseUrl}
+        storageKeyPrefix={storageKeyPrefix}
+        clientId={clientId}
+        sessionMode={sessionMode}
+        webAuthMode={webAuthMode}
+        backgroundSession={backgroundSession}
+        platformStorage={platformStorage}
+        accountQueries={accountQueries}
+        onAuthStateChange={onAuthStateChange as OxyRuntimeProviderProps['onAuthStateChange']}
+      >
+        {productAnalytics ? <ProductAnalyticsObserver analytics={productAnalytics} /> : null}
+        {language ? <LanguageBridge {...language} /> : null}
+        <BloomLocaleBridge>
+          <SurfaceProvider>
+            {requireAuth === 'off' ? (
+              children
+            ) : (
+              <RequireOxyAuth prompt={requireAuth}>{children}</RequireOxyAuth>
+            )}
+          </SurfaceProvider>
+          <ToastOutlet />
+        </BloomLocaleBridge>
+      </OxyRuntimeProvider>
+    </QueryClientProvider>
+  );
 
-    return (
-        <GestureHandlerRootView style={bootStyles.providerRoot}>
-            <SafeAreaProvider>
-                <KeyboardBoundary>
-                    {coreContent}
-                </KeyboardBoundary>
-            </SafeAreaProvider>
-        </GestureHandlerRootView>
-    );
+  return (
+    <GestureHandlerRootView style={bootStyles.providerRoot}>
+      <SafeAreaProvider>
+        <KeyboardBoundary>{coreContent}</KeyboardBoundary>
+      </SafeAreaProvider>
+    </GestureHandlerRootView>
+  );
 };
 
 export default OxyProvider;