diff --git a/package-lock.json b/package-lock.json index 57cee138..ebe3a752 100644 --- a/package-lock.json +++ b/package-lock.json @@ -8,7 +8,7 @@ "name": "@blockcerts/blockcerts-verifier", "version": "0.0.0-dev", "dependencies": { - "@blockcerts/cert-verifier-js": "^6.22.0", + "@blockcerts/cert-verifier-js": "^6.22.1", "@blockcerts/cert-verifier-js-v1-legacy": "^4.0.1", "@polymer/lit-element": "0.5.1", "@polymer/polymer": "3.5.1", @@ -1942,9 +1942,9 @@ } }, "node_modules/@blockcerts/cert-verifier-js": { - "version": "6.22.0", - "resolved": "https://registry.npmjs.org/@blockcerts/cert-verifier-js/-/cert-verifier-js-6.22.0.tgz", - "integrity": "sha512-1BSfoL4PqGmQuFoqfRusPJxpAXhN5oQIpNlzpAl3vvsnj+l+Ke1es8fpaD+CpsXygCThI7UtnGqbKAv2PecNAQ==", + "version": "6.22.1", + "resolved": "https://registry.npmjs.org/@blockcerts/cert-verifier-js/-/cert-verifier-js-6.22.1.tgz", + "integrity": "sha512-PCyXMZNGB0q70oUeW+LTyS/pPOEit+/mglyjhAF4Xg8+Jo4kNw10YwbYxesOK7ChQiZ4OBuls18nZPqjp6OPhw==", "license": "MIT", "dependencies": { "@blockcerts/ecdsa-secp256k1-signature-2019": "^0.1.7", diff --git a/package.json b/package.json index 32088719..c1186bec 100644 --- a/package.json +++ b/package.json @@ -11,7 +11,7 @@ "node": ">=18.0.0" }, "dependencies": { - "@blockcerts/cert-verifier-js": "^6.22.0", + "@blockcerts/cert-verifier-js": "^6.22.1", "@blockcerts/cert-verifier-js-v1-legacy": "^4.0.1", "@polymer/lit-element": "0.5.1", "@polymer/polymer": "3.5.1", diff --git a/src/components/atoms/FinalVerificationStep/FinalVerificationStepContainer.ts b/src/components/atoms/FinalVerificationStep/FinalVerificationStepContainer.ts index 6c51673a..111a3551 100644 --- a/src/components/atoms/FinalVerificationStep/FinalVerificationStepContainer.ts +++ b/src/components/atoms/FinalVerificationStep/FinalVerificationStepContainer.ts @@ -17,7 +17,9 @@ const ownProps: FinalVerificationStepProps = { isVisible: Boolean as any, hideLink: Boolean as any, standalone: Boolean as any, - isOverlay: Boolean as any + isOverlay: Boolean as any, + status: String as any, + finalStep: Object as any }; const FinalVerificationStepContainer = connector(FinalVerificationStep, { mapStateToProps, ownProps }); diff --git a/src/components/organisms/FullCertificate/FullCertificate.ts b/src/components/organisms/FullCertificate/FullCertificate.ts index 50b777b7..0e4b6c7e 100644 --- a/src/components/organisms/FullCertificate/FullCertificate.ts +++ b/src/components/organisms/FullCertificate/FullCertificate.ts @@ -5,12 +5,13 @@ import CSS from './_components.full-certificate-css'; import '../../atoms/CertificateDetails'; import '../../atoms/VerifyButton'; import '../../atoms/FinalVerificationStep'; +import '../VerifiablePresentation'; import getText from '../../../i18n/getText'; import urlToLink from '../../../helpers/urlToLink'; import domain from '../../../domain'; import type { IFullScreenCertificateAPI } from '../FullScreenCertificate/FullScreenCertificate'; -function renderDisplayHTML (displayHTML: string, clickableUrls: boolean): TemplateResult { +function renderDisplayHTML (displayHTML: string, clickableUrls: boolean, isVerifiablePresentation: boolean): TemplateResult { const buvCertificateClasses: string[] = [ 'buv-c-full-certificate', 'qa-fullscreen-certificate' @@ -20,6 +21,9 @@ function renderDisplayHTML (displayHTML: string, clickableUrls: boolean): Templa } const htmlToDisplay = clickableUrls ? urlToLink(displayHTML) : displayHTML; + if (isVerifiablePresentation) { + return html``; + } return html`
${unsafeHTML(htmlToDisplay)}
`; } @@ -27,6 +31,7 @@ export interface IFullCertificateAPI { clickableUrls?: boolean; hasCertificateDefinition?: boolean; displayHTML?: string; + isVerifiablePresentation?: boolean; } export class FullCertificateComponent extends LitElement { @@ -35,7 +40,8 @@ export class FullCertificateComponent extends LitElement { return { clickableUrls: Boolean as any, hasCertificateDefinition: Boolean as any, - displayHTML: String as any + displayHTML: String as any, + isVerifiablePresentation: Boolean as any }; } @@ -52,7 +58,8 @@ export class FullCertificateComponent extends LitElement { _render ({ clickableUrls, hasCertificateDefinition, - displayHTML + displayHTML, + isVerifiablePresentation }: IFullCertificateAPI): TemplateResult { if (!hasCertificateDefinition) { // lit-element won't enter the rendering path if the content is null @@ -62,7 +69,7 @@ export class FullCertificateComponent extends LitElement { return html` ${CSS} - ${renderDisplayHTML(displayHTML, clickableUrls)} + ${renderDisplayHTML(displayHTML, clickableUrls, isVerifiablePresentation)}
${getText('text.verifyAgain')} @@ -80,6 +87,7 @@ function FullCertificateWrapper (props: IFullCertificateAPI): TemplateResult { clickableUrls = '${props.clickableUrls}' hasCertificateDefinition = '${props.hasCertificateDefinition}' displayHTML = '${props.displayHTML}' + isVerifiablePresentation = '${props.isVerifiablePresentation}' >`; } diff --git a/src/components/organisms/FullCertificate/FullCertificateContainer.ts b/src/components/organisms/FullCertificate/FullCertificateContainer.ts index ea5c8a27..214f5303 100644 --- a/src/components/organisms/FullCertificate/FullCertificateContainer.ts +++ b/src/components/organisms/FullCertificate/FullCertificateContainer.ts @@ -3,7 +3,7 @@ import type { IFullCertificateAPI } from './FullCertificate'; import { FullCertificate } from './FullCertificate'; import { getCertificateDefinition, - getDisplayAsHTML + getDisplayAsHTML, getIsVerifiablePresentation } from '../../../selectors/certificate'; import { getClickableUrls } from '../../../selectors/api'; import type { BlockcertsVerifierState } from '../../../store/getInitialState'; @@ -11,7 +11,8 @@ import type { BlockcertsVerifierState } from '../../../store/getInitialState'; export const mapStateToProps = (state: BlockcertsVerifierState): Partial => ({ hasCertificateDefinition: !!getCertificateDefinition(state), displayHTML: getDisplayAsHTML(state), - clickableUrls: getClickableUrls(state) + clickableUrls: getClickableUrls(state), + isVerifiablePresentation: getIsVerifiablePresentation(state) }); const FullCertificateContainer = connector, any>( diff --git a/src/components/organisms/VerifiablePresentation/VerifiablePresentation.ts b/src/components/organisms/VerifiablePresentation/VerifiablePresentation.ts index 6e3c8c28..086a10cd 100644 --- a/src/components/organisms/VerifiablePresentation/VerifiablePresentation.ts +++ b/src/components/organisms/VerifiablePresentation/VerifiablePresentation.ts @@ -6,7 +6,8 @@ import type { TemplateResult } from 'lit-html'; import '../../atoms/FinalVerificationStep'; export interface IVerifiablePresentationApi { - verifiableCredentials: any[]; + // this is a hack to force rerenders as the verification of individual credentials occurs + verifiableCredentials: string; } class VerifiablePresentation extends LitElement { @@ -16,7 +17,8 @@ class VerifiablePresentation extends LitElement { static get properties (): IVerifiablePresentationApi { // if the interface is defined properly with typescript, then the boolean values do not get updated. return { - verifiableCredentials: Array as any + // this is a hack to force rerenders as the verification of individual credentials occurs + verifiableCredentials: String as any }; } @@ -65,11 +67,13 @@ class VerifiablePresentation extends LitElement { }); } - _render ({ verifiableCredentials }): TemplateResult { + _render ({ verifiableCredentials }: IVerifiablePresentationApi): TemplateResult { + // this is a hack to force rerenders as the verification of individual credentials occurs + const VCList: any[] = JSON.parse(verifiableCredentials); return html` ${CSS}
    - ${verifiableCredentials.map((credential, i) => { + ${VCList.map((credential, i) => { const linkClasslist = [ 'js-verifiable-presentation-navigation', 'buv-c-verifiable-presentation-navigation__link', @@ -89,12 +93,16 @@ class VerifiablePresentation extends LitElement {
    - ${verifiableCredentials.map((credential) => html` + ${VCList.map((credential) => html`
  • ${unsafeHTML(getV3DisplayHtml(credential))} => ({ - verifiableCredentials: getVerifiableCredentials(state) + // this is a hack to force rerenders as the verification of individual credentials occurs + verifiableCredentials: JSON.stringify(getVerifiableCredentials(state)) }); const VerifiablePresentationContainer = connector(VerifiablePresentation, { mapStateToProps }); diff --git a/src/selectors/certificate/index.ts b/src/selectors/certificate/index.ts index 24d7c486..fecb1246 100644 --- a/src/selectors/certificate/index.ts +++ b/src/selectors/certificate/index.ts @@ -214,10 +214,8 @@ export function getDisplayAsHTML (state: BlockcertsVerifierState): string { // V3 if (getIsVerifiablePresentation(state)) { - // TODO: this is useless as VPs are handled by their own component - return getVerifiableCredentials(state).map(credential => { - return `
  • ${getV3DisplayHtml(credential)}
    • `; - }).join('\n'); + // return basic html to trigger rendering + return '
    '; } else { displayHtml = getV3DisplayHtml(certificateDefinition); if (displayHtml) { diff --git a/test/application/selectors/certificate.v3.verifiable-presentation.spec.ts b/test/application/selectors/certificate.v3.verifiable-presentation.spec.ts index 0a1907f6..ff7b78e7 100644 --- a/test/application/selectors/certificate.v3.verifiable-presentation.spec.ts +++ b/test/application/selectors/certificate.v3.verifiable-presentation.spec.ts @@ -35,8 +35,7 @@ describe('certificate selectors test suite', function () { describe('getDisplayAsHTML selector', function () { it('should return the display HTML as coded into the document', function () { const state = store.getState(); - expect(getDisplayAsHTML(state)).toBe('
  • Yo
    • \n' + - '
  • Yo
    • '); + expect(getDisplayAsHTML(state)).toBe('
    '); }); }); });