Skip to content

Commit 000b198

Browse files
BekibooBekiboo
committed
Refactor main page from 1200+ to 200+ lines
1 parent 745d5ca commit 000b198

10 files changed

Lines changed: 1065 additions & 998 deletions

File tree

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

Lines changed: 31 additions & 998 deletions
Large diffs are not rendered by default.

‎infrastructure/eid-wallet/src/routes/(app)/main/components/AppsMarketplace.svelte‎

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
<script lang="ts">
2+
import { ArrowRight01Icon } from "@hugeicons/core-free-icons";
3+
import { HugeiconsIcon } from "@hugeicons/svelte";
4+
5+
interface IAppsMarketplaceProps {
6+
href?: string;
7+
}
8+
9+
const {
10+
href = "https://marketplace.w3ds.metastate.foundation/",
11+
}: IAppsMarketplaceProps = $props();
12+
</script>
13+
14+
<section class="mt-2">
15+
<a
16+
{href}
17+
target="_blank"
18+
rel="noopener noreferrer"
19+
class="flex items-center gap-1 mb-3 text-black-900 active:opacity-70"
20+
>
21+
<h3 class="font-semibold">Apps marketplace</h3>
22+
<HugeiconsIcon icon={ArrowRight01Icon} size={18} strokeWidth={2} />
23+
</a>
24+
<div class="grid grid-cols-3 gap-3">
25+
<div class="bg-blue-50 rounded-2xl p-3 flex flex-col items-start">
26+
<div
27+
class="w-10 h-10 rounded-xl bg-blue-500 text-white flex items-center justify-center font-extrabold text-lg mb-2"
28+
>
29+
B
30+
</div>
31+
<p class="font-semibold text-black-900 leading-tight">Blasby</p>
32+
<p class="text-xs text-black-500 leading-tight">Social</p>
33+
</div>
34+
<div class="bg-pink-50 rounded-2xl p-3 flex flex-col items-start">
35+
<div
36+
class="w-10 h-10 rounded-xl bg-pink-500 text-white flex items-center justify-center font-extrabold text-lg mb-2"
37+
>
38+
P
39+
</div>
40+
<p class="font-semibold text-black-900 leading-tight">Pictique</p>
41+
<p class="text-xs text-black-500 leading-tight">Social</p>
42+
</div>
43+
<div class="bg-red-50 rounded-2xl p-3 flex flex-col items-start">
44+
<div
45+
class="w-10 h-10 rounded-xl bg-red-500 text-white flex items-center justify-center font-extrabold text-lg mb-2"
46+
>
47+
E
48+
</div>
49+
<p class="font-semibold text-black-900 leading-tight">eVoting</p>
50+
<p class="text-xs text-black-500 leading-tight">Governance</p>
51+
</div>
52+
</div>
53+
</section>

‎infrastructure/eid-wallet/src/routes/(app)/main/components/BindingDocuments.svelte‎

Lines changed: 119 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,119 @@
1+
<script lang="ts">
2+
import {
3+
Agreement02Icon,
4+
IdentificationIcon,
5+
InformationCircleIcon,
6+
UserIcon,
7+
} from "@hugeicons/core-free-icons";
8+
import { HugeiconsIcon } from "@hugeicons/svelte";
9+
10+
interface IBindingDocumentsProps {
11+
onlegalid?: () => void;
12+
onpersonal?: () => void;
13+
onsocialinvite?: () => void;
14+
oninfo?: () => void;
15+
}
16+
17+
const {
18+
onlegalid,
19+
onpersonal,
20+
onsocialinvite,
21+
oninfo,
22+
}: IBindingDocumentsProps = $props();
23+
</script>
24+
25+
<section class="bg-white rounded-2xl border border-black-100 p-4 shadow-sm">
26+
<header class="flex items-center justify-between mb-3">
27+
<h3 class="font-semibold text-black-900">Binding Documents</h3>
28+
<button
29+
type="button"
30+
aria-label="About binding documents"
31+
onclick={oninfo}
32+
class="text-black-500 active:opacity-60"
33+
>
34+
<HugeiconsIcon
35+
icon={InformationCircleIcon}
36+
size={18}
37+
strokeWidth={2}
38+
/>
39+
</button>
40+
</header>
41+
<div class="flex flex-col gap-2">
42+
<div class="flex items-center gap-3 bg-gray rounded-xl p-2.5">
43+
<div
44+
class="w-10 h-10 rounded-full bg-yellow-100 flex items-center justify-center text-yellow-700 shrink-0"
45+
>
46+
<HugeiconsIcon
47+
icon={IdentificationIcon}
48+
size={20}
49+
strokeWidth={2}
50+
/>
51+
</div>
52+
<div class="flex-1 min-w-0">
53+
<p class="font-semibold text-black-900 leading-tight">
54+
Legal ID
55+
</p>
56+
<p class="text-xs text-black-500 leading-tight">
57+
Any legal doc
58+
</p>
59+
</div>
60+
<button
61+
type="button"
62+
onclick={onlegalid}
63+
class="bg-black-100 text-black-700 text-[10px] font-bold uppercase tracking-wide px-4 py-1.5 rounded-full active:opacity-70 shrink-0"
64+
>
65+
Add
66+
</button>
67+
</div>
68+
69+
<div class="flex items-center gap-3 bg-gray rounded-xl p-2.5">
70+
<div
71+
class="w-10 h-10 rounded-full bg-primary-100 flex items-center justify-center text-primary shrink-0"
72+
>
73+
<HugeiconsIcon icon={UserIcon} size={20} strokeWidth={2} />
74+
</div>
75+
<div class="flex-1 min-w-0">
76+
<p class="font-semibold text-black-900 leading-tight">
77+
Personal
78+
</p>
79+
<p class="text-xs text-black-500 leading-tight">
80+
Idenity marks
81+
</p>
82+
</div>
83+
<button
84+
type="button"
85+
onclick={onpersonal}
86+
class="bg-black-100 text-black-700 text-[10px] font-bold uppercase tracking-wide px-4 py-1.5 rounded-full active:opacity-70 shrink-0"
87+
>
88+
Add
89+
</button>
90+
</div>
91+
92+
<div class="flex items-center gap-3 bg-gray rounded-xl p-2.5">
93+
<div
94+
class="w-10 h-10 rounded-full bg-orange-100 flex items-center justify-center text-orange-700 shrink-0"
95+
>
96+
<HugeiconsIcon
97+
icon={Agreement02Icon}
98+
size={20}
99+
strokeWidth={2}
100+
/>
101+
</div>
102+
<div class="flex-1 min-w-0">
103+
<p class="font-semibold text-black-900 leading-tight">
104+
Social binding
105+
</p>
106+
<p class="text-xs text-primary leading-tight">
107+
New level of trust
108+
</p>
109+
</div>
110+
<button
111+
type="button"
112+
onclick={onsocialinvite}
113+
class="bg-primary text-white text-[10px] font-bold uppercase tracking-wide px-4 py-1.5 rounded-full active:opacity-80 shrink-0"
114+
>
115+
Invite
116+
</button>
117+
</div>
118+
</div>
119+
</section>

‎infrastructure/eid-wallet/src/routes/(app)/main/components/ENameCard.svelte‎

Lines changed: 89 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,89 @@
1+
<script lang="ts">
2+
import { BottomSheet } from "$lib/ui";
3+
import * as Button from "$lib/ui/Button";
4+
import { Copy01Icon, QrCodeIcon } from "@hugeicons/core-free-icons";
5+
import { HugeiconsIcon } from "@hugeicons/svelte";
6+
import QrCode from "svelte-qrcode";
7+
8+
interface IENameCardProps {
9+
ename: string | undefined;
10+
/** Called with a message to surface as a toast (copy success/failure). */
11+
ontoast?: (message: string) => void;
12+
}
13+
14+
const { ename, ontoast }: IENameCardProps = $props();
15+
16+
let shareQRdrawerOpen = $state(false);
17+
18+
async function copyEName() {
19+
if (!ename) return;
20+
try {
21+
await navigator.clipboard.writeText(ename);
22+
ontoast?.("eName copied to clipboard!");
23+
} catch (error) {
24+
console.error("Failed to copy eName:", error);
25+
ontoast?.("Failed to copy eName");
26+
}
27+
}
28+
29+
function shareQR() {
30+
alert("QR Code shared!");
31+
shareQRdrawerOpen = false;
32+
}
33+
</script>
34+
35+
<section class="bg-white rounded-2xl border border-black-100 p-4 shadow-sm">
36+
<div class="flex items-center justify-between gap-3 mb-1">
37+
<p class="text-sm text-black-500">Your eName</p>
38+
<span
39+
class="bg-black-100 text-black-700 text-[10px] font-bold uppercase tracking-wide px-3 py-1 rounded-full"
40+
>
41+
Unverified ID
42+
</span>
43+
</div>
44+
<div class="flex items-start justify-between gap-3">
45+
<p class="font-medium text-black-900 break-all flex-1 leading-snug">
46+
{ename ?? "Loading..."}
47+
</p>
48+
<div class="flex items-center gap-2 shrink-0 pt-0.5">
49+
<button
50+
type="button"
51+
onclick={copyEName}
52+
aria-label="Copy eName"
53+
class="text-black-700 active:opacity-60"
54+
>
55+
<HugeiconsIcon icon={Copy01Icon} size={20} strokeWidth={2} />
56+
</button>
57+
<button
58+
type="button"
59+
onclick={() => (shareQRdrawerOpen = true)}
60+
aria-label="Show QR code"
61+
class="text-black-700 active:opacity-60"
62+
>
63+
<HugeiconsIcon icon={QrCodeIcon} size={20} strokeWidth={2} />
64+
</button>
65+
</div>
66+
</div>
67+
</section>
68+
69+
<BottomSheet
70+
title="Scan QR Code"
71+
bind:isOpen={shareQRdrawerOpen}
72+
class="flex flex-col gap-4 items-center justify-center"
73+
>
74+
<div
75+
class="flex justify-center relative items-center overflow-hidden h-full rounded-3xl p-8 pt-0"
76+
>
77+
<QrCode size={320} value={ename ?? ""} />
78+
</div>
79+
80+
<h4 class="text-center mt-2">Share your eName</h4>
81+
<p class="text-black-700 text-center">
82+
Anyone scanning this can see your eName
83+
</p>
84+
<div class="flex justify-center items-center mt-4">
85+
<Button.Action variant="solid" callback={shareQR} class="w-full">
86+
Share
87+
</Button.Action>
88+
</div>
89+
</BottomSheet>

‎infrastructure/eid-wallet/src/routes/(app)/main/components/EVaultCard.svelte‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
<script lang="ts">
2+
import { InformationCircleIcon } from "@hugeicons/core-free-icons";
3+
import { HugeiconsIcon } from "@hugeicons/svelte";
4+
5+
interface IEVaultCardProps {
6+
/** Available storage label, e.g. "80 Gb". */
7+
available: string;
8+
oninfo?: () => void;
9+
}
10+
11+
const { available, oninfo }: IEVaultCardProps = $props();
12+
</script>
13+
14+
<section
15+
class="bg-white rounded-2xl border border-black-100 p-4 shadow-sm flex items-start justify-between gap-3"
16+
>
17+
<div>
18+
<p class="text-sm text-black-500">Your eVault</p>
19+
<p class="text-2xl font-bold text-black-900 mt-0.5">
20+
{available}
21+
<span class="font-normal text-black-500">available</span>
22+
</p>
23+
</div>
24+
<button
25+
type="button"
26+
aria-label="About eVault"
27+
onclick={oninfo}
28+
class="text-black-500 active:opacity-60 mt-0.5"
29+
>
30+
<HugeiconsIcon
31+
icon={InformationCircleIcon}
32+
size={18}
33+
strokeWidth={2}
34+
/>
35+
</button>
36+
</section>

‎infrastructure/eid-wallet/src/routes/(app)/main/components/Greeting.svelte‎

Lines changed: 69 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
1+
<script lang="ts">
2+
import * as Button from "$lib/ui/Button";
3+
import {
4+
ChatNotificationIcon,
5+
Edit02Icon,
6+
Settings02Icon,
7+
} from "@hugeicons/core-free-icons";
8+
import { HugeiconsIcon } from "@hugeicons/svelte";
9+
10+
interface IGreetingProps {
11+
greeting: string;
12+
name: string;
13+
notificationCount: number;
14+
onedit?: () => void;
15+
}
16+
17+
const { greeting, name, notificationCount, onedit }: IGreetingProps = $props();
18+
</script>
19+
20+
<header class="flex items-start justify-between pt-2">
21+
<div>
22+
<h1 class="text-3xl font-light text-black-500 leading-tight">
23+
{greeting}
24+
</h1>
25+
<div class="flex items-center gap-2 mt-1">
26+
<h2 class="text-3xl font-bold text-black-900 leading-tight">
27+
{name}
28+
</h2>
29+
<button
30+
type="button"
31+
aria-label="Edit name"
32+
onclick={onedit}
33+
class="text-black-500 active:opacity-60"
34+
>
35+
<HugeiconsIcon icon={Edit02Icon} size={20} strokeWidth={2} />
36+
</button>
37+
</div>
38+
</div>
39+
40+
<div class="flex items-center gap-2 shrink-0">
41+
<Button.Nav
42+
href="/notifications"
43+
class="relative"
44+
aria-label={notificationCount > 0
45+
? `Notifications (${notificationCount} unread)`
46+
: "Notifications"}
47+
>
48+
<HugeiconsIcon
49+
size={26}
50+
strokeWidth={2}
51+
icon={ChatNotificationIcon}
52+
/>
53+
{#if notificationCount > 0}
54+
<span
55+
class="absolute -top-0.5 -right-0.5 bg-red-500 text-white text-[10px] font-bold rounded-full min-w-4.5 h-4.5 flex items-center justify-center px-1"
56+
>
57+
{notificationCount > 99 ? "99+" : notificationCount}
58+
</span>
59+
{/if}
60+
</Button.Nav>
61+
<Button.Nav href="/settings" aria-label="Settings">
62+
<HugeiconsIcon
63+
size={28}
64+
strokeWidth={2}
65+
icon={Settings02Icon}
66+
/>
67+
</Button.Nav>
68+
</div>
69+
</header>

‎infrastructure/eid-wallet/src/routes/(app)/main/components/ScanFAB.svelte‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
<script lang="ts">
2+
import * as Button from "$lib/ui/Button";
3+
import { QrCodeIcon } from "@hugeicons/core-free-icons";
4+
import { HugeiconsIcon } from "@hugeicons/svelte";
5+
6+
interface IScanFABProps {
7+
href?: string;
8+
}
9+
10+
const { href = "/scan-qr" }: IScanFABProps = $props();
11+
</script>
12+
13+
<Button.Nav {href} class="fixed bottom-12 left-1/2 -translate-x-1/2">
14+
<Button.Action
15+
variant="solid"
16+
size="md"
17+
class="mx-auto text-nowrap flex gap-3 uppercase tracking-wide"
18+
>
19+
Scan
20+
<HugeiconsIcon size={24} strokeWidth={2} icon={QrCodeIcon} />
21+
</Button.Action>
22+
</Button.Nav>

0 commit comments

Comments
 (0)