feat: display claim metadat (#219)

Signed-off-by: Timo Glastra <[email protected]>

package.json

@@ -28,14 +28,14 @@
 			"@hyperledger/anoncreds-react-native": "^0.2.4",
 			"@hyperledger/aries-askar-react-native": "^0.2.3",
 			"@hyperledger/indy-vdr-react-native": "^0.2.0",
-			"@credo-ts/anoncreds": "0.6.0-alpha-20241119125554",
-			"@credo-ts/askar": "0.6.0-alpha-20241119125554",
-			"@credo-ts/cheqd": "0.6.0-alpha-20241119125554",
-			"@credo-ts/core": "0.6.0-alpha-20241119125554",
-			"@credo-ts/indy-vdr": "0.6.0-alpha-20241119125554",
-			"@credo-ts/openid4vc": "0.6.0-alpha-20241119125554",
-			"@credo-ts/question-answer": "0.6.0-alpha-20241119125554",
-			"@credo-ts/react-native": "0.6.0-alpha-20241119125554",
+			"@credo-ts/anoncreds": "0.6.0-alpha-20241120125910",
+			"@credo-ts/askar": "0.6.0-alpha-20241120125910",
+			"@credo-ts/cheqd": "0.6.0-alpha-20241120125910",
+			"@credo-ts/core": "0.6.0-alpha-20241120125910",
+			"@credo-ts/indy-vdr": "0.6.0-alpha-20241120125910",
+			"@credo-ts/openid4vc": "0.6.0-alpha-20241120125910",
+			"@credo-ts/question-answer": "0.6.0-alpha-20241120125910",
+			"@credo-ts/react-native": "0.6.0-alpha-20241120125910",
 			"@credo-ts/react-hooks": "0.6.1",
 			"@animo-id/expo-ausweis-sdk": "0.0.1-alpha.14",
 			"@animo-id/expo-secure-environment": "0.1.0-alpha.9",
@@ -47,7 +47,7 @@
 		},
 		"patchedDependencies": {
 			"@hyperledger/[email protected]": "patches/@[email protected]",
-			"@credo-ts/[email protected]20241119125554": "patches/@[email protected]20241119125554.patch",
+			"@credo-ts/[email protected]20241120125910": "patches/@[email protected]20241120125910.patch",
 			"@animo-id/[email protected]": "patches/@[email protected]"
 		}
 	}

packages/agent/src/display.ts

@@ -1,4 +1,4 @@
-import type { JwkJson, W3cCredentialRecord } from '@credo-ts/core'
+import type { JwkJson, SdJwtVcTypeMetadata, W3cCredentialRecord } from '@credo-ts/core'
 import {
   ClaimFormat,
   Hasher,
@@ -56,11 +56,11 @@ export interface CredentialIssuerDisplay {
   logo?: DisplayImage
 }
 
-function findDisplay<Display extends { locale?: string }>(display?: Display[]): Display | undefined {
+function findDisplay<Display extends { locale?: string; lang?: string }>(display?: Display[]): Display | undefined {
   if (!display) return undefined
 
-  let item = display.find((d) => d.locale?.startsWith('en-'))
-  if (!item) item = display.find((d) => !d.locale)
+  let item = display.find((d) => d.locale?.startsWith('en-') || d.lang?.startsWith('en-'))
+  if (!item) item = display.find((d) => !d.locale && !d.lang)
   if (!item) item = display[0]
 
   return item
@@ -186,6 +186,29 @@ export function getCredentialDisplayWithDefaults(credentialDisplay?: Partial<Cre
   }
 }
 
+export function getSdJwtTypeMetadataCredentialDisplay(
+  sdJwtTypeMetadata: SdJwtVcTypeMetadata
+): Omit<CredentialDisplay, 'issuer' | 'name'> & { name?: string } {
+  const typeMetadataDisplay = findDisplay(sdJwtTypeMetadata.display)
+
+  // TODO: support SVG rendering method
+
+  const credentialDisplay = {
+    name: typeMetadataDisplay?.name,
+    description: typeMetadataDisplay?.description,
+    textColor: typeMetadataDisplay?.rendering?.simple?.text_color,
+    backgroundColor: typeMetadataDisplay?.rendering?.simple?.background_color,
+    backgroundImage: typeMetadataDisplay?.rendering?.simple?.logo
+      ? {
+          url: typeMetadataDisplay?.rendering?.simple?.logo.uri,
+          altText: typeMetadataDisplay?.rendering?.simple?.logo.alt_text,
+        }
+      : undefined,
+  }
+
+  return credentialDisplay
+}
+
 export function getOpenId4VcCredentialDisplay(openId4VcMetadata: OpenId4VcCredentialMetadata) {
   const openidCredentialDisplay = findDisplay(openId4VcMetadata.credential.display)
 
@@ -274,11 +297,16 @@ function getMdocCredentialDisplay(
 
 function getSdJwtCredentialDisplay(
   credentialPayload: Record<string, unknown>,
-  openId4VcMetadata?: OpenId4VcCredentialMetadata | null
+  openId4VcMetadata?: OpenId4VcCredentialMetadata | null,
+  typeMetadata?: SdJwtVcTypeMetadata | null
 ) {
   let credentialDisplay: Partial<CredentialDisplay> = {}
 
-  if (openId4VcMetadata) {
+  // TODO: should we combine them? I think not really needed if you have one of them
+  // Type metadata takes precendence.
+  if (typeMetadata) {
+    credentialDisplay = getSdJwtTypeMetadataCredentialDisplay(typeMetadata)
+  } else if (openId4VcMetadata) {
     credentialDisplay = getOpenId4VcCredentialDisplay(openId4VcMetadata)
   }
 
@@ -394,8 +422,9 @@ export function getCredentialForDisplay(credentialRecord: W3cCredentialRecord |
     )
 
     const openId4VcMetadata = getOpenId4VcCredentialMetadata(credentialRecord)
+    const sdJwtTypeMetadata = credentialRecord.typeMetadata
     const issuerDisplay = getOpenId4VcIssuerDisplay(openId4VcMetadata)
-    const credentialDisplay = getSdJwtCredentialDisplay(decodedPayload, openId4VcMetadata)
+    const credentialDisplay = getSdJwtCredentialDisplay(decodedPayload, openId4VcMetadata, sdJwtTypeMetadata)
 
     const mapped = filterAndMapSdJwtKeys(decodedPayload)
 

packages/agent/src/format/credentialEncoding.ts

@@ -6,6 +6,7 @@ import {
   type VerifiableCredential,
   W3cCredentialRecord,
 } from '@credo-ts/core'
+import { pidBdrSdJwtTypeMetadata } from './pidBdrSdJwtTypeMetadata'
 
 export function encodeCredential(credential: VerifiableCredential): Record<string, unknown> | string {
   const credentialResult = credentialWithClaimFormat(credential)
@@ -25,8 +26,15 @@ export function credentialRecordFromCredential(credential: VerifiableCredential)
   const credentialResult = credentialWithClaimFormat(credential)
 
   if (credentialResult.claimFormat === ClaimFormat.SdJwtVc) {
+    // NOTE: temp override to use sd-jwt type metadata even if vct is old url
+    const typeMetadata =
+      credentialResult.credential.payload.vct === 'https://example.bmi.bund.de/credential/pid/1.0'
+        ? pidBdrSdJwtTypeMetadata
+        : credentialResult.credential.typeMetadata
+
     return new SdJwtVcRecord({
       compactSdJwtVc: credentialResult.credential.compact,
+      typeMetadata,
     })
   }