@onairos/react-native 1.0.3 → 2.0.1

package/src/components/OnairosButton.tsx

@@ -1,49 +1,79 @@
 import React, { useState } from 'react';
-import { TouchableOpacity, Text, StyleSheet, View } from 'react-native';
+import { TouchableOpacity, Text, StyleSheet, View, Dimensions } from 'react-native';
 import { UniversalOnboarding } from './UniversalOnboarding';
 import { COLORS } from '../constants';
 import type { OnairosButtonProps } from '../types';
 
 export const OnairosButton: React.FC<OnairosButtonProps> = ({
-  title,
-  onPress,
-  style,
-  buttonType = 'default',
-  buttonForm = 'signup',
+  returnLink,
+  prefillUrl,
   AppName,
+  buttonType = 'normal',
   requestData,
-  returnLink,
-  onComplete,
-  embedd = false,
+  buttonWidth = 180,
+  buttonHeight,
+  hasStroke = false,
+  enabled = true,
+  buttonForm = 'default',
+  onRejection,
+  onResolved,
+  preCheck,
+  color,
+  swerv = false,
   debug = false,
-  test = false,
+  preferredPlatform,
+  testMode = false,
 }) => {
   const [showOnboarding, setShowOnboarding] = useState(false);
 
-  const handlePress = () => {
+  const handlePress = async () => {
+    if (!enabled) return;
+
+    if (preCheck) {
+      const shouldProceed = await preCheck();
+      if (!shouldProceed) {
+        onRejection?.();
+        return;
+      }
+    }
+
     if (buttonForm === 'signup') {
       setShowOnboarding(true);
     } else {
-      onPress();
+      // Handle login flow
+      // TODO: Implement login flow according to account.md
     }
   };
 
   const handleOnboardingComplete = (apiUrl: string, token: string, data: any) => {
     setShowOnboarding(false);
-    onComplete(apiUrl, token, data);
+    onResolved?.(apiUrl, token, data);
   };
 
+  const buttonStyle = [
+    styles.button,
+    buttonType === 'pill' && styles.pillButton,
+    hasStroke && styles.strokedButton,
+    { width: buttonWidth },
+    buttonHeight && { height: buttonHeight },
+    color && { backgroundColor: color },
+    swerv && styles.swervButton,
+  ];
+
+  const textStyle = [
+    styles.buttonText,
+    hasStroke && styles.strokedButtonText,
+    color && styles.customColorText,
+  ];
+
   return (
     <View>
       <TouchableOpacity
-        style={[
-          styles.button,
-          buttonType === 'pill' && styles.pillButton,
-          style,
-        ]}
+        style={buttonStyle}
         onPress={handlePress}
+        disabled={!enabled}
       >
-        <Text style={styles.buttonText}>{title}</Text>
+        <Text style={textStyle}>{AppName}</Text>
       </TouchableOpacity>
 
       <UniversalOnboarding
@@ -53,9 +83,9 @@ export const OnairosButton: React.FC<OnairosButtonProps> = ({
         requestData={requestData}
         returnLink={returnLink}
         onComplete={handleOnboardingComplete}
-        embedd={embedd}
+        preferredPlatform={preferredPlatform}
         debug={debug}
-        test={test}
+        test={testMode}
       />
     </View>
   );
@@ -63,7 +93,7 @@ export const OnairosButton: React.FC<OnairosButtonProps> = ({
 
 const styles = StyleSheet.create({
   button: {
-    backgroundColor: COLORS.primary,
+    backgroundColor: '#000',
     paddingVertical: 12,
     paddingHorizontal: 24,
     borderRadius: 8,
@@ -73,9 +103,23 @@ const styles = StyleSheet.create({
   pillButton: {
     borderRadius: 20,
   },
+  strokedButton: {
+    backgroundColor: 'transparent',
+    borderWidth: 1,
+    borderColor: '#000',
+  },
+  swervButton: {
+    transform: [{ rotate: '-2deg' }],
+  },
   buttonText: {
     color: '#fff',
     fontSize: 16,
     fontWeight: '600',
   },
+  strokedButtonText: {
+    color: '#000',
+  },
+  customColorText: {
+    color: '#fff',
+  },
 }); 

package/src/components/Overlay.tsx

@@ -1,272 +1,285 @@
-import React, { useCallback, useEffect, useMemo, useRef } from 'react';
+import React, { useState, useEffect } from 'react';
 import {
   View,
   Text,
   StyleSheet,
   TouchableOpacity,
   ScrollView,
+  Alert,
   Platform,
-  Dimensions,
 } from 'react-native';
-import BottomSheet from '@gorhom/bottom-sheet';
-import Icon from 'react-native-vector-icons/MaterialIcons';
+import { BottomSheetModal, BottomSheetBackdrop } from '@gorhom/bottom-sheet';
 import { COLORS } from '../constants';
+import { onairosApi } from '../api';
+import { encryptModelKey, getServerPublicKey } from '../utils/encryption';
 
 interface OverlayProps {
-  visible: boolean;
-  onClose: () => void;
-  onAccept: () => void;
-  AppName: string;
-  requestData: Record<string, Record<string, string>>;
-  biometricType?: 'FaceID' | 'TouchID' | 'BiometricID';
+  data: {
+    [key: string]: {
+      type: string;
+      descriptions: string;
+      reward: string;
+    };
+  };
+  username: string;
+  modelKey: string;
+  onResolved: (apiUrl: string, accessToken: string, loginDetails: any) => void;
 }
 
-const { height } = Dimensions.get('window');
-
 export const Overlay: React.FC<OverlayProps> = ({
-  visible,
-  onClose,
-  onAccept,
-  AppName,
-  requestData,
-  biometricType = Platform.OS === 'ios' ? 'FaceID' : 'BiometricID',
+  data,
+  username,
+  modelKey,
+  onResolved,
 }) => {
-  const bottomSheetRef = useRef<BottomSheet>(null);
-  const snapPoints = useMemo(() => ['85%'], []);
+  const [selections, setSelections] = useState<{ [key: string]: boolean }>({});
+  const [details, setDetails] = useState<string>('');
+  const bottomSheetRef = React.useRef<BottomSheetModal>(null);
 
-  // Expand or collapse the bottom sheet based on visibility
   useEffect(() => {
-    if (visible) {
-      bottomSheetRef.current?.expand();
-    } else {
-      bottomSheetRef.current?.close();
+    // Initialize selection state
+    const initialSelections: { [key: string]: boolean } = {};
+    Object.keys(data).forEach((key) => {
+      initialSelections[key] = false;
+    });
+    setSelections(initialSelections);
+    getDetails();
+  }, []);
+
+  const getDetails = async () => {
+    try {
+      const response = await onairosApi.post('getAccountInfo', {
+        Info: {
+          username: username,
+        },
+      });
+      setDetails(response.AccountInfo);
+    } catch (e) {
+      console.error('Error getting account info:', e);
     }
-  }, [visible]);
+  };
+
+  const closeOverlay = () => {
+    bottomSheetRef.current?.dismiss();
+  };
+
+  const confirmSelection = async () => {
+    try {
+      let appId = 'unknown';
+      try {
+        // Try to get package info, but don't fail if it's not available
+        const PackageInfo = require('react-native-package-info');
+        const packageInfo = await PackageInfo.getPackageInfo();
+        appId = packageInfo.packageName;
+      } catch (e) {
+        console.warn('Package info not available:', e);
+      }
+
+      const serverPublicKey = await getServerPublicKey();
+      const encryptedModelKey = encryptModelKey(serverPublicKey, modelKey);
 
-  // Get the icon for the biometric type
-  const getBiometricIcon = useCallback(() => {
-    switch (biometricType) {
-      case 'FaceID':
-        return 'face';
-      case 'TouchID':
-        return 'fingerprint';
-      default:
-        return 'security';
+      const response = await onairosApi.post('getAPIUrlMobile', {
+        Info: {
+          storage: 'local',
+          appId: appId,
+          confirmations: selections,
+          developerURL: 'devURL',
+          EncryptedUserPin: encryptedModelKey,
+          account: username,
+          proofMode: false,
+        },
+      });
+
+      if (response.apiUrl && response.token) {
+        onResolved(response.apiUrl, response.token, { username });
+        closeOverlay();
+      }
+    } catch (e) {
+      console.error('Error in confirmSelection:', e);
+      showErrorModal('Failed to confirm selection. Please try again.');
     }
-  }, [biometricType]);
+  };
 
-  // Render the requested data sections
-  const renderDataCategories = () => {
-    return Object.entries(requestData).map(([category, items]) => (
-      <View key={category} style={styles.categoryContainer}>
-        <Text style={styles.categoryTitle}>{category}</Text>
-        
-        {Object.entries(items).map(([item, description]) => (
-          <View key={item} style={styles.itemContainer}>
-            <Icon name="check-circle" size={20} color={COLORS.primary} />
-            <View style={styles.itemContent}>
-              <Text style={styles.itemTitle}>{item}</Text>
-              <Text style={styles.itemDescription}>{description}</Text>
-            </View>
-          </View>
-        ))}
-      </View>
-    ));
+  const showErrorModal = (errorMessage: string) => {
+    Alert.alert('Notice', errorMessage, [{ text: 'OK' }]);
   };
 
+  const selectedCount = Object.values(selections).filter(Boolean).length;
+
   return (
-    <BottomSheet
+    <BottomSheetModal
       ref={bottomSheetRef}
-      index={visible ? 0 : -1}
-      snapPoints={snapPoints}
-      enablePanDownToClose
-      onClose={onClose}
-      backdropComponent={({ animatedIndex }) => (
-        <View
-          style={[
-            styles.backdrop,
-            {
-              opacity: animatedIndex.interpolate({
-                inputRange: [0, 1],
-                outputRange: [0.5, 0],
-              }),
-            },
-          ]}
+      snapPoints={['80%']}
+      backdropComponent={(props) => (
+        <BottomSheetBackdrop
+          {...props}
+          appearsOnIndex={0}
+          disappearsOnIndex={-1}
         />
       )}
     >
       <View style={styles.container}>
         <View style={styles.header}>
-          <Icon name="shield" size={24} color={COLORS.primary} />
-          <Text style={styles.headerTitle}>Data Request</Text>
-          <TouchableOpacity onPress={onClose} style={styles.closeButton}>
-            <Icon name="close" size={24} color="#000" />
+          <Text style={styles.headerTitle}>Onairos</Text>
+          <TouchableOpacity onPress={closeOverlay}>
+            <Text style={styles.closeButton}>×</Text>
           </TouchableOpacity>
+          <Text style={styles.username}>{username}</Text>
         </View>
-        
+
         <ScrollView style={styles.content}>
-          <View style={styles.appInfoContainer}>
-            <Text style={styles.appName}>{AppName}</Text>
-            <Text style={styles.requestText}>
-              is requesting access to the following data:
-            </Text>
-          </View>
-          
-          {renderDataCategories()}
-          
-          <View style={styles.securityNotice}>
-            <Icon name="security" size={20} color="#666" />
-            <Text style={styles.securityText}>
-              Your data is securely processed and never shared with third parties.
-            </Text>
-          </View>
+          {Object.entries(data).map(([key, value]) => (
+            <View key={key} style={styles.card}>
+              <TouchableOpacity
+                style={styles.checkboxContainer}
+                onPress={() =>
+                  setSelections((prev) => ({
+                    ...prev,
+                    [key]: !prev[key],
+                  }))
+                }
+              >
+                <View
+                  style={[
+                    styles.checkbox,
+                    selections[key] && styles.checkboxSelected,
+                  ]}
+                />
+                <View style={styles.cardContent}>
+                  <Text style={styles.cardTitle}>{value.type} Insight</Text>
+                  <Text style={styles.cardDescription}>
+                    Description: {value.descriptions}
+                  </Text>
+                  {value.reward && (
+                    <Text style={styles.cardReward}>
+                      Reward: {value.reward}
+                    </Text>
+                  )}
+                </View>
+              </TouchableOpacity>
+            </View>
+          ))}
         </ScrollView>
-        
+
         <View style={styles.footer}>
           <TouchableOpacity
-            style={styles.cancelButton}
-            onPress={onClose}
+            style={styles.footerButton}
+            onPress={closeOverlay}
           >
-            <Text style={styles.cancelButtonText}>Deny</Text>
+            <Text style={styles.footerButtonText}>Cancel</Text>
           </TouchableOpacity>
-          
+          <Text style={styles.selectedCount}>Selected: {selectedCount}</Text>
           <TouchableOpacity
-            style={styles.acceptButton}
-            onPress={onAccept}
+            style={styles.footerButton}
+            onPress={confirmSelection}
           >
-            <Text style={styles.acceptButtonText}>Accept</Text>
-            <Icon name={getBiometricIcon()} size={20} color="#fff" style={styles.buttonIcon} />
+            <Text style={styles.footerButtonText}>Confirm</Text>
           </TouchableOpacity>
         </View>
       </View>
-    </BottomSheet>
+    </BottomSheetModal>
   );
 };
 
 const styles = StyleSheet.create({
   container: {
     flex: 1,
-    backgroundColor: '#fff',
-  },
-  backdrop: {
-    ...StyleSheet.absoluteFillObject,
-    backgroundColor: '#000',
+    backgroundColor: COLORS.white,
+    borderTopLeftRadius: 10,
+    borderTopRightRadius: 10,
   },
   header: {
     flexDirection: 'row',
     alignItems: 'center',
+    justifyContent: 'space-between',
     padding: 16,
-    backgroundColor: COLORS.headerBg,
-    borderTopLeftRadius: 16,
-    borderTopRightRadius: 16,
+    backgroundColor: COLORS.primary,
+    borderTopLeftRadius: 10,
+    borderTopRightRadius: 10,
   },
   headerTitle: {
-    flex: 1,
-    fontSize: 18,
-    fontWeight: '600',
-    marginLeft: 12,
-    color: '#000',
+    fontSize: 24,
+    color: COLORS.white,
+    fontWeight: 'bold',
   },
   closeButton: {
+    fontSize: 24,
+    color: COLORS.white,
     padding: 8,
   },
+  username: {
+    fontSize: 18,
+    color: COLORS.primary,
+  },
   content: {
     flex: 1,
     padding: 16,
   },
-  appInfoContainer: {
-    marginBottom: 24,
-  },
-  appName: {
-    fontSize: 20,
-    fontWeight: 'bold',
-    color: '#000',
-    marginBottom: 4,
-  },
-  requestText: {
-    fontSize: 16,
-    color: '#666',
-  },
-  categoryContainer: {
-    marginBottom: 20,
-  },
-  categoryTitle: {
-    fontSize: 18,
-    fontWeight: '600',
-    color: '#000',
+  card: {
+    backgroundColor: COLORS.white,
+    borderRadius: 8,
     marginBottom: 12,
+    shadowColor: COLORS.black,
+    shadowOffset: { width: 0, height: 2 },
+    shadowOpacity: 0.1,
+    shadowRadius: 4,
+    elevation: 3,
   },
-  itemContainer: {
+  checkboxContainer: {
     flexDirection: 'row',
-    marginBottom: 12,
-    paddingLeft: 8,
+    padding: 16,
+    alignItems: 'center',
   },
-  itemContent: {
+  checkbox: {
+    width: 24,
+    height: 24,
+    borderRadius: 4,
+    borderWidth: 2,
+    borderColor: COLORS.primary,
+    marginRight: 12,
+  },
+  checkboxSelected: {
+    backgroundColor: COLORS.primary,
+  },
+  cardContent: {
     flex: 1,
-    marginLeft: 12,
   },
-  itemTitle: {
-    fontSize: 16,
-    fontWeight: '500',
-    color: '#000',
-    marginBottom: 2,
+  cardTitle: {
+    fontSize: 18,
+    fontWeight: 'bold',
+    marginBottom: 4,
   },
-  itemDescription: {
+  cardDescription: {
     fontSize: 14,
-    color: '#666',
-  },
-  securityNotice: {
-    flexDirection: 'row',
-    alignItems: 'flex-start',
-    backgroundColor: '#f5f5f5',
-    padding: 12,
-    borderRadius: 8,
-    marginBottom: 24,
+    color: COLORS.gray,
+    marginBottom: 4,
   },
-  securityText: {
-    flex: 1,
+  cardReward: {
     fontSize: 14,
-    color: '#666',
-    marginLeft: 8,
+    color: COLORS.success,
+    fontWeight: 'bold',
   },
   footer: {
     flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
     padding: 16,
     borderTopWidth: 1,
-    borderTopColor: '#eee',
-  },
-  cancelButton: {
-    flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center',
-    paddingVertical: 12,
-    borderWidth: 1,
-    borderColor: '#ddd',
-    borderRadius: 25,
-    marginRight: 8,
+    borderTopColor: COLORS.lightGray,
   },
-  cancelButtonText: {
-    fontSize: 16,
-    fontWeight: '600',
-    color: '#666',
-  },
-  acceptButton: {
-    flex: 2,
-    flexDirection: 'row',
-    justifyContent: 'center',
-    alignItems: 'center',
-    paddingVertical: 12,
+  footerButton: {
+    paddingVertical: 8,
+    paddingHorizontal: 16,
+    borderRadius: 8,
     backgroundColor: COLORS.primary,
-    borderRadius: 25,
-    marginLeft: 8,
   },
-  acceptButtonText: {
+  footerButtonText: {
+    color: COLORS.white,
     fontSize: 16,
     fontWeight: '600',
-    color: '#fff',
-    marginRight: 8,
   },
-  buttonIcon: {
-    marginLeft: 4,
+  selectedCount: {
+    fontSize: 16,
+    color: COLORS.gray,
   },
 });

package/src/constants/index.ts

@@ -1,19 +1,23 @@
 import type { PlatformConfig } from '../types';
 
 export const COLORS = {
-  primary: '#00BFA5',
-  headerBg: '#E0F2F1',
+  primary: '#1BA9D4',
+  headerBg: '#F8F9FA',
   text: {
     primary: '#000000',
-    secondary: '#757575',
+    secondary: '#666666',
   },
-  border: '#EEEEEE',
-  success: '#4CAF50',
-  error: '#F44336',
-  instagram: '#E4405F',
-  pinterest: '#BD081C',
+  border: '#E5E5E5',
+  success: '#34C759',
+  error: '#FF3B30',
+  instagram: '#E1306C',
+  pinterest: '#E60023',
   reddit: '#FF4500',
   youtube: '#FF0000',
+  white: '#FFFFFF',
+  black: '#000000',
+  gray: '#666666',
+  lightGray: '#E5E5E5',
 };
 
 export const PLATFORMS: Record<string, PlatformConfig> = {