From b53bca40c040518c52e29106b09948e939e0810d Mon Sep 17 00:00:00 2001
From: Bekiboo <julien.connault@gmail.com>
Date: Wed, 1 Jul 2026 09:54:57 +0300
Subject: [PATCH] make existing eName copyable in "Identity Already Registered"
 dialog

---
 .../lib/ui/CopyableEName/CopyableEName.svelte | 65 +++++++++++++++++++
 .../src/lib/ui/CopyableEName/index.ts         |  1 +
 infrastructure/eid-wallet/src/lib/ui/index.ts |  1 +
 .../src/routes/(app)/ePassport/+page.svelte   | 16 ++---
 .../main/legacy/KycUpgradeOverlay.svelte      | 15 ++---
 .../src/routes/(auth)/onboarding/+page.svelte | 14 ++--
 6 files changed, 82 insertions(+), 30 deletions(-)
 create mode 100644 infrastructure/eid-wallet/src/lib/ui/CopyableEName/CopyableEName.svelte
 create mode 100644 infrastructure/eid-wallet/src/lib/ui/CopyableEName/index.ts

diff --git a/infrastructure/eid-wallet/src/lib/ui/CopyableEName/CopyableEName.svelte b/infrastructure/eid-wallet/src/lib/ui/CopyableEName/CopyableEName.svelte
new file mode 100644
index 000000000..ea780892e
--- /dev/null
+++ b/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>
diff --git a/infrastructure/eid-wallet/src/lib/ui/CopyableEName/index.ts b/infrastructure/eid-wallet/src/lib/ui/CopyableEName/index.ts
new file mode 100644
index 000000000..fc682a31a
--- /dev/null
+++ b/infrastructure/eid-wallet/src/lib/ui/CopyableEName/index.ts
@@ -0,0 +1 @@
+export { default } from "./CopyableEName.svelte";
diff --git a/infrastructure/eid-wallet/src/lib/ui/index.ts b/infrastructure/eid-wallet/src/lib/ui/index.ts
index 1ae416c6a..a648887e7 100644
--- a/infrastructure/eid-wallet/src/lib/ui/index.ts
+++ b/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";
diff --git a/infrastructure/eid-wallet/src/routes/(app)/ePassport/+page.svelte b/infrastructure/eid-wallet/src/routes/(app)/ePassport/+page.svelte
index a9faa1960..6c4087f4a 100644
--- a/infrastructure/eid-wallet/src/routes/(app)/ePassport/+page.svelte
+++ b/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.
diff --git a/infrastructure/eid-wallet/src/routes/(app)/main/legacy/KycUpgradeOverlay.svelte b/infrastructure/eid-wallet/src/routes/(app)/main/legacy/KycUpgradeOverlay.svelte
index 2bf789903..8f05bedf1 100644
--- a/infrastructure/eid-wallet/src/routes/(app)/main/legacy/KycUpgradeOverlay.svelte
+++ b/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.
diff --git a/infrastructure/eid-wallet/src/routes/(auth)/onboarding/+page.svelte b/infrastructure/eid-wallet/src/routes/(auth)/onboarding/+page.svelte
index af9755b0b..293f9d0ad 100644
--- a/infrastructure/eid-wallet/src/routes/(auth)/onboarding/+page.svelte
+++ b/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")}>