Merge branch 'main' into tl/crash

components/CredentialCard/CredentialCard.d.ts

@@ -12,4 +12,6 @@ export type CredentialDisplayFields = {
   expirationDate: string | undefined,
   credentialDescription: string | undefined,
   criteria: string | undefined,
+  achievementImage?: string | undefined,
+  achievementType?: string | undefined,
 }

components/CredentialCard/CredentialCard.module.css

@@ -66,13 +66,14 @@
 }
 
 .credentialName {
-  margin: 8px 0px 0px;
+  margin: 0px 0px 0px;
   font-weight: bold;
   font-size: 25px;
 }
 
 .subjectName {
   margin-top: 4px;
+  margin-bottom: 0px;
   font-size: 14px;
 }
 
@@ -143,3 +144,36 @@
 .warningIcon {
   color: #FFCC00;
 }
+
+.markdownContainer p {
+  margin: 0;
+  padding: 0;
+}
+
+.markdownContainer h1,
+.markdownContainer h2, 
+.markdownContainer h3,
+.markdownContainer h4,
+.markdownContainer h5,
+.markdownContainer h6 {
+  margin: 0;
+  padding: 0;
+}
+
+.achivementInfo {
+  display: flex;
+  flex-direction: row;
+  margin: 8px 0px 0px;
+}
+
+.achievementImage {
+  margin-right: 16px;
+  height: 5%;
+  width: 5%;
+}
+
+.achievementType {
+  margin-top: 4px;
+  margin-bottom: 4px;
+  font-size: 14px;
+}

components/CredentialCard/CredentialCard.tsx

@@ -7,6 +7,7 @@ import styles from './CredentialCard.module.css';
 import { InfoBlock } from 'components/InfoBlock/InfoBlock';
 import { VerifyIndicator } from 'components/VerifyIndicator/VerifyIndicator';
 import { useState } from 'react';
+import ReactMarkdown from 'react-markdown';
 
 export const CredentialCard = ({ credential, wasMulti = false }: CredentialCardProps) => {
   // TODO: add back IssuerInfoModal
@@ -21,6 +22,7 @@ export const CredentialCard = ({ credential, wasMulti = false }: CredentialCardP
     setIsOpen(true);
   }
 
+
   return (
     <main aria-labelledby='title'>
       {wasMulti && (
@@ -50,8 +52,14 @@ export const CredentialCard = ({ credential, wasMulti = false }: CredentialCardP
               /> */}
             </div>
           </div>
-          <h1 id='title' className={styles.credentialName}>{displayValues.credentialName}</h1>
-          <div className={styles.subjectName}>Issued to: {displayValues.issuedTo}</div>
+          <div className={styles.achivementInfo}>
+            {displayValues.achievementImage ? <img className={styles.achievementImage} src={displayValues.achievementImage} alt="achievement image"/>: null}
+            <div>
+              <h1 id='title' className={styles.credentialName}>{displayValues.credentialName}</h1>
+              <p className={styles.subjectName}>Subject Name: {displayValues.issuedTo}</p>
+              {displayValues.achievementType ? <p className={styles.achievementType}>Achievement Type : {displayValues.achievementType}</p> : null}
+            </div>
+          </div>
         </div>
         <div className={styles.mainCard}>
           <div className={styles.secondaryColumn}>
@@ -80,7 +88,10 @@ export const CredentialCard = ({ credential, wasMulti = false }: CredentialCardP
             {displayValues.criteria && (
               <div>
                 <h3 className={styles.smallHeader}>Criteria</h3>
-                <div className={styles.credentialCriteria}>{displayValues.criteria}</div>
+                {/* <div className={styles.credentialCriteria}>{displayValues.criteria}</div> */}
+                <div className={styles.markdownContainer}>
+                  <ReactMarkdown >{displayValues.criteria}</ReactMarkdown>
+                </div>
               </div>
             )}
 
@@ -116,11 +127,13 @@ const mapCredDataToDisplayValues = (credential?: VerifiableCredential): Credenti
     issuanceDate: credential.issuanceDate,
     expirationDate: credential.expirationDate
   }
-  if (credential.type.includes("OpenBadgeCredential")){
+  if (credential.type.includes("OpenBadgeCredential") || credential.type.includes("AchievementCredential")){
     return {...common,
-      credentialName: credential.credentialSubject.achievement?.name,
+      credentialName: credential.name,
       credentialDescription: credential.credentialSubject.achievement?.description,
-      criteria: credential.credentialSubject.achievement?.criteria?.narrative
+      criteria: credential.credentialSubject.achievement?.criteria?.narrative,
+      achievementImage: credential.credentialSubject.achievement?.image?.id,
+      achievementType: credential.credentialSubject.achievement?.achievementType
 
     }
   } else {

components/Issuer/Issuer.module.css

@@ -25,4 +25,10 @@
 .infoIcon {
   font-size: 12px;
   margin-left: 4px;
+}
+
+.issuerAddress {
+  font-size: 12px;
+  margin-top: 4px;
+  margin-bottom: 0px;
 }

components/Issuer/Issuer.tsx

@@ -30,6 +30,7 @@ export const Issuer = ({issuer, header, infoButtonPushed}: IssuerProps ) => {
                   info
                 </span> */}
               </div>
+              <p className={styles.issuerAddress}>{issuer.address}</p>
               <a href={issuer.url}>{issuer.url}</a>
             </div>
           </div>

package.json

@@ -26,6 +26,7 @@
     "qrcode.react": "^3.1.0",
     "react": "18.2.0",
     "react-dom": "18.2.0",
+    "react-markdown": "^8.0.7",
     "react-qr-reader": "^3.0.0-beta-1",
     "swr": "^1.3.0",
     "uuid": "^9.0.0",

pages/index.tsx

@@ -113,7 +113,7 @@ const Home: NextPage = () => {
     if (!checkJson(textArea)) {
       const fromUrl = await getJSONFromURL(textArea);
       if (fromUrl !== "") {
-        console.log(fromUrl);
+        // console.log(fromUrl);
         input = fromUrl;
       }
     } else { input = textArea; }
@@ -129,8 +129,8 @@ const Home: NextPage = () => {
 
   async function onScan(json: string) : Promise<Boolean> {
     const fromqr = await credentialsFromQrText(json);
-    console.log('here');
-    console.log(fromqr);
+    // console.log('here');
+    // console.log(fromqr);
     if (fromqr === null) { return false; }
     // get first cred. this will eventually need to be changed
     const cred = fromqr[0];
@@ -149,7 +149,7 @@ const Home: NextPage = () => {
   }
 
   function handleBrowse(e: React.ChangeEvent<HTMLInputElement>) {
-    console.log(e);
+    // console.log(e);
     setFile(e.target.files !== null ? e.target.files[0] : null);
   }
 

types/credential.d.ts

@@ -39,10 +39,16 @@ export type OpenBadgeAchievement = {
   readonly achievementType?: string;
   readonly criteria?: {
         readonly narrative?: string
-      },
-  readonly description?: string,
-  readonly id?: string,
-  readonly name?: string,
+      };
+  readonly description?: string;
+  readonly id?: string;
+  readonly name?: string;
+  readonly type?: string;
+  readonly image?: achievementImage;
+}
+
+type achievementImage = {
+  readonly id?: string;
   readonly type?: string;
 }
 
@@ -77,6 +83,7 @@ export type Status = {
 
 // https://digitalcredentials.github.io/dcc/v1/dcc-context-v1.json
 export type VerifiableCredential = {
+  readonly name: string | undefined;
   readonly credentialStatus?: Status;    // https://w3c.github.io/vc-data-model/#status
   readonly '@context': string[];         // https://w3c.github.io/vc-data-model/#contexts
   readonly id?: string;                   // https://w3c.github.io/vc-data-model/#identifiers