feat(Presentation): show individual credential verification status

blockchain-certificates · Nov 25, 2024 · 0d7089c · 0d7089c
1 parent 1b4e25f
commit 0d7089c
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 2 deletions.
diff --git a/src/components/organisms/VerifiablePresentation/VerifiablePresentation.ts b/src/components/organisms/VerifiablePresentation/VerifiablePresentation.ts
@@ -1,8 +1,9 @@
 import { html, LitElement } from '@polymer/lit-element';
 import { unsafeHTML } from 'lit-html/lib/unsafe-html.js';
 import CSS from './_components.verifiable-presentation-css';
-import { getV3DisplayHtml } from '../../../selectors/certificate';
+import { getV3DisplayHtml, getVerificationStatusForCredential } from '../../../selectors/certificate';
 import type { TemplateResult } from 'lit-html';
+import '../../atoms/FinalVerificationStep';
 
 export interface IVerifiablePresentationApi {
   verifiableCredentials: any[];
@@ -37,7 +38,16 @@ class VerifiablePresentation extends LitElement {
       <div class="slider">
         <ul class="buv-c-verifiable-presentation">
           ${verifiableCredentials.map((credential) => html`
-            <li id$="${credential.id}" class="buv-c-verifiable-presentation__credential">${unsafeHTML(getV3DisplayHtml(credential))}</li>
+            <li id$="${credential.id}" class="buv-c-verifiable-presentation__credential">
+                <buv-final-verification-step 
+                  finalStep="${getVerificationStatusForCredential(credential)?.message}"
+                  status="${getVerificationStatusForCredential(credential)?.status}"
+                  isVisible 
+                  standalone
+                >
+                </buv-final-verification-step>
+                ${unsafeHTML(getV3DisplayHtml(credential))}
+            </li>
           `)}
         </ul>
       </div>

diff --git a/src/selectors/certificate/index.ts b/src/selectors/certificate/index.ts
@@ -104,6 +104,10 @@ export function getVerifiableCredentials (state: BlockcertsVerifierState): any[]
   return [];
 }
 
+export function getVerificationStatusForCredential (certificateDefinition: Certificate): any {
+  return certificateDefinition.verificationStatus;
+}
+
 export function getDisplayContentTypeFromState (state: BlockcertsVerifierState): CONTENT_MEDIA_TYPES | null {
   const certificateDefinition = getCertificateDefinition(state);