fix(eid-wallet): make existing eName copyable in "Identity Already Registered" dialog

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

@@ -0,0 +1,65 @@
+<script lang="ts">
+import { Copy01Icon } from "@hugeicons/core-free-icons";
+import { HugeiconsIcon } from "@hugeicons/svelte";
+import { onDestroy } from "svelte";
+
+interface ICopyableENameProps {
+    /** The eName to display and copy to the clipboard. */
+    ename: string;
+    /** Small caption shown above the eName. */
+    label?: string;
+}
+
+const { ename, label = "Existing eVault eName" }: ICopyableENameProps =
+    $props();
+
+// Brief inline confirmation after a copy. Shown in-place rather than via the
+// app Toast because this box lives inside a bottom sheet — a bottom toast would
+// render behind/over the sheet.
+let copied = $state(false);
+let resetTimer: ReturnType<typeof setTimeout> | undefined;
+
+async function copy() {
+    try {
+        await navigator.clipboard.writeText(ename);
+        copied = true;
+        clearTimeout(resetTimer);
+        resetTimer = setTimeout(() => {
+            copied = false;
+        }, 2000);
+    } catch (error) {
+        console.error("Failed to copy eName:", error);
+    }
+}
+
+onDestroy(() => clearTimeout(resetTimer));
+</script>
+
+<div class="rounded-xl bg-gray-50 border border-gray-200 p-4">
+    <div class="flex items-center justify-between gap-2 mb-1">
+        <p class="text-xs text-black-500">{label}</p>
+        {#if copied}
+            <span
+                class="text-xs font-medium text-success-900"
+                aria-live="polite"
+            >
+                Copied!
+            </span>
+        {/if}
+    </div>
+    <div class="flex items-start justify-between gap-3">
+        <p
+            class="font-mono text-sm font-medium text-black-900 break-all flex-1 min-w-0"
+        >
+            {ename}
+        </p>
+        <button
+            type="button"
+            onclick={copy}
+            aria-label="Copy eName"
+            class="shrink-0 text-black-500 active:opacity-60"
+        >
+            <HugeiconsIcon icon={Copy01Icon} size={18} strokeWidth={2} />
+        </button>
+    </div>
+</div>

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

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

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

@@ -9,3 +9,4 @@ export { default as Toast } from "./Toast/Toast.svelte";
 export { default as CameraPermissionDialog } from "./CameraPermissionDialog/CameraPermissionDialog.svelte";
 export { default as PlatformAppCard } from "./PlatformAppCard/PlatformAppCard.svelte";
 export { default as ContactCard } from "./ContactCard/ContactCard.svelte";
+export { default as CopyableEName } from "./CopyableEName/CopyableEName.svelte";

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

@@ -6,7 +6,7 @@ import {
 } from "$env/static/public";
 import { AppNav, IdentityCard } from "$lib/fragments";
 import type { GlobalState } from "$lib/global";
-import { ButtonAction } from "$lib/ui";
+import { ButtonAction, CopyableEName } from "$lib/ui";
 import {
     addCounterpartySignature,
     capitalize,
@@ -891,16 +891,10 @@ onMount(async () => {
                 eVault.
             </p>
             {#if duplicateEName}
-                <div class="rounded-xl bg-gray-50 border border-gray-200 p-4">
-                    <p class="text-xs text-black-500 mb-1">
-                        Your existing eVault eName
-                    </p>
-                    <p
-                        class="font-mono text-sm font-medium text-black-900 break-all"
-                    >
-                        {duplicateEName}
-                    </p>
-                </div>
+                <CopyableEName
+                    ename={duplicateEName}
+                    label="Your existing eVault eName"
+                />
                 <p class="text-sm text-black-500">
                     Use the eName above to recover access to your existing
                     eVault instead.

infrastructure/eid-wallet/src/routes/(app)/main/legacy/KycUpgradeOverlay.svelte

@@ -13,6 +13,7 @@ import {
     PUBLIC_PROVISIONER_URL,
 } from "$env/static/public";
 import type { GlobalState } from "$lib/global";
+import { CopyableEName } from "$lib/ui";
 import * as Button from "$lib/ui/Button";
 import { capitalize } from "$lib/utils";
 import axios from "axios";
@@ -481,16 +482,10 @@ async function handleUpgrade() {
                 eVault.
             </p>
             {#if duplicateEName}
-                <div class="rounded-xl bg-gray-50 border border-gray-200 p-4">
-                    <p class="text-xs text-black-500 mb-1">
-                        Your existing eVault eName
-                    </p>
-                    <p
-                        class="font-mono text-sm font-medium text-black-900 break-all"
-                    >
-                        {duplicateEName}
-                    </p>
-                </div>
+                <CopyableEName
+                    ename={duplicateEName}
+                    label="Your existing eVault eName"
+                />
                 <p class="text-sm text-black-500">
                     Use the eName above to recover access to your existing
                     eVault instead.

infrastructure/eid-wallet/src/routes/(auth)/onboarding/+page.svelte

@@ -9,7 +9,7 @@ import {
 import { Hero } from "$lib/fragments";
 import { GlobalState } from "$lib/global";
 import { pendingRecovery } from "$lib/stores/pendingRecovery";
-import { ButtonAction, LoadingSheet } from "$lib/ui";
+import { ButtonAction, CopyableEName, LoadingSheet } from "$lib/ui";
 import { capitalize, getCanonicalBindingDocString } from "$lib/utils";
 import axios from "axios";
 import { GraphQLClient } from "graphql-request";
@@ -1359,14 +1359,10 @@ onMount(async () => {
                 </p>
             {/if}
             {#if duplicateExistingW3id}
-                <div class="rounded-xl bg-gray-50 border border-gray-200 p-3">
-                    <p class="text-xs text-black-500 mb-1">
-                        Existing eVault eName
-                    </p>
-                    <p class="font-mono text-sm break-all">
-                        {duplicateExistingW3id}
-                    </p>
-                </div>
+                <CopyableEName
+                    ename={duplicateExistingW3id}
+                    label="Existing eVault eName"
+                />
             {/if}
             <div class="flex flex-col gap-3 pt-2">
                 <ButtonAction class="w-full" callback={() => goto("/recover")}>