Fix/final UI fixes

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

@@ -55,7 +55,7 @@
                 return null;
             });
 
-        if (permissions === "prompt") {
+        if (permissions === "prompt" || permissions === "denied") {
             permissions = await requestPermissions();
         }
 
@@ -340,7 +340,6 @@
                     ? "Vote signed successfully!"
                     : "Message signed successfully!",
             );
-
             // Check if this was from a deep link
             const deepLinkData = sessionStorage.getItem("deepLinkData");
             if (deepLinkData) {

platforms/blabsy/src/components/login/login-main.tsx

@@ -41,6 +41,16 @@ export function LoginMain(): JSX.Element {
             new URL(data.uri).searchParams.get('session') as string
         );
     };
+    const getAppStoreLink = () => {
+			const userAgent = navigator.userAgent || navigator.vendor || window.opera;
+			if (/android/i.test(userAgent)) {
+				return "https://play.google.com/store/apps/details?id=foundation.metastate.eid_wallet";
+			}
+			if (/iPad|iPhone|iPod/.test(userAgent) && !window.MSStream) {
+				return "https://apps.apple.com/in/app/eid-for-w3ds/id6747748667"
+			}
+			return "https://play.google.com/store/apps/details?id=foundation.metastate.eid_wallet";
+		};
 
     useEffect(() => {
         getOfferData()
@@ -77,20 +87,39 @@ export function LoginMain(): JSX.Element {
                     <div>
                         {isMobileDevice() ? (
                             <div className='flex flex-col gap-4 items-center'>
+                                <div className='text-xs text-gray-500 text-center max-w-xs'>
+                                    Click the button to open your <a href={getAppStoreLink()}><b><u>eID App</u></b></a> to login
+                                </div>
                                 <a
                                     href={qr ? getDeepLinkUrl(qr) : '#'}
                                     className='px-6 py-3 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors text-center'
                                 >
                                     Login with eID Wallet
                                 </a>
-                                <div className='text-xs text-gray-500 text-center max-w-xs'>
-                                    Click the button to open your eID wallet app
-                                </div>
+                                <div className="text-center mt-4">
+                                <p className="text-sm text-gray-500">
+                                <span className="mb-1 block font-bold text-gray-600">The button is valid for 60 seconds</span>
+                                    <span className="block font-light text-gray-600">Please refresh the page if it expires</span
+                                    >
+                                </p>
+                            </div>
                             </div>
                         ) : (
+                            <div className='flex flex-col gap-4 items-center'>
+                                <p className="text-gray-600">
+                                    Scan the QR code using your <a href={getAppStoreLink()}><b><u>eID App</u></b></a> to login
+                                </p>
                             <div className='p-2 rounded-md bg-white w-fit'>
                                 {qr && <QRCode value={qr} />}
                             </div>
+                            <div className="text-center mt-4">
+                                <p className="text-sm text-gray-500">
+                                <span className="mb-1 block font-bold text-gray-600">The code is valid for 60 seconds</span>
+                                    <span className="block font-light text-gray-600">Please refresh the page if it expires</span
+                                    >
+                                </p>
+                            </div>
+                            </div>
                         )}
                     </div>
                     <div className='absolute right-0 rotate-90 top-1/2'>
@@ -110,12 +139,14 @@ export function LoginMain(): JSX.Element {
                         separation, where all your personal content is stored in
                         your own sovereign eVault, not on centralised servers.
                     </div>
+                    <a href="https://metastate.foundation" target="_blank" rel="noopener noreferrer">
                     <Image
                         src='/assets/w3dslogo.svg'
                         alt='W3DS logo'
                         width={100}
                         height={20}
                     />
+                    </a>
                 </div>
             </div>
         </main>

platforms/eVoting/src/app/(auth)/login/page.tsx

@@ -66,6 +66,17 @@ export default function LoginPage() {
         return () => eventSource.close();
     }, [sessionId, login]);
 
+    const getAppStoreLink = () => {
+			const userAgent = navigator.userAgent || navigator.vendor || window.opera;
+			if (/android/i.test(userAgent)) {
+				return "https://play.google.com/store/apps/details?id=foundation.metastate.eid_wallet";
+			}
+			if (/iPad|iPhone|iPod/.test(userAgent) && !window.MSStream) {
+				return "https://apps.apple.com/in/app/eid-for-w3ds/id6747748667"
+			}
+			return "https://play.google.com/store/apps/details?id=foundation.metastate.eid_wallet";
+		};
+
     return (
         <div className="flex flex-col items-center justify-center gap-4 min-h-screen px-4 pb-safe">
             {/* Logo + Tagline */}
@@ -89,13 +100,13 @@ export default function LoginPage() {
                         {isMobile ? (
                             <>
                                 <span>Click the button below using your</span>
-                                <span className="font-bold underline">eID App</span>
+                                <a href={getAppStoreLink()}><span className="font-bold underline">eID App</span></a>
                                 <span>to login</span>
                             </>
                         ) : (
                             <>
                                 <span>Scan the QR using your</span>
-                                <span className="font-bold underline">eID App</span>
+                                <a href={getAppStoreLink()}><span className="font-bold underline">eID App</span></a>
                                 <span>to login</span>
                             </>
                         )}
@@ -156,8 +167,9 @@ export default function LoginPage() {
                     </div>
                 </div>
             </Card>
-
+            <a href="https://metastate.foundation" target="_blank" rel="noopener noreferrer">
             <img src="/W3DS.svg" alt="w3ds Logo" className="max-h-8" />
+            </a>
         </div>
     );
 }

platforms/group-charter-manager/next.config.ts

@@ -1,7 +1,7 @@
 import type { NextConfig } from "next";
 
 const nextConfig: NextConfig = {
-  /* config options here */
+    /* config options here */
 };
 
 export default nextConfig;

platforms/group-charter-manager/package.json

@@ -15,6 +15,7 @@
         "@milkdown/preset-gfm": "^7.15.2",
         "@milkdown/react": "^7.15.2",
         "@milkdown/theme-nord": "^7.15.2",
+        "@next/env": "^15.4.7",
         "@radix-ui/react-alert-dialog": "^1.1.7",
         "@radix-ui/react-dialog": "^1.1.7",
         "@radix-ui/react-dropdown-menu": "^2.1.7",
@@ -29,35 +30,35 @@
         "@tiptap/starter-kit": "^2.24.0",
         "@toast-ui/react-editor": "^3.2.3",
         "axios": "^1.6.7",
+        "class-variance-authority": "^0.7.1",
+        "clsx": "^2.1.1",
         "cmdk": "^1.1.1",
         "draft-js": "^0.11.7",
         "lucide-react": "^0.453.0",
         "marked": "^16.1.1",
+        "next": "15.4.2",
         "qrcode.react": "^4.2.0",
+        "react": "19.1.0",
+        "react-dom": "19.1.0",
         "react-draft-wysiwyg": "^1.15.0",
+        "react-hook-form": "^7.55.0",
         "react-markdown": "^10.1.0",
         "react-markdown-editor-lite": "^1.3.4",
         "react-quill": "^2.0.0",
         "remark-gfm": "^4.0.1",
-        "turndown": "^7.2.0",
-        "class-variance-authority": "^0.7.1",
-        "clsx": "^2.1.1",
-        "next": "15.4.2",
-        "react": "19.1.0",
-        "react-dom": "19.1.0",
-        "react-hook-form": "^7.55.0",
         "tailwind-merge": "^3.3.1",
         "tailwindcss-animate": "^1.0.7",
+        "turndown": "^7.2.0",
         "zod": "^3.24.2"
     },
     "devDependencies": {
         "@eslint/eslintrc": "^3",
         "@tailwindcss/postcss": "^4.1.11",
         "@types/draft-js": "^0.11.18",
-        "@types/turndown": "^5.0.5",
         "@types/node": "^20",
         "@types/react": "^19",
         "@types/react-dom": "^19",
+        "@types/turndown": "^5.0.5",
         "eslint": "^9",
         "eslint-config-next": "15.4.2",
         "tailwindcss": "^4.1.11",

platforms/group-charter-manager/src/components/auth/login-screen.tsx

@@ -70,10 +70,21 @@ export default function LoginScreen() {
     };
   };
 
+  const getAppStoreLink = () => {
+			const userAgent = navigator.userAgent || navigator.vendor || window.opera;
+			if (/android/i.test(userAgent)) {
+				return "https://play.google.com/store/apps/details?id=foundation.metastate.eid_wallet";
+			}
+			if (/iPad|iPhone|iPod/.test(userAgent) && !window.MSStream) {
+				return "https://apps.apple.com/in/app/eid-for-w3ds/id6747748667"
+			}
+			return "https://play.google.com/store/apps/details?id=foundation.metastate.eid_wallet";
+		};
+
   if (isLoading) {
     return (
       <div className="flex h-screen items-center justify-center">
-        <div className="animate-spin rounded-full h-32 w-32 border-b-2 border-gray-900"></div>
+        <div className="animate-spin rounded-full h-32 w-32 border-b-2 border-gray-900" />
       </div>
     );
   }
@@ -101,15 +112,15 @@ export default function LoginScreen() {
                 />
                 <h1 className="text-3xl font-bold">Group Charter</h1>
             </div>
-            <p class="text-gray-600">
+            <p className="text-gray-600">
                 Coordinate your group in the MetaState
             </p>
         </div>
       <div className="bg-white/50 p-8 rounded-lg shadow-lg max-w-md w-full">
         <div className="text-center mb-8">
-          
+
           <p className="text-gray-600">
-            Scan the QR code to login with your W3DS identity
+            Scan the QR code using your <a href={getAppStoreLink()}><b><u>eID App</u></b></a> to login
           </p>
         </div>
 
@@ -142,7 +153,9 @@ export default function LoginScreen() {
 
         <div className="text-center">
           <p className="text-sm text-gray-500">
-            Use your W3DS wallet to scan this QR code and authenticate
+           <span className="mb-1 block font-bold text-gray-600">The {isMobileDevice() ? "button": "code"} is valid for 60 seconds</span>
+			<span className="block font-light text-gray-600">Please refresh the page if it expires</span
+			>
           </p>
         </div>
 
@@ -155,13 +168,15 @@ export default function LoginScreen() {
           servers.
         </div>
 
-        <Image
-          src="/W3DS.svg"
-          alt="W3DS Logo"
-          width={50}
-          height={20}
-          className="mx-auto mt-5"
-        />
+        <a href="https://metastate.foundation" target="_blank" rel="noopener noreferrer">
+            <Image
+            src="/W3DS.svg"
+            alt="W3DS Logo"
+            width={50}
+            height={20}
+            className="mx-auto mt-5"
+            />
+        </a>
       </div>
     </div>
   );

platforms/pictique/package.json

@@ -4,7 +4,7 @@
 	"version": "0.0.1",
 	"type": "module",
 	"scripts": {
-		"dev": "vite dev",
+		"dev": "vite dev --host",
 		"build": "vite build",
 		"preview": "vite preview",
 		"prepare": "svelte-kit sync || echo ''",

platforms/pictique/src/routes/(auth)/auth/+page.svelte

@@ -1,13 +1,17 @@
 <script lang="ts">
 	import { goto } from '$app/navigation';
-	import { PUBLIC_PICTIQUE_BASE_URL } from '$env/static/public';
+	import {
+		PUBLIC_APP_STORE_EID_WALLET,
+		PUBLIC_PICTIQUE_BASE_URL,
+		PUBLIC_PLAY_STORE_EID_WALLET
+	} from '$env/static/public';
 	import { W3dslogo } from '$lib/icons';
 	import { Qr } from '$lib/ui';
 	import { apiClient, setAuthId, setAuthToken } from '$lib/utils';
+	import { getDeepLinkUrl, isMobileDevice } from '$lib/utils/mobile-detection';
 	import { onMount } from 'svelte';
 	import { onDestroy } from 'svelte';
 	import { qrcode } from 'svelte-qrcode-action';
-	import { isMobileDevice, getDeepLinkUrl } from '$lib/utils/mobile-detection';
 
 	let qrData: string;
 	let isMobile = false;
@@ -16,7 +20,22 @@
 		isMobile = window.innerWidth <= 640; // Tailwind's `sm` breakpoint
 	}
 
+	let getAppStoreLink: () => string = () => '';
+
 	onMount(async () => {
+		getAppStoreLink = () => {
+			const userAgent = navigator.userAgent || navigator.vendor || window.opera;
+			if (/android/i.test(userAgent)) {
+				return 'https://play.google.com/store/apps/details?id=foundation.metastate.eid_wallet';
+			}
+
+			if (/iPad|iPhone|iPod/.test(userAgent) && !window.MSStream) {
+				return 'https://apps.apple.com/in/app/eid-for-w3ds/id6747748667';
+			}
+
+			return 'https://play.google.com/store/apps/details?id=foundation.metastate.eid_wallet';
+		};
+
 		checkMobile();
 		window.addEventListener('resize', checkMobile);
 
@@ -60,7 +79,7 @@
 	>
 		<h2>
 			{#if isMobileDevice()}
-				Login with your <b><u>eID Wallet</u></b>
+				Login with your <a href={getAppStoreLink()}><b><u>eID Wallet</u></b></a>
 			{:else}
 				Scan the QR code using your <b><u>eID App</u></b> to login
 			{/if}
@@ -108,7 +127,9 @@
 		{/if}
 
 		<p class="text-center">
-			<span class="mb-1 block font-bold text-gray-600">The code is valid for 60 seconds</span>
+			<span class="mb-1 block font-bold text-gray-600"
+				>The {isMobileDevice() ? 'button' : 'code'} is valid for 60 seconds</span
+			>
 			<span class="block font-light text-gray-600">Please refresh the page if it expires</span
 			>
 		</p>
@@ -120,6 +141,7 @@
 			centralised servers.
 		</p>
 	</div>
-
-	<W3dslogo />
+	<a href="https://metastate.foundation" target="_blank">
+		<W3dslogo />
+	</a>
 </div>

platforms/pictique/src/routes/(protected)/profile/[id]/+page.svelte

@@ -18,6 +18,7 @@
 	let ownerProfile = $derived.by(async () => {
 		if (ownerId) {
 			const response = await apiClient.get<userProfile>(`/api/users/${ownerId}`);
+			console.log('Owner Profile:', response.data);
 			return response.data;
 		}
 	});
@@ -27,6 +28,7 @@
 			loading = true;
 			error = null;
 			const response = await apiClient.get<userProfile>(`/api/users/${profileId}`);
+			console.log('Fetched Profile:', response.data);
 			profile = response.data;
 		} catch (err) {
 			error = err instanceof Error ? err.message : 'Failed to load profile';