feat: Main page flow

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

@@ -6,16 +6,22 @@ import type { HTMLAttributes } from "svelte/elements";
 interface IHeroProps extends HTMLAttributes<HTMLElement> {
 	title?: string;
 	titleClasses?: string;
+	iconColor?: string;
 }
-const { title, titleClasses, ...restProps }: IHeroProps = $props();
+const {
+	title,
+	titleClasses,
+	iconColor = "black",
+	...restProps
+}: IHeroProps = $props();
 const baseClasses = "w-full relative flex justify-center h-14 items-center";
 </script>
 
 <nav {...restProps} class={cn(baseClasses, restProps.class)}>
  <Button.Icon 
  icon={ArrowLeft01Icon}
  iconSize="md"
-iconColor={"black"}
+{iconColor}
  class="absolute left-2"
  onclick={() => window.history.back()}
  />

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

@@ -1,5 +1,6 @@
 <script lang="ts">
 import * as Button from "$lib/ui/Button";
+import { cn } from "$lib/utils";
 import {
 	CheckmarkBadge02Icon,
 	Upload03Icon,
@@ -39,9 +40,11 @@ $effect(() => {
 	state.progressWidth =
  usedStorage > 0 ? `${(usedStorage / totalStorage) * 100}%` : "0%";
 });
+
+const baseClasses = `relative ${variant === "eName" ? "bg-black-900" : variant === "ePassport" ? "bg-primary" : "bg-gray"} rounded-3xl w-full min-h-[150px] text-white overflow-hidden`;
 </script>
 
-<div {...restProps} class="relative {variant === 'eName' ? "bg-black-900" : variant === 'ePassport' ? "bg-primary" : "bg-gray"} rounded-3xl w-full min-h-[150px] text-white overflow-hidden">
+<div {...restProps} class={cn(baseClasses, restProps.class)}>
  <div class="w-full h-full pointer-events-none flex gap-13 justify-end absolute right-15 bottom-20">
  <div class="w-10 {variant === 'eVault' ? "bg-white/40" : "bg-white/10"} h-[300%] rotate-40"></div>
  <div class="w-10 {variant === 'eVault' ? "bg-white/40" : "bg-white/10"} h-[300%] rotate-40"></div>
@@ -55,7 +58,7 @@ $effect(() => {
  <Button.Icon icon={ViewIcon} iconColor={"white"} strokeWidth={2} onclick={viewBtn} />
  </div>
  {:else if variant === 'ePassport'}
- <p class="bg-white text-black flex items-center rounded-4xl px-5 py-2 text-xs font-semibold">HIGH SECURITY</p>
+ <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>
  <Button.Icon icon={ViewIcon} iconColor={"white"} strokeWidth={2} onclick={viewBtn} />
 
  {:else if variant === 'eVault'}
@@ -64,9 +67,9 @@ $effect(() => {
  </div>
  <div>
  {#if variant === "eName"} 
- <p class="text-gray font-light">Your eName</p>
+ <p class="text-gray font-normal">Your eName</p>
  <div class="flex items-center justify-between w-full">
- <p class="text-white w-[60%] font-medium">@{userId}</p>
+ <p class="text-white w-full font-medium">@{userId}</p>
  </div>
  {:else if variant === "ePassport"}
  <div class="flex gap-2 flex-col">
@@ -92,7 +95,4 @@ $effect(() => {
  {/if}
  </div>
  </div>
-</div>
-
-
-
+</div>

infrastructure/eid-wallet/src/lib/ui/Button/ButtonAction.svelte

@@ -5,7 +5,7 @@ import type { HTMLButtonAttributes } from "svelte/elements";
 interface IButtonProps extends HTMLButtonAttributes {
 	variant?: "solid" | "soft" | "danger" | "danger-soft" | "white";
 	isLoading?: boolean;
-	callback?: () => Promise<void>;
+	callback?: () => Promise<void> | void;
 	blockingClick?: boolean;
 	type?: "button" | "submit" | "reset";
 	size?: "sm" | "md";
@@ -15,6 +15,7 @@ const {
 	variant = "solid",
 	isLoading,
 	callback,
+	onclick,
 	blockingClick,
 	type = "button",
 	size = "md",

infrastructure/eid-wallet/src/lib/ui/Button/ButtonIcon.svelte

@@ -6,7 +6,7 @@ import type { HTMLButtonAttributes } from "svelte/elements";
 interface IButtonProps extends HTMLButtonAttributes {
 	icon: IconSvgElement;
 	isLoading?: boolean;
-	callback?: () => Promise<void>;
+	callback?: () => Promise<void> | void;
 	onclick?: () => void;
 	blockingClick?: boolean;
 	type?: "button" | "submit" | "reset";

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

@@ -53,17 +53,6 @@ $effect(() => {
 
 	return () => pane.destroy();
 });
-
-$effect(() => {
-	if (isPaneOpen) {
- pane.present({ animate: true });
-	} else {
- pane.destroy({ animate: true });
-	}
-	drawerElem.addEventListener("click_outside", () => {
- handleClickOutside();
-	});
-});
 </script>
 
 <div
@@ -74,7 +63,7 @@ $effect(() => {
  })}
  onswipe={() => handleSwipe?.(isPaneOpen)}
  bind:this={drawerElem}
- use:clickOutside
+ use:clickOutside={handleClickOutside}
  class={cn(restProps.class)}
 >
  <div class="px-6">

infrastructure/eid-wallet/src/lib/utils/clickOutside.ts

@@ -1,12 +1,13 @@
 /** Dispatch event on click outside of node */
-export const clickOutside = (node: HTMLElement) => {
+export const clickOutside = (node: HTMLElement, callback: () => void) => {
 	const handleClick = (event: Event) => {
- // eslint-disable-next-line @typescript-eslint/ban-ts-comment
- // @ts-ignore
- if (node && !node.contains(event.target) && !event.defaultPrevented) {
- // eslint-disable-next-line @typescript-eslint/ban-ts-comment
- // @ts-ignore
- node.dispatchEvent(new CustomEvent("click_outside", node));
+ if (
+ node &&
+ !node.contains(event.target as Node) &&
+ !event.defaultPrevented
+ ) {
+ callback(); // Call the provided callback
+ node.dispatchEvent(new CustomEvent("click_outside"));
  }
 	};
 

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

@@ -0,0 +1,20 @@
+<script lang="ts">
+import { page } from "$app/state";
+import type { Snippet } from "svelte";
+import type { LayoutData } from "./$types";
+
+let { data, children }: { data: LayoutData; children: Snippet } = $props();
+
+let currentRoute = $derived(page.url.pathname.split("/").pop() || "home");
+</script>
+
+<!-- Dev only: remove this when deploying to production -->
+{#if currentRoute === "scan-qr"}
+<div class="fixed -z-10 bg-black w-screen h-screen top-0">
+ <img src="/images/dummyScan.png" class="opacity-40 w-screen h-screen object-cover" alt="dummy scan">
+</div>
+{/if}
+
+<div class="p-6 mb-16">
+ {@render children()}
+</div>

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

@@ -0,0 +1,105 @@
+<script lang="ts">
+import { goto } from "$app/navigation";
+import { Hero, IdentityCard } from "$lib/fragments";
+import { Drawer } from "$lib/ui";
+import * as Button from "$lib/ui/Button";
+import { QrCodeIcon } from "@hugeicons/core-free-icons";
+import { HugeiconsIcon } from "@hugeicons/svelte";
+import type { Snippet } from "svelte";
+
+const dummyData = {
+	Name: "John Doe",
+	"Date of birth": "01 - 01 - 1990",
+	"ID submitted": "American Passport",
+	"Passport number": "1234567-US",
+};
+
+let shareQRdrawerOpen = $state(false);
+
+function shareQR() {
+	alert("QR Code shared!");
+	shareQRdrawerOpen = false;
+}
+</script>
+
+
+<Hero
+ title="Good morning!"
+ subtitle="Don't forget to drink water."
+ showSettings
+/>
+
+{#snippet Section(title: string, children: Snippet)}
+ <section class="mt-8">
+ <h4 class="mb-2">{title}</h4>
+ {@render children()}
+ </section>
+{/snippet}
+
+{#snippet eName()}
+ <IdentityCard
+ variant="eName"
+ userId="caa0f630-2413-5aceaa2c-4628ce93e497"
+ viewBtn={() => alert("View button clicked!")}
+ shareBtn={() => shareQRdrawerOpen = true}
+ />
+{/snippet}
+{#snippet ePassport()}
+ <IdentityCard
+ variant="ePassport"
+ viewBtn={() => goto("/ePassport")}
+ userData={dummyData}
+ />
+{/snippet}
+{#snippet eVault()}
+ <IdentityCard
+ variant="eVault"
+ usedStorage={15}
+ totalStorage={100}
+ />
+{/snippet}
+
+{@render Section("eName", eName)}
+{@render Section("ePassport", ePassport)}
+{@render Section("eVault", eVault)}
+
+<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">
+ <div class="bg-white h-[72px] w-[1000px] -rotate-45 absolute top-4"></div>
+ <div class="bg-white h-[72px] w-[1000px] -rotate-45 absolute bottom-4"></div>
+ <img class="z-10" src="/images/dummyQR.png" alt="QR Code" />
+ </div>
+
+ <h4 class="text-center">Share your eName</h4>
+ <p class="text-black-700 text-center">Anyone scanning this can see your eName</p>
+ <div class="flex justify-center items-center mt-4">
+ <Button.Action
+ variant="solid"
+ callback={shareQR}
+ class="w-full"
+ >
+ Share
+ </Button.Action>
+ </div>
+</Drawer>
+
+<Button.Nav href="/scan-qr">
+ <Button.Action
+ variant="solid"
+ onclick={() => alert("Action button clicked!")}
+ class="mx-auto text-nowrap flex gap-8 fixed bottom-5 left-1/2 -translate-x-1/2 z-10"
+ >
+ <HugeiconsIcon
+ size={32}
+ strokeWidth={2}
+ className="mr-2"
+ icon={QrCodeIcon}
+ />
+ Scan to Login
+ </Button.Action>
+</Button.Nav>

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

@@ -0,0 +1,57 @@
+<script lang="ts">
+import { AppNav, IdentityCard } from "$lib/fragments";
+import * as Button from "$lib/ui/Button";
+import { Share05Icon } from "@hugeicons/core-free-icons";
+import { HugeiconsIcon } from "@hugeicons/svelte";
+
+const dummyData = {
+	Name: "John Doe",
+	"Date of birth": "01-01-1990",
+	"ID submitted": "American Passport",
+	"Passport number": "1234567-US",
+};
+
+const secondDummyData = {
+	"Birth Name": "John Doe",
+	"Place of birth": "New York, USA",
+	Nationality: "American",
+	"ID submitted": "American Passport",
+	"Expiry date": "19-12-2027",
+};
+
+function shareEPassport() {
+	alert("EPassport Code shared!");
+}
+</script>
+
+<AppNav title="ePassport" class="mb-8" />
+
+<div>
+ <IdentityCard
+ variant="ePassport"
+ userData={dummyData}
+ class="shadow-lg"
+ />
+ <div class="p-6 pt-12 bg-gray w-full rounded-2xl -mt-8 flex flex-col gap-2">
+ {#each Object.entries(secondDummyData) as [fieldName, value] } 
+ <div class="flex justify-between">
+ <p class="text-black-700 font-normal">{fieldName}</p>
+ <p class="text-black-500 font-medium">{value}</p>
+ </div>
+ {/each}
+ </div>
+</div>
+
+<Button.Action
+ variant="solid"
+ callback={shareEPassport}
+ class="mx-auto text-nowrap flex gap-8 fixed bottom-5 left-1/2 -translate-x-1/2 z-10"
+>
+ <HugeiconsIcon
+ size={32}
+ strokeWidth={2}
+ className="mr-2"
+ icon={Share05Icon}
+ />
+ Share ePassport
+</Button.Action>

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

@@ -6,16 +6,22 @@ import type { HTMLAttributes } from "svelte/elements";
 interface IHeroProps extends HTMLAttributes<HTMLElement> {
 	title?: string;
 	titleClasses?: string;
+	iconColor?: string;
 }
-const { title, titleClasses, ...restProps }: IHeroProps = $props();
+const {
+	title,
+	titleClasses,
+	iconColor = "black",
+	...restProps
+}: IHeroProps = $props();
 const baseClasses = "w-full relative flex justify-center h-14 items-center";
 </script>
 
 <nav {...restProps} class={cn(baseClasses, restProps.class)}>
  <Button.Icon 
  icon={ArrowLeft01Icon}
  iconSize="md"
-iconColor={"black"}
+{iconColor}
  class="absolute left-2"
  onclick={() => window.history.back()}
  />

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

@@ -1,5 +1,6 @@
 <script lang="ts">
 import * as Button from "$lib/ui/Button";
+import { cn } from "$lib/utils";
 import {
 	CheckmarkBadge02Icon,
 	Upload03Icon,
@@ -39,9 +40,11 @@ $effect(() => {
 	state.progressWidth =
  usedStorage > 0 ? `${(usedStorage / totalStorage) * 100}%` : "0%";
 });
+
+const baseClasses = `relative ${variant === "eName" ? "bg-black-900" : variant === "ePassport" ? "bg-primary" : "bg-gray"} rounded-3xl w-full min-h-[150px] text-white overflow-hidden`;
 </script>
 
-<div {...restProps} class="relative {variant === 'eName' ? "bg-black-900" : variant === 'ePassport' ? "bg-primary" : "bg-gray"} rounded-3xl w-full min-h-[150px] text-white overflow-hidden">
+<div {...restProps} class={cn(baseClasses, restProps.class)}>
  <div class="w-full h-full pointer-events-none flex gap-13 justify-end absolute right-15 bottom-20">
  <div class="w-10 {variant === 'eVault' ? "bg-white/40" : "bg-white/10"} h-[300%] rotate-40"></div>
  <div class="w-10 {variant === 'eVault' ? "bg-white/40" : "bg-white/10"} h-[300%] rotate-40"></div>
@@ -55,7 +58,7 @@ $effect(() => {
  <Button.Icon icon={ViewIcon} iconColor={"white"} strokeWidth={2} onclick={viewBtn} />
  </div>
  {:else if variant === 'ePassport'}
- <p class="bg-white text-black flex items-center rounded-4xl px-5 py-2 text-xs font-semibold">HIGH SECURITY</p>
+ <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>
  <Button.Icon icon={ViewIcon} iconColor={"white"} strokeWidth={2} onclick={viewBtn} />
 
  {:else if variant === 'eVault'}
@@ -64,9 +67,9 @@ $effect(() => {
  </div>
  <div>
  {#if variant === "eName"} 
- <p class="text-gray font-light">Your eName</p>
+ <p class="text-gray font-normal">Your eName</p>
  <div class="flex items-center justify-between w-full">
- <p class="text-white w-[60%] font-medium">@{userId}</p>
+ <p class="text-white w-full font-medium">@{userId}</p>
  </div>
  {:else if variant === "ePassport"}
  <div class="flex gap-2 flex-col">
@@ -92,7 +95,4 @@ $effect(() => {
  {/if}
  </div>
  </div>
-</div>
-
-
-
+</div>

infrastructure/eid-wallet/src/lib/ui/Button/ButtonAction.svelte

@@ -5,7 +5,7 @@ import type { HTMLButtonAttributes } from "svelte/elements";
 interface IButtonProps extends HTMLButtonAttributes {
 	variant?: "solid" | "soft" | "danger" | "danger-soft" | "white";
 	isLoading?: boolean;
-	callback?: () => Promise<void>;
+	callback?: () => Promise<void> | void;
 	blockingClick?: boolean;
 	type?: "button" | "submit" | "reset";
 	size?: "sm" | "md";
@@ -15,6 +15,7 @@ const {
 	variant = "solid",
 	isLoading,
 	callback,
+	onclick,
 	blockingClick,
 	type = "button",
 	size = "md",

infrastructure/eid-wallet/src/lib/ui/Button/ButtonIcon.svelte

@@ -6,7 +6,7 @@ import type { HTMLButtonAttributes } from "svelte/elements";
 interface IButtonProps extends HTMLButtonAttributes {
 	icon: IconSvgElement;
 	isLoading?: boolean;
-	callback?: () => Promise<void>;
+	callback?: () => Promise<void> | void;
 	onclick?: () => void;
 	blockingClick?: boolean;
 	type?: "button" | "submit" | "reset";

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

@@ -53,17 +53,6 @@ $effect(() => {
 
 	return () => pane.destroy();
 });
-
-$effect(() => {
-	if (isPaneOpen) {
- pane.present({ animate: true });
-	} else {
- pane.destroy({ animate: true });
-	}
-	drawerElem.addEventListener("click_outside", () => {
- handleClickOutside();
-	});
-});
 </script>
 
 <div
@@ -74,7 +63,7 @@ $effect(() => {
  })}
  onswipe={() => handleSwipe?.(isPaneOpen)}
  bind:this={drawerElem}
- use:clickOutside
+ use:clickOutside={handleClickOutside}
  class={cn(restProps.class)}
 >
  <div class="px-6">

infrastructure/eid-wallet/src/lib/utils/clickOutside.ts

@@ -1,12 +1,13 @@
 /** Dispatch event on click outside of node */
-export const clickOutside = (node: HTMLElement) => {
+export const clickOutside = (node: HTMLElement, callback: () => void) => {
 	const handleClick = (event: Event) => {
- // eslint-disable-next-line @typescript-eslint/ban-ts-comment
- // @ts-ignore
- if (node && !node.contains(event.target) && !event.defaultPrevented) {
- // eslint-disable-next-line @typescript-eslint/ban-ts-comment
- // @ts-ignore
- node.dispatchEvent(new CustomEvent("click_outside", node));
+ if (
+ node &&
+ !node.contains(event.target as Node) &&
+ !event.defaultPrevented
+ ) {
+ callback(); // Call the provided callback
+ node.dispatchEvent(new CustomEvent("click_outside"));
  }
 	};
 

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

@@ -0,0 +1,20 @@
+<script lang="ts">
+import { page } from "$app/state";
+import type { Snippet } from "svelte";
+import type { LayoutData } from "./$types";
+
+let { data, children }: { data: LayoutData; children: Snippet } = $props();
+
+let currentRoute = $derived(page.url.pathname.split("/").pop() || "home");
+</script>
+
+<!-- Dev only: remove this when deploying to production -->
+{#if currentRoute === "scan-qr"}
+<div class="fixed -z-10 bg-black w-screen h-screen top-0">
+ <img src="/images/dummyScan.png" class="opacity-40 w-screen h-screen object-cover" alt="dummy scan">
+</div>
+{/if}
+
+<div class="p-6 mb-16">
+ {@render children()}
+</div>

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

@@ -0,0 +1,105 @@
+<script lang="ts">
+import { goto } from "$app/navigation";
+import { Hero, IdentityCard } from "$lib/fragments";
+import { Drawer } from "$lib/ui";
+import * as Button from "$lib/ui/Button";
+import { QrCodeIcon } from "@hugeicons/core-free-icons";
+import { HugeiconsIcon } from "@hugeicons/svelte";
+import type { Snippet } from "svelte";
+
+const dummyData = {
+	Name: "John Doe",
+	"Date of birth": "01 - 01 - 1990",
+	"ID submitted": "American Passport",
+	"Passport number": "1234567-US",
+};
+
+let shareQRdrawerOpen = $state(false);
+
+function shareQR() {
+	alert("QR Code shared!");
+	shareQRdrawerOpen = false;
+}
+</script>
+
+
+<Hero
+ title="Good morning!"
+ subtitle="Don't forget to drink water."
+ showSettings
+/>
+
+{#snippet Section(title: string, children: Snippet)}
+ <section class="mt-8">
+ <h4 class="mb-2">{title}</h4>
+ {@render children()}
+ </section>
+{/snippet}
+
+{#snippet eName()}
+ <IdentityCard
+ variant="eName"
+ userId="caa0f630-2413-5aceaa2c-4628ce93e497"
+ viewBtn={() => alert("View button clicked!")}
+ shareBtn={() => shareQRdrawerOpen = true}
+ />
+{/snippet}
+{#snippet ePassport()}
+ <IdentityCard
+ variant="ePassport"
+ viewBtn={() => goto("/ePassport")}
+ userData={dummyData}
+ />
+{/snippet}
+{#snippet eVault()}
+ <IdentityCard
+ variant="eVault"
+ usedStorage={15}
+ totalStorage={100}
+ />
+{/snippet}
+
+{@render Section("eName", eName)}
+{@render Section("ePassport", ePassport)}
+{@render Section("eVault", eVault)}
+
+<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">
+ <div class="bg-white h-[72px] w-[1000px] -rotate-45 absolute top-4"></div>
+ <div class="bg-white h-[72px] w-[1000px] -rotate-45 absolute bottom-4"></div>
+ <img class="z-10" src="/images/dummyQR.png" alt="QR Code" />
+ </div>
+
+ <h4 class="text-center">Share your eName</h4>
+ <p class="text-black-700 text-center">Anyone scanning this can see your eName</p>
+ <div class="flex justify-center items-center mt-4">
+ <Button.Action
+ variant="solid"
+ callback={shareQR}
+ class="w-full"
+ >
+ Share
+ </Button.Action>
+ </div>
+</Drawer>
+
+<Button.Nav href="/scan-qr">
+ <Button.Action
+ variant="solid"
+ onclick={() => alert("Action button clicked!")}
+ class="mx-auto text-nowrap flex gap-8 fixed bottom-5 left-1/2 -translate-x-1/2 z-10"
+ >
+ <HugeiconsIcon
+ size={32}
+ strokeWidth={2}
+ className="mr-2"
+ icon={QrCodeIcon}
+ />
+ Scan to Login
+ </Button.Action>
+</Button.Nav>

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

@@ -0,0 +1,57 @@
+<script lang="ts">
+import { AppNav, IdentityCard } from "$lib/fragments";
+import * as Button from "$lib/ui/Button";
+import { Share05Icon } from "@hugeicons/core-free-icons";
+import { HugeiconsIcon } from "@hugeicons/svelte";
+
+const dummyData = {
+	Name: "John Doe",
+	"Date of birth": "01-01-1990",
+	"ID submitted": "American Passport",
+	"Passport number": "1234567-US",
+};
+
+const secondDummyData = {
+	"Birth Name": "John Doe",
+	"Place of birth": "New York, USA",
+	Nationality: "American",
+	"ID submitted": "American Passport",
+	"Expiry date": "19-12-2027",
+};
+
+function shareEPassport() {
+	alert("EPassport Code shared!");
+}
+</script>
+
+<AppNav title="ePassport" class="mb-8" />
+
+<div>
+ <IdentityCard
+ variant="ePassport"
+ userData={dummyData}
+ class="shadow-lg"
+ />
+ <div class="p-6 pt-12 bg-gray w-full rounded-2xl -mt-8 flex flex-col gap-2">
+ {#each Object.entries(secondDummyData) as [fieldName, value] } 
+ <div class="flex justify-between">
+ <p class="text-black-700 font-normal">{fieldName}</p>
+ <p class="text-black-500 font-medium">{value}</p>
+ </div>
+ {/each}
+ </div>
+</div>
+
+<Button.Action
+ variant="solid"
+ callback={shareEPassport}
+ class="mx-auto text-nowrap flex gap-8 fixed bottom-5 left-1/2 -translate-x-1/2 z-10"
+>
+ <HugeiconsIcon
+ size={32}
+ strokeWidth={2}
+ className="mr-2"
+ icon={Share05Icon}
+ />
+ Share ePassport
+</Button.Action>

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

@@ -6,16 +6,22 @@ import type { HTMLAttributes } from "svelte/elements";
 interface IHeroProps extends HTMLAttributes<HTMLElement> {
 	title?: string;
 	titleClasses?: string;
+	iconColor?: string;
 }
-const { title, titleClasses, ...restProps }: IHeroProps = $props();
+const {
+	title,
+	titleClasses,
+	iconColor = "black",
+	...restProps
+}: IHeroProps = $props();
 const baseClasses = "w-full relative flex justify-center h-14 items-center";
 </script>
 
 <nav {...restProps} class={cn(baseClasses, restProps.class)}>
  <Button.Icon 
  icon={ArrowLeft01Icon}
  iconSize="md"
-iconColor={"black"}
+{iconColor}
  class="absolute left-2"
  onclick={() => window.history.back()}
  />

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

@@ -1,5 +1,6 @@
 <script lang="ts">
 import * as Button from "$lib/ui/Button";
+import { cn } from "$lib/utils";
 import {
 	CheckmarkBadge02Icon,
 	Upload03Icon,
@@ -39,9 +40,11 @@ $effect(() => {
 	state.progressWidth =
  usedStorage > 0 ? `${(usedStorage / totalStorage) * 100}%` : "0%";
 });
+
+const baseClasses = `relative ${variant === "eName" ? "bg-black-900" : variant === "ePassport" ? "bg-primary" : "bg-gray"} rounded-3xl w-full min-h-[150px] text-white overflow-hidden`;
 </script>
 
-<div {...restProps} class="relative {variant === 'eName' ? "bg-black-900" : variant === 'ePassport' ? "bg-primary" : "bg-gray"} rounded-3xl w-full min-h-[150px] text-white overflow-hidden">
+<div {...restProps} class={cn(baseClasses, restProps.class)}>
  <div class="w-full h-full pointer-events-none flex gap-13 justify-end absolute right-15 bottom-20">
  <div class="w-10 {variant === 'eVault' ? "bg-white/40" : "bg-white/10"} h-[300%] rotate-40"></div>
  <div class="w-10 {variant === 'eVault' ? "bg-white/40" : "bg-white/10"} h-[300%] rotate-40"></div>
@@ -55,7 +58,7 @@ $effect(() => {
  <Button.Icon icon={ViewIcon} iconColor={"white"} strokeWidth={2} onclick={viewBtn} />
  </div>
  {:else if variant === 'ePassport'}
- <p class="bg-white text-black flex items-center rounded-4xl px-5 py-2 text-xs font-semibold">HIGH SECURITY</p>
+ <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>
  <Button.Icon icon={ViewIcon} iconColor={"white"} strokeWidth={2} onclick={viewBtn} />
 
  {:else if variant === 'eVault'}
@@ -64,9 +67,9 @@ $effect(() => {
  </div>
  <div>
  {#if variant === "eName"} 
- <p class="text-gray font-light">Your eName</p>
+ <p class="text-gray font-normal">Your eName</p>
  <div class="flex items-center justify-between w-full">
- <p class="text-white w-[60%] font-medium">@{userId}</p>
+ <p class="text-white w-full font-medium">@{userId}</p>
  </div>
  {:else if variant === "ePassport"}
  <div class="flex gap-2 flex-col">
@@ -92,7 +95,4 @@ $effect(() => {
  {/if}
  </div>
  </div>
-</div>
-
-
-
+</div>

infrastructure/eid-wallet/src/lib/ui/Button/ButtonAction.svelte

@@ -5,7 +5,7 @@ import type { HTMLButtonAttributes } from "svelte/elements";
 interface IButtonProps extends HTMLButtonAttributes {
 	variant?: "solid" | "soft" | "danger" | "danger-soft" | "white";
 	isLoading?: boolean;
-	callback?: () => Promise<void>;
+	callback?: () => Promise<void> | void;
 	blockingClick?: boolean;
 	type?: "button" | "submit" | "reset";
 	size?: "sm" | "md";
@@ -15,6 +15,7 @@ const {
 	variant = "solid",
 	isLoading,
 	callback,
+	onclick,
 	blockingClick,
 	type = "button",
 	size = "md",

infrastructure/eid-wallet/src/lib/ui/Button/ButtonIcon.svelte

@@ -6,7 +6,7 @@ import type { HTMLButtonAttributes } from "svelte/elements";
 interface IButtonProps extends HTMLButtonAttributes {
 	icon: IconSvgElement;
 	isLoading?: boolean;
-	callback?: () => Promise<void>;
+	callback?: () => Promise<void> | void;
 	onclick?: () => void;
 	blockingClick?: boolean;
 	type?: "button" | "submit" | "reset";

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

@@ -53,17 +53,6 @@ $effect(() => {
 
 	return () => pane.destroy();
 });
-
-$effect(() => {
-	if (isPaneOpen) {
- pane.present({ animate: true });
-	} else {
- pane.destroy({ animate: true });
-	}
-	drawerElem.addEventListener("click_outside", () => {
- handleClickOutside();
-	});
-});
 </script>
 
 <div
@@ -74,7 +63,7 @@ $effect(() => {
  })}
  onswipe={() => handleSwipe?.(isPaneOpen)}
  bind:this={drawerElem}
- use:clickOutside
+ use:clickOutside={handleClickOutside}
  class={cn(restProps.class)}
 >
  <div class="px-6">

infrastructure/eid-wallet/src/lib/utils/clickOutside.ts

@@ -1,12 +1,13 @@
 /** Dispatch event on click outside of node */
-export const clickOutside = (node: HTMLElement) => {
+export const clickOutside = (node: HTMLElement, callback: () => void) => {
 	const handleClick = (event: Event) => {
- // eslint-disable-next-line @typescript-eslint/ban-ts-comment
- // @ts-ignore
- if (node && !node.contains(event.target) && !event.defaultPrevented) {
- // eslint-disable-next-line @typescript-eslint/ban-ts-comment
- // @ts-ignore
- node.dispatchEvent(new CustomEvent("click_outside", node));
+ if (
+ node &&
+ !node.contains(event.target as Node) &&
+ !event.defaultPrevented
+ ) {
+ callback(); // Call the provided callback
+ node.dispatchEvent(new CustomEvent("click_outside"));
  }
 	};
 

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

@@ -0,0 +1,20 @@
+<script lang="ts">
+import { page } from "$app/state";
+import type { Snippet } from "svelte";
+import type { LayoutData } from "./$types";
+
+let { data, children }: { data: LayoutData; children: Snippet } = $props();
+
+let currentRoute = $derived(page.url.pathname.split("/").pop() || "home");
+</script>
+
+<!-- Dev only: remove this when deploying to production -->
+{#if currentRoute === "scan-qr"}
+<div class="fixed -z-10 bg-black w-screen h-screen top-0">
+ <img src="/images/dummyScan.png" class="opacity-40 w-screen h-screen object-cover" alt="dummy scan">
+</div>
+{/if}
+
+<div class="p-6 mb-16">
+ {@render children()}
+</div>

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

@@ -0,0 +1,105 @@
+<script lang="ts">
+import { goto } from "$app/navigation";
+import { Hero, IdentityCard } from "$lib/fragments";
+import { Drawer } from "$lib/ui";
+import * as Button from "$lib/ui/Button";
+import { QrCodeIcon } from "@hugeicons/core-free-icons";
+import { HugeiconsIcon } from "@hugeicons/svelte";
+import type { Snippet } from "svelte";
+
+const dummyData = {
+	Name: "John Doe",
+	"Date of birth": "01 - 01 - 1990",
+	"ID submitted": "American Passport",
+	"Passport number": "1234567-US",
+};
+
+let shareQRdrawerOpen = $state(false);
+
+function shareQR() {
+	alert("QR Code shared!");
+	shareQRdrawerOpen = false;
+}
+</script>
+
+
+<Hero
+ title="Good morning!"
+ subtitle="Don't forget to drink water."
+ showSettings
+/>
+
+{#snippet Section(title: string, children: Snippet)}
+ <section class="mt-8">
+ <h4 class="mb-2">{title}</h4>
+ {@render children()}
+ </section>
+{/snippet}
+
+{#snippet eName()}
+ <IdentityCard
+ variant="eName"
+ userId="caa0f630-2413-5aceaa2c-4628ce93e497"
+ viewBtn={() => alert("View button clicked!")}
+ shareBtn={() => shareQRdrawerOpen = true}
+ />
+{/snippet}
+{#snippet ePassport()}
+ <IdentityCard
+ variant="ePassport"
+ viewBtn={() => goto("/ePassport")}
+ userData={dummyData}
+ />
+{/snippet}
+{#snippet eVault()}
+ <IdentityCard
+ variant="eVault"
+ usedStorage={15}
+ totalStorage={100}
+ />
+{/snippet}
+
+{@render Section("eName", eName)}
+{@render Section("ePassport", ePassport)}
+{@render Section("eVault", eVault)}
+
+<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">
+ <div class="bg-white h-[72px] w-[1000px] -rotate-45 absolute top-4"></div>
+ <div class="bg-white h-[72px] w-[1000px] -rotate-45 absolute bottom-4"></div>
+ <img class="z-10" src="/images/dummyQR.png" alt="QR Code" />
+ </div>
+
+ <h4 class="text-center">Share your eName</h4>
+ <p class="text-black-700 text-center">Anyone scanning this can see your eName</p>
+ <div class="flex justify-center items-center mt-4">
+ <Button.Action
+ variant="solid"
+ callback={shareQR}
+ class="w-full"
+ >
+ Share
+ </Button.Action>
+ </div>
+</Drawer>
+
+<Button.Nav href="/scan-qr">
+ <Button.Action
+ variant="solid"
+ onclick={() => alert("Action button clicked!")}
+ class="mx-auto text-nowrap flex gap-8 fixed bottom-5 left-1/2 -translate-x-1/2 z-10"
+ >
+ <HugeiconsIcon
+ size={32}
+ strokeWidth={2}
+ className="mr-2"
+ icon={QrCodeIcon}
+ />
+ Scan to Login
+ </Button.Action>
+</Button.Nav>

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

@@ -0,0 +1,57 @@
+<script lang="ts">
+import { AppNav, IdentityCard } from "$lib/fragments";
+import * as Button from "$lib/ui/Button";
+import { Share05Icon } from "@hugeicons/core-free-icons";
+import { HugeiconsIcon } from "@hugeicons/svelte";
+
+const dummyData = {
+	Name: "John Doe",
+	"Date of birth": "01-01-1990",
+	"ID submitted": "American Passport",
+	"Passport number": "1234567-US",
+};
+
+const secondDummyData = {
+	"Birth Name": "John Doe",
+	"Place of birth": "New York, USA",
+	Nationality: "American",
+	"ID submitted": "American Passport",
+	"Expiry date": "19-12-2027",
+};
+
+function shareEPassport() {
+	alert("EPassport Code shared!");
+}
+</script>
+
+<AppNav title="ePassport" class="mb-8" />
+
+<div>
+ <IdentityCard
+ variant="ePassport"
+ userData={dummyData}
+ class="shadow-lg"
+ />
+ <div class="p-6 pt-12 bg-gray w-full rounded-2xl -mt-8 flex flex-col gap-2">
+ {#each Object.entries(secondDummyData) as [fieldName, value] } 
+ <div class="flex justify-between">
+ <p class="text-black-700 font-normal">{fieldName}</p>
+ <p class="text-black-500 font-medium">{value}</p>
+ </div>
+ {/each}
+ </div>
+</div>
+
+<Button.Action
+ variant="solid"
+ callback={shareEPassport}
+ class="mx-auto text-nowrap flex gap-8 fixed bottom-5 left-1/2 -translate-x-1/2 z-10"
+>
+ <HugeiconsIcon
+ size={32}
+ strokeWidth={2}
+ className="mr-2"
+ icon={Share05Icon}
+ />
+ Share ePassport
+</Button.Action>

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

@@ -6,16 +6,22 @@ import type { HTMLAttributes } from "svelte/elements";
 interface IHeroProps extends HTMLAttributes<HTMLElement> {
 	title?: string;
 	titleClasses?: string;
+	iconColor?: string;
 }
-const { title, titleClasses, ...restProps }: IHeroProps = $props();
+const {
+	title,
+	titleClasses,
+	iconColor = "black",
+	...restProps
+}: IHeroProps = $props();
 const baseClasses = "w-full relative flex justify-center h-14 items-center";
 </script>
 
 <nav {...restProps} class={cn(baseClasses, restProps.class)}>
  <Button.Icon 
  icon={ArrowLeft01Icon}
  iconSize="md"
-iconColor={"black"}
+{iconColor}
  class="absolute left-2"
  onclick={() => window.history.back()}
  />

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

@@ -1,5 +1,6 @@
 <script lang="ts">
 import * as Button from "$lib/ui/Button";
+import { cn } from "$lib/utils";
 import {
 	CheckmarkBadge02Icon,
 	Upload03Icon,
@@ -39,9 +40,11 @@ $effect(() => {
 	state.progressWidth =
  usedStorage > 0 ? `${(usedStorage / totalStorage) * 100}%` : "0%";
 });
+
+const baseClasses = `relative ${variant === "eName" ? "bg-black-900" : variant === "ePassport" ? "bg-primary" : "bg-gray"} rounded-3xl w-full min-h-[150px] text-white overflow-hidden`;
 </script>
 
-<div {...restProps} class="relative {variant === 'eName' ? "bg-black-900" : variant === 'ePassport' ? "bg-primary" : "bg-gray"} rounded-3xl w-full min-h-[150px] text-white overflow-hidden">
+<div {...restProps} class={cn(baseClasses, restProps.class)}>
  <div class="w-full h-full pointer-events-none flex gap-13 justify-end absolute right-15 bottom-20">
  <div class="w-10 {variant === 'eVault' ? "bg-white/40" : "bg-white/10"} h-[300%] rotate-40"></div>
  <div class="w-10 {variant === 'eVault' ? "bg-white/40" : "bg-white/10"} h-[300%] rotate-40"></div>
@@ -55,7 +58,7 @@ $effect(() => {
  <Button.Icon icon={ViewIcon} iconColor={"white"} strokeWidth={2} onclick={viewBtn} />
  </div>
  {:else if variant === 'ePassport'}
- <p class="bg-white text-black flex items-center rounded-4xl px-5 py-2 text-xs font-semibold">HIGH SECURITY</p>
+ <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>
  <Button.Icon icon={ViewIcon} iconColor={"white"} strokeWidth={2} onclick={viewBtn} />
 
  {:else if variant === 'eVault'}
@@ -64,9 +67,9 @@ $effect(() => {
  </div>
  <div>
  {#if variant === "eName"} 
- <p class="text-gray font-light">Your eName</p>
+ <p class="text-gray font-normal">Your eName</p>
  <div class="flex items-center justify-between w-full">
- <p class="text-white w-[60%] font-medium">@{userId}</p>
+ <p class="text-white w-full font-medium">@{userId}</p>
  </div>
  {:else if variant === "ePassport"}
  <div class="flex gap-2 flex-col">
@@ -92,7 +95,4 @@ $effect(() => {
  {/if}
  </div>
  </div>
-</div>
-
-
-
+</div>

infrastructure/eid-wallet/src/lib/ui/Button/ButtonAction.svelte

@@ -5,7 +5,7 @@ import type { HTMLButtonAttributes } from "svelte/elements";
 interface IButtonProps extends HTMLButtonAttributes {
 	variant?: "solid" | "soft" | "danger" | "danger-soft" | "white";
 	isLoading?: boolean;
-	callback?: () => Promise<void>;
+	callback?: () => Promise<void> | void;
 	blockingClick?: boolean;
 	type?: "button" | "submit" | "reset";
 	size?: "sm" | "md";
@@ -15,6 +15,7 @@ const {
 	variant = "solid",
 	isLoading,
 	callback,
+	onclick,
 	blockingClick,
 	type = "button",
 	size = "md",

infrastructure/eid-wallet/src/lib/ui/Button/ButtonIcon.svelte

@@ -6,7 +6,7 @@ import type { HTMLButtonAttributes } from "svelte/elements";
 interface IButtonProps extends HTMLButtonAttributes {
 	icon: IconSvgElement;
 	isLoading?: boolean;
-	callback?: () => Promise<void>;
+	callback?: () => Promise<void> | void;
 	onclick?: () => void;
 	blockingClick?: boolean;
 	type?: "button" | "submit" | "reset";

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

@@ -53,17 +53,6 @@ $effect(() => {
 
 	return () => pane.destroy();
 });
-
-$effect(() => {
-	if (isPaneOpen) {
- pane.present({ animate: true });
-	} else {
- pane.destroy({ animate: true });
-	}
-	drawerElem.addEventListener("click_outside", () => {
- handleClickOutside();
-	});
-});
 </script>
 
 <div
@@ -74,7 +63,7 @@ $effect(() => {
  })}
  onswipe={() => handleSwipe?.(isPaneOpen)}
  bind:this={drawerElem}
- use:clickOutside
+ use:clickOutside={handleClickOutside}
  class={cn(restProps.class)}
 >
  <div class="px-6">

infrastructure/eid-wallet/src/lib/utils/clickOutside.ts

@@ -1,12 +1,13 @@
 /** Dispatch event on click outside of node */
-export const clickOutside = (node: HTMLElement) => {
+export const clickOutside = (node: HTMLElement, callback: () => void) => {
 	const handleClick = (event: Event) => {
- // eslint-disable-next-line @typescript-eslint/ban-ts-comment
- // @ts-ignore
- if (node && !node.contains(event.target) && !event.defaultPrevented) {
- // eslint-disable-next-line @typescript-eslint/ban-ts-comment
- // @ts-ignore
- node.dispatchEvent(new CustomEvent("click_outside", node));
+ if (
+ node &&
+ !node.contains(event.target as Node) &&
+ !event.defaultPrevented
+ ) {
+ callback(); // Call the provided callback
+ node.dispatchEvent(new CustomEvent("click_outside"));
  }
 	};
 

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

@@ -0,0 +1,20 @@
+<script lang="ts">
+import { page } from "$app/state";
+import type { Snippet } from "svelte";
+import type { LayoutData } from "./$types";
+
+let { data, children }: { data: LayoutData; children: Snippet } = $props();
+
+let currentRoute = $derived(page.url.pathname.split("/").pop() || "home");
+</script>
+
+<!-- Dev only: remove this when deploying to production -->
+{#if currentRoute === "scan-qr"}
+<div class="fixed -z-10 bg-black w-screen h-screen top-0">
+ <img src="/images/dummyScan.png" class="opacity-40 w-screen h-screen object-cover" alt="dummy scan">
+</div>
+{/if}
+
+<div class="p-6 mb-16">
+ {@render children()}
+</div>

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

@@ -0,0 +1,105 @@
+<script lang="ts">
+import { goto } from "$app/navigation";
+import { Hero, IdentityCard } from "$lib/fragments";
+import { Drawer } from "$lib/ui";
+import * as Button from "$lib/ui/Button";
+import { QrCodeIcon } from "@hugeicons/core-free-icons";
+import { HugeiconsIcon } from "@hugeicons/svelte";
+import type { Snippet } from "svelte";
+
+const dummyData = {
+	Name: "John Doe",
+	"Date of birth": "01 - 01 - 1990",
+	"ID submitted": "American Passport",
+	"Passport number": "1234567-US",
+};
+
+let shareQRdrawerOpen = $state(false);
+
+function shareQR() {
+	alert("QR Code shared!");
+	shareQRdrawerOpen = false;
+}
+</script>
+
+
+<Hero
+ title="Good morning!"
+ subtitle="Don't forget to drink water."
+ showSettings
+/>
+
+{#snippet Section(title: string, children: Snippet)}
+ <section class="mt-8">
+ <h4 class="mb-2">{title}</h4>
+ {@render children()}
+ </section>
+{/snippet}
+
+{#snippet eName()}
+ <IdentityCard
+ variant="eName"
+ userId="caa0f630-2413-5aceaa2c-4628ce93e497"
+ viewBtn={() => alert("View button clicked!")}
+ shareBtn={() => shareQRdrawerOpen = true}
+ />
+{/snippet}
+{#snippet ePassport()}
+ <IdentityCard
+ variant="ePassport"
+ viewBtn={() => goto("/ePassport")}
+ userData={dummyData}
+ />
+{/snippet}
+{#snippet eVault()}
+ <IdentityCard
+ variant="eVault"
+ usedStorage={15}
+ totalStorage={100}
+ />
+{/snippet}
+
+{@render Section("eName", eName)}
+{@render Section("ePassport", ePassport)}
+{@render Section("eVault", eVault)}
+
+<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">
+ <div class="bg-white h-[72px] w-[1000px] -rotate-45 absolute top-4"></div>
+ <div class="bg-white h-[72px] w-[1000px] -rotate-45 absolute bottom-4"></div>
+ <img class="z-10" src="/images/dummyQR.png" alt="QR Code" />
+ </div>
+
+ <h4 class="text-center">Share your eName</h4>
+ <p class="text-black-700 text-center">Anyone scanning this can see your eName</p>
+ <div class="flex justify-center items-center mt-4">
+ <Button.Action
+ variant="solid"
+ callback={shareQR}
+ class="w-full"
+ >
+ Share
+ </Button.Action>
+ </div>
+</Drawer>
+
+<Button.Nav href="/scan-qr">
+ <Button.Action
+ variant="solid"
+ onclick={() => alert("Action button clicked!")}
+ class="mx-auto text-nowrap flex gap-8 fixed bottom-5 left-1/2 -translate-x-1/2 z-10"
+ >
+ <HugeiconsIcon
+ size={32}
+ strokeWidth={2}
+ className="mr-2"
+ icon={QrCodeIcon}
+ />
+ Scan to Login
+ </Button.Action>
+</Button.Nav>

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

@@ -0,0 +1,57 @@
+<script lang="ts">
+import { AppNav, IdentityCard } from "$lib/fragments";
+import * as Button from "$lib/ui/Button";
+import { Share05Icon } from "@hugeicons/core-free-icons";
+import { HugeiconsIcon } from "@hugeicons/svelte";
+
+const dummyData = {
+	Name: "John Doe",
+	"Date of birth": "01-01-1990",
+	"ID submitted": "American Passport",
+	"Passport number": "1234567-US",
+};
+
+const secondDummyData = {
+	"Birth Name": "John Doe",
+	"Place of birth": "New York, USA",
+	Nationality: "American",
+	"ID submitted": "American Passport",
+	"Expiry date": "19-12-2027",
+};
+
+function shareEPassport() {
+	alert("EPassport Code shared!");
+}
+</script>
+
+<AppNav title="ePassport" class="mb-8" />
+
+<div>
+ <IdentityCard
+ variant="ePassport"
+ userData={dummyData}
+ class="shadow-lg"
+ />
+ <div class="p-6 pt-12 bg-gray w-full rounded-2xl -mt-8 flex flex-col gap-2">
+ {#each Object.entries(secondDummyData) as [fieldName, value] } 
+ <div class="flex justify-between">
+ <p class="text-black-700 font-normal">{fieldName}</p>
+ <p class="text-black-500 font-medium">{value}</p>
+ </div>
+ {/each}
+ </div>
+</div>
+
+<Button.Action
+ variant="solid"
+ callback={shareEPassport}
+ class="mx-auto text-nowrap flex gap-8 fixed bottom-5 left-1/2 -translate-x-1/2 z-10"
+>
+ <HugeiconsIcon
+ size={32}
+ strokeWidth={2}
+ className="mr-2"
+ icon={Share05Icon}
+ />
+ Share ePassport
+</Button.Action>

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

@@ -6,16 +6,22 @@ import type { HTMLAttributes } from "svelte/elements";
 interface IHeroProps extends HTMLAttributes<HTMLElement> {
 	title?: string;
 	titleClasses?: string;
+	iconColor?: string;
 }
-const { title, titleClasses, ...restProps }: IHeroProps = $props();
+const {
+	title,
+	titleClasses,
+	iconColor = "black",
+	...restProps
+}: IHeroProps = $props();
 const baseClasses = "w-full relative flex justify-center h-14 items-center";
 </script>
 
 <nav {...restProps} class={cn(baseClasses, restProps.class)}>
  <Button.Icon 
  icon={ArrowLeft01Icon}
  iconSize="md"
-iconColor={"black"}
+{iconColor}
  class="absolute left-2"
  onclick={() => window.history.back()}
  />

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

@@ -1,5 +1,6 @@
 <script lang="ts">
 import * as Button from "$lib/ui/Button";
+import { cn } from "$lib/utils";
 import {
 	CheckmarkBadge02Icon,
 	Upload03Icon,
@@ -39,9 +40,11 @@ $effect(() => {
 	state.progressWidth =
  usedStorage > 0 ? `${(usedStorage / totalStorage) * 100}%` : "0%";
 });
+
+const baseClasses = `relative ${variant === "eName" ? "bg-black-900" : variant === "ePassport" ? "bg-primary" : "bg-gray"} rounded-3xl w-full min-h-[150px] text-white overflow-hidden`;
 </script>
 
-<div {...restProps} class="relative {variant === 'eName' ? "bg-black-900" : variant === 'ePassport' ? "bg-primary" : "bg-gray"} rounded-3xl w-full min-h-[150px] text-white overflow-hidden">
+<div {...restProps} class={cn(baseClasses, restProps.class)}>
  <div class="w-full h-full pointer-events-none flex gap-13 justify-end absolute right-15 bottom-20">
  <div class="w-10 {variant === 'eVault' ? "bg-white/40" : "bg-white/10"} h-[300%] rotate-40"></div>
  <div class="w-10 {variant === 'eVault' ? "bg-white/40" : "bg-white/10"} h-[300%] rotate-40"></div>
@@ -55,7 +58,7 @@ $effect(() => {
  <Button.Icon icon={ViewIcon} iconColor={"white"} strokeWidth={2} onclick={viewBtn} />
  </div>
  {:else if variant === 'ePassport'}
- <p class="bg-white text-black flex items-center rounded-4xl px-5 py-2 text-xs font-semibold">HIGH SECURITY</p>
+ <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>
  <Button.Icon icon={ViewIcon} iconColor={"white"} strokeWidth={2} onclick={viewBtn} />
 
  {:else if variant === 'eVault'}
@@ -64,9 +67,9 @@ $effect(() => {
  </div>
  <div>
  {#if variant === "eName"} 
- <p class="text-gray font-light">Your eName</p>
+ <p class="text-gray font-normal">Your eName</p>
  <div class="flex items-center justify-between w-full">
- <p class="text-white w-[60%] font-medium">@{userId}</p>
+ <p class="text-white w-full font-medium">@{userId}</p>
  </div>
  {:else if variant === "ePassport"}
  <div class="flex gap-2 flex-col">
@@ -92,7 +95,4 @@ $effect(() => {
  {/if}
  </div>
  </div>
-</div>
-
-
-
+</div>

infrastructure/eid-wallet/src/lib/ui/Button/ButtonAction.svelte

@@ -5,7 +5,7 @@ import type { HTMLButtonAttributes } from "svelte/elements";
 interface IButtonProps extends HTMLButtonAttributes {
 	variant?: "solid" | "soft" | "danger" | "danger-soft" | "white";
 	isLoading?: boolean;
-	callback?: () => Promise<void>;
+	callback?: () => Promise<void> | void;
 	blockingClick?: boolean;
 	type?: "button" | "submit" | "reset";
 	size?: "sm" | "md";
@@ -15,6 +15,7 @@ const {
 	variant = "solid",
 	isLoading,
 	callback,
+	onclick,
 	blockingClick,
 	type = "button",
 	size = "md",

infrastructure/eid-wallet/src/lib/ui/Button/ButtonIcon.svelte

@@ -6,7 +6,7 @@ import type { HTMLButtonAttributes } from "svelte/elements";
 interface IButtonProps extends HTMLButtonAttributes {
 	icon: IconSvgElement;
 	isLoading?: boolean;
-	callback?: () => Promise<void>;
+	callback?: () => Promise<void> | void;
 	onclick?: () => void;
 	blockingClick?: boolean;
 	type?: "button" | "submit" | "reset";

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

@@ -53,17 +53,6 @@ $effect(() => {
 
 	return () => pane.destroy();
 });
-
-$effect(() => {
-	if (isPaneOpen) {
- pane.present({ animate: true });
-	} else {
- pane.destroy({ animate: true });
-	}
-	drawerElem.addEventListener("click_outside", () => {
- handleClickOutside();
-	});
-});
 </script>
 
 <div
@@ -74,7 +63,7 @@ $effect(() => {
  })}
  onswipe={() => handleSwipe?.(isPaneOpen)}
  bind:this={drawerElem}
- use:clickOutside
+ use:clickOutside={handleClickOutside}
  class={cn(restProps.class)}
 >
  <div class="px-6">

infrastructure/eid-wallet/src/lib/utils/clickOutside.ts

@@ -1,12 +1,13 @@
 /** Dispatch event on click outside of node */
-export const clickOutside = (node: HTMLElement) => {
+export const clickOutside = (node: HTMLElement, callback: () => void) => {
 	const handleClick = (event: Event) => {
- // eslint-disable-next-line @typescript-eslint/ban-ts-comment
- // @ts-ignore
- if (node && !node.contains(event.target) && !event.defaultPrevented) {
- // eslint-disable-next-line @typescript-eslint/ban-ts-comment
- // @ts-ignore
- node.dispatchEvent(new CustomEvent("click_outside", node));
+ if (
+ node &&
+ !node.contains(event.target as Node) &&
+ !event.defaultPrevented
+ ) {
+ callback(); // Call the provided callback
+ node.dispatchEvent(new CustomEvent("click_outside"));
  }
 	};
 

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

@@ -0,0 +1,20 @@
+<script lang="ts">
+import { page } from "$app/state";
+import type { Snippet } from "svelte";
+import type { LayoutData } from "./$types";
+
+let { data, children }: { data: LayoutData; children: Snippet } = $props();
+
+let currentRoute = $derived(page.url.pathname.split("/").pop() || "home");
+</script>
+
+<!-- Dev only: remove this when deploying to production -->
+{#if currentRoute === "scan-qr"}
+<div class="fixed -z-10 bg-black w-screen h-screen top-0">
+ <img src="/images/dummyScan.png" class="opacity-40 w-screen h-screen object-cover" alt="dummy scan">
+</div>
+{/if}
+
+<div class="p-6 mb-16">
+ {@render children()}
+</div>

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

@@ -0,0 +1,105 @@
+<script lang="ts">
+import { goto } from "$app/navigation";
+import { Hero, IdentityCard } from "$lib/fragments";
+import { Drawer } from "$lib/ui";
+import * as Button from "$lib/ui/Button";
+import { QrCodeIcon } from "@hugeicons/core-free-icons";
+import { HugeiconsIcon } from "@hugeicons/svelte";
+import type { Snippet } from "svelte";
+
+const dummyData = {
+	Name: "John Doe",
+	"Date of birth": "01 - 01 - 1990",
+	"ID submitted": "American Passport",
+	"Passport number": "1234567-US",
+};
+
+let shareQRdrawerOpen = $state(false);
+
+function shareQR() {
+	alert("QR Code shared!");
+	shareQRdrawerOpen = false;
+}
+</script>
+
+
+<Hero
+ title="Good morning!"
+ subtitle="Don't forget to drink water."
+ showSettings
+/>
+
+{#snippet Section(title: string, children: Snippet)}
+ <section class="mt-8">
+ <h4 class="mb-2">{title}</h4>
+ {@render children()}
+ </section>
+{/snippet}
+
+{#snippet eName()}
+ <IdentityCard
+ variant="eName"
+ userId="caa0f630-2413-5aceaa2c-4628ce93e497"
+ viewBtn={() => alert("View button clicked!")}
+ shareBtn={() => shareQRdrawerOpen = true}
+ />
+{/snippet}
+{#snippet ePassport()}
+ <IdentityCard
+ variant="ePassport"
+ viewBtn={() => goto("/ePassport")}
+ userData={dummyData}
+ />
+{/snippet}
+{#snippet eVault()}
+ <IdentityCard
+ variant="eVault"
+ usedStorage={15}
+ totalStorage={100}
+ />
+{/snippet}
+
+{@render Section("eName", eName)}
+{@render Section("ePassport", ePassport)}
+{@render Section("eVault", eVault)}
+
+<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">
+ <div class="bg-white h-[72px] w-[1000px] -rotate-45 absolute top-4"></div>
+ <div class="bg-white h-[72px] w-[1000px] -rotate-45 absolute bottom-4"></div>
+ <img class="z-10" src="/images/dummyQR.png" alt="QR Code" />
+ </div>
+
+ <h4 class="text-center">Share your eName</h4>
+ <p class="text-black-700 text-center">Anyone scanning this can see your eName</p>
+ <div class="flex justify-center items-center mt-4">
+ <Button.Action
+ variant="solid"
+ callback={shareQR}
+ class="w-full"
+ >
+ Share
+ </Button.Action>
+ </div>
+</Drawer>
+
+<Button.Nav href="/scan-qr">
+ <Button.Action
+ variant="solid"
+ onclick={() => alert("Action button clicked!")}
+ class="mx-auto text-nowrap flex gap-8 fixed bottom-5 left-1/2 -translate-x-1/2 z-10"
+ >
+ <HugeiconsIcon
+ size={32}
+ strokeWidth={2}
+ className="mr-2"
+ icon={QrCodeIcon}
+ />
+ Scan to Login
+ </Button.Action>
+</Button.Nav>

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

@@ -0,0 +1,57 @@
+<script lang="ts">
+import { AppNav, IdentityCard } from "$lib/fragments";
+import * as Button from "$lib/ui/Button";
+import { Share05Icon } from "@hugeicons/core-free-icons";
+import { HugeiconsIcon } from "@hugeicons/svelte";
+
+const dummyData = {
+	Name: "John Doe",
+	"Date of birth": "01-01-1990",
+	"ID submitted": "American Passport",
+	"Passport number": "1234567-US",
+};
+
+const secondDummyData = {
+	"Birth Name": "John Doe",
+	"Place of birth": "New York, USA",
+	Nationality: "American",
+	"ID submitted": "American Passport",
+	"Expiry date": "19-12-2027",
+};
+
+function shareEPassport() {
+	alert("EPassport Code shared!");
+}
+</script>
+
+<AppNav title="ePassport" class="mb-8" />
+
+<div>
+ <IdentityCard
+ variant="ePassport"
+ userData={dummyData}
+ class="shadow-lg"
+ />
+ <div class="p-6 pt-12 bg-gray w-full rounded-2xl -mt-8 flex flex-col gap-2">
+ {#each Object.entries(secondDummyData) as [fieldName, value] } 
+ <div class="flex justify-between">
+ <p class="text-black-700 font-normal">{fieldName}</p>
+ <p class="text-black-500 font-medium">{value}</p>
+ </div>
+ {/each}
+ </div>
+</div>
+
+<Button.Action
+ variant="solid"
+ callback={shareEPassport}
+ class="mx-auto text-nowrap flex gap-8 fixed bottom-5 left-1/2 -translate-x-1/2 z-10"
+>
+ <HugeiconsIcon
+ size={32}
+ strokeWidth={2}
+ className="mr-2"
+ icon={Share05Icon}
+ />
+ Share ePassport
+</Button.Action>

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

@@ -6,16 +6,22 @@ import type { HTMLAttributes } from "svelte/elements";
 interface IHeroProps extends HTMLAttributes<HTMLElement> {
 	title?: string;
 	titleClasses?: string;
+	iconColor?: string;
 }
-const { title, titleClasses, ...restProps }: IHeroProps = $props();
+const {
+	title,
+	titleClasses,
+	iconColor = "black",
+	...restProps
+}: IHeroProps = $props();
 const baseClasses = "w-full relative flex justify-center h-14 items-center";
 </script>
 
 <nav {...restProps} class={cn(baseClasses, restProps.class)}>
  <Button.Icon 
  icon={ArrowLeft01Icon}
  iconSize="md"
-iconColor={"black"}
+{iconColor}
  class="absolute left-2"
  onclick={() => window.history.back()}
  />

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

@@ -1,5 +1,6 @@
 <script lang="ts">
 import * as Button from "$lib/ui/Button";
+import { cn } from "$lib/utils";
 import {
 	CheckmarkBadge02Icon,
 	Upload03Icon,
@@ -39,9 +40,11 @@ $effect(() => {
 	state.progressWidth =
  usedStorage > 0 ? `${(usedStorage / totalStorage) * 100}%` : "0%";
 });
+
+const baseClasses = `relative ${variant === "eName" ? "bg-black-900" : variant === "ePassport" ? "bg-primary" : "bg-gray"} rounded-3xl w-full min-h-[150px] text-white overflow-hidden`;
 </script>
 
-<div {...restProps} class="relative {variant === 'eName' ? "bg-black-900" : variant === 'ePassport' ? "bg-primary" : "bg-gray"} rounded-3xl w-full min-h-[150px] text-white overflow-hidden">
+<div {...restProps} class={cn(baseClasses, restProps.class)}>
  <div class="w-full h-full pointer-events-none flex gap-13 justify-end absolute right-15 bottom-20">
  <div class="w-10 {variant === 'eVault' ? "bg-white/40" : "bg-white/10"} h-[300%] rotate-40"></div>
  <div class="w-10 {variant === 'eVault' ? "bg-white/40" : "bg-white/10"} h-[300%] rotate-40"></div>
@@ -55,7 +58,7 @@ $effect(() => {
  <Button.Icon icon={ViewIcon} iconColor={"white"} strokeWidth={2} onclick={viewBtn} />
  </div>
  {:else if variant === 'ePassport'}
- <p class="bg-white text-black flex items-center rounded-4xl px-5 py-2 text-xs font-semibold">HIGH SECURITY</p>
+ <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>
  <Button.Icon icon={ViewIcon} iconColor={"white"} strokeWidth={2} onclick={viewBtn} />
 
  {:else if variant === 'eVault'}
@@ -64,9 +67,9 @@ $effect(() => {
  </div>
  <div>
  {#if variant === "eName"} 
- <p class="text-gray font-light">Your eName</p>
+ <p class="text-gray font-normal">Your eName</p>
  <div class="flex items-center justify-between w-full">
- <p class="text-white w-[60%] font-medium">@{userId}</p>
+ <p class="text-white w-full font-medium">@{userId}</p>
  </div>
  {:else if variant === "ePassport"}
  <div class="flex gap-2 flex-col">
@@ -92,7 +95,4 @@ $effect(() => {
  {/if}
  </div>
  </div>
-</div>
-
-
-
+</div>

infrastructure/eid-wallet/src/lib/ui/Button/ButtonAction.svelte

@@ -5,7 +5,7 @@ import type { HTMLButtonAttributes } from "svelte/elements";
 interface IButtonProps extends HTMLButtonAttributes {
 	variant?: "solid" | "soft" | "danger" | "danger-soft" | "white";
 	isLoading?: boolean;
-	callback?: () => Promise<void>;
+	callback?: () => Promise<void> | void;
 	blockingClick?: boolean;
 	type?: "button" | "submit" | "reset";
 	size?: "sm" | "md";
@@ -15,6 +15,7 @@ const {
 	variant = "solid",
 	isLoading,
 	callback,
+	onclick,
 	blockingClick,
 	type = "button",
 	size = "md",

infrastructure/eid-wallet/src/lib/ui/Button/ButtonIcon.svelte

@@ -6,7 +6,7 @@ import type { HTMLButtonAttributes } from "svelte/elements";
 interface IButtonProps extends HTMLButtonAttributes {
 	icon: IconSvgElement;
 	isLoading?: boolean;
-	callback?: () => Promise<void>;
+	callback?: () => Promise<void> | void;
 	onclick?: () => void;
 	blockingClick?: boolean;
 	type?: "button" | "submit" | "reset";

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

@@ -53,17 +53,6 @@ $effect(() => {
 
 	return () => pane.destroy();
 });
-
-$effect(() => {
-	if (isPaneOpen) {
- pane.present({ animate: true });
-	} else {
- pane.destroy({ animate: true });
-	}
-	drawerElem.addEventListener("click_outside", () => {
- handleClickOutside();
-	});
-});
 </script>
 
 <div
@@ -74,7 +63,7 @@ $effect(() => {
  })}
  onswipe={() => handleSwipe?.(isPaneOpen)}
  bind:this={drawerElem}
- use:clickOutside
+ use:clickOutside={handleClickOutside}
  class={cn(restProps.class)}
 >
  <div class="px-6">

infrastructure/eid-wallet/src/lib/utils/clickOutside.ts

@@ -1,12 +1,13 @@
 /** Dispatch event on click outside of node */
-export const clickOutside = (node: HTMLElement) => {
+export const clickOutside = (node: HTMLElement, callback: () => void) => {
 	const handleClick = (event: Event) => {
- // eslint-disable-next-line @typescript-eslint/ban-ts-comment
- // @ts-ignore
- if (node && !node.contains(event.target) && !event.defaultPrevented) {
- // eslint-disable-next-line @typescript-eslint/ban-ts-comment
- // @ts-ignore
- node.dispatchEvent(new CustomEvent("click_outside", node));
+ if (
+ node &&
+ !node.contains(event.target as Node) &&
+ !event.defaultPrevented
+ ) {
+ callback(); // Call the provided callback
+ node.dispatchEvent(new CustomEvent("click_outside"));
  }
 	};
 

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

@@ -0,0 +1,20 @@
+<script lang="ts">
+import { page } from "$app/state";
+import type { Snippet } from "svelte";
+import type { LayoutData } from "./$types";
+
+let { data, children }: { data: LayoutData; children: Snippet } = $props();
+
+let currentRoute = $derived(page.url.pathname.split("/").pop() || "home");
+</script>
+
+<!-- Dev only: remove this when deploying to production -->
+{#if currentRoute === "scan-qr"}
+<div class="fixed -z-10 bg-black w-screen h-screen top-0">
+ <img src="/images/dummyScan.png" class="opacity-40 w-screen h-screen object-cover" alt="dummy scan">
+</div>
+{/if}
+
+<div class="p-6 mb-16">
+ {@render children()}
+</div>

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

@@ -0,0 +1,105 @@
+<script lang="ts">
+import { goto } from "$app/navigation";
+import { Hero, IdentityCard } from "$lib/fragments";
+import { Drawer } from "$lib/ui";
+import * as Button from "$lib/ui/Button";
+import { QrCodeIcon } from "@hugeicons/core-free-icons";
+import { HugeiconsIcon } from "@hugeicons/svelte";
+import type { Snippet } from "svelte";
+
+const dummyData = {
+	Name: "John Doe",
+	"Date of birth": "01 - 01 - 1990",
+	"ID submitted": "American Passport",
+	"Passport number": "1234567-US",
+};
+
+let shareQRdrawerOpen = $state(false);
+
+function shareQR() {
+	alert("QR Code shared!");
+	shareQRdrawerOpen = false;
+}
+</script>
+
+
+<Hero
+ title="Good morning!"
+ subtitle="Don't forget to drink water."
+ showSettings
+/>
+
+{#snippet Section(title: string, children: Snippet)}
+ <section class="mt-8">
+ <h4 class="mb-2">{title}</h4>
+ {@render children()}
+ </section>
+{/snippet}
+
+{#snippet eName()}
+ <IdentityCard
+ variant="eName"
+ userId="caa0f630-2413-5aceaa2c-4628ce93e497"
+ viewBtn={() => alert("View button clicked!")}
+ shareBtn={() => shareQRdrawerOpen = true}
+ />
+{/snippet}
+{#snippet ePassport()}
+ <IdentityCard
+ variant="ePassport"
+ viewBtn={() => goto("/ePassport")}
+ userData={dummyData}
+ />
+{/snippet}
+{#snippet eVault()}
+ <IdentityCard
+ variant="eVault"
+ usedStorage={15}
+ totalStorage={100}
+ />
+{/snippet}
+
+{@render Section("eName", eName)}
+{@render Section("ePassport", ePassport)}
+{@render Section("eVault", eVault)}
+
+<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">
+ <div class="bg-white h-[72px] w-[1000px] -rotate-45 absolute top-4"></div>
+ <div class="bg-white h-[72px] w-[1000px] -rotate-45 absolute bottom-4"></div>
+ <img class="z-10" src="/images/dummyQR.png" alt="QR Code" />
+ </div>
+
+ <h4 class="text-center">Share your eName</h4>
+ <p class="text-black-700 text-center">Anyone scanning this can see your eName</p>
+ <div class="flex justify-center items-center mt-4">
+ <Button.Action
+ variant="solid"
+ callback={shareQR}
+ class="w-full"
+ >
+ Share
+ </Button.Action>
+ </div>
+</Drawer>
+
+<Button.Nav href="/scan-qr">
+ <Button.Action
+ variant="solid"
+ onclick={() => alert("Action button clicked!")}
+ class="mx-auto text-nowrap flex gap-8 fixed bottom-5 left-1/2 -translate-x-1/2 z-10"
+ >
+ <HugeiconsIcon
+ size={32}
+ strokeWidth={2}
+ className="mr-2"
+ icon={QrCodeIcon}
+ />
+ Scan to Login
+ </Button.Action>
+</Button.Nav>

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

@@ -0,0 +1,57 @@
+<script lang="ts">
+import { AppNav, IdentityCard } from "$lib/fragments";
+import * as Button from "$lib/ui/Button";
+import { Share05Icon } from "@hugeicons/core-free-icons";
+import { HugeiconsIcon } from "@hugeicons/svelte";
+
+const dummyData = {
+	Name: "John Doe",
+	"Date of birth": "01-01-1990",
+	"ID submitted": "American Passport",
+	"Passport number": "1234567-US",
+};
+
+const secondDummyData = {
+	"Birth Name": "John Doe",
+	"Place of birth": "New York, USA",
+	Nationality: "American",
+	"ID submitted": "American Passport",
+	"Expiry date": "19-12-2027",
+};
+
+function shareEPassport() {
+	alert("EPassport Code shared!");
+}
+</script>
+
+<AppNav title="ePassport" class="mb-8" />
+
+<div>
+ <IdentityCard
+ variant="ePassport"
+ userData={dummyData}
+ class="shadow-lg"
+ />
+ <div class="p-6 pt-12 bg-gray w-full rounded-2xl -mt-8 flex flex-col gap-2">
+ {#each Object.entries(secondDummyData) as [fieldName, value] } 
+ <div class="flex justify-between">
+ <p class="text-black-700 font-normal">{fieldName}</p>
+ <p class="text-black-500 font-medium">{value}</p>
+ </div>
+ {/each}
+ </div>
+</div>
+
+<Button.Action
+ variant="solid"
+ callback={shareEPassport}
+ class="mx-auto text-nowrap flex gap-8 fixed bottom-5 left-1/2 -translate-x-1/2 z-10"
+>
+ <HugeiconsIcon
+ size={32}
+ strokeWidth={2}
+ className="mr-2"
+ icon={Share05Icon}
+ />
+ Share ePassport
+</Button.Action>

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

@@ -6,16 +6,22 @@ import type { HTMLAttributes } from "svelte/elements";
 interface IHeroProps extends HTMLAttributes<HTMLElement> {
 	title?: string;
 	titleClasses?: string;
+	iconColor?: string;
 }
-const { title, titleClasses, ...restProps }: IHeroProps = $props();
+const {
+	title,
+	titleClasses,
+	iconColor = "black",
+	...restProps
+}: IHeroProps = $props();
 const baseClasses = "w-full relative flex justify-center h-14 items-center";
 </script>
 
 <nav {...restProps} class={cn(baseClasses, restProps.class)}>
  <Button.Icon 
  icon={ArrowLeft01Icon}
  iconSize="md"
-iconColor={"black"}
+{iconColor}
  class="absolute left-2"
  onclick={() => window.history.back()}
  />

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

@@ -1,5 +1,6 @@
 <script lang="ts">
 import * as Button from "$lib/ui/Button";
+import { cn } from "$lib/utils";
 import {
 	CheckmarkBadge02Icon,
 	Upload03Icon,
@@ -39,9 +40,11 @@ $effect(() => {
 	state.progressWidth =
  usedStorage > 0 ? `${(usedStorage / totalStorage) * 100}%` : "0%";
 });
+
+const baseClasses = `relative ${variant === "eName" ? "bg-black-900" : variant === "ePassport" ? "bg-primary" : "bg-gray"} rounded-3xl w-full min-h-[150px] text-white overflow-hidden`;
 </script>
 
-<div {...restProps} class="relative {variant === 'eName' ? "bg-black-900" : variant === 'ePassport' ? "bg-primary" : "bg-gray"} rounded-3xl w-full min-h-[150px] text-white overflow-hidden">
+<div {...restProps} class={cn(baseClasses, restProps.class)}>
  <div class="w-full h-full pointer-events-none flex gap-13 justify-end absolute right-15 bottom-20">
  <div class="w-10 {variant === 'eVault' ? "bg-white/40" : "bg-white/10"} h-[300%] rotate-40"></div>
  <div class="w-10 {variant === 'eVault' ? "bg-white/40" : "bg-white/10"} h-[300%] rotate-40"></div>
@@ -55,7 +58,7 @@ $effect(() => {
  <Button.Icon icon={ViewIcon} iconColor={"white"} strokeWidth={2} onclick={viewBtn} />
  </div>
  {:else if variant === 'ePassport'}
- <p class="bg-white text-black flex items-center rounded-4xl px-5 py-2 text-xs font-semibold">HIGH SECURITY</p>
+ <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>
  <Button.Icon icon={ViewIcon} iconColor={"white"} strokeWidth={2} onclick={viewBtn} />
 
  {:else if variant === 'eVault'}
@@ -64,9 +67,9 @@ $effect(() => {
  </div>
  <div>
  {#if variant === "eName"} 
- <p class="text-gray font-light">Your eName</p>
+ <p class="text-gray font-normal">Your eName</p>
  <div class="flex items-center justify-between w-full">
- <p class="text-white w-[60%] font-medium">@{userId}</p>
+ <p class="text-white w-full font-medium">@{userId}</p>
  </div>
  {:else if variant === "ePassport"}
  <div class="flex gap-2 flex-col">
@@ -92,7 +95,4 @@ $effect(() => {
  {/if}
  </div>
  </div>
-</div>
-
-
-
+</div>

infrastructure/eid-wallet/src/lib/ui/Button/ButtonAction.svelte

@@ -5,7 +5,7 @@ import type { HTMLButtonAttributes } from "svelte/elements";
 interface IButtonProps extends HTMLButtonAttributes {
 	variant?: "solid" | "soft" | "danger" | "danger-soft" | "white";
 	isLoading?: boolean;
-	callback?: () => Promise<void>;
+	callback?: () => Promise<void> | void;
 	blockingClick?: boolean;
 	type?: "button" | "submit" | "reset";
 	size?: "sm" | "md";
@@ -15,6 +15,7 @@ const {
 	variant = "solid",
 	isLoading,
 	callback,
+	onclick,
 	blockingClick,
 	type = "button",
 	size = "md",

infrastructure/eid-wallet/src/lib/ui/Button/ButtonIcon.svelte

@@ -6,7 +6,7 @@ import type { HTMLButtonAttributes } from "svelte/elements";
 interface IButtonProps extends HTMLButtonAttributes {
 	icon: IconSvgElement;
 	isLoading?: boolean;
-	callback?: () => Promise<void>;
+	callback?: () => Promise<void> | void;
 	onclick?: () => void;
 	blockingClick?: boolean;
 	type?: "button" | "submit" | "reset";

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

@@ -53,17 +53,6 @@ $effect(() => {
 
 	return () => pane.destroy();
 });
-
-$effect(() => {
-	if (isPaneOpen) {
- pane.present({ animate: true });
-	} else {
- pane.destroy({ animate: true });
-	}
-	drawerElem.addEventListener("click_outside", () => {
- handleClickOutside();
-	});
-});
 </script>
 
 <div
@@ -74,7 +63,7 @@ $effect(() => {
  })}
  onswipe={() => handleSwipe?.(isPaneOpen)}
  bind:this={drawerElem}
- use:clickOutside
+ use:clickOutside={handleClickOutside}
  class={cn(restProps.class)}
 >
  <div class="px-6">

infrastructure/eid-wallet/src/lib/utils/clickOutside.ts

@@ -1,12 +1,13 @@
 /** Dispatch event on click outside of node */
-export const clickOutside = (node: HTMLElement) => {
+export const clickOutside = (node: HTMLElement, callback: () => void) => {
 	const handleClick = (event: Event) => {
- // eslint-disable-next-line @typescript-eslint/ban-ts-comment
- // @ts-ignore
- if (node && !node.contains(event.target) && !event.defaultPrevented) {
- // eslint-disable-next-line @typescript-eslint/ban-ts-comment
- // @ts-ignore
- node.dispatchEvent(new CustomEvent("click_outside", node));
+ if (
+ node &&
+ !node.contains(event.target as Node) &&
+ !event.defaultPrevented
+ ) {
+ callback(); // Call the provided callback
+ node.dispatchEvent(new CustomEvent("click_outside"));
  }
 	};
 

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

@@ -0,0 +1,20 @@
+<script lang="ts">
+import { page } from "$app/state";
+import type { Snippet } from "svelte";
+import type { LayoutData } from "./$types";
+
+let { data, children }: { data: LayoutData; children: Snippet } = $props();
+
+let currentRoute = $derived(page.url.pathname.split("/").pop() || "home");
+</script>
+
+<!-- Dev only: remove this when deploying to production -->
+{#if currentRoute === "scan-qr"}
+<div class="fixed -z-10 bg-black w-screen h-screen top-0">
+ <img src="/images/dummyScan.png" class="opacity-40 w-screen h-screen object-cover" alt="dummy scan">
+</div>
+{/if}
+
+<div class="p-6 mb-16">
+ {@render children()}
+</div>

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

@@ -0,0 +1,105 @@
+<script lang="ts">
+import { goto } from "$app/navigation";
+import { Hero, IdentityCard } from "$lib/fragments";
+import { Drawer } from "$lib/ui";
+import * as Button from "$lib/ui/Button";
+import { QrCodeIcon } from "@hugeicons/core-free-icons";
+import { HugeiconsIcon } from "@hugeicons/svelte";
+import type { Snippet } from "svelte";
+
+const dummyData = {
+	Name: "John Doe",
+	"Date of birth": "01 - 01 - 1990",
+	"ID submitted": "American Passport",
+	"Passport number": "1234567-US",
+};
+
+let shareQRdrawerOpen = $state(false);
+
+function shareQR() {
+	alert("QR Code shared!");
+	shareQRdrawerOpen = false;
+}
+</script>
+
+
+<Hero
+ title="Good morning!"
+ subtitle="Don't forget to drink water."
+ showSettings
+/>
+
+{#snippet Section(title: string, children: Snippet)}
+ <section class="mt-8">
+ <h4 class="mb-2">{title}</h4>
+ {@render children()}
+ </section>
+{/snippet}
+
+{#snippet eName()}
+ <IdentityCard
+ variant="eName"
+ userId="caa0f630-2413-5aceaa2c-4628ce93e497"
+ viewBtn={() => alert("View button clicked!")}
+ shareBtn={() => shareQRdrawerOpen = true}
+ />
+{/snippet}
+{#snippet ePassport()}
+ <IdentityCard
+ variant="ePassport"
+ viewBtn={() => goto("/ePassport")}
+ userData={dummyData}
+ />
+{/snippet}
+{#snippet eVault()}
+ <IdentityCard
+ variant="eVault"
+ usedStorage={15}
+ totalStorage={100}
+ />
+{/snippet}
+
+{@render Section("eName", eName)}
+{@render Section("ePassport", ePassport)}
+{@render Section("eVault", eVault)}
+
+<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">
+ <div class="bg-white h-[72px] w-[1000px] -rotate-45 absolute top-4"></div>
+ <div class="bg-white h-[72px] w-[1000px] -rotate-45 absolute bottom-4"></div>
+ <img class="z-10" src="/images/dummyQR.png" alt="QR Code" />
+ </div>
+
+ <h4 class="text-center">Share your eName</h4>
+ <p class="text-black-700 text-center">Anyone scanning this can see your eName</p>
+ <div class="flex justify-center items-center mt-4">
+ <Button.Action
+ variant="solid"
+ callback={shareQR}
+ class="w-full"
+ >
+ Share
+ </Button.Action>
+ </div>
+</Drawer>
+
+<Button.Nav href="/scan-qr">
+ <Button.Action
+ variant="solid"
+ onclick={() => alert("Action button clicked!")}
+ class="mx-auto text-nowrap flex gap-8 fixed bottom-5 left-1/2 -translate-x-1/2 z-10"
+ >
+ <HugeiconsIcon
+ size={32}
+ strokeWidth={2}
+ className="mr-2"
+ icon={QrCodeIcon}
+ />
+ Scan to Login
+ </Button.Action>
+</Button.Nav>

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

@@ -0,0 +1,57 @@
+<script lang="ts">
+import { AppNav, IdentityCard } from "$lib/fragments";
+import * as Button from "$lib/ui/Button";
+import { Share05Icon } from "@hugeicons/core-free-icons";
+import { HugeiconsIcon } from "@hugeicons/svelte";
+
+const dummyData = {
+	Name: "John Doe",
+	"Date of birth": "01-01-1990",
+	"ID submitted": "American Passport",
+	"Passport number": "1234567-US",
+};
+
+const secondDummyData = {
+	"Birth Name": "John Doe",
+	"Place of birth": "New York, USA",
+	Nationality: "American",
+	"ID submitted": "American Passport",
+	"Expiry date": "19-12-2027",
+};
+
+function shareEPassport() {
+	alert("EPassport Code shared!");
+}
+</script>
+
+<AppNav title="ePassport" class="mb-8" />
+
+<div>
+ <IdentityCard
+ variant="ePassport"
+ userData={dummyData}
+ class="shadow-lg"
+ />
+ <div class="p-6 pt-12 bg-gray w-full rounded-2xl -mt-8 flex flex-col gap-2">
+ {#each Object.entries(secondDummyData) as [fieldName, value] } 
+ <div class="flex justify-between">
+ <p class="text-black-700 font-normal">{fieldName}</p>
+ <p class="text-black-500 font-medium">{value}</p>
+ </div>
+ {/each}
+ </div>
+</div>
+
+<Button.Action
+ variant="solid"
+ callback={shareEPassport}
+ class="mx-auto text-nowrap flex gap-8 fixed bottom-5 left-1/2 -translate-x-1/2 z-10"
+>
+ <HugeiconsIcon
+ size={32}
+ strokeWidth={2}
+ className="mr-2"
+ icon={Share05Icon}
+ />
+ Share ePassport
+</Button.Action>

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

@@ -6,16 +6,22 @@ import type { HTMLAttributes } from "svelte/elements";
 interface IHeroProps extends HTMLAttributes<HTMLElement> {
 	title?: string;
 	titleClasses?: string;
+	iconColor?: string;
 }
-const { title, titleClasses, ...restProps }: IHeroProps = $props();
+const {
+	title,
+	titleClasses,
+	iconColor = "black",
+	...restProps
+}: IHeroProps = $props();
 const baseClasses = "w-full relative flex justify-center h-14 items-center";
 </script>
 
 <nav {...restProps} class={cn(baseClasses, restProps.class)}>
  <Button.Icon 
  icon={ArrowLeft01Icon}
  iconSize="md"
-iconColor={"black"}
+{iconColor}
  class="absolute left-2"
  onclick={() => window.history.back()}
  />

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

@@ -1,5 +1,6 @@
 <script lang="ts">
 import * as Button from "$lib/ui/Button";
+import { cn } from "$lib/utils";
 import {
 	CheckmarkBadge02Icon,
 	Upload03Icon,
@@ -39,9 +40,11 @@ $effect(() => {
 	state.progressWidth =
  usedStorage > 0 ? `${(usedStorage / totalStorage) * 100}%` : "0%";
 });
+
+const baseClasses = `relative ${variant === "eName" ? "bg-black-900" : variant === "ePassport" ? "bg-primary" : "bg-gray"} rounded-3xl w-full min-h-[150px] text-white overflow-hidden`;
 </script>
 
-<div {...restProps} class="relative {variant === 'eName' ? "bg-black-900" : variant === 'ePassport' ? "bg-primary" : "bg-gray"} rounded-3xl w-full min-h-[150px] text-white overflow-hidden">
+<div {...restProps} class={cn(baseClasses, restProps.class)}>
  <div class="w-full h-full pointer-events-none flex gap-13 justify-end absolute right-15 bottom-20">
  <div class="w-10 {variant === 'eVault' ? "bg-white/40" : "bg-white/10"} h-[300%] rotate-40"></div>
  <div class="w-10 {variant === 'eVault' ? "bg-white/40" : "bg-white/10"} h-[300%] rotate-40"></div>
@@ -55,7 +58,7 @@ $effect(() => {
  <Button.Icon icon={ViewIcon} iconColor={"white"} strokeWidth={2} onclick={viewBtn} />
  </div>
  {:else if variant === 'ePassport'}
- <p class="bg-white text-black flex items-center rounded-4xl px-5 py-2 text-xs font-semibold">HIGH SECURITY</p>
+ <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>
  <Button.Icon icon={ViewIcon} iconColor={"white"} strokeWidth={2} onclick={viewBtn} />
 
  {:else if variant === 'eVault'}
@@ -64,9 +67,9 @@ $effect(() => {
  </div>
  <div>
  {#if variant === "eName"} 
- <p class="text-gray font-light">Your eName</p>
+ <p class="text-gray font-normal">Your eName</p>
  <div class="flex items-center justify-between w-full">
- <p class="text-white w-[60%] font-medium">@{userId}</p>
+ <p class="text-white w-full font-medium">@{userId}</p>
  </div>
  {:else if variant === "ePassport"}
  <div class="flex gap-2 flex-col">
@@ -92,7 +95,4 @@ $effect(() => {
  {/if}
  </div>
  </div>
-</div>
-
-
-
+</div>

infrastructure/eid-wallet/src/lib/ui/Button/ButtonAction.svelte

@@ -5,7 +5,7 @@ import type { HTMLButtonAttributes } from "svelte/elements";
 interface IButtonProps extends HTMLButtonAttributes {
 	variant?: "solid" | "soft" | "danger" | "danger-soft" | "white";
 	isLoading?: boolean;
-	callback?: () => Promise<void>;
+	callback?: () => Promise<void> | void;
 	blockingClick?: boolean;
 	type?: "button" | "submit" | "reset";
 	size?: "sm" | "md";
@@ -15,6 +15,7 @@ const {
 	variant = "solid",
 	isLoading,
 	callback,
+	onclick,
 	blockingClick,
 	type = "button",
 	size = "md",

infrastructure/eid-wallet/src/lib/ui/Button/ButtonIcon.svelte

@@ -6,7 +6,7 @@ import type { HTMLButtonAttributes } from "svelte/elements";
 interface IButtonProps extends HTMLButtonAttributes {
 	icon: IconSvgElement;
 	isLoading?: boolean;
-	callback?: () => Promise<void>;
+	callback?: () => Promise<void> | void;
 	onclick?: () => void;
 	blockingClick?: boolean;
 	type?: "button" | "submit" | "reset";

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

@@ -53,17 +53,6 @@ $effect(() => {
 
 	return () => pane.destroy();
 });
-
-$effect(() => {
-	if (isPaneOpen) {
- pane.present({ animate: true });
-	} else {
- pane.destroy({ animate: true });
-	}
-	drawerElem.addEventListener("click_outside", () => {
- handleClickOutside();
-	});
-});
 </script>
 
 <div
@@ -74,7 +63,7 @@ $effect(() => {
  })}
  onswipe={() => handleSwipe?.(isPaneOpen)}
  bind:this={drawerElem}
- use:clickOutside
+ use:clickOutside={handleClickOutside}
  class={cn(restProps.class)}
 >
  <div class="px-6">

infrastructure/eid-wallet/src/lib/utils/clickOutside.ts

@@ -1,12 +1,13 @@
 /** Dispatch event on click outside of node */
-export const clickOutside = (node: HTMLElement) => {
+export const clickOutside = (node: HTMLElement, callback: () => void) => {
 	const handleClick = (event: Event) => {
- // eslint-disable-next-line @typescript-eslint/ban-ts-comment
- // @ts-ignore
- if (node && !node.contains(event.target) && !event.defaultPrevented) {
- // eslint-disable-next-line @typescript-eslint/ban-ts-comment
- // @ts-ignore
- node.dispatchEvent(new CustomEvent("click_outside", node));
+ if (
+ node &&
+ !node.contains(event.target as Node) &&
+ !event.defaultPrevented
+ ) {
+ callback(); // Call the provided callback
+ node.dispatchEvent(new CustomEvent("click_outside"));
  }
 	};
 

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

@@ -0,0 +1,20 @@
+<script lang="ts">
+import { page } from "$app/state";
+import type { Snippet } from "svelte";
+import type { LayoutData } from "./$types";
+
+let { data, children }: { data: LayoutData; children: Snippet } = $props();
+
+let currentRoute = $derived(page.url.pathname.split("/").pop() || "home");
+</script>
+
+<!-- Dev only: remove this when deploying to production -->
+{#if currentRoute === "scan-qr"}
+<div class="fixed -z-10 bg-black w-screen h-screen top-0">
+ <img src="/images/dummyScan.png" class="opacity-40 w-screen h-screen object-cover" alt="dummy scan">
+</div>
+{/if}
+
+<div class="p-6 mb-16">
+ {@render children()}
+</div>

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

@@ -0,0 +1,105 @@
+<script lang="ts">
+import { goto } from "$app/navigation";
+import { Hero, IdentityCard } from "$lib/fragments";
+import { Drawer } from "$lib/ui";
+import * as Button from "$lib/ui/Button";
+import { QrCodeIcon } from "@hugeicons/core-free-icons";
+import { HugeiconsIcon } from "@hugeicons/svelte";
+import type { Snippet } from "svelte";
+
+const dummyData = {
+	Name: "John Doe",
+	"Date of birth": "01 - 01 - 1990",
+	"ID submitted": "American Passport",
+	"Passport number": "1234567-US",
+};
+
+let shareQRdrawerOpen = $state(false);
+
+function shareQR() {
+	alert("QR Code shared!");
+	shareQRdrawerOpen = false;
+}
+</script>
+
+
+<Hero
+ title="Good morning!"
+ subtitle="Don't forget to drink water."
+ showSettings
+/>
+
+{#snippet Section(title: string, children: Snippet)}
+ <section class="mt-8">
+ <h4 class="mb-2">{title}</h4>
+ {@render children()}
+ </section>
+{/snippet}
+
+{#snippet eName()}
+ <IdentityCard
+ variant="eName"
+ userId="caa0f630-2413-5aceaa2c-4628ce93e497"
+ viewBtn={() => alert("View button clicked!")}
+ shareBtn={() => shareQRdrawerOpen = true}
+ />
+{/snippet}
+{#snippet ePassport()}
+ <IdentityCard
+ variant="ePassport"
+ viewBtn={() => goto("/ePassport")}
+ userData={dummyData}
+ />
+{/snippet}
+{#snippet eVault()}
+ <IdentityCard
+ variant="eVault"
+ usedStorage={15}
+ totalStorage={100}
+ />
+{/snippet}
+
+{@render Section("eName", eName)}
+{@render Section("ePassport", ePassport)}
+{@render Section("eVault", eVault)}
+
+<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">
+ <div class="bg-white h-[72px] w-[1000px] -rotate-45 absolute top-4"></div>
+ <div class="bg-white h-[72px] w-[1000px] -rotate-45 absolute bottom-4"></div>
+ <img class="z-10" src="/images/dummyQR.png" alt="QR Code" />
+ </div>
+
+ <h4 class="text-center">Share your eName</h4>
+ <p class="text-black-700 text-center">Anyone scanning this can see your eName</p>
+ <div class="flex justify-center items-center mt-4">
+ <Button.Action
+ variant="solid"
+ callback={shareQR}
+ class="w-full"
+ >
+ Share
+ </Button.Action>
+ </div>
+</Drawer>
+
+<Button.Nav href="/scan-qr">
+ <Button.Action
+ variant="solid"
+ onclick={() => alert("Action button clicked!")}
+ class="mx-auto text-nowrap flex gap-8 fixed bottom-5 left-1/2 -translate-x-1/2 z-10"
+ >
+ <HugeiconsIcon
+ size={32}
+ strokeWidth={2}
+ className="mr-2"
+ icon={QrCodeIcon}
+ />
+ Scan to Login
+ </Button.Action>
+</Button.Nav>

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

@@ -0,0 +1,57 @@
+<script lang="ts">
+import { AppNav, IdentityCard } from "$lib/fragments";
+import * as Button from "$lib/ui/Button";
+import { Share05Icon } from "@hugeicons/core-free-icons";
+import { HugeiconsIcon } from "@hugeicons/svelte";
+
+const dummyData = {
+	Name: "John Doe",
+	"Date of birth": "01-01-1990",
+	"ID submitted": "American Passport",
+	"Passport number": "1234567-US",
+};
+
+const secondDummyData = {
+	"Birth Name": "John Doe",
+	"Place of birth": "New York, USA",
+	Nationality: "American",
+	"ID submitted": "American Passport",
+	"Expiry date": "19-12-2027",
+};
+
+function shareEPassport() {
+	alert("EPassport Code shared!");
+}
+</script>
+
+<AppNav title="ePassport" class="mb-8" />
+
+<div>
+ <IdentityCard
+ variant="ePassport"
+ userData={dummyData}
+ class="shadow-lg"
+ />
+ <div class="p-6 pt-12 bg-gray w-full rounded-2xl -mt-8 flex flex-col gap-2">
+ {#each Object.entries(secondDummyData) as [fieldName, value] } 
+ <div class="flex justify-between">
+ <p class="text-black-700 font-normal">{fieldName}</p>
+ <p class="text-black-500 font-medium">{value}</p>
+ </div>
+ {/each}
+ </div>
+</div>
+
+<Button.Action
+ variant="solid"
+ callback={shareEPassport}
+ class="mx-auto text-nowrap flex gap-8 fixed bottom-5 left-1/2 -translate-x-1/2 z-10"
+>
+ <HugeiconsIcon
+ size={32}
+ strokeWidth={2}
+ className="mr-2"
+ icon={Share05Icon}
+ />
+ Share ePassport
+</Button.Action>