@oxyhq/services 6.9.11 → 6.9.13

package/src/ui/components/FollowButton.tsx

@@ -1,5 +1,4 @@
-import type React from 'react';
-import { useEffect, useCallback } from 'react';
+import React, { useEffect, useCallback, memo } from 'react';
 import {
   TouchableOpacity,
   Text,
@@ -21,8 +20,9 @@ import Animated, {
 import { useOxy } from '../context/OxyContext';
 import { fontFamilies } from '../styles/fonts';
 import { toast } from '../../lib/sonner';
-import { useFollow } from '../hooks/useFollow';
+import { useFollowForButton } from '../hooks/useFollow';
 import { useThemeColors } from '../styles/theme';
+import type { OxyServices } from '@oxyhq/core';
 
 // Create animated TouchableOpacity
 const AnimatedTouchableOpacity = Animated.createAnimatedComponent(TouchableOpacity);
@@ -41,8 +41,22 @@ export interface FollowButtonProps {
   theme?: 'light' | 'dark';
 }
 
-const FollowButton: React.FC<FollowButtonProps> = ({
+/**
+ * Inner component that handles all hooks and rendering.
+ *
+ * Separated from the outer wrapper to avoid a Rules of Hooks violation.
+ * The outer wrapper handles the auth/self-follow guard and returns null
+ * before any hooks are called. This inner component always renders
+ * (all hooks are called unconditionally).
+ *
+ * Receives oxyServices as a prop instead of calling useOxy(), so it does
+ * not subscribe to the OxyContext. This is critical in list contexts where
+ * N buttons would all re-render on any context change (session socket events,
+ * token refreshes, etc.).
+ */
+const FollowButtonInner = memo(function FollowButtonInner({
   userId,
+  oxyServices,
   initiallyFollowing = false,
   size = 'medium',
   onFollowChange,
@@ -52,42 +66,23 @@ const FollowButton: React.FC<FollowButtonProps> = ({
   showLoadingState = true,
   preventParentActions = true,
   theme = 'light',
-}) => {
-  const { oxyServices, isAuthenticated, user: currentUser } = useOxy();
+}: FollowButtonProps & { oxyServices: OxyServices }) {
   const colors = useThemeColors(theme);
 
-  // Safety check: Don't render follow button on own profile
-  // This provides a fallback in case parent components don't handle this check
-  // Normalize IDs by trimming whitespace and comparing as strings
-  const normalizeId = (id: string | undefined | null): string => {
-    if (!id) return '';
-    return String(id).trim();
-  };
-
-  const currentUserId = normalizeId(currentUser?.id);
-  const targetUserId = normalizeId(userId);
-
-  // Don't render if:
-  // 1. Not authenticated (can't follow anyway)
-  // 2. Viewing own profile (currentUser.id matches userId)
-  if (!isAuthenticated || (currentUserId && targetUserId && currentUserId === targetUserId)) {
-    return null;
-  }
+  // Uses granular Zustand selectors — only re-renders when THIS user's data changes
   const {
     isFollowing,
     isLoading,
-    error,
     toggleFollow,
     setFollowStatus,
     fetchStatus,
-    clearError,
-  } = useFollow(userId);
+  } = useFollowForButton(userId, oxyServices);
 
   // Animation values
   const animationProgress = useSharedValue(isFollowing ? 1 : 0);
   const scale = useSharedValue(1);
 
-  // Button press handler with animation
+  // Stable press handler — depends on primitives only
   const handlePress = useCallback(async (event?: { preventDefault?: () => void; stopPropagation?: () => void }) => {
     if (preventParentActions && event && event.preventDefault) {
       event.preventDefault();
@@ -103,7 +98,7 @@ const FollowButton: React.FC<FollowButtonProps> = ({
     });
 
     try {
-      await toggleFollow?.();
+      await toggleFollow();
       if (onFollowChange) onFollowChange(!isFollowing);
     } catch (err: unknown) {
       const error = err instanceof Error ? err : new Error(String(err));
@@ -111,26 +106,28 @@ const FollowButton: React.FC<FollowButtonProps> = ({
     }
   }, [disabled, isLoading, toggleFollow, onFollowChange, isFollowing, preventParentActions, scale]);
 
-  // biome-ignore lint/correctness/useExhaustiveDependencies: intentional mount-only initialization
+  // Set initial follow status on mount if provided and not already set
   useEffect(() => {
     if (userId && !isFollowing && initiallyFollowing) {
-      setFollowStatus?.(initiallyFollowing);
+      setFollowStatus(initiallyFollowing);
     }
+    // Intentional: only run on mount with initial values
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [userId, initiallyFollowing]);
 
-  // Fetch latest follow status from backend on mount if authenticated
+  // Fetch latest follow status from backend on mount
   useEffect(() => {
-    if (userId && isAuthenticated) {
-      fetchStatus?.();
+    if (userId) {
+      fetchStatus();
     }
-  }, [userId, fetchStatus, isAuthenticated]);
+  }, [userId, fetchStatus]);
 
   // Animate button on follow/unfollow
   useEffect(() => {
     animationProgress.value = withTiming(isFollowing ? 1 : 0, { duration: 300, easing: Easing.inOut(Easing.ease) });
   }, [isFollowing, animationProgress]);
 
-  // Animated styles for better performance
+  // Animated styles
   const animatedButtonStyle = useAnimatedStyle(() => {
     return {
       transform: [{ scale: scale.value }],
@@ -157,98 +154,109 @@ const FollowButton: React.FC<FollowButtonProps> = ({
     };
   }, [colors]);
 
-  // Get base button style (without state-specific colors since they're animated)
-  const getBaseButtonStyle = (): StyleProp<ViewStyle> => {
-    const baseStyle = {
-      flexDirection: 'row' as const,
-      alignItems: 'center' as const,
-      justifyContent: 'center' as const,
-      borderWidth: 1,
-      ...Platform.select({
-        web: {
-          boxShadow: '0 2px 4px rgba(0,0,0,0.1)',
-        },
-        default: {
-          shadowColor: '#000',
-          shadowOffset: { width: 0, height: 2 },
-          shadowOpacity: 0.1,
-          shadowRadius: 4,
-          elevation: 2,
-        }
-      }),
-    };
-
-    // Size-specific styles
-    let sizeStyle = {};
-    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 {
-      // medium
-      sizeStyle = {
-        paddingVertical: 8,
-        paddingHorizontal: 16,
-        minWidth: 90,
-        borderRadius: 35,
-      };
-    }
-
-    return [baseStyle, sizeStyle, style];
-  };
-
-  // Get base text style (without state-specific colors since they're animated)
-  const getBaseTextStyle = (): StyleProp<TextStyle> => {
-    const baseTextStyle = {
-      fontFamily: fontFamilies.interSemiBold,
-      fontWeight: '600' as const,
-    };
-
-    // Size-specific text styles
-    let sizeTextStyle = {};
-    if (size === 'small') {
-      sizeTextStyle = { fontSize: 13 };
-    } else if (size === 'large') {
-      sizeTextStyle = { fontSize: 16 };
-    } else {
-      // medium
-      sizeTextStyle = { fontSize: 15 };
-    }
-
-    return [baseTextStyle, sizeTextStyle, textStyle];
-  };
+  const baseButtonStyle = getBaseButtonStyle(size, style);
+  const baseTextStyle = getBaseTextStyle(size, textStyle);
 
   return (
     <AnimatedTouchableOpacity
-      style={[getBaseButtonStyle(), animatedButtonStyle]}
+      style={[baseButtonStyle, animatedButtonStyle]}
       onPress={handlePress}
       disabled={disabled || isLoading}
       activeOpacity={0.8}
     >
       {showLoadingState && isLoading ? (
         <ActivityIndicator
-          size={size === 'small' ? 'small' : 'small'}
+          size="small"
           color={isFollowing ? '#FFFFFF' : colors.primary}
         />
       ) : (
-        <AnimatedText style={[getBaseTextStyle(), animatedTextStyle]}>
+        <AnimatedText style={[baseTextStyle, animatedTextStyle]}>
           {isFollowing ? 'Following' : 'Follow'}
         </AnimatedText>
       )}
     </AnimatedTouchableOpacity>
   );
+});
+
+/**
+ * Outer wrapper that handles the "should we render?" check.
+ *
+ * This is the ONLY place useOxy() is called — to check authentication and
+ * get the current user ID for the self-follow guard. The oxyServices instance
+ * is passed down as a prop to the inner component, which avoids subscribing
+ * to the full OxyContext.
+ *
+ * The early return happens BEFORE the inner component mounts, so the inner
+ * component's hooks are never called conditionally (no Rules of Hooks violation).
+ */
+const FollowButton: React.FC<FollowButtonProps> = (props) => {
+  const { oxyServices, isAuthenticated, user: currentUser } = useOxy();
+
+  const currentUserId = currentUser?.id ? String(currentUser.id).trim() : '';
+  const targetUserId = props.userId ? String(props.userId).trim() : '';
+
+  // Don't render if not authenticated or viewing own profile
+  if (!isAuthenticated || !targetUserId || (currentUserId && currentUserId === targetUserId)) {
+    return null;
+  }
+
+  return (
+    <FollowButtonInner
+      {...props}
+      userId={targetUserId}
+      oxyServices={oxyServices}
+    />
+  );
 };
 
+// Pure helper functions (no hooks, no state) extracted outside the component
+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 = {
+    fontFamily: fontFamilies.interSemiBold,
+    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;
+export default FollowButton;

package/src/ui/components/GroupedSection.tsx

@@ -11,13 +11,18 @@ interface GroupedSectionItem {
     title: string;
     subtitle?: string;
     onPress?: () => void;
+    onLongPress?: () => void;
     showChevron?: boolean;
     disabled?: boolean;
+    selected?: boolean;
     customContent?: React.ReactNode;
     customIcon?: React.ReactNode;
     multiRow?: boolean;
     dense?: boolean;
     customContentBelow?: React.ReactNode;
+    theme?: string;
+    /** Allow additional properties for extensibility */
+    [key: string]: unknown;
 }
 
 interface GroupedSectionProps {

package/src/ui/components/feedback/types.ts

@@ -16,7 +16,7 @@ export interface FeedbackState {
 }
 
 export interface FeedbackType {
-    id: string;
+    id: FeedbackData['type'];
     label: string;
     icon: string;
     color: string;
@@ -24,7 +24,7 @@ export interface FeedbackType {
 }
 
 export interface PriorityLevel {
-    id: string;
+    id: FeedbackData['priority'];
     label: string;
     icon: string;
     color: string;

package/src/ui/components/fileManagement/FileDetailsModal.tsx

@@ -53,7 +53,7 @@ export const FileDetailsModal: React.FC<FileDetailsModalProps> = ({
                     <View style={[fileManagementStyles.fileDetailCard, { backgroundColor: themeStyles.secondaryBackgroundColor, borderColor }]}>
                         <View style={fileManagementStyles.fileDetailIcon}>
                             <Ionicons
-                                name={getFileIcon(file.contentType) as any}
+                                name={getFileIcon(file.contentType) as React.ComponentProps<typeof Ionicons>['name']}
                                 size={64}
                                 color={themeStyles.primaryColor}
                             />

package/src/ui/components/fileManagement/UploadPreview.tsx

@@ -72,7 +72,7 @@ const UploadPreviewContent: React.FC<{
                             ) : (
                                 <View style={[fileManagementStyles.uploadPreviewIconContainer, { backgroundColor: themeStyles.isDarkTheme ? '#333333' : '#F0F0F0' }]}>
                                     <Ionicons
-                                        name={getFileIcon(pendingFile.type) as any}
+                                        name={getFileIcon(pendingFile.type) as React.ComponentProps<typeof Ionicons>['name']}
                                         size={32}
                                         color={themeStyles.primaryColor}
                                     />

package/src/ui/components/internal/GroupedPillButtons.tsx

@@ -2,6 +2,8 @@ import type React from 'react';
 import { View, TouchableOpacity, Text, ActivityIndicator, StyleSheet, Platform } from 'react-native';
 import { Ionicons } from '@expo/vector-icons';
 
+type IoniconsName = React.ComponentProps<typeof Ionicons>['name'];
+
 interface ButtonConfig {
     text: string;
     onPress: () => void;
@@ -12,9 +14,16 @@ interface ButtonConfig {
     testID?: string;
 }
 
+interface GroupedPillButtonColors {
+    primary: string;
+    secondary?: string;
+    border: string;
+    text: string;
+}
+
 interface GroupedPillButtonsProps {
     buttons: ButtonConfig[];
-    colors: any;
+    colors: GroupedPillButtonColors;
     gap?: number;
 }
 
@@ -100,7 +109,7 @@ const GroupedPillButtons: React.FC<GroupedPillButtonsProps> = ({
         };
     };
 
-    const getTextStyle = (button: ButtonConfig, colors: any) => {
+    const getTextStyle = (button: ButtonConfig, colors: GroupedPillButtonColors) => {
         const baseTextStyle = {
             fontSize: 15,
             fontWeight: '600' as const,
@@ -124,11 +133,11 @@ const GroupedPillButtons: React.FC<GroupedPillButtonsProps> = ({
         return {
             ...baseTextStyle,
             color: textColor,
-            ...(Platform.OS === 'web' ? { whiteSpace: 'nowrap' as any } : null),
+            ...(Platform.OS === 'web' ? { whiteSpace: 'nowrap' as const } : null),
         };
     };
 
-    const getIconColor = (button: ButtonConfig, colors: any) => {
+    const getIconColor = (button: ButtonConfig, colors: GroupedPillButtonColors) => {
         const isDisabled = button.disabled || button.loading;
         
         switch (button.variant) {
@@ -147,7 +156,7 @@ const GroupedPillButtons: React.FC<GroupedPillButtonsProps> = ({
             button.icon === 'chevron-back';
     };
 
-    const renderButtonContent = (button: ButtonConfig, colors: any, index: number) => {
+    const renderButtonContent = (button: ButtonConfig, colors: GroupedPillButtonColors, index: number) => {
         const iconColor = getIconColor(button, colors);
         const isBack = isBackButton(button);
         const isFirstButton = index === 0;
@@ -172,7 +181,7 @@ const GroupedPillButtons: React.FC<GroupedPillButtonsProps> = ({
                     </Text>
                     {button.icon && (
                         <Ionicons
-                            name={button.icon as any}
+                            name={button.icon as IoniconsName}
                             size={16}
                             color={iconColor}
                         />
@@ -185,7 +194,7 @@ const GroupedPillButtons: React.FC<GroupedPillButtonsProps> = ({
                 <>
                     {button.icon && (
                         <Ionicons
-                            name={button.icon as any}
+                            name={button.icon as IoniconsName}
                             size={16}
                             color={iconColor}
                         />
@@ -204,7 +213,7 @@ const GroupedPillButtons: React.FC<GroupedPillButtonsProps> = ({
                     </Text>
                     {button.icon && (
                         <Ionicons
-                            name={button.icon as any}
+                            name={button.icon as IoniconsName}
                             size={16}
                             color={iconColor}
                         />

package/src/ui/components/payment/PaymentReviewStep.tsx

@@ -74,7 +74,7 @@ const PaymentReviewStep: React.FC<PaymentReviewStepProps> = ({
                         },
                         {
                             id: 'payment-method',
-                            icon: selectedMethod?.icon as any,
+                            icon: selectedMethod?.icon,
                             iconColor: colors.primary,
                             title: t('payment.review.paymentMethod'),
                             subtitle: selectedMethod ? t(`payment.methods.${selectedMethod.key}.label`) : undefined,

package/src/ui/components/payment/PaymentSummaryStep.tsx

@@ -84,7 +84,7 @@ const PaymentSummaryStep: React.FC<PaymentSummaryStepProps> = ({
                                     <GroupedSection
                                         items={paymentItems.map((item, idx) => ({
                                             id: `item-${idx}`,
-                                            icon: getItemTypeIcon(item.type) as any,
+                                            icon: getItemTypeIcon(item.type),
                                             iconColor: colors.primary,
                                             title: `${item.type === 'product' && item.quantity ? `${item.quantity} × ` : ''}${item.name}${item.type === 'subscription' && item.period ? ` (${item.period})` : ''}`,
                                             subtitle: item.description || `${item.currency ? (CURRENCY_SYMBOLS[item.currency.toUpperCase()] || item.currency) : currencySymbol} ${item.price * (item.quantity ?? 1)}`,

package/src/ui/context/hooks/useAuthOperations.ts

@@ -10,6 +10,11 @@ import type { OxyServices } from '@oxyhq/core';
 import { SignatureService } from '@oxyhq/core';
 import * as Crypto from 'expo-crypto';
 
+/** Type guard for error objects with optional code and status properties */
+function isErrorWithCodeOrStatus(error: unknown): error is { code?: string; status?: number; message?: string } {
+  return typeof error === 'object' && error !== null;
+}
+
 export interface UseAuthOperationsOptions {
   oxyServices: OxyServices;
   storage: StorageInterface | null;
@@ -95,8 +100,8 @@ export const useAuthOperations = ({
           errorMessage.includes('network') ||
           errorMessage.includes('Failed to fetch') ||
           errorMessage.includes('fetch failed') ||
-          (error as any)?.code === 'NETWORK_ERROR' ||
-          (error as any)?.status === 0;
+          (isErrorWithCodeOrStatus(error) && error.code === 'NETWORK_ERROR') ||
+          (isErrorWithCodeOrStatus(error) && error.status === 0);
 
         if (isNetworkError) {
           if (__DEV__ && logger) {
@@ -189,7 +194,7 @@ export const useAuthOperations = ({
           await oxyServices.getTokenBySession(sessionResponse.sessionId);
         } catch (tokenError: unknown) {
           const errorMessage = tokenError instanceof Error ? tokenError.message : String(tokenError);
-          const status = (tokenError as any)?.status;
+          const status = isErrorWithCodeOrStatus(tokenError) ? tokenError.status : undefined;
           if (status === 404 || errorMessage.includes('404')) {
             throw new Error(`Session was created but token could not be retrieved. Session ID: ${sessionResponse.sessionId.substring(0, 8)}...`);
           }

package/src/ui/hooks/mutations/useServicesMutations.ts

@@ -1,5 +1,5 @@
 import { useMutation, useQueryClient } from '@tanstack/react-query';
-import type { User } from '@oxyhq/core';
+import type { User, ClientSession } from '@oxyhq/core';
 import { queryKeys, invalidateSessionQueries } from '../queries/queryKeys';
 import { useOxy } from '../../context/OxyContext';
 import { toast } from '../../../lib/sonner';
@@ -59,8 +59,8 @@ export const useLogoutSession = () => {
       // Optimistically remove session
       if (previousSessions) {
         const sessionToLogout = targetSessionId || activeSessionId;
-        const updatedSessions = (previousSessions as any[]).filter(
-          (s: any) => s.sessionId !== sessionToLogout
+        const updatedSessions = (previousSessions as ClientSession[]).filter(
+          (s) => s.sessionId !== sessionToLogout
         );
         queryClient.setQueryData(queryKeys.sessions.list(), updatedSessions);
       }

package/src/ui/hooks/useAuth.ts

@@ -118,11 +118,17 @@ export function useAuth(): UseAuthReturn {
     // If user is clicking "Sign In", they need interactive auth NOW
     if (isWebBrowser() && !publicKey && !isIdentityProvider) {
       try {
-        const popupSession = await (oxyServices as any).signInWithPopup?.();
+        const popupSession = await oxyServices.signInWithPopup?.();
         if (popupSession?.user) {
-          // Update context state with the session (this updates user, sessions, storage)
-          await handlePopupSession(popupSession);
-          return popupSession.user;
+          // The popup auth flow fetches full user data, so the session user
+          // contains full User fields even though the base type is MinimalUserData.
+          // Cast to the expected shape for handlePopupSession.
+          const sessionWithUser = {
+            ...popupSession,
+            user: popupSession.user as unknown as User,
+          };
+          await handlePopupSession(sessionWithUser);
+          return sessionWithUser.user;
         }
         throw new Error('Sign-in failed. Please try again.');
       } catch (popupError) {