Updated 4 checks on scannedDataBox

android/app/src/main/AndroidManifest.xml

@@ -1,4 +1,4 @@
-<manifest xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" package="com.safeqr.safeqr">
+<manifest xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools">
   <uses-permission android:name="android.permission.CAMERA"/>
   <uses-permission android:name="android.permission.INTERNET"/>
   <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE"/>
@@ -14,11 +14,9 @@
     </intent>
   </queries>
   <application android:name=".MainApplication" android:label="@string/app_name" android:icon="@mipmap/ic_launcher" android:allowBackup="true" android:theme="@style/AppTheme">
-    <meta-data android:name="expo.modules.updates.ENABLED" android:value="true"/>
-    <meta-data android:name="expo.modules.updates.EXPO_SDK_VERSION" android:value="51.0.0"/>
+    <meta-data android:name="expo.modules.updates.ENABLED" android:value="false"/>
     <meta-data android:name="expo.modules.updates.EXPO_UPDATES_CHECK_ON_LAUNCH" android:value="ALWAYS"/>
     <meta-data android:name="expo.modules.updates.EXPO_UPDATES_LAUNCH_WAIT_MS" android:value="0"/>
-    <meta-data android:name="expo.modules.updates.EXPO_UPDATE_URL" android:value="https://exp.host/@piggyinu/safeqr"/>
     <activity android:name=".MainActivity" android:configChanges="keyboard|keyboardHidden|orientation|screenSize|screenLayout|uiMode" android:launchMode="singleTask" android:windowSoftInputMode="adjustResize" android:theme="@style/Theme.App.SplashScreen" android:exported="true" android:screenOrientation="portrait">
       <intent-filter>
         <action android:name="android.intent.action.MAIN"/>

android/app/src/main/res/values/styles.xml

@@ -5,7 +5,6 @@
     <item name="android:editTextBackground">@drawable/rn_edit_text_material</item>
     <item name="colorPrimary">@color/colorPrimary</item>
     <item name="android:statusBarColor">#ffffff</item>
-    <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
   </style>
   <style name="ResetEditText" parent="@android:style/Widget.EditText">
     <item name="android:padding">0dp</item>

android/gradle.properties

@@ -58,5 +58,4 @@ EX_DEV_CLIENT_NETWORK_INSPECTOR=true
 # Use legacy packaging to compress native libraries in the resulting APK.
 expo.useLegacyPackaging=false
 
-expo.jsEngine=jsc
 VisionCamera_enableCodeScanner=true

components/ScannedDataBox.tsx

@@ -8,11 +8,6 @@ import { startActivityAsync, ActivityAction } from 'expo-intent-launcher';
 import * as Linking from 'expo-linking';
 
 
-
-
-
-
-
 const { width: screenWidth, height: screenHeight } = Dimensions.get('window');
 
 interface ScannedDataBoxProps {
@@ -29,6 +24,8 @@ const ScannedDataBox: React.FC<ScannedDataBoxProps> = ({ qrCodeId, clearScanData
   const [webViewUrl, setWebViewUrl] = useState('');
 
 
+
+
   useEffect(() => {
     const fetchQRDetails = async () => {
       try {
@@ -53,77 +50,81 @@ const ScannedDataBox: React.FC<ScannedDataBoxProps> = ({ qrCodeId, clearScanData
     );
   }
 
+
   const data = qrDetails.data || {};
   const details = qrDetails.details || {};
   const type = data.info?.type || 'Undefined';
+  const description = data.info?.description || 'Undefined';
+
   const contents = data.contents || 'Undefined';
   const result = data.result || 'Unknown';
   const ssid = details.ssid || 'Undefined';
   const encryption = details.encryption || 'NO';
   const hidden = details.hidden ? 'Hidden' : 'Visible';
 
+  const isShorteningService = details.shorteningService === 'Yes';
 
 
-// Function to get security text and icon based on the URL description
-const getSecurityStatus = () => {
-  if (data.info?.description === "Secure Uniform Resource Locator") {
-    return {
-      text: 'Secure Connection',
-      icon: <Ionicons name="shield-checkmark" size={screenWidth * 0.045} color="#44c167" />
-    };
-  } else {
-    return {
-      text: 'Not Secure',
-      icon: <SimpleLineIcons name="shield" size={screenWidth * 0.045} color="#ff0000" />
-    };
-  }
-};
-const { text: securityText, icon: securityIcon } = getSecurityStatus();
+  // Function to get security text and icon based on the URL description
+  const getSecurityStatus = () => {
+    if (data.info?.description === "Secure Uniform Resource Locator") {
+      return {
+        text: 'Secure Connection',
+        icon: <Ionicons name="shield-checkmark" size={screenWidth * 0.045} color="#44c167" />
+      };
+    } else {
+      return {
+        text: 'Not Secure',
+        icon: <SimpleLineIcons name="shield" size={screenWidth * 0.045} color="#ff0000" />
+      };
+    }
+  };
+  const { text: securityText, icon: securityIcon } = getSecurityStatus();
 
 
 
 
- // Function to get result text and color based on the security status 
-const getResultStatus = () => {
-  if (result === 'UNSAFE') {
-    return { text: 'UNSAFE', color: '#ff0000' }; // Red
-  } else if (result === 'SAFE') {
-    return { text: 'SAFE', color: '#44c167' }; // Green
-  } else if (result === 'WARNING') {
-    return { text: 'WARNING', color: '#ffa500' }; // Orange
-  } else if (result === '') {
-    return { text: 'UNKNOWN', color: '#000000' }; // Black for unknown
-  } else {
-    return { text: 'UNKNOWN', color: '#000000' }; // Default to Black for unknown
-  }
-};
-const { text: resultText, color: resultColor } = getResultStatus();
+  // Function to get result text and color based on the security status 
+  const getResultStatus = () => {
+    if (result === 'UNSAFE') {
+      return { text: 'UNSAFE', color: '#ff0000' }; // Red
+    } else if (result === 'SAFE') {
+      return { text: 'SAFE', color: '#44c167' }; // Green
+    } else if (result === 'WARNING') {
+      return { text: 'WARNING', color: '#ffa500' }; // Orange
+    } else if (result === '') {
+      return { text: 'UNKNOWN', color: '#000000' }; // Black for unknown
+    } else {
+      return { text: 'UNKNOWN', color: '#000000' }; // Default to Black for unknown
+    }
+  };
+  const { text: resultText, color: resultColor } = getResultStatus();
 
 
 
 
-// Function to determine security header status
-const getSecurityHeaderStatus = (headers) => {
-  const filteredHeaders = headers.filter(
-    (header) => header !== "Not an HTTPS connection" && header !== "No HSTS Header detected"
-  );
+  // Function to determine security header status
+  const getSecurityHeaderStatus = (headers) => {
+    const filteredHeaders = headers.filter(
+      (header) => header !== "Not an HTTPS connection" && header !== "No HSTS Header detected"
+    );
 
-  if (filteredHeaders.length > 0) {
-    return { text: 'Security Headers', color: '#44c167', hasHeaders: true }; // Green with headers
-  } else {
-    return { text: 'No Security Headers', color: '#ffa500', hasHeaders: false }; // Orange without headers
-  }
-};
-const securityHeaderStatus = getSecurityHeaderStatus(details.hstsHeader || []);
+    if (filteredHeaders.length > 0) {
+      return { text: 'Security Headers', color: '#44c167', hasHeaders: true }; // Green with headers
+    } else {
+      return { text: 'No Security Headers', color: '#ffa500', hasHeaders: false }; // Orange without headers
+    }
+  };
+  const securityHeaderStatus = getSecurityHeaderStatus(details.hstsHeader || []);
 
-const getRedirectStatus = (redirectCount: number) => {
-  if (redirectCount === 0) {
-    return { text: 'No Redirects', color: '#44c167', hasRedirects: false }; // Green with no redirects
-  } else {
-    return { text: 'Redirects', color: '#ff0000', hasRedirects: true }; // Red with redirects
-  }
-};
-const redirectStatus = getRedirectStatus(details.redirect || 0);
+  const getRedirectStatus = (redirectCount: number) => {
+    if (redirectCount === 0) {
+      return { text: 'No Redirects', color: '#44c167', hasRedirects: false }; // Green with no redirects
+    } else {
+      return { text: 'Redirects', color: '#ff0000', hasRedirects: true }; // Red with redirects
+    }
+  };
+  const redirectStatus = getRedirectStatus(details.redirect || 0);
 
 
 
@@ -136,32 +137,32 @@ const redirectStatus = getRedirectStatus(details.redirect || 0);
   };
 
 
-// Function to get encryption status and icon
-const getEncryptionStatus = (encryption) => {
-  if (encryption === 'NO') {
-    return {
-      text: 'No Encryption',
-      icon: <Ionicons name="shield" size={screenWidth * 0.045} color="#ff0000" /> // Red
-    };
-  } else if (encryption === 'WEP') {
-    return {
-      text: 'WEP Encryption',
-      icon: <Ionicons name="shield" size={screenWidth * 0.045} color="#ffa500" /> // Orange
-    };
-  } else if (encryption === 'WPA' || encryption === 'WPA2') {
-    return {
-      text: 'WPA Encryption',
-      icon: <Ionicons name="shield-checkmark" size={screenWidth * 0.045} color="#44c167" /> // Green
-    };
-  } else {
-    return {
-      text: 'Unknown Encryption',
-      icon: <Ionicons name="shield" size={screenWidth * 0.045} color="#000000" /> // Black for unknown
-    };
-  }
-};
+  // Function to get encryption status and icon
+  const getEncryptionStatus = (encryption) => {
+    if (encryption === 'NO') {
+      return {
+        text: 'No Encryption',
+        icon: <Ionicons name="shield" size={screenWidth * 0.045} color="#ff0000" /> // Red
+      };
+    } else if (encryption === 'WEP') {
+      return {
+        text: 'WEP Encryption',
+        icon: <Ionicons name="shield" size={screenWidth * 0.045} color="#ffa500" /> // Orange
+      };
+    } else if (encryption === 'WPA' || encryption === 'WPA2') {
+      return {
+        text: 'WPA Encryption',
+        icon: <Ionicons name="shield-checkmark" size={screenWidth * 0.045} color="#44c167" /> // Green
+      };
+    } else {
+      return {
+        text: 'Unknown Encryption',
+        icon: <Ionicons name="shield" size={screenWidth * 0.045} color="#000000" /> // Black for unknown
+      };
+    }
+  };
 
-const { text: encryptionText, icon: encryptionIcon } = getEncryptionStatus(encryption);
+  const { text: encryptionText, icon: encryptionIcon } = getEncryptionStatus(encryption);
 
 
   // Function to open the Wi-Fi configuration in the OS
@@ -178,11 +179,11 @@ const { text: encryptionText, icon: encryptionIcon } = getEncryptionStatus(encry
     // Split the contents and extract the phone number and message
     const [phone, ...messageParts] = contents.split(':').slice(1);
     const message = messageParts.join(':');
-  
+
     // Log the extracted phone number and message
     console.log('Phone:', phone);
     console.log('Message:', message);
-  
+
     // Construct the SMS URL based on the platform
     if (Platform.OS === 'android') {
       return `sms:${phone}?body=${message}`;
@@ -193,8 +194,50 @@ const { text: encryptionText, icon: encryptionIcon } = getEncryptionStatus(encry
     }
   };
 
+
+
+
+  const sslStrippingStatus = {
+    hasSSLStripping: details.sslStripping?.some(status => status === true) ?? false,
+    text: details.sslStripping?.some(status => status === true)
+      ? "SSL Stripping Detected"
+      : "No SSL Stripping",
+    color: details.sslStripping?.some(status => status === true) ? "#FF0000" : "#44c167", // Green for No SSL Stripping
+  };
+
+  // Log to check what's happening
+  console.log('SSL Stripping Details:', details.sslStripping);
+  console.log('SSL Stripping Status:', sslStrippingStatus);
+
+  const hasExecutableStatus = {
+    hasExecutable: details.hasExecutable ?? false,
+    text: details.hasExecutable ? "Executable Detected" : "No Executable",
+    color: details.hasExecutable ? "#FF0000" : "#44c167", // Green for No Executable
+  };
+
+  // Log to check what's happening
+  console.log('Executable Details:', details.hasExecutable);
+  console.log('Executable Status:', hasExecutableStatus);
+
+  const trackingStatus = {
+    hasTracking: details.tracking ?? false,
+    text: details.tracking ? "Tracking Detected" : "No Tracking",
+    color: details.tracking ? "#FF0000" : "#44c167", // Green for No Tracking
+  };
+
+  // Log to check what's happening
+  console.log('Tracking Details:', details.tracking);
+  console.log('Tracking Status:', trackingStatus);
+  const redirectCount = details.redirect ?? 0; // Default to 0 if undefined
+
+
+
+
   return (
+    
     <View style={styles.dataBox}>
+
+      
       <TouchableOpacity style={styles.closeButton} onPress={clearScanData}>
         <Ionicons name="close-circle-outline" size={screenWidth * 0.05} color="#ff69b4" />
       </TouchableOpacity>
@@ -215,158 +258,210 @@ const { text: encryptionText, icon: encryptionIcon } = getEncryptionStatus(encry
         <View style={styles.dividerVertical} />
         <View style={styles.detailsSection}>
           <Text style={styles.timestampText}>{data.createdAt ? new Date(data.createdAt).toLocaleString() : 'Invalid Date'}</Text>
-          <Text style={styles.typeText}>Description: {type}</Text>
+          <Text style={styles.typeText}>Description: {description}</Text>
+           {/* Conditionally display the shortening service message */}
+    {isShorteningService && (
+      <Text style={styles.shorteningServiceText}>This is a shortening service</Text>
+    )}
+    
         </View>
       </View>
 
       {/* The Main Result in appropriate color */}
       <Text style={[styles.resultText, { color: resultColor }]}>
-  Result: {resultText}
-</Text>
+        Result: {resultText}
+      </Text>
 
 
       {/* URL Type */}
-{type === 'URL' && (
-  <>
-    <View style={styles.displayCheck}>
-  {securityIcon}
-  <Text style={styles.DetailsInfo}>{securityText}</Text>
-</View>
+      {type === 'URL' && (
+        <>
+          <View style={styles.mainContent}>
+            {/* Left Container */}
+            <View style={styles.leftContainer}>
+              <View style={styles.displayCheck}>
+                {securityIcon}
+                <Text style={styles.DetailsInfo}>{securityText}</Text>
+              </View>
 
-    {/* Security Headers Button */}
-    {securityHeaderStatus.hasHeaders ? (
-      <TouchableOpacity style={styles.DetailsInfoButton} onPress={() => setIsModalVisible(true)}>
-        <Ionicons name="shield-checkmark" size={screenWidth * 0.045} color={securityHeaderStatus.color} />
-        <Text style={styles.DetailsInfo}>{securityHeaderStatus.text}</Text>
-        <Ionicons name="chevron-forward" size={screenWidth * 0.045} color="#ff69b4" style={styles.chevronIcon} />
+              <View style={styles.displayCheck}>
+                <MaterialCommunityIcons name="shield-off" size={screenWidth * 0.045} color={securityHeaderStatus.color} />
+                <Text style={styles.DetailsInfo}>{securityHeaderStatus.text}</Text>
+              </View>
+
+              {/* Redirects Button */}
+              {redirectCount > 0 ? (
+                <TouchableOpacity style={styles.DetailsInfoButton} onPress={() => setIsRedirectModalVisible(true)}>
+                  <Ionicons name="shield" size={screenWidth * 0.045} color={redirectStatus.color} />
+                  <Text style={styles.DetailsInfo}>{`Redirects: ${redirectCount}`}</Text>
+                  <Ionicons name="chevron-forward" size={screenWidth * 0.045} color="#ff69b4" style={styles.chevronIcon} />
+                </TouchableOpacity>
+              ) : (
+                <View style={styles.displayCheck}>
+                  <Ionicons name="shield-checkmark" size={screenWidth * 0.045} color={redirectStatus.color} />
+                  <Text style={styles.DetailsInfo}>{`Redirects: ${redirectCount}`}</Text>
+                </View>
+              )}
+            </View>
+
+            {/* Vertical Divider */}
+            <View style={styles.verticalDivider} />
+
+            {/* Right Container */}
+            <View style={styles.rightContainer}>
+              <View style={styles.displayCheck}>
+                <Ionicons name="shield-checkmark" size={screenWidth * 0.045} color={sslStrippingStatus.color} />
+                <Text style={styles.DetailsInfo}>{sslStrippingStatus.text}</Text>
+              </View>
+
+              <View style={styles.displayCheck}>
+                <Ionicons name="shield-checkmark" size={screenWidth * 0.045} color={hasExecutableStatus.color} />
+                <Text style={styles.DetailsInfo}>{hasExecutableStatus.text}</Text>
+              </View>
+
+              <View style={styles.displayCheck}>
+                <Ionicons name="shield-checkmark" size={screenWidth * 0.045} color={trackingStatus.color} />
+                <Text style={styles.DetailsInfo}>{trackingStatus.text}</Text>
+              </View>
+            </View>
+          </View>
+
+          {/* Divider */}
+          <View style={styles.dividerHorizontal} />
+
+          {/* Action Buttons */}
+          <View style={styles.iconContainer}>
+            <TouchableOpacity style={styles.iconButton} onPress={handleCopyToClipboard}>
+              <Ionicons name="clipboard-outline" size={screenWidth * 0.05} color="#2196F3" />
+              <Text style={styles.iconText}>Copy Link</Text>
+            </TouchableOpacity>
+
+            <TouchableOpacity style={styles.iconButton} onPress={() => handleOpenUrl(contents)}>
+              <Ionicons name="open-outline" size={screenWidth * 0.05} color="#2196F3" />
+              <Text style={styles.iconText}>Open Link</Text>
+            </TouchableOpacity>
+
+            <TouchableOpacity style={styles.iconButton} onPress={() => {
+              setWebViewUrl(contents);
+              setIsWebViewVisible(true);
+            }}>
+              <MaterialCommunityIcons name="file-lock-outline" size={screenWidth * 0.05} color="#2196F3" />
+              <Text style={styles.iconText}>SecureWebView</Text>
+            </TouchableOpacity>
+          </View>
+
+        {/* Redirect Chain Pop UP */}
+<Modal
+  visible={isRedirectModalVisible}
+  transparent={true}
+  animationType="fade"
+  onRequestClose={() => setIsRedirectModalVisible(false)}
+>
+  <View style={styles.modalContainer}>
+    <View style={styles.modalContent}>
+      <Text style={styles.modalTitle}>Redirect Chain</Text>
+      <ScrollView style={styles.modalScrollContent}>
+        {details.redirectChain?.map((redirect: string, index: number) => (
+          <ScrollView 
+            key={index} 
+            horizontal={true} 
+            style={styles.horizontalScrollView}
+            contentContainerStyle={styles.horizontalContentContainer}>
+            <Text style={styles.modalText}>{redirect}</Text>
+          </ScrollView>
+        ))}
+      </ScrollView>
+      <TouchableOpacity style={styles.closeModalButton} onPress={() => setIsRedirectModalVisible(false)}>
+        <Text style={styles.closeModalButtonText}>Close</Text>
       </TouchableOpacity>
-    ) : (
-      <View style={styles.displayCheck}>
-        <MaterialCommunityIcons name="shield-off" size={screenWidth * 0.045} color={securityHeaderStatus.color} />
-        <Text style={styles.DetailsInfo}>{securityHeaderStatus.text}</Text>
-      </View>
-    )}
-
-{/* Redirects Button */}
-{redirectStatus.hasRedirects ? (
-  <TouchableOpacity style={styles.DetailsInfoButton} onPress={() => setIsRedirectModalVisible(true)}>
-    <Ionicons name="shield" size={screenWidth * 0.045} color={redirectStatus.color} />
-    <Text style={styles.DetailsInfo}>{redirectStatus.text}</Text>
-    <Ionicons name="chevron-forward" size={screenWidth * 0.045} color="#ff69b4" style={styles.chevronIcon} />
-  </TouchableOpacity>
-) : (
-  <View style={styles.displayCheck}>
-    <Ionicons name="shield-checkmark" size={screenWidth * 0.045} color={redirectStatus.color} />
-    <Text style={styles.DetailsInfo}>{redirectStatus.text}</Text>
+    </View>
   </View>
-)}
+</Modal>
+
+        </>
+      )}
 
 
-{/* Divider */}
-<View style={styles.dividerHorizontal} />
 
-{/* Action Buttons */}
-<View style={styles.iconContainer}>
-  <TouchableOpacity style={styles.iconButton} onPress={handleCopyToClipboard}>
-    <Ionicons name="clipboard-outline" size={screenWidth * 0.05} color="#2196F3" />
-    <Text style={styles.iconText}>Copy Link</Text>
-  </TouchableOpacity>
-  
-  <TouchableOpacity style={styles.iconButton} onPress={() => handleOpenUrl(contents)}>
-    <Ionicons name="open-outline" size={screenWidth * 0.05} color="#2196F3" />
-    <Text style={styles.iconText}>Open Link</Text>
-  </TouchableOpacity>
-  
-  <TouchableOpacity style={styles.iconButton} onPress={() => {
-        setWebViewUrl(contents);
-        setIsWebViewVisible(true);
-      }}>
-    <MaterialCommunityIcons name="file-lock-outline" size={screenWidth * 0.05} color="#2196F3" />
-    <Text style={styles.iconText}>SecureWebView</Text>
-  </TouchableOpacity>
-</View>
-
-  </>
-)}
 
 
 
       {/* WIFI Type */}
-      
+
       {type === 'WIFI' && (
-  <>
-    {/* SSID */}
-    <View style={styles.displayCheck}>
-      <Text style={styles.DetailsInfo}>SSID: {ssid}</Text>
-    </View>
+        <>
+          {/* SSID */}
+          <View style={styles.displayCheck}>
+            <Text style={styles.DetailsInfo}>SSID: {ssid}</Text>
+          </View>
 
-    {/* Encryption */}
-    <View style={styles.displayCheck}>
-      {encryptionIcon}
-      <Text style={styles.DetailsInfo}>{encryptionText}</Text>
-    </View>
+          {/* Encryption */}
+          <View style={styles.displayCheck}>
+            {encryptionIcon}
+            <Text style={styles.DetailsInfo}>{encryptionText}</Text>
+          </View>
 
-    {/* Visibility */}
-    <View style={styles.displayCheck}>
-      <Ionicons name={hidden === 'Hidden' ? "eye-off-outline" : "eye-outline"} size={screenWidth * 0.045} color={hidden === 'Hidden' ? "#ff0000" : "#44c167"} />
-      <Text style={styles.DetailsInfo}>Visibility: {hidden === 'Hidden' ? 'Hidden' : 'Visible'}</Text>
-    </View>
+          {/* Visibility */}
+          <View style={styles.displayCheck}>
+            <Ionicons name={hidden === 'Hidden' ? "eye-off-outline" : "eye-outline"} size={screenWidth * 0.045} color={hidden === 'Hidden' ? "#ff0000" : "#44c167"} />
+            <Text style={styles.DetailsInfo}>Visibility: {hidden === 'Hidden' ? 'Hidden' : 'Visible'}</Text>
+          </View>
 
-    {/* Divider */}
-    <View style={styles.dividerHorizontal} />
+          {/* Divider */}
+          <View style={styles.dividerHorizontal} />
 
-   {/* Connect to Wi-Fi Button */}
-   <TouchableOpacity
-  style={[styles.connectButton, { backgroundColor: resultColor }]}
-  onPress={() => {
-    startActivityAsync(ActivityAction.WIFI_SETTINGS)
-      .catch(err => console.error('Error opening Wi-Fi settings:', err));
-  }}
->
-  <Text style={styles.connectButtonText}>Connect to Wi-Fi</Text>
-</TouchableOpacity>
-  </>
-)}
+          {/* Connect to Wi-Fi Button */}
+          <TouchableOpacity
+            style={[styles.connectButton, { backgroundColor: resultColor }]}
+            onPress={() => {
+              startActivityAsync(ActivityAction.WIFI_SETTINGS)
+                .catch(err => console.error('Error opening Wi-Fi settings:', err));
+            }}
+          >
+            <Text style={styles.connectButtonText}>Connect to Wi-Fi</Text>
+          </TouchableOpacity>
+        </>
+      )}
 
 
 
 
 
-{type === 'PHONE' && (
-  <TouchableOpacity style={styles.iconButton} onPress={() => Linking.openURL(contents)}>
-    <View style={styles.dividerHorizontal} />
-    <Ionicons name="call-outline" size={screenWidth * 0.045} color="#2196F3" />
-    {/* Divider */}
+      {type === 'PHONE' && (
+        <TouchableOpacity style={styles.iconButton} onPress={() => Linking.openURL(contents)}>
+          <View style={styles.dividerHorizontal} />
+          <Ionicons name="call-outline" size={screenWidth * 0.045} color="#2196F3" />
+          {/* Divider */}
 
-    <Text style={styles.iconText}>Call Number</Text>
-  </TouchableOpacity>
-)}
+          <Text style={styles.iconText}>Call Number</Text>
+        </TouchableOpacity>
+      )}
 
-{type === 'SMS' && (
-  <TouchableOpacity
-    style={styles.iconButton}
-    onPress={() => {
-      const smsUrl = constructSMSUrl(contents);
-      Linking.openURL(smsUrl).catch(err => console.error('Error sending SMS:', err));
-    }}
-  >
-        {/* Divider */}
-<View style={styles.dividerHorizontal} />
-    <Ionicons name="chatbubble-outline" size={screenWidth * 0.045} color="#2196F3" />
+      {type === 'SMS' && (
+        <TouchableOpacity
+          style={styles.iconButton}
+          onPress={() => {
+            const smsUrl = constructSMSUrl(contents);
+            Linking.openURL(smsUrl).catch(err => console.error('Error sending SMS:', err));
+          }}
+        >
+          {/* Divider */}
+          <View style={styles.dividerHorizontal} />
+          <Ionicons name="chatbubble-outline" size={screenWidth * 0.045} color="#2196F3" />
 
-    <Text style={styles.iconText}>Send SMS</Text>
-  </TouchableOpacity>
-)}
+          <Text style={styles.iconText}>Send SMS</Text>
+        </TouchableOpacity>
+      )}
 
-{type === 'EMAIL' && (
-  <TouchableOpacity style={styles.iconButton} onPress={() => Linking.openURL(contents)}>
-    {/* Divider */}
-<View style={styles.dividerHorizontal} />
-    <Ionicons name="mail-outline" size={screenWidth * 0.045} color="#2196F3" />
-    
-    <Text style={styles.iconText}>Send Email</Text>
-  </TouchableOpacity>
-)}
+      {type === 'EMAIL' && (
+        <TouchableOpacity style={styles.iconButton} onPress={() => Linking.openURL(contents)}>
+          {/* Divider */}
+          <View style={styles.dividerHorizontal} />
+          <Ionicons name="mail-outline" size={screenWidth * 0.045} color="#2196F3" />
+
+          <Text style={styles.iconText}>Send Email</Text>
+        </TouchableOpacity>
+      )}
 
 
 
@@ -393,49 +488,31 @@ const { text: encryptionText, icon: encryptionIcon } = getEncryptionStatus(encry
 
 
 
-{/*POP UP Security Header and Redirect button*/}
-     {/* Security Headers Modal */}
-<Modal
-  visible={isModalVisible}
-  transparent={true}
-  animationType="fade"
-  onRequestClose={() => setIsModalVisible(false)}
->
-  <View style={styles.modalContainer}>
-    <View style={styles.modalContent}>
-      <Text style={styles.modalTitle}>Security Headers</Text>
-      <ScrollView style={styles.modalScrollContent}>
-        {details.hstsHeader?.map((header: string, index: number) => (
-          <Text key={index} style={styles.modalText}>{header}</Text>
-        ))}
-      </ScrollView>
-      <TouchableOpacity style={styles.closeModalButton} onPress={() => setIsModalVisible(false)}>
-        <Text style={styles.closeModalButtonText}>Close</Text>
-      </TouchableOpacity>
-    </View>
-  </View>
-</Modal>
-
-      {/* Redirect Chain Modal */}
+      {/*POP UP Security Header and Redirect button*/}
+      {/* Security Headers Modal */}
       <Modal
-        visible={isRedirectModalVisible}
+        visible={isModalVisible}
         transparent={true}
         animationType="fade"
-        onRequestClose={() => setIsRedirectModalVisible(false)}
+        onRequestClose={() => setIsModalVisible(false)}
       >
         <View style={styles.modalContainer}>
           <View style={styles.modalContent}>
-            <Text style={styles.modalTitle}>Redirect Chain</Text>
-            {details.redirectChain?.map((redirect: string, index: number) => (
-              <Text key={index} style={styles.modalText}>{redirect}</Text>
-            ))}
-            <TouchableOpacity style={styles.closeModalButton} onPress={() => setIsRedirectModalVisible(false)}>
+            <Text style={styles.modalTitle}>Security Headers</Text>
+            <ScrollView style={styles.modalScrollContent}>
+              {details.hstsHeader?.map((header: string, index: number) => (
+                <Text key={index} style={styles.modalText}>{header}</Text>
+              ))}
+            </ScrollView>
+            <TouchableOpacity style={styles.closeModalButton} onPress={() => setIsModalVisible(false)}>
               <Text style={styles.closeModalButtonText}>Close</Text>
             </TouchableOpacity>
           </View>
         </View>
       </Modal>
 
+
+
       {/* WebView Modal */}
       <Modal
         visible={isWebViewVisible}
@@ -457,20 +534,27 @@ const { text: encryptionText, icon: encryptionIcon } = getEncryptionStatus(encry
 };
 
 const styles = StyleSheet.create({
+  // Row styles
   row: {
     flexDirection: 'row',
     alignItems: 'center',
   },
+
+  // Scan icon styles
   scan_icon: {
     width: screenWidth * 0.09,
     height: screenWidth * 0.09,
     marginRight: screenWidth * 0.015,
   },
+
+  // Payload text styles
   payload: {
     fontSize: screenWidth * 0.0375,
     color: '#000',
     flex: 1,
   },
+
+  // Data box styles
   dataBox: {
     padding: screenWidth * 0.0375,
     backgroundColor: '#ffe6f0',
@@ -479,77 +563,55 @@ const styles = StyleSheet.create({
     shadowOffset: { width: 0, height: screenHeight * 0.001875 },
     shadowOpacity: 0.15,
     shadowRadius: screenWidth * 0.01875,
-    elevation: screenWidth * 0.0135,
+    elevation: screenWidth * 0.016,
     zIndex: 1,
   },
-  mainContent: {
-    flexDirection: 'row',
-    justifyContent: 'center',
-    alignItems: 'center',
-    padding: screenWidth * 0.0525,
-  },
+
+  // QR section styles
   qrSection: {
     flex: 1,
     alignItems: 'center',
   },
+
+  // Vertical divider styles
   dividerVertical: {
     width: screenWidth * 0.001875,
     height: '100%',
     backgroundColor: '#ddd',
     marginHorizontal: screenWidth * 0.025,
   },
+
+  // Details section styles
   detailsSection: {
     flex: 2,
   },
+
+  // Timestamp text styles
   timestampText: {
     fontSize: screenWidth * 0.03,
     color: '#000',
     marginBottom: screenWidth * 0.01875,
   },
+
+  // Result text styles
   resultText: {
     fontSize: screenWidth * 0.045,
     marginBottom: screenWidth * 0.01875,
     textAlign: 'center',
   },
+
+  // Type text styles
   typeText: {
     fontSize: screenWidth * 0.03,
     color: '#000',
     marginBottom: screenWidth * 0.01875,
   },
-  DetailsInfo: {
-    fontSize: screenWidth * 0.03,
-    color: '#000',
-    marginLeft: screenWidth * 0.01875,
-  },
-  iconContainer: {
-    flexDirection: 'row',
-    justifyContent: 'space-around',
-    alignItems: 'center',
-    marginTop: screenWidth * 0.01875,
-  },
-  iconButton: {
-    flexDirection: 'column',
-    alignItems: 'center',
-    marginHorizontal: screenWidth * 0.05, // Add margin between buttons
-  },
-  iconText: {
-    color: '#2196F3',
-    marginTop: screenWidth * 0.01,
-    textAlign: 'center',
-    fontSize: screenWidth * 0.03,
-  },
-  
-  dividerHorizontal: {
-    width: '100%',
-    height: 1,
-    backgroundColor: '#ddd',
-    marginVertical: screenWidth * 0.025,
-  },
-  
-  
+
+  // Details Info Button styles
   DetailsInfoButton: {
     flexDirection: 'row',
     alignItems: 'center',
+    justifyContent: 'space-between', // Ensure equal spacing between icon and text
     paddingVertical: screenWidth * 0.01875,
     paddingHorizontal: screenWidth * 0.028125,
     backgroundColor: '#ffe6f0',
@@ -557,28 +619,47 @@ const styles = StyleSheet.create({
     marginTop: screenWidth * 0.01875,
     borderWidth: 1,
     borderColor: '#ff69b4',
+    width: '100%', // Make it take full width
   },
+  // Display check styles
+  // Aligning the boxes
   displayCheck: {
     flexDirection: 'row',
     alignItems: 'center',
+    justifyContent: 'space-between', // Align items evenly
     paddingVertical: screenWidth * 0.01875,
     paddingHorizontal: screenWidth * 0.028125,
     backgroundColor: '#ffe6f0',
     borderRadius: screenWidth * 0.01875,
-    marginTop: screenWidth * 0.01875,
+    marginVertical: screenWidth * 0.01875,
+    width: '100%', // Make it take full width
   },
+  // Details info text styles
+  DetailsInfo: {
+    fontSize: screenWidth * 0.026,
+    color: '#000',
+    marginLeft: screenWidth * 0.01875,
+    textAlign: 'left', // Center text horizontally
+    flex: 1, // Ensure the text takes up the remaining space
+  },
+
+  // Close button styles
   closeButton: {
     position: 'absolute',
     top: screenWidth * 0.01875,
     right: screenWidth * 0.01875,
     zIndex: 2,
   },
+
+  // Modal container styles
   modalContainer: {
     flex: 1,
     justifyContent: 'center',
     alignItems: 'center',
     backgroundColor: 'rgba(0, 0, 0, 0.5)',
   },
+
+  // Modal content styles
   modalContent: {
     width: '80%',
     backgroundColor: 'white',
@@ -586,20 +667,37 @@ const styles = StyleSheet.create({
     padding: screenWidth * 0.0375,
     alignItems: 'center',
   },
+
+  // Modal title styles
   modalTitle: {
     fontSize: screenWidth * 0.045,
     fontWeight: 'bold',
     marginBottom: screenWidth * 0.01875,
   },
+
+  // Modal text styles
   modalText: {
     fontSize: screenWidth * 0.03,
     marginBottom: screenWidth * 0.009375,
     textAlign: 'left',
     width: '100%',
   },
+
+  // Modal scroll content styles
   modalScrollContent: {
     maxHeight: 200,
   },
+
+  horizontalScrollView: {
+    marginVertical: 5, // Adjust vertical margin as needed
+  },
+
+  horizontalContentContainer: {
+    flexGrow: 1, // Ensure the content container expands to fit its children
+  },
+
+
+  // Close modal button styles
   closeModalButton: {
     marginTop: screenWidth * 0.0375,
     paddingVertical: screenWidth * 0.01875,
@@ -607,18 +705,20 @@ const styles = StyleSheet.create({
     backgroundColor: '#ff69b4',
     borderRadius: screenWidth * 0.009375,
   },
-  chevronIcon: {
-    marginLeft: 'auto',
-  },
-  
+
+  // Close modal button text styles
   closeModalButtonText: {
     fontSize: screenWidth * 0.03,
     color: '#fff',
   },
+
+  // Loading container styles
   loadingContainer: {
     justifyContent: 'center',
     alignItems: 'center',
   },
+
+  // Web view container styles
   webViewContainer: {
     width: '100%',
     height: '80%',
@@ -626,6 +726,8 @@ const styles = StyleSheet.create({
     borderRadius: screenWidth * 0.01875,
     overflow: 'hidden',
   },
+
+  // Shadow box styles
   shadowBox: {
     shadowColor: '#000',
     shadowOffset: { width: 0, height: screenHeight * 0.001875 },
@@ -633,6 +735,8 @@ const styles = StyleSheet.create({
     shadowRadius: screenWidth * 0.01875,
     elevation: screenWidth * 0.0135,
   },
+
+  // Connect button styles
   connectButton: {
     flexDirection: 'row',
     alignItems: 'center',
@@ -643,15 +747,81 @@ const styles = StyleSheet.create({
     borderRadius: screenWidth * 0.01875,
     marginTop: screenWidth * 0.025,
   },
-  
+
+  // Connect button text styles
   connectButtonText: {
     color: '#fff',
     marginLeft: screenWidth * 0.01875,
     fontSize: screenWidth * 0.0375,
   },
-  
 
-  
+  // Main content styles
+  mainContent: {
+    flexDirection: 'row',
+    justifyContent: 'center',
+    alignItems: 'center',
+    padding: screenWidth * 0.0525,
+  },
+
+  // Left container styles
+  leftContainer: {
+    flex: 1,
+    justifyContent: 'space-between',
+  },
+
+  // Right container styles
+  rightContainer: {
+    flex: 1,
+    justifyContent: 'space-between',
+  },
+  shorteningServiceText: {
+    fontSize: screenWidth * 0.03, // Adjust size as needed
+    color: '#ff6347', // Example color (Tomato)
+    marginTop: screenWidth * 0.02, // Adjust spacing as needed
+  },
+
+  // Vertical divider styles
+  verticalDivider: {
+    width: 1,
+    backgroundColor: '#ddd',
+    height: '100%',
+    marginHorizontal: screenWidth * 0.025,
+  },
+
+  // Icon container styles
+  iconContainer: {
+    flexDirection: 'row',
+    justifyContent: 'space-around',
+    alignItems: 'center',
+    marginTop: screenWidth * 0.01875,
+  },
+
+  // Icon button styles
+  iconButton: {
+    flexDirection: 'column',
+    alignItems: 'center',
+    marginHorizontal: screenWidth * 0.05, // Add margin between buttons
+  },
+
+  // Icon text styles
+  iconText: {
+    color: '#2196F3',
+    marginTop: screenWidth * 0.01,
+    textAlign: 'center',
+    fontSize: screenWidth * 0.03,
+  },
+
+  // Horizontal divider styles
+  dividerHorizontal: {
+    width: '100%',
+    height: 1,
+    backgroundColor: '#ddd',
+    marginVertical: screenWidth * 0.025,
+  },
+
+  // Chevron icon styles
+  chevronIcon: {
+    marginLeft: 'auto',
+  },
 });
-
-export default ScannedDataBox;
+export default ScannedDataBox;

package-lock.json

@@ -26,7 +26,7 @@
         "dotenv": "^16.4.5",
         "expo": "~51.0.24",
         "expo-camera": "~15.0.14",
-        "expo-dev-client": "~4.0.19",
+        "expo-dev-client": "~4.0.22",
         "expo-image-manipulator": "^12.0.5",
         "expo-image-picker": "~15.0.7",
         "expo-intent-launcher": "~11.0.1",

package.json

@@ -30,7 +30,7 @@
     "dotenv": "^16.4.5",
     "expo": "~51.0.24",
     "expo-camera": "~15.0.14",
-    "expo-dev-client": "~4.0.19",
+    "expo-dev-client": "~4.0.22",
     "expo-image-manipulator": "^12.0.5",
     "expo-image-picker": "~15.0.7",
     "expo-intent-launcher": "~11.0.1",

screens/QRScannerScreen.tsx

@@ -242,7 +242,7 @@ const styles = StyleSheet.create({
   },
   scannedDataBoxPopup: {
     position: 'absolute',
-    top: '30%', 
+    top: '20%', 
     left: '5%',
     right: '5%',
     zIndex: 2,