fix: some bugs and QoL changes to wasm_module demo

wasm_module/.gitignore

@@ -24,4 +24,5 @@ package-lock.json
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
-.idea
+.idea
+.nvmrc

wasm_module/.prettierignore

@@ -0,0 +1,4 @@
+build
+coverage
+dist
+public

wasm_module/.prettierrc

@@ -1,3 +1,5 @@
 {
-  "printWidth": 120
+  "printWidth": 120,
+  "semi": false,
+  "arrowParens": "avoid"
 }

wasm_module/package.json

@@ -28,7 +28,8 @@
     "prebuild": "cp -R ./node_modules/@privateid/cryptonets-web-sdk-alpha/wasm public/ && cp -R ./node_modules/@privateid/cryptonets-web-sdk-alpha/workers public/",
     "build": "react-scripts build",
     "test": "react-scripts test",
-    "eject": "react-scripts eject"
+    "eject": "react-scripts eject",
+    "prettier": "prettier --write \"src/**/*.{js,jsx,json,css,scss}\""
   },
   "eslintConfig": {
     "extends": [
@@ -47,5 +48,8 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "devDependencies": {
+    "prettier": "^3.5.3"
   }
-}
+}

wasm_module/src/context/DebugContext.jsx

@@ -1,33 +1,26 @@
 import React, { createContext, useMemo, useState } from "react"
 
-
 export const DebugContext = createContext({
-    functionLoop: true,
-    setFuctionLoop: (functionLoop)=>{},
-    showDebugOptions: false, 
-    setShowDebugOptions: (showDebugOptions)=>{}
+  functionLoop: true,
+  setFuctionLoop: functionLoop => {},
+  showDebugOptions: false,
+  setShowDebugOptions: showDebugOptions => {},
 })
 
+const DebugContextProvider = ({ children }) => {
+  const [functionLoop, setFuctionLoop] = useState(true)
+  const [showDebugOptions, setShowDebugOptions] = useState(false)
 
-const DebugContextProvider = ({children})=>{
-
-    const [functionLoop, setFuctionLoop] = useState(true);
-    const [showDebugOptions, setShowDebugOptions] = useState(false);
-
-    const values = {
-        functionLoop,
-        setFuctionLoop,
-        showDebugOptions, 
-        setShowDebugOptions
-    }
+  const values = {
+    functionLoop,
+    setFuctionLoop,
+    showDebugOptions,
+    setShowDebugOptions,
+  }
 
-    const memoizedValue = useMemo(()=>values,[values])
+  const memoizedValue = useMemo(() => values, [values])
 
-    return(
-        <DebugContext.Provider value={memoizedValue}>
-            {children}
-        </DebugContext.Provider>
-    )
+  return <DebugContext.Provider value={memoizedValue}>{children}</DebugContext.Provider>
 }
 
-export default DebugContextProvider;
+export default DebugContextProvider

wasm_module/src/hooks/index.js

@@ -1,11 +1,11 @@
-export { default as useCamera } from "./useCamera";
-export { default as useContinuousPredict } from "./useContinuousAuthentication";
-export { default as useDelete } from "./useDelete";
-export { default as useEnroll } from "./useEnroll";
-export { default as useIsValid } from "./useIsValid";
-export { default as usePredict } from "./usePredict";
-export { default as useScanBackDocument } from "./useScanBackDocument";
-export { default as useScanFrontDocument } from "./useScanFrontDocument";
-export { default as useWasm } from "./useWasm";
-export { default as usePredictAge } from "./usePredictAge";
-export { default as useScanFrontDocumentWithoutPredict } from "./useScanFrontDocument";
+export { default as useCamera } from "./useCamera"
+export { default as useContinuousPredict } from "./useContinuousAuthentication"
+export { default as useDelete } from "./useDelete"
+export { default as useEnroll } from "./useEnroll"
+export { default as useIsValid } from "./useIsValid"
+export { default as usePredict } from "./usePredict"
+export { default as useScanBackDocument } from "./useScanBackDocument"
+export { default as useScanFrontDocument } from "./useScanFrontDocument"
+export { default as useWasm } from "./useWasm"
+export { default as usePredictAge } from "./usePredictAge"
+export { default as useScanFrontDocumentWithoutPredict } from "./useScanFrontDocument"

wasm_module/src/hooks/useCamera.js

@@ -1,8 +1,8 @@
 /* eslint-disable */
-import { useState } from "react";
-import { openCamera } from "@privateid/cryptonets-web-sdk-alpha";
-import { mapDevices } from "../utils";
-import platform, { os } from "platform";
+import { useState } from "react"
+import { openCamera } from "@privateid/cryptonets-web-sdk-alpha"
+import { mapDevices } from "../utils"
+import platform, { os } from "platform"
 
 const useCamera = (
   element = "userVideo",
@@ -28,28 +28,27 @@ const useCamera = (
   setCameraSettingsList,
 ) => {
   // Initialize the state
-  const [ready, setReady] = useState(false);
-  const [devices, setDevices] = useState([]);
-  const [device, setDevice] = useState("");
-  const [faceMode, setFaceMode] = useState(false);
-  const [cameraFeatures, setCameraFeatures] = useState({});
-
+  const [ready, setReady] = useState(false)
+  const [devices, setDevices] = useState([])
+  const [device, setDevice] = useState("")
+  const [faceMode, setFaceMode] = useState(false)
+  const [cameraFeatures, setCameraFeatures] = useState({})
 
   const isSurfaceProWindows = () => {
-    if(navigator.platform === "windows"){
-      return true;
+    if (navigator.platform === "windows") {
+      return true
     }
 
-    if(navigator.oscpu === "win32"){
+    if (navigator.oscpu === "win32") {
       return true
     }
   }
 
   const init = async (requireHd = false) => {
-    if (ready) return;
+    if (ready) return
 
-    console.log("Platform: ", navigator.platform);
-    console.log("OS CPU: ", navigator.oscpu);
+    console.log("Platform: ", navigator.platform)
+    console.log("OS CPU: ", navigator.oscpu)
     console.log("User Agent: ", navigator.userAgent)
     try {
       const {
@@ -60,48 +59,52 @@ const useCamera = (
         stream,
         errorMessage,
         capabilities,
-      } = await openCamera({ videoElementId: element, requestFaceMode: isSurfaceProWindows()? "front" : "", canvasResolution:{
-        width:1440,
-        height:1440
-      } } );
-      setCameraFeatures({ settings, capabilities });
-      setFaceMode(faceMode);
-      console.log({ devices, faceMode, settings, status, stream, errorMessage, capabilities });
-      console.log("hasError??", { status, errorMessage });
+      } = await openCamera({
+        videoElementId: element,
+        requestFaceMode: isSurfaceProWindows() ? "front" : "",
+        canvasResolution: {
+          width: 1440,
+          height: 1440,
+        },
+      })
+      setCameraFeatures({ settings, capabilities })
+      setFaceMode(faceMode)
+      console.log({ devices, faceMode, settings, status, stream, errorMessage, capabilities })
+      console.log("hasError??", { status, errorMessage })
       if (devices.length > 0) {
-        const options = devices.map(mapDevices);
-        setDevices(options);
-        setDevice(settings.deviceId);
+        const options = devices.map(mapDevices)
+        setDevices(options)
+        setDevice(settings.deviceId)
       }
-      setReady(true);
-      console.log(platform.os.family);
-        const setCameraFocus = async () => {
-          try {
-            const video = document.getElementById("userVideo");
-            const mediaStream = video.srcObject;
-            const track = await mediaStream.getTracks()[0];
-            const capabilities = track.getCapabilities();
-            if (typeof capabilities.focusDistance !== "undefined") {
-              await track.applyConstraints({
-                advanced: [
-                  {
-                    focusMode: capabilities.focusMode.includes("continuous") ? "continuous" : "manual",
-                    focusDistance: 50,
-                  },
-                ],
-              });
-            }
-          } catch (e) {
-            // eslint-disable-next-line no-console
-            console.log(e);
+      setReady(true)
+      console.log(platform.os.family)
+      const setCameraFocus = async () => {
+        try {
+          const video = document.getElementById("userVideo")
+          const mediaStream = video.srcObject
+          const track = await mediaStream.getTracks()[0]
+          const capabilities = track.getCapabilities()
+          if (typeof capabilities.focusDistance !== "undefined") {
+            await track.applyConstraints({
+              advanced: [
+                {
+                  focusMode: capabilities.focusMode.includes("continuous") ? "continuous" : "manual",
+                  focusDistance: 50,
+                },
+              ],
+            })
           }
-        };
-        await setCameraFocus();
+        } catch (e) {
+          // eslint-disable-next-line no-console
+          console.log(e)
+        }
+      }
+      await setCameraFocus()
       //}
-      console.log("capabilities:", capabilities);
-      console.log("settings", settings);
+      console.log("capabilities:", capabilities)
+      console.log("settings", settings)
       if (capabilities) {
-        let cameraSettings ={
+        let cameraSettings = {
           focusDistance: false,
           exposureTime: false,
           sharpness: false,
@@ -110,49 +113,49 @@ const useCamera = (
           contrast: false,
         }
         if (capabilities.focusDistance) {
-          setCameraFocusMin(capabilities.focusDistance.min);
-          setCameraFocusMax(capabilities.focusDistance.max);
-          setCameraFocusCurrent(settings.focusDistance);
-          cameraSettings = {...settings, focusDistance: true};
+          setCameraFocusMin(capabilities.focusDistance.min)
+          setCameraFocusMax(capabilities.focusDistance.max)
+          setCameraFocusCurrent(settings.focusDistance)
+          cameraSettings = { ...settings, focusDistance: true }
         }
         if (capabilities.exposureTime) {
-          setCameraExposureTimeMin(Math.ceil(capabilities.exposureTime.min));
-          setCameraExposureTimeMax(Math.ceil(capabilities.exposureTime.max));
-          setCameraExposureTimeCurrent(Math.ceil(settings.exposureTime));
-          cameraSettings = {...settings, exposureTime: true};
+          setCameraExposureTimeMin(Math.ceil(capabilities.exposureTime.min))
+          setCameraExposureTimeMax(Math.ceil(capabilities.exposureTime.max))
+          setCameraExposureTimeCurrent(Math.ceil(settings.exposureTime))
+          cameraSettings = { ...settings, exposureTime: true }
         }
-        if (capabilities.sharpness){
-          setCameraSharpnessMin(Math.ceil(capabilities.sharpness.min));
-          setCameraSharpnessMax(Math.ceil(capabilities.sharpness.max));
-          setCameraSharpnessCurrent(Math.ceil(settings.sharpness));
-          cameraSettings = {...settings, sharpness: true};
+        if (capabilities.sharpness) {
+          setCameraSharpnessMin(Math.ceil(capabilities.sharpness.min))
+          setCameraSharpnessMax(Math.ceil(capabilities.sharpness.max))
+          setCameraSharpnessCurrent(Math.ceil(settings.sharpness))
+          cameraSettings = { ...settings, sharpness: true }
         }
-        if (capabilities.brightness){
-          setCameraBrightnessMin(Math.ceil(capabilities.brightness.min));
-          setCameraBrightnessMax(Math.ceil(capabilities.brightness.max));
-          setCameraBrightnessCurrent(Math.ceil(settings.brightness));
-          cameraSettings = {...settings, brightness: true};
+        if (capabilities.brightness) {
+          setCameraBrightnessMin(Math.ceil(capabilities.brightness.min))
+          setCameraBrightnessMax(Math.ceil(capabilities.brightness.max))
+          setCameraBrightnessCurrent(Math.ceil(settings.brightness))
+          cameraSettings = { ...settings, brightness: true }
         }
-        if (capabilities.saturation){
-          setCameraSaturationMin(Math.ceil(capabilities.saturation.min));
-          setCameraSaturationMax(Math.ceil(capabilities.saturation.max));
-          setCameraSaturationCurrent(Math.ceil(settings.saturation));
-          cameraSettings = {...settings, saturation: true};
+        if (capabilities.saturation) {
+          setCameraSaturationMin(Math.ceil(capabilities.saturation.min))
+          setCameraSaturationMax(Math.ceil(capabilities.saturation.max))
+          setCameraSaturationCurrent(Math.ceil(settings.saturation))
+          cameraSettings = { ...settings, saturation: true }
         }
-        if (capabilities.contrast){
-          setCameraContrastMin(Math.ceil(capabilities.contrast.min));
-          setCameraContrastMax(Math.ceil(capabilities.contrast.max));
-          setCameraContrastCurrent(Math.ceil(settings.contrast));
-          cameraSettings = {...settings, contrast: true};
+        if (capabilities.contrast) {
+          setCameraContrastMin(Math.ceil(capabilities.contrast.min))
+          setCameraContrastMax(Math.ceil(capabilities.contrast.max))
+          setCameraContrastCurrent(Math.ceil(settings.contrast))
+          cameraSettings = { ...settings, contrast: true }
         }
-        setCameraSettingsList(cameraSettings);
+        setCameraSettingsList(cameraSettings)
       }
     } catch (e) {
-      console.log("Error Message", e);
+      console.log("Error Message", e)
     }
-  };
+  }
 
-  return { ready, init, devices, device, setDevice, faceMode, ...cameraFeatures, setReady };
-};
+  return { ready, init, devices, device, setDevice, faceMode, ...cameraFeatures, setReady }
+}
 
-export default useCamera;
+export default useCamera

wasm_module/src/hooks/useContinuousAuthentication.js

@@ -52,7 +52,7 @@
 //               result.returnValue.PI.uuid,
 //               result.returnValue.PI.guid
 //             );
-            
+
 //           } else {
 //             const { message }  = result.returnValue;
 //             setContinuousPredictMessage(message);