@onairos/react-native 3.0.20 → 3.0.22

package/src/components/OnairosButton.tsx

@@ -1,306 +1,366 @@
-import React, { useState, useCallback, forwardRef, useImperativeHandle } from 'react';
-import { 
-  TouchableOpacity, 
-  Text, 
-  StyleSheet, 
-  View, 
-  ViewStyle, 
-  TextStyle,
-  ActivityIndicator,
-  Image,
-} from 'react-native';
-import { UniversalOnboarding } from './UniversalOnboarding';
-import { Overlay } from './Overlay';
-import { COLORS } from '../constants';
-import type { OnairosButtonProps } from '../types';
-import { hasCredentials, getCredentials, deleteCredentials as clearCredentials } from '../utils/secureStorage';
-import { onairosApi } from '../api';
-import { Portal } from '../utils/Portal';
-
-export interface OnairosButtonRef {
-  trigger: () => Promise<void>;
-  reset: () => Promise<void>;
-}
-
-/**
- * OnairosButton Component - A sign-in button similar to Google/Apple sign-in
- */
-export const OnairosButton = forwardRef<OnairosButtonRef, OnairosButtonProps>(({
-  returnLink,
-  prefillUrl,
-  AppName,
-  buttonType = 'normal',
-  requestData,
-  buttonWidth = 180,
-  buttonHeight = 48,
-  hasStroke = false,
-  enabled = true,
-  buttonForm = 'default',
-  onRejection,
-  onResolved,
-  preCheck,
-  color,
-  swerv = false,
-  debug = false,
-  darkMode = false,
-  preferredPlatform,
-  testMode = false,
-}, ref) => {
-  const [showOnboarding, setShowOnboarding] = useState(false);
-  const [showOverlay, setShowOverlay] = useState(false);
-  const [storedCredentials, setStoredCredentials] = useState<any>(null);
-  const [isLoading, setIsLoading] = useState(false);
-  const [isPressed, setIsPressed] = useState(false);
-
-  // Expose methods via ref
-  useImperativeHandle(ref, () => ({
-    trigger: async () => {
-      await handlePress();
-    },
-    reset: async () => {
-      await clearCredentials();
-    }
-  }));
-
-  // Compute button text based on buttonForm
-  const getButtonText = () => {
-    if (buttonForm === 'connect' || buttonForm === 'signup') {
-      return 'Connect with Onairos';
-    } else {
-      return 'Sign in with Onairos';
-    }
-  };
-
-  // Calculate background color based on props and state
-  const getBackgroundColor = (): string => {
-    if (!enabled) {
-      return darkMode ? '#3A3A3A' : '#e0e0e0';
-    }
-    
-    if (isPressed) {
-      return color ? 
-        (typeof color === 'string' ? `${color}80` : color) : 
-        (darkMode ? '#32323280' : '#f5f5f580');
-    }
-    
-    return color || (darkMode ? '#2A2A2A' : '#ffffff');
-  };
-
-  // Calculate text color based on background luminance
-  const getTextColor = (): string => {
-    if (!enabled) {
-      return darkMode ? '#777777' : '#AAAAAA';
-    }
-    
-    if (darkMode) {
-      return '#FFFFFF';
-    }
-    
-    const bgColor = getBackgroundColor();
-    // Simple luminance check
-    return bgColor === '#ffffff' || bgColor === '#f5f5f580' || bgColor.includes('#f') ? '#000000' : '#FFFFFF';
-  };
-  
-  const handlePress = async () => {
-    if (!enabled || isLoading) return;
-    
-    setIsLoading(true);
-    
-    try {
-      if (preCheck) {
-        const shouldProceed = await preCheck();
-        if (!shouldProceed) {
-          onRejection?.('Precheck validation failed');
-          setIsLoading(false);
-          return;
-        }
-      }
-
-      // Check if credentials exist
-      const hasStoredCreds = await hasCredentials();
-      
-      if (hasStoredCreds) {
-        // If credentials exist, fetch them and verify
-        const credentials = await getCredentials();
-        
-        if (!credentials || !credentials.username) {
-          // Invalid credentials, clear and start fresh
-          await clearCredentials();
-          setShowOnboarding(true);
-          setIsLoading(false);
-          return;
-        }
-        
-        try {
-          // Validate credentials with server
-          const isValid = await onairosApi.validateCredentials(credentials.username);
-          
-          if (!isValid) {
-            // Clear invalid credentials
-            await clearCredentials();
-            setShowOnboarding(true);
-            setIsLoading(false);
-            return;
-          }
-          
-          // Store and display overlay with valid credentials
-          setStoredCredentials(credentials);
-          setShowOverlay(true);
-        } catch (validationError) {
-          console.warn('Validation error, proceeding to onboarding:', validationError);
-          setShowOnboarding(true);
-        }
-      } else {
-        // If no credentials, show onboarding
-        setShowOnboarding(true);
-      }
-    } catch (error) {
-      console.error('Error during button press flow:', error);
-      // Fall back to onboarding on error
-      setShowOnboarding(true);
-      onRejection?.(error instanceof Error ? error.message : 'Unknown error');
-    } finally {
-      setIsLoading(false);
-    }
-  };
-
-  const handleOnboardingComplete = useCallback((apiUrl: string, token: string, data: any) => {
-    setShowOnboarding(false);
-    if (onResolved) {
-      onResolved(apiUrl, token, data);
-    }
-  }, [onResolved]);
-  
-  const handleOverlayResolved = useCallback((apiUrl: string, token: string, data: any) => {
-    setShowOverlay(false);
-    if (onResolved) {
-      onResolved(apiUrl, token, data);
-    }
-  }, [onResolved]);
-
-  // Calculate button styles based on props
-  const buttonStyle: ViewStyle[] = [
-    styles.button,
-    buttonType === 'pill' && styles.pillButton,
-    hasStroke && styles.strokedButton,
-    { 
-      width: buttonWidth,
-      height: buttonHeight,
-      backgroundColor: getBackgroundColor(),
-      borderColor: darkMode ? '#555555' : '#000000',
-    },
-    swerv && styles.swervButton,
-    !enabled && styles.disabledButton
-  ].filter(Boolean) as ViewStyle[];
-
-  // Calculate text color
-  const textColor = getTextColor();
-
-  // Render components
-  return (
-    <>
-      <TouchableOpacity
-        style={buttonStyle}
-        onPress={handlePress}
-        disabled={!enabled || isLoading}
-        accessibilityLabel={`Sign in with Onairos`}
-        onPressIn={() => setIsPressed(true)}
-        onPressOut={() => setIsPressed(false)}
-      >
-        {isLoading ? (
-          <ActivityIndicator 
-            size="small" 
-            color={textColor} 
-          />
-        ) : (
-          <View style={styles.buttonContent}>
-            <Image 
-              source={require('../assets/images/onairos_logo.png')} 
-              style={styles.logo} 
-              resizeMode="contain" 
-            />
-            <Text style={[styles.buttonText, { color: textColor }]}>
-              {getButtonText()}
-            </Text>
-          </View>
-        )}
-      </TouchableOpacity>
-
-      {/* Overlay and Onboarding components rendered outside the button */}
-      {showOnboarding && (
-        <UniversalOnboarding
-          visible={showOnboarding}
-          onClose={() => {
-            setShowOnboarding(false);
-            onRejection?.('User closed onboarding');
-          }}
-          AppName={AppName}
-          requestData={requestData as any}
-          returnLink={returnLink || ''}
-          onComplete={handleOnboardingComplete}
-          debug={debug}
-          test={testMode}
-          preferredPlatform={preferredPlatform}
-        />
-      )}
-      
-      {/* Overlay rendered through Portal to ensure it appears at root level */}
-      {showOverlay && storedCredentials && (
-        <Portal>
-          <Overlay
-            data={requestData || {}}
-            username={storedCredentials.username}
-            modelKey={storedCredentials.userPin || ''}
-            onResolved={handleOverlayResolved}
-            appName={AppName}
-            darkMode={darkMode}
-          />
-        </Portal>
-      )}
-    </>
-  );
-});
-
-const styles = StyleSheet.create({
-  button: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    justifyContent: 'center',
-    paddingVertical: 12,
-    paddingHorizontal: 16,
-    borderRadius: 8,
-    shadowColor: '#000',
-    shadowOffset: { width: 0, height: 2 },
-    shadowOpacity: 0.1,
-    shadowRadius: 4,
-    elevation: 2,
-  },
-  buttonContent: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  logo: {
-    width: 24,
-    height: 24,
-    marginRight: 8,
-  },
-  pillButton: {
-    borderRadius: 24,
-  },
-  strokedButton: {
-    backgroundColor: 'transparent',
-    borderWidth: 1,
-  },
-  swervButton: {
-    transform: [{ rotate: '-2deg' }],
-  },
-  disabledButton: {
-    opacity: 0.6,
-  },
-  buttonText: {
-    fontSize: 16,
-    fontWeight: '600',
-    textAlign: 'center',
-  },
+import React, { useState, useCallback, forwardRef, useImperativeHandle } from 'react';
+import { 
+  TouchableOpacity, 
+  Text, 
+  StyleSheet, 
+  View, 
+  ViewStyle, 
+  TextStyle,
+  ActivityIndicator,
+  Image,
+} from 'react-native';
+import { UniversalOnboarding } from './UniversalOnboarding';
+import { Overlay } from './Overlay';
+import { COLORS } from '../constants';
+import type { OnairosButtonProps } from '../types';
+import { hasCredentials, getCredentials, deleteCredentials as clearCredentials } from '../utils/secureStorage';
+import { onairosApi } from '../api';
+import { Portal } from '../utils/Portal';
+
+export interface OnairosButtonRef {
+  trigger: () => Promise<void>;
+  reset: () => Promise<void>;
+}
+
+/**
+ * OnairosButton Component - A sign-in button similar to Google/Apple sign-in
+ */
+export const OnairosButton = forwardRef<OnairosButtonRef, OnairosButtonProps>(({
+  returnLink,
+  prefillUrl,
+  AppName,
+  buttonType = 'normal',
+  requestData,
+  buttonWidth = 180,
+  buttonHeight = 48,
+  hasStroke = false,
+  enabled = true,
+  buttonForm = 'default',
+  onRejection,
+  onResolved,
+  preCheck,
+  color,
+  swerv = false,
+  debug = false,
+  darkMode = false,
+  preferredPlatform,
+  testMode = false,
+  autoFetch = false,
+  inferenceData,
+  textLayout,
+  textColor: customTextColor,
+  proofMode = false,
+  webpageName,
+}, ref) => {
+  const [showOnboarding, setShowOnboarding] = useState(false);
+  const [showOverlay, setShowOverlay] = useState(false);
+  const [storedCredentials, setStoredCredentials] = useState<any>(null);
+  const [isLoading, setIsLoading] = useState(false);
+  const [isPressed, setIsPressed] = useState(false);
+
+  // Expose methods via ref
+  useImperativeHandle(ref, () => ({
+    trigger: async () => {
+      await handlePress();
+    },
+    reset: async () => {
+      await clearCredentials();
+    }
+  }));
+
+  // Compute button text based on buttonForm
+  const getButtonText = () => {
+    if (buttonForm === 'connect' || buttonForm === 'signup') {
+      return 'Connect with Onairos';
+    } else {
+      return 'Sign in with Onairos';
+    }
+  };
+
+  // Calculate background color based on props and state
+  const getBackgroundColor = (): string => {
+    if (!enabled) {
+      return darkMode ? '#3A3A3A' : '#e0e0e0';
+    }
+    
+    if (isPressed) {
+      return color ? 
+        (typeof color === 'string' ? `${color}80` : color) : 
+        (darkMode ? '#32323280' : '#f5f5f580');
+    }
+    
+    return color || (darkMode ? '#2A2A2A' : '#ffffff');
+  };
+
+  // Calculate text color based on background luminance
+  const getTextColor = (): string => {
+    if (!enabled) {
+      return darkMode ? '#777777' : '#AAAAAA';
+    }
+    
+    if (darkMode) {
+      return '#FFFFFF';
+    }
+    
+    const bgColor = getBackgroundColor();
+    // Simple luminance check
+    return bgColor === '#ffffff' || bgColor === '#f5f5f580' || bgColor.includes('#f') ? '#000000' : '#FFFFFF';
+  };
+  
+  const handlePress = async () => {
+    if (!enabled || isLoading) return;
+    
+    setIsLoading(true);
+    
+    try {
+      // If autoFetch is enabled, directly call the API with inferenceData
+      if (autoFetch) {
+        if (!inferenceData) {
+          throw new Error('inferenceData is required when autoFetch is enabled');
+        }
+        
+        try {
+          // Check if credentials exist
+          const hasStoredCreds = await hasCredentials();
+          
+          if (hasStoredCreds) {
+            const credentials = await getCredentials();
+            
+            if (!credentials || !credentials.username) {
+              throw new Error('Invalid credentials');
+            }
+            
+            // Call the API directly with inferenceData
+            // Using a custom API call for inference
+            const result = await fetch(`https://api.onairos.ai/inference`, {
+              method: 'POST',
+              headers: {
+                'Content-Type': 'application/json',
+                'Authorization': `Bearer ${credentials.userPin || ''}`
+              },
+              body: JSON.stringify({
+              username: credentials.username,
+              modelKey: credentials.userPin || '',
+              data: inferenceData,
+              requestData: requestData || {},
+              proofMode: proofMode,
+              webpageName: webpageName || AppName
+            })
+            }).then(res => res.json());
+            
+            if (result && result.success) {
+              if (onResolved) {
+                onResolved(result.apiUrl || '', result.token || '', result.data || {});
+              }
+              setIsLoading(false);
+              return;
+            } else {
+              throw new Error(result?.error || 'API call failed');
+            }
+          } else {
+            // No credentials, proceed with normal flow
+            console.log('No credentials found, proceeding with normal flow');
+          }
+        } catch (autoFetchError) {
+          console.error('AutoFetch error:', autoFetchError);
+          // Fall back to normal flow on error
+        }
+      }
+      
+      if (preCheck) {
+        const shouldProceed = await preCheck();
+        if (!shouldProceed) {
+          onRejection?.('Precheck validation failed');
+          setIsLoading(false);
+          return;
+        }
+      }
+
+      // Check if credentials exist
+      const hasStoredCreds = await hasCredentials();
+      
+      if (hasStoredCreds) {
+        // If credentials exist, fetch them and verify
+        const credentials = await getCredentials();
+        
+        if (!credentials || !credentials.username) {
+          // Invalid credentials, clear and start fresh
+          await clearCredentials();
+          setShowOnboarding(true);
+          setIsLoading(false);
+          return;
+        }
+        
+        try {
+          // Validate credentials with server
+          const isValid = await onairosApi.validateCredentials(credentials.username);
+          
+          if (!isValid) {
+            // Clear invalid credentials
+            await clearCredentials();
+            setShowOnboarding(true);
+            setIsLoading(false);
+            return;
+          }
+          
+          // Store and display overlay with valid credentials
+          setStoredCredentials(credentials);
+          setShowOverlay(true);
+        } catch (validationError) {
+          console.warn('Validation error, proceeding to onboarding:', validationError);
+          setShowOnboarding(true);
+        }
+      } else {
+        // If no credentials, show onboarding
+        setShowOnboarding(true);
+      }
+    } catch (error) {
+      console.error('Error during button press flow:', error);
+      // Fall back to onboarding on error
+      setShowOnboarding(true);
+      onRejection?.(error instanceof Error ? error.message : 'Unknown error');
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const handleOnboardingComplete = useCallback((apiUrl: string, token: string, data: any) => {
+    setShowOnboarding(false);
+    if (onResolved) {
+      onResolved(apiUrl, token, data);
+    }
+  }, [onResolved]);
+  
+  const handleOverlayResolved = useCallback((apiUrl: string, token: string, data: any) => {
+    setShowOverlay(false);
+    if (onResolved) {
+      onResolved(apiUrl, token, data);
+    }
+  }, [onResolved]);
+
+  // Calculate button styles based on props
+  const buttonStyle: ViewStyle[] = [
+    styles.button,
+    buttonType === 'pill' && styles.pillButton,
+    hasStroke && styles.strokedButton,
+    { 
+      width: buttonWidth,
+      height: buttonHeight,
+      backgroundColor: getBackgroundColor(),
+      borderColor: darkMode ? '#555555' : '#000000',
+    },
+    swerv && styles.swervButton,
+    !enabled && styles.disabledButton
+  ].filter(Boolean) as ViewStyle[];
+
+  // Calculate button text color
+  const buttonTextColor = getTextColor();
+
+  // Render components
+  return (
+    <>
+      <TouchableOpacity
+        style={buttonStyle}
+        onPress={handlePress}
+        disabled={!enabled || isLoading}
+        accessibilityLabel={`Sign in with Onairos`}
+        onPressIn={() => setIsPressed(true)}
+        onPressOut={() => setIsPressed(false)}
+      >
+        {isLoading ? (
+          <ActivityIndicator 
+            size="small" 
+            color={buttonTextColor} 
+          />
+        ) : (
+          <View style={styles.buttonContent}>
+            <Image 
+              source={require('../assets/images/onairos_logo.png')} 
+              style={styles.logo} 
+              resizeMode="contain" 
+            />
+            <Text style={[styles.buttonText, { color: buttonTextColor }]}>
+              {getButtonText()}
+            </Text>
+          </View>
+        )}
+      </TouchableOpacity>
+
+      {/* Overlay and Onboarding components rendered outside the button */}
+      {showOnboarding && (
+        <UniversalOnboarding
+          visible={showOnboarding}
+          onClose={() => {
+            setShowOnboarding(false);
+            onRejection?.('User closed onboarding');
+          }}
+          AppName={AppName}
+          requestData={requestData as any}
+          returnLink={returnLink || ''}
+          onComplete={handleOnboardingComplete}
+          debug={debug}
+          test={testMode}
+          preferredPlatform={preferredPlatform}
+        />
+      )}
+      
+      {/* Overlay rendered through Portal to ensure it appears at root level */}
+      {showOverlay && storedCredentials && (
+        <Portal>
+          <Overlay
+            data={requestData || {}}
+            username={storedCredentials.username}
+            modelKey={storedCredentials.userPin || ''}
+            onResolved={handleOverlayResolved}
+            appName={AppName}
+            darkMode={darkMode}
+          />
+        </Portal>
+      )}
+    </>
+  );
+});
+
+const styles = StyleSheet.create({
+  button: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+    paddingVertical: 12,
+    paddingHorizontal: 16,
+    borderRadius: 8,
+    shadowColor: '#000',
+    shadowOffset: { width: 0, height: 2 },
+    shadowOpacity: 0.1,
+    shadowRadius: 4,
+    elevation: 2,
+  },
+  buttonContent: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  logo: {
+    width: 24,
+    height: 24,
+    marginRight: 8,
+  },
+  pillButton: {
+    borderRadius: 24,
+  },
+  strokedButton: {
+    backgroundColor: 'transparent',
+    borderWidth: 1,
+  },
+  swervButton: {
+    transform: [{ rotate: '-2deg' }],
+  },
+  disabledButton: {
+    opacity: 0.6,
+  },
+  buttonText: {
+    fontSize: 16,
+    fontWeight: '600',
+    textAlign: 'center',
+  },
 });