Merge pull request #205 from wwWallet/history-accuracy

History accuracy

Author: kkmanos

src/components/Credentials/ApiFetchCredential.ts

@@ -0,0 +1,21 @@
+import { useState, useEffect } from "react"
+import { parseCredential } from "../../functions/parseCredential";
+
+
+export const CredentialImage = ({ credential, className, onClick }) => {
+	const [parsedCredential, setParsedCredential] = useState(null);
+
+	useEffect(() => {
+		parseCredential(credential).then((c) => {
+			setParsedCredential(c);
+		});
+	}, []);
+
+	return (
+		<>
+			{parsedCredential &&
+				<img src={parsedCredential.credentialBranding.image.url} alt={"Credential"} className={className} onClick={onClick} />
+			}
+		</>
+	)
+}

src/components/Credentials/CredentialImage.js

@@ -1,10 +1,11 @@
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import { BiSolidCategoryAlt, BiSolidUserCircle } from 'react-icons/bi';
 import { AiFillCalendar } from 'react-icons/ai';
 import { RiPassExpiredFill } from 'react-icons/ri';
-import { MdTitle, MdGrade } from 'react-icons/md';
+import { MdTitle, MdGrade, MdOutlineNumbers } from 'react-icons/md';
 import { GiLevelEndFlag } from 'react-icons/gi';
 import { formatDate } from '../../functions/DateFormat';
+import { parseCredential } from '../../functions/parseCredential';
 
 const getFieldIcon = (fieldName) => {
 	switch (fieldName) {
@@ -14,6 +15,8 @@ const getFieldIcon = (fieldName) => {
 			return <RiPassExpiredFill size={25} className="inline mr-1 mb-1" />;
 		case 'dateOfBirth':
 			return <AiFillCalendar size={25} className="inline mr-1 mb-1" />;
+		case 'personalIdentifier':
+			return <MdOutlineNumbers size={25} className="inline mr-1 mb-1" />
 		case 'familyName':
 		case 'firstName':
 			return <BiSolidUserCircle size={25} className="inline mr-1 mb-1" />;
@@ -43,20 +46,29 @@ const renderRow = (fieldName, fieldValue) => {
 };
 
 const CredentialInfo = ({ credential }) => {
+
+	const [parsedCredential, setParsedCredential] = useState(null);
+
+	useEffect(() => {
+		parseCredential(credential).then((c) => {
+			setParsedCredential(c);
+		});
+	}, []);
+
 	return (
 		<div className=" pt-5 pr-2 w-full">
 			<table className="lg:w-4/5">
 				<tbody className="divide-y-4 divide-transparent">
-					{credential && (
+					{parsedCredential && (
 						<>
-							{renderRow('type', credential.type)}
-							{renderRow('expdate', formatDate(credential.expdate))}
-							{renderRow('familyName', credential.data.familyName)}
-							{renderRow('firstName', credential.data.firstName)}
-							{renderRow('dateOfBirth', credential.data.dateOfBirth)}
-							{renderRow('diplomaTitle', credential.data.diplomaTitle)}
-							{renderRow('eqfLevel', credential.data.eqfLevel)}
-							{renderRow('grade', credential.data.grade)}
+							{renderRow('expdate', formatDate(parsedCredential.expirationDate))}
+							{renderRow('familyName', parsedCredential.credentialSubject.familyName)}
+							{renderRow('firstName', parsedCredential.credentialSubject.firstName)}
+							{renderRow('personalIdentifier', parsedCredential.credentialSubject.personalIdentifier)}
+							{renderRow('dateOfBirth', parsedCredential.credentialSubject.dateOfBirth)}
+							{renderRow('diplomaTitle', parsedCredential.credentialSubject.diplomaTitle)}
+							{renderRow('eqfLevel', parsedCredential.credentialSubject.eqfLevel)}
+							{renderRow('grade', parsedCredential.credentialSubject.grade)}
 						</>
 					)}
 				</tbody>

src/components/Credentials/CredentialInfo.js

@@ -1,12 +1,21 @@
 // CredentialJson.js
 
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
 
 import { AiOutlineDown, AiOutlineUp } from 'react-icons/ai';
+import { parseCredential } from '../../functions/parseCredential';
 
 const CredentialJson = ({ credential }) => {
 	const [showJsonCredentials, setShowJsonCredentials] = useState(false);
 
+	const [parsedCredential, setParsedCredential] = useState(null);
+
+	useEffect(() => {
+		parseCredential(credential).then((c) => {
+			setParsedCredential(c);
+		});
+	}, []);
+
 	return (
 		<div className=" lg:p-0 p-2 w-full">
 			<div className="mb-2 flex items-center">
@@ -25,13 +34,13 @@ const CredentialJson = ({ credential }) => {
 
 			<hr className="my-2 border-t border-gray-500 py-2" />
 
-			{showJsonCredentials && credential ? (
+			{showJsonCredentials && parsedCredential ? (
 				<div>
 					<textarea
 						rows="10"
 						readOnly
 						className="w-full border rounded p-2 rounded-xl"
-						value={credential.json}
+						value={JSON.stringify(parsedCredential, null, 2)}
 					/>
 				</div>
 			) : (

src/components/Credentials/CredentialJson.js

@@ -1,20 +1,34 @@
 // StatusRibbon.js
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
+import { parseCredential } from '../../functions/parseCredential';
 
-const StatusRibbon = ({ expDate }) => {
+const StatusRibbon = ({ credential }) => {
 	const { t } = useTranslation();
 
+	const [parsedCredential, setParsedCredential] = useState(null);
+
 	const CheckExpired = (expDate) => {
 		const today = new Date();
 		const expirationDate = new Date(expDate);
 		return expirationDate < today;
 	};
 
+	useEffect(() => {
+		parseCredential(credential).then((c) => {
+			setParsedCredential(c);
+		})
+	}, []);
+
+
 	return (
-		CheckExpired(expDate) && <div className={`absolute bottom-0 right-0 text-white text-xs py-1 px-3 rounded-tl-lg border-t border-l border-white ${CheckExpired(expDate) ? 'bg-red-500' : 'bg-green-500'}`}>
-			{ t('statusRibbon.expired') }
-		</div>
+		<>
+			{parsedCredential && CheckExpired(parsedCredential.expirationDate) &&
+				<div className={`absolute bottom-0 right-0 text-white text-xs py-1 px-3 rounded-tl-lg border-t border-l border-white ${CheckExpired(parsedCredential.expirationDate) ? 'bg-red-500' : 'bg-green-500'}`}>
+					{ t('statusRibbon.expired') }
+				</div>
+			}
+		</>
 	);
 };
 

src/components/Credentials/StatusRibbon.js

@@ -4,7 +4,7 @@ import { FaShare } from 'react-icons/fa';
 import { useTranslation } from 'react-i18next';
 import StatusRibbon from '../../components/Credentials/StatusRibbon';
 import { useApi } from '../../api';
-import { parseCredentialDependingOnFormat } from '../../components/Credentials/ApiFetchCredential';
+import { CredentialImage } from '../Credentials/CredentialImage';
 
 
 function SelectCredentials({ showPopup, setShowPopup, setSelectionMap, conformantCredentialsMap, verifierDomainName }) {
@@ -31,18 +31,11 @@ function SelectCredentials({ showPopup, setShowPopup, setSelectionMap, conforman
 
 			try {
 				const response = await api.get('/storage/vc');
-				const simplifiedCredentialsPromises = response.data.vc_list
-					.filter(vc => conformantCredentialsMap[keys[currentIndex]].credentials.includes(vc.credentialIdentifier))
-					.map(async vc => {
-						const credentialPayload = await parseCredentialDependingOnFormat(vc.credential, vc.format);
-						return ({
-							id: vc.credentialIdentifier,
-							imageURL: vc.logoURL,
-							expdate: credentialPayload['vc']["expirationDate"],
-						})
-					});
-				const simplifiedCredentials = await Promise.all(simplifiedCredentialsPromises);
-				console.log("Fields = ", conformantCredentialsMap[keys[currentIndex]].requestedFields)
+				const simplifiedCredentials = response.data.vc_list
+					.filter(vcEntity =>
+						conformantCredentialsMap[keys[currentIndex]].credentials.includes(vcEntity.credentialIdentifier)
+					);
+
 				setRequestedFields(conformantCredentialsMap[keys[currentIndex]].requestedFields);
 				setImages(simplifiedCredentials);
 			} catch (error) {
@@ -68,10 +61,10 @@ function SelectCredentials({ showPopup, setShowPopup, setSelectionMap, conforman
 		setCurrentIndex((i) => i + 1);
 	}
 
-	const handleClick = (id) => {
+	const handleClick = (credentialIdentifier) => {
 		const descriptorId = keys[currentIndex];
 		setCurrentSelectionMap((currentMap) => {
-			currentMap[descriptorId] = id;
+			currentMap[descriptorId] = credentialIdentifier;
 			return currentMap;
 		});
 		setApplyTransition(false);
@@ -140,14 +133,8 @@ function SelectCredentials({ showPopup, setShowPopup, setSelectionMap, conforman
 					{images.map(image => (
 						<div className="m-3 flex justify-center">
 							<div className="relative rounded-xl w-2/3 overflow-hidden transition-shadow shadow-md hover:shadow-lg cursor-pointer">
-								<img
-									key={image.id}
-									src={image.imageURL}
-									alt={image.id}
-									onClick={() => handleClick(image.id)}
-									className="w-full object-cover rounded-xl"
-								/>
-								<StatusRibbon expDate={image.expdate} />
+								<CredentialImage key={image.credentialIdentifier} credential={image.credential} onClick={() => handleClick(image.credentialIdentifier)} className={"w-full object-cover rounded-xl"} />
+								<StatusRibbon credential={image.credential} />
 							</div>
 						</div>
 					))}

src/components/Popups/SelectCredentials.js

@@ -0,0 +1,7 @@
+import { parseCredential } from "./parseCredential";
+
+
+export const extractCredentialFriendlyName = async (credential: string | object): Promise<string | undefined> => {
+	const parsedCredential = await parseCredential(credential) as any;
+	return parsedCredential.name ?? parsedCredential.id;
+}

src/functions/extractCredentialFriendlyName.ts

@@ -0,0 +1,6 @@
+import { parseCredential } from "./parseCredential"
+
+export const extractCredentialImageURL = async (credential: string | object): Promise<string | undefined> => {
+	const parsedCredential = await parseCredential(credential) as any;
+	return parsedCredential?.credentialBranding?.image?.url;
+}

src/functions/extractCredentialImage.ts

@@ -0,0 +1,37 @@
+import parseJwt from './ParseJwt';
+import {
+	HasherAlgorithm,
+	HasherAndAlgorithm,
+	SdJwt,
+} from '@sd-jwt/core'
+
+export enum CredentialFormat {
+	VC_SD_JWT = "vc+sd-jwt",
+	JWT_VC_JSON = "jwt_vc_json"
+}
+
+const encoder = new TextEncoder();
+
+// Encoding the string into a Uint8Array
+const hasherAndAlgorithm: HasherAndAlgorithm = {
+	hasher: (input: string) => {
+		return crypto.subtle.digest('SHA-256', encoder.encode(input)).then((v) => new Uint8Array(v));
+	},
+	algorithm: HasherAlgorithm.Sha256
+}
+
+export const parseCredential = async (credential: string | object): Promise<object> => {
+	if (typeof credential == 'string') { // is JWT
+		if (credential.includes('~')) { // is SD-JWT
+			return SdJwt.fromCompact<Record<string, unknown>, any>(credential)
+				.withHasher(hasherAndAlgorithm)
+				.getPrettyClaims()
+				.then((payload) => payload.vc);
+		}
+		else { // is plain JWT
+			return parseJwt(credential)
+				.then((payload) => payload.vc);
+		}
+	}
+	throw new Error("Type of credential is not supported")
+}