Fix/UI ux improvements eid wallet

infrastructure/eid-wallet/package.json

@@ -1,6 +1,6 @@
 {
     "name": "eid-wallet",
-    "version": "0.4.0",
+    "version": "0.5.0",
     "description": "",
     "type": "module",
     "scripts": {

infrastructure/eid-wallet/src-tauri/tauri.conf.json

@@ -1,7 +1,7 @@
 {
     "$schema": "https://schema.tauri.app/config/2",
     "productName": "eID for W3DS",
-    "version": "0.4.0",
+    "version": "0.5.0",
     "identifier": "foundation.metastate.eid-wallet",
     "build": {
         "beforeDevCommand": "pnpm dev",

infrastructure/eid-wallet/src/lib/fragments/IdentityCard/IdentityCard.svelte

@@ -3,7 +3,7 @@ import * as Button from "$lib/ui/Button";
 import { cn } from "$lib/utils";
 import {
     CheckmarkBadge02Icon,
-    Upload03Icon,
+    Copy01Icon,
     ViewIcon,
 } from "@hugeicons/core-free-icons";
 import { HugeiconsIcon } from "@hugeicons/svelte";
@@ -17,6 +17,7 @@ interface IIdentityCard extends HTMLAttributes<HTMLElement> {
     userId?: string;
     viewBtn?: () => void;
     shareBtn?: () => void;
+    copyBtn?: () => void;
     userData?: userData;
     totalStorage?: number;
     usedStorage?: number;
@@ -27,6 +28,7 @@ const {
     userId,
     viewBtn,
     shareBtn,
+    copyBtn,
     userData,
     totalStorage = 0,
     usedStorage = 0,
@@ -69,20 +71,12 @@ const baseClasses = `relative ${variant === "eName" ? "bg-black-900" : variant =
                     icon={CheckmarkBadge02Icon}
                 />
                 <div class="flex gap-3 items-center">
-                    {#if shareBtn}
+                    {#if copyBtn}
                         <Button.Icon
-                            icon={Upload03Icon}
+                            icon={Copy01Icon}
                             iconColor={"white"}
                             strokeWidth={2}
-                            onclick={shareBtn}
-                        />
-                    {/if}
-                    {#if viewBtn}
-                        <Button.Icon
-                            icon={ViewIcon}
-                            iconColor={"white"}
-                            strokeWidth={2}
-                            onclick={viewBtn}
+                            onclick={copyBtn}
                         />
                     {/if}
                 </div>

infrastructure/eid-wallet/src/lib/ui/Toast/Toast.svelte

@@ -0,0 +1,52 @@
+<script lang="ts">
+import { onMount } from "svelte";
+import type { HTMLAttributes } from "svelte/elements";
+
+interface IToast extends HTMLAttributes<HTMLElement> {
+    message: string;
+    duration?: number;
+    onClose?: () => void;
+}
+
+const { message, duration = 3000, onClose, ...restProps }: IToast = $props();
+
+let isVisible = $state(true);
+
+onMount(() => {
+    const timer = setTimeout(() => {
+        isVisible = false;
+        setTimeout(() => {
+            onClose?.();
+        }, 300); // Wait for fade out animation
+    }, duration);
+
+    return () => clearTimeout(timer);
+});
+</script>
+
+{#if isVisible}
+    <div
+        {...restProps}
+        class="fixed bottom-[30px] left-1/2 -translate-x-1/2 z-50 w-[90%] bg-primary-500 text-white px-6 py-3 rounded-lg shadow-lg transition-opacity duration-300 {isVisible
+            ? 'opacity-100'
+            : 'opacity-0'}"
+        role="alert"
+    >
+        <div class="flex items-center gap-2">
+            <svg
+                class="w-5 h-5"
+                fill="none"
+                stroke="currentColor"
+                viewBox="0 0 24 24"
+            >
+                <path
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    stroke-width="2"
+                    d="M5 13l4 4L19 7"
+                />
+            </svg>
+            <span class="font-medium">{message}</span>
+        </div>
+    </div>
+{/if}

infrastructure/eid-wallet/src/lib/ui/Toast/index.ts

@@ -0,0 +1 @@
+export { default } from "./Toast.svelte";

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

@@ -2,3 +2,4 @@ export { default as Drawer } from "./Drawer/Drawer.svelte";
 export { default as InputPin } from "./InputPin/InputPin.svelte";
 export { default as ButtonAction } from "./Button/ButtonAction.svelte";
 export { default as Selector } from "./Selector/Selector.svelte";
+export { default as Toast } from "./Toast/Toast.svelte";

infrastructure/eid-wallet/src/routes/(app)/main/+page.svelte

@@ -2,7 +2,7 @@
 import { goto } from "$app/navigation";
 import { Hero, IdentityCard } from "$lib/fragments";
 import type { GlobalState } from "$lib/global";
-import { Drawer } from "$lib/ui";
+import { Drawer, Toast } from "$lib/ui";
 import * as Button from "$lib/ui/Button";
 import {
     CircleArrowDataTransferDiagonalFreeIcons,
@@ -24,12 +24,31 @@ let profileCreationStatus: "idle" | "loading" | "success" | "failed" =
 let shareQRdrawerOpen = $state(false);
 let statusInterval: ReturnType<typeof setInterval> | undefined =
     $state(undefined);
+let showToast = $state(false);
+let toastMessage = $state("");
 
 function shareQR() {
     alert("QR Code shared!");
     shareQRdrawerOpen = false;
 }
 
+async function copyEName() {
+    if (!ename) return;
+    try {
+        await navigator.clipboard.writeText(ename);
+        toastMessage = "eName copied to clipboard!";
+        showToast = true;
+    } catch (error) {
+        console.error("Failed to copy eName:", error);
+        toastMessage = "Failed to copy eName";
+        showToast = true;
+    }
+}
+
+function handleToastClose() {
+    showToast = false;
+}
+
 async function retryProfileCreation() {
     try {
         await globalState.vaultController.retryProfileCreation();
@@ -137,8 +156,7 @@ onDestroy(() => {
         <IdentityCard
             variant="eName"
             userId={ename ?? "Loading..."}
-            viewBtn={() => alert("View button clicked!")}
-            shareBtn={() => (shareQRdrawerOpen = true)}
+            copyBtn={copyEName}
         />
     {/snippet}
     {#snippet ePassport()}
@@ -197,3 +215,7 @@ onDestroy(() => {
         </Button.Action>
     </Button.Nav>
 {/if}
+
+{#if showToast}
+    <Toast message={toastMessage} onClose={handleToastClose} />
+{/if}

infrastructure/eid-wallet/src/routes/(app)/scan-qr/+page.svelte

@@ -99,15 +99,9 @@ $effect(() => {
 });
 
 async function handleAuthDrawerDecline() {
-    // If there's an error, "Okay" button closes modal and navigates to main
-    if ($authError) {
-        setCodeScannedDrawerOpen(false);
-        await goto("/main");
-    } else {
-        // Otherwise, "Decline" closes modal and restarts scanning
-        setCodeScannedDrawerOpen(false);
-        startScan();
-    }
+    // Cancel button always navigates to main
+    setCodeScannedDrawerOpen(false);
+    await goto("/main");
 }
 
 function handleAuthDrawerOpenChange(value: boolean) {
@@ -126,15 +120,9 @@ function handleLoggedInDrawerOpenChange(value: boolean) {
 }
 
 async function handleSigningDrawerDecline() {
-    // If there's an error, "Okay" button closes modal and navigates to main
-    if ($signingError) {
-        setSigningDrawerOpen(false);
-        await goto("/main");
-    } else {
-        // Otherwise, "Decline" closes modal and restarts scanning
-        setSigningDrawerOpen(false);
-        startScan();
-    }
+    // Cancel button always navigates to main
+    setSigningDrawerOpen(false);
+    await goto("/main");
 }
 
 function handleSigningDrawerOpenChange(value: boolean) {