Merge pull request #69 from Sphereon-Opensource/feature/SPRIND-73-int…

…egration-pnpm9

Feature/sprind 73 integration pnpm9

.github/workflows/build-test-on-pr.yml

@@ -8,9 +8,9 @@ jobs:
       - uses: actions/checkout@v4
         with:
           fetch-depth: 0
-      - uses: pnpm/action-setup@v3
+      - uses: pnpm/action-setup@v4
         with:
-          version: 8.15.7
+          version: 9
       - name: Use Node.js
         uses: actions/setup-node@v4
         with:

.github/workflows/build-test-publish-on-push.yml

@@ -23,9 +23,9 @@ jobs:
       - uses: actions/checkout@v4
         with:
           fetch-depth: 0
-      - uses: pnpm/action-setup@v3
+      - uses: pnpm/action-setup@v4
         with:
-          version: 8.15.7
+          version: 9
       - name: Use Node.js
         uses: actions/setup-node@v4
         with:

package.json

@@ -49,8 +49,8 @@
     "overrides": {
       "@types/react": "~18.2.79",
       "styled-components": "^6.1.12",
-      "@sphereon/ssi-sdk.core": "0.29.0",
-      "@sphereon/ssi-types": "0.29.0"
+      "@sphereon/ssi-sdk.core": "0.30.2-next.273",
+      "@sphereon/ssi-types": "0.30.2-next.273"
     }
   }
 }

packages/credential-branding/package.json

@@ -28,9 +28,9 @@
     "access": "public"
   },
   "dependencies": {
-    "@sphereon/ssi-sdk.core": "0.29.0",
-    "@sphereon/ssi-sdk.data-store": "0.29.0",
-    "@sphereon/ssi-types": "0.29.0",
+    "@sphereon/ssi-sdk.core": "0.30.2-next.273",
+    "@sphereon/ssi-sdk.data-store": "0.30.2-next.273",
+    "@sphereon/ssi-types": "0.30.2-next.273",
     "@sphereon/ui-components.core": "workspace:*",
     "@veramo/core": "4.2.0",
     "@veramo/utils": "4.2.0",

packages/credential-branding/src/__tests__/credential-branding-sd-jwt.test.ts

@@ -59,6 +59,6 @@ describe('Credential summary', () => {
         const result = await toNonPersistedCredentialSummary({verifiableCredential: uniformSdJwt, credentialRole: CredentialRole.HOLDER})
 
         console.log(JSON.stringify(result, null, 2))
-        expect(result.properties.length).toEqual(13)
+        expect(result.properties.length).toEqual(19)
     })
 })

packages/credential-branding/src/details/CredentialDetails.ts

@@ -1,13 +1,22 @@
 import {v4 as uuidv4} from 'uuid'
 import {VerifiableCredential} from '@veramo/core'
 import {asArray, computeEntryHash} from '@veramo/utils'
-import {CredentialRole, IBasicCredentialLocaleBranding, IBasicIssuerLocaleBranding, Identity, Party} from '@sphereon/ssi-sdk.data-store'
+import {IBasicCredentialLocaleBranding, IBasicIssuerLocaleBranding, Identity, Party} from '@sphereon/ssi-sdk.data-store'
 import {EPOCH_MILLISECONDS, IS_IMAGE_URI_REGEX, Localization} from '@sphereon/ui-components.core'
 import {downloadImage, getImageDimensions, IImageDimensions} from '@sphereon/ssi-sdk.core'
-import {CredentialDetailsRow, CredentialSummary, ISelectAppLocaleBrandingArgs} from '../types'
 import {IImagePreloader} from '../services'
 import {getCredentialStatus, getIssuerLogo, isImageAddress} from '../utils'
-import {ICredential} from '@sphereon/ssi-types'
+import {
+  CredentialDetailsRow,
+  CredentialSummary,
+  GetCredentialDisplayNameArgs,
+  GetCredentialIssuerNameAndAliasArgs,
+  GetTermsOfUseArgs,
+  ISelectAppLocaleBrandingArgs,
+  ToCredentialDetailsRowArgs,
+  ToCredentialSummaryArgs,
+  ToNonPersistedCredentialSummaryArgs
+} from '../types'
 
 function findCorrelationIdName(correlationId: string, parties: Party[], activeUser?: Party): string {
   let allParties = parties
@@ -37,15 +46,9 @@ const getImageSize = async (image: string): Promise<IImageDimensions | undefined
   }
 }
 
-export const toCredentialDetailsRow = async ({
-  object,
-  subject,
-  issuer,
-}: {
-  object: Record<string, any>
-  subject?: Party
-  issuer?: Party
-}): Promise<CredentialDetailsRow[]> => {
+export const toCredentialDetailsRow = async (args: ToCredentialDetailsRowArgs): Promise<CredentialDetailsRow[]> => {
+  const {object, subject, issuer, branding, parentKey = '' } = args
+
   let rows: CredentialDetailsRow[] = []
   if (!object) {
     return rows
@@ -72,13 +75,13 @@ export const toCredentialDetailsRow = async ({
       //   label: key,
       //   value: undefined,
       // });
-      rows = rows.concat(await toCredentialDetailsRow({object: value, subject, issuer}))
+      rows = rows.concat(await toCredentialDetailsRow({object: value, subject, issuer, branding, parentKey: parentKey ? `${parentKey}.${key}` : key}))
     } else {
       if (key === '0' || value === undefined || value === null) {
         continue
       }
 
-      let label: string = key
+      let label: string = branding?.find((claim) => claim.key === (parentKey ? `${parentKey}.${key}` : key))?.name ?? key
       if (key === 'id' && typeof value === 'string' && value.startsWith('did:')) {
         label = 'subject'
       }
@@ -111,19 +114,15 @@ export const toCredentialDetailsRow = async ({
  * @param issuer Optional contact for issuer name
  * @param subject Optional contact for subject name
  */
-export const toNonPersistedCredentialSummary = ({
-  verifiableCredential,
-  credentialRole,
-  branding,
-  issuer,
-  subject,
-}: {
-  verifiableCredential: ICredential | VerifiableCredential
-  credentialRole: CredentialRole
-  branding?: Array<IBasicCredentialLocaleBranding>
-  issuer?: Party
-  subject?: Party
-}): Promise<CredentialSummary> => {
+export const toNonPersistedCredentialSummary = (args: ToNonPersistedCredentialSummaryArgs): Promise<CredentialSummary> => {
+  const {
+    verifiableCredential,
+    credentialRole,
+    branding,
+    issuer,
+    subject,
+  } = args
+
   return toCredentialSummary({
     verifiableCredential: verifiableCredential as VerifiableCredential,
     hash: computeEntryHash(verifiableCredential as VerifiableCredential),
@@ -144,13 +143,12 @@ export const getDate = (...dates: (number | string | undefined)[]): number | und
   return Math.round(new Date(date + '').valueOf() / EPOCH_MILLISECONDS)
 }
 
-export const getCredentialDisplayName = ({
-  verifiableCredential,
-  localeBranding,
-}: {
-  verifiableCredential: VerifiableCredential
-  localeBranding?: IBasicCredentialLocaleBranding
-}): string => {
+export const getCredentialDisplayName = (args: GetCredentialDisplayNameArgs): string => {
+  const {
+    verifiableCredential,
+    localeBranding,
+  } = args
+
   let title: string | undefined = localeBranding?.alias ?? verifiableCredential.name ?? (!verifiableCredential.type ? 'unknown' : undefined)
 
   if (verifiableCredential.type) {
@@ -167,13 +165,12 @@ export const getCredentialDisplayName = ({
   return title
 }
 
-export const getCredentialIssuerNameAndAlias = ({
-  verifiableCredential,
-  issuer,
-}: {
-  verifiableCredential: VerifiableCredential
-  issuer?: Party
-}): {issuerAlias: string; issuerName: string} => {
+export const getCredentialIssuerNameAndAlias = (args: GetCredentialIssuerNameAndAliasArgs): {issuerAlias: string; issuerName: string} => {
+  const {
+    verifiableCredential,
+    issuer,
+  } = args
+
   const issuerName: string = typeof verifiableCredential.issuer === 'string' ? verifiableCredential.issuer : verifiableCredential.issuer?.id
 
   let issuerAlias: string | undefined = undefined
@@ -191,14 +188,13 @@ export const getCredentialIssuerNameAndAlias = ({
   return {issuerName, issuerAlias}
 }
 
-const getTermsOfUse = ({
-  verifiableCredential,
-}: {
-  verifiableCredential: VerifiableCredential
-}): undefined | Array<Record<string, any> & {type?: string}> => {
+const getTermsOfUse = (args: GetTermsOfUseArgs): undefined | Array<Record<string, any> & {type?: string}> => {
+  const { verifiableCredential } = args
+
   if (!verifiableCredential.termsOfUse) {
     return
   }
+
   const termsOfUse = asArray(verifiableCredential.termsOfUse)
   return termsOfUse.map((tou: any) => {
     const {type, id, ...rest} = tou
@@ -208,6 +204,7 @@ const getTermsOfUse = ({
     }
   })
 }
+
 /**
  * Map persisted (Unique) VCs to the summaries we display
  * @param hash The hash of the unique verifiable credential
@@ -217,30 +214,26 @@ const getTermsOfUse = ({
  * @param issuer Optional contact for issuer name
  * @param subject Optional contact for subject name
  */
-export const toCredentialSummary = async ({
-  verifiableCredential,
-  hash,
-  credentialRole,
-  branding,
-  issuer,
-  subject,
-}: {
-  verifiableCredential: VerifiableCredential
-  hash: string
-  credentialRole: CredentialRole
-  branding?: Array<IBasicCredentialLocaleBranding>
-  issuer?: Party
-  subject?: Party
-}): Promise<CredentialSummary> => {
+export const toCredentialSummary = async (args: ToCredentialSummaryArgs): Promise<CredentialSummary> => {
+  const {
+    verifiableCredential,
+    hash,
+    credentialRole,
+    branding,
+    issuer,
+    subject
+  } = args
+
   const expirationDate = getDate(verifiableCredential.expirationDate, verifiableCredential.validTo, verifiableCredential.exp) ?? 0
   const issueDate = getDate(verifiableCredential.issuanceDate, verifiableCredential.validFrom, verifiableCredential.nbf, verifiableCredential.iat)!
-  const localeBranding = await selectAppLocaleBranding({localeBranding: branding})
+  const localeBranding: IBasicCredentialLocaleBranding | undefined = await selectAppLocaleBranding({localeBranding: branding})
   const credentialStatus = getCredentialStatus(verifiableCredential)
   const title = getCredentialDisplayName({verifiableCredential, localeBranding})
   const properties = await toCredentialDetailsRow({
     object: {...verifiableCredential.vc?.credentialSubject, ...verifiableCredential.credentialSubject},
     subject,
     issuer,
+    branding: localeBranding?.claims
   })
   const logo = getIssuerLogo(verifiableCredential, localeBranding)
   const url = verifiableCredential.issuer && typeof verifiableCredential.issuer !== 'string' ? verifiableCredential.issuer.url : undefined
@@ -266,9 +259,7 @@ export const toCredentialSummary = async ({
   }
 }
 
-export const selectAppLocaleBranding = async (
-  args: ISelectAppLocaleBrandingArgs,
-): Promise<IBasicCredentialLocaleBranding | IBasicIssuerLocaleBranding | undefined> => {
+export const selectAppLocaleBranding = async (args: ISelectAppLocaleBrandingArgs): Promise<IBasicCredentialLocaleBranding | IBasicIssuerLocaleBranding | undefined> => {
   // We need to retrieve the locale of the app and select a matching branding or fallback on a branding without a locale
   // We search for a first match that starts with the app locale
   const appLocale: string = Localization.getLocale()

packages/credential-branding/src/types/index.ts

@@ -1,5 +1,18 @@
 import {CredentialStatus, ImageSize, IssuerStatus} from '@sphereon/ui-components.core'
-import {CredentialRole, IBasicCredentialLocaleBranding, IBasicIssuerLocaleBranding} from '@sphereon/ssi-sdk.data-store'
+import {
+  CredentialRole, IBasicCredentialClaim,
+  IBasicCredentialLocaleBranding,
+  IBasicIssuerLocaleBranding,
+  Party
+} from '@sphereon/ssi-sdk.data-store'
+import {
+  getCredentialDisplayName,
+  getCredentialIssuerNameAndAlias,
+  toCredentialSummary,
+  toNonPersistedCredentialSummary
+} from '../details';
+import {ICredential} from '@sphereon/ssi-types';
+import {VerifiableCredential} from '@veramo/core';
 
 export type CredentialSummary = {
   hash: string
@@ -37,3 +50,42 @@ export type LabelStatus = CredentialStatus | IssuerStatus
 export interface ISelectAppLocaleBrandingArgs {
   localeBranding?: Array<IBasicCredentialLocaleBranding | IBasicIssuerLocaleBranding>
 }
+
+export type ToCredentialDetailsRowArgs = {
+  object: Record<string, any>
+  parentKey?: string
+  subject?: Party
+  issuer?: Party
+  branding?: Array<IBasicCredentialClaim>
+}
+
+export type ToNonPersistedCredentialSummaryArgs = {
+  verifiableCredential: ICredential | VerifiableCredential
+  credentialRole: CredentialRole
+  branding?: Array<IBasicCredentialLocaleBranding>
+  issuer?: Party
+  subject?: Party
+}
+
+export type GetCredentialDisplayNameArgs = {
+  verifiableCredential: VerifiableCredential
+  localeBranding?: IBasicCredentialLocaleBranding
+}
+
+export type GetCredentialIssuerNameAndAliasArgs = {
+  verifiableCredential: VerifiableCredential
+  issuer?: Party
+}
+
+export type GetTermsOfUseArgs = {
+  verifiableCredential: VerifiableCredential
+}
+
+export type ToCredentialSummaryArgs = {
+  verifiableCredential: VerifiableCredential
+  hash: string
+  credentialRole: CredentialRole
+  branding?: Array<IBasicCredentialLocaleBranding>
+  issuer?: Party
+  subject?: Party
+}

packages/ssi-react-native/src/components/buttons/SecondaryButton/index.tsx

@@ -1,5 +1,5 @@
 import React, {FC, ReactElement} from 'react'
-import {ColorValue, PressableProps, TouchableOpacityProps, ViewStyle} from 'react-native'
+import {ColorValue, TouchableOpacityProps, ViewStyle} from 'react-native'
 import {fontColors, gradientsColors, OpacityStyleEnum} from '@sphereon/ui-components.core'
 import {
   SSITouchableOpacityButtonFlexRowStyled as Button,

packages/ssi-react/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@sphereon/ui-components.ssi-react",
   "private": false,
-  "version": "0.3.4-bram",
+  "version": "0.3.4",
   "description": "SSI UI components for React",
   "repository": "git@github.com:Sphereon-Opensource/UI-Components.git",
   "author": "Sphereon <dev@sphereon.com>",
@@ -41,7 +41,7 @@
     "@mui/system": "^5.15.12",
     "@mui/x-date-pickers": "^6.19.5",
     "@sphereon/ui-components.core": "workspace:*",
-    "@sphereon/ssi-sdk.data-store": "0.29.1-next.47",
+    "@sphereon/ssi-sdk.data-store": "0.30.2-next.273",
     "@tanstack/react-table": "^8.9.3",
     "react-json-tree": "^0.18.0",
     "react-loader-spinner": "5.4.5",