feat: CredentialDetails custom subheader component

.changeset/sparkly-turkeys-appear.md

@@ -0,0 +1,5 @@
+---
+'@bifold/core': patch
+---
+
+Added custom subheader component for CredentialDetails

packages/core/src/container-api.ts

@@ -34,6 +34,7 @@ import { OnboardingStackParams, OnboardingTask, ScreenLayoutConfig, ScreenOption
 import { CustomNotification } from './types/notification'
 import { State } from './types/state'
 import { IVersionCheckService } from './types/version-check'
+import { DidCommCredentialExchangeRecord } from '@credo-ts/didcomm'
 
 export type FN_ONBOARDING_DONE = (
   dispatch: React.Dispatch<ReducerAction<unknown>>,
@@ -106,6 +107,7 @@ export const FN_TOKENS = {
   COMPONENT_CRED_LIST_HEADER_RIGHT: 'fn.credListHeaderRight',
   COMPONENT_CRED_LIST_OPTIONS: 'fn.credListOptions',
   COMPONENT_CRED_LIST_FOOTER: 'fn.credListFooter',
+  COMPONENT_CRED_SUBHEADER: 'fn.credSubHeader',
 } as const
 
 export const HISTORY_TOKENS = {
@@ -238,6 +240,7 @@ export type TokenMapping = {
   [TOKENS.COMPONENT_CRED_LIST_HEADER_RIGHT]: React.FC
   [TOKENS.COMPONENT_CRED_LIST_OPTIONS]: React.FC
   [TOKENS.COMPONENT_CRED_LIST_FOOTER]: React.FC<CredentialListFooterProps>
+  [TOKENS.COMPONENT_CRED_SUBHEADER]: React.FC<{ credential?: DidCommCredentialExchangeRecord }>
   [TOKENS.COMPONENT_HOME_HEADER]: React.FC
   [TOKENS.COMPONENT_NOTIFICATION_BANNER]: React.FC
   [TOKENS.COMPONENT_HOME_NOTIFICATIONS_EMPTY_LIST]: React.FC

packages/core/src/container-impl.ts

@@ -167,6 +167,7 @@ export class MainContainer implements Container {
     this._container.registerInstance(TOKENS.COMPONENT_CRED_LIST_HEADER_RIGHT, () => null)
     this._container.registerInstance(TOKENS.COMPONENT_CRED_LIST_OPTIONS, () => null)
     this._container.registerInstance(TOKENS.COMPONENT_CRED_LIST_FOOTER, () => null)
+    this._container.registerInstance(TOKENS.COMPONENT_CRED_SUBHEADER, () => null)
     this._container.registerInstance(TOKENS.COMPONENT_HOME_HEADER, HomeHeaderView)
     this._container.registerInstance(TOKENS.COMPONENT_NOTIFICATION_BANNER, Banner)
     this._container.registerInstance(TOKENS.COMPONENT_HOME_NOTIFICATIONS_EMPTY_LIST, NoNewUpdates)

packages/core/src/index.ts

@@ -117,6 +117,7 @@
 export { buildFieldsFromAnonCredsCredential } from './utils/oca'
 export { parsedSchema } from './utils/schema'
 export { testIdForAccessabilityLabel, testIdWithKey } from './utils/testable'
+import { getCredentialDefinitionIdForRecord } from './utils/helpers'
 
 export { default as OpenIDCredentialDetails } from './modules/openid/screens/OpenIDCredentialDetails'
 export { default as CredentialDetails } from './screens/CredentialDetails'
@@ -274,6 +275,7 @@
   useTour,
   usePreventDoublePress,
   walletTimeout,
+  getCredentialDefinitionIdForRecord,
 }
 export type { BannerMessage, DeepPartial, IButton }
 

packages/core/src/screens/CredentialDetails.tsx

@@ -60,13 +60,15 @@ const CredentialDetails: React.FC<CredentialDetailsProps> = ({ navigation, route
   const didcommCredentials = (agent as any)?.modules?.didcomm?.credentials ?? (agent as any)?.credentials
   const { t, i18n } = useTranslation()
   const { ColorPalette, Assets } = useTheme()
-  const [bundleResolver, logger, historyManagerCurried, historyEnabled, historyEventsLogger] = useServices([
-    TOKENS.UTIL_OCA_RESOLVER,
-    TOKENS.UTIL_LOGGER,
-    TOKENS.FN_LOAD_HISTORY,
-    TOKENS.HISTORY_ENABLED,
-    TOKENS.HISTORY_EVENTS_LOGGER,
-  ])
+  const [bundleResolver, logger, historyManagerCurried, historyEnabled, historyEventsLogger, CredentialSubHeader] =
+    useServices([
+      TOKENS.UTIL_OCA_RESOLVER,
+      TOKENS.UTIL_LOGGER,
+      TOKENS.FN_LOAD_HISTORY,
+      TOKENS.HISTORY_ENABLED,
+      TOKENS.HISTORY_EVENTS_LOGGER,
+      TOKENS.COMPONENT_CRED_SUBHEADER,
+    ])
   const [isRevoked, setIsRevoked] = useState<boolean>(false)
   const [revocationDate, setRevocationDate] = useState<string>('')
   const [preciseRevocationDate, setPreciseRevocationDate] = useState<string>('')
@@ -383,6 +385,7 @@ const CredentialDetails: React.FC<CredentialDetailsProps> = ({ navigation, route
           </View>
         ) : null}
         {credential && <CredentialCardGen credential={credential} style={{ margin: 16 }} />}
+        <CredentialSubHeader credential={credential} />
       </View>
     ) : (
       <View style={styles.container}>
@@ -398,6 +401,7 @@ const CredentialDetails: React.FC<CredentialDetailsProps> = ({ navigation, route
             {credential && <CredentialRevocationMessage credential={credential} />}
           </View>
         ) : null}
+        <CredentialSubHeader credential={credential} />
       </View>
     )
   }

packages/core/src/utils/helpers.ts

@@ -1,5 +1,6 @@
 import {
   AnonCredsCredentialInfo,
+  AnonCredsCredentialMetadataKey,
   AnonCredsCredentialsForProofRequest,
   AnonCredsPredicateType,
   AnonCredsProofRequest,
@@ -1278,14 +1279,14 @@ export function isChildFunction<T>(children: ReactNode | ChildFn<T>): children i
 
 // Fetches the credential definition id for a given credential exchange record, returns null if ID is not found
 export const getCredentialDefinitionIdForRecord = (record: DidCommCredentialExchangeRecord): string | null => {
-  // assumes record is anonCred
-  return record.metadata.get('_anoncreds/credential')?.credentialDefinitionId ?? null
+  // assumes record is anonCred ie: "_anoncreds/credential"
+  return record.metadata.get(AnonCredsCredentialMetadataKey)?.credentialDefinitionId ?? null
 }
 
 // Fetches the schema id for a given credential exchange record, returns null if ID is not found
 export const getCredentialSchemaIdForRecord = (record: DidCommCredentialExchangeRecord): string | null => {
-  // assumes record is anonCred
-  return record.metadata.get('_anoncreds/credential')?.schemaId ?? null
+  // assumes record is anonCred ie: "_anoncreds/credential"
+  return record.metadata.get(AnonCredsCredentialMetadataKey)?.schemaId ?? null
 }
 
 export function getCredentialEventRole(record: DidCommCredentialExchangeRecord) {