@bifold/core 1.0.0

package/src/hooks/chat-messages.tsx

@@ -0,0 +1,263 @@
+import {
+  BasicMessageRecord,
+  ConnectionRecord,
+  CredentialExchangeRecord,
+  CredentialState,
+  ProofExchangeRecord,
+  ProofState,
+} from '@credo-ts/core'
+import { useBasicMessagesByConnectionId } from '@credo-ts/react-hooks'
+import { isPresentationReceived } from '@bifold/verifier'
+import { useNavigation } from '@react-navigation/native'
+import { StackNavigationProp } from '@react-navigation/stack'
+import React, { Fragment, useEffect, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import { Linking } from 'react-native'
+
+import { ChatEvent } from '../components/chat/ChatEvent'
+import { ExtendedChatMessage, CallbackType } from '../components/chat/ChatMessage'
+import { useStore } from '../contexts/store'
+import { useTheme } from '../contexts/theme'
+import { useCredentialsByConnectionId } from './credentials'
+import { useProofsByConnectionId } from './proofs'
+import { Role } from '../types/chat'
+import { RootStackParams, ContactStackParams, Screens, Stacks } from '../types/navigators'
+import {
+  getConnectionName,
+  getCredentialEventLabel,
+  getCredentialEventRole,
+  getMessageEventRole,
+  getProofEventLabel,
+  getProofEventRole,
+} from '../utils/helpers'
+import { ThemedText } from '../components/texts/ThemedText'
+
+/**
+ * Determines the callback to be called when the button below a given chat message is pressed, if it exists.
+ *
+ * eg. 'View offer' -> opens the credential offer screen
+ *
+ * @param {CredentialExchangeRecord | ProofExchangeRecord} record - The record to determine the callback type for.
+ * @returns {CallbackType} The callback type for the given record.
+ */
+const callbackTypeForMessage = (record: CredentialExchangeRecord | ProofExchangeRecord) => {
+  if (
+    record instanceof CredentialExchangeRecord &&
+    (record.state === CredentialState.Done || record.state === CredentialState.OfferReceived)
+  ) {
+    return CallbackType.CredentialOffer
+  }
+
+  if (
+    (record instanceof ProofExchangeRecord && isPresentationReceived(record) && record.isVerified !== undefined) ||
+    record.state === ProofState.RequestReceived ||
+    (record.state === ProofState.Done && record.isVerified === undefined)
+  ) {
+    return CallbackType.ProofRequest
+  }
+
+  if (
+    record instanceof ProofExchangeRecord &&
+    (record.state === ProofState.PresentationSent || record.state === ProofState.Done)
+  ) {
+    return CallbackType.PresentationSent
+  }
+}
+
+/**
+ * Custom hook for retrieving chat messages for a given connection. This hook includes some of
+ * the JSX for rendering the chat messages, including the logic for handling links in messages.
+ *
+ * @param {ConnectionRecord} connection - The connection to retrieve chat messages for.
+ * @returns {ExtendedChatMessage[]} The chat messages for the given connection.
+ */
+export const useChatMessagesByConnection = (connection: ConnectionRecord): ExtendedChatMessage[] => {
+  const [messages, setMessages] = useState<Array<ExtendedChatMessage>>([])
+  const [store] = useStore()
+  const { t } = useTranslation()
+  const { ChatTheme: theme, ColorPallet } = useTheme()
+  const navigation = useNavigation<StackNavigationProp<RootStackParams | ContactStackParams>>()
+  const basicMessages = useBasicMessagesByConnectionId(connection?.id)
+  const credentials = useCredentialsByConnectionId(connection?.id)
+  const proofs = useProofsByConnectionId(connection?.id)
+  const [theirLabel, setTheirLabel] = useState(getConnectionName(connection, store.preferences.alternateContactNames))
+
+  // This useEffect is for properly rendering changes to the alt contact name, useMemo did not pick them up
+  useEffect(() => {
+    setTheirLabel(getConnectionName(connection, store.preferences.alternateContactNames))
+  }, [connection, store.preferences.alternateContactNames])
+
+  useEffect(() => {
+    const transformedMessages: Array<ExtendedChatMessage> = basicMessages.map((record: BasicMessageRecord) => {
+      const role = getMessageEventRole(record)
+      // eslint-disable-next-line
+      const linkRegex = /(?:https?\:\/\/\w+(?:\.\w+)+\S*)|(?:[\w\d\.\_\-]+@\w+(?:\.\w+)+)/gim
+      // eslint-disable-next-line
+      const mailRegex = /^[\w\d\.\_\-]+@\w+(?:\.\w+)+$/gim
+      const links = record.content.match(linkRegex) ?? []
+      const handleLinkPress = (link: string) => {
+        if (link.match(mailRegex)) {
+          link = 'mailto:' + link
+        }
+        Linking.openURL(link)
+      }
+      const msgText = (
+        <ThemedText style={role === Role.me ? theme.rightText : theme.leftText}>
+          {record.content.split(linkRegex).map((split, i) => {
+            if (i < links.length) {
+              const link = links[i]
+              return (
+                <Fragment key={`${record.id}-${i}`}>
+                  <ThemedText>{split}</ThemedText>
+                  <ThemedText
+                    onPress={() => handleLinkPress(link)}
+                    style={{ color: ColorPallet.brand.link, textDecorationLine: 'underline' }}
+                    accessibilityRole={'link'}
+                  >
+                    {link}
+                  </ThemedText>
+                </Fragment>
+              )
+            }
+            return <ThemedText key={`${record.id}-${i}`}>{split}</ThemedText>
+          })}
+        </ThemedText>
+      )
+
+      return {
+        _id: record.id,
+        text: record.content,
+        renderEvent: () => msgText,
+        createdAt: record.createdAt,
+        type: record.type,
+        user: { _id: role },
+      }
+    })
+
+    transformedMessages.push(
+      ...credentials.map((record: CredentialExchangeRecord) => {
+        const role = getCredentialEventRole(record)
+        const userLabel = role === Role.me ? t('Chat.UserYou') : theirLabel
+        const actionLabel = t(getCredentialEventLabel(record) as any)
+
+        return {
+          _id: record.id,
+          text: actionLabel,
+          renderEvent: () => <ChatEvent role={role} userLabel={userLabel} actionLabel={actionLabel} />,
+          createdAt: record.createdAt,
+          type: record.type,
+          user: { _id: role },
+          messageOpensCallbackType: callbackTypeForMessage(record),
+          onDetails: () => {
+            const navMap: { [key in CredentialState]?: () => void } = {
+              [CredentialState.Done]: () => {
+                navigation.navigate(Stacks.ContactStack as any, {
+                  screen: Screens.CredentialDetails,
+                  params: { credential: record },
+                })
+              },
+              [CredentialState.OfferReceived]: () => {
+                // if we are in the contact stack, use the parent navigator
+                if (navigation.getParent()) {
+                  navigation.getParent()?.navigate(Stacks.ConnectionStack, {
+                    screen: Screens.Connection,
+                    params: { credentialId: record.id },
+                  })
+                } else {
+                  // if we are in the root stack, use the current navigator
+                  navigation.navigate(Stacks.ConnectionStack as any, {
+                    screen: Screens.Connection,
+                    params: { credentialId: record.id },
+                  })
+                }
+              },
+            }
+            const nav = navMap[record.state]
+            if (nav) {
+              nav()
+            }
+          },
+        }
+      })
+    )
+
+    transformedMessages.push(
+      ...proofs.map((record: ProofExchangeRecord) => {
+        const role = getProofEventRole(record)
+        const userLabel = role === Role.me ? t('Chat.UserYou') : theirLabel
+        const actionLabel = t(getProofEventLabel(record) as any)
+
+        return {
+          _id: record.id,
+          text: actionLabel,
+          renderEvent: () => <ChatEvent role={role} userLabel={userLabel} actionLabel={actionLabel} />,
+          createdAt: record.createdAt,
+          type: record.type,
+          user: { _id: role },
+          messageOpensCallbackType: callbackTypeForMessage(record),
+          onDetails: () => {
+            const toProofDetails = () => {
+              navigation.navigate(Stacks.ContactStack as any, {
+                screen: Screens.ProofDetails,
+                params: {
+                  recordId: record.id,
+                  isHistory: true,
+                  senderReview:
+                    record.state === ProofState.PresentationSent ||
+                    (record.state === ProofState.Done && record.isVerified === undefined),
+                },
+              })
+            }
+            const navMap: { [key in ProofState]?: () => void } = {
+              [ProofState.Done]: toProofDetails,
+              [ProofState.PresentationSent]: toProofDetails,
+              [ProofState.PresentationReceived]: toProofDetails,
+              [ProofState.RequestReceived]: () => {
+                // if we are in the contact stack, use the parent navigator
+                if (navigation.getParent()) {
+                  navigation.getParent()?.navigate(Stacks.ConnectionStack, {
+                    screen: Screens.Connection,
+                    params: { proofId: record.id },
+                  })
+                } else {
+                  // if we are in the root stack, use the current navigator
+                  navigation.navigate(Stacks.ConnectionStack as any, {
+                    screen: Screens.Connection,
+                    params: { proofId: record.id },
+                  })
+                }
+              },
+            }
+            const nav = navMap[record.state]
+            if (nav) {
+              nav()
+            }
+          },
+        }
+      })
+    )
+
+    const connectedMessage = connection
+      ? {
+          _id: 'connected',
+          text: `${t('Chat.YouConnected')} ${theirLabel}`,
+          renderEvent: () => (
+            <ThemedText style={theme.rightText}>
+              {t('Chat.YouConnected')}
+              <ThemedText style={[theme.rightText, theme.rightTextHighlighted]}> {theirLabel}</ThemedText>
+            </ThemedText>
+          ),
+          createdAt: connection.createdAt,
+          user: { _id: Role.me },
+        }
+      : undefined
+
+    setMessages(
+      connectedMessage
+        ? [...transformedMessages.sort((a: any, b: any) => b.createdAt - a.createdAt), connectedMessage]
+        : transformedMessages.sort((a: any, b: any) => b.createdAt - a.createdAt)
+    )
+  }, [ColorPallet, basicMessages, theme, credentials, t, navigation, proofs, theirLabel, connection])
+
+  return messages
+}

package/src/hooks/connections.ts

@@ -0,0 +1,37 @@
+import { ConnectionRecord, OutOfBandRecord } from '@credo-ts/core'
+import { useAgent, useConnectionById, useConnections } from '@credo-ts/react-hooks'
+import { useMemo, useState } from 'react'
+
+export const useOutOfBandById = (oobId: string): OutOfBandRecord | undefined => {
+  const { agent } = useAgent()
+  const [oob, setOob] = useState<OutOfBandRecord | undefined>(undefined)
+  if (!oob) {
+    agent?.oob.findById(oobId).then((res) => {
+      if (res) {
+        setOob(res)
+      }
+    })
+  }
+  return oob
+}
+
+export const useConnectionByOutOfBandId = (outOfBandId: string): ConnectionRecord | undefined => {
+  const reuseConnectionId = useOutOfBandById(outOfBandId)?.reuseConnectionId
+  const { records: connections } = useConnections()
+
+  return useMemo(
+    () =>
+      connections.find(
+        (connection: ConnectionRecord) =>
+          connection.outOfBandId === outOfBandId ||
+          // Check for a reusable connection
+          (reuseConnectionId && connection.id === reuseConnectionId)
+      ),
+    [connections, outOfBandId, reuseConnectionId]
+  )
+}
+
+export const useOutOfBandByConnectionId = (connectionId: string): OutOfBandRecord | undefined => {
+  const connection = useConnectionById(connectionId)
+  return useOutOfBandById(connection?.outOfBandId ?? '')
+}

package/src/hooks/credential-card-styles.ts

@@ -0,0 +1,144 @@
+import { BrandingOverlay } from '@bifold/oca'
+import { BrandingOverlayType, CredentialOverlay } from '@bifold/oca/build/legacy'
+import { useTheme } from '../contexts/theme'
+import { StyleSheet, useWindowDimensions } from 'react-native'
+import { getSecondaryBackgroundColor } from '../utils/helpers'
+import { credentialTextColor } from '../utils/credential'
+
+const useCredentialCardStyles = (
+  overlay: CredentialOverlay<BrandingOverlay>,
+  brandingOverlayType: BrandingOverlayType,
+  proof?: boolean
+) => {
+  const { ColorPallet, TextTheme, ListItems, CredentialCardShadowTheme } = useTheme()
+  const { width, fontScale } = useWindowDimensions()
+  const padding = width * 0.05
+  const logoHeight = width * 0.12
+  const borderRadius = 10
+
+  const styles = StyleSheet.create({
+    container: {
+      backgroundColor: overlay.brandingOverlay?.primaryBackgroundColor,
+      borderRadius: borderRadius,
+      ...CredentialCardShadowTheme,
+    },
+    cardContainer: {
+      flexDirection: 'row',
+      minHeight: 0.33 * width,
+    },
+    secondaryBodyContainer: {
+      width: logoHeight,
+      borderTopLeftRadius: borderRadius,
+      borderBottomLeftRadius: borderRadius,
+      backgroundColor: getSecondaryBackgroundColor(overlay, proof) ?? overlay.brandingOverlay?.primaryBackgroundColor,
+    },
+    primaryBodyContainer: {
+      flex: 1,
+      padding,
+      ...(brandingOverlayType === BrandingOverlayType.Branding11 && {
+        justifyContent: 'space-between',
+      }),
+      marginLeft:
+        brandingOverlayType === BrandingOverlayType.Branding10
+          ? -1 * logoHeight + padding
+          : -1.3 * logoHeight + padding,
+    },
+    primaryBodyNameContainer: {
+      flexDirection: 'row',
+      ...(brandingOverlayType === BrandingOverlayType.Branding11 && {
+        minHeight: logoHeight,
+        alignItems: 'center',
+      }),
+    },
+    imageAttr: {
+      height: 150,
+      aspectRatio: 1,
+      resizeMode: 'contain',
+      borderRadius: borderRadius,
+    },
+    statusContainer: {
+      backgroundColor: 'rgba(0, 0, 0, 0)',
+      borderTopRightRadius: borderRadius,
+      borderBottomLeftRadius: borderRadius,
+      height: logoHeight,
+      width: logoHeight,
+      justifyContent: 'center',
+      alignItems: 'center',
+    },
+    logoContainer: {
+      width: logoHeight * (fontScale > 1.7 ? 1.2 : 1),
+      height: logoHeight * (fontScale > 1.7 ? 1.2 : 1),
+      backgroundColor: '#ffffff',
+      borderRadius: 8,
+      justifyContent: 'center',
+      alignItems: 'center',
+      top: padding,
+      left: -1 * logoHeight + padding,
+      ...CredentialCardShadowTheme,
+    },
+    headerText: {
+      ...TextTheme.labelSubtitle,
+      ...ListItems.recordAttributeText,
+      fontSize: 15,
+      flexShrink: 1,
+    },
+    valueText: {
+      ...TextTheme.normal,
+      minHeight: ListItems.recordAttributeText.fontSize,
+      paddingVertical: 4,
+    },
+    textContainer: {
+      color:
+        proof && brandingOverlayType === BrandingOverlayType.Branding10
+          ? TextTheme.normal.color
+          : credentialTextColor(ColorPallet, overlay.brandingOverlay?.primaryBackgroundColor),
+      flexShrink: 1,
+      ...(brandingOverlayType === BrandingOverlayType.Branding11 && {
+        fontSize: 16,
+      }),
+      lineHeight: 24,
+    },
+    credentialName: {
+      flex: 1,
+      flexWrap: 'wrap',
+      ...(brandingOverlayType === BrandingOverlayType.Branding11 && {
+        lineHeight: 16,
+        maxWidth: '85%',
+        fontSize: 14,
+        fontWeight: '600',
+      }),
+    },
+    credentialIssuerContainer: {
+      flex: 1,
+      alignSelf: 'flex-end',
+      justifyContent: 'flex-end',
+      maxWidth: 225,
+      paddingTop: 5,
+    },
+    errorText: {
+      ...TextTheme.normal,
+      color: ListItems.proofError.color,
+    },
+    errorIcon: {
+      color: ListItems.proofError.color,
+    },
+    selectedCred: {
+      borderWidth: 5,
+      borderRadius: 15,
+      borderColor: ColorPallet.semantic.focus,
+    },
+    credActionText: {
+      fontSize: 20,
+      fontWeight: TextTheme.bold.fontWeight,
+      color: ColorPallet.brand.link,
+    },
+    cardAttributeContainer: {
+      marginVertical: 16,
+      gap: 4,
+    },
+  })
+
+  return { styles, borderRadius, logoHeight }
+}
+
+export default useCredentialCardStyles

package/src/hooks/credentials.ts

@@ -0,0 +1,11 @@
+import { CredentialExchangeRecord } from '@credo-ts/core'
+import { useCredentials } from '@credo-ts/react-hooks'
+import { useMemo } from 'react'
+
+export const useCredentialsByConnectionId = (connectionId: string): CredentialExchangeRecord[] => {
+  const { records: credentials } = useCredentials()
+  return useMemo(
+    () => credentials.filter((credential: CredentialExchangeRecord) => credential.connectionId === connectionId),
+    [credentials, connectionId]
+  )
+}

package/src/hooks/deep-links.ts

@@ -0,0 +1,51 @@
+import { useEffect, useMemo, useState } from 'react'
+import { Linking } from 'react-native'
+
+import { useActivity } from '../contexts/activity'
+import { DispatchAction } from '../contexts/reducers/store'
+import { useStore } from '../contexts/store'
+
+export const useDeepLinks = () => {
+  const [store, dispatch] = useStore()
+  const { appStateStatus } = useActivity()
+  const [stashedDeepLink, setStashedDeepLink] = useState('')
+  const ready = useMemo(
+    () => store.authentication.didAuthenticate && ['active', 'inactive'].includes(appStateStatus),
+    [store.authentication.didAuthenticate, appStateStatus]
+  )
+
+  // deeplink cold start
+  useEffect(() => {
+    const getUrlAsync = async () => {
+      const initialUrl = await Linking.getInitialURL()
+      if (initialUrl) {
+        setStashedDeepLink(initialUrl)
+      }
+    }
+    getUrlAsync()
+  }, [])
+
+  // deeplink while already open
+  useEffect(() => {
+    Linking.addEventListener('url', async ({ url }) => {
+      if (url) {
+        setStashedDeepLink(url)
+      }
+    })
+
+    return () => {
+      Linking.removeAllListeners('url')
+    }
+  })
+
+  // activate stashed deeplink when ready
+  useEffect(() => {
+    if (stashedDeepLink && ready) {
+      dispatch({
+        type: DispatchAction.ACTIVE_DEEP_LINK,
+        payload: [stashedDeepLink],
+      })
+      setStashedDeepLink('')
+    }
+  }, [ready, stashedDeepLink, dispatch])
+}

package/src/hooks/initialize-agent.ts

@@ -0,0 +1,158 @@
+import { Agent, HttpOutboundTransport, WsOutboundTransport } from '@credo-ts/core'
+import { IndyVdrPoolService } from '@credo-ts/indy-vdr/build/pool'
+import { useAgent } from '@credo-ts/react-hooks'
+import { agentDependencies } from '@credo-ts/react-native'
+import { GetCredentialDefinitionRequest, GetSchemaRequest } from '@hyperledger/indy-vdr-shared'
+import { useCallback } from 'react'
+import { Config } from 'react-native-config'
+import { CachesDirectoryPath } from 'react-native-fs'
+
+import { TOKENS, useServices } from '../container-api'
+import { DispatchAction } from '../contexts/reducers/store'
+import { useStore } from '../contexts/store'
+import { getAgentModules, createLinkSecretIfRequired } from '../utils/agent'
+import { migrateToAskar } from '../utils/migration'
+import { WalletSecret } from '../types/security'
+
+const useInitializeAgent = () => {
+  const { agent, setAgent } = useAgent()
+  const [store, dispatch] = useStore()
+  const [cacheSchemas, cacheCredDefs, logger, indyLedgers] = useServices([
+    TOKENS.CACHE_SCHEMAS,
+    TOKENS.CACHE_CRED_DEFS,
+    TOKENS.UTIL_LOGGER,
+    TOKENS.UTIL_LEDGERS,
+  ])
+
+  const restartExistingAgent = useCallback(
+    async (walletSecret: WalletSecret) => {
+      // if the agent is initialized, it was not a clean shutdown and should be replaced, not restarted
+      if (!agent || agent.isInitialized) {
+        return
+      }
+
+      logger.info('Agent already created, restarting...')
+      try {
+        await agent.wallet.open({
+          id: walletSecret.id,
+          key: walletSecret.key,
+        })
+        await agent.initialize()
+      } catch {
+        // if the existing agents wallet cannot be opened or initialize() fails it was
+        // again not a clean shutdown and the agent should be replaced, not restarted
+        logger.warn('Failed to restart existing agent, skipping agent restart')
+        return
+      }
+
+      logger.info('Successfully restarted existing agent')
+      return agent
+    },
+    [agent, logger]
+  )
+
+  const createNewAgent = useCallback(
+    async (walletSecret: WalletSecret): Promise<Agent | undefined> => {
+      logger.info('No agent initialized, creating a new one')
+
+      const newAgent = new Agent({
+        config: {
+          label: store.preferences.walletName || 'Aries Bifold',
+          walletConfig: {
+            id: walletSecret.id,
+            key: walletSecret.key,
+          },
+          logger,
+          autoUpdateStorageOnStartup: true,
+        },
+        dependencies: agentDependencies,
+        modules: getAgentModules({
+          indyNetworks: indyLedgers,
+          mediatorInvitationUrl: Config.MEDIATOR_URL,
+          txnCache: {
+            capacity: 1000,
+            expiryOffsetMs: 1000 * 60 * 60 * 24 * 7,
+            path: CachesDirectoryPath + '/txn-cache',
+          },
+        }),
+      })
+      const wsTransport = new WsOutboundTransport()
+      const httpTransport = new HttpOutboundTransport()
+
+      newAgent.registerOutboundTransport(wsTransport)
+      newAgent.registerOutboundTransport(httpTransport)
+
+      return newAgent
+    },
+    [store.preferences.walletName, logger, indyLedgers]
+  )
+
+  const migrateIfRequired = useCallback(
+    async (newAgent: Agent, walletSecret: WalletSecret) => {
+      // If we haven't migrated to Aries Askar yet, we need to do this before we initialize the agent.
+      if (!store.migration.didMigrateToAskar) {
+        newAgent.config.logger.debug('Agent not updated to Aries Askar, updating...')
+
+        await migrateToAskar(walletSecret.id, walletSecret.key, newAgent)
+
+        newAgent.config.logger.debug('Successfully finished updating agent to Aries Askar')
+        // Store that we migrated to askar.
+        dispatch({
+          type: DispatchAction.DID_MIGRATE_TO_ASKAR,
+        })
+      }
+    },
+    [store.migration.didMigrateToAskar, dispatch]
+  )
+
+  const warmUpCache = useCallback(
+    async (newAgent: Agent) => {
+      const poolService = newAgent.dependencyManager.resolve(IndyVdrPoolService)
+      cacheCredDefs.forEach(async ({ did, id }) => {
+        const pool = await poolService.getPoolForDid(newAgent.context, did)
+        const credDefRequest = new GetCredentialDefinitionRequest({ credentialDefinitionId: id })
+        await pool.pool.submitRequest(credDefRequest)
+      })
+
+      cacheSchemas.forEach(async ({ did, id }) => {
+        const pool = await poolService.getPoolForDid(newAgent.context, did)
+        const schemaRequest = new GetSchemaRequest({ schemaId: id })
+        await pool.pool.submitRequest(schemaRequest)
+      })
+    },
+    [cacheCredDefs, cacheSchemas]
+  )
+
+  const initializeAgent = useCallback(
+    async (walletSecret: WalletSecret): Promise<Agent | undefined> => {
+      const existingAgent = await restartExistingAgent(walletSecret)
+      if (existingAgent) {
+        setAgent(existingAgent)
+        return existingAgent
+      }
+
+      const newAgent = await createNewAgent(walletSecret)
+      if (!newAgent) {
+        logger.error('Failed to create a new agent')
+        return
+      }
+
+      await migrateIfRequired(newAgent, walletSecret)
+
+      await newAgent.initialize()
+
+      await createLinkSecretIfRequired(newAgent)
+
+      await warmUpCache(newAgent)
+
+      setAgent(newAgent)
+
+      return newAgent
+    },
+    [logger, restartExistingAgent, setAgent, createNewAgent, migrateIfRequired, warmUpCache]
+  )
+
+  return { initializeAgent }
+}
+
+export default useInitializeAgent