fix: verification results view (#480)

needs: ForkbombEu/didroom-components#166

messages/en.json

@@ -144,5 +144,9 @@
 	"Exp": "Exp",
 	"ok": "ok",
 	"Select_credential": "Select credential:",
-	"novel_elegant_capybara_twist": "You have {length} credentials with the same attributes, which one do you wanna use?"
+	"novel_elegant_capybara_twist": "You have {length} credentials with the same attributes, which one do you wanna use?",
+	"tidy_royal_giraffe_stop": "In progress...",
+	"just_sleek_ape_fall": "Verified.",
+	"teary_seemly_dragonfly_cheer": "Failure.",
+	"petty_fit_flea_twirl": "session id:"
 }

src/lib/preferences/activity.ts

@@ -7,6 +7,7 @@ import type { Credential } from '$lib/preferences/credentials';
 import { setNewActivitiesInHome } from '$lib/homeFeedbackPreferences';
 import { invalidate } from '$app/navigation';
 import { _protectedLayoutKey } from '../../routes/[[lang]]/(protected)/+layout';
+import type { Info } from '$lib/components/organisms/scanner/tools';
 
 dayjs.extend(relativeTime);
 
@@ -69,6 +70,22 @@ export async function addActivity(activity: Activity) {
 	invalidate(_protectedLayoutKey);
 }
 
+export async function addVerificationActivity(sid: string, info: Info, success: boolean) {
+	const at = dayjs().unix();
+	const { asked_claims } = info;
+	const { properties } = asked_claims;
+	const propertiesArray = Object.values(properties).map((property) => property.title);
+	await addActivity({
+		type: 'verification',
+		verifier_name: info.verifier_name,
+		success,
+		rp_name: info.rp_name,
+		sid,
+		properties: propertiesArray,
+		at
+	});
+}
+
 export async function getActivities(): Promise<Activity[] | undefined> {
 	return await getStructuredPreferences(ACTIVITY_PREFERENCES_KEY);
 }

src/lib/utils/index.ts

@@ -1,3 +1,37 @@
+import type { Feedback } from './types';
+
 export function toggleDarkMode() {
 	document.body.classList.toggle('dark');
 }
+
+/**
+ * @param feedback - The feedback message to display
+ * @param message - The additional message to display in show more
+ * @returns A feedback object
+ * @example
+ * positiveFeedback('Feedback message', 'Additional message');
+ * // returns { type: 'success', feedback: 'Feedback message', message: 'Additional message' }
+ **/
+export function positiveFeedback(feedback: string, message?: string): Feedback {
+	return {
+		type: 'success',
+		feedback,
+		message
+	};
+}
+
+/**
+ * @param feedback - The feedback message to display
+ * @param message - The additional message to display in show more
+ * @returns A feedback object
+ * @example
+ * negativeFeedback('Feedback message', 'Additional message');
+ * // returns { type: 'error', feedback: 'Feedback message', message: 'Additional message' }
+ **/
+export function negativeFeedback(feedback: string, message?: string): Feedback {
+	return {
+		type: 'error',
+		feedback,
+		message
+	};
+}

src/routes/+layout.svelte

@@ -64,11 +64,11 @@
 	 />  -->
 	<script
 		type="module"
-		src="https://cdn.jsdelivr.net/npm/@didroom/[email protected].1/dist/didroom-components/didroom-components.esm.js"
+		src="https://cdn.jsdelivr.net/npm/@didroom/[email protected].2/dist/didroom-components/didroom-components.esm.js"
 	></script>
 	<link
 		rel="stylesheet"
-		href="https://cdn.jsdelivr.net/npm/@didroom/[email protected].1/dist/didroom-components/didroom-components.css"
+		href="https://cdn.jsdelivr.net/npm/@didroom/[email protected].2/dist/didroom-components/didroom-components.css"
 	/>
 </svelte:head>
 <svelte:window

src/routes/[[lang]]/(protected)/verification/select-credential/+page.svelte

@@ -10,8 +10,9 @@
 	import { verificationStore } from '$lib/verificationStore.js';
 	import dayjs from 'dayjs';
 	import { log } from '$lib/log.js';
-	import { addActivity, type Activity } from '$lib/preferences/activity.js';
+	import { addVerificationActivity } from '$lib/preferences/activity.js';
 	import { verifyCredential } from '$lib/components/organisms/scanner/tools.js';
+	import { negativeFeedback } from '$lib/utils/index.js';
 
 	type VerificationResponse = {
 		result: {
@@ -23,8 +24,10 @@
 					};
 					server_response: {
 						result: {
-							message: string;
-							response: string;
+							error: {
+								message: string;
+								code: string;
+							};
 						};
 						status: string;
 					};
@@ -50,9 +53,6 @@
 	let scrollBox: HTMLDivElement;
 
 	const { info, post_without_vp } = $verificationStore;
-	const { rp_name, verifier_name, asked_claims } = info;
-	const { properties } = asked_claims;
-	const propertiesArray = Object.values(properties);
 	const verificationFailed = 'verification failed';
 
 	const selectCredential = (credential: string | undefined) => {
@@ -65,7 +65,6 @@
 
 	const verify = async () => {
 		verifyIsClicked = true;
-		let activity: Activity;
 		try {
 			verificationResponse = (await verifyCredential({
 				...post_without_vp,
@@ -77,46 +76,27 @@
 			verified = true;
 			success = verificationResponse.result.result.result.server_response.status === '200';
 			date = dayjs().toString();
-			feedback = {
-				type: 'error',
-				message: JSON.stringify({
-					logs: verificationResponse.logs,
-					serverResponse: verificationResponse.result.result.result.server_response.result
-				}),
-				feedback: verificationFailed
-			};
-			activity = {
-				type: 'verification',
-				sid: post_without_vp.body.id,
-				at: dayjs().unix(),
-				verifier_name,
-				rp_name,
-				properties: propertiesArray.map((property) => property.title),
-				success
-			};
+			if (!success) {
+				feedback = negativeFeedback(
+					verificationFailed,
+					JSON.stringify({
+						serverResponse:
+							verificationResponse.result.result.result.server_response.result.error.code,
+						message: verificationResponse.result.result.result.server_response.result.error.message,
+						logs: verificationResponse.logs
+					})
+				);
+			}
+			await addVerificationActivity(post_without_vp.body.id, info, success);
 			log(JSON.stringify(verificationResponse));
 		} catch (e) {
 			verified = true;
 			date = dayjs().toString();
 			success = false;
-			date = dayjs().toString();
-			feedback = {
-				type: 'error',
-				message: JSON.stringify(e),
-				feedback: verificationFailed
-			};
-			activity = {
-				type: 'verification',
-				sid: post_without_vp.body.id,
-				at: dayjs().unix(),
-				verifier_name,
-				rp_name,
-				properties: propertiesArray.map((property) => property.title),
-				success
-			};
+			feedback = negativeFeedback(verificationFailed, JSON.stringify(e));
 			log(JSON.stringify(e));
 		}
-		await addActivity(activity);
+		await addVerificationActivity(post_without_vp.body.id, info, success);
 	};
 
 	const sortedCredentials = () => {
@@ -138,9 +118,16 @@
 	{#if verified}
 		<div class="ion-padding">
 			<d-feedback {...feedback} />
-
 			<div class="flex w-full justify-around">
-				<d-session-card sid={post_without_vp.body.id} {date} {success} />
+				<d-session-card
+					sid={post_without_vp.body.id}
+					{date}
+					in-progress={!success}
+					in-progress-message={m.tidy_royal_giraffe_stop()}
+					success-message={m.just_sleek_ape_fall()}
+					failure-message={m.teary_seemly_dragonfly_cheer()}
+					session-message={m.petty_fit_flea_twirl()}
+				/>
 			</div>
 		</div>
 	{:else}
@@ -151,7 +138,7 @@
 					description={m.novel_elegant_capybara_twist({ length: credentials.length })}
 				/>
 				<d-vertical-stack>
-					{#each sortedCredentials() as credential, index (credential?.sdJwt)}
+					{#each sortedCredentials() as credential, index (credential.sdJwt)}
 						<d-verification-card
 							class:opacity-60={selectedCredential && selectedCredential !== credential.sdJwt}
 							class="transition-opacity duration-500"