@onairos/react-native 3.1.17 → 3.2.0

package/src/components/Overlay.tsx

@@ -1,506 +1,506 @@
-import React, { useState, useEffect, useCallback, useRef } from 'react';
-import {
-  View,
-  Text,
-  StyleSheet,
-  TouchableOpacity,
-  ScrollView,
-  Alert,
-  Platform,
-  Dimensions,
-  Modal,
-  Animated,
-  TouchableWithoutFeedback,
-  SafeAreaView,
-  Image,
-  Switch,
-} from 'react-native';
-import Icon from 'react-native-vector-icons/MaterialIcons';
-import { onairosApi } from '../api';
-import { encryptModelKey } from '../utils/encryption';
-import { COLORS } from '../constants';
-
-const { width: SCREEN_WIDTH, height: SCREEN_HEIGHT } = Dimensions.get('window');
-
-import type { OverlayProps } from '../types';
-
-export const Overlay: React.FC<OverlayProps> = ({
-  data,
-  username,
-  modelKey,
-  onResolved,
-  appName = 'Your App',
-  darkMode = false,
-  platforms = [
-    { id: 'instagram', name: 'Instagram', icon: require('../assets/icons/instagram.png') },
-    { id: 'youtube', name: 'YouTube', icon: require('../assets/icons/YouTubeicon2.png') },
-    { id: 'reddit', name: 'Reddit', icon: require('../assets/icons/Redditicon.png') },
-    { id: 'pinterest', name: 'Pinterest', icon: require('../assets/icons/pinterest.png') },
-    { id: 'email', name: 'Email', icon: require('../assets/icons/Gmail.png') },
-  ],
-}) => {
-  const [selections, setSelections] = useState<{ [key: string]: boolean }>({});
-  const [details, setDetails] = useState<string>('');
-  const [visible, setVisible] = useState(true);
-  const [platformToggles, setPlatformToggles] = useState<{[key: string]: boolean}>({});
-  const bottomSheetAnim = useRef(new Animated.Value(0)).current;
-
-  // Initialize selection state on mount
-  useEffect(() => {
-    // Initialize selection state
-    const initialSelections: { [key: string]: boolean } = {};
-    Object.keys(data).forEach((key) => {
-      initialSelections[key] = false;
-    });
-    setSelections(initialSelections);
-    
-    // Initialize platform toggles
-    const initialToggles: { [key: string]: boolean } = {};
-    platforms.forEach((platform) => {
-      initialToggles[platform.id] = false;
-    });
-    setPlatformToggles(initialToggles);
-    
-    getDetails();
-
-    // Animate the bottom sheet sliding up
-    Animated.spring(bottomSheetAnim, {
-      toValue: 1,
-      useNativeDriver: true,
-      bounciness: 0,
-    }).start();
-  }, []);
-
-  const getDetails = async () => {
-    try {
-      // In Expo or development, use mock data
-      if (__DEV__) {
-        setDetails('Development mode - mock account info');
-        return;
-      }
-      
-      const response = await onairosApi.post('getAccountInfo', {
-        Info: {
-          username: username,
-        },
-      });
-      // Handle response data properly based on API structure
-      if (response && response.data) {
-        const accountInfo = typeof response.data === 'object' && response.data.AccountInfo
-          ? response.data.AccountInfo
-          : `User: ${username}`;
-        setDetails(accountInfo);
-      } else {
-        setDetails(`User: ${username}`);
-      }
-    } catch (e) {
-      console.error('Error getting account info:', e);
-      setDetails(`User: ${username}`);
-    }
-  };
-
-  const closeOverlay = useCallback(() => {
-    // Animate the overlay sliding down
-    Animated.timing(bottomSheetAnim, {
-      toValue: 0,
-      duration: 250,
-      useNativeDriver: true,
-    }).start(() => {
-      setVisible(false);
-    });
-  }, [bottomSheetAnim]);
-
-  const togglePlatform = useCallback((platformId: string) => {
-    setPlatformToggles(prev => ({
-      ...prev,
-      [platformId]: !prev[platformId]
-    }));
-  }, []);
-
-  const confirmSelection = useCallback(async () => {
-    try {
-      // Mock app identifier
-      const appId = Platform.select({
-        ios: 'com.onairos.mock',
-        android: 'com.onairos.mock',
-        default: 'unknown'
-      });
-
-      // In development mode, use mock data
-      if (__DEV__) {
-        onResolved('https://api2.onairos.uk', 'mock-token', { 
-          username,
-          selections,
-          platforms: platformToggles
-        });
-        closeOverlay();
-        return;
-      }
-
-      // Get server public key for encryption
-      let serverPublicKey = 'mock-key';
-      try {
-        const keyResponse = await onairosApi.get('public/key');
-        if (keyResponse && keyResponse.data && typeof keyResponse.data === 'object') {
-          serverPublicKey = keyResponse.data.publicKey || 'mock-key';
-        }
-      } catch (e) {
-        console.error('Error getting server public key:', e);
-      }
-
-      // Encrypt the model key - only if the function exists and server key is valid
-      let encryptedModelKey = modelKey;
-      if (typeof encryptModelKey === 'function' && serverPublicKey) {
-        try {
-          encryptedModelKey = encryptModelKey(serverPublicKey, modelKey);
-        } catch (e) {
-          console.error('Error encrypting model key:', e);
-        }
-      }
-
-      const response = await onairosApi.post('getAPIUrlMobile', {
-        Info: {
-          storage: 'local',
-          appId: appId,
-          confirmations: selections,
-          developerURL: 'devURL',
-          EncryptedUserPin: encryptedModelKey,
-          username: username,
-          platforms: platformToggles
-        },
-      });
-
-      if (response && response.data && response.data.APIUrl && response.data.token) {
-        onResolved(response.data.APIUrl, response.data.token, {
-          username,
-          selections,
-          platforms: platformToggles
-        });
-        closeOverlay();
-      } else {
-        // If response doesn't have expected format, use fallbacks
-        onResolved('https://api2.onairos.uk', 'fallback-token', {
-          username,
-          selections,
-          platforms: platformToggles
-        });
-        closeOverlay();
-      }
-    } catch (e) {
-      console.error('Error confirming selection:', e);
-      // In case of error, provide fallback (development mode)
-      if (__DEV__) {
-        onResolved('https://api2.onairos.uk', 'error-fallback-token', { 
-          username,
-          selections,
-          platforms: platformToggles,
-          error: true
-        });
-        closeOverlay();
-      } else {
-        showErrorModal('Failed to confirm selection. Please try again.');
-      }
-    }
-  }, [selections, username, modelKey, onResolved, closeOverlay, platformToggles]);
-
-  const showErrorModal = (errorMessage: string) => {
-    Alert.alert('Error', errorMessage, [{ text: 'OK' }]);
-  };
-
-  return (
-    <Modal
-      visible={visible}
-      transparent
-      animationType="none"
-      statusBarTranslucent
-      onRequestClose={closeOverlay}
-    >
-      <TouchableOpacity
-        style={styles.modalOverlay}
-        activeOpacity={1}
-        onPress={closeOverlay}
-      >
-        <TouchableWithoutFeedback onPress={(e) => e.stopPropagation()}>
-          <Animated.View
-            style={[
-              styles.bottomSheet,
-              darkMode && styles.darkContainer,
-              {
-                transform: [
-                  {
-                    translateY: bottomSheetAnim.interpolate({
-                      inputRange: [0, 1],
-                      outputRange: [SCREEN_HEIGHT, 0],
-                    }),
-                  },
-                ],
-              },
-            ]}
-          >
-            <View style={styles.handleContainer}>
-              <View style={[styles.handle, darkMode && styles.darkHandle]} />
-            </View>
-
-            <SafeAreaView style={[styles.container, darkMode && styles.darkContainer]}>
-              {/* Header with app icon and arrow to Onairos icon */}
-              <View style={[styles.header, darkMode && styles.darkHeader]}>
-                <View style={styles.headerContent}>
-                  <View style={[styles.appIcon, darkMode && styles.darkAppIcon]}>
-                    <Text style={[styles.appIconText, darkMode && styles.darkText]}>
-                      {appName.charAt(0)}
-                    </Text>
-                  </View>
-                  <Icon name="arrow_forward" size={24} color={darkMode ? '#999' : '#666'} style={styles.arrow} />
-                  <View style={[styles.onairosIcon, darkMode && styles.darkOnairosIcon]}>
-                    <Text style={[styles.onairosIconText, darkMode && styles.darkText]}>O</Text>
-                  </View>
-                </View>
-              </View>
-
-              <ScrollView style={styles.content}>
-                {/* Main title and description */}
-                <View style={styles.titleContainer}>
-                  <Text style={[styles.mainTitle, darkMode && styles.darkText]}>
-                    Connect your data to create a Persona of you, to connect to Cosmos
-                  </Text>
-                  <Text style={[styles.privacyMessage, darkMode && styles.darkSubText]}>
-                    None of your app data is shared with ANYONE
-                  </Text>
-                </View>
-
-                {/* Platform connection options */}
-                <View style={styles.platformsContainer}>
-                  {platforms.map((platform) => (
-                    <View key={platform.id} style={[styles.platformItem, darkMode && styles.darkPlatformItem]}>
-                      <View style={styles.platformInfo}>
-                        <Image 
-                          source={platform.icon} 
-                          style={styles.platformIcon} 
-                          resizeMode="contain"
-                        />
-                        <Text style={[styles.platformName, darkMode && styles.darkText]}>
-                          {platform.name}
-                        </Text>
-                      </View>
-                      <Switch
-                        value={platformToggles[platform.id]}
-                        onValueChange={() => togglePlatform(platform.id)}
-                        trackColor={{ false: '#767577', true: '#81b0ff' }}
-                        thumbColor={platformToggles[platform.id] ? '#2196F3' : '#f4f3f4'}
-                      />
-                    </View>
-                  ))}
-                </View>
-              </ScrollView>
-
-              <View style={[styles.footer, darkMode && styles.darkFooter]}>
-                <TouchableOpacity
-                  style={styles.footerButtonCancel}
-                  onPress={closeOverlay}
-                >
-                  <Text style={[styles.footerButtonText, darkMode && styles.darkSubText]}>Cancel</Text>
-                </TouchableOpacity>
-
-                <TouchableOpacity
-                  style={[styles.footerButtonConfirm, darkMode && styles.darkFooterButtonConfirm]}
-                  onPress={confirmSelection}
-                >
-                  <Text style={[styles.footerButtonTextConfirm, darkMode && { color: '#000' }]}>Connect</Text>
-                </TouchableOpacity>
-              </View>
-            </SafeAreaView>
-          </Animated.View>
-        </TouchableWithoutFeedback>
-      </TouchableOpacity>
-    </Modal>
-  );
-};
-
-const styles = StyleSheet.create({
-  modalOverlay: {
-    flex: 1,
-    backgroundColor: 'rgba(0, 0, 0, 0.5)',
-    justifyContent: 'flex-end',
-  },
-  bottomSheet: {
-    backgroundColor: '#fff',
-    borderTopLeftRadius: 24,
-    borderTopRightRadius: 24,
-    width: SCREEN_WIDTH,
-    height: SCREEN_HEIGHT * 0.8,
-    overflow: 'hidden',
-  },
-  handleContainer: {
-    width: '100%',
-    alignItems: 'center',
-    paddingTop: 12,
-    paddingBottom: 8,
-  },
-  handle: {
-    width: 40,
-    height: 5,
-    borderRadius: 3,
-    backgroundColor: '#E0E0E0',
-  },
-  darkHandle: {
-    backgroundColor: '#666',
-  },
-  container: {
-    flex: 1,
-    backgroundColor: '#fff',
-  },
-  darkContainer: {
-    backgroundColor: '#1A1A1A',
-  },
-  header: {
-    padding: 24,
-    alignItems: 'center',
-  },
-  darkHeader: {
-    backgroundColor: '#1A1A1A',
-  },
-  headerContent: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    justifyContent: 'center',
-    marginBottom: 16,
-  },
-  appIcon: {
-    width: 48,
-    height: 48,
-    borderRadius: 16,
-    backgroundColor: '#F5F5F5',
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  darkAppIcon: {
-    backgroundColor: '#2A2A2A',
-  },
-  appIconText: {
-    fontSize: 24,
-    color: '#000',
-  },
-  darkText: {
-    color: '#fff',
-  },
-  arrow: {
-    marginHorizontal: 16,
-  },
-  onairosIcon: {
-    width: 48,
-    height: 48,
-    borderRadius: 16,
-    backgroundColor: '#F5F5F5',
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  darkOnairosIcon: {
-    backgroundColor: '#2A2A2A',
-  },
-  onairosIconText: {
-    fontSize: 24,
-    color: '#000',
-  },
-  darkSubText: {
-    color: '#999',
-  },
-  titleContainer: {
-    marginBottom: 30,
-  },
-  mainTitle: {
-    fontSize: 22,
-    fontWeight: '600',
-    color: '#000',
-    textAlign: 'center',
-    marginBottom: 16,
-  },
-  privacyMessage: {
-    fontSize: 14,
-    color: '#666',
-    textAlign: 'center',
-    marginBottom: 16,
-  },
-  content: {
-    flex: 1,
-    paddingHorizontal: 24,
-  },
-  platformsContainer: {
-    marginTop: 16,
-  },
-  platformItem: {
-    flexDirection: 'row',
-    justifyContent: 'space-between',
-    alignItems: 'center',
-    padding: 16,
-    backgroundColor: '#fff',
-    borderRadius: 16,
-    marginBottom: 16,
-    borderWidth: 1,
-    borderColor: '#eee',
-  },
-  darkPlatformItem: {
-    backgroundColor: '#2A2A2A',
-    borderColor: '#333',
-  },
-  platformInfo: {
-    flexDirection: 'row',
-    alignItems: 'center',
-  },
-  platformIcon: {
-    width: 32,
-    height: 32,
-    marginRight: 12,
-  },
-  platformName: {
-    fontSize: 16,
-    fontWeight: '500',
-    color: '#000',
-  },
-  footer: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    justifyContent: 'space-between',
-    padding: 24,
-    borderTopWidth: 1,
-    borderTopColor: '#eee',
-    backgroundColor: '#fff',
-  },
-  darkFooter: {
-    backgroundColor: '#2A2A2A',
-    borderTopColor: '#333',
-  },
-  footerButtonCancel: {
-    paddingVertical: 8,
-    paddingHorizontal: 16,
-  },
-  darkFooterButton: {
-    backgroundColor: 'transparent',
-  },
-  footerButtonConfirm: {
-    paddingVertical: 16,
-    paddingHorizontal: 32,
-    borderRadius: 16,
-    backgroundColor: '#fff',
-    borderWidth: 1,
-    borderColor: '#000',
-  },
-  darkFooterButtonConfirm: {
-    backgroundColor: '#fff',
-    borderColor: '#fff',
-  },
-  footerButtonText: {
-    color: '#666',
-    fontSize: 16,
-  },
-  footerButtonTextConfirm: {
-    color: '#000',
-    fontSize: 16,
-    fontWeight: '600',
-  },
-  lightBackground: {
-    backgroundColor: '#fff',
-  },
-  darkBackground: {
-    backgroundColor: '#1A1A1A',
-  },
-});
+import React, { useState, useEffect, useCallback, useRef } from 'react';
+import {
+  View,
+  Text,
+  StyleSheet,
+  TouchableOpacity,
+  ScrollView,
+  Alert,
+  Platform,
+  Dimensions,
+  Modal,
+  Animated,
+  TouchableWithoutFeedback,
+  SafeAreaView,
+  Image,
+  Switch,
+} from 'react-native';
+import Icon from 'react-native-vector-icons/MaterialIcons';
+import { onairosApi } from '../api';
+import { encryptModelKey } from '../utils/encryption';
+import { COLORS } from '../constants';
+
+const { width: SCREEN_WIDTH, height: SCREEN_HEIGHT } = Dimensions.get('window');
+
+import type { OverlayProps } from '../types';
+
+export const Overlay: React.FC<OverlayProps> = ({
+  data,
+  username,
+  modelKey,
+  onResolved,
+  appName = 'Your App',
+  darkMode = false,
+  platforms = [
+    { id: 'instagram', name: 'Instagram', icon: require('../assets/images/instagram.png') },
+    { id: 'youtube', name: 'YouTube', icon: require('../assets/images/youtube.png') },
+    { id: 'reddit', name: 'Reddit', icon: require('../assets/images/reddit.png') },
+    { id: 'pinterest', name: 'Pinterest', icon: require('../assets/images/pinterest.png') },
+    { id: 'email', name: 'Email', icon: require('../assets/images/email.png') },
+  ],
+}) => {
+  const [selections, setSelections] = useState<{ [key: string]: boolean }>({});
+  const [details, setDetails] = useState<string>('');
+  const [visible, setVisible] = useState(true);
+  const [platformToggles, setPlatformToggles] = useState<{[key: string]: boolean}>({});
+  const bottomSheetAnim = useRef(new Animated.Value(0)).current;
+
+  // Initialize selection state on mount
+  useEffect(() => {
+    // Initialize selection state
+    const initialSelections: { [key: string]: boolean } = {};
+    Object.keys(data).forEach((key) => {
+      initialSelections[key] = false;
+    });
+    setSelections(initialSelections);
+    
+    // Initialize platform toggles
+    const initialToggles: { [key: string]: boolean } = {};
+    platforms.forEach((platform) => {
+      initialToggles[platform.id] = false;
+    });
+    setPlatformToggles(initialToggles);
+    
+    getDetails();
+
+    // Animate the bottom sheet sliding up
+    Animated.spring(bottomSheetAnim, {
+      toValue: 1,
+      useNativeDriver: true,
+      bounciness: 0,
+    }).start();
+  }, []);
+
+  const getDetails = async () => {
+    try {
+      // In Expo or development, use mock data
+      if (__DEV__) {
+        setDetails('Development mode - mock account info');
+        return;
+      }
+      
+      const response = await onairosApi.post('getAccountInfo', {
+        Info: {
+          username: username,
+        },
+      });
+      // Handle response data properly based on API structure
+      if (response && response.data) {
+        const accountInfo = typeof response.data === 'object' && response.data.AccountInfo
+          ? response.data.AccountInfo
+          : `User: ${username}`;
+        setDetails(accountInfo);
+      } else {
+        setDetails(`User: ${username}`);
+      }
+    } catch (e) {
+      console.error('Error getting account info:', e);
+      setDetails(`User: ${username}`);
+    }
+  };
+
+  const closeOverlay = useCallback(() => {
+    // Animate the overlay sliding down
+    Animated.timing(bottomSheetAnim, {
+      toValue: 0,
+      duration: 250,
+      useNativeDriver: true,
+    }).start(() => {
+      setVisible(false);
+    });
+  }, [bottomSheetAnim]);
+
+  const togglePlatform = useCallback((platformId: string) => {
+    setPlatformToggles(prev => ({
+      ...prev,
+      [platformId]: !prev[platformId]
+    }));
+  }, []);
+
+  const confirmSelection = useCallback(async () => {
+    try {
+      // Mock app identifier
+      const appId = Platform.select({
+        ios: 'com.onairos.mock',
+        android: 'com.onairos.mock',
+        default: 'unknown'
+      });
+
+      // In development mode, use mock data
+      if (__DEV__) {
+        onResolved('https://api2.onairos.uk', 'mock-token', { 
+          username,
+          selections,
+          platforms: platformToggles
+        });
+        closeOverlay();
+        return;
+      }
+
+      // Get server public key for encryption
+      let serverPublicKey = 'mock-key';
+      try {
+        const keyResponse = await onairosApi.get('public/key');
+        if (keyResponse && keyResponse.data && typeof keyResponse.data === 'object') {
+          serverPublicKey = keyResponse.data.publicKey || 'mock-key';
+        }
+      } catch (e) {
+        console.error('Error getting server public key:', e);
+      }
+
+      // Encrypt the model key - only if the function exists and server key is valid
+      let encryptedModelKey = modelKey;
+      if (typeof encryptModelKey === 'function' && serverPublicKey) {
+        try {
+          encryptedModelKey = encryptModelKey(serverPublicKey, modelKey);
+        } catch (e) {
+          console.error('Error encrypting model key:', e);
+        }
+      }
+
+      const response = await onairosApi.post('getAPIUrlMobile', {
+        Info: {
+          storage: 'local',
+          appId: appId,
+          confirmations: selections,
+          developerURL: 'devURL',
+          EncryptedUserPin: encryptedModelKey,
+          username: username,
+          platforms: platformToggles
+        },
+      });
+
+      if (response && response.data && response.data.APIUrl && response.data.token) {
+        onResolved(response.data.APIUrl, response.data.token, {
+          username,
+          selections,
+          platforms: platformToggles
+        });
+        closeOverlay();
+      } else {
+        // If response doesn't have expected format, use fallbacks
+        onResolved('https://api2.onairos.uk', 'fallback-token', {
+          username,
+          selections,
+          platforms: platformToggles
+        });
+        closeOverlay();
+      }
+    } catch (e) {
+      console.error('Error confirming selection:', e);
+      // In case of error, provide fallback (development mode)
+      if (__DEV__) {
+        onResolved('https://api2.onairos.uk', 'error-fallback-token', { 
+          username,
+          selections,
+          platforms: platformToggles,
+          error: true
+        });
+        closeOverlay();
+      } else {
+        showErrorModal('Failed to confirm selection. Please try again.');
+      }
+    }
+  }, [selections, username, modelKey, onResolved, closeOverlay, platformToggles]);
+
+  const showErrorModal = (errorMessage: string) => {
+    Alert.alert('Error', errorMessage, [{ text: 'OK' }]);
+  };
+
+  return (
+    <Modal
+      visible={visible}
+      transparent
+      animationType="none"
+      statusBarTranslucent
+      onRequestClose={closeOverlay}
+    >
+      <TouchableOpacity
+        style={styles.modalOverlay}
+        activeOpacity={1}
+        onPress={closeOverlay}
+      >
+        <TouchableWithoutFeedback onPress={(e) => e.stopPropagation()}>
+          <Animated.View
+            style={[
+              styles.bottomSheet,
+              darkMode && styles.darkContainer,
+              {
+                transform: [
+                  {
+                    translateY: bottomSheetAnim.interpolate({
+                      inputRange: [0, 1],
+                      outputRange: [SCREEN_HEIGHT, 0],
+                    }),
+                  },
+                ],
+              },
+            ]}
+          >
+            <View style={styles.handleContainer}>
+              <View style={[styles.handle, darkMode && styles.darkHandle]} />
+            </View>
+
+            <SafeAreaView style={[styles.container, darkMode && styles.darkContainer]}>
+              {/* Header with app icon and arrow to Onairos icon */}
+              <View style={[styles.header, darkMode && styles.darkHeader]}>
+                <View style={styles.headerContent}>
+                  <View style={[styles.appIcon, darkMode && styles.darkAppIcon]}>
+                    <Text style={[styles.appIconText, darkMode && styles.darkText]}>
+                      {appName.charAt(0)}
+                    </Text>
+                  </View>
+                  <Icon name="arrow_forward" size={24} color={darkMode ? '#999' : '#666'} style={styles.arrow} />
+                  <View style={[styles.onairosIcon, darkMode && styles.darkOnairosIcon]}>
+                    <Text style={[styles.onairosIconText, darkMode && styles.darkText]}>O</Text>
+                  </View>
+                </View>
+              </View>
+
+              <ScrollView style={styles.content}>
+                {/* Main title and description */}
+                <View style={styles.titleContainer}>
+                  <Text style={[styles.mainTitle, darkMode && styles.darkText]}>
+                    Connect your data to create a Persona of you, to connect to Cosmos
+                  </Text>
+                  <Text style={[styles.privacyMessage, darkMode && styles.darkSubText]}>
+                    None of your app data is shared with ANYONE
+                  </Text>
+                </View>
+
+                {/* Platform connection options */}
+                <View style={styles.platformsContainer}>
+                  {platforms.map((platform) => (
+                    <View key={platform.id} style={[styles.platformItem, darkMode && styles.darkPlatformItem]}>
+                      <View style={styles.platformInfo}>
+                        <Image 
+                          source={platform.icon} 
+                          style={styles.platformIcon} 
+                          resizeMode="contain"
+                        />
+                        <Text style={[styles.platformName, darkMode && styles.darkText]}>
+                          {platform.name}
+                        </Text>
+                      </View>
+                      <Switch
+                        value={platformToggles[platform.id]}
+                        onValueChange={() => togglePlatform(platform.id)}
+                        trackColor={{ false: '#767577', true: '#81b0ff' }}
+                        thumbColor={platformToggles[platform.id] ? '#2196F3' : '#f4f3f4'}
+                      />
+                    </View>
+                  ))}
+                </View>
+              </ScrollView>
+
+              <View style={[styles.footer, darkMode && styles.darkFooter]}>
+                <TouchableOpacity
+                  style={styles.footerButtonCancel}
+                  onPress={closeOverlay}
+                >
+                  <Text style={[styles.footerButtonText, darkMode && styles.darkSubText]}>Cancel</Text>
+                </TouchableOpacity>
+
+                <TouchableOpacity
+                  style={[styles.footerButtonConfirm, darkMode && styles.darkFooterButtonConfirm]}
+                  onPress={confirmSelection}
+                >
+                  <Text style={[styles.footerButtonTextConfirm, darkMode && { color: '#000' }]}>Connect</Text>
+                </TouchableOpacity>
+              </View>
+            </SafeAreaView>
+          </Animated.View>
+        </TouchableWithoutFeedback>
+      </TouchableOpacity>
+    </Modal>
+  );
+};
+
+const styles = StyleSheet.create({
+  modalOverlay: {
+    flex: 1,
+    backgroundColor: 'rgba(0, 0, 0, 0.5)',
+    justifyContent: 'flex-end',
+  },
+  bottomSheet: {
+    backgroundColor: '#fff',
+    borderTopLeftRadius: 24,
+    borderTopRightRadius: 24,
+    width: SCREEN_WIDTH,
+    height: SCREEN_HEIGHT * 0.8,
+    overflow: 'hidden',
+  },
+  handleContainer: {
+    width: '100%',
+    alignItems: 'center',
+    paddingTop: 12,
+    paddingBottom: 8,
+  },
+  handle: {
+    width: 40,
+    height: 5,
+    borderRadius: 3,
+    backgroundColor: '#E0E0E0',
+  },
+  darkHandle: {
+    backgroundColor: '#666',
+  },
+  container: {
+    flex: 1,
+    backgroundColor: '#fff',
+  },
+  darkContainer: {
+    backgroundColor: '#1A1A1A',
+  },
+  header: {
+    padding: 24,
+    alignItems: 'center',
+  },
+  darkHeader: {
+    backgroundColor: '#1A1A1A',
+  },
+  headerContent: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+    marginBottom: 16,
+  },
+  appIcon: {
+    width: 48,
+    height: 48,
+    borderRadius: 16,
+    backgroundColor: '#F5F5F5',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  darkAppIcon: {
+    backgroundColor: '#2A2A2A',
+  },
+  appIconText: {
+    fontSize: 24,
+    color: '#000',
+  },
+  darkText: {
+    color: '#fff',
+  },
+  arrow: {
+    marginHorizontal: 16,
+  },
+  onairosIcon: {
+    width: 48,
+    height: 48,
+    borderRadius: 16,
+    backgroundColor: '#F5F5F5',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  darkOnairosIcon: {
+    backgroundColor: '#2A2A2A',
+  },
+  onairosIconText: {
+    fontSize: 24,
+    color: '#000',
+  },
+  darkSubText: {
+    color: '#999',
+  },
+  titleContainer: {
+    marginBottom: 30,
+  },
+  mainTitle: {
+    fontSize: 22,
+    fontWeight: '600',
+    color: '#000',
+    textAlign: 'center',
+    marginBottom: 16,
+  },
+  privacyMessage: {
+    fontSize: 14,
+    color: '#666',
+    textAlign: 'center',
+    marginBottom: 16,
+  },
+  content: {
+    flex: 1,
+    paddingHorizontal: 24,
+  },
+  platformsContainer: {
+    marginTop: 16,
+  },
+  platformItem: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    padding: 16,
+    backgroundColor: '#fff',
+    borderRadius: 16,
+    marginBottom: 16,
+    borderWidth: 1,
+    borderColor: '#eee',
+  },
+  darkPlatformItem: {
+    backgroundColor: '#2A2A2A',
+    borderColor: '#333',
+  },
+  platformInfo: {
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  platformIcon: {
+    width: 32,
+    height: 32,
+    marginRight: 12,
+  },
+  platformName: {
+    fontSize: 16,
+    fontWeight: '500',
+    color: '#000',
+  },
+  footer: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    padding: 24,
+    borderTopWidth: 1,
+    borderTopColor: '#eee',
+    backgroundColor: '#fff',
+  },
+  darkFooter: {
+    backgroundColor: '#2A2A2A',
+    borderTopColor: '#333',
+  },
+  footerButtonCancel: {
+    paddingVertical: 8,
+    paddingHorizontal: 16,
+  },
+  darkFooterButton: {
+    backgroundColor: 'transparent',
+  },
+  footerButtonConfirm: {
+    paddingVertical: 16,
+    paddingHorizontal: 32,
+    borderRadius: 16,
+    backgroundColor: '#fff',
+    borderWidth: 1,
+    borderColor: '#000',
+  },
+  darkFooterButtonConfirm: {
+    backgroundColor: '#fff',
+    borderColor: '#fff',
+  },
+  footerButtonText: {
+    color: '#666',
+    fontSize: 16,
+  },
+  footerButtonTextConfirm: {
+    color: '#000',
+    fontSize: 16,
+    fontWeight: '600',
+  },
+  lightBackground: {
+    backgroundColor: '#fff',
+  },
+  darkBackground: {
+    backgroundColor: '#1A1A1A',
+  },
+});