feat: Added formatting for the credentials and added the schema name in the credential table

packages/toolbox-core/src/utils/formatSchemaName.ts

@@ -0,0 +1,9 @@
+export const formatSchemaName = (schemaId?: string) =>
+  schemaId
+    ? schemaId
+        .split(':')[2]
+        .replace(/([a-z])([A-Z])/g, '$1 $2')
+        .split(/-|_| /g)
+        .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
+        .join(' ')
+    : 'Unknown credential'

packages/toolbox-core/src/utils/index.ts

@@ -1 +1,2 @@
 export * from './uuid'
+export * from './formatSchemaName'

packages/toolbox-ui/src/components/credentials/CredentialsTable.tsx

@@ -1,9 +1,11 @@
 import type { ConnectionRecord, CredentialExchangeRecord } from '@aries-framework/core'
 
+import { formatSchemaName } from '@animo/toolbox-core/src/utils'
 import { CredentialsUtil } from '@animo/toolbox-core/src/utils/records/CredentialsUtil'
 import { Badge, Group, ScrollArea, Table, Text, useMantineTheme } from '@mantine/core'
 import React from 'react'
 
+import { useCredentialsFormatData } from '../../contexts/CredentialFormatDataProvider'
 import { RecordActions } from '../RecordActions'
 import { SmartAvatar } from '../SmartAvatar'
 
@@ -17,13 +19,14 @@ interface CredentialsTableProps {
 
 export const CredentialsTable = ({ records, connections, onDelete, onAccept, onDecline }: CredentialsTableProps) => {
   const theme = useMantineTheme()
+  const { formattedData } = useCredentialsFormatData()
 
   return (
     <ScrollArea>
       <Table verticalSpacing="sm">
         <thead>
           <tr>
-            <th>Issuer</th>
+            <th>Credential</th>
             <th>Credential Id</th>
             <th>State</th>
             <th />
@@ -32,6 +35,7 @@ export const CredentialsTable = ({ records, connections, onDelete, onAccept, onD
         <tbody>
           {records.map((record) => {
             const connection = connections.find((connection) => connection.id == record.connectionId)
+            const formattedCredential = formattedData.find((data) => data.id === record.id)
             const isLoading = CredentialsUtil.isCredentialWaitingForResponse(record)
             const isWaitingForAccept = CredentialsUtil.isCredentialWaitingForAcceptInput(record)
             const isWaitingForDecline = CredentialsUtil.isCredentialWaitingForDeclineInput(record)
@@ -44,7 +48,7 @@ export const CredentialsTable = ({ records, connections, onDelete, onAccept, onD
                       {connection?.theirLabel}
                     </SmartAvatar>
                     <Text size="sm" weight={500}>
-                      {connection?.theirLabel}
+                      {formatSchemaName(formattedCredential?.offer?.indy?.schema_id)}
                     </Text>
                   </Group>
                 </td>

packages/toolbox-ui/src/contexts/AgentContext.tsx

@@ -7,6 +7,8 @@ import { agentInitializer } from '@animo/toolbox-core/src/agent/AgentInitializer
 import AgentProvider from '@aries-framework/react-hooks'
 import React, { useEffect, useState } from 'react'
 
+import CredentialFormatDataProvider from './CredentialFormatDataProvider'
+
 interface AgentContextProps {
   agentRecord?: IAgentRecord
   agentDependenciesProvider: IAgentDependenciesProvider
@@ -42,7 +44,7 @@ export const AgentContext: React.FunctionComponent<PropsWithChildren & AgentCont
 
   return (
     <AgentProvider key={activeAgent?.id} agent={activeAgent?.agent}>
-      {children}
+      <CredentialFormatDataProvider agent={activeAgent?.agent}>{children}</CredentialFormatDataProvider>
     </AgentProvider>
   )
 }

packages/toolbox-ui/src/contexts/CredentialFormatDataProvider.tsx

@@ -0,0 +1,122 @@
+import type { Agent, GetFormatDataReturn, IndyCredentialFormat } from '@aries-framework/core'
+import type { PropsWithChildren } from 'react'
+
+import { CredentialExchangeRecord } from '@aries-framework/core'
+import {
+  recordsAddedByType,
+  recordsRemovedByType,
+  recordsUpdatedByType,
+} from '@aries-framework/react-hooks/build/recordUtils'
+import { useState, createContext, useContext, useEffect } from 'react'
+import * as React from 'react'
+
+type FormattedData = GetFormatDataReturn<[IndyCredentialFormat]> & {
+  id: string
+}
+
+type FormattedDataState = {
+  formattedData: Array<FormattedData>
+  loading: boolean
+}
+
+const addRecord = (record: FormattedData, state: FormattedDataState): FormattedDataState => {
+  const newRecordsState = [...state.formattedData]
+  newRecordsState.unshift(record)
+  return {
+    loading: state.loading,
+    formattedData: newRecordsState,
+  }
+}
+
+const updateRecord = (record: FormattedData, state: FormattedDataState): FormattedDataState => {
+  const newRecordsState = [...state.formattedData]
+  const index = newRecordsState.findIndex((r) => r.id === record.id)
+  if (index > -1) {
+    newRecordsState[index] = record
+  }
+  return {
+    loading: state.loading,
+    formattedData: newRecordsState,
+  }
+}
+
+const removeRecord = (record: FormattedData, state: FormattedDataState): FormattedDataState => {
+  const newRecordsState = state.formattedData.filter((r) => r.id !== record.id)
+  return {
+    loading: state.loading,
+    formattedData: newRecordsState,
+  }
+}
+
+const CredentialFormatDataContext = createContext<FormattedDataState | undefined>(undefined)
+
+export const useCredentialsFormatData = () => {
+  const credentialFormatDataContext = useContext(CredentialFormatDataContext)
+  if (!credentialFormatDataContext) {
+    throw new Error('useCredentialFormatData must be used within a CredentialFormatDataContextProvider')
+  }
+  return credentialFormatDataContext
+}
+
+export const useCredentialFormatDataById = (id: string): FormattedData | undefined => {
+  const { formattedData } = useCredentialsFormatData()
+  return formattedData.find((c) => c.id === id)
+}
+
+interface Props {
+  agent?: Agent
+}
+
+const CredentialFormatDataProvider: React.FC<PropsWithChildren<Props>> = ({ agent, children }) => {
+  const [state, setState] = useState<{
+    formattedData: Array<FormattedData>
+    loading: boolean
+  }>({
+    formattedData: [],
+    loading: true,
+  })
+
+  const setInitialState = async () => {
+    if (agent) {
+      const records = await agent.credentials.getAll()
+      const formattedData: Array<FormattedData> = []
+      for (const record of records) {
+        const formatData = await agent.credentials.getFormatData(record.id)
+        formattedData.push({ ...formatData, id: record.id })
+      }
+      setState({ formattedData, loading: false })
+    }
+  }
+
+  useEffect(() => {
+    setInitialState()
+  }, [agent])
+
+  useEffect(() => {
+    if (!state.loading) {
+      const credentialAdded$ = recordsAddedByType(agent, CredentialExchangeRecord).subscribe(async (record) => {
+        const formatData = await agent!.credentials.getFormatData(record.id)
+        setState(addRecord({ ...formatData, id: record.id }, state))
+      })
+
+      const credentialUpdate$ = recordsUpdatedByType(agent, CredentialExchangeRecord).subscribe(async (record) => {
+        const formatData = await agent!.credentials.getFormatData(record.id)
+        setState(updateRecord({ ...formatData, id: record.id }, state))
+      })
+
+      const credentialRemove$ = recordsRemovedByType(agent, CredentialExchangeRecord).subscribe((record) =>
+        setState(removeRecord(record, state))
+      )
+
+      return () => {
+        credentialAdded$.unsubscribe()
+        credentialUpdate$.unsubscribe()
+        credentialRemove$.unsubscribe()
+      }
+    }
+  }, [state, agent])
+
+  return <CredentialFormatDataContext.Provider value={state}>{children}</CredentialFormatDataContext.Provider>
+}
+
+export default CredentialFormatDataProvider