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/gen/android/app/arm64/release/output-metadata.json

@@ -0,0 +1,37 @@
+{
+ "version": 3,
+ "artifactType": {
+ "type": "APK",
+ "kind": "Directory"
+ },
+ "applicationId": "foundation.metastate.eid_wallet",
+ "variantName": "arm64Release",
+ "elements": [
+ {
+ "type": "SINGLE",
+ "filters": [],
+ "attributes": [],
+ "versionCode": 12,
+ "versionName": "0.5.0",
+ "outputFile": "app-arm64-release.apk"
+ }
+ ],
+ "elementType": "File",
+ "baselineProfiles": [
+ {
+ "minApi": 28,
+ "maxApi": 30,
+ "baselineProfiles": [
+ "baselineProfiles/1/app-arm64-release.dm"
+ ]
+ },
+ {
+ "minApi": 31,
+ "maxApi": 2147483647,
+ "baselineProfiles": [
+ "baselineProfiles/0/app-arm64-release.dm"
+ ]
+ }
+ ],
+ "minSdkVersionForDexing": 24
+}

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) {

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/gen/android/app/arm64/release/output-metadata.json

@@ -0,0 +1,37 @@
+{
+ "version": 3,
+ "artifactType": {
+ "type": "APK",
+ "kind": "Directory"
+ },
+ "applicationId": "foundation.metastate.eid_wallet",
+ "variantName": "arm64Release",
+ "elements": [
+ {
+ "type": "SINGLE",
+ "filters": [],
+ "attributes": [],
+ "versionCode": 12,
+ "versionName": "0.5.0",
+ "outputFile": "app-arm64-release.apk"
+ }
+ ],
+ "elementType": "File",
+ "baselineProfiles": [
+ {
+ "minApi": 28,
+ "maxApi": 30,
+ "baselineProfiles": [
+ "baselineProfiles/1/app-arm64-release.dm"
+ ]
+ },
+ {
+ "minApi": 31,
+ "maxApi": 2147483647,
+ "baselineProfiles": [
+ "baselineProfiles/0/app-arm64-release.dm"
+ ]
+ }
+ ],
+ "minSdkVersionForDexing": 24
+}

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) {

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/gen/android/app/arm64/release/output-metadata.json

@@ -0,0 +1,37 @@
+{
+ "version": 3,
+ "artifactType": {
+ "type": "APK",
+ "kind": "Directory"
+ },
+ "applicationId": "foundation.metastate.eid_wallet",
+ "variantName": "arm64Release",
+ "elements": [
+ {
+ "type": "SINGLE",
+ "filters": [],
+ "attributes": [],
+ "versionCode": 12,
+ "versionName": "0.5.0",
+ "outputFile": "app-arm64-release.apk"
+ }
+ ],
+ "elementType": "File",
+ "baselineProfiles": [
+ {
+ "minApi": 28,
+ "maxApi": 30,
+ "baselineProfiles": [
+ "baselineProfiles/1/app-arm64-release.dm"
+ ]
+ },
+ {
+ "minApi": 31,
+ "maxApi": 2147483647,
+ "baselineProfiles": [
+ "baselineProfiles/0/app-arm64-release.dm"
+ ]
+ }
+ ],
+ "minSdkVersionForDexing": 24
+}

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) {

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/gen/android/app/arm64/release/output-metadata.json

@@ -0,0 +1,37 @@
+{
+ "version": 3,
+ "artifactType": {
+ "type": "APK",
+ "kind": "Directory"
+ },
+ "applicationId": "foundation.metastate.eid_wallet",
+ "variantName": "arm64Release",
+ "elements": [
+ {
+ "type": "SINGLE",
+ "filters": [],
+ "attributes": [],
+ "versionCode": 12,
+ "versionName": "0.5.0",
+ "outputFile": "app-arm64-release.apk"
+ }
+ ],
+ "elementType": "File",
+ "baselineProfiles": [
+ {
+ "minApi": 28,
+ "maxApi": 30,
+ "baselineProfiles": [
+ "baselineProfiles/1/app-arm64-release.dm"
+ ]
+ },
+ {
+ "minApi": 31,
+ "maxApi": 2147483647,
+ "baselineProfiles": [
+ "baselineProfiles/0/app-arm64-release.dm"
+ ]
+ }
+ ],
+ "minSdkVersionForDexing": 24
+}

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) {

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/gen/android/app/arm64/release/output-metadata.json

@@ -0,0 +1,37 @@
+{
+ "version": 3,
+ "artifactType": {
+ "type": "APK",
+ "kind": "Directory"
+ },
+ "applicationId": "foundation.metastate.eid_wallet",
+ "variantName": "arm64Release",
+ "elements": [
+ {
+ "type": "SINGLE",
+ "filters": [],
+ "attributes": [],
+ "versionCode": 12,
+ "versionName": "0.5.0",
+ "outputFile": "app-arm64-release.apk"
+ }
+ ],
+ "elementType": "File",
+ "baselineProfiles": [
+ {
+ "minApi": 28,
+ "maxApi": 30,
+ "baselineProfiles": [
+ "baselineProfiles/1/app-arm64-release.dm"
+ ]
+ },
+ {
+ "minApi": 31,
+ "maxApi": 2147483647,
+ "baselineProfiles": [
+ "baselineProfiles/0/app-arm64-release.dm"
+ ]
+ }
+ ],
+ "minSdkVersionForDexing": 24
+}

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) {

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/gen/android/app/arm64/release/output-metadata.json

@@ -0,0 +1,37 @@
+{
+ "version": 3,
+ "artifactType": {
+ "type": "APK",
+ "kind": "Directory"
+ },
+ "applicationId": "foundation.metastate.eid_wallet",
+ "variantName": "arm64Release",
+ "elements": [
+ {
+ "type": "SINGLE",
+ "filters": [],
+ "attributes": [],
+ "versionCode": 12,
+ "versionName": "0.5.0",
+ "outputFile": "app-arm64-release.apk"
+ }
+ ],
+ "elementType": "File",
+ "baselineProfiles": [
+ {
+ "minApi": 28,
+ "maxApi": 30,
+ "baselineProfiles": [
+ "baselineProfiles/1/app-arm64-release.dm"
+ ]
+ },
+ {
+ "minApi": 31,
+ "maxApi": 2147483647,
+ "baselineProfiles": [
+ "baselineProfiles/0/app-arm64-release.dm"
+ ]
+ }
+ ],
+ "minSdkVersionForDexing": 24
+}

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) {

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/gen/android/app/arm64/release/output-metadata.json

@@ -0,0 +1,37 @@
+{
+ "version": 3,
+ "artifactType": {
+ "type": "APK",
+ "kind": "Directory"
+ },
+ "applicationId": "foundation.metastate.eid_wallet",
+ "variantName": "arm64Release",
+ "elements": [
+ {
+ "type": "SINGLE",
+ "filters": [],
+ "attributes": [],
+ "versionCode": 12,
+ "versionName": "0.5.0",
+ "outputFile": "app-arm64-release.apk"
+ }
+ ],
+ "elementType": "File",
+ "baselineProfiles": [
+ {
+ "minApi": 28,
+ "maxApi": 30,
+ "baselineProfiles": [
+ "baselineProfiles/1/app-arm64-release.dm"
+ ]
+ },
+ {
+ "minApi": 31,
+ "maxApi": 2147483647,
+ "baselineProfiles": [
+ "baselineProfiles/0/app-arm64-release.dm"
+ ]
+ }
+ ],
+ "minSdkVersionForDexing": 24
+}

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) {

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/gen/android/app/arm64/release/output-metadata.json

@@ -0,0 +1,37 @@
+{
+ "version": 3,
+ "artifactType": {
+ "type": "APK",
+ "kind": "Directory"
+ },
+ "applicationId": "foundation.metastate.eid_wallet",
+ "variantName": "arm64Release",
+ "elements": [
+ {
+ "type": "SINGLE",
+ "filters": [],
+ "attributes": [],
+ "versionCode": 12,
+ "versionName": "0.5.0",
+ "outputFile": "app-arm64-release.apk"
+ }
+ ],
+ "elementType": "File",
+ "baselineProfiles": [
+ {
+ "minApi": 28,
+ "maxApi": 30,
+ "baselineProfiles": [
+ "baselineProfiles/1/app-arm64-release.dm"
+ ]
+ },
+ {
+ "minApi": 31,
+ "maxApi": 2147483647,
+ "baselineProfiles": [
+ "baselineProfiles/0/app-arm64-release.dm"
+ ]
+ }
+ ],
+ "minSdkVersionForDexing": 24
+}

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) {