Feat/swipe gesture (#410)

* feat: swipe-gesture

* fix: remove redundant code

* fix: format

* fix: lint

Author: grv-saini-20

infrastructure/eid-wallet/src-tauri/Cargo.lock

@@ -31,6 +31,7 @@ uuid = { version = "1.0", features = ["v4"] }
 argon2 = { version = "0.5.3" }
 rand_core = { version = "0.6", features = ["std"] }
 thiserror = { version = "2.0.11" }
+tauri-plugin-process = "2"
 
 [target.'cfg(any(target_os = "android", target_os = "ios"))'.dependencies]
 tauri-plugin-barcode-scanner = "2"

infrastructure/eid-wallet/src-tauri/Cargo.toml

@@ -13,7 +13,8 @@
     "barcode-scanner:default",
     "deep-link:default",
     "crypto-hw:default",
-    "notification:default"
+    "notification:default",
+    "process:default"
   ],
   "platforms": [
     "iOS",

infrastructure/eid-wallet/src-tauri/capabilities/mobile.json

@@ -1,8 +1,8 @@
 mod errors;
 mod funcs;
 
-use uuid::Uuid;
 use std::env;
+use uuid::Uuid;
 
 // Learn more about Tauri commands at https://tauri.app/develop/calling-rust/
 // #[tauri::command]
@@ -52,26 +52,33 @@ async fn get_device_id() -> Result<String, String> {
 async fn get_platform() -> Result<String, String> {
     #[cfg(target_os = "android")]
     return Ok("android".to_string());
-    
+
     #[cfg(target_os = "ios")]
     return Ok("ios".to_string());
-    
+
     #[cfg(target_os = "windows")]
     return Ok("windows".to_string());
-    
+
     #[cfg(target_os = "macos")]
     return Ok("macos".to_string());
-    
+
     #[cfg(target_os = "linux")]
     return Ok("linux".to_string());
-    
-    #[cfg(not(any(target_os = "android", target_os = "ios", target_os = "windows", target_os = "macos", target_os = "linux")))]
+
+    #[cfg(not(any(
+        target_os = "android",
+        target_os = "ios",
+        target_os = "windows",
+        target_os = "macos",
+        target_os = "linux"
+    )))]
     return Ok("unknown".to_string());
 }
 
 #[cfg_attr(mobile, tauri::mobile_entry_point)]
 pub fn run() {
     tauri::Builder::default()
+        .plugin(tauri_plugin_process::init())
         .plugin(tauri_plugin_opener::init())
         .plugin(tauri_plugin_store::Builder::new().build())
         .plugin(tauri_plugin_deep_link::init())
@@ -86,7 +93,12 @@ pub fn run() {
             Ok(())
         })
         // Register the commands with Tauri.
-        .invoke_handler(tauri::generate_handler![hash, verify, get_device_id, get_platform])
+        .invoke_handler(tauri::generate_handler![
+            hash,
+            verify,
+            get_device_id,
+            get_platform
+        ])
         .run(tauri::generate_context!())
         .expect("error while running tauri application");
 }

infrastructure/eid-wallet/src-tauri/src/lib.rs

@@ -1,3 +1,4 @@
 export * from "./mergeClasses";
 export * from "./clickOutside";
 export * from "./capitalize";
+export * from "./swipeGesture";

infrastructure/eid-wallet/src/lib/utils/index.ts

@@ -0,0 +1,47 @@
+// utils/swipedetect.ts
+export const swipedetect = (
+    el: HTMLElement,
+    callback: (dir: string) => void,
+) => {
+    let startX = 0;
+    let startY = 0;
+    let distX = 0;
+    let distY = 0;
+
+    const threshold = 100; // min distance for swipe
+    const restraint = 100; // max perpendicular distance
+    const allowedTime = 400; // ms
+
+    let startTime = 0;
+
+    el.addEventListener(
+        "touchstart",
+        (e: TouchEvent) => {
+            const touchobj = e.changedTouches[0];
+            startX = touchobj.pageX;
+            startY = touchobj.pageY;
+            startTime = new Date().getTime();
+        },
+        false,
+    );
+
+    el.addEventListener(
+        "touchend",
+        (e: TouchEvent) => {
+            const touchobj = e.changedTouches[0];
+            distX = touchobj.pageX - startX;
+            distY = touchobj.pageY - startY;
+            const elapsedTime = new Date().getTime() - startTime;
+
+            if (
+                elapsedTime <= allowedTime &&
+                Math.abs(distX) >= threshold &&
+                Math.abs(distY) <= restraint
+            ) {
+                const dir = distX < 0 ? "right" : "left";
+                callback(dir);
+            }
+        },
+        false,
+    );
+};

infrastructure/eid-wallet/src/lib/utils/swipeGesture.ts

@@ -6,6 +6,7 @@ import { goto, onNavigate } from "$app/navigation";
 import { GlobalState } from "$lib/global/state";
 
 import { runtime } from "$lib/global/runtime.svelte";
+import { swipedetect } from "$lib/utils";
 import { type Status, checkStatus } from "@tauri-apps/plugin-biometric";
 
 const { children } = $props();
@@ -16,6 +17,7 @@ let showSplashScreen = $state(false);
 let previousRoute = null;
 let navigationStack: string[] = [];
 let globalDeepLinkHandler: ((event: Event) => void) | undefined;
+let mainWrapper: HTMLElement | undefined = $state(undefined);
 
 setContext("globalState", () => globalState);
 
@@ -420,6 +422,14 @@ onNavigate((navigation) => {
         });
     });
 });
+
+$effect(() => {
+    if (mainWrapper) {
+        swipedetect(mainWrapper, (dir: string) => {
+            if (dir === "right") window.history.back();
+        });
+    }
+});
 </script>
 
 {#if showSplashScreen}
@@ -428,7 +438,10 @@ onNavigate((navigation) => {
     <div
         class="fixed top-0 left-0 right-0 h-[env(safe-area-inset-top)] bg-primary z-50"
     ></div>
-    <div class="bg-white h-screen overflow-scroll pt-10">
+    <div
+        bind:this={mainWrapper}
+        class="bg-white h-screen overflow-scroll pt-10"
+    >
         {#if children}
             {@render children()}
         {/if}