From 93a3f83dbd0dbefa7e14585f767bec0b4c560a50 Mon Sep 17 00:00:00 2001
From: gourav <gourav@auvo.io>
Date: Mon, 17 Nov 2025 12:52:05 +0530
Subject: [PATCH 1/5] fix: ui-bugs-eidwallet

---
 .../src/routes/(auth)/onboarding/+page.svelte | 580 +++++++++---------
 1 file changed, 296 insertions(+), 284 deletions(-)

diff --git a/infrastructure/eid-wallet/src/routes/(auth)/onboarding/+page.svelte b/infrastructure/eid-wallet/src/routes/(auth)/onboarding/+page.svelte
index cbbb7e2a..0aadb288 100644
--- a/infrastructure/eid-wallet/src/routes/(auth)/onboarding/+page.svelte
+++ b/infrastructure/eid-wallet/src/routes/(auth)/onboarding/+page.svelte
@@ -1,265 +1,276 @@
 <script lang="ts">
-import { goto } from "$app/navigation";
-import {
-    PUBLIC_PROVISIONER_URL,
-    PUBLIC_REGISTRY_URL,
-} from "$env/static/public";
-import type { KeyManager } from "$lib/crypto";
-import { Hero } from "$lib/fragments";
-import { GlobalState } from "$lib/global";
-import type { KeyServiceContext } from "$lib/global";
-import { ButtonAction, Drawer } from "$lib/ui";
-import { capitalize } from "$lib/utils";
-import * as falso from "@ngneat/falso";
-import axios from "axios";
-import { getContext, onMount } from "svelte";
-import { Shadow } from "svelte-loading-spinners";
-import { v4 as uuidv4 } from "uuid";
+    import { goto } from "$app/navigation";
+    import {
+        PUBLIC_PROVISIONER_URL,
+        PUBLIC_REGISTRY_URL,
+    } from "$env/static/public";
+    import type { KeyManager } from "$lib/crypto";
+    import { Hero } from "$lib/fragments";
+    import { GlobalState } from "$lib/global";
+    import type { KeyServiceContext } from "$lib/global";
+    import { ButtonAction, Drawer } from "$lib/ui";
+    import { capitalize } from "$lib/utils";
+    import * as falso from "@ngneat/falso";
+    import axios from "axios";
+    import { getContext, onMount } from "svelte";
+    import { Shadow } from "svelte-loading-spinners";
+    import { v4 as uuidv4 } from "uuid";
 
-let isPaneOpen = $state(false);
-let preVerified = $state(false);
-let loading = $state(false);
-let verificationId = $state("");
-let demoName = $state("");
-let verificationSuccess = $state(false);
-let keyManager: KeyManager | null = $state(null);
-let showHardwareError = $state(false);
-let checkingHardware = $state(false);
-const KEY_ID = "default";
+    let isPaneOpen = $state(false);
+    let preVerified = $state(false);
+    let loading = $state(false);
+    let verificationId = $state("");
+    let demoName = $state("");
+    let verificationSuccess = $state(false);
+    let keyManager: KeyManager | null = $state(null);
+    let showHardwareError = $state(false);
+    let checkingHardware = $state(false);
+    const KEY_ID = "default";
 
-const handleGetStarted = async () => {
-    isPaneOpen = true;
-    preVerified = false;
-    checkingHardware = true;
-    showHardwareError = false;
-    error = null;
-
-    try {
-        if (!globalState) {
-            globalState = getContext<() => GlobalState>("globalState")();
-        }
-
-        // Actually try to generate a test hardware key
-        const testKeyId = `hardware-test-${Date.now()}`;
-        console.log(
-            "Testing hardware key generation with test key:",
-            testKeyId,
-        );
+    const handleGetStarted = async () => {
+        isPaneOpen = true;
+        preVerified = false;
+        checkingHardware = true;
+        showHardwareError = false;
+        error = null;
 
         try {
-            const { manager, created } = await globalState.keyService.ensureKey(
-                testKeyId,
-                "onboarding",
-            );
+            if (!globalState) {
+                globalState = getContext<() => GlobalState>("globalState")();
+            }
+
+            // Actually try to generate a test hardware key
+            const testKeyId = `hardware-test-${Date.now()}`;
             console.log(
-                "Test key result - Manager type:",
-                manager.getType(),
-                "Created:",
-                created,
+                "Testing hardware key generation with test key:",
+                testKeyId,
             );
 
-            // Check if we got hardware manager and it actually created a key
-            if (manager.getType() !== "hardware") {
-                throw new Error("Got software fallback instead of hardware");
-            }
+            try {
+                const { manager, created } =
+                    await globalState.keyService.ensureKey(
+                        testKeyId,
+                        "onboarding",
+                    );
+                console.log(
+                    "Test key result - Manager type:",
+                    manager.getType(),
+                    "Created:",
+                    created,
+                );
 
-            // Hardware works! Clean up test key and proceed
-            console.log("Hardware keys are working");
-            checkingHardware = false;
-        } catch (keyError) {
-            console.error("Hardware key test failed:", keyError);
+                // Check if we got hardware manager and it actually created a key
+                if (manager.getType() !== "hardware") {
+                    throw new Error(
+                        "Got software fallback instead of hardware",
+                    );
+                }
+
+                // Hardware works! Clean up test key and proceed
+                console.log("Hardware keys are working");
+                checkingHardware = false;
+            } catch (keyError) {
+                console.error("Hardware key test failed:", keyError);
+                showHardwareError = true;
+                checkingHardware = false;
+            }
+        } catch (err) {
+            console.error("Error checking hardware:", err);
             showHardwareError = true;
             checkingHardware = false;
         }
-    } catch (err) {
-        console.error("Error checking hardware:", err);
-        showHardwareError = true;
-        checkingHardware = false;
-    }
-};
-
-const handlePreVerified = () => {
-    isPaneOpen = true;
-    preVerified = true;
-};
+    };
 
-function generatePassportNumber() {
-    const letters = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
-    const randomLetters = () =>
-        letters.charAt(Math.floor(Math.random() * letters.length)) +
-        letters.charAt(Math.floor(Math.random() * letters.length));
-    const randomDigits = () =>
-        String(Math.floor(1000000 + Math.random() * 9000000)); // 7 digits
+    const handlePreVerified = () => {
+        isPaneOpen = true;
+        preVerified = true;
+    };
 
-    return randomLetters() + randomDigits();
-}
+    function generatePassportNumber() {
+        const letters = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
+        const randomLetters = () =>
+            letters.charAt(Math.floor(Math.random() * letters.length)) +
+            letters.charAt(Math.floor(Math.random() * letters.length));
+        const randomDigits = () =>
+            String(Math.floor(1000000 + Math.random() * 9000000)); // 7 digits
 
-function getKeyContext(): KeyServiceContext {
-    return preVerified ? "pre-verification" : "onboarding";
-}
+        return randomLetters() + randomDigits();
+    }
 
-async function initializeKeyManager() {
-    try {
-        if (!globalState) throw new Error("Global state is not defined");
-        const context = getKeyContext();
-        keyManager = await globalState.keyService.getManager(KEY_ID, context);
-        console.log(`Key manager initialized: ${keyManager.getType()}`);
-        return keyManager;
-    } catch (error) {
-        console.error("Failed to initialize key manager:", error);
-        throw error;
+    function getKeyContext(): KeyServiceContext {
+        return preVerified ? "pre-verification" : "onboarding";
     }
-}
 
-async function ensureKeyForContext() {
-    try {
-        if (!globalState) throw new Error("Global state is not defined");
-        const context = getKeyContext();
-        const { manager, created } = await globalState.keyService.ensureKey(
-            KEY_ID,
-            context,
-        );
-        keyManager = manager;
-        console.log(
-            "Key generation result:",
-            created ? "key-generated" : "key-exists",
-        );
-        return { manager, created };
-    } catch (error) {
-        console.error("Failed to ensure key:", error);
-        throw error;
+    async function initializeKeyManager() {
+        try {
+            if (!globalState) throw new Error("Global state is not defined");
+            const context = getKeyContext();
+            keyManager = await globalState.keyService.getManager(
+                KEY_ID,
+                context,
+            );
+            console.log(`Key manager initialized: ${keyManager.getType()}`);
+            return keyManager;
+        } catch (error) {
+            console.error("Failed to initialize key manager:", error);
+            throw error;
+        }
     }
-}
 
-async function getApplicationPublicKey() {
-    try {
-        if (!globalState) throw new Error("Global state is not defined");
-        if (!keyManager) {
-            await initializeKeyManager();
+    async function ensureKeyForContext() {
+        try {
+            if (!globalState) throw new Error("Global state is not defined");
+            const context = getKeyContext();
+            const { manager, created } = await globalState.keyService.ensureKey(
+                KEY_ID,
+                context,
+            );
+            keyManager = manager;
+            console.log(
+                "Key generation result:",
+                created ? "key-generated" : "key-exists",
+            );
+            return { manager, created };
+        } catch (error) {
+            console.error("Failed to ensure key:", error);
+            throw error;
         }
-        const context = getKeyContext();
-        const publicKey = await globalState.keyService.getPublicKey(
-            KEY_ID,
-            context,
-        );
-        console.log("Public key retrieved:", publicKey);
-        return publicKey;
-    } catch (error) {
-        console.error("Public key retrieval failed:", error);
-        throw error;
     }
-}
 
-const handleNext = async () => {
-    // Initialize keys for onboarding context before going to verify
-    try {
-        loading = true;
-        if (!globalState) {
-            globalState = getContext<() => GlobalState>("globalState")();
+    async function getApplicationPublicKey() {
+        try {
+            if (!globalState) throw new Error("Global state is not defined");
+            if (!keyManager) {
+                await initializeKeyManager();
+            }
+            const context = getKeyContext();
+            const publicKey = await globalState.keyService.getPublicKey(
+                KEY_ID,
+                context,
+            );
+            console.log("Public key retrieved:", publicKey);
+            return publicKey;
+        } catch (error) {
+            console.error("Public key retrieval failed:", error);
+            throw error;
         }
-        await initializeKeyManager();
-        await ensureKeyForContext();
-        loading = false;
-        goto("/verify");
-    } catch (err) {
-        console.error("Failed to initialize keys for onboarding:", err);
-        error = "Failed to initialize security keys. Please try again.";
-        loading = false;
-        setTimeout(() => {
-            error = null;
-        }, 5000);
     }
-};
 
-let globalState: GlobalState;
-let handleContinue: () => Promise<void> | void = $state(() => {});
-let handleFinalSubmit: () => Promise<void> | void = $state(() => {});
-let ename: string;
-let uri: string;
+    const handleNext = async () => {
+        // Initialize keys for onboarding context before going to verify
+        try {
+            loading = true;
+            if (!globalState) {
+                globalState = getContext<() => GlobalState>("globalState")();
+            }
+            await initializeKeyManager();
+            await ensureKeyForContext();
+            loading = false;
+            goto("/verify");
+        } catch (err) {
+            console.error("Failed to initialize keys for onboarding:", err);
+            error = "Failed to initialize security keys. Please try again.";
+            loading = false;
+            setTimeout(() => {
+                error = null;
+            }, 5000);
+        }
+    };
+
+    let globalState: GlobalState;
+    let handleContinue: () => Promise<void> | void = $state(() => {});
+    let handleFinalSubmit: () => Promise<void> | void = $state(() => {});
+    let ename: string;
+    let uri: string;
 
-let error: string | null = $state(null);
+    let error: string | null = $state(null);
 
-onMount(async () => {
-    globalState = getContext<() => GlobalState>("globalState")();
-    // handle verification logic + sec user data in the store
+    onMount(async () => {
+        globalState = getContext<() => GlobalState>("globalState")();
+        // handle verification logic + sec user data in the store
 
-    // Don't initialize key manager here - wait until user chooses their path
+        // Don't initialize key manager here - wait until user chooses their path
 
-    handleContinue = async () => {
-        loading = true;
-        error = null;
+        handleContinue = async () => {
+            loading = true;
+            error = null;
+
+            // Initialize key manager for pre-verification context
+            await initializeKeyManager();
+            await ensureKeyForContext();
 
-        // Initialize key manager for pre-verification context
-        await initializeKeyManager();
-        await ensureKeyForContext();
+            const {
+                data: { token: registryEntropy },
+            } = await axios.get(
+                new URL("/entropy", PUBLIC_REGISTRY_URL).toString(),
+            );
 
-        const {
-            data: { token: registryEntropy },
-        } = await axios.get(
-            new URL("/entropy", PUBLIC_REGISTRY_URL).toString(),
-        );
+            const { data } = await axios
+                .post(
+                    new URL("/provision", PUBLIC_PROVISIONER_URL).toString(),
+                    {
+                        registryEntropy,
+                        namespace: uuidv4(),
+                        verificationId,
+                        publicKey: await getApplicationPublicKey(),
+                    },
+                )
+                .catch(() => {
+                    loading = false;
+                    console.log("caught");
+                    preVerified = false;
+                    verificationId = "";
+                    error = "Wrong pre-verification code";
+                    setTimeout(() => {
+                        error = null;
+                    }, 6_000);
+                    return { data: null };
+                });
+            if (!data) return;
 
-        const { data } = await axios
-            .post(new URL("/provision", PUBLIC_PROVISIONER_URL).toString(), {
-                registryEntropy,
-                namespace: uuidv4(),
-                verificationId,
-                publicKey: await getApplicationPublicKey(),
-            })
-            .catch(() => {
+            // If verification is successful, show demo name input
+            if (data.success === true) {
                 loading = false;
-                console.log("caught");
-                preVerified = false;
-                verificationId = "";
-                error = "Wrong pre-verification code";
-                setTimeout(() => {
-                    error = null;
-                }, 6_000);
-                return { data: null };
-            });
-        if (!data) return;
+                verificationSuccess = true;
+                uri = data.uri;
+                ename = data.w3id;
+            }
+        };
 
-        // If verification is successful, show demo name input
-        if (data.success === true) {
-            loading = false;
-            verificationSuccess = true;
-            uri = data.uri;
-            ename = data.w3id;
-        }
-    };
+        // New function to handle final submission with demo name
+        handleFinalSubmit = async () => {
+            loading = true;
 
-    // New function to handle final submission with demo name
-    handleFinalSubmit = async () => {
-        loading = true;
+            const tenYearsLater = new Date();
+            tenYearsLater.setFullYear(tenYearsLater.getFullYear() + 10);
+            globalState.userController.user = {
+                name:
+                    demoName ||
+                    capitalize(
+                        `${falso.randFirstName()} ${falso.randLastName()}`,
+                    ),
+                "Date of Birth": new Date().toDateString(),
+                "ID submitted": `Passport - ${falso.randCountryCode()}`,
+                "Passport Number": generatePassportNumber(),
+            };
+            globalState.userController.isFake = true;
+            globalState.userController.document = {
+                "Valid From": new Date(Date.now()).toDateString(),
+                "Valid Until": tenYearsLater.toDateString(),
+                "Verified On": new Date().toDateString(),
+            };
 
-        const tenYearsLater = new Date();
-        tenYearsLater.setFullYear(tenYearsLater.getFullYear() + 10);
-        globalState.userController.user = {
-            name:
-                demoName ||
-                capitalize(`${falso.randFirstName()} ${falso.randLastName()}`),
-            "Date of Birth": new Date().toDateString(),
-            "ID submitted": `Passport - ${falso.randCountryCode()}`,
-            "Passport Number": generatePassportNumber(),
-        };
-        globalState.userController.isFake = true;
-        globalState.userController.document = {
-            "Valid From": new Date(Date.now()).toDateString(),
-            "Valid Until": tenYearsLater.toDateString(),
-            "Verified On": new Date().toDateString(),
-        };
+            // Set vault in controller - this will trigger profile creation with retry logic
+            globalState.vaultController.vault = {
+                uri,
+                ename,
+            };
 
-        // Set vault in controller - this will trigger profile creation with retry logic
-        globalState.vaultController.vault = {
-            uri,
-            ename,
+            setTimeout(() => {
+                goto("/register");
+            }, 10_000);
         };
-
-        setTimeout(() => {
-            goto("/register");
-        }, 10_000);
-    };
-});
+    });
 </script>
 
 <main
@@ -302,8 +313,8 @@ onMount(async () => {
             >
         </p>
         <div class="flex justify-center whitespace-nowrap mt-1">
-            <ButtonAction 
-                class="w-full" 
+            <ButtonAction
+                class="w-full"
                 callback={handleGetStarted}
                 disabled={checkingHardware}
             >
@@ -365,69 +376,70 @@ onMount(async () => {
                 placeholder="Enter verification code"
             />
             <div class="flex justify-center whitespace-nowrap my-[2.3svh]">
-                <ButtonAction class="w-full" callback={handleContinue}
-                    >Next</ButtonAction
+                <ButtonAction
+                    variant={verificationId.length === 0 ? "soft" : "solid"}
+                    disabled={verificationId.length === 0}
+                    class="w-full"
+                    callback={handleContinue}>Next</ButtonAction
                 >
             </div>
         {/if}
-    {:else}
-        {#if checkingHardware}
-            <div class="my-20">
-                <div
-                    class="align-center flex w-full flex-col items-center justify-center gap-6"
-                >
-                    <Shadow size={40} color="rgb(142, 82, 255);" />
-                    <h4>Checking device capabilities...</h4>
-                </div>
+    {:else if checkingHardware}
+        <div class="my-20">
+            <div
+                class="align-center flex w-full flex-col items-center justify-center gap-6"
+            >
+                <Shadow size={40} color="rgb(142, 82, 255);" />
+                <h4>Checking device capabilities...</h4>
             </div>
-        {:else if showHardwareError}
-            <h4 class="mt-[2.3svh] mb-[0.5svh] text-red-600">
-                Hardware Security Not Available
-            </h4>
-            <p class="text-black-700 mb-4">
-                Your phone doesn't support hardware crypto keys, which is a requirement for verified IDs.
-            </p>
-            <p class="text-black-700 mb-4">
-                Please use the pre-verification code option to create a demo account instead.
-            </p>
-            <div class="flex justify-center whitespace-nowrap my-[2.3svh]">
-                <ButtonAction 
-                    class="w-full" 
-                    callback={() => {
-                        isPaneOpen = false;
-                        handlePreVerified();
-                    }}
-                >
-                    Use Pre-Verification Code
-                </ButtonAction>
+        </div>
+    {:else if showHardwareError}
+        <h4 class="mt-[2.3svh] mb-[0.5svh] text-red-600">
+            Hardware Security Not Available
+        </h4>
+        <p class="text-black-700 mb-4">
+            Your phone doesn't support hardware crypto keys, which is a
+            requirement for verified IDs.
+        </p>
+        <p class="text-black-700 mb-4">
+            Please use the pre-verification code option to create a demo account
+            instead.
+        </p>
+        <div class="flex justify-center whitespace-nowrap my-[2.3svh]">
+            <ButtonAction
+                class="w-full"
+                callback={() => {
+                    isPaneOpen = false;
+                    handlePreVerified();
+                }}
+            >
+                Use Pre-Verification Code
+            </ButtonAction>
+        </div>
+    {:else if loading}
+        <div class="my-20">
+            <div
+                class="align-center flex w-full flex-col items-center justify-center gap-6"
+            >
+                <Shadow size={40} color="rgb(142, 82, 255);" />
+                <h4>Initializing security keys...</h4>
             </div>
-        {:else}
-            {#if loading}
-                <div class="my-20">
-                    <div
-                        class="align-center flex w-full flex-col items-center justify-center gap-6"
-                    >
-                        <Shadow size={40} color="rgb(142, 82, 255);" />
-                        <h4>Initializing security keys...</h4>
-                    </div>
-                </div>
-            {:else}
-                <h4 class="mt-[2.3svh] mb-[0.5svh]">
-                    Your Digital Self begins with the Real You
-                </h4>
-                <p class="text-black-700">
-                    In the Web 3.0 Data Space, identity is linked to reality. We begin
-                    by verifying your real-world passport, which serves as the
-                    foundation for issuing your secure ePassport. At the same time, we
-                    generate your eName – a unique digital identifier – and create your
-                    eVault to store and protect your personal data.
-                </p>
-                <div class="flex justify-center whitespace-nowrap my-[2.3svh]">
-                    <ButtonAction class="w-full" callback={handleNext}
-                        >Next</ButtonAction
-                    >
-                </div>
-            {/if}
-        {/if}
+        </div>
+    {:else}
+        <h4 class="mt-[2.3svh] mb-[0.5svh]">
+            Your Digital Self begins with the Real You
+        </h4>
+        <p class="text-black-700">
+            In the Web 3.0 Data Space, identity is linked to reality. We begin
+            by verifying your real-world passport, which serves as the
+            foundation for issuing your secure ePassport. At the same time, we
+            generate your eName – a unique digital identifier – and create your
+            eVault to store and protect your personal data.
+        </p>
+        <div class="flex justify-center whitespace-nowrap my-[2.3svh]">
+            <ButtonAction class="w-full" callback={handleNext}
+                >Next</ButtonAction
+            >
+        </div>
     {/if}
 </Drawer>

From e27f40b2d90f27ffab5581cd5b2b4ce6de87c588 Mon Sep 17 00:00:00 2001
From: gourav <gourav@auvo.io>
Date: Mon, 17 Nov 2025 13:00:24 +0530
Subject: [PATCH 2/5] fix: format and lint

---
 .../src/routes/(auth)/onboarding/+page.svelte | 457 +++++++++---------
 1 file changed, 223 insertions(+), 234 deletions(-)

diff --git a/infrastructure/eid-wallet/src/routes/(auth)/onboarding/+page.svelte b/infrastructure/eid-wallet/src/routes/(auth)/onboarding/+page.svelte
index 0aadb288..28bb4c63 100644
--- a/infrastructure/eid-wallet/src/routes/(auth)/onboarding/+page.svelte
+++ b/infrastructure/eid-wallet/src/routes/(auth)/onboarding/+page.svelte
@@ -1,276 +1,265 @@
 <script lang="ts">
-    import { goto } from "$app/navigation";
-    import {
-        PUBLIC_PROVISIONER_URL,
-        PUBLIC_REGISTRY_URL,
-    } from "$env/static/public";
-    import type { KeyManager } from "$lib/crypto";
-    import { Hero } from "$lib/fragments";
-    import { GlobalState } from "$lib/global";
-    import type { KeyServiceContext } from "$lib/global";
-    import { ButtonAction, Drawer } from "$lib/ui";
-    import { capitalize } from "$lib/utils";
-    import * as falso from "@ngneat/falso";
-    import axios from "axios";
-    import { getContext, onMount } from "svelte";
-    import { Shadow } from "svelte-loading-spinners";
-    import { v4 as uuidv4 } from "uuid";
+import { goto } from "$app/navigation";
+import {
+    PUBLIC_PROVISIONER_URL,
+    PUBLIC_REGISTRY_URL,
+} from "$env/static/public";
+import type { KeyManager } from "$lib/crypto";
+import { Hero } from "$lib/fragments";
+import { GlobalState } from "$lib/global";
+import type { KeyServiceContext } from "$lib/global";
+import { ButtonAction, Drawer } from "$lib/ui";
+import { capitalize } from "$lib/utils";
+import * as falso from "@ngneat/falso";
+import axios from "axios";
+import { getContext, onMount } from "svelte";
+import { Shadow } from "svelte-loading-spinners";
+import { v4 as uuidv4 } from "uuid";
 
-    let isPaneOpen = $state(false);
-    let preVerified = $state(false);
-    let loading = $state(false);
-    let verificationId = $state("");
-    let demoName = $state("");
-    let verificationSuccess = $state(false);
-    let keyManager: KeyManager | null = $state(null);
-    let showHardwareError = $state(false);
-    let checkingHardware = $state(false);
-    const KEY_ID = "default";
+let isPaneOpen = $state(false);
+let preVerified = $state(false);
+let loading = $state(false);
+let verificationId = $state("");
+let demoName = $state("");
+let verificationSuccess = $state(false);
+let keyManager: KeyManager | null = $state(null);
+let showHardwareError = $state(false);
+let checkingHardware = $state(false);
+const KEY_ID = "default";
 
-    const handleGetStarted = async () => {
-        isPaneOpen = true;
-        preVerified = false;
-        checkingHardware = true;
-        showHardwareError = false;
-        error = null;
+const handleGetStarted = async () => {
+    isPaneOpen = true;
+    preVerified = false;
+    checkingHardware = true;
+    showHardwareError = false;
+    error = null;
 
-        try {
-            if (!globalState) {
-                globalState = getContext<() => GlobalState>("globalState")();
-            }
+    try {
+        if (!globalState) {
+            globalState = getContext<() => GlobalState>("globalState")();
+        }
 
-            // Actually try to generate a test hardware key
-            const testKeyId = `hardware-test-${Date.now()}`;
-            console.log(
-                "Testing hardware key generation with test key:",
+        // Actually try to generate a test hardware key
+        const testKeyId = `hardware-test-${Date.now()}`;
+        console.log(
+            "Testing hardware key generation with test key:",
+            testKeyId,
+        );
+
+        try {
+            const { manager, created } = await globalState.keyService.ensureKey(
                 testKeyId,
+                "onboarding",
+            );
+            console.log(
+                "Test key result - Manager type:",
+                manager.getType(),
+                "Created:",
+                created,
             );
 
-            try {
-                const { manager, created } =
-                    await globalState.keyService.ensureKey(
-                        testKeyId,
-                        "onboarding",
-                    );
-                console.log(
-                    "Test key result - Manager type:",
-                    manager.getType(),
-                    "Created:",
-                    created,
-                );
-
-                // Check if we got hardware manager and it actually created a key
-                if (manager.getType() !== "hardware") {
-                    throw new Error(
-                        "Got software fallback instead of hardware",
-                    );
-                }
-
-                // Hardware works! Clean up test key and proceed
-                console.log("Hardware keys are working");
-                checkingHardware = false;
-            } catch (keyError) {
-                console.error("Hardware key test failed:", keyError);
-                showHardwareError = true;
-                checkingHardware = false;
+            // Check if we got hardware manager and it actually created a key
+            if (manager.getType() !== "hardware") {
+                throw new Error("Got software fallback instead of hardware");
             }
-        } catch (err) {
-            console.error("Error checking hardware:", err);
+
+            // Hardware works! Clean up test key and proceed
+            console.log("Hardware keys are working");
+            checkingHardware = false;
+        } catch (keyError) {
+            console.error("Hardware key test failed:", keyError);
             showHardwareError = true;
             checkingHardware = false;
         }
-    };
+    } catch (err) {
+        console.error("Error checking hardware:", err);
+        showHardwareError = true;
+        checkingHardware = false;
+    }
+};
 
-    const handlePreVerified = () => {
-        isPaneOpen = true;
-        preVerified = true;
-    };
+const handlePreVerified = () => {
+    isPaneOpen = true;
+    preVerified = true;
+};
 
-    function generatePassportNumber() {
-        const letters = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
-        const randomLetters = () =>
-            letters.charAt(Math.floor(Math.random() * letters.length)) +
-            letters.charAt(Math.floor(Math.random() * letters.length));
-        const randomDigits = () =>
-            String(Math.floor(1000000 + Math.random() * 9000000)); // 7 digits
+function generatePassportNumber() {
+    const letters = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
+    const randomLetters = () =>
+        letters.charAt(Math.floor(Math.random() * letters.length)) +
+        letters.charAt(Math.floor(Math.random() * letters.length));
+    const randomDigits = () =>
+        String(Math.floor(1000000 + Math.random() * 9000000)); // 7 digits
 
-        return randomLetters() + randomDigits();
-    }
+    return randomLetters() + randomDigits();
+}
 
-    function getKeyContext(): KeyServiceContext {
-        return preVerified ? "pre-verification" : "onboarding";
-    }
+function getKeyContext(): KeyServiceContext {
+    return preVerified ? "pre-verification" : "onboarding";
+}
 
-    async function initializeKeyManager() {
-        try {
-            if (!globalState) throw new Error("Global state is not defined");
-            const context = getKeyContext();
-            keyManager = await globalState.keyService.getManager(
-                KEY_ID,
-                context,
-            );
-            console.log(`Key manager initialized: ${keyManager.getType()}`);
-            return keyManager;
-        } catch (error) {
-            console.error("Failed to initialize key manager:", error);
-            throw error;
-        }
+async function initializeKeyManager() {
+    try {
+        if (!globalState) throw new Error("Global state is not defined");
+        const context = getKeyContext();
+        keyManager = await globalState.keyService.getManager(KEY_ID, context);
+        console.log(`Key manager initialized: ${keyManager.getType()}`);
+        return keyManager;
+    } catch (error) {
+        console.error("Failed to initialize key manager:", error);
+        throw error;
     }
+}
 
-    async function ensureKeyForContext() {
-        try {
-            if (!globalState) throw new Error("Global state is not defined");
-            const context = getKeyContext();
-            const { manager, created } = await globalState.keyService.ensureKey(
-                KEY_ID,
-                context,
-            );
-            keyManager = manager;
-            console.log(
-                "Key generation result:",
-                created ? "key-generated" : "key-exists",
-            );
-            return { manager, created };
-        } catch (error) {
-            console.error("Failed to ensure key:", error);
-            throw error;
-        }
+async function ensureKeyForContext() {
+    try {
+        if (!globalState) throw new Error("Global state is not defined");
+        const context = getKeyContext();
+        const { manager, created } = await globalState.keyService.ensureKey(
+            KEY_ID,
+            context,
+        );
+        keyManager = manager;
+        console.log(
+            "Key generation result:",
+            created ? "key-generated" : "key-exists",
+        );
+        return { manager, created };
+    } catch (error) {
+        console.error("Failed to ensure key:", error);
+        throw error;
     }
+}
 
-    async function getApplicationPublicKey() {
-        try {
-            if (!globalState) throw new Error("Global state is not defined");
-            if (!keyManager) {
-                await initializeKeyManager();
-            }
-            const context = getKeyContext();
-            const publicKey = await globalState.keyService.getPublicKey(
-                KEY_ID,
-                context,
-            );
-            console.log("Public key retrieved:", publicKey);
-            return publicKey;
-        } catch (error) {
-            console.error("Public key retrieval failed:", error);
-            throw error;
+async function getApplicationPublicKey() {
+    try {
+        if (!globalState) throw new Error("Global state is not defined");
+        if (!keyManager) {
+            await initializeKeyManager();
         }
+        const context = getKeyContext();
+        const publicKey = await globalState.keyService.getPublicKey(
+            KEY_ID,
+            context,
+        );
+        console.log("Public key retrieved:", publicKey);
+        return publicKey;
+    } catch (error) {
+        console.error("Public key retrieval failed:", error);
+        throw error;
     }
+}
 
-    const handleNext = async () => {
-        // Initialize keys for onboarding context before going to verify
-        try {
-            loading = true;
-            if (!globalState) {
-                globalState = getContext<() => GlobalState>("globalState")();
-            }
-            await initializeKeyManager();
-            await ensureKeyForContext();
-            loading = false;
-            goto("/verify");
-        } catch (err) {
-            console.error("Failed to initialize keys for onboarding:", err);
-            error = "Failed to initialize security keys. Please try again.";
-            loading = false;
-            setTimeout(() => {
-                error = null;
-            }, 5000);
+const handleNext = async () => {
+    // Initialize keys for onboarding context before going to verify
+    try {
+        loading = true;
+        if (!globalState) {
+            globalState = getContext<() => GlobalState>("globalState")();
         }
-    };
+        await initializeKeyManager();
+        await ensureKeyForContext();
+        loading = false;
+        goto("/verify");
+    } catch (err) {
+        console.error("Failed to initialize keys for onboarding:", err);
+        error = "Failed to initialize security keys. Please try again.";
+        loading = false;
+        setTimeout(() => {
+            error = null;
+        }, 5000);
+    }
+};
 
-    let globalState: GlobalState;
-    let handleContinue: () => Promise<void> | void = $state(() => {});
-    let handleFinalSubmit: () => Promise<void> | void = $state(() => {});
-    let ename: string;
-    let uri: string;
+let globalState: GlobalState;
+let handleContinue: () => Promise<void> | void = $state(() => {});
+let handleFinalSubmit: () => Promise<void> | void = $state(() => {});
+let ename: string;
+let uri: string;
 
-    let error: string | null = $state(null);
+let error: string | null = $state(null);
 
-    onMount(async () => {
-        globalState = getContext<() => GlobalState>("globalState")();
-        // handle verification logic + sec user data in the store
+onMount(async () => {
+    globalState = getContext<() => GlobalState>("globalState")();
+    // handle verification logic + sec user data in the store
 
-        // Don't initialize key manager here - wait until user chooses their path
+    // Don't initialize key manager here - wait until user chooses their path
 
-        handleContinue = async () => {
-            loading = true;
-            error = null;
-
-            // Initialize key manager for pre-verification context
-            await initializeKeyManager();
-            await ensureKeyForContext();
+    handleContinue = async () => {
+        loading = true;
+        error = null;
 
-            const {
-                data: { token: registryEntropy },
-            } = await axios.get(
-                new URL("/entropy", PUBLIC_REGISTRY_URL).toString(),
-            );
+        // Initialize key manager for pre-verification context
+        await initializeKeyManager();
+        await ensureKeyForContext();
 
-            const { data } = await axios
-                .post(
-                    new URL("/provision", PUBLIC_PROVISIONER_URL).toString(),
-                    {
-                        registryEntropy,
-                        namespace: uuidv4(),
-                        verificationId,
-                        publicKey: await getApplicationPublicKey(),
-                    },
-                )
-                .catch(() => {
-                    loading = false;
-                    console.log("caught");
-                    preVerified = false;
-                    verificationId = "";
-                    error = "Wrong pre-verification code";
-                    setTimeout(() => {
-                        error = null;
-                    }, 6_000);
-                    return { data: null };
-                });
-            if (!data) return;
+        const {
+            data: { token: registryEntropy },
+        } = await axios.get(
+            new URL("/entropy", PUBLIC_REGISTRY_URL).toString(),
+        );
 
-            // If verification is successful, show demo name input
-            if (data.success === true) {
+        const { data } = await axios
+            .post(new URL("/provision", PUBLIC_PROVISIONER_URL).toString(), {
+                registryEntropy,
+                namespace: uuidv4(),
+                verificationId,
+                publicKey: await getApplicationPublicKey(),
+            })
+            .catch(() => {
                 loading = false;
-                verificationSuccess = true;
-                uri = data.uri;
-                ename = data.w3id;
-            }
-        };
+                console.log("caught");
+                preVerified = false;
+                verificationId = "";
+                error = "Wrong pre-verification code";
+                setTimeout(() => {
+                    error = null;
+                }, 6_000);
+                return { data: null };
+            });
+        if (!data) return;
 
-        // New function to handle final submission with demo name
-        handleFinalSubmit = async () => {
-            loading = true;
+        // If verification is successful, show demo name input
+        if (data.success === true) {
+            loading = false;
+            verificationSuccess = true;
+            uri = data.uri;
+            ename = data.w3id;
+        }
+    };
 
-            const tenYearsLater = new Date();
-            tenYearsLater.setFullYear(tenYearsLater.getFullYear() + 10);
-            globalState.userController.user = {
-                name:
-                    demoName ||
-                    capitalize(
-                        `${falso.randFirstName()} ${falso.randLastName()}`,
-                    ),
-                "Date of Birth": new Date().toDateString(),
-                "ID submitted": `Passport - ${falso.randCountryCode()}`,
-                "Passport Number": generatePassportNumber(),
-            };
-            globalState.userController.isFake = true;
-            globalState.userController.document = {
-                "Valid From": new Date(Date.now()).toDateString(),
-                "Valid Until": tenYearsLater.toDateString(),
-                "Verified On": new Date().toDateString(),
-            };
+    // New function to handle final submission with demo name
+    handleFinalSubmit = async () => {
+        loading = true;
 
-            // Set vault in controller - this will trigger profile creation with retry logic
-            globalState.vaultController.vault = {
-                uri,
-                ename,
-            };
+        const tenYearsLater = new Date();
+        tenYearsLater.setFullYear(tenYearsLater.getFullYear() + 10);
+        globalState.userController.user = {
+            name:
+                demoName ||
+                capitalize(`${falso.randFirstName()} ${falso.randLastName()}`),
+            "Date of Birth": new Date().toDateString(),
+            "ID submitted": `Passport - ${falso.randCountryCode()}`,
+            "Passport Number": generatePassportNumber(),
+        };
+        globalState.userController.isFake = true;
+        globalState.userController.document = {
+            "Valid From": new Date(Date.now()).toDateString(),
+            "Valid Until": tenYearsLater.toDateString(),
+            "Verified On": new Date().toDateString(),
+        };
 
-            setTimeout(() => {
-                goto("/register");
-            }, 10_000);
+        // Set vault in controller - this will trigger profile creation with retry logic
+        globalState.vaultController.vault = {
+            uri,
+            ename,
         };
-    });
+
+        setTimeout(() => {
+            goto("/register");
+        }, 10_000);
+    };
+});
 </script>
 
 <main

From f945c2fc0480fbd693f58b28c4217349f4849082 Mon Sep 17 00:00:00 2001
From: gourav <gourav@auvo.io>
Date: Mon, 17 Nov 2025 13:50:49 +0530
Subject: [PATCH 3/5] fix: now cancel button does something

---
 .../src/lib/ui/Drawer/Drawer.svelte           | 106 +++----
 .../src/routes/(app)/settings/+page.svelte    | 287 +++++++++---------
 2 files changed, 199 insertions(+), 194 deletions(-)

diff --git a/infrastructure/eid-wallet/src/lib/ui/Drawer/Drawer.svelte b/infrastructure/eid-wallet/src/lib/ui/Drawer/Drawer.svelte
index fa1c6e4e..7bf583cf 100644
--- a/infrastructure/eid-wallet/src/lib/ui/Drawer/Drawer.svelte
+++ b/infrastructure/eid-wallet/src/lib/ui/Drawer/Drawer.svelte
@@ -1,65 +1,65 @@
 <script lang="ts">
-import { cn } from "$lib/utils";
-import { CupertinoPane } from "cupertino-pane";
-import type { Snippet } from "svelte";
-import { swipe } from "svelte-gestures";
-import type { HTMLAttributes } from "svelte/elements";
+    import { cn } from "$lib/utils";
+    import { CupertinoPane } from "cupertino-pane";
+    import type { Snippet } from "svelte";
+    import { swipe } from "svelte-gestures";
+    import type { HTMLAttributes } from "svelte/elements";
 
-interface IDrawerProps extends HTMLAttributes<HTMLDivElement> {
-    isPaneOpen?: boolean;
-    children?: Snippet;
-    handleSwipe?: (isOpen: boolean | undefined) => void;
-    dismissible?: boolean;
-}
+    interface IDrawerProps extends HTMLAttributes<HTMLDivElement> {
+        isPaneOpen?: boolean;
+        children?: Snippet;
+        handleSwipe?: (isOpen: boolean | undefined) => void;
+        dismissible?: boolean;
+    }
 
-let drawerElem: HTMLDivElement;
-let pane: CupertinoPane;
+    let drawerElem: HTMLDivElement;
+    let pane: CupertinoPane;
 
-let {
-    isPaneOpen = $bindable(),
-    children = undefined,
-    handleSwipe,
-    dismissible = true,
-    ...restProps
-}: IDrawerProps = $props();
+    let {
+        isPaneOpen = $bindable(),
+        children = undefined,
+        handleSwipe,
+        dismissible = true,
+        ...restProps
+    }: IDrawerProps = $props();
 
-// Disabled click outside behavior to prevent white screen issues
-// const handleClickOutside = () => {
-//     pane?.destroy({ animate: true });
-//     isPaneOpen = false;
-// };
+    // Disabled click outside behavior to prevent white screen issues
+    // const handleClickOutside = () => {
+    //     pane?.destroy({ animate: true });
+    //     isPaneOpen = false;
+    // };
 
-// Initialize pane only once when element is available
-$effect(() => {
-    if (!drawerElem) return;
-    pane = new CupertinoPane(drawerElem, {
-        fitHeight: true,
-        backdrop: true,
-        backdropOpacity: dismissible ? 0.5 : 0.8,
-        backdropBlur: true,
-        bottomClose: dismissible,
-        buttonDestroy: false,
-        showDraggable: dismissible,
-        upperThanTop: true,
-        breaks: {
-            bottom: { enabled: true, height: 250 },
-        },
-        initialBreak: "bottom",
-    });
+    // Initialize pane only once when element is available
+    $effect(() => {
+        if (!drawerElem) return;
+        pane = new CupertinoPane(drawerElem, {
+            fitHeight: true,
+            backdrop: true,
+            backdropOpacity: dismissible ? 0.5 : 0.8,
+            backdropBlur: true,
+            bottomClose: dismissible,
+            buttonDestroy: false,
+            showDraggable: dismissible,
+            upperThanTop: true,
+            breaks: {
+                bottom: { enabled: true, height: 250 },
+            },
+            initialBreak: "bottom",
+        });
 
-    return () => pane?.destroy();
-});
+        return () => pane?.destroy();
+    });
 
-// Handle open/close state separately
-$effect(() => {
-    if (!pane) return;
+    // Handle open/close state separately
+    $effect(() => {
+        if (!pane) return;
 
-    if (isPaneOpen) {
-        pane.present({ animate: true });
-    } else {
-        pane.destroy({ animate: true });
-    }
-});
+        if (isPaneOpen) {
+            pane.present({ animate: true });
+        } else {
+            pane.destroy({ animate: true });
+        }
+    });
 </script>
 
 <div
diff --git a/infrastructure/eid-wallet/src/routes/(app)/settings/+page.svelte b/infrastructure/eid-wallet/src/routes/(app)/settings/+page.svelte
index 8559d46d..3d109de3 100644
--- a/infrastructure/eid-wallet/src/routes/(app)/settings/+page.svelte
+++ b/infrastructure/eid-wallet/src/routes/(app)/settings/+page.svelte
@@ -1,102 +1,103 @@
 <script lang="ts">
-import { goto } from "$app/navigation";
-import { SettingsNavigationBtn } from "$lib/fragments";
-import type { GlobalState } from "$lib/global";
-import { runtime } from "$lib/global/runtime.svelte";
-import { ButtonAction, Drawer } from "$lib/ui";
-import {
-    Key01Icon,
-    LanguageSquareIcon,
-    Link02Icon,
-    PinCodeIcon,
-    Shield01Icon,
-} from "@hugeicons/core-free-icons";
-import { getContext } from "svelte";
-
-const getGlobalState = getContext<() => GlobalState>("globalState");
-const setGlobalState =
-    getContext<(value: GlobalState) => void>("setGlobalState");
-let globalState = getGlobalState();
-
-let isDeleteConfirmationOpen = $state(false);
-let isFinalConfirmationOpen = $state(false);
-
-// Hidden eVault profile retry functionality
-let tapCount = $state(0);
-let lastTapTime = $state(0);
-let isRetrying = $state(false);
-let retryMessage = $state("");
-
-function showDeleteConfirmation() {
-    isDeleteConfirmationOpen = true;
-}
-
-function confirmDelete() {
-    isDeleteConfirmationOpen = false;
-    isFinalConfirmationOpen = true;
-}
-
-async function nukeWallet() {
-    const newGlobalState = await globalState.reset();
-    setGlobalState(newGlobalState);
-    globalState = newGlobalState;
-    goto("/onboarding");
-}
-
-function cancelDelete() {
-    isDeleteConfirmationOpen = false;
-    isFinalConfirmationOpen = false;
-}
-
-async function handleVersionTap() {
-    const now = Date.now();
-
-    // Reset counter if more than 3 seconds between taps
-    if (now - lastTapTime > 3000) {
-        tapCount = 0;
+    import { goto } from "$app/navigation";
+    import { SettingsNavigationBtn } from "$lib/fragments";
+    import type { GlobalState } from "$lib/global";
+    import { runtime } from "$lib/global/runtime.svelte";
+    import { ButtonAction, Drawer } from "$lib/ui";
+    import {
+        Key01Icon,
+        LanguageSquareIcon,
+        Link02Icon,
+        PinCodeIcon,
+        Shield01Icon,
+    } from "@hugeicons/core-free-icons";
+    import { getContext } from "svelte";
+
+    const getGlobalState = getContext<() => GlobalState>("globalState");
+    const setGlobalState =
+        getContext<(value: GlobalState) => void>("setGlobalState");
+    let globalState = getGlobalState();
+
+    let isDeleteConfirmationOpen = $state(false);
+    let isFinalConfirmationOpen = $state(false);
+
+    // Hidden eVault profile retry functionality
+    let tapCount = $state(0);
+    let lastTapTime = $state(0);
+    let isRetrying = $state(false);
+    let retryMessage = $state("");
+
+    function showDeleteConfirmation() {
+        isDeleteConfirmationOpen = true;
     }
 
-    tapCount++;
-    lastTapTime = now;
+    function confirmDelete() {
+        isDeleteConfirmationOpen = false;
+        isFinalConfirmationOpen = true;
+    }
+
+    async function nukeWallet() {
+        const newGlobalState = await globalState.reset();
+        setGlobalState(newGlobalState);
+        globalState = newGlobalState;
+        goto("/onboarding");
+    }
 
-    // Show tap count feedback (only visible to user)
-    if (tapCount >= 5) {
-        retryMessage = `Taps: ${tapCount}/10`;
+    function cancelDelete() {
+        isDeleteConfirmationOpen = false;
+        isFinalConfirmationOpen = false;
     }
 
-    // Trigger eVault profile retry after 10 taps
-    if (tapCount === 10) {
-        isRetrying = true;
-        retryMessage = "Retrying eVault profile setup...";
-
-        try {
-            await globalState.vaultController.retryProfileCreation();
-            retryMessage = "✅ eVault profile setup completed successfully!";
-
-            // Reset after success
-            setTimeout(() => {
-                tapCount = 0;
-                retryMessage = "";
-                isRetrying = false;
-            }, 3000);
-        } catch (error) {
-            console.error("Failed to retry eVault profile setup:", error);
-            retryMessage =
-                "❌ Failed to setup eVault profile. Check console for details.";
-
-            // Reset after error
-            setTimeout(() => {
-                tapCount = 0;
-                retryMessage = "";
-                isRetrying = false;
-            }, 5000);
+    async function handleVersionTap() {
+        const now = Date.now();
+
+        // Reset counter if more than 3 seconds between taps
+        if (now - lastTapTime > 3000) {
+            tapCount = 0;
+        }
+
+        tapCount++;
+        lastTapTime = now;
+
+        // Show tap count feedback (only visible to user)
+        if (tapCount >= 5) {
+            retryMessage = `Taps: ${tapCount}/10`;
+        }
+
+        // Trigger eVault profile retry after 10 taps
+        if (tapCount === 10) {
+            isRetrying = true;
+            retryMessage = "Retrying eVault profile setup...";
+
+            try {
+                await globalState.vaultController.retryProfileCreation();
+                retryMessage =
+                    "✅ eVault profile setup completed successfully!";
+
+                // Reset after success
+                setTimeout(() => {
+                    tapCount = 0;
+                    retryMessage = "";
+                    isRetrying = false;
+                }, 3000);
+            } catch (error) {
+                console.error("Failed to retry eVault profile setup:", error);
+                retryMessage =
+                    "❌ Failed to setup eVault profile. Check console for details.";
+
+                // Reset after error
+                setTimeout(() => {
+                    tapCount = 0;
+                    retryMessage = "";
+                    isRetrying = false;
+                }, 5000);
+            }
         }
     }
-}
 
-$effect(() => {
-    runtime.header.title = "Settings";
-});
+    $effect(() => {
+        runtime.header.title = "Settings";
+    });
 </script>
 
 <main>
@@ -146,59 +147,63 @@ $effect(() => {
 </main>
 
 <!-- First Confirmation Drawer -->
-<Drawer bind:isPaneOpen={isDeleteConfirmationOpen}>
-    <div class="text-center">
-        <h4 class="mt-[2.3svh] mb-[0.5svh] text-red-600">
-            ⚠️ Delete Account Warning
-        </h4>
-        <p class="text-black-700 mb-4">
-            Are you sure you want to delete your account? This action will:
-        </p>
-        <ul class="text-left text-black-700 mb-6 space-y-2">
-            <li>• Permanently delete all your personal data</li>
-            <li>• Remove your ePassport and eVault access</li>
-            <li>• Delete your eName and all associated credentials</li>
-            <li>• Make your data inaccessible within 24 hours</li>
-            <li>• This action cannot be undone</li>
-        </ul>
-        <div class="flex gap-3">
-            <ButtonAction class="flex-1" callback={cancelDelete}
-                >Cancel</ButtonAction
-            >
-            <ButtonAction
-                class="flex-1 bg-red-600 hover:bg-red-700"
-                callback={confirmDelete}>Continue</ButtonAction
-            >
+{#if isDeleteConfirmationOpen}
+    <Drawer bind:isPaneOpen={isDeleteConfirmationOpen}>
+        <div class="text-center">
+            <h4 class="mt-[2.3svh] mb-[0.5svh] text-red-600">
+                ⚠️ Delete Account Warning
+            </h4>
+            <p class="text-black-700 mb-4">
+                Are you sure you want to delete your account? This action will:
+            </p>
+            <ul class="text-left text-black-700 mb-6 space-y-2">
+                <li>• Permanently delete all your personal data</li>
+                <li>• Remove your ePassport and eVault access</li>
+                <li>• Delete your eName and all associated credentials</li>
+                <li>• Make your data inaccessible within 24 hours</li>
+                <li>• This action cannot be undone</li>
+            </ul>
+            <div class="flex gap-3">
+                <ButtonAction class="flex-1" callback={cancelDelete}
+                    >Cancel</ButtonAction
+                >
+                <ButtonAction
+                    class="flex-1 bg-red-600 hover:bg-red-700"
+                    callback={confirmDelete}>Continue</ButtonAction
+                >
+            </div>
         </div>
-    </div>
-</Drawer>
+    </Drawer>
+{/if}
 
 <!-- Final Confirmation Drawer -->
-<Drawer bind:isPaneOpen={isFinalConfirmationOpen}>
-    <div class="text-center">
-        <h4 class="mt-[2.3svh] mb-[0.5svh] text-red-600">
-            🚨 Final Confirmation
-        </h4>
-        <p class="text-black-700 mb-4">
-            This is your final warning. Once you confirm:
-        </p>
-        <div class="bg-red-50 border border-red-200 rounded-md p-4 mb-6">
-            <p class="text-red-800 font-medium">
-                All your data will be permanently deleted and you will lose
-                access to your ePassport, eVault, and eName forever.
+{#if isFinalConfirmationOpen}
+    <Drawer bind:isPaneOpen={isFinalConfirmationOpen}>
+        <div class="text-center">
+            <h4 class="mt-[2.3svh] mb-[0.5svh] text-red-600">
+                🚨 Final Confirmation
+            </h4>
+            <p class="text-black-700 mb-4">
+                This is your final warning. Once you confirm:
             </p>
+            <div class="bg-red-50 border border-red-200 rounded-md p-4 mb-6">
+                <p class="text-red-800 font-medium">
+                    All your data will be permanently deleted and you will lose
+                    access to your ePassport, eVault, and eName forever.
+                </p>
+            </div>
+            <p class="text-black-700 mb-6">
+                Are you absolutely certain you want to proceed?
+            </p>
+            <div class="flex gap-3">
+                <ButtonAction class="flex-1" callback={cancelDelete}
+                    >Cancel</ButtonAction
+                >
+                <ButtonAction
+                    class="flex-1 bg-red-600 hover:bg-red-700"
+                    callback={nukeWallet}>Delete</ButtonAction
+                >
+            </div>
         </div>
-        <p class="text-black-700 mb-6">
-            Are you absolutely certain you want to proceed?
-        </p>
-        <div class="flex gap-3">
-            <ButtonAction class="flex-1" callback={cancelDelete}
-                >Cancel</ButtonAction
-            >
-            <ButtonAction
-                class="flex-1 bg-red-600 hover:bg-red-700"
-                callback={nukeWallet}>Delete</ButtonAction
-            >
-        </div>
-    </div>
-</Drawer>
+    </Drawer>
+{/if}

From f8988dc8ff7e2d23f9745d440054b15b3e02e9ff Mon Sep 17 00:00:00 2001
From: gourav <gourav@auvo.io>
Date: Mon, 17 Nov 2025 13:58:31 +0530
Subject: [PATCH 4/5] fix: demo name continue button

---
 .../src/lib/ui/Drawer/Drawer.svelte           | 106 +++++-----
 .../src/routes/(app)/settings/+page.svelte    | 181 +++++++++---------
 .../src/routes/(auth)/onboarding/+page.svelte |   7 +-
 3 files changed, 148 insertions(+), 146 deletions(-)

diff --git a/infrastructure/eid-wallet/src/lib/ui/Drawer/Drawer.svelte b/infrastructure/eid-wallet/src/lib/ui/Drawer/Drawer.svelte
index 7bf583cf..fa1c6e4e 100644
--- a/infrastructure/eid-wallet/src/lib/ui/Drawer/Drawer.svelte
+++ b/infrastructure/eid-wallet/src/lib/ui/Drawer/Drawer.svelte
@@ -1,65 +1,65 @@
 <script lang="ts">
-    import { cn } from "$lib/utils";
-    import { CupertinoPane } from "cupertino-pane";
-    import type { Snippet } from "svelte";
-    import { swipe } from "svelte-gestures";
-    import type { HTMLAttributes } from "svelte/elements";
+import { cn } from "$lib/utils";
+import { CupertinoPane } from "cupertino-pane";
+import type { Snippet } from "svelte";
+import { swipe } from "svelte-gestures";
+import type { HTMLAttributes } from "svelte/elements";
 
-    interface IDrawerProps extends HTMLAttributes<HTMLDivElement> {
-        isPaneOpen?: boolean;
-        children?: Snippet;
-        handleSwipe?: (isOpen: boolean | undefined) => void;
-        dismissible?: boolean;
-    }
-
-    let drawerElem: HTMLDivElement;
-    let pane: CupertinoPane;
+interface IDrawerProps extends HTMLAttributes<HTMLDivElement> {
+    isPaneOpen?: boolean;
+    children?: Snippet;
+    handleSwipe?: (isOpen: boolean | undefined) => void;
+    dismissible?: boolean;
+}
 
-    let {
-        isPaneOpen = $bindable(),
-        children = undefined,
-        handleSwipe,
-        dismissible = true,
-        ...restProps
-    }: IDrawerProps = $props();
+let drawerElem: HTMLDivElement;
+let pane: CupertinoPane;
 
-    // Disabled click outside behavior to prevent white screen issues
-    // const handleClickOutside = () => {
-    //     pane?.destroy({ animate: true });
-    //     isPaneOpen = false;
-    // };
+let {
+    isPaneOpen = $bindable(),
+    children = undefined,
+    handleSwipe,
+    dismissible = true,
+    ...restProps
+}: IDrawerProps = $props();
 
-    // Initialize pane only once when element is available
-    $effect(() => {
-        if (!drawerElem) return;
-        pane = new CupertinoPane(drawerElem, {
-            fitHeight: true,
-            backdrop: true,
-            backdropOpacity: dismissible ? 0.5 : 0.8,
-            backdropBlur: true,
-            bottomClose: dismissible,
-            buttonDestroy: false,
-            showDraggable: dismissible,
-            upperThanTop: true,
-            breaks: {
-                bottom: { enabled: true, height: 250 },
-            },
-            initialBreak: "bottom",
-        });
+// Disabled click outside behavior to prevent white screen issues
+// const handleClickOutside = () => {
+//     pane?.destroy({ animate: true });
+//     isPaneOpen = false;
+// };
 
-        return () => pane?.destroy();
+// Initialize pane only once when element is available
+$effect(() => {
+    if (!drawerElem) return;
+    pane = new CupertinoPane(drawerElem, {
+        fitHeight: true,
+        backdrop: true,
+        backdropOpacity: dismissible ? 0.5 : 0.8,
+        backdropBlur: true,
+        bottomClose: dismissible,
+        buttonDestroy: false,
+        showDraggable: dismissible,
+        upperThanTop: true,
+        breaks: {
+            bottom: { enabled: true, height: 250 },
+        },
+        initialBreak: "bottom",
     });
 
-    // Handle open/close state separately
-    $effect(() => {
-        if (!pane) return;
+    return () => pane?.destroy();
+});
 
-        if (isPaneOpen) {
-            pane.present({ animate: true });
-        } else {
-            pane.destroy({ animate: true });
-        }
-    });
+// Handle open/close state separately
+$effect(() => {
+    if (!pane) return;
+
+    if (isPaneOpen) {
+        pane.present({ animate: true });
+    } else {
+        pane.destroy({ animate: true });
+    }
+});
 </script>
 
 <div
diff --git a/infrastructure/eid-wallet/src/routes/(app)/settings/+page.svelte b/infrastructure/eid-wallet/src/routes/(app)/settings/+page.svelte
index 3d109de3..70a671c1 100644
--- a/infrastructure/eid-wallet/src/routes/(app)/settings/+page.svelte
+++ b/infrastructure/eid-wallet/src/routes/(app)/settings/+page.svelte
@@ -1,103 +1,102 @@
 <script lang="ts">
-    import { goto } from "$app/navigation";
-    import { SettingsNavigationBtn } from "$lib/fragments";
-    import type { GlobalState } from "$lib/global";
-    import { runtime } from "$lib/global/runtime.svelte";
-    import { ButtonAction, Drawer } from "$lib/ui";
-    import {
-        Key01Icon,
-        LanguageSquareIcon,
-        Link02Icon,
-        PinCodeIcon,
-        Shield01Icon,
-    } from "@hugeicons/core-free-icons";
-    import { getContext } from "svelte";
-
-    const getGlobalState = getContext<() => GlobalState>("globalState");
-    const setGlobalState =
-        getContext<(value: GlobalState) => void>("setGlobalState");
-    let globalState = getGlobalState();
-
-    let isDeleteConfirmationOpen = $state(false);
-    let isFinalConfirmationOpen = $state(false);
-
-    // Hidden eVault profile retry functionality
-    let tapCount = $state(0);
-    let lastTapTime = $state(0);
-    let isRetrying = $state(false);
-    let retryMessage = $state("");
-
-    function showDeleteConfirmation() {
-        isDeleteConfirmationOpen = true;
+import { goto } from "$app/navigation";
+import { SettingsNavigationBtn } from "$lib/fragments";
+import type { GlobalState } from "$lib/global";
+import { runtime } from "$lib/global/runtime.svelte";
+import { ButtonAction, Drawer } from "$lib/ui";
+import {
+    Key01Icon,
+    LanguageSquareIcon,
+    Link02Icon,
+    PinCodeIcon,
+    Shield01Icon,
+} from "@hugeicons/core-free-icons";
+import { getContext } from "svelte";
+
+const getGlobalState = getContext<() => GlobalState>("globalState");
+const setGlobalState =
+    getContext<(value: GlobalState) => void>("setGlobalState");
+let globalState = getGlobalState();
+
+let isDeleteConfirmationOpen = $state(false);
+let isFinalConfirmationOpen = $state(false);
+
+// Hidden eVault profile retry functionality
+let tapCount = $state(0);
+let lastTapTime = $state(0);
+let isRetrying = $state(false);
+let retryMessage = $state("");
+
+function showDeleteConfirmation() {
+    isDeleteConfirmationOpen = true;
+}
+
+function confirmDelete() {
+    isDeleteConfirmationOpen = false;
+    isFinalConfirmationOpen = true;
+}
+
+async function nukeWallet() {
+    const newGlobalState = await globalState.reset();
+    setGlobalState(newGlobalState);
+    globalState = newGlobalState;
+    goto("/onboarding");
+}
+
+function cancelDelete() {
+    isDeleteConfirmationOpen = false;
+    isFinalConfirmationOpen = false;
+}
+
+async function handleVersionTap() {
+    const now = Date.now();
+
+    // Reset counter if more than 3 seconds between taps
+    if (now - lastTapTime > 3000) {
+        tapCount = 0;
     }
 
-    function confirmDelete() {
-        isDeleteConfirmationOpen = false;
-        isFinalConfirmationOpen = true;
-    }
-
-    async function nukeWallet() {
-        const newGlobalState = await globalState.reset();
-        setGlobalState(newGlobalState);
-        globalState = newGlobalState;
-        goto("/onboarding");
-    }
+    tapCount++;
+    lastTapTime = now;
 
-    function cancelDelete() {
-        isDeleteConfirmationOpen = false;
-        isFinalConfirmationOpen = false;
+    // Show tap count feedback (only visible to user)
+    if (tapCount >= 5) {
+        retryMessage = `Taps: ${tapCount}/10`;
     }
 
-    async function handleVersionTap() {
-        const now = Date.now();
-
-        // Reset counter if more than 3 seconds between taps
-        if (now - lastTapTime > 3000) {
-            tapCount = 0;
-        }
-
-        tapCount++;
-        lastTapTime = now;
-
-        // Show tap count feedback (only visible to user)
-        if (tapCount >= 5) {
-            retryMessage = `Taps: ${tapCount}/10`;
-        }
-
-        // Trigger eVault profile retry after 10 taps
-        if (tapCount === 10) {
-            isRetrying = true;
-            retryMessage = "Retrying eVault profile setup...";
-
-            try {
-                await globalState.vaultController.retryProfileCreation();
-                retryMessage =
-                    "✅ eVault profile setup completed successfully!";
-
-                // Reset after success
-                setTimeout(() => {
-                    tapCount = 0;
-                    retryMessage = "";
-                    isRetrying = false;
-                }, 3000);
-            } catch (error) {
-                console.error("Failed to retry eVault profile setup:", error);
-                retryMessage =
-                    "❌ Failed to setup eVault profile. Check console for details.";
-
-                // Reset after error
-                setTimeout(() => {
-                    tapCount = 0;
-                    retryMessage = "";
-                    isRetrying = false;
-                }, 5000);
-            }
+    // Trigger eVault profile retry after 10 taps
+    if (tapCount === 10) {
+        isRetrying = true;
+        retryMessage = "Retrying eVault profile setup...";
+
+        try {
+            await globalState.vaultController.retryProfileCreation();
+            retryMessage = "✅ eVault profile setup completed successfully!";
+
+            // Reset after success
+            setTimeout(() => {
+                tapCount = 0;
+                retryMessage = "";
+                isRetrying = false;
+            }, 3000);
+        } catch (error) {
+            console.error("Failed to retry eVault profile setup:", error);
+            retryMessage =
+                "❌ Failed to setup eVault profile. Check console for details.";
+
+            // Reset after error
+            setTimeout(() => {
+                tapCount = 0;
+                retryMessage = "";
+                isRetrying = false;
+            }, 5000);
         }
     }
+}
 
-    $effect(() => {
-        runtime.header.title = "Settings";
-    });
+$effect(() => {
+    runtime.header.title = "Settings";
+});
 </script>
 
 <main>
diff --git a/infrastructure/eid-wallet/src/routes/(auth)/onboarding/+page.svelte b/infrastructure/eid-wallet/src/routes/(auth)/onboarding/+page.svelte
index 28bb4c63..d2f784c9 100644
--- a/infrastructure/eid-wallet/src/routes/(auth)/onboarding/+page.svelte
+++ b/infrastructure/eid-wallet/src/routes/(auth)/onboarding/+page.svelte
@@ -349,8 +349,11 @@ onMount(async () => {
                 placeholder="Enter your demo name for ePassport"
             />
             <div class="flex justify-center whitespace-nowrap my-[2.3svh]">
-                <ButtonAction class="w-full" callback={handleFinalSubmit}
-                    >Continue</ButtonAction
+                <ButtonAction
+                    variant={demoName.length === 0 ? "soft" : "solid"}
+                    disabled={demoName.length === 0}
+                    class="w-full"
+                    callback={handleFinalSubmit}>Continue</ButtonAction
                 >
             </div>
         {:else}

From 1e2298079551c106590c9497d5e487c1dff5f20d Mon Sep 17 00:00:00 2001
From: gourav <gourav@auvo.io>
Date: Mon, 17 Nov 2025 17:45:30 +0530
Subject: [PATCH 5/5] fix: format and lint

---
 platforms/blabsy/src/components/input/image-preview.tsx | 6 +++---
 platforms/blabsy/src/lib/utils/image-utils.ts           | 5 ++++-
 2 files changed, 7 insertions(+), 4 deletions(-)

diff --git a/platforms/blabsy/src/components/input/image-preview.tsx b/platforms/blabsy/src/components/input/image-preview.tsx
index e35afc91..6ecf5c33 100644
--- a/platforms/blabsy/src/components/input/image-preview.tsx
+++ b/platforms/blabsy/src/components/input/image-preview.tsx
@@ -67,9 +67,9 @@ export function ImagePreview({
                 type: img.type
             }))
         });
-        
+
         const processed = combineBase64Images(imagesPreview);
-        
+
         console.log('[ImagePreview] Processed images:', {
             originalCount: imagesPreview?.length || 0,
             processedCount: processed.length,
@@ -82,7 +82,7 @@ export function ImagePreview({
                 type: img.type
             }))
         });
-        
+
         return processed;
     }, [imagesPreview]);
 
diff --git a/platforms/blabsy/src/lib/utils/image-utils.ts b/platforms/blabsy/src/lib/utils/image-utils.ts
index 70128f6f..7f4ab678 100644
--- a/platforms/blabsy/src/lib/utils/image-utils.ts
+++ b/platforms/blabsy/src/lib/utils/image-utils.ts
@@ -42,7 +42,10 @@ export function combineBase64Images(
         } else {
             // Handle odd number of images (last item)
             if (dataPart) {
-                if (dataPart.src.startsWith('data:') && !dataPart.src.includes(',')) {
+                if (
+                    dataPart.src.startsWith('data:') &&
+                    !dataPart.src.includes(',')
+                ) {
                     // Incomplete base64 image, skip it
                 } else {
                     result.push(dataPart);