@onairos/react-native 3.4.0 → 3.5.4

package/src/components/Overlay.tsx

@@ -1,506 +0,0 @@
-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',
-  },
-});