Chore/eid wallet UI fixes (#917)

* chore: address small UI things eid wallet

* feat: eid-wallet support thing

* chore: format

* fix: scan thing

* chore: address code-rabbit suggestions

Author: coodos

infrastructure/control-panel/src/routes/api/references/+server.ts

@@ -10,10 +10,9 @@ export const GET: RequestHandler = async () => {
 		const timeout = setTimeout(() => controller.abort(), 5000);
 		const response = await fetch(`${baseUrl}/api/references/all`, {
 			headers: env.VISUALIZER_API_KEY ? { 'x-visualizer-key': env.VISUALIZER_API_KEY } : {},
-			signal: controller.signal,
+			signal: controller.signal
 		});
 		clearTimeout(timeout);
-		
 
 		if (!response.ok) {
 			console.error('eReputation API error:', response.status, response.statusText);
@@ -24,6 +23,9 @@ export const GET: RequestHandler = async () => {
 		return json(data);
 	} catch (error) {
 		console.error('Error fetching references from eReputation:', error);
-		return json({ error: 'Failed to connect to eReputation API', references: [] }, { status: 500 });
+		return json(
+			{ error: 'Failed to connect to eReputation API', references: [] },
+			{ status: 500 }
+		);
 	}
 };

infrastructure/control-panel/src/routes/visualizer/+page.server.ts

@@ -17,7 +17,6 @@ export interface ReferenceEdge {
 	createdAt: string;
 }
 
-
 export const load: PageServerLoad = async ({ fetch }) => {
 	try {
 		const response = await fetch('/api/references');

infrastructure/eid-wallet/src/lib/services/NotificationService.ts

@@ -1,11 +1,13 @@
 import { PUBLIC_PROVISIONER_URL } from "$env/static/public";
-import { addNotification } from "$lib/stores/notifications";
+import { addNotification, hasNotification } from "$lib/stores/notifications";
 import {
     isPermissionGranted,
+    onNotificationReceived,
     registerForPushNotifications,
     requestPermission,
     sendNotification,
 } from "@choochmeque/tauri-plugin-notifications-api";
+import type { PluginListener } from "@tauri-apps/api/core";
 import { invoke } from "@tauri-apps/api/core";
 
 export interface DeviceRegistration {
@@ -401,6 +403,33 @@ class NotificationService {
         if (platform !== "android" && platform !== "ios") return undefined;
         return this.getPushNotificationToken();
     }
+    /**
+     * Listen for push notifications arriving while the app is in the foreground.
+     * Stores them in the notification panel so they appear in the notifications tab.
+     * Returns a cleanup function to remove the listener.
+     */
+    async listenForForegroundNotifications(): Promise<PluginListener> {
+        return onNotificationReceived((notification) => {
+            if (notification.source !== "push") return;
+            const title = notification.title ?? "";
+            if (!title) return;
+
+            const raw = (notification.extra ?? {}) as Record<string, unknown>;
+            const data = Object.fromEntries(
+                Object.entries(raw).filter(
+                    (entry): entry is [string, string] =>
+                        typeof entry[1] === "string",
+                ),
+            );
+
+            const body = notification.body ?? "";
+            const payload = Object.keys(data).length > 0 ? data : undefined;
+            if (!hasNotification(title, body, payload)) {
+                addNotification({ title, body, data: payload });
+            }
+        });
+    }
+
     /**
      * Get eName from vault (helper method)
      */

infrastructure/eid-wallet/src/lib/stores/notifications.ts

@@ -50,6 +50,18 @@ export function getUnreadCount(): number {
     return loadNotifications().length;
 }
 
+export function hasNotification(
+    title: string,
+    body: string,
+    data?: Record<string, string>,
+): boolean {
+    const notifications = loadNotifications();
+    const key = `${title}\0${body}\0${JSON.stringify(data ?? {})}`;
+    return notifications.some(
+        (n) => `${n.title}\0${n.body}\0${JSON.stringify(n.data ?? {})}` === key,
+    );
+}
+
 export function addNotification(
     notification: Omit<StoredNotification, "id" | "createdAt">,
 ): void {

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

@@ -2,14 +2,16 @@
 import { goto } from "$app/navigation";
 import { page } from "$app/state";
 import type { GlobalState } from "$lib/global";
+import type { PluginListener } from "@tauri-apps/api/core";
 import type { Snippet } from "svelte";
-import { getContext, onMount } from "svelte";
+import { getContext, onDestroy, onMount } from "svelte";
 import type { LayoutData } from "./$types";
 
 let { data, children }: { data: LayoutData; children: Snippet } = $props();
 
 let currentRoute = $derived(page.url.pathname.split("/").pop() || "home");
 let globalState: GlobalState | undefined = $state(undefined);
+let notificationListener: PluginListener | undefined;
 
 onMount(async () => {
     // Get global state
@@ -47,6 +49,14 @@ onMount(async () => {
             );
         }
 
+        // Listen for push notifications while app is in the foreground
+        try {
+            notificationListener =
+                await globalState.notificationService.listenForForegroundNotifications();
+        } catch (error) {
+            console.error("Failed to set up notification listener:", error);
+        }
+
         // Check for pending notifications and navigate to the message's open page
         try {
             const notificationService = globalState.notificationService;
@@ -72,6 +82,10 @@ onMount(async () => {
     }
 });
 
+onDestroy(() => {
+    notificationListener?.unregister();
+});
+
 $effect(() => {
     const isScanPage = currentRoute === "scan-qr";
     if (isScanPage) return document.body.classList.add("custom-global-style");

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

@@ -11,6 +11,7 @@ import {
 import { onDestroy, onMount } from "svelte";
 
 let notifications: StoredNotification[] = $state([]);
+let loaded = $state(false);
 let unsubscribe: (() => void) | undefined;
 
 function refresh() {
@@ -19,6 +20,7 @@ function refresh() {
 
 onMount(() => {
     refresh();
+    loaded = true;
     unsubscribe = subscribe(refresh);
 });
 
@@ -80,7 +82,11 @@ function handleClearAll() {
     </div>
 {/if}
 
-{#if notifications.length === 0}
+{#if !loaded}
+    <div class="flex flex-col items-center justify-center mt-20">
+        <p class="text-sm text-black-500">Loading...</p>
+    </div>
+{:else if notifications.length === 0}
     <div class="flex flex-col items-center justify-center mt-20">
         <p class="text-lg text-black-700">No notifications</p>
         <p class="text-sm text-black-500 mt-1">You're all caught up</p>

infrastructure/eid-wallet/src/routes/(app)/scan-qr/scanLogic.ts

@@ -205,6 +205,15 @@ export function createScanLogic({
             const formats = [Format.QRCode];
             const windowed = true;
             if (get(scanning)) return;
+            // Don't start scanning if any drawer is already open
+            if (
+                get(codeScannedDrawerOpen) ||
+                get(loggedInDrawerOpen) ||
+                get(signingDrawerOpen) ||
+                get(isRevealRequest) ||
+                get(socialBindingDrawerOpen)
+            )
+                return;
             scanning.set(true);
 
             scan({ formats, windowed })
@@ -414,7 +423,6 @@ export function createScanLogic({
                             // Ensure auth drawer is closed before opening logged in drawer
                             codeScannedDrawerOpen.set(false);
                             loggedInDrawerOpen.set(true);
-                            startScan();
                             return;
                         }
 
@@ -425,7 +433,6 @@ export function createScanLogic({
                             // Ensure auth drawer is closed before opening logged in drawer
                             codeScannedDrawerOpen.set(false);
                             loggedInDrawerOpen.set(true);
-                            startScan();
                             return;
                         }
 
@@ -471,7 +478,6 @@ export function createScanLogic({
             // Ensure auth drawer is closed before opening logged in drawer
             codeScannedDrawerOpen.set(false);
             loggedInDrawerOpen.set(true);
-            startScan();
         } catch (error) {
             console.error("Error completing authentication:", error);
 
@@ -1317,7 +1323,10 @@ export function createScanLogic({
                 return;
             }
 
-            if (data.type === "auth" && get(codeScannedDrawerOpen)) {
+            if (
+                data.type === "auth" &&
+                (get(codeScannedDrawerOpen) || get(loggedInDrawerOpen))
+            ) {
                 console.log(
                     "Auth request already in progress, ignoring duplicate",
                 );

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

@@ -1438,10 +1438,25 @@ onMount(async () => {
                 {diditRejectionReason ??
                     "Your verification could not be completed."}
             </p>
+            <p class="text-black-500 text-xs">
+                If you believe this was a mistake, please contact us at
+                <a href="mailto:info@metastate.foundation" class="text-primary underline">info@metastate.foundation</a>.
+            </p>
             <div class="flex flex-col gap-3 pt-2">
                 <ButtonAction class="w-full" callback={handleKycNext}>
                     Try Again
                 </ButtonAction>
+                {#if !upgradeMode}
+                    <ButtonAction
+                        variant="soft"
+                        class="w-full"
+                        callback={() => {
+                            step = "anonymous-form";
+                        }}
+                    >
+                        Self-declare instead
+                    </ButtonAction>
+                {/if}
                 <ButtonAction
                     variant="soft"
                     class="w-full"