@oxyhq/services 19.0.1 → 19.1.0

package/src/ui/boot/runProviderColdBoot.ts

@@ -0,0 +1,150 @@
+import {
+  logger as loggerUtil,
+  runSessionColdBoot,
+  type AuthStateStore,
+  type OxyServices,
+} from '@oxyhq/core';
+import type { SessionClient } from '@oxyhq/core';
+import { loadPersistedDeviceCredential } from '../utils/deviceCredential';
+import {
+  consumeSilentOAuthError,
+  maybeStartSilentOAuthRestore,
+} from '../utils/crossOriginRestore';
+import { tryCompleteOAuthReturn } from '../utils/oauthReturn';
+import { isWebBrowser } from '../utils/isWebBrowser';
+import type { CommitInput } from '../context/oxyContextTypes';
+
+/** How long the cold boot waits for the post-boot SessionClient handoff (ms). */
+export const SESSION_HANDOFF_DEADLINE_MS = 6000;
+
+export interface RunProviderColdBootOptions {
+  oxyServices: OxyServices;
+  authStore: AuthStateStore;
+  clientId?: string;
+  authRedirectUri?: string;
+  sessionClient: SessionClient;
+  syncDeviceCredentialToHost: () => Promise<void>;
+  commitSession: (
+    input: CommitInput,
+    options: { activate: boolean; hubSync?: boolean },
+  ) => Promise<void>;
+  markAuthResolved: () => void;
+  setTokenReady: (ready: boolean) => void;
+}
+
+/**
+ * Device-first cold boot for `@oxyhq/services` providers.
+ *
+ * Ordered pipeline:
+ * 1. Complete OAuth authorization-code return (web)
+ * 2. `runSessionColdBoot` — device-secret mint (+ native shared-key)
+ * 3. Silent OAuth for all web apps when mint finds no session
+ */
+export async function runProviderColdBoot(opts: RunProviderColdBootOptions): Promise<void> {
+  const {
+    oxyServices,
+    authStore,
+    clientId,
+    authRedirectUri,
+    sessionClient,
+    syncDeviceCredentialToHost,
+    commitSession,
+    markAuthResolved,
+    setTokenReady,
+  } = opts;
+
+  setTokenReady(false);
+
+  try {
+    consumeSilentOAuthError();
+
+    const oauthCompleted = await tryCompleteOAuthReturn({
+      oxyServices,
+      clientId,
+      authRedirectUri,
+      commitSession: (input) => commitSession(input, { activate: true, hubSync: false }),
+    });
+    if (oauthCompleted) {
+      setTokenReady(true);
+      markAuthResolved();
+      return;
+    }
+
+    const outcome = await runSessionColdBoot({
+      oxy: oxyServices,
+      store: authStore,
+      platform: { isWeb: isWebBrowser(), isNative: !isWebBrowser() },
+      onSession: async (session) => {
+        const handoff = commitSession(
+          {
+            sessionId: session.sessionId,
+            accessToken: session.accessToken,
+            userId: session.userId,
+          },
+          { activate: false },
+        );
+        let handoffDeadlineId: ReturnType<typeof setTimeout> | undefined;
+        await Promise.race([
+          handoff,
+          new Promise<void>((resolve) => {
+            handoffDeadlineId = setTimeout(resolve, SESSION_HANDOFF_DEADLINE_MS);
+          }),
+        ]).finally(() => {
+          if (handoffDeadlineId !== undefined) {
+            clearTimeout(handoffDeadlineId);
+          }
+        });
+        markAuthResolved();
+      },
+      onSignedOut: async () => {
+        await syncDeviceCredentialToHost();
+        const cred = await loadPersistedDeviceCredential(authStore);
+        if (cred) {
+          try {
+            await sessionClient.start();
+          } catch (socketError) {
+            if (__DEV__) {
+              loggerUtil.debug(
+                'Device socket start failed (non-fatal)',
+                { component: 'runProviderColdBoot' },
+                socketError,
+              );
+            }
+          }
+        }
+        markAuthResolved();
+      },
+      onStepError: (id, error) => {
+        if (__DEV__) {
+          loggerUtil.debug(
+            `Cold-boot step "${id}" errored (non-fatal, falling through)`,
+            { component: 'runProviderColdBoot' },
+            error,
+          );
+        }
+      },
+    });
+
+    if (isWebBrowser() && clientId && outcome.kind !== 'session') {
+      const redirected = await maybeStartSilentOAuthRestore({
+        oxyServices,
+        clientId,
+        redirectUri: authRedirectUri,
+      });
+      if (redirected) {
+        return;
+      }
+    }
+  } catch (error) {
+    if (__DEV__) {
+      loggerUtil.error(
+        'Cold boot error',
+        error instanceof Error ? error : new Error(String(error)),
+        { component: 'runProviderColdBoot' },
+      );
+    }
+  } finally {
+    markAuthResolved();
+  }
+}
+

package/src/ui/client.ts

@@ -5,7 +5,7 @@
  * These are direct exports without runtime detection overhead.
  *
  * @example
- * import { OxyProvider, useOxy, Avatar } from '@oxyhq/services/ui/client';
+ * import { OxyProvider, useOxy, LogoIcon } from '@oxyhq/services/ui/client';
  */
 
 // Components
@@ -13,12 +13,11 @@ export { default as OxyProvider } from './components/OxyProvider';
 export { default as OxySignInButton } from './components/OxySignInButton';
 export { default as OxyAuthPrompt } from './components/OxyAuthPrompt';
 export type { OxyAuthPromptProps } from './components/OxyAuthPrompt';
-export { default as OxyLogo } from './components/OxyLogo';
-export { default as Avatar } from './components/Avatar';
+export { LogoIcon } from './components/logo/LogoIcon';
+export { LogoText } from './components/logo/LogoText';
 export { default as FollowButton } from './components/FollowButton';
 export { default as OxyPayButton } from './components/OxyPayButton';
 export { FontLoader, setupFonts } from './components/FontLoader';
-export { default as OxyIcon } from './components/icon/OxyIcon';
 
 // Context
 export { useOxy } from './context/OxyContext';

package/src/ui/components/FollowButton.tsx

@@ -1,15 +1,13 @@
 import React, { useEffect, useCallback, useMemo, useState, memo } from 'react';
 import {
-  TouchableOpacity,
-  Text,
   type ViewStyle,
   type TextStyle,
   type StyleProp,
-  Platform,
-  ActivityIndicator
 } from 'react-native';
 import { useOxy } from '../context/OxyContext';
 import { toast } from '@oxyhq/bloom';
+import { Button } from '@oxyhq/bloom/button';
+import { Loading } from '@oxyhq/bloom/loading';
 import { useFollow, useFollowForButton } from '../hooks/useFollow';
 import { useFollowStore } from '../stores/followStore';
 import { useTheme } from '@oxyhq/bloom/theme';
@@ -107,34 +105,26 @@ const FollowButtonInner = memo(function FollowButtonInner({
     if (userId) fetchStatus();
   }, [userId, fetchStatus]);
 
-  const baseButtonStyle = getBaseButtonStyle(size, style);
-  const baseTextStyle = getBaseTextStyle(size, textStyle);
+  const showSpinner = showLoadingState && isLoading;
 
   return (
-    <TouchableOpacity
-      className={isFollowing
-        ? 'bg-background border-border'
-        : 'bg-primary border-primary'
-      }
-      style={baseButtonStyle}
-      onPress={handlePress}
+    <Button
+      variant={isFollowing ? 'secondary' : 'primary'}
+      size={size}
+      onPress={() => { void handlePress(); }}
       disabled={disabled || isLoading}
-      activeOpacity={0.8}
-    >
-      {showLoadingState && isLoading ? (
-        <ActivityIndicator
+      style={style}
+      textStyle={textStyle}
+      icon={showSpinner ? (
+        <Loading
+          variant="inline"
           size="small"
           color={isFollowing ? colors.text : colors.primaryForeground}
         />
-      ) : (
-        <Text
-          className={isFollowing ? 'text-foreground' : 'text-primary-foreground'}
-          style={baseTextStyle}
-        >
-          {isFollowing ? 'Following' : 'Follow'}
-        </Text>
-      )}
-    </TouchableOpacity>
+      ) : undefined}
+    >
+      {showSpinner ? undefined : (isFollowing ? 'Following' : 'Follow')}
+    </Button>
   );
 });
 
@@ -246,34 +236,26 @@ const FollowButtonMultiInner = memo(function FollowButtonMultiInner({
     }
   }, [disabled, isLoading, allFollowing, followAllUsers, unfollowAllUsers, onFollowChange, onBulkFollow, onBulkUnfollow, preventParentActions]);
 
-  const baseButtonStyle = getBaseButtonStyle(size, style);
-  const baseTextStyle = getBaseTextStyle(size, textStyle);
+  const showSpinner = showLoadingState && isLoading;
 
   return (
-    <TouchableOpacity
-      className={allFollowing
-        ? 'bg-background border-border'
-        : 'bg-primary border-primary'
-      }
-      style={baseButtonStyle}
-      onPress={handlePress}
+    <Button
+      variant={allFollowing ? 'secondary' : 'primary'}
+      size={size}
+      onPress={() => { void handlePress(); }}
       disabled={disabled || isLoading}
-      activeOpacity={0.8}
-    >
-      {showLoadingState && isLoading ? (
-        <ActivityIndicator
+      style={style}
+      textStyle={textStyle}
+      icon={showSpinner ? (
+        <Loading
+          variant="inline"
           size="small"
           color={allFollowing ? colors.text : colors.primaryForeground}
         />
-      ) : (
-        <Text
-          className={allFollowing ? 'text-foreground' : 'text-primary-foreground'}
-          style={baseTextStyle}
-        >
-          {allFollowing ? followedAllLabel : followAllLabel}
-        </Text>
-      )}
-    </TouchableOpacity>
+      ) : undefined}
+    >
+      {showSpinner ? undefined : (allFollowing ? followedAllLabel : followAllLabel)}
+    </Button>
   );
 });
 
@@ -328,52 +310,5 @@ const FollowButton: React.FC<FollowButtonProps> = (props) => {
   );
 };
 
-function getBaseButtonStyle(size: string, style?: StyleProp<ViewStyle>): StyleProp<ViewStyle> {
-  const baseStyle: ViewStyle = {
-    flexDirection: 'row',
-    alignItems: 'center',
-    justifyContent: 'center',
-    borderWidth: 1,
-    ...Platform.select({
-      web: {},
-      default: {
-        shadowColor: '#000',
-        shadowOffset: { width: 0, height: 2 },
-        shadowOpacity: 0.1,
-        shadowRadius: 4,
-        elevation: 2,
-      }
-    }),
-  };
-
-  let sizeStyle: ViewStyle;
-  if (size === 'small') {
-    sizeStyle = { paddingVertical: 6, paddingHorizontal: 12, minWidth: 70, borderRadius: 35 };
-  } else if (size === 'large') {
-    sizeStyle = { paddingVertical: 12, paddingHorizontal: 24, minWidth: 120, borderRadius: 35 };
-  } else {
-    sizeStyle = { paddingVertical: 8, paddingHorizontal: 16, minWidth: 90, borderRadius: 35 };
-  }
-
-  return [baseStyle, sizeStyle, style];
-}
-
-function getBaseTextStyle(size: string, textStyle?: StyleProp<TextStyle>): StyleProp<TextStyle> {
-  const baseTextStyle: TextStyle = {
-    fontWeight: '600',
-  };
-
-  let sizeTextStyle: TextStyle;
-  if (size === 'small') {
-    sizeTextStyle = { fontSize: 13 };
-  } else if (size === 'large') {
-    sizeTextStyle = { fontSize: 16 };
-  } else {
-    sizeTextStyle = { fontSize: 15 };
-  }
-
-  return [baseTextStyle, sizeTextStyle, textStyle];
-}
-
 export { FollowButton };
 export default FollowButton;