@bifold/core 2.4.5 → 2.5.0

package/src/hooks/chat-messages.tsx

@@ -1,263 +0,0 @@
-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, ColorPalette } = 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: ColorPalette.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: { credentialId: record.id },
-                })
-              },
-              [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)
-    )
-  }, [ColorPalette, basicMessages, theme, credentials, t, navigation, proofs, theirLabel, connection])
-
-  return messages
-}

package/src/hooks/connections.ts

@@ -1,37 +0,0 @@
-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

@@ -1,144 +0,0 @@
-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 { ColorPalette, 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(ColorPalette, 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: ColorPalette.semantic.focus,
-    },
-    credActionText: {
-      fontSize: 20,
-      fontWeight: TextTheme.bold.fontWeight,
-      color: ColorPalette.brand.link,
-    },
-    cardAttributeContainer: {
-      marginVertical: 16,
-      gap: 4,
-    },
-  })
-
-  return { styles, borderRadius, logoHeight }
-}
-
-export default useCredentialCardStyles

package/src/hooks/credentials.ts

@@ -1,11 +0,0 @@
-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

@@ -1,49 +0,0 @@
-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(() => {
-    const listener = Linking.addListener('url', ({ url }) => {
-      if (url) {
-        setStashedDeepLink(url)
-      }
-    })
-
-    return listener.remove
-  })
-
-  // activate stashed deeplink when ready
-  useEffect(() => {
-    if (stashedDeepLink && ready) {
-      dispatch({
-        type: DispatchAction.ACTIVE_DEEP_LINK,
-        payload: [stashedDeepLink],
-      })
-      setStashedDeepLink('')
-    }
-  }, [ready, stashedDeepLink, dispatch])
-}

package/src/hooks/developer-mode.ts

@@ -1,25 +0,0 @@
-import { useCallback, useRef } from 'react'
-import { DispatchAction } from '../contexts/reducers/store'
-import { useStore } from '../contexts/store'
-
-const TOUCH_COUNT_TO_ENABLE_DEVELOPER_MODE = 10
-
-export const useDeveloperMode = (onDevModeTriggered?: () => void) => {
-  const developerOptionCount = useRef(0)
-  const [, dispatch] = useStore()
-
-  const incrementDeveloperMenuCounter = useCallback(() => {
-    if (developerOptionCount.current >= TOUCH_COUNT_TO_ENABLE_DEVELOPER_MODE) {
-      developerOptionCount.current = 0
-      dispatch({
-        type: DispatchAction.ENABLE_DEVELOPER_MODE,
-        payload: [true],
-      })
-      onDevModeTriggered?.()
-    } else {
-      developerOptionCount.current = developerOptionCount.current + 1
-    }
-  }, [dispatch, onDevModeTriggered])
-
-  return { incrementDeveloperMenuCounter }
-}

package/src/hooks/lockout.ts

@@ -1,77 +0,0 @@
-import { useCallback } from 'react'
-import { useNavigation, CommonActions } from '@react-navigation/native'
-import { useStore } from '../contexts/store'
-import { DispatchAction } from '../contexts/reducers/store'
-import { Screens } from '../types/navigators'
-import { TOKENS, useServices } from '../container-api'
-import { attemptLockoutConfig } from '../constants'
-
-export const useAttemptLockout = () => {
-  const [store, dispatch] = useStore()
-  const navigation = useNavigation()
-  // set the attempt lockout time
-  return useCallback(
-    async (penalty: number) => {
-      dispatch({
-        type: DispatchAction.ATTEMPT_UPDATED,
-        payload: [
-          {
-            loginAttempts: store.loginAttempt.loginAttempts + 1,
-            lockoutDate: Date.now() + penalty,
-            servedPenalty: false,
-          },
-        ],
-      })
-      navigation.dispatch(
-        CommonActions.reset({
-          index: 0,
-          routes: [{ name: Screens.AttemptLockout }],
-        })
-      )
-    },
-    [store, dispatch, navigation]
-  )
-}
-
-export const useGetLockoutPenalty = () => {
-  const [{ attemptLockoutConfig: { baseRules, thresholdRules } = attemptLockoutConfig }] = useServices([TOKENS.CONFIG])
-  return useCallback(
-    (attempts: number) => {
-      let penalty = baseRules[attempts]
-      if (!penalty && attempts >= thresholdRules.threshold && !(attempts % thresholdRules.increment)) {
-        penalty = thresholdRules.thresholdPenaltyDuration
-      }
-      return penalty
-    },
-    [baseRules, thresholdRules]
-  )
-}
-
-// This method is used to notify the app that the user is able to receive
-// another lockout penalty
-export const useUnMarkServedPenalty = () => {
-  const [store, dispatch] = useStore()
-  return useCallback(() => {
-    dispatch({
-      type: DispatchAction.ATTEMPT_UPDATED,
-      payload: [
-        {
-          loginAttempts: store.loginAttempt.loginAttempts,
-          lockoutDate: undefined,
-          servedPenalty: undefined,
-        },
-      ],
-    })
-  }, [dispatch, store.loginAttempt.loginAttempts])
-}
-
-export const useLockout = () => {
-  const getLockoutPenalty = useGetLockoutPenalty()
-  const attemptLockout = useAttemptLockout()
-  const unMarkServedPenalty = useUnMarkServedPenalty()
-  return {
-    getLockoutPenalty,
-    attemptLockout,
-    unMarkServedPenalty,
-  }
-}