@onairos/react-native 1.0.0 → 1.0.2

package/lib/module/components/OnairosButton.js

@@ -1,550 +1,157 @@
-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 = ({
+import React, { useCallback, useEffect, useState } from 'react';
+import { TouchableOpacity, StyleSheet, Text, Linking } from 'react-native';
+import Icon from 'react-native-vector-icons/MaterialIcons';
+import { UniversalOnboarding } from './UniversalOnboarding';
+import { DataRequestModal } from './DataRequestModal';
+import { useCredentials } from '../hooks/useCredentials';
+// import { validateCredentials } from '../utils/auth';
+// import { COLORS } from '../constants';
+
+export const OnairosButton = ({
+  AppName,
   requestData,
-  webpageName,
-  inferenceData = null,
-  onComplete = null,
-  autoFetch = true,
-  proofMode = false,
-  textLayout = 'below',
-  textColor = 'white',
+  returnLink,
+  embedd = false,
+  color = '#00BFA5',
+  icon = 'auto_awesome',
+  onResolved,
   login = false,
-  buttonType = 'pill',
-  loginReturn = null,
-  loginType = 'signIn',
-  visualType = 'full'
+  buttonType = 'circle',
+  debug = false,
+  test = false
 }) => {
-  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;
+  const [showOnboarding, setShowOnboarding] = useState(false);
+  const [showDataRequest, setShowDataRequest] = useState(false);
+  const {
+    hasCredentials,
+    getCredentials,
+    validateCredentials
+  } = useCredentials();
+  const [loading, setLoading] = useState(false);
+  const handlePress = useCallback(async () => {
+    setLoading(true);
     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.`);
+      const hasExisting = await hasCredentials();
+      if (!hasExisting) {
+        setShowOnboarding(true);
+        return;
       }
-      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.`);
-        }
+      const credentials = await getCredentials();
+      if (!credentials) {
+        setShowOnboarding(true);
+        return;
       }
-    }
-  };
-
-  // 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);
+      const validationResult = await validateCredentials(credentials.username);
+      if (!validationResult.isValid) {
+        setShowOnboarding(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;
+      // If we have valid credentials, show data request modal
+      setShowDataRequest(true);
     } catch (error) {
-      console.error('Error fetching account info:', error);
-      throw error;
+      console.error('Error in button press:', error);
+      setShowOnboarding(true);
     } finally {
-      setIsLoading(false);
+      setLoading(false);
     }
-  };
-
-  // Check existing token
-  const checkExistingToken = async () => {
+  }, [hasCredentials, getCredentials, validateCredentials]);
+  const handleDataRequestAccept = useCallback(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');
-          }
-        }
+      const credentials = await getCredentials();
+      if (credentials) {
+        onResolved('https://api2.onairos.uk', credentials.accessToken, credentials);
       }
+      setShowDataRequest(false);
     } catch (error) {
-      console.error('Token verification failed:', error);
-    } finally {
-      setLoading(false);
+      console.error('Error handling data request accept:', error);
     }
-  };
-
-  // 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
+  }, [getCredentials, onResolved]);
   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);
+    // Setup deep linking
+    const handleDeepLink = ({
+      url
+    }) => {
+      if (url.includes('onairosreact://authenticate')) {
+        // Handle authentication callback
+        const params = new URL(url).searchParams;
+        const nonce = params.get('nonce');
+        const callback = params.get('callback');
+        if (nonce && callback) {
+          // Process authentication
+          setShowOnboarding(false);
         }
       }
     };
-    checkStoredAuth();
+    Linking.addEventListener('url', handleDeepLink);
+    return () => {
+      // Cleanup deep linking
+      // Note: Remove event listener based on RN version
+      // if (Platform.OS === 'android') {
+      //   Linking.removeEventListener('url', handleDeepLink);
+      // }
+    };
   }, []);
-
-  // 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 /*#__PURE__*/React.createElement(View, {
-    style: styles.container
-  }, /*#__PURE__*/React.createElement(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') && /*#__PURE__*/React.createElement(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') && /*#__PURE__*/React.createElement(Text, {
-    style: [styles.buttonText, {
-      color: login ? 'black' : textColor === 'black' ? 'black' : 'white'
-    }, textLayout === 'right' ? styles.textRight : textLayout === 'left' ? styles.textLeft : styles.textBelow]
-  }, getText())), showOverlay && !isLoading && /*#__PURE__*/React.createElement(Overlay, {
-    setOthentConnected: setOthentConnected,
-    dataRequester: webpageName,
-    NoAccount: NoAccount,
-    NoModel: NoModel,
-    accountInfo: accountInfo,
-    activeModels: activeModels,
-    avatar: avatar,
-    traits: traits,
+  const buttonStyles = [styles.button, buttonType === 'pill' ? styles.pillButton : styles.circleButton, {
+    backgroundColor: color
+  }];
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(TouchableOpacity, {
+    style: buttonStyles,
+    onPress: handlePress,
+    disabled: loading
+  }, /*#__PURE__*/React.createElement(Icon, {
+    name: icon,
+    size: 24,
+    color: "white"
+  }), buttonType === 'pill' && /*#__PURE__*/React.createElement(Text, {
+    style: styles.buttonText
+  }, "Connect with Onairos")), /*#__PURE__*/React.createElement(UniversalOnboarding, {
+    visible: showOnboarding,
+    onClose: () => setShowOnboarding(false),
+    AppName: AppName,
     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
+    returnLink: returnLink,
+    onComplete: onResolved,
+    embedd: embedd,
+    debug: debug,
+    test: test
+  }), /*#__PURE__*/React.createElement(DataRequestModal, {
+    visible: showDataRequest,
+    onClose: () => setShowDataRequest(false),
+    onAccept: handleDataRequestAccept,
+    requestData: requestData,
+    AppName: AppName
   }));
 };
 const styles = StyleSheet.create({
-  container: {
-    alignItems: 'center',
-    justifyContent: 'center'
-  },
   button: {
     alignItems: 'center',
     justifyContent: 'center',
-    borderRadius: 8
-  },
-  pillButton: {
-    paddingHorizontal: 16,
-    paddingVertical: 8,
-    borderRadius: 20
+    elevation: 3,
+    shadowColor: '#000',
+    shadowOffset: {
+      width: 0,
+      height: 2
+    },
+    shadowOpacity: 0.25,
+    shadowRadius: 3.84
   },
   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
+    width: 60,
+    height: 60,
+    borderRadius: 30
   },
-  fullLogo: {
-    marginRight: 12
-  },
-  iconOnlyLogo: {
-    marginRight: 0
+  pillButton: {
+    flexDirection: 'row',
+    paddingHorizontal: 16,
+    paddingVertical: 12,
+    borderRadius: 25
   },
   buttonText: {
-    fontWeight: 'bold'
-  },
-  textRight: {
-    marginLeft: 8
-  },
-  textLeft: {
-    marginRight: 8
-  },
-  textBelow: {
-    marginTop: 4
+    color: 'white',
+    marginLeft: 8,
+    fontSize: 16,
+    fontWeight: '600'
   }
 });
-export default OnairosButton;
 //# sourceMappingURL=OnairosButton.js.map