From cef50cec8ebb9ce68c29f8029ad9fbf8965c74ec Mon Sep 17 00:00:00 2001 From: Isky Date: Tue, 11 Jun 2024 23:43:36 +0800 Subject: [PATCH] Reorgainsed and cleaned code, Redid the comments --- .../Windows/UUS/State/_active.uusver | 1 + package-lock.json | 100 ++++++++- package.json | 3 +- screens/QRScannerScreen.tsx | 202 +++++++++++------- 4 files changed, 226 insertions(+), 80 deletions(-) create mode 100644 %ProgramData%/Microsoft/Windows/UUS/State/_active.uusver diff --git a/%ProgramData%/Microsoft/Windows/UUS/State/_active.uusver b/%ProgramData%/Microsoft/Windows/UUS/State/_active.uusver new file mode 100644 index 0000000..a430da7 --- /dev/null +++ b/%ProgramData%/Microsoft/Windows/UUS/State/_active.uusver @@ -0,0 +1 @@ +1217.2403.25012.1 \ No newline at end of file diff --git a/package-lock.json b/package-lock.json index 22ee487..e384865 100644 --- a/package-lock.json +++ b/package-lock.json @@ -8,6 +8,7 @@ "name": "safeqr", "version": "1.0.0", "dependencies": { + "@expo/metro-runtime": "~3.2.1", "@expo/vector-icons": "^14.0.2", "@react-navigation/bottom-tabs": "^6.5.20", "@react-navigation/native": "^6.1.17", @@ -16,10 +17,13 @@ "expo-camera": "~15.0.10", "expo-image-picker": "~15.0.5", "expo-status-bar": "~1.12.1", + "jsqr": "^1.4.0", "react": "18.2.0", + "react-dom": "18.2.0", "react-native": "0.74.2", "react-native-safe-area-context": "^4.10.4", - "react-native-screens": "^3.31.1" + "react-native-screens": "^3.31.1", + "react-native-web": "~0.19.10" }, "devDependencies": { "@babel/core": "^7.20.0", @@ -2891,6 +2895,14 @@ "node": ">= 10.0.0" } }, + "node_modules/@expo/metro-runtime": { + "version": "3.2.1", + "resolved": "https://registry.npmjs.org/@expo/metro-runtime/-/metro-runtime-3.2.1.tgz", + "integrity": "sha512-L7xNo5SmK+rcuXDm/+VBBImpA7FZsVB+m/rNr3fNl5or+1+yrZe99ViF7LZ8DOoVqAqcb4aCAXvGrP2JNYo1/Q==", + "peerDependencies": { + "react-native": "*" + } + }, "node_modules/@expo/osascript": { "version": "2.1.3", "resolved": "https://registry.npmjs.org/@expo/osascript/-/osascript-2.1.3.tgz", @@ -6834,6 +6846,14 @@ "node": ">=8" } }, + "node_modules/css-in-js-utils": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/css-in-js-utils/-/css-in-js-utils-3.1.0.tgz", + "integrity": "sha512-fJAcud6B3rRu+KHYk+Bwf+WFL2MDCJJ1XG9x137tJQ0xYxor7XziQtuGFbWNdqrvF4Tk26O3H73nfVqXt/fW1A==", + "dependencies": { + "hyphenate-style-name": "^1.0.3" + } + }, "node_modules/csstype": { "version": "3.1.3", "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz", @@ -7730,6 +7750,11 @@ "node": ">=8.6.0" } }, + "node_modules/fast-loops": { + "version": "1.1.3", + "resolved": "https://registry.npmjs.org/fast-loops/-/fast-loops-1.1.3.tgz", + "integrity": "sha512-8EZzEP0eKkEEVX+drtd9mtuQ+/QrlfW/5MlwcwK5Nds6EkZ/tRzEexkzUY2mIssnAyVLT+TKHuRXmFNNXYUd6g==" + }, "node_modules/fast-xml-parser": { "version": "4.4.0", "resolved": "https://registry.npmjs.org/fast-xml-parser/-/fast-xml-parser-4.4.0.tgz", @@ -8415,6 +8440,11 @@ "node": ">=10.17.0" } }, + "node_modules/hyphenate-style-name": { + "version": "1.0.5", + "resolved": "https://registry.npmjs.org/hyphenate-style-name/-/hyphenate-style-name-1.0.5.tgz", + "integrity": "sha512-fedL7PRwmeVkgyhu9hLeTBaI6wcGk7JGJswdaRsa5aUbkXI1kr1xZwTPBtaYPpwf56878iDek6VbVnuWMebJmw==" + }, "node_modules/ieee754": { "version": "1.2.1", "resolved": "https://registry.npmjs.org/ieee754/-/ieee754-1.2.1.tgz", @@ -8512,6 +8542,15 @@ "resolved": "https://registry.npmjs.org/ini/-/ini-1.3.8.tgz", "integrity": "sha512-JV/yugV2uzW5iMRSiZAyDtQd+nxtUnjeLt0acNdw98kKLrvuRVyB80tsREOE7yvGVgalhZ6RNXCmEHkUKBKxew==" }, + "node_modules/inline-style-prefixer": { + "version": "6.0.4", + "resolved": "https://registry.npmjs.org/inline-style-prefixer/-/inline-style-prefixer-6.0.4.tgz", + "integrity": "sha512-FwXmZC2zbeeS7NzGjJ6pAiqRhXR0ugUShSNb6GApMl6da0/XGc4MOJsoWAywia52EEWbXNSy0pzkwz/+Y+swSg==", + "dependencies": { + "css-in-js-utils": "^3.1.0", + "fast-loops": "^1.1.3" + } + }, "node_modules/internal-ip": { "version": "4.3.0", "resolved": "https://registry.npmjs.org/internal-ip/-/internal-ip-4.3.0.tgz", @@ -9560,6 +9599,11 @@ "graceful-fs": "^4.1.6" } }, + "node_modules/jsqr": { + "version": "1.4.0", + "resolved": "https://registry.npmjs.org/jsqr/-/jsqr-1.4.0.tgz", + "integrity": "sha512-dxLob7q65Xg2DvstYkRpkYtmKm2sPJ9oFhrhmudT1dZvNFFTlroai3AWSpLey/w5vMcLBXRgOJsbXpdN9HzU/A==" + }, "node_modules/kind-of": { "version": "6.0.3", "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-6.0.3.tgz", @@ -11452,6 +11496,11 @@ "node": "^10 || ^12 || >=14" } }, + "node_modules/postcss-value-parser": { + "version": "4.2.0", + "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz", + "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==" + }, "node_modules/pretty-bytes": { "version": "5.6.0", "resolved": "https://registry.npmjs.org/pretty-bytes/-/pretty-bytes-5.6.0.tgz", @@ -11757,6 +11806,26 @@ } } }, + "node_modules/react-dom": { + "version": "18.2.0", + "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.2.0.tgz", + "integrity": "sha512-6IMTriUmvsjHUjNtEDudZfuDQUoWXVxKHhlEGSk81n4YFS+r/Kl99wXiwlVXtPBtJenozv2P+hxDsw9eA7Xo6g==", + "dependencies": { + "loose-envify": "^1.1.0", + "scheduler": "^0.23.0" + }, + "peerDependencies": { + "react": "^18.2.0" + } + }, + "node_modules/react-dom/node_modules/scheduler": { + "version": "0.23.2", + "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.23.2.tgz", + "integrity": "sha512-UOShsPwz7NrMUqhR6t0hWjFduvOzbtv7toDH1/hIrfRNIDBnnBWd0CwJTGvTpngVlmwGCdP9/Zl/tVrDqcuYzQ==", + "dependencies": { + "loose-envify": "^1.1.0" + } + }, "node_modules/react-freeze": { "version": "1.0.4", "resolved": "https://registry.npmjs.org/react-freeze/-/react-freeze-1.0.4.tgz", @@ -11854,6 +11923,30 @@ "react-native": "*" } }, + "node_modules/react-native-web": { + "version": "0.19.12", + "resolved": "https://registry.npmjs.org/react-native-web/-/react-native-web-0.19.12.tgz", + "integrity": "sha512-o2T0oztoVDQjztt4YksO9S1XRjoH/AqcSvifgWLrPJgGVbMWsfhILgl6lfUdEamVZzZSVV/2gqDVMAk/qq7mZw==", + "dependencies": { + "@babel/runtime": "^7.18.6", + "@react-native/normalize-colors": "^0.74.1", + "fbjs": "^3.0.4", + "inline-style-prefixer": "^6.0.1", + "memoize-one": "^6.0.0", + "nullthrows": "^1.1.1", + "postcss-value-parser": "^4.2.0", + "styleq": "^0.1.3" + }, + "peerDependencies": { + "react": "^18.0.0", + "react-dom": "^18.0.0" + } + }, + "node_modules/react-native-web/node_modules/memoize-one": { + "version": "6.0.0", + "resolved": "https://registry.npmjs.org/memoize-one/-/memoize-one-6.0.0.tgz", + "integrity": "sha512-rkpe71W0N0c0Xz6QD0eJETuWAJGnJ9afsl1srmwPrI+yBCkge5EycXXbYRyvL29zZVUWQCY7InPRCv3GDXuZNw==" + }, "node_modules/react-native/node_modules/ansi-styles": { "version": "4.3.0", "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz", @@ -12883,6 +12976,11 @@ "resolved": "https://registry.npmjs.org/structured-headers/-/structured-headers-0.4.1.tgz", "integrity": "sha512-0MP/Cxx5SzeeZ10p/bZI0S6MpgD+yxAhi1BOQ34jgnMXsCq3j1t6tQnZu+KdlL7dvJTLT3g9xN8tl10TqgFMcg==" }, + "node_modules/styleq": { + "version": "0.1.3", + "resolved": "https://registry.npmjs.org/styleq/-/styleq-0.1.3.tgz", + "integrity": "sha512-3ZUifmCDCQanjeej1f6kyl/BeP/Vae5EYkQ9iJfUm/QwZvlgnZzyflqAsAWYURdtea8Vkvswu2GrC57h3qffcA==" + }, "node_modules/sucrase": { "version": "3.34.0", "resolved": "https://registry.npmjs.org/sucrase/-/sucrase-3.34.0.tgz", diff --git a/package.json b/package.json index 3bc3b8e..acad752 100644 --- a/package.json +++ b/package.json @@ -19,8 +19,7 @@ "expo-status-bar": "~1.12.1", "react": "18.2.0", "react-native": "0.74.2", - "react-native-safe-area-context": "^4.10.4", - "react-native-screens": "^3.31.1" + "react-native-safe-area-context": "^4.10.4" }, "devDependencies": { "@babel/core": "^7.20.0", diff --git a/screens/QRScannerScreen.tsx b/screens/QRScannerScreen.tsx index f915718..15ddfd1 100644 --- a/screens/QRScannerScreen.tsx +++ b/screens/QRScannerScreen.tsx @@ -2,23 +2,93 @@ import React, { useState, useEffect, useContext } from 'react'; import { View, Text, StyleSheet, ActivityIndicator, TouchableOpacity } from 'react-native'; import { Camera, CameraView } from 'expo-camera'; import { QRCodeContext } from '../types'; -import axios from 'axios'; -import { Ionicons } from '@expo/vector-icons'; +import axios from 'axios'; // For URL calls +import { Ionicons } from '@expo/vector-icons'; // For icons import { useNavigation } from '@react-navigation/native'; + + +//-----------------FUNCTIONS DECLARED HERE------------------// +// Function to determine the type of data +const determineDataType = (data: string): string => { + if (/^(http|https):\/\//.test(data)) { + return 'URL'; + } else if (/^[0-9]+$/.test(data)) { + return 'Number'; + } else if (/^mailto:/.test(data)) { + return 'Email'; + } else if (/^tel:/.test(data)) { + return 'Phone Number'; + } else if (/^smsto:/.test(data)) { + return 'SMS'; + } else { + return 'Text'; + } +}; + +// Function to handle VirusTotal scanning +const processWithVirusTotal = async (data: string) => { + const apiKey = 'YOUR_VIRUSTOTAL_API_KEY'; + const url = 'https://www.virustotal.com/vtapi/v2/url/scan'; + const params = { + apikey: apiKey, + url: data, + }; + + try { + const response = await axios.post(url, null, { params }); + return response.data.scan_id; + } catch (error) { + console.error('Error scanning with VirusTotal:', error); + throw error; + } +}; + +// Function to get VirusTotal scan results +const getVirusTotalResults = async (scanId: string) => { + const apiKey = 'YOUR_VIRUSTOTAL_API_KEY'; + const url = 'https://www.virustotal.com/vtapi/v2/url/report'; + const params = { + apikey: apiKey, + resource: scanId, + }; + + try { + const response = await axios.get(url, { params }); + return response.data.positives; + } catch (error) { + console.error('Error getting scan result:', error); + throw error; + } +}; + // Define the props for QRScannerScreen interface QRScannerScreenProps { clearScanData: () => void; } + +//-----------------Main------------------// const QRScannerScreen: React.FC = ({ clearScanData }) => { - const navigation = useNavigation(); - const qrCodeContext = useContext(QRCodeContext); + + const navigation = useNavigation(); // call Navigation bar + const [showSplash, setShowSplash] = useState(true); // call splash screen + + // These are for ..... + const qrCodeContext = useContext(QRCodeContext); // From ./tpes.ts + + // this function stores the scanned data for the history page const { qrCodes, setQrCodes } = qrCodeContext || { qrCodes: [], setQrCodes: () => {} }; + + // Camera permission and scan state const [hasPermission, setHasPermission] = useState(null); const [scanned, setScanned] = useState(false); - const [showSplash, setShowSplash] = useState(true); - const [scannedData, setScannedData] = useState(''); + + + const [scannedData, setScannedData] = useState(''); // State for QR scanned Data + const extractedData = scannedData.split('\n')[1]?.split('Data: ')[1] || ''; // Split + + const [scanResult, setScanResult] = useState(null); // State for VirusTotal scan result const [dataType, setDataType] = useState(''); // State for data type const [enableTorch, setEnableTorch] = useState(false); // State for torch @@ -33,32 +103,30 @@ const QRScannerScreen: React.FC = ({ clearScanData }) => { initializeApp(); }, []); - const handleQRCodeScanned = async ({ type, data }: { type: string; data: string }) => { - setScanned(true); - // Parse the URI to determine its type - let dataType; - if (/^(http|https):\/\//.test(data)) { - dataType = 'URL'; - } else if (/^[0-9]+$/.test(data)) { - dataType = 'Number'; - } else if (/^mailto:/.test(data)) { - dataType = 'Email'; - } else if (/^tel:/.test(data)) { - dataType = 'Phone Number'; - } else if (/^smsto:/.test(data)) { - dataType = 'SMS'; - } else { - dataType = 'Text'; - } - setDataType(dataType); // Set the data type in state + // If loading this screen , reset the scanning data + const clearScanDataInternal = () => { + setScannedData(''); + setScanResult(null); + setScanned(false); + setDataType(''); + }; + + + + // The function that takes data from { + setScanned(true); //Flag is QR code already scanned + + const dataType = determineDataType(data); + setDataType(dataType); let newScannedData = `Type: ${dataType}\nData: ${data}`; try { - const scanId = await scanWithVirusTotal(data); - const positive = await getScanResult(scanId); + const scanId = await processWithVirusTotal(data); + const positive = await getVirusTotalResults(scanId); newScannedData += `\nScore: ${positive}`; setScanResult({ positive, scanId }); } catch (error) { @@ -69,47 +137,9 @@ const QRScannerScreen: React.FC = ({ clearScanData }) => { setQrCodes([...qrCodes, newScannedData]); }; - const scanWithVirusTotal = async (data: any) => { - const apiKey = 'YOUR_VIRUSTOTAL_API_KEY'; - const url = 'https://www.virustotal.com/vtapi/v2/url/scan'; - const params = { - apikey: apiKey, - url: data, - }; - try { - const response = await axios.post(url, null, { params }); - return response.data.scan_id; - } catch (error) { - console.error('Error scanning with VirusTotal:', error); - throw error; - } - }; - - const getScanResult = async (scanId: string) => { - const apiKey = 'YOUR_VIRUSTOTAL_API_KEY'; - const url = 'https://www.virustotal.com/vtapi/v2/url/report'; - const params = { - apikey: apiKey, - resource: scanId, - }; - - try { - const response = await axios.get(url, { params }); - return response.data.positives; - } catch (error) { - console.error('Error getting scan result:', error); - throw error; - } - }; - - const clearScanDataInternal = () => { - setScannedData(''); - setScanResult(null); - setScanned(false); - setDataType(''); - }; + // If the focus is lost focus on this screen , when come reset the scan data useEffect(() => { const unsubscribe = navigation.addListener('focus', () => { clearScanDataInternal(); @@ -117,10 +147,15 @@ const QRScannerScreen: React.FC = ({ clearScanData }) => { return unsubscribe; }, [navigation]); + + // This function is for toggling torch const toggleTorch = () => { setEnableTorch((prev) => !prev); }; + + // For Splash, for some reason nedd to be near the end of the function... + // or else permission for camera is not asked if (showSplash) { return ( @@ -129,22 +164,31 @@ const QRScannerScreen: React.FC = ({ clearScanData }) => { ); } + // While asking for permision the page behind will render this only if (hasPermission === null) { return Requesting for camera permission; } + + // this will thrown on the screen and nothing else will load if no permission if (hasPermission === false) { return No access to camera; } - const extractedData = scannedData.split('\n')[1]?.split('Data: ')[1] || ''; + //---------------The UI part-----------------// return ( + + {/* Banner section */} - SafeQR v0.55 + + SafeQR v0.66 + {/* Welcome Text */} Welcome to SafeQR code Scanner + + {/* The cutour for the camera */} = ({ clearScanData }) => { style={styles.camera} enableTorch={enableTorch} /> + + {/* the torch icon inside the CameraView */} - - {enableTorch ? 'Turn Off' : 'Turn On'} Torch - + {enableTorch} + + {/* The CONTENT , the popup for the scanned data */} {scannedData !== '' && ( {extractedData} @@ -187,6 +233,10 @@ const QRScannerScreen: React.FC = ({ clearScanData }) => { ); }; + + + +//--------------------The CSS----------------// const styles = StyleSheet.create({ container: { flex: 1, @@ -222,15 +272,13 @@ const styles = StyleSheet.create({ flashButton: { position: 'absolute', bottom: 20, - alignSelf: 'center', + left: 100, // Adjust this value to move it more or less to the left + width: 50, + height: 50, + justifyContent: 'center', alignItems: 'center', backgroundColor: '#000', - padding: 10, - borderRadius: 5, - }, - flashText: { - color: '#fff', - marginTop: 5, + borderRadius: 25, // Half of width and height to make it a circle }, dataBox: { position: 'absolute',