openwallet-foundation · TimoGlastra · Dec 11, 2023 · Dec 9, 2023
diff --git a/packages/react-hooks/package.json b/packages/react-hooks/package.json
@@ -25,17 +25,16 @@
     "test": "jest"
   },
   "dependencies": {
-    "@aries-framework/question-answer": "^0.4.0",
-    "@types/node-fetch": "^2",
     "rxjs": "^7.2.0"
   },
   "devDependencies": {
-    "@aries-framework/core": "0.4.0",
-    "react": "^18.0.0",
+    "@aries-framework/core": "^0.4.2",
+    "@aries-framework/question-answer": "^0.4.2",
     "@types/react": "^18.2.14"
   },
   "peerDependencies": {
-    "@aries-framework/core": "^0.4.0",
+    "@aries-framework/question-answer": "^0.4.2",
+    "@aries-framework/core": "^0.4.2",
     "react": ">=17.0.0 <19.0.0"
   }
 }
diff --git a/packages/react-hooks/src/AgentProvider.tsx b/packages/react-hooks/src/AgentProvider.tsx
@@ -7,7 +7,9 @@ import { createContext, useState, useContext } from 'react'
 
 import BasicMessageProvider from './BasicMessageProvider'
 import ConnectionProvider from './ConnectionProvider'
+import CredentialFormatDataProvider from './CredentialFormatDataProvider'
 import CredentialProvider from './CredentialProvider'
+import ProofFormatDataProvider from './ProofFormatDataProvider'
 import ProofProvider from './ProofProvider'
 import QuestionAnswerProvider from './QuestionAnswerProvider'
 import { useIsModuleRegistered } from './recordUtils'
@@ -43,9 +45,17 @@ const AgentProvider: React.FC<PropsWithChildren<Props>> = ({ agent, children })
       <ConnectionProvider agent={agent}>
         <CredentialProvider agent={agent}>
           <ProofProvider agent={agent}>
-            <BasicMessageProvider agent={agent}>
-              {isQaRegistered ? <QuestionAnswerProvider agent={agent}>{children} </QuestionAnswerProvider> : children}
-            </BasicMessageProvider>
+            <CredentialFormatDataProvider agent={agent}>
+              <ProofFormatDataProvider agent={agent}>
+                <BasicMessageProvider agent={agent}>
+                  {isQaRegistered ? (
+                    <QuestionAnswerProvider agent={agent}>{children} </QuestionAnswerProvider>
+                  ) : (
+                    children
+                  )}
+                </BasicMessageProvider>
+              </ProofFormatDataProvider>
+            </CredentialFormatDataProvider>
           </ProofProvider>
         </CredentialProvider>
       </ConnectionProvider>

diff --git a/packages/react-hooks/src/BasicMessageProvider.tsx b/packages/react-hooks/src/BasicMessageProvider.tsx
@@ -47,35 +47,33 @@ const BasicMessageProvider: React.FC<PropsWithChildren<Props>> = ({ agent, child
   })
 
   const setInitialState = async () => {
-    if (agent) {
-      const records = await agent.basicMessages.findAllByQuery({})
-      setState({ records, loading: false })
-    }
+    const records = await agent.basicMessages.findAllByQuery({})
+    setState({ records, loading: false })
   }
 
   useEffect(() => {
     setInitialState()
   }, [agent])
 
   useEffect(() => {
-    if (!state.loading) {
-      const basicMessageAdded$ = recordsAddedByType(agent, BasicMessageRecord).subscribe((record) =>
-        setState(addRecord(record, state))
-      )
-
-      const basicMessageUpdated$ = recordsUpdatedByType(agent, BasicMessageRecord).subscribe((record) =>
-        setState(updateRecord(record, state))
-      )
-
-      const basicMessageRemoved$ = recordsRemovedByType(agent, BasicMessageRecord).subscribe((record) =>
-        setState(removeRecord(record, state))
-      )
-
-      return () => {
-        basicMessageAdded$?.unsubscribe()
-        basicMessageUpdated$?.unsubscribe()
-        basicMessageRemoved$?.unsubscribe()
-      }
+    if (state.loading) return
+
+    const basicMessageAdded$ = recordsAddedByType(agent, BasicMessageRecord).subscribe((record) =>
+      setState(addRecord(record, state))
+    )
+
+    const basicMessageUpdated$ = recordsUpdatedByType(agent, BasicMessageRecord).subscribe((record) =>
+      setState(updateRecord(record, state))
+    )
+
+    const basicMessageRemoved$ = recordsRemovedByType(agent, BasicMessageRecord).subscribe((record) =>
+      setState(removeRecord(record, state))
+    )
+
+    return () => {
+      basicMessageAdded$?.unsubscribe()
+      basicMessageUpdated$?.unsubscribe()
+      basicMessageRemoved$?.unsubscribe()
     }
   }, [state, agent])
 

diff --git a/packages/react-hooks/src/ConnectionProvider.tsx b/packages/react-hooks/src/ConnectionProvider.tsx
@@ -72,35 +72,33 @@ const ConnectionProvider: React.FC<PropsWithChildren<Props>> = ({ agent, childre
   })
 
   const setInitialState = async () => {
-    if (agent) {
-      const records = await agent.connections.getAll()
-      setState({ records, loading: false })
-    }
+    const records = await agent.connections.getAll()
+    setState({ records, loading: false })
   }
 
   useEffect(() => {
     setInitialState()
   }, [agent])
 
   useEffect(() => {
-    if (!state.loading) {
-      const connectionAdded$ = recordsAddedByType(agent, ConnectionRecord).subscribe((record) =>
-        setState(addRecord(record, state))
-      )
-
-      const connectionUpdated$ = recordsUpdatedByType(agent, ConnectionRecord).subscribe((record) =>
-        setState(updateRecord(record, state))
-      )
-
-      const connectionRemoved$ = recordsRemovedByType(agent, ConnectionRecord).subscribe((record) =>
-        setState(removeRecord(record, state))
-      )
-
-      return () => {
-        connectionAdded$.unsubscribe()
-        connectionUpdated$.unsubscribe()
-        connectionRemoved$.unsubscribe()
-      }
+    if (state.loading) return
+
+    const connectionAdded$ = recordsAddedByType(agent, ConnectionRecord).subscribe((record) =>
+      setState(addRecord(record, state))
+    )
+
+    const connectionUpdated$ = recordsUpdatedByType(agent, ConnectionRecord).subscribe((record) =>
+      setState(updateRecord(record, state))
+    )
+
+    const connectionRemoved$ = recordsRemovedByType(agent, ConnectionRecord).subscribe((record) =>
+      setState(removeRecord(record, state))
+    )
+
+    return () => {
+      connectionAdded$.unsubscribe()
+      connectionUpdated$.unsubscribe()
+      connectionRemoved$.unsubscribe()
     }
   }, [state, agent])
 

diff --git a/packages/react-hooks/src/CredentialFormatDataProvider.tsx b/packages/react-hooks/src/CredentialFormatDataProvider.tsx
@@ -0,0 +1,134 @@
+import type { Agent } from '@aries-framework/core'
+import type { Awaited } from '@aries-framework/core/build/types'
+import type { PropsWithChildren } from 'react'
+
+import { CredentialExchangeRecord } from '@aries-framework/core'
+import React, { useState, createContext, useContext, useEffect } from 'react'
+
+import { recordsAddedByType, recordsRemovedByType, recordsUpdatedByType } from './recordUtils'
+
+type FormatReturn = Awaited<ReturnType<Agent['credentials']['getFormatData']>>
+
+export type CredentialFormatData = FormatReturn & {
+  id: string
+}
+
+type FormattedDataState = {
+  formattedData: Array<CredentialFormatData>
+  loading: boolean
+}
+
+const addRecord = (record: CredentialFormatData, state: FormattedDataState): FormattedDataState => {
+  const newRecordsState = [...state.formattedData]
+  newRecordsState.unshift(record)
+
+  return {
+    loading: state.loading,
+    formattedData: newRecordsState,
+  }
+}
+
+const updateRecord = (record: CredentialFormatData, 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 = (recordId: string, state: FormattedDataState): FormattedDataState => {
+  const newRecordsState = state.formattedData.filter((r) => r.id !== recordId)
+
+  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): CredentialFormatData | 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<CredentialFormatData>
+    loading: boolean
+  }>({
+    formattedData: [],
+    loading: true,
+  })
+
+  const fetchCredentialInformation = async (agent: Agent, record: CredentialExchangeRecord) => {
+    const formatData = await agent.credentials.getFormatData(record.id)
+
+    return { ...formatData, id: record.id }
+  }
+
+  const setInitialState = async () => {
+    const records = await agent.credentials.getAll()
+    const formattedData: Array<CredentialFormatData> = []
+    for (const record of records) {
+      formattedData.push(await fetchCredentialInformation(agent, record))
+    }
+    setState({ formattedData, loading: false })
+  }
+
+  useEffect(() => {
+    void setInitialState()
+  }, [agent])
+
+  useEffect(() => {
+    if (state.loading) return
+
+    const credentialAdded$ = recordsAddedByType(agent, CredentialExchangeRecord).subscribe(
+      async (record: CredentialExchangeRecord) => {
+        const formatData = await fetchCredentialInformation(agent, record)
+        setState(addRecord(formatData, state))
+      }
+    )
+
+    const credentialUpdate$ = recordsUpdatedByType(agent, CredentialExchangeRecord).subscribe(
+      async (record: CredentialExchangeRecord) => {
+        const formatData = await fetchCredentialInformation(agent, record)
+        setState(updateRecord(formatData, state))
+      }
+    )
+
+    const credentialRemove$ = recordsRemovedByType(agent, CredentialExchangeRecord).subscribe((record) =>
+      setState(removeRecord(record.id, state))
+    )
+
+    return () => {
+      credentialAdded$.unsubscribe()
+      credentialUpdate$.unsubscribe()
+      credentialRemove$.unsubscribe()
+    }
+  }, [state, agent])
+
+  return <CredentialFormatDataContext.Provider value={state}>{children}</CredentialFormatDataContext.Provider>
+}
+
+export default CredentialFormatDataProvider
diff --git a/packages/react-hooks/src/CredentialProvider.tsx b/packages/react-hooks/src/CredentialProvider.tsx
@@ -44,10 +44,7 @@ export const useCredentialByState = (state: CredentialState | CredentialState[])
   const { records: credentials } = useCredentials()
 
   const filteredCredentials = useMemo(
-    () =>
-      credentials.filter((r: CredentialExchangeRecord) => {
-        if (states.includes(r.state)) return r
-      }),
+    () => credentials.filter((r: CredentialExchangeRecord) => states.includes(r.state)),
     [credentials]
   )
   return filteredCredentials
@@ -59,12 +56,10 @@ export const useCredentialNotInState = (state: CredentialState | CredentialState
   const { records: credentials } = useCredentials()
 
   const filteredCredentials = useMemo(
-    () =>
-      credentials.filter((r: CredentialExchangeRecord) => {
-        if (!states.includes(r.state)) return r
-      }),
+    () => credentials.filter((r: CredentialExchangeRecord) => !states.includes(r.state)),
     [credentials]
   )
+
   return filteredCredentials
 }
 
@@ -79,35 +74,33 @@ const CredentialProvider: React.FC<PropsWithChildren<Props>> = ({ agent, childre
   })
 
   const setInitialState = async () => {
-    if (agent) {
-      const records = await agent.credentials.getAll()
-      setState({ records, loading: false })
-    }
+    const records = await agent.credentials.getAll()
+    setState({ records, loading: false })
   }
 
   useEffect(() => {
     setInitialState()
   }, [agent])
 
   useEffect(() => {
-    if (!state.loading) {
-      const credentialAdded$ = recordsAddedByType(agent, CredentialExchangeRecord).subscribe((record) =>
-        setState(addRecord(record, state))
-      )
-
-      const credentialUpdated$ = recordsUpdatedByType(agent, CredentialExchangeRecord).subscribe((record) =>
-        setState(updateRecord(record, state))
-      )
-
-      const credentialRemoved$ = recordsRemovedByType(agent, CredentialExchangeRecord).subscribe((record) =>
-        setState(removeRecord(record, state))
-      )
-
-      return () => {
-        credentialAdded$?.unsubscribe()
-        credentialUpdated$?.unsubscribe()
-        credentialRemoved$?.unsubscribe()
-      }
+    if (state.loading) return
+
+    const credentialAdded$ = recordsAddedByType(agent, CredentialExchangeRecord).subscribe((record) =>
+      setState(addRecord(record, state))
+    )
+
+    const credentialUpdated$ = recordsUpdatedByType(agent, CredentialExchangeRecord).subscribe((record) =>
+      setState(updateRecord(record, state))
+    )
+
+    const credentialRemoved$ = recordsRemovedByType(agent, CredentialExchangeRecord).subscribe((record) =>
+      setState(removeRecord(record, state))
+    )
+
+    return () => {
+      credentialAdded$?.unsubscribe()
+      credentialUpdated$?.unsubscribe()
+      credentialRemoved$?.unsubscribe()
     }
   }, [state, agent])