@onairos/react-native 1.0.0 → 1.0.1

package/src/components/OnairosButton.js

@@ -1,604 +0,0 @@
-import React, { useEffect, useState, useRef } from 'react';
-import { 
-  TouchableOpacity, 
-  Text, 
-  View, 
-  Image, 
-  Platform,
-  StyleSheet
-} from 'react-native';
-import { Othent } from '@othent/kms-react-native';
-import { rsaEncrypt } from '../utils/crypto';
-import { getPin } from '../utils/auth';
-import Overlay from './Overlay';
-import { sha256 } from 'react-native-crypto-js';
-import AsyncStorage from '@react-native-async-storage/async-storage';
-import axios from 'axios';
-
-const API_URL = 'https://api2.onairos.uk';
-
-const OnairosButton = ({
-  requestData,
-  webpageName,
-  inferenceData = null,
-  onComplete = null,
-  autoFetch = true,
-  proofMode = false,
-  textLayout = 'below',
-  textColor = 'white',
-  login = false,
-  buttonType = 'pill',
-  loginReturn = null,
-  loginType = 'signIn',
-  visualType = 'full',
-}) => {
-  const [userData, setUserData] = useState(null);
-  const [showOverlay, setShowOverlay] = useState(false);
-  const [activeModels, setActiveModels] = useState([]);
-  const [granted, setGranted] = useState(0);
-  const [selectedRequests, setSelectedRequests] = useState({});
-  const [avatar, setAvatar] = useState(false);
-  const [traits, setTraits] = useState(false);
-  const [othentUser, setOthentUser] = useState(false);
-  const [othentConnected, setOthentConnected] = useState(false);
-  const NoAccount = useRef(false);
-  const NoModel = useRef(false);
-  const [isAuthenticated, setIsAuthenticated] = useState(false);
-  const [authToken, setAuthToken] = useState(null);
-  const [loading, setLoading] = useState(true);
-  const [hashedOthentSub, setHashedOthentSub] = useState(null);
-  const [encryptedPin, setEncryptedPin] = useState(null);
-  const [accountInfo, setAccountInfo] = useState(null);
-  const [isLoading, setIsLoading] = useState(false);
-  const [isProcessingAuth, setIsProcessingAuth] = useState(false);
-  const hasProcessedCallback = useRef(false);
-  const [authError, setAuthError] = useState(null);
-  const [notif, setNotif] = useState({
-    show: false,
-    color: null,
-    message: null
-  });
-
-  // The Onairos public key for encryption
-  const OnairosPublicKey = `
-    -----BEGIN PUBLIC KEY-----
-    MIIBIjANBgkqhkiG9w0BAQEFAAOCAQ8AMIIBCgKCAQEA4wkWvRPaJiY8CwQ5BoJI
-    amcGAYV91Bk8NrvWq4PXM+J/RJugfgTNCYKQ/c6g4xa1YES/tJEzFS7nf0Kdoqxm
-    5aav0ru5vS4fc4vCOLTI9W1T7nj02NY91rogsQm2/KMxUQ8DaLeTZKi+0Wjsa9YO
-    6XGGd1wh4azgQkj04MWW5J1EBCcBavKoY+C85oA9jkkklQ8nGWgbugmZs7eXHNQb
-    qH8/ZHcB9Kx1CZ6XjQuVd6YE/A+swV+DksbkXANcYjr6SY/2TbB8GfpcOMM3bkyN
-    Q8e0A51q5a8abfuAkDZXe67MwKMWu/626abwPZhJrKr5HhRZZDwPtnXlktYHhOK6
-    lQIDAQAB
-    -----END PUBLIC KEY-----
-  `;
-
-  // Find the largest data object based on hierarchy
-  const findLargestDataObject = (arrayOfObjects) => {
-    const hierarchy = {
-      'Small': 16,
-      'Medium': 32,
-      'Large': 64
-    };
-  
-    let largestValue = 0;
-  
-    arrayOfObjects.forEach(obj => {
-      const currentValue = hierarchy[obj.data];
-      if (currentValue > largestValue) {
-        largestValue = currentValue;
-      }
-    });
-  
-    return largestValue;
-  };
-
-  // Handle API response for auto-fetch
-  useEffect(() => {
-    if (autoFetch && inferenceData && typeof onComplete === 'function') {
-      // In React Native, we'll handle this differently since we don't have window.addEventListener
-      // We'll use the sendDataRequest function to handle this
-    }
-  }, []);
-
-  // Handle connection selection
-  const handleConnectionSelection = (dataRequester, key, index, type, reward, isSelected) => {
-    setSelectedRequests(prev => ({
-      ...prev,
-      [`${dataRequester}-${key}-${index}`]: { type, reward, isSelected }
-    }));
-  };
-
-  // Change granted value
-  const changeGranted = (value) => {
-    setGranted((prev) => Math.max(prev + value, 0));
-  };
-
-  // Handle API request for mobile
-  const handleAPIRequestForMobile = async () => {
-    setShowOverlay(true);
-    return;
-  };
-
-  // Reject data request
-  const rejectDataRequest = () => {
-    setShowOverlay(false);
-    if (onComplete) {
-      onComplete('rejected');
-    }
-  };
-
-  // Make API call
-  const makeApiCall = async (approvedRequests, pin, othentSub) => {
-    const jsonData = {
-      Info: {
-        EncryptedUserPin: pin,
-        confirmations: approvedRequests,
-        web3Type: 'othent',
-        Domain: Platform.OS, // Using platform instead of window.location
-        proofMode: false,
-        OthentSub: othentSub,
-      },
-    };
-  
-    try {
-      const response = await axios.post(`${API_URL}/getAPIurl`, jsonData);
-      const data = response.data;
-      
-      if (autoFetch && onComplete) {
-        onComplete(data);
-      } else {
-        // In React Native, we'll handle this differently
-        // For now, just call onComplete with the data
-        if (onComplete) {
-          onComplete(data);
-        }
-      }
-    } catch (error) {
-      console.error(error);
-      if (onComplete) {
-        onComplete(null, error);
-      }
-    }
-  };
-  
-  // Send data request
-  const sendDataRequest = async () => {
-    if (granted <= 0) return;
-  
-    try {
-      // Retrieve approved requests
-      const approvedRequests = Object.values(selectedRequests)
-        .filter((req) => req.isSelected)
-        .map((req) => ({ type: req.type, reward: req.reward }));
-  
-      if (encryptedPin == null && othentUser && !othentConnected) {
-        const appInfo = {
-          name: 'Onairos',
-          version: '1.0.0',
-          env: 'production',
-        };
-        const othent = new Othent({ appInfo, throwErrors: false });
-        const userDetails = await othent.connect();
-  
-        const hashedSub = sha256(userDetails.sub).toString();
-        setHashedOthentSub(hashedSub);
-  
-        // Wait for the pin to be retrieved
-        const userOnairosDetails = await getPin(hashedSub);
-        const pin = userOnairosDetails.result;
-        setEncryptedPin(pin);
-  
-        setOthentConnected(true);
-  
-        // Make API call with newly retrieved data
-        await makeApiCall(approvedRequests, pin, hashedSub);
-      } else {
-        // Make API call with existing state
-        if (encryptedPin && hashedOthentSub) {
-          await makeApiCall(approvedRequests, encryptedPin, hashedOthentSub);
-        } else {
-          console.error('Missing required authentication data');
-        }
-      }
-    } catch (error) {
-      console.error('Error in sendDataRequest:', error);
-    } finally {
-      setShowOverlay(false);
-    }
-  };
-
-  // Validate request data
-  const validateRequestData = () => {
-    const validKeys = ['Small', 'Medium', 'Large'];
-    const requiredProperties = ['type', 'descriptions', 'reward'];
-    
-    if (typeof webpageName !== 'string') {
-      throw new Error(`Property webpageName must be a String`);
-    }
-    
-    for (const key of validKeys) {
-      if (!(key in requestData)) {
-        throw new Error(`Missing key '${key}' in requestData.`);
-      }
-      for (const prop of requiredProperties) {
-        if (!(prop in requestData[key])) {
-          throw new Error(`Missing property '${prop}' in requestData.${key}.`);
-        }
-        if (prop !== 'reward' && typeof requestData[key][prop] !== 'string') {
-          throw new Error(`Property '${prop}' in requestData.${key} must be a string.`);
-        }
-        if (prop !== 'reward' && requestData[key][prop].trim() === '') {
-          throw new Error(`Property '${prop}' in requestData.${key} cannot be empty.`);
-        }
-      }
-    }
-  };
-
-  // Validate domain
-  const validateDomain = async () => {
-    try {
-      const response = await axios.post(`${API_URL}/valid/validate-domain`);
-      return response.data;
-    } catch (error) {
-      console.error(error);
-      return { status: false };
-    }
-  };
-
-  // Connect to Onairos
-  const ConnectOnairos = async () => {
-    try {
-      const appInfo = {
-        name: "Onairos",
-        version: "1.0.0",
-        env: "production",
-      };
-      const othent = new Othent({ appInfo, throwErrors: false });
-      
-      // Get User Othent Secure Details
-      const userDetails = await othent.connect();
-      const hashedOthentSub = sha256(userDetails.sub).toString();
-      const encryptedPinResponse = await getPin(hashedOthentSub);
-      
-      // Check if user account exists
-      if (encryptedPinResponse.result === "No user account") {
-        // No user account found, trigger universal onboarding
-        console.log("No user account found, triggering universal onboarding");
-        
-        // In React Native, we'll handle this differently
-        // For now, just show the overlay for onboarding
-        NoAccount.current = true;
-        setShowOverlay(true);
-        return;
-      }
-      
-      // Convert to buffer and decrypt
-      const bufferPIN = Buffer.from(encryptedPinResponse.result, 'base64');
-      const userPin = await othent.decrypt(bufferPIN);
-      
-      // RSA Encrypt the PIN
-      const encryptedData = await rsaEncrypt(OnairosPublicKey, userPin);
-      
-      // In React Native, we'll handle this differently
-      // For now, just show the overlay with the data
-      setEncryptedPin(encryptedData);
-      setHashedOthentSub(hashedOthentSub);
-      setShowOverlay(true);
-    } catch (e) {
-      console.error("Error Connecting to Onairos: ", e);
-    }
-  };
-
-  // Fetch account info
-  const fetchAccountInfo = async (identifier, isEmail = false) => {
-    try {
-      setIsLoading(true);
-      
-      const jsonData = isEmail ?
-        {
-          Info: {
-            identifier: identifier
-          }
-        } :
-        { 
-          Info: {
-            userName: identifier
-          }
-        };
-      
-      const endpoint = isEmail ? '/getAccountInfo/email' : '/getAccountInfo';
-      const token = await AsyncStorage.getItem('onairosToken');
-      
-      const response = await axios.post(`${API_URL}${endpoint}`, jsonData, {
-        headers: {
-          'Content-Type': 'application/json',
-          'Authorization': `Bearer ${token}`
-        }
-      });
-
-      const data = response.data;
-      
-      if (data.AccountInfo === "No Account Found") {
-        NoAccount.current = true;
-        setAccountInfo(null);
-        return null;
-      }
-      
-      setAccountInfo(data.AccountInfo);
-      
-      if (data.AccountInfo.models) {
-        setActiveModels(data.AccountInfo.models);
-      } else {
-        NoModel.current = true;
-      }
-
-      if (data.AccountInfo.avatar) {
-        setAvatar(true);
-      }
-      
-      if (data.AccountInfo.UserTraits) {
-        setTraits(true);
-      }
-
-      if (data.AccountInfo.othent) {
-        setOthentUser(true);
-      }
-
-      return data.AccountInfo;
-    } catch (error) {
-      console.error('Error fetching account info:', error);
-      throw error;
-    } finally {
-      setIsLoading(false);
-    }
-  };
-
-  // Check existing token
-  const checkExistingToken = async () => {
-    try {
-      const onairosToken = await AsyncStorage.getItem('onairosToken');
-      const legacyToken = await AsyncStorage.getItem('token');
-      const token = onairosToken || legacyToken;
-
-      if (token) {
-        const response = await axios.get(`${API_URL}/verifyToken`, {
-          headers: {
-            'Authorization': `Bearer ${token}`
-          }
-        });
-        
-        if (response.status === 200) {
-          const data = response.data;
-          if (data.valid) {
-            setAuthToken(token);
-            setIsAuthenticated(true);
-            const username = await AsyncStorage.getItem('username');
-            await fetchAccountInfo(username);
-          } else {
-            await AsyncStorage.removeItem('onairosToken');
-            await AsyncStorage.removeItem('token');
-          }
-        }
-      }
-    } catch (error) {
-      console.error('Token verification failed:', error);
-    } finally {
-      setLoading(false);
-    }
-  };
-
-  // Check for existing token on mount
-  useEffect(() => {
-    checkExistingToken();
-  }, []);
-
-  // Handle close overlay
-  const handleCloseOverlay = () => {
-    setGranted(0);
-    setShowOverlay(false);
-  };
-
-  // Check for existing token and fetch account info on mount
-  useEffect(() => {
-    const checkStoredAuth = async () => {
-      const token = await AsyncStorage.getItem('onairosToken');
-      const username = await AsyncStorage.getItem('username');
-      const othentToken = await AsyncStorage.getItem('othentToken');
-
-      if (token) {
-        try {
-          // Verify token is still valid
-          const response = await axios.post(`${API_URL}/verifyToken`, {}, {
-            headers: {
-              'Content-Type': 'application/json',
-              'Authorization': `Bearer ${token}`
-            }
-          });
-
-          if (response.status === 200) {
-            setIsAuthenticated(true);
-            if (username) {
-              await fetchAccountInfo(username, false);
-            } else if (othentToken) {
-              // Handle Othent stored session
-              const userDetails = JSON.parse(othentToken);
-              await fetchAccountInfo(userDetails.email, true);
-            }
-          } else {
-            // Clear invalid tokens
-            await AsyncStorage.removeItem('onairosToken');
-            await AsyncStorage.removeItem('username');
-            await AsyncStorage.removeItem('othentToken');
-          }
-        } catch (error) {
-          console.error('Token verification failed:', error);
-        }
-      }
-    };
-
-    checkStoredAuth();
-  }, []);
-
-  // Handle login success
-  const handleLoginSuccess = async (identifier, isEmail = false) => {
-    try {
-      const accountData = await fetchAccountInfo(identifier, isEmail);
-      // Update authentication first
-      setIsAuthenticated(true);
-      // Then update account info
-      setShowOverlay(true);
-      return accountData;
-    } catch (error) {
-      console.error('Login process failed:', error);
-      throw error;
-    }
-  };
-
-  // Get text based on login type
-  const getText = () => {
-    switch (loginType) {
-      case 'signUp':
-        return 'Sign Up with Onairos';
-      case 'signOut':
-        return 'Sign Out of Onairos';
-      default:
-        return 'Sign In with Onairos';
-    }
-  };
-
-  // Button press handler
-  const handleButtonPress = () => {
-    handleAPIRequestForMobile();
-  };
-
-  return (
-    <View style={styles.container}>
-      <TouchableOpacity
-        style={[
-          styles.button,
-          buttonType === 'pill' ? styles.pillButton : styles.circleButton,
-          login ? styles.loginButton : styles.transparentButton,
-          { flexDirection: textLayout === 'below' ? 'column' : 'row' }
-        ]}
-        onPress={handleButtonPress}
-      >
-        {(visualType === 'full' || visualType === 'icon') && (
-          <Image
-            source={{ 
-              uri: login 
-                ? "https://onairos.sirv.com/Images/OnairosWhite.png" 
-                : "https://onairos.sirv.com/Images/OnairosBlack.png" 
-            }}
-            style={[
-              styles.logo,
-              buttonType === 'pill' ? styles.pillLogo : styles.circleLogo,
-              visualType === 'full' ? styles.fullLogo : styles.iconOnlyLogo
-            ]}
-          />
-        )}
-
-        {(visualType === 'full' || visualType === 'textOnly') && (
-          <Text
-            style={[
-              styles.buttonText,
-              { color: login ? 'black' : textColor === 'black' ? 'black' : 'white' },
-              textLayout === 'right' ? styles.textRight : 
-              textLayout === 'left' ? styles.textLeft : styles.textBelow
-            ]}
-          >
-            {getText()}
-          </Text>
-        )}
-      </TouchableOpacity>
-
-      {showOverlay && !isLoading && (
-        <Overlay
-          setOthentConnected={setOthentConnected}
-          dataRequester={webpageName}
-          NoAccount={NoAccount}
-          NoModel={NoModel}
-          accountInfo={accountInfo}
-          activeModels={activeModels}
-          avatar={avatar}
-          traits={traits}
-          requestData={requestData}
-          handleConnectionSelection={handleConnectionSelection}
-          changeGranted={changeGranted}
-          granted={granted}
-          allowSubmit={granted > 0}
-          rejectDataRequest={rejectDataRequest}
-          sendDataRequest={sendDataRequest}
-          isAuthenticated={isAuthenticated}
-          onLoginSuccess={handleLoginSuccess}
-          onClose={handleCloseOverlay}
-          setOthentUser={setOthentUser}
-          setHashedOthentSub={setHashedOthentSub}
-          setEncryptedPin={setEncryptedPin}
-        />
-      )}
-    </View>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  button: {
-    alignItems: 'center',
-    justifyContent: 'center',
-    borderRadius: 8,
-  },
-  pillButton: {
-    paddingHorizontal: 16,
-    paddingVertical: 8,
-    borderRadius: 20,
-  },
-  circleButton: {
-    width: 48,
-    height: 48,
-    borderRadius: 24,
-  },
-  loginButton: {
-    backgroundColor: '#ffffff',
-    borderWidth: 1,
-    borderColor: '#dddddd',
-  },
-  transparentButton: {
-    backgroundColor: 'transparent',
-    borderWidth: 1,
-    borderColor: 'transparent',
-  },
-  logo: {
-    resizeMode: 'contain',
-  },
-  pillLogo: {
-    width: 24,
-    height: 24,
-  },
-  circleLogo: {
-    width: 32,
-    height: 32,
-  },
-  fullLogo: {
-    marginRight: 12,
-  },
-  iconOnlyLogo: {
-    marginRight: 0,
-  },
-  buttonText: {
-    fontWeight: 'bold',
-  },
-  textRight: {
-    marginLeft: 8,
-  },
-  textLeft: {
-    marginRight: 8,
-  },
-  textBelow: {
-    marginTop: 4,
-  },
-});
-
-export default OnairosButton;