@bifold/core 2.4.5 → 2.5.0

package/src/modules/openid/screens/OpenIDCredentialDetails.tsx

@@ -1,214 +0,0 @@
-import React, { useEffect, useState } from 'react'
-import { StackScreenProps } from '@react-navigation/stack'
-import { RootStackParams, Screens } from '../../../types/navigators'
-import { getCredentialForDisplay } from '../display'
-import CommonRemoveModal from '../../../components/modals/CommonRemoveModal'
-import { ModalUsage } from '../../../types/remove'
-import { DeviceEventEmitter, StyleSheet, Text, View } from 'react-native'
-import { useTranslation } from 'react-i18next'
-import { testIdWithKey } from '../../../utils/testable'
-import { useTheme } from '../../../contexts/theme'
-import { BifoldError } from '../../../types/error'
-import { EventTypes } from '../../../constants'
-import { useAgent } from '@credo-ts/react-hooks'
-import RecordRemove from '../../../components/record/RecordRemove'
-import { useOpenIDCredentials } from '../context/OpenIDCredentialRecordProvider'
-import { CredentialOverlay } from '@bifold/oca/build/legacy'
-import { OpenIDCredentialType, W3cCredentialDisplay } from '../types'
-import { TOKENS, useServices } from '../../../container-api'
-import { BrandingOverlay } from '@bifold/oca'
-import Record from '../../../components/record/Record'
-import { SdJwtVcRecord, W3cCredentialRecord } from '@credo-ts/core'
-import { buildOverlayFromW3cCredential } from '../../../utils/oca'
-import CredentialDetailSecondaryHeader from '../../../components/views/CredentialDetailSecondaryHeader'
-import CredentialCardLogo from '../../../components/views/CredentialCardLogo'
-import CredentialDetailPrimaryHeader from '../../../components/views/CredentialDetailPrimaryHeader'
-import ScreenLayout from '../../../layout/ScreenLayout'
-import OpenIDCredentialCard from '../components/OpenIDCredentialCard'
-
-export enum OpenIDCredScreenMode {
-  offer,
-  details,
-}
-
-type OpenIDCredentialDetailsProps = StackScreenProps<RootStackParams, Screens.OpenIDCredentialDetails>
-
-const paddingHorizontal = 24
-const paddingVertical = 16
-
-const OpenIDCredentialDetails: React.FC<OpenIDCredentialDetailsProps> = ({ navigation, route }) => {
-  const { credentialId, type } = route.params
-
-  const [credential, setCredential] = useState<W3cCredentialRecord | SdJwtVcRecord | undefined>(undefined)
-  const [credentialDisplay, setCredentialDisplay] = useState<W3cCredentialDisplay>()
-  const { t, i18n } = useTranslation()
-  const { ColorPalette, TextTheme } = useTheme()
-  const { agent } = useAgent()
-  const { removeCredential, getW3CCredentialById, getSdJwtCredentialById } = useOpenIDCredentials()
-  const [bundleResolver] = useServices([TOKENS.UTIL_OCA_RESOLVER])
-
-  const [isRemoveModalDisplayed, setIsRemoveModalDisplayed] = useState(false)
-  const [credentialRemoved, setCredentialRemoved] = useState(false)
-
-  const [overlay, setOverlay] = useState<CredentialOverlay<BrandingOverlay>>({
-    bundle: undefined,
-    presentationFields: [],
-    metaOverlay: undefined,
-    brandingOverlay: undefined,
-  })
-
-  const styles = StyleSheet.create({
-    container: {
-      backgroundColor: overlay.brandingOverlay?.primaryBackgroundColor,
-      display: 'flex',
-    },
-    cardContainer: {
-      paddingHorizontal: 10,
-      paddingVertical: 30,
-    },
-  })
-
-  useEffect(() => {
-    if (!agent) return
-
-    const fetchCredential = async () => {
-      if (credentialRemoved) return
-      try {
-        let record: SdJwtVcRecord | W3cCredentialRecord | undefined
-
-        if (type === OpenIDCredentialType.SdJwtVc) {
-          record = await getSdJwtCredentialById(credentialId)
-        } else {
-          record = await getW3CCredentialById(credentialId)
-        }
-
-        setCredential(record)
-      } catch (error) {
-        // credential not found for id, display an error
-        DeviceEventEmitter.emit(
-          EventTypes.ERROR_ADDED,
-          new BifoldError(t('Error.Title1033'), t('Error.Message1033'), t('CredentialDetails.CredentialNotFound'), 1035)
-        )
-      }
-    }
-    fetchCredential()
-  }, [credentialId, type, getSdJwtCredentialById, getW3CCredentialById, agent, t, credentialRemoved])
-
-  useEffect(() => {
-    if (!credential) return
-
-    try {
-      const credDisplay = getCredentialForDisplay(credential)
-      setCredentialDisplay(credDisplay)
-    } catch (error) {
-      DeviceEventEmitter.emit(
-        EventTypes.ERROR_ADDED,
-        new BifoldError(t('Error.Title1033'), t('Error.Message1033'), t('CredentialDetails.CredentialNotFound'), 1034)
-      )
-    }
-  }, [credential, t])
-
-  useEffect(() => {
-    if (!credentialDisplay || !bundleResolver || !i18n || !credentialDisplay.display) {
-      return
-    }
-
-    const resolveOverlay = async () => {
-      const resolvedOverlay = await buildOverlayFromW3cCredential({
-        credentialDisplay,
-        language: i18n.language,
-        resolver: bundleResolver,
-      })
-
-      setOverlay(resolvedOverlay)
-    }
-
-    resolveOverlay()
-  }, [credentialDisplay, bundleResolver, i18n])
-
-  const toggleDeclineModalVisible = () => {
-    if (credentialRemoved) {
-      return
-    }
-    setIsRemoveModalDisplayed(!isRemoveModalDisplayed)
-  }
-
-  const handleDeclineTouched = async () => {
-    setCredentialRemoved(true)
-    setIsRemoveModalDisplayed(false)
-    await new Promise((resolve) => setTimeout(resolve, 500))
-    handleRemove()
-  }
-
-  const handleRemove = async () => {
-    if (!credential) return
-    try {
-      await removeCredential(credential, type)
-      navigation.pop()
-    } catch (err) {
-      const error = new BifoldError(t('Error.Title1025'), t('Error.Message1025'), (err as Error)?.message ?? err, 1025)
-      DeviceEventEmitter.emit(EventTypes.ERROR_ADDED, error)
-    }
-  }
-
-  //To be used only in specific cases where consistency with anoncreds needed
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  const legacyHeader = () => {
-    if (!credentialDisplay) return null
-
-    return (
-      <View style={styles.container}>
-        <CredentialDetailSecondaryHeader overlay={overlay} />
-        <CredentialCardLogo overlay={overlay} />
-        <CredentialDetailPrimaryHeader overlay={overlay} />
-      </View>
-    )
-  }
-
-  const renderOpenIdCard = () => {
-    if (!credentialDisplay) return null
-    return <OpenIDCredentialCard credentialDisplay={credentialDisplay} credentialRecord={credential} />
-  }
-
-  const header = () => {
-    return <View style={styles.cardContainer}>{renderOpenIdCard()}</View>
-  }
-
-  const footer = () => {
-    if (!credentialDisplay) return null
-    return (
-      <View style={{ marginBottom: 50 }}>
-        <View
-          style={{
-            backgroundColor: ColorPalette.brand.secondaryBackground,
-            marginTop: paddingVertical,
-            paddingHorizontal,
-            paddingVertical,
-          }}
-        >
-          <Text testID={testIdWithKey('IssuerName')}>
-            <Text style={[TextTheme.title]}>{t('CredentialDetails.IssuedBy') + ' '}</Text>
-            <Text style={[TextTheme.normal]}>
-              {credentialDisplay.display.issuer.name || t('ContactDetails.AContact')}
-            </Text>
-          </Text>
-        </View>
-        <RecordRemove onRemove={toggleDeclineModalVisible} />
-      </View>
-    )
-  }
-
-  return (
-    <ScreenLayout screen={Screens.OpenIDCredentialDetails}>
-      <Record fields={overlay.presentationFields || []} hideFieldValues header={header} footer={footer} />
-      <CommonRemoveModal
-        usage={ModalUsage.CredentialRemove}
-        visible={isRemoveModalDisplayed}
-        onSubmit={handleDeclineTouched}
-        onCancel={toggleDeclineModalVisible}
-      />
-    </ScreenLayout>
-  )
-}
-
-export default OpenIDCredentialDetails

package/src/modules/openid/screens/OpenIDCredentialOffer.tsx

@@ -1,192 +0,0 @@
-import React, { useEffect } from 'react'
-import { StackScreenProps } from '@react-navigation/stack'
-import { DeliveryStackParams, Screens, TabStacks } from '../../../types/navigators'
-import { getCredentialForDisplay } from '../display'
-import CommonRemoveModal from '../../../components/modals/CommonRemoveModal'
-import { ModalUsage } from '../../../types/remove'
-import { useState } from 'react'
-import { DeviceEventEmitter, StyleSheet, Text, View } from 'react-native'
-import { useTranslation } from 'react-i18next'
-import Button, { ButtonType } from '../../../components/buttons/Button'
-import { testIdWithKey } from '../../../utils/testable'
-import { useTheme } from '../../../contexts/theme'
-import { BifoldError } from '../../../types/error'
-import { EventTypes } from '../../../constants'
-import { useAgent } from '@credo-ts/react-hooks'
-import CredentialOfferAccept from '../../../screens/CredentialOfferAccept'
-import { useOpenIDCredentials } from '../context/OpenIDCredentialRecordProvider'
-import { CredentialOverlay } from '@bifold/oca/build/legacy'
-import { BrandingOverlay } from '@bifold/oca'
-import Record from '../../../components/record/Record'
-import OpenIDCredentialCard from '../components/OpenIDCredentialCard'
-import { W3cCredentialRecord } from '@credo-ts/core'
-import ScreenLayout from '../../../layout/ScreenLayout'
-
-type OpenIDCredentialDetailsProps = StackScreenProps<DeliveryStackParams, Screens.OpenIDCredentialOffer>
-
-const OpenIDCredentialOffer: React.FC<OpenIDCredentialDetailsProps> = ({ navigation, route }) => {
-  // FIXME: change params to accept credential id to avoid 'non-serializable' warnings
-  const { credential } = route.params
-  const credentialDisplay = getCredentialForDisplay(credential)
-  const { display } = credentialDisplay
-
-  // console.log('$$ ====> Credential Display', JSON.stringify(credentialDisplay))
-  const { t } = useTranslation()
-  const { ColorPalette, TextTheme } = useTheme()
-  const { agent } = useAgent()
-  const { storeCredential, resolveBundleForCredential } = useOpenIDCredentials()
-
-  const [isRemoveModalDisplayed, setIsRemoveModalDisplayed] = useState(false)
-  const [buttonsVisible, setButtonsVisible] = useState(true)
-  const [acceptModalVisible, setAcceptModalVisible] = useState(false)
-
-  const [overlay, setOverlay] = useState<CredentialOverlay<BrandingOverlay>>({
-    bundle: undefined,
-    presentationFields: [],
-    metaOverlay: undefined,
-    brandingOverlay: undefined,
-  })
-
-  useEffect(() => {
-    if (!credential) {
-      return
-    }
-
-    const resolveOverlay = async () => {
-      const brandingOverlay = await resolveBundleForCredential(credential)
-      setOverlay(brandingOverlay)
-    }
-
-    resolveOverlay()
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [credential])
-
-  const styles = StyleSheet.create({
-    headerTextContainer: {
-      paddingHorizontal: 25,
-      paddingVertical: 16,
-    },
-    headerText: {
-      ...TextTheme.normal,
-      flexShrink: 1,
-    },
-    footerButton: {
-      paddingTop: 10,
-    },
-  })
-
-  const toggleDeclineModalVisible = () => setIsRemoveModalDisplayed(!isRemoveModalDisplayed)
-
-  const handleDeclineTouched = async () => {
-    toggleDeclineModalVisible()
-    navigation.getParent()?.navigate(TabStacks.HomeStack, { screen: Screens.Home })
-  }
-
-  const handleAcceptTouched = async () => {
-    if (!agent) {
-      return
-    }
-    try {
-      await storeCredential(credential)
-      setAcceptModalVisible(true)
-    } catch (err: unknown) {
-      setButtonsVisible(true)
-      const error = new BifoldError(t('Error.Title1024'), t('Error.Message1024'), (err as Error)?.message ?? err, 1024)
-      DeviceEventEmitter.emit(EventTypes.ERROR_ADDED, error)
-    }
-  }
-
-  const footerButton = (
-    title: string,
-    buttonPress: () => void,
-    buttonType: ButtonType,
-    testID: string,
-    accessibilityLabel: string
-  ) => {
-    return (
-      <View style={styles.footerButton}>
-        <Button
-          title={title}
-          accessibilityLabel={accessibilityLabel}
-          testID={testID}
-          buttonType={buttonType}
-          onPress={buttonPress}
-          disabled={!buttonsVisible}
-        />
-      </View>
-    )
-  }
-
-  const renderOpenIdCard = () => {
-    if (!credentialDisplay || !credential) return null
-    return (
-      <OpenIDCredentialCard
-        credentialDisplay={credentialDisplay}
-        credentialRecord={credential as W3cCredentialRecord}
-      />
-    )
-  }
-
-  const header = () => {
-    return (
-      <>
-        <View style={styles.headerTextContainer}>
-          <Text style={styles.headerText} testID={testIdWithKey('HeaderText')}>
-            <Text>{display.issuer.name || t('ContactDetails.AContact')}</Text>{' '}
-            {t('CredentialOffer.IsOfferingYouACredential')}
-          </Text>
-        </View>
-        {credential && <View style={{ marginHorizontal: 15, marginBottom: 16 }}>{renderOpenIdCard()}</View>}
-      </>
-    )
-  }
-
-  const footer = () => {
-    const paddingHorizontal = 24
-    const paddingVertical = 16
-    const paddingBottom = 26
-    return (
-      <View style={{ marginBottom: 50 }}>
-        <View
-          style={{
-            paddingHorizontal: paddingHorizontal,
-            paddingVertical: paddingVertical,
-            paddingBottom: paddingBottom,
-            backgroundColor: ColorPalette.brand.secondaryBackground,
-          }}
-        >
-          {footerButton(
-            t('Global.Accept'),
-            handleAcceptTouched,
-            ButtonType.Primary,
-            testIdWithKey('AcceptCredentialOffer'),
-            t('Global.Accept')
-          )}
-          {footerButton(
-            t('Global.Decline'),
-            toggleDeclineModalVisible,
-            ButtonType.Secondary,
-            testIdWithKey('DeclineCredentialOffer'),
-            t('Global.Decline')
-          )}
-        </View>
-      </View>
-    )
-  }
-
-  return (
-    <ScreenLayout screen={Screens.OpenIDCredentialDetails}>
-      <Record fields={overlay.presentationFields || []} hideFieldValues header={header} footer={footer} />
-      <CredentialOfferAccept visible={acceptModalVisible} credentialId={''} confirmationOnly={true} />
-      <CommonRemoveModal
-        usage={ModalUsage.CredentialOfferDecline}
-        visible={isRemoveModalDisplayed}
-        onSubmit={handleDeclineTouched}
-        onCancel={toggleDeclineModalVisible}
-        extraDetails={display.issuer.name}
-      />
-    </ScreenLayout>
-  )
-}
-
-export default OpenIDCredentialOffer

package/src/modules/openid/screens/OpenIDProofChangeCredential.tsx

@@ -1,133 +0,0 @@
-import { StackScreenProps } from '@react-navigation/stack'
-import { FlatList, StyleSheet, TouchableOpacity, View } from 'react-native'
-import { useTranslation } from 'react-i18next'
-
-import { DeliveryStackParams, Screens } from '../../../types/navigators'
-import ScreenLayout from '../../../layout/ScreenLayout'
-import { useTheme } from '../../../contexts/theme'
-import { useEffect, useState } from 'react'
-import { MdocRecord, SdJwtVcRecord, W3cCredentialRecord } from '@credo-ts/core'
-import { isSdJwtProofRequest, isW3CProofRequest } from '../utils/utils'
-import { useOpenIDCredentials } from '../context/OpenIDCredentialRecordProvider'
-import RecordLoading from '../../../components/animated/RecordLoading'
-import { ThemedText } from '../../../components/texts/ThemedText'
-import { testIdWithKey } from '../../../utils/testable'
-import { CredentialCard } from '../../../components/misc'
-
-type Props = StackScreenProps<DeliveryStackParams, Screens.OpenIDProofCredentialSelect>
-type TypedCred = {
-  credential: W3cCredentialRecord | SdJwtVcRecord | MdocRecord
-  claimFormat: string
-}
-
-const OpenIDProofCredentialSelect: React.FC<Props> = ({ route, navigation }: Props) => {
-  if (!route?.params) {
-    throw new Error('Change credential route params were not set properly')
-  }
-  const selectedCredentialID = route.params.selectedCredID
-  const altCredentials = route.params.altCredIDs
-  const onCredChange = route.params.onCredChange
-  const { ColorPalette, SelectedCredTheme } = useTheme()
-  const { getW3CCredentialById, getSdJwtCredentialById } = useOpenIDCredentials()
-
-  const { t } = useTranslation()
-  const [loading, setLoading] = useState(false)
-
-  const [credentialsRequested, setCredentialsRequested] = useState<Array<TypedCred>>([])
-
-  useEffect(() => {
-    async function fetchCreds() {
-      if (!altCredentials) return
-      setLoading(true)
-
-      const creds: TypedCred[] = []
-
-      for (const { id, claimFormat } of Object.values(altCredentials)) {
-        let credential: W3cCredentialRecord | SdJwtVcRecord | MdocRecord | undefined
-        if (isW3CProofRequest(claimFormat)) {
-          credential = await getW3CCredentialById(id)
-        } else if (isSdJwtProofRequest(claimFormat)) {
-          credential = await getSdJwtCredentialById(id)
-        }
-
-        if (credential) {
-          creds.push({
-            credential,
-            claimFormat,
-          })
-        }
-      }
-      setCredentialsRequested(creds)
-      setLoading(false)
-    }
-    fetchCreds()
-  }, [altCredentials, getW3CCredentialById, getSdJwtCredentialById])
-
-  const styles = StyleSheet.create({
-    pageContainer: {
-      flex: 1,
-    },
-    pageMargin: {
-      marginHorizontal: 20,
-    },
-    cardLoading: {
-      backgroundColor: ColorPalette.brand.secondaryBackground,
-      flex: 1,
-      flexGrow: 1,
-      marginVertical: 35,
-      borderRadius: 15,
-      paddingHorizontal: 10,
-    },
-  })
-
-  const changeCred = (selection: TypedCred) => {
-    onCredChange({
-      inputDescriptorID: route.params.inputDescriptorID,
-      id: selection.credential.id,
-      claimFormat: selection.claimFormat,
-    })
-    navigation.goBack()
-  }
-
-  const listHeader = () => {
-    return (
-      <View style={{ ...styles.pageMargin, marginTop: 40, marginBottom: 20 }}>
-        {loading ? (
-          <View style={styles.cardLoading}>
-            <RecordLoading />
-          </View>
-        ) : (
-          <ThemedText variant={'bold'}>{t('ProofRequest.AvailableCards')}</ThemedText>
-        )}
-      </View>
-    )
-  }
-
-  return (
-    <ScreenLayout screen={Screens.OpenIDProofCredentialSelect}>
-      <FlatList
-        data={credentialsRequested}
-        ListHeaderComponent={listHeader}
-        renderItem={({ item }) => {
-          return (
-            <View style={styles.pageMargin}>
-              <TouchableOpacity
-                accessibilityRole="button"
-                testID={testIdWithKey(`select:${item.credential.id}`)}
-                onPress={() => changeCred(item)}
-                style={[
-                  item.credential.id === selectedCredentialID ? SelectedCredTheme : undefined,
-                  { marginBottom: 10 },
-                ]}
-              >
-                <CredentialCard credential={item.credential}></CredentialCard>
-              </TouchableOpacity>
-            </View>
-          )
-        }}
-      ></FlatList>
-    </ScreenLayout>
-  )
-}
-
-export default OpenIDProofCredentialSelect