feat: integrate-flows

infrastructure/eid-wallet/src/app.css

@@ -76,3 +76,96 @@ body {
 	padding-left: env(safe-area-inset-left);
 	padding-right: env(safe-area-inset-right);
 }
+
+/* Ensure background remains correct during transitions */
+:root[data-transition]::view-transition-group(root),
+:root[data-transition]::view-transition-old(root),
+:root[data-transition]::view-transition-new(root) {
+	background-color: white !important; /* Default to white */
+}
+
+.dark:root[data-transition]::view-transition-group(root),
+.dark:root[data-transition]::view-transition-old(root),
+.dark:root[data-transition]::view-transition-new(root) {
+	background-color: #0b0d13 !important; /* Use dark background in dark mode */
+}
+
+/* Prevent flickering */
+:root[data-transition]::view-transition-old(root),
+:root[data-transition]::view-transition-new(root) {
+	contain: paint;
+	will-change: transform, opacity;
+}
+
+/* Slide-in from the right without fade */
+@keyframes slide-from-right {
+	from {
+		transform: translateX(100%); /* Start from the right */
+		opacity: 1; /* Ensure fully visible */
+	}
+	to {
+		transform: translateX(0); /* Move to original position */
+		opacity: 1;
+	}
+}
+
+/* Slide-out to the right without fade */
+@keyframes slide-to-right {
+	from {
+		transform: translateX(0); /* Start at original position */
+		opacity: 1;
+	}
+	to {
+		transform: translateX(100%); /* Move to the right */
+		opacity: 1;
+	}
+}
+
+/* Slide-in from the left without fade */
+@keyframes slide-from-left {
+	from {
+		transform: translateX(-100%); /* Start from the left */
+		opacity: 1;
+	}
+	to {
+		transform: translateX(0); /* Move to original position */
+		opacity: 1;
+	}
+}
+
+/* Slide-out to the left without fade */
+@keyframes slide-to-left {
+	from {
+		transform: translateX(0); /* Start at original position */
+		opacity: 1;
+	}
+	to {
+		transform: translateX(-100%); /* Move to the left */
+		opacity: 1;
+	}
+}
+
+@keyframes fade-out {
+	from {
+		opacity: 1;
+	}
+	to {
+		opacity: 0;
+	}
+}
+
+:root[data-transition]::view-transition-old(root) {
+	animation: 400ms ease-out both fade-out;
+}
+
+:root[data-transition="right"]::view-transition-new(root) {
+	animation: 200ms cubic-bezier(0.4, 0, 0.2, 1) both slide-from-right;
+	position: relative;
+	z-index: 1;
+}
+
+:root[data-transition="left"]::view-transition-new(root) {
+	animation: 200ms cubic-bezier(0.4, 0, 0.2, 1) both slide-from-left;
+	position: relative;
+	z-index: 1;
+}

infrastructure/eid-wallet/src/lib/fragments/IdentityCard/IdentityCard.svelte

@@ -53,16 +53,21 @@ const baseClasses = `relative ${variant === "eName" ? "bg-black-900" : variant =
         <div class="flex justify-between">
             {#if variant === 'eName'}  
                 <HugeiconsIcon size={30} strokeWidth={2} className="text-secondary" icon={CheckmarkBadge02Icon} />
-                <div class="flex gap-3 items-center">  
+                <div class="flex gap-3 items-center"> 
+                    {#if shareBtn} 
                     <Button.Icon icon={Upload03Icon} iconColor={"white"} strokeWidth={2} onclick={shareBtn} />
+                    {/if}
+                    {#if viewBtn}
                     <Button.Icon icon={ViewIcon} iconColor={"white"} strokeWidth={2} onclick={viewBtn} />
+                    {/if}
                     </div>
             {:else if variant === 'ePassport'}
                 <p class="bg-white text-black flex items-center leading-0 justify-center rounded-full h-7 px-5 text-xs font-medium">HIGH SECURITY</p>
+                {#if viewBtn}
                 <Button.Icon icon={ViewIcon} iconColor={"white"} strokeWidth={2} onclick={viewBtn} />
-
+                {/if}
             {:else if variant === 'eVault'}
-                <h3 class="text-black-300 text-3xl font-semibold mb-3">{state.progressWidth} Used</h3>
+                <h3 class="text-black-300 text-3xl font-semibold mb-3 z-[1]">{state.progressWidth} Used</h3>
             {/if}
         </div>
         <div>

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

@@ -7,7 +7,6 @@ import type { HTMLAttributes } from "svelte/elements";
 
 interface IDrawerProps extends HTMLAttributes<HTMLDivElement> {
 	isPaneOpen?: boolean;
-	isCancelRequired?: boolean;
 	children?: Snippet;
 	handleSwipe?: (isOpen: boolean | undefined) => void;
 }
@@ -17,7 +16,6 @@ let pane: CupertinoPane;
 
 let {
 	isPaneOpen = $bindable(),
-	isCancelRequired = false,
 	children = undefined,
 	handleSwipe,
 	...restProps
@@ -36,7 +34,7 @@ $effect(() => {
 		backdropOpacity: 0.5,
 		backdropBlur: true,
 		bottomClose: true,
-		buttonDestroy: isCancelRequired,
+		buttonDestroy: false,
 		showDraggable: true,
 		upperThanTop: true,
 		breaks: {
@@ -89,6 +87,7 @@ $effect(() => {
     }
 
     :global(.move) {
+		display: none !important;
         margin-block: 6px !important;
     }
 </style>

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

@@ -15,6 +15,6 @@ let currentRoute = $derived(page.url.pathname.split("/").pop() || "home");
 </div>
 {/if}
 
-<div class="p-6 mb-16">
+<div class="p-6">
     {@render children()}
 </div>

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

@@ -59,14 +59,15 @@ function shareQR() {
     />
 {/snippet}
 
-{@render Section("eName", eName)}
-{@render Section("ePassport", ePassport)}
-{@render Section("eVault", eVault)}
+<main class="pb-16">
+    {@render Section("eName", eName)}
+    {@render Section("ePassport", ePassport)}
+    {@render Section("eVault", eVault)}
+</main>
 
 <Drawer
     title="Scan QR Code"
     bind:isPaneOpen={shareQRdrawerOpen}
-    isCancelRequired={true}
     class="flex flex-col gap-4 items-center justify-center"
 >
     <div class="flex justify-center relative items-center overflow-hidden h-full bg-gray rounded-3xl p-8">

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

@@ -61,7 +61,6 @@ let flashlightOn = $state(false);
 <Drawer
     title="Scan QR Code"
     bind:isPaneOpen={codeScannedDrawerOpen}
-    isCancelRequired={true}
     class="flex flex-col gap-4 items-center justify-center"
 >
     <div class="flex justify-center mb-4 relative items-center overflow-hidden bg-gray rounded-xl p-4 h-[72px] w-[72px]">
@@ -108,7 +107,6 @@ let flashlightOn = $state(false);
 <Drawer
     title="Scan QR Code"
     bind:isPaneOpen={loggedInDrawerOpen}
-    isCancelRequired={true}
     class="flex flex-col gap-4 items-center justify-center"
 >
     <div class="flex justify-center mb-4 relative items-center overflow-hidden bg-gray rounded-xl p-4 h-[72px] w-[72px]">

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

@@ -5,7 +5,7 @@ import { runtime } from "$lib/global/runtime.svelte";
 const { children } = $props();
 </script>
 
-<main class="h-[100vh] px-[5vw] pb-[4.5vh]">
+<main>
     <AppNav title={runtime.header.title ?? ""}/>
     {@render children?.()}
 </main>

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

@@ -45,7 +45,7 @@ $effect(() => {
     <ButtonAction class="w-full" callback={handleChangePIN}>Change PIN</ButtonAction>
 </main>
 
-<Drawer bind:isPaneOpen={showDrawer} isCancelRequired={true}>
+<Drawer bind:isPaneOpen={showDrawer}>
         <div class="relative bg-gray w-[72px] h-[72px] rounded-[24px] flex justify-center items-center mb-[2.3vh]">
             <span class="relative z-[1]">
                 <HugeiconsIcon icon={CircleLock01Icon} color="var(--color-primary)"/>

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

@@ -1,9 +1,12 @@
 <script lang="ts">
+import { goto } from "$app/navigation";
 import { Hero } from "$lib/fragments";
 import IdentityCard from "$lib/fragments/IdentityCard/IdentityCard.svelte";
 import { ButtonAction } from "$lib/ui";
 
-const handleFinish = async () => {};
+const handleFinish = async () => {
+	await goto("/main");
+};
 </script>
 
 
@@ -15,7 +18,6 @@ const handleFinish = async () => {};
         class="mb-2"
         />
         <IdentityCard variant= "ePassport"
-		viewBtn= {() => alert("View")}
 		userData= {{
 			Name: "Ananya",
 			Dob: "29 Nov 2003",
@@ -25,7 +27,7 @@ const handleFinish = async () => {};
     </section>
     <section class="mt-[4vh] mb-[9vh]">
         <h4>Your eVault</h4>
-        <p class="text-black-700">We’ve also created your eVault—secure cloud storage for your personal data. W3DS platforms access it directly, keeping you in control.</p>
+        <p class="text-black-700 mb-[1vh]">We’ve also created your eVault—secure cloud storage for your personal data. W3DS platforms access it directly, keeping you in control.</p>
         <IdentityCard variant= "eVault"
 		usedStorage= {15}
 		totalStorage= {80}/>

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

@@ -81,7 +81,7 @@ $effect(() => {
 {/if}
 
 
-<Drawer bind:isPaneOpen={showDrawer} isCancelRequired={true}>
+<Drawer bind:isPaneOpen={showDrawer}>
     {#if !isBiometricScreen}
         <div class="relative bg-gray w-[72px] h-[72px] rounded-[24px] flex justify-center items-center mb-[2.3vh]">
             <span class="relative z-[1]">

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

@@ -15,7 +15,7 @@ const handleNext = async () => {
             subtitle="This identifier is permanently yours, and it stays with you for your whole life."
             class="mb-4"
         />
-        <IdentityCard variant="eName" userId= "acbsdjk-14n14k43-12412" shareBtn={() => null}  viewBtn={() => null}/>
+        <IdentityCard variant="eName" userId= "acbsdjk-14n14k43-12412"/>
     </section>
     <ButtonAction class="w-full" callback={handleNext}>Next</ButtonAction>
 </main>

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

@@ -12,5 +12,5 @@ import { ButtonAction } from "$lib/ui";
         />
         <img class="mx-auto mt-20" src="images/Passport.svg" alt="passport">
     </section>
-    <ButtonAction class="w-full" callback={async() => goto("/verify/id")}>I'm ready</ButtonAction>
+    <ButtonAction class="w-full" callback={async() => goto("/register")}>I'm ready</ButtonAction>
 </main>

infrastructure/eid-wallet/src/routes/+layout.svelte

@@ -2,10 +2,13 @@
 import SplashScreen from "$lib/fragments/SplashScreen/SplashScreen.svelte";
 import { onMount } from "svelte";
 import "../app.css";
+import { onNavigate } from "$app/navigation";
 
 const { children } = $props();
 
 let showSplashScreen = $state(false);
+let previousRoute = null;
+let navigationStack: string[] = [];
 
 // replace with actual data loading logic
 async function loadData() {
@@ -18,11 +21,46 @@ async function ensureMinimumDelay() {
 
 onMount(async () => {
 	showSplashScreen = true; // Can't set up the original state to true or animation won't start
+	navigationStack.push(window.location.pathname);
 
 	await Promise.all([loadData(), ensureMinimumDelay()]);
 
 	showSplashScreen = false;
 });
+
+onNavigate((navigation) => {
+	if (!document.startViewTransition) return;
+
+	const from = navigation.from?.url.pathname;
+	const to = navigation.to?.url.pathname;
+
+	if (!from || !to || from === to) return;
+
+	let direction: "left" | "right" = "right";
+
+	const fromIndex = navigationStack.lastIndexOf(from);
+	const toIndex = navigationStack.lastIndexOf(to);
+
+	if (toIndex !== -1 && toIndex < fromIndex) {
+		// Backward navigation
+		direction = "left";
+		navigationStack = navigationStack.slice(0, toIndex + 1);
+	} else {
+		// Forward navigation (or new path)
+		direction = "right";
+		navigationStack.push(to);
+	}
+
+	document.documentElement.setAttribute("data-transition", direction);
+	previousRoute = to;
+
+	return new Promise((resolve) => {
+		document.startViewTransition(async () => {
+			resolve();
+			await navigation.complete;
+		});
+	});
+});
 </script>
 
 {#if showSplashScreen}

infrastructure/eid-wallet/src/routes/+page.svelte

@@ -0,0 +1,7 @@
+<script lang="ts">
+import { goto } from "$app/navigation";
+
+$effect(() => {
+	goto("/onboarding");
+});
+</script>