feat: end of verification flow

src/lib/components/tabs/TabPage.svelte

@@ -4,11 +4,10 @@
 
 	export let tab: Tab;
 	export let title: string;
-	export let settings = false
 </script>
 
 <ion-tab {tab}>
-	<Header backButton={false} {settings}>{title}</Header>
+	<Header backButton={false}>{title}</Header>
 
 	<ion-content fullscreen class="ion-padding">
 		<slot />

src/lib/components/tabs/index.ts

@@ -1,6 +1,6 @@
 export const Tabs = {
 	home: 'home',
-	notifications: 'notifications',
+	history: 'history',
 	profile: 'profile'
 } as const;
 

src/lib/preferences/verifiedSid.ts

@@ -0,0 +1,34 @@
+import { getStructuredPreferences, setStructuredPreferences } from '.';
+import dayjs from 'dayjs';
+
+export type VerifiedSid = {
+	sid: string;
+	success: boolean;
+	at: number;
+	message?: string;
+};
+
+export const VERIFIED_SID_KEY = 'verifiedSid';
+
+export const saveVerifiedSid = async (sid: string, success: boolean, message?: string) => {
+	const at = dayjs().unix();
+	const verifiedSid = await getVerifiedSids();
+
+	const r = { sid, success, at, message };
+	if (verifiedSid) {
+		const newVerifiedSids = [...verifiedSid, r];
+		await setStructuredPreferences(VERIFIED_SID_KEY, newVerifiedSids);
+		return r;
+	}
+	await setStructuredPreferences(VERIFIED_SID_KEY, [r]);
+	return r;
+};
+
+export const getVerifiedSids = async () => {
+	return (await getStructuredPreferences(VERIFIED_SID_KEY)) as VerifiedSid[];
+};
+
+export const getVerifiedSid = async (sid: string) => {
+	const verifiedSids = await getVerifiedSids();
+	return verifiedSids.find((r) => r.sid === sid);
+};

src/routes/+layout.svelte

@@ -30,11 +30,11 @@
 	/>
 	<script
 		type="module"
-		src="https://cdn.jsdelivr.net/npm/@didroom/components@1.15.3/dist/didroom-components/didroom-components.esm.js"
+		src="https://cdn.jsdelivr.net/npm/@didroom/components@1.16/dist/didroom-components/didroom-components.esm.js"
 	></script>
 	<link
 		rel="stylesheet"
-		href="https://cdn.jsdelivr.net/npm/@didroom/components@1.15.3/dist/didroom-components/didroom-components.css"
+		href="https://cdn.jsdelivr.net/npm/@didroom/components@1.16/dist/didroom-components/didroom-components.css"
 	/>
 </svelte:head>
 

src/routes/[[lang]]/(protected)/(tabs)/+layout.svelte

@@ -11,7 +11,7 @@
 
 	const tabs: IonTabProps[] = [
 		{ label: 'Home', icon: home, tab: Tabs.home },
-		{ label: 'Notifications', icon: notificationsOutline, tab: Tabs.notifications },
+		{ label: 'History', icon: notificationsOutline, tab: Tabs.history },
 		{ label: 'Profile', icon: personOutline, tab: Tabs.profile }
 	];
 </script>

src/routes/[[lang]]/(protected)/(tabs)/history/+page.svelte

@@ -0,0 +1,28 @@
+<script lang="ts">
+	import { TabPage } from '$lib/components/tabs';
+	import dayjs from 'dayjs';
+	import relativeTime from 'dayjs/plugin/relativeTime';
+
+	dayjs.extend(relativeTime);
+	export let data;
+	const { verifiedSids } = data;
+</script>
+
+<TabPage tab="history" title="History">
+	<div class="flex flex-col items-center justify-center gap-2">
+		{#each verifiedSids.reverse() as verifiedSid}
+			<div class="flex flex-col rounded-md border-on bg-primary p-4 w-full">
+				<div class="flex flex-col items-start justify-center gap-1">
+					<d-heading size="s">{verifiedSid.sid}</d-heading>
+					<d-text size="m">{verifiedSid.success ? 'verified' : 'failure'}</d-text>
+					<div class="flex items-center gap-2.5">
+						<div
+							class="h-[5px] w-[5px] shrink-0 rounded-full border border-solid border-warning bg-warning"
+						/>
+						<d-text size="s">{dayjs().to(dayjs.unix(verifiedSid.at))}</d-text>
+					</div>
+				</div>
+			</div>
+		{/each}
+	</div>
+</TabPage>

src/routes/[[lang]]/(protected)/(tabs)/history/+page.ts

@@ -0,0 +1,6 @@
+import {  getVerifiedSids } from '$lib/preferences/verifiedSid.js';
+
+export const load = async () => {
+	const verifiedSids = await getVerifiedSids();
+	return { verifiedSids };
+};

src/routes/[[lang]]/(protected)/[id]/verify/+page.svelte

@@ -3,7 +3,6 @@
 	import { Slangroom } from '@slangroom/core';
 	import { qrcode } from '@slangroom/qrcode';
 	import { helpers } from '@slangroom/helpers';
-	import { thumbsDownOutline, thumbsUpOutline } from 'ionicons/icons';
 	import Header from '$lib/components/molecules/Header.svelte';
 	import { m } from '$lib/i18n';
 	import dayjs from 'dayjs';
@@ -14,8 +13,9 @@
 	import cardToQrKeys from '$lib/mobile_zencode/verifier/card_to_qr.keys.json?raw';
 	import { backendUri } from '$lib/backendUri';
 	import { saveRuAndSid } from '$lib/preferences/sidRu';
-	import { jwsToId, jwsToIdSuccess } from './_lib/tools';
+	// import { jwsToId, jwsToIdSuccess } from './_lib/tools';
 	import { log } from '$lib/log';
+	import { onIncomingNotification } from './_lib/tools';
 
 	export let data: any;
 
@@ -28,7 +28,6 @@
 	let error: string;
 	let tok: string;
 
-	//@ts-expect-error qrcode should be of type plugins
 	const slangroom = new Slangroom(qrcode, helpers);
 	let incomingNotification: any;
 
@@ -42,9 +41,10 @@
 			error = err.error;
 		});
 
-		await PushNotifications.addListener('pushNotificationReceived', (notification) => {
+		await PushNotifications.addListener('pushNotificationReceived', async (notification) => {
 			incomingNotification = notification;
 			log(`Push notification received: /n ${JSON.stringify(notification)}`);
+			await onIncomingNotification(notification);
 		});
 	};
 
@@ -126,15 +126,6 @@
 				>
 			{/await}
 			<!-- end for web -->
-		{:else if incomingNotification}
-			{#await jwsToId(incomingNotification.data.message) then res}
-				{res.message}
-				<ion-icon
-					icon={res.message === jwsToIdSuccess ? thumbsUpOutline : thumbsDownOutline}
-					class="mx-auto my-6 text-9xl"
-				></ion-icon>
-				<d-heading>SESSION ID: {res.id}</d-heading>
-			{/await}
 		{:else if qr}
 			<div
 				class="flex flex-row items-center justify-center gap-1 rounded-[0px_8px_8px_0px] bg-primary px-2 py-4"

src/routes/[[lang]]/(protected)/[id]/verify/_lib/tools.ts

@@ -7,13 +7,17 @@ import { getRuAndSid } from '$lib/preferences/sidRu';
 import verify from '$lib/mobile_zencode/verifier/verify.zen?raw';
 import verifyKeys from '$lib/mobile_zencode/verifier/verify.keys.json?raw';
 import { log } from '$lib/log';
+import { saveVerifiedSid } from '$lib/preferences/verifiedSid';
+import { goto } from '$app/navigation';
 
 const slangroom = new Slangroom(http, helpers, zencode);
 export const jwsToIdSuccess = 'Signature_verification_successful' as const;
 export const jwsToIdFailure = 'Signature_verification_error' as const;
+export type jwsToIdResult = typeof jwsToIdSuccess | typeof jwsToIdFailure;
 export type JwsToIdResponse = {
-	message: typeof jwsToIdSuccess | typeof jwsToIdFailure;
+	result: jwsToIdResult;
 	id: string;
+	message?: string;
 };
 
 export const jwsToId = async (jws: string): Promise<JwsToIdResponse> => {
@@ -35,10 +39,23 @@ export const jwsToId = async (jws: string): Promise<JwsToIdResponse> => {
 		};
 		const res = await slangroom.execute(verify, { data: dataVerify, keys: JSON.parse(verifyKeys) });
 		log(JSON.stringify(res));
-		const message = res.result.result as typeof jwsToIdSuccess | typeof jwsToIdFailure;
-		return { message, id };
+		const result = res.result.result as jwsToIdResult;
+		return { result, id };
 	} catch (e) {
 		log(JSON.stringify(e));
-		return {message:jwsToIdFailure, id}
+		return { result: jwsToIdFailure, id, message: JSON.stringify(e) };
 	}
 };
+
+export type Notification = {
+	id: string;
+	data: {
+		message: string;
+	};
+};
+
+export const onIncomingNotification = async (notification: Notification) => {
+	const { id, result, message } = await jwsToId(notification.data.message);
+	await saveVerifiedSid(id, result === jwsToIdSuccess, message);
+	await goto(`/${id}/verified`);
+};

src/routes/[[lang]]/(protected)/[sid]/+layout.ts

@@ -0,0 +1,12 @@
+import { getVerifiedSid } from '$lib/preferences/verifiedSid.js';
+import { error } from '@sveltejs/kit';
+
+export const load = async ({ params }) => {
+	const verifiedSid = await getVerifiedSid(params.sid);
+	if (!verifiedSid) {
+		error(404, {
+			message: 'Not found'
+		});
+	}
+	return { verifiedSid };
+};

src/routes/[[lang]]/(protected)/[sid]/verified/+page.svelte

@@ -0,0 +1,26 @@
+<script lang="ts">
+	import Header from '$lib/components/molecules/Header.svelte';
+	import type { Feedback } from '$lib/utils/types.js';
+	import dayjs from 'dayjs';
+
+	export let data;
+
+	const { verifiedSid } = data;
+	const { sid, at, success, message } = verifiedSid;
+	let feedback: Feedback;
+	$: if (!success) {
+		feedback = {
+			type: 'error',
+			feedback: 'Verification failed',
+			message
+		};
+	}
+</script>
+
+<Header>Verification</Header>
+<ion-content class="ion-padding">
+	<d-feedback {...feedback} />
+	<div class="flex w-full flex-row items-start justify-around">
+		<d-session-card {sid} date={dayjs.unix(at).toString()} {success} />
+	</div>
+</ion-content>