Skip to content

Fix/final UI fixes #301

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 6 commits into from
Aug 19, 2025
Merged

Fix/final UI fixes #301

Show file tree
Hide file tree
Changes from 5 commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
325a8e6
fix: pictique issues
sosweetham Aug 19, 2025
e017421
fix: charter
sosweetham Aug 19, 2025
4527672
fix: blabsy
sosweetham Aug 19, 2025
f699531
fix: evoting
sosweetham Aug 19, 2025
923de47
fix: just remove env dependency totally
sosweetham Aug 19, 2025
09e411f
Merge branch 'main' into fix/final-ui-fixes
coodos Aug 19, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
811 changes: 414 additions & 397 deletions infrastructure/eid-wallet/src/routes/(app)/scan-qr/+page.svelte
View file
Open in desktop

Large diffs are not rendered by default.

37 changes: 34 additions & 3 deletions platforms/blabsy/src/components/login/login-main.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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";
};
Comment on lines +44 to +53
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🛠️ Refactor suggestion

Guard getAppStoreLink for SSR to avoid ReferenceError

This component is not marked as a client component, so navigator/window access during SSR will throw. Add guards (or mark the file with "use client"). Guarding keeps SSR intact.

Apply this diff:

-    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";
-		};
+    const getAppStoreLink = (): string => {
+      // SSR-safe guards
+      if (typeof window === 'undefined' || typeof navigator === 'undefined') {
+        return "https://play.google.com/store/apps/details?id=foundation.metastate.eid_wallet";
+      }
+      const ua = (navigator.userAgent || (navigator as any).vendor || ((window as any).opera ?? '')).toString();
+      if (/android/i.test(ua)) {
+        return "https://play.google.com/store/apps/details?id=foundation.metastate.eid_wallet";
+      }
+      if (/iPad|iPhone|iPod/.test(ua) && !('MSStream' in window)) {
+        return "https://apps.apple.com/in/app/eid-for-w3ds/id6747748667";
+      }
+      return "https://play.google.com/store/apps/details?id=foundation.metastate.eid_wallet";
+    };

Optionally, consider centralizing this helper in a shared util to avoid duplication across platforms.

📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
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";
};
const getAppStoreLink = (): string => {
// SSR-safe guards
if (typeof window === 'undefined' || typeof navigator === 'undefined') {
return "https://play.google.com/store/apps/details?id=foundation.metastate.eid_wallet";
}
const ua = (navigator.userAgent || (navigator as any).vendor || ((window as any).opera ?? '')).toString();
if (/android/i.test(ua)) {
return "https://play.google.com/store/apps/details?id=foundation.metastate.eid_wallet";
}
if (/iPad|iPhone|iPod/.test(ua) && !('MSStream' in window)) {
return "https://apps.apple.com/in/app/eid-for-w3ds/id6747748667";
}
return "https://play.google.com/store/apps/details?id=foundation.metastate.eid_wallet";
};
🤖 Prompt for AI Agents 
In platforms/blabsy/src/components/login/login-main.tsx around lines 44 to 53,
the getAppStoreLink function directly accesses navigator/window which will throw
during SSR; either mark the component as a client component by adding "use
client" at the top of the file (if it must run on the client) or guard the
function for SSR by checking typeof window !== "undefined" and typeof navigator
!== "undefined" before using them and returning a safe default app-store URL
when those globals are not available; optionally move this helper to a shared
util to avoid duplication across platforms.


useEffect(() => {
getOfferData()
Expand Down Expand Up @@ -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'>
Expand All @@ -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>
Expand Down
18 changes: 15 additions & 3 deletions platforms/eVoting/src/app/(auth)/login/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 */}
Expand All @@ -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>
</>
)}
Expand Down Expand Up @@ -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>
);
}
2 changes: 1 addition & 1 deletion platforms/group-charter-manager/next.config.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import type { NextConfig } from "next";

const nextConfig: NextConfig = {
/* config options here */
/* config options here */
};

export default nextConfig;
17 changes: 9 additions & 8 deletions platforms/group-charter-manager/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand All @@ -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",
Expand Down
39 changes: 27 additions & 12 deletions platforms/group-charter-manager/src/components/auth/login-screen.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
);
}
Expand Down Expand Up @@ -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>

Expand Down Expand Up @@ -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>

Expand All @@ -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>
);
Expand Down
2 changes: 1 addition & 1 deletion platforms/pictique/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 ''",
Expand Down
34 changes: 28 additions & 6 deletions platforms/pictique/src/routes/(auth)/auth/+page.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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;
Expand All @@ -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);

Expand Down Expand Up @@ -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}
Expand Down Expand Up @@ -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>
Expand All @@ -120,6 +141,7 @@
centralised servers.
</p>
</div>

<W3dslogo />
<a href="https://metastate.foundation" target="_blank">
<W3dslogo />
</a>
</div>
2 changes: 2 additions & 0 deletions platforms/pictique/src/routes/(protected)/profile/[id]/+page.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
});
Expand All @@ -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';
Expand Down
Loading
Loading