@onairos/react-native 2.0.8 → 2.1.1

package/src/components/OnairosButton.tsx

@@ -1,8 +1,10 @@
 import React, { useState } from 'react';
-import { TouchableOpacity, Text, StyleSheet, View, ViewStyle, TextStyle } from 'react-native';
+import { TouchableOpacity, Text, StyleSheet, View, ViewStyle, TextStyle, Image } from 'react-native';
 import { UniversalOnboarding } from './UniversalOnboarding';
+import { Overlay } from './Overlay';
 import { COLORS } from '../constants';
 import type { OnairosButtonProps } from '../types';
+import { hasCredentials, getCredentials } from '../utils/secureStorage';
 
 export const OnairosButton: React.FC<OnairosButtonProps> = ({
   returnLink,
@@ -10,9 +12,9 @@ export const OnairosButton: React.FC<OnairosButtonProps> = ({
   AppName,
   buttonType = 'normal',
   requestData,
-  buttonWidth = 180,
-  buttonHeight,
-  hasStroke = false,
+  buttonWidth = 240,
+  buttonHeight = 48,
+  hasStroke = true,
   enabled = true,
   buttonForm = 'default',
   onRejection,
@@ -25,7 +27,11 @@ export const OnairosButton: React.FC<OnairosButtonProps> = ({
   testMode = false,
 }) => {
   const [showOnboarding, setShowOnboarding] = useState(false);
+  const [showOverlay, setShowOverlay] = useState(false);
+  const [storedCredentials, setStoredCredentials] = useState<any>(null);
 
+  const isDarkMode = color === 'black' || (!color && !hasStroke);
+  
   const handlePress = async () => {
     if (!enabled) return;
 
@@ -37,28 +43,48 @@ export const OnairosButton: React.FC<OnairosButtonProps> = ({
       }
     }
 
-    setShowOnboarding(true);
+    // Check if credentials exist
+    const hasStoredCreds = await hasCredentials();
+    
+    if (hasStoredCreds) {
+      // If credentials exist, fetch them and display overlay
+      const credentials = await getCredentials();
+      setStoredCredentials(credentials);
+      setShowOverlay(true);
+    } else {
+      // If no credentials, show onboarding
+      setShowOnboarding(true);
+    }
   };
 
   const handleOnboardingComplete = (apiUrl: string, token: string, data: any) => {
     setShowOnboarding(false);
     onResolved?.(apiUrl, token, data);
   };
+  
+  const handleOverlayResolved = (apiUrl: string, token: string, data: any) => {
+    setShowOverlay(false);
+    onResolved?.(apiUrl, token, data);
+  };
 
+  // Calculate button styles based on props
   const buttonStyle: ViewStyle[] = [
     styles.button,
     buttonType === 'pill' && styles.pillButton,
     hasStroke && styles.strokedButton,
-    { width: buttonWidth },
-    buttonHeight ? { height: buttonHeight } : null,
+    { 
+      width: buttonWidth,
+      height: buttonHeight
+    },
     color ? { backgroundColor: color } : null,
+    isDarkMode ? styles.darkButton : styles.lightButton,
     swerv && styles.swervButton,
   ].filter(Boolean) as ViewStyle[];
 
+  // Calculate text styles based on props
   const textStyle: TextStyle[] = [
     styles.buttonText,
-    hasStroke && styles.strokedButtonText,
-    color ? styles.customColorText : null,
+    isDarkMode ? styles.lightText : styles.darkText,
   ].filter(Boolean) as TextStyle[];
 
   return (
@@ -67,36 +93,49 @@ export const OnairosButton: React.FC<OnairosButtonProps> = ({
         style={buttonStyle}
         onPress={handlePress}
         disabled={!enabled}
+        accessibilityLabel={`Sign in with Onairos`}
       >
-        <Text style={textStyle}>{AppName}</Text>
+        {/* Optional Onairos logo could be added here */}
+        <Text style={textStyle}>Sign in with Onairos</Text>
       </TouchableOpacity>
 
-      <UniversalOnboarding
-        visible={showOnboarding}
-        onClose={() => setShowOnboarding(false)}
-        AppName={AppName}
-        requestData={requestData}
-        returnLink={returnLink}
-        onComplete={handleOnboardingComplete}
-        preferredPlatform={preferredPlatform}
-        debug={debug}
-        test={testMode}
-      />
+      {showOnboarding && (
+        <UniversalOnboarding
+          visible={showOnboarding}
+          onClose={() => setShowOnboarding(false)}
+          AppName={AppName}
+          requestData={requestData}
+          returnLink={returnLink}
+          onComplete={handleOnboardingComplete}
+          preferredPlatform={preferredPlatform}
+          debug={debug}
+          test={testMode}
+        />
+      )}
+      
+      {showOverlay && storedCredentials && (
+        <Overlay
+          data={requestData || {}}
+          username={storedCredentials.username}
+          modelKey={storedCredentials.userPin || ''}
+          onResolved={handleOverlayResolved}
+        />
+      )}
     </View>
   );
 };
 
 const styles = StyleSheet.create({
   button: {
-    backgroundColor: '#000',
-    paddingVertical: 12,
-    paddingHorizontal: 24,
-    borderRadius: 8,
+    flexDirection: 'row',
     alignItems: 'center',
     justifyContent: 'center',
+    paddingVertical: 12,
+    paddingHorizontal: 16,
+    borderRadius: 4,
   },
   pillButton: {
-    borderRadius: 20,
+    borderRadius: 24,
   },
   strokedButton: {
     backgroundColor: 'transparent',
@@ -106,15 +145,23 @@ const styles = StyleSheet.create({
   swervButton: {
     transform: [{ rotate: '-2deg' }],
   },
+  darkButton: {
+    backgroundColor: '#000',
+    borderColor: '#000',
+  },
+  lightButton: {
+    backgroundColor: '#fff',
+    borderColor: '#000',
+  },
   buttonText: {
-    color: '#fff',
     fontSize: 16,
     fontWeight: '600',
+    textAlign: 'center',
   },
-  strokedButtonText: {
-    color: '#000',
-  },
-  customColorText: {
+  lightText: {
     color: '#fff',
   },
+  darkText: {
+    color: '#000',
+  },
 }); 

package/src/components/Overlay.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, useRef } from 'react';
 import {
   View,
   Text,
@@ -7,9 +7,10 @@ import {
   ScrollView,
   Alert,
   Platform,
+  Dimensions,
 } from 'react-native';
 import { BottomSheetModal, BottomSheetBackdrop } from '@gorhom/bottom-sheet';
-import DeviceInfo from 'react-native-device-info';
+// import DeviceInfo from 'react-native-device-info';  // Comment out device info import
 import { COLORS } from '../constants';
 import { onairosApi } from '../api';
 import { encryptModelKey, getServerPublicKey } from '../utils/encryption';
@@ -35,7 +36,8 @@ export const Overlay: React.FC<OverlayProps> = ({
 }) => {
   const [selections, setSelections] = useState<{ [key: string]: boolean }>({});
   const [details, setDetails] = useState<string>('');
-  const bottomSheetRef = React.useRef<BottomSheetModal>(null);
+  const bottomSheetRef = useRef<BottomSheetModal>(null);
+  const snapPoints = ['60%']; // Set to 60% of screen height
 
   useEffect(() => {
     // Initialize selection state
@@ -45,6 +47,11 @@ export const Overlay: React.FC<OverlayProps> = ({
     });
     setSelections(initialSelections);
     getDetails();
+    
+    // Present the bottom sheet when component mounts
+    setTimeout(() => {
+      bottomSheetRef.current?.present();
+    }, 100);
   }, []);
 
   const getDetails = async () => {
@@ -66,17 +73,12 @@ export const Overlay: React.FC<OverlayProps> = ({
 
   const confirmSelection = async () => {
     try {
-      let appId = 'unknown';
-      try {
-        // Get bundle ID/package name using react-native-device-info
-        appId = Platform.select({
-          ios: await DeviceInfo.getBundleId(),
-          android: await DeviceInfo.getPackageName(),
-          default: 'unknown'
-        });
-      } catch (e) {
-        console.warn('Failed to get app identifier:', e);
-      }
+      // Mock app identifier
+      const appId = Platform.select({
+        ios: 'com.onairos.mock',
+        android: 'com.onairos.mock',
+        default: 'unknown'
+      });
 
       const serverPublicKey = await getServerPublicKey();
       const encryptedModelKey = encryptModelKey(serverPublicKey, modelKey);
@@ -98,7 +100,7 @@ export const Overlay: React.FC<OverlayProps> = ({
         closeOverlay();
       }
     } catch (e) {
-      console.error('Error in confirmSelection:', e);
+      console.error('Error confirming selection:', e);
       showErrorModal('Failed to confirm selection. Please try again.');
     }
   };
@@ -112,14 +114,19 @@ export const Overlay: React.FC<OverlayProps> = ({
   return (
     <BottomSheetModal
       ref={bottomSheetRef}
-      snapPoints={['80%']}
+      snapPoints={snapPoints}
+      handleIndicatorStyle={styles.handleIndicator}
       backdropComponent={(props) => (
         <BottomSheetBackdrop
           {...props}
           appearsOnIndex={0}
           disappearsOnIndex={-1}
+          opacity={0.7}
         />
       )}
+      enablePanDownToClose={true}
+      keyboardBehavior="interactive"
+      keyboardBlurBehavior="restore"
     >
       <View style={styles.container}>
         <View style={styles.header}>
@@ -184,12 +191,18 @@ export const Overlay: React.FC<OverlayProps> = ({
   );
 };
 
+const { width: SCREEN_WIDTH } = Dimensions.get('window');
+
 const styles = StyleSheet.create({
   container: {
     flex: 1,
     backgroundColor: COLORS.white,
-    borderTopLeftRadius: 10,
-    borderTopRightRadius: 10,
+    width: SCREEN_WIDTH,
+  },
+  handleIndicator: {
+    backgroundColor: '#999',
+    width: 40,
+    height: 5,
   },
   header: {
     flexDirection: 'row',
@@ -212,7 +225,7 @@ const styles = StyleSheet.create({
   },
   username: {
     fontSize: 18,
-    color: COLORS.primary,
+    color: COLORS.white,
   },
   content: {
     flex: 1,

package/src/utils/secureStorage.ts

@@ -1,4 +1,3 @@
-import * as Keychain from 'react-native-keychain';
 import { Platform } from 'react-native';
 import { sha256 } from './crypto';
 
@@ -24,56 +23,19 @@ export interface StorageOptions {
   };
 }
 
-const CREDENTIALS_KEY = 'onairos_credentials';
+// Temporary in-memory storage
+let mockStorage: { [key: string]: string } = {};
 
 /**
- * Store credentials securely in the device keychain with optional biometric protection
+ * Store credentials in memory (temporary solution)
  */
 export const storeCredentials = async (
   credentials: OnairosCredentials,
   options: StorageOptions = {}
 ): Promise<boolean> => {
   try {
-    const { useBiometrics = true, biometricPrompt } = options;
-    
-    // Create a JSON string of the credentials
-    const credentialsString = JSON.stringify(credentials);
-    
-    // Configure security options based on platform
-    const securityOptions: Keychain.Options = {
-      service: CREDENTIALS_KEY,
-      accessible: Keychain.ACCESSIBLE.WHEN_UNLOCKED_THIS_DEVICE_ONLY,
-    };
-    
-    // Add biometric protection if requested
-    if (useBiometrics) {
-      // iOS specific options
-      if (Platform.OS === 'ios') {
-        securityOptions.accessControl = Keychain.ACCESS_CONTROL.BIOMETRY_ANY_OR_DEVICE_PASSCODE;
-      }
-      
-      // Android specific options
-      if (Platform.OS === 'android') {
-        securityOptions.accessControl = Keychain.ACCESS_CONTROL.BIOMETRY_ANY;
-        if (biometricPrompt) {
-          securityOptions.authenticationType = Keychain.AUTHENTICATION_TYPE.BIOMETRIC;
-          securityOptions.authenticationPrompt = {
-            title: biometricPrompt.title || 'Biometric Authentication',
-            subtitle: biometricPrompt.subtitle,
-            description: 'Please authenticate to access your Onairos credentials',
-            cancel: 'Cancel',
-          };
-        }
-      }
-    }
-    
-    // Store in the secure keychain
-    await Keychain.setGenericPassword(
-      credentials.username,
-      credentialsString,
-      securityOptions
-    );
-    
+    console.log('[Mock] Storing credentials:', credentials.username);
+    mockStorage[credentials.username] = JSON.stringify(credentials);
     return true;
   } catch (error) {
     console.error('Error storing credentials:', error);
@@ -82,39 +44,18 @@ export const storeCredentials = async (
 };
 
 /**
- * Retrieve credentials from secure storage, potentially requiring biometric authentication
+ * Retrieve credentials from memory (temporary solution)
  */
 export const getCredentials = async (
   options: StorageOptions = {}
 ): Promise<OnairosCredentials | null> => {
   try {
-    const { useBiometrics = true, biometricPrompt } = options;
-    
-    // Configure security options
-    const securityOptions: Keychain.Options = {
-      service: CREDENTIALS_KEY,
-    };
-    
-    // Add biometric prompt if required
-    if (useBiometrics && biometricPrompt) {
-      securityOptions.authenticationPrompt = {
-        title: biometricPrompt.title || 'Biometric Authentication',
-        subtitle: biometricPrompt.subtitle,
-        description: 'Please authenticate to access your Onairos credentials',
-        cancel: 'Cancel',
-      };
-    }
-    
-    // Retrieve from keychain
-    const result = await Keychain.getGenericPassword(securityOptions);
-    
-    if (!result) {
+    // Get the first stored credential (temporary solution)
+    const storedCredential = Object.values(mockStorage)[0];
+    if (!storedCredential) {
       return null;
     }
-    
-    // Parse the stored JSON
-    const credentials: OnairosCredentials = JSON.parse(result.password);
-    return credentials;
+    return JSON.parse(storedCredential);
   } catch (error) {
     console.error('Error retrieving credentials:', error);
     return null;
@@ -126,11 +67,7 @@ export const getCredentials = async (
  */
 export const hasCredentials = async (): Promise<boolean> => {
   try {
-    const result = await Keychain.getGenericPassword({
-      service: CREDENTIALS_KEY,
-    });
-    
-    return !!result;
+    return Object.keys(mockStorage).length > 0;
   } catch (error) {
     console.error('Error checking for credentials:', error);
     return false;
@@ -142,7 +79,7 @@ export const hasCredentials = async (): Promise<boolean> => {
  */
 export const deleteCredentials = async (): Promise<boolean> => {
   try {
-    await Keychain.resetGenericPassword({ service: CREDENTIALS_KEY });
+    mockStorage = {};
     return true;
   } catch (error) {
     console.error('Error deleting credentials:', error);
@@ -158,20 +95,14 @@ export const updateCredentials = async (
   options: StorageOptions = {}
 ): Promise<boolean> => {
   try {
-    // Get current credentials
     const currentCredentials = await getCredentials(options);
-    
     if (!currentCredentials) {
       return false;
     }
-    
-    // Merge updates with current credentials
     const updatedCredentials: OnairosCredentials = {
       ...currentCredentials,
       ...updates,
     };
-    
-    // Store updated credentials
     return await storeCredentials(updatedCredentials, options);
   } catch (error) {
     console.error('Error updating credentials:', error);
@@ -184,44 +115,23 @@ export const updateCredentials = async (
  */
 export const generateDeviceUsername = async (): Promise<string> => {
   try {
-    // Get a device-specific identifier that we can use
-    // This is a simplified example - in production you might want to use
-    // a more robust device identifier method
     const deviceInfo = `${Platform.OS}-${Platform.Version}-${Date.now()}`;
-    
-    // Hash it to create a unique identifier
     const username = `onairos_${sha256(deviceInfo).substring(0, 10)}`;
-    
     return username;
   } catch (error) {
     console.error('Error generating device username:', error);
-    // Fallback to a timestamp-based username if there's an error
     return `onairos_${Date.now().toString(36)}`;
   }
 };
 
 /**
- * Verify if credentials are valid (not expired, etc.)
+ * Verify credentials (temporary mock implementation)
  */
 export const verifyCredentials = async (
   credentials: OnairosCredentials
 ): Promise<boolean> => {
   try {
-    // Basic verification - check if credentials exist and aren't too old
-    if (!credentials || !credentials.accessToken || !credentials.username) {
-      return false;
-    }
-    
-    // Check for expiration (example: credentials expire after 30 days)
-    const thirtyDaysMs = 30 * 24 * 60 * 60 * 1000;
-    const isExpired = Date.now() - credentials.createdAt > thirtyDaysMs;
-    
-    if (isExpired) {
-      return false;
-    }
-    
-    // Add any additional verification logic here
-    
+    console.log('[Mock] Verifying credentials for:', credentials.username);
     return true;
   } catch (error) {
     console.error('Error verifying credentials:', error);