@bifold/core 2.4.5 → 2.5.0

package/src/screens/ProofRequestAccept.tsx

@@ -1,133 +0,0 @@
-import { ProofState } from '@credo-ts/core'
-import { useProofById } from '@credo-ts/react-hooks'
-import { useNavigation } from '@react-navigation/native'
-import React, { useEffect, useState } from 'react'
-import { useTranslation } from 'react-i18next'
-import { ScrollView, StyleSheet, View } from 'react-native'
-import { SafeAreaView } from 'react-native-safe-area-context'
-
-import Button, { ButtonType } from '../components/buttons/Button'
-import SafeAreaModal from '../components/modals/SafeAreaModal'
-import { useAnimatedComponents } from '../contexts/animated-components'
-import { useTheme } from '../contexts/theme'
-import { Screens, TabStacks } from '../types/navigators'
-import { testIdWithKey } from '../utils/testable'
-import { ThemedText } from '../components/texts/ThemedText'
-
-export interface ProofRequestAcceptProps {
-  visible: boolean
-  proofId: string
-  confirmationOnly?: boolean
-}
-
-const ProofRequestAccept: React.FC<ProofRequestAcceptProps> = ({ visible, proofId, confirmationOnly }) => {
-  const { t } = useTranslation()
-  const [proofDeliveryStatus, setProofDeliveryStatus] = useState<ProofState>(ProofState.RequestReceived)
-  const proof = useProofById(proofId)
-  const navigation = useNavigation()
-  const { ColorPalette, TextTheme } = useTheme()
-  const { SendingProof, SentProof } = useAnimatedComponents()
-
-  const styles = StyleSheet.create({
-    container: {
-      height: '100%',
-      backgroundColor: ColorPalette.brand.modalPrimaryBackground,
-      padding: 20,
-    },
-    image: {
-      marginTop: 20,
-    },
-    messageContainer: {
-      alignItems: 'center',
-    },
-    messageText: {
-      fontWeight: TextTheme.normal.fontWeight,
-      textAlign: 'center',
-      marginTop: 30,
-    },
-    controlsContainer: {
-      marginTop: 'auto',
-      margin: 20,
-    },
-    delayMessageText: {
-      textAlign: 'center',
-      marginTop: 20,
-    },
-  })
-
-  if (!proof && !confirmationOnly) {
-    throw new Error('Unable to fetch proof from Credo')
-  }
-
-  const onBackToHomeTouched = () => {
-    navigation.getParent()?.navigate(TabStacks.HomeStack, { screen: Screens.Home })
-  }
-
-  useEffect(() => {
-    if (confirmationOnly) {
-      setProofDeliveryStatus(ProofState.PresentationSent)
-      return
-    }
-
-    if (!proof) return
-
-    if (proof.state === proofDeliveryStatus) {
-      return
-    }
-
-    if (proof.state === ProofState.Done || proof.state === ProofState.PresentationSent) {
-      setProofDeliveryStatus(proof.state)
-    }
-  }, [proof, proofDeliveryStatus, confirmationOnly])
-
-  return (
-    <SafeAreaModal visible={visible} transparent={true} animationType={'none'}>
-      <SafeAreaView style={{ backgroundColor: ColorPalette.brand.modalPrimaryBackground }}>
-        <ScrollView style={styles.container}>
-          <View style={styles.messageContainer}>
-            {proofDeliveryStatus === ProofState.RequestReceived && (
-              <ThemedText
-                variant="modalHeadingThree"
-                style={styles.messageText}
-                testID={testIdWithKey('SendingProofRequest')}
-              >
-                {t('ProofRequest.SendingTheInformationSecurely')}
-              </ThemedText>
-            )}
-
-            {(proofDeliveryStatus === ProofState.PresentationSent || proofDeliveryStatus === ProofState.Done) && (
-              <ThemedText
-                variant="modalHeadingThree"
-                style={styles.messageText}
-                testID={testIdWithKey('SentProofRequest')}
-              >
-                {t('ProofRequest.InformationSentSuccessfully')}
-              </ThemedText>
-            )}
-          </View>
-
-          <View style={[styles.image, { minHeight: 250, alignItems: 'center', justifyContent: 'flex-end' }]}>
-            {proofDeliveryStatus === ProofState.RequestReceived && <SendingProof />}
-            {(proofDeliveryStatus === ProofState.PresentationSent || proofDeliveryStatus === ProofState.Done) && (
-              <SentProof />
-            )}
-          </View>
-        </ScrollView>
-
-        <View style={styles.controlsContainer}>
-          <View>
-            <Button
-              title={t('Loading.BackToHome')}
-              accessibilityLabel={t('Loading.BackToHome')}
-              testID={testIdWithKey('BackToHome')}
-              onPress={onBackToHomeTouched}
-              buttonType={ButtonType.ModalSecondary}
-            />
-          </View>
-        </View>
-      </SafeAreaView>
-    </SafeAreaModal>
-  )
-}
-
-export default ProofRequestAccept

package/src/screens/ProofRequestDetails.tsx

@@ -1,270 +0,0 @@
-import { useAgent } from '@credo-ts/react-hooks'
-import {
-  AnonCredsProofRequestTemplatePayloadData,
-  ProofRequestType,
-  linkProofWithTemplate,
-  sendProofRequest,
-} from '@bifold/verifier'
-import { MetaOverlay } from '@bifold/oca'
-import { Field } from '@bifold/oca/build/legacy'
-import { OverlayType } from '@bifold/oca/build/types/TypeEnums'
-import { StackScreenProps } from '@react-navigation/stack'
-import React, { memo, useCallback, useEffect, useState } from 'react'
-import { useTranslation } from 'react-i18next'
-import { ScrollView, StyleSheet, View } from 'react-native'
-import { SafeAreaView } from 'react-native-safe-area-context'
-
-import Button, { ButtonType } from '../components/buttons/Button'
-import VerifierCredentialCard from '../components/misc/VerifierCredentialCard'
-import AlertModal from '../components/modals/AlertModal'
-import { TOKENS, useServices } from '../container-api'
-import { useStore } from '../contexts/store'
-import { useTheme } from '../contexts/theme'
-import { useTemplate } from '../hooks/proof-request-templates'
-import { ProofRequestsStackParams, Screens } from '../types/navigators'
-import { buildFieldsFromAnonCredsProofRequestTemplate } from '../utils/oca'
-import { testIdWithKey } from '../utils/testable'
-import { ThemedText } from '../components/texts/ThemedText'
-
-const onlyNumberRegex = /^\d+$/
-
-type ProofRequestDetailsProps = StackScreenProps<ProofRequestsStackParams, Screens.ProofRequestDetails>
-
-interface ProofRequestAttributesCardProps {
-  data: AnonCredsProofRequestTemplatePayloadData
-  onChangeValue: (schema: string, label: string, name: string, value: string) => void
-}
-
-const ProofRequestAttributesCard: React.FC<ProofRequestAttributesCardProps> = ({ data, onChangeValue }) => {
-  const { ColorPalette } = useTheme()
-  const { i18n } = useTranslation()
-  const [bundleResolver] = useServices([TOKENS.UTIL_OCA_RESOLVER])
-  const [attributes, setAttributes] = useState<Field[] | undefined>(undefined)
-  const [credDefId, setCredDefId] = useState<string | undefined>(undefined)
-
-  useEffect(() => {
-    const attributes = buildFieldsFromAnonCredsProofRequestTemplate(data)
-    bundleResolver
-      .presentationFields({
-        identifiers: { schemaId: data.schema },
-        attributes,
-        language: i18n.language,
-      })
-      .then((fields) => {
-        setAttributes(fields)
-      })
-  }, [data, bundleResolver, i18n.language])
-
-  useEffect(() => {
-    const credDefId = (data.requestedAttributes ?? data.requestedPredicates)
-      ?.flatMap((reqItem) => reqItem.restrictions?.map((restrictionItem) => restrictionItem.cred_def_id))
-      .find((item) => item !== undefined)
-    setCredDefId(credDefId)
-  }, [data.requestedAttributes, data.requestedPredicates])
-
-  return (
-    <View style={{ marginBottom: 15 }}>
-      <VerifierCredentialCard
-        onChangeValue={onChangeValue}
-        displayItems={attributes}
-        style={{ backgroundColor: ColorPalette.brand.secondaryBackground }}
-        credDefId={credDefId}
-        schemaId={data.schema}
-        preview
-        elevated
-        brandingOverlayType={bundleResolver.getBrandingOverlayType()}
-      />
-    </View>
-  )
-}
-
-interface ProofRequestCardsProps {
-  attributes?: AnonCredsProofRequestTemplatePayloadData[]
-  onChangeValue: (schema: string, label: string, name: string, value: string) => void
-}
-
-const ProofRequestCardsComponent: React.FC<ProofRequestCardsProps> = ({ attributes = [], onChangeValue }) => {
-  return attributes.map((item) => (
-    <ProofRequestAttributesCard key={item.schema} data={item} onChangeValue={onChangeValue} />
-  ))
-}
-
-// memo'd to prevent rerendering when onChangeValue is called from child and updates parent
-const ProofRequestCards = memo(ProofRequestCardsComponent)
-
-const ProofRequestDetails: React.FC<ProofRequestDetailsProps> = ({ route, navigation }) => {
-  const { ColorPalette, TextTheme } = useTheme()
-  const [store] = useStore()
-  const { t } = useTranslation()
-  const { i18n } = useTranslation()
-  const [bundleResolver] = useServices([TOKENS.UTIL_OCA_RESOLVER])
-
-  const { agent } = useAgent()
-  if (!agent) {
-    throw new Error('Unable to fetch agent from Credo')
-  }
-
-  if (!route?.params) {
-    throw new Error('ProofRequestDetails route params were not set properly')
-  }
-
-  const { templateId, connectionId } = route.params
-
-  const style = StyleSheet.create({
-    container: {
-      flexGrow: 1,
-      backgroundColor: ColorPalette.brand.primaryBackground,
-      padding: 16,
-    },
-    header: {
-      marginTop: 12,
-      marginBottom: 36,
-    },
-    description: {
-      marginTop: 10,
-      color: TextTheme.title.color,
-      fontSize: 20,
-    },
-    footerButton: {
-      marginTop: 'auto',
-      marginBottom: 10,
-    },
-  })
-
-  const [meta, setMeta] = useState<MetaOverlay | undefined>(undefined)
-  const [attributes, setAttributes] = useState<Array<AnonCredsProofRequestTemplatePayloadData> | undefined>(undefined)
-  const [customPredicateValues, setCustomPredicateValues] = useState<Record<string, Record<string, number>>>({})
-  const [invalidPredicate, setInvalidPredicate] = useState<
-    { visible: boolean; predicate: string | undefined } | undefined
-  >(undefined)
-
-  const template = useTemplate(templateId)
-
-  useEffect(() => {
-    if (!template) {
-      return
-    }
-    const attributes = template.payload.type === ProofRequestType.AnonCreds ? template.payload.data : []
-
-    bundleResolver.resolve({ identifiers: { templateId }, language: i18n.language }).then((bundle) => {
-      const metaOverlay =
-        bundle?.metaOverlay ||
-        new MetaOverlay({
-          capture_base: '',
-          type: OverlayType.Meta10,
-          name: template.name,
-          description: template.description,
-          language: i18n.language,
-          credential_help_text: '',
-          credential_support_url: '',
-          issuer: '',
-          issuer_description: '',
-          issuer_url: '',
-        })
-      setMeta(metaOverlay)
-      setAttributes(attributes)
-    })
-  }, [template, bundleResolver, templateId, i18n.language])
-
-  const onChangeValue = useCallback(
-    (schema: string, label: string, name: string, value: string) => {
-      if (!onlyNumberRegex.test(value)) {
-        setInvalidPredicate({ visible: true, predicate: label })
-        return
-      }
-      setInvalidPredicate(undefined)
-      setCustomPredicateValues((prev) => ({
-        ...prev,
-        [schema]: {
-          ...(prev[schema] || {}),
-          [name]: parseInt(value),
-        },
-      }))
-    },
-    [setCustomPredicateValues, setInvalidPredicate]
-  )
-
-  const activateProofRequest = useCallback(async () => {
-    if (!template) {
-      return
-    }
-
-    if (invalidPredicate) {
-      setInvalidPredicate({ visible: true, predicate: invalidPredicate.predicate })
-      return
-    }
-
-    if (connectionId) {
-      // Send to specific contact and redirect to the chat with him
-      sendProofRequest(agent, template, connectionId, customPredicateValues).then((result) => {
-        if (result?.proofRecord) {
-          linkProofWithTemplate(agent, result.proofRecord, templateId)
-        }
-      })
-
-      navigation.getParent()?.navigate(Screens.Chat, { connectionId })
-    } else {
-      // Else redirect to the screen with connectionless request
-      navigation.navigate(Screens.ProofRequesting, { templateId, predicateValues: customPredicateValues })
-    }
-  }, [template, invalidPredicate, connectionId, agent, customPredicateValues, templateId, navigation])
-
-  const showTemplateUsageHistory = useCallback(async () => {
-    navigation.navigate(Screens.ProofRequestUsageHistory, { templateId })
-  }, [navigation, templateId])
-
-  const Header: React.FC = () => {
-    return (
-      <View style={style.header}>
-        <ThemedText variant="headingThree">{meta?.name}</ThemedText>
-        <ThemedText style={style.description}>{meta?.description}</ThemedText>
-      </View>
-    )
-  }
-
-  const Footer: React.FC = () => {
-    return (
-      <View>
-        <View style={style.footerButton}>
-          <Button
-            title={connectionId ? t('Verifier.SendThisProofRequest') : t('Verifier.UseProofRequest')}
-            accessibilityLabel={connectionId ? t('Verifier.SendThisProofRequest') : t('Verifier.UseProofRequest')}
-            testID={connectionId ? testIdWithKey('SendThisProofRequest') : testIdWithKey('UseProofRequest')}
-            buttonType={ButtonType.Primary}
-            onPress={() => activateProofRequest()}
-          />
-        </View>
-        {store.preferences.useDataRetention && (
-          <View style={style.footerButton}>
-            <Button
-              title={t('Verifier.ShowTemplateUsageHistory')}
-              accessibilityLabel={t('Verifier.ShowTemplateUsageHistory')}
-              testID={testIdWithKey('ShowTemplateUsageHistory')}
-              buttonType={ButtonType.Secondary}
-              onPress={() => showTemplateUsageHistory()}
-            />
-          </View>
-        )}
-      </View>
-    )
-  }
-
-  return (
-    <SafeAreaView style={style.container} edges={['left', 'right']}>
-      {invalidPredicate?.visible && (
-        <AlertModal
-          title={t('Verifier.InvalidPredicateValueTitle', { predicate: invalidPredicate.predicate })}
-          message={t('Verifier.InvalidPredicateValueDetails')}
-          submit={() => setInvalidPredicate({ visible: false, predicate: invalidPredicate.predicate })}
-        />
-      )}
-      <ScrollView contentContainerStyle={{ flexGrow: 1 }}>
-        <Header />
-        <ProofRequestCards attributes={attributes} onChangeValue={onChangeValue} />
-        <Footer />
-      </ScrollView>
-    </SafeAreaView>
-  )
-}
-
-export default ProofRequestDetails

package/src/screens/ProofRequestUsageHistory.tsx

@@ -1,152 +0,0 @@
-import { ProofExchangeRecord, ProofState } from '@credo-ts/core'
-import { useConnectionById } from '@credo-ts/react-hooks'
-import { isPresentationReceived, useProofsByTemplateId } from '@bifold/verifier'
-import { StackNavigationProp, StackScreenProps } from '@react-navigation/stack'
-import React, { useCallback, useMemo } from 'react'
-import { useTranslation } from 'react-i18next'
-import { FlatList, StyleSheet, TouchableOpacity, View } from 'react-native'
-import { SafeAreaView } from 'react-native-safe-area-context'
-import Icon from 'react-native-vector-icons/MaterialIcons'
-
-import EmptyList from '../components/misc/EmptyList'
-import { useStore } from '../contexts/store'
-import { useTheme } from '../contexts/theme'
-import { ProofRequestsStackParams, Screens } from '../types/navigators'
-import { formatTime, getConnectionName } from '../utils/helpers'
-import { testIdWithKey } from '../utils/testable'
-import { ThemedText } from '../components/texts/ThemedText'
-
-type ProofRequestUsageHistoryProps = StackScreenProps<ProofRequestsStackParams, Screens.ProofRequestUsageHistory>
-
-interface ProofRequestUsageHistoryRecordProps {
-  navigation: StackNavigationProp<ProofRequestsStackParams>
-  record: ProofExchangeRecord
-}
-
-const getPresentationStateLabel = (record: ProofExchangeRecord) => {
-  switch (record.state) {
-    case ProofState.RequestSent:
-      return 'Verifier.RequestSent'
-    case ProofState.PresentationReceived:
-      return 'Verifier.PresentationReceived'
-    case ProofState.Declined:
-    case ProofState.Abandoned:
-      return 'Verifier.ProofRequestRejected'
-    case ProofState.Done:
-      return record.isVerified ? 'Verifier.PresentationReceived' : 'Verifier.PresentationFailed'
-    default:
-      return ''
-  }
-}
-
-const ProofRequestUsageHistoryRecord: React.FC<ProofRequestUsageHistoryRecordProps> = ({ record, navigation }) => {
-  const { t } = useTranslation()
-  const { ListItems, ColorPalette } = useTheme()
-  const [store] = useStore()
-  const connection = useConnectionById(record.connectionId ?? '')
-  const theirLabel = useMemo(
-    () => getConnectionName(connection, store.preferences.alternateContactNames),
-    [connection, store.preferences.alternateContactNames]
-  )
-
-  const style = StyleSheet.create({
-    card: {
-      ...ListItems.requestTemplateBackground,
-      flexGrow: 1,
-      flexDirection: 'row',
-      borderRadius: 8,
-      paddingHorizontal: 10,
-      marginBottom: 10,
-    },
-    leftContainer: {
-      flexDirection: 'column',
-      marginVertical: 10,
-    },
-    cardRow: {
-      flexDirection: 'row',
-      marginVertical: 2,
-    },
-    valueLabel: {
-      color: ColorPalette.grayscale.black,
-    },
-    valueText: {
-      ...ListItems.requestTemplateTitle,
-      marginLeft: 4,
-    },
-    rightContainer: {
-      flexGrow: 1,
-      flexDirection: 'column',
-      alignItems: 'flex-end',
-      justifyContent: 'flex-end',
-    },
-    icon: {
-      ...ListItems.requestTemplateIcon,
-    },
-    date: {
-      ...ListItems.requestTemplateDate,
-    },
-  })
-
-  const presentationReceived = useMemo(() => isPresentationReceived(record), [record])
-
-  const onDetails = useCallback(() => {
-    navigation.navigate(Screens.ProofDetails, { recordId: record.id, isHistory: true })
-  }, [navigation, record])
-
-  return (
-    <TouchableOpacity
-      style={style.card}
-      onPress={onDetails}
-      disabled={!presentationReceived}
-      accessibilityLabel={t('Screens.ProofDetails')}
-      accessibilityRole="button"
-      testID={testIdWithKey('ProofDetails')}
-    >
-      <View style={style.leftContainer}>
-        <View style={style.cardRow}>
-          <ThemedText style={style.valueLabel}>{t('Verifier.PresentationFrom')}:</ThemedText>
-          <ThemedText style={style.valueText}>{theirLabel || t('Verifier.ConnectionlessPresentation')}</ThemedText>
-        </View>
-        <View style={style.cardRow}>
-          <ThemedText style={style.valueLabel}>{t('Verifier.PresentationState')}:</ThemedText>
-          <ThemedText style={style.valueText}>{t(getPresentationStateLabel(record) as any)}</ThemedText>
-        </View>
-      </View>
-      <View style={style.rightContainer}>
-        {presentationReceived && <Icon style={style.icon} name={'chevron-right'} />}
-        <ThemedText style={style.date}>{formatTime(record.createdAt, { shortMonth: true })}</ThemedText>
-      </View>
-    </TouchableOpacity>
-  )
-}
-
-const ProofRequestUsageHistory: React.FC<ProofRequestUsageHistoryProps> = ({ route, navigation }) => {
-  if (!route?.params) {
-    throw new Error('ProofRequestUsageHistory route params were not set properly')
-  }
-
-  const { templateId } = route.params
-
-  const style = StyleSheet.create({
-    container: {
-      flexGrow: 1,
-      margin: 20,
-      elevation: 5,
-    },
-  })
-
-  const proofs = useProofsByTemplateId(templateId)
-
-  return (
-    <SafeAreaView style={style.container} edges={['left', 'right']}>
-      <FlatList
-        data={proofs}
-        keyExtractor={(proof) => proof.id}
-        renderItem={({ item }) => <ProofRequestUsageHistoryRecord record={item} navigation={navigation} />}
-        ListEmptyComponent={() => <EmptyList />}
-      />
-    </SafeAreaView>
-  )
-}
-
-export default ProofRequestUsageHistory