@bifold/core 2.4.5 → 2.5.0

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

@@ -1,423 +0,0 @@
-import { useCallback, useEffect, useMemo, useState } from 'react'
-import { DeviceEventEmitter } from 'react-native'
-import { useAgent } from '@credo-ts/react-hooks'
-import { useTranslation } from 'react-i18next'
-import { StackScreenProps } from '@react-navigation/stack'
-
-import { DeliveryStackParams, Screens, TabStacks } from '../../../types/navigators'
-import { ScrollView, StyleSheet, Text, View } from 'react-native'
-import {
-  formatDifPexCredentialsForRequest,
-  FormattedSelectedCredentialEntry,
-  FormattedSubmissionEntry,
-} from '../displayProof'
-import { testIdWithKey } from '../../../utils/testable'
-import CommonRemoveModal from '../../../components/modals/CommonRemoveModal'
-import { ModalUsage } from '../../../types/remove'
-import Button, { ButtonType } from '../../../components/buttons/Button'
-import { useTheme } from '../../../contexts/theme'
-import { BifoldError } from '../../../types/error'
-import { EventTypes } from '../../../constants'
-import { shareProof } from '../resolverProof'
-import ProofRequestAccept from '../../../screens/ProofRequestAccept'
-import { useOpenIDCredentials } from '../context/OpenIDCredentialRecordProvider'
-import { MdocRecord, SdJwtVcRecord, W3cCredentialRecord } from '@credo-ts/core'
-import { CredentialCard } from '../../../components/misc'
-import { getCredentialForDisplay } from '../display'
-import { buildFieldsFromW3cCredsCredential } from '../../../utils/oca'
-import { Attribute } from '@bifold/oca/build/legacy'
-import ScreenLayout from '../../../layout/ScreenLayout'
-import { isSdJwtProofRequest, isW3CProofRequest } from '../utils/utils'
-
-type OpenIDProofPresentationProps = StackScreenProps<DeliveryStackParams, Screens.OpenIDProofPresentation>
-
-type SatisfiedCredentialsFormat = {
-  [inputDescriptorId: string]: {
-    id: string
-    claimFormat: string
-  }[]
-}
-
-type SelectedCredentialsFormat = {
-  [inputDescriptorId: string]: {
-    id: string
-    claimFormat: string
-  }
-}
-
-const OpenIDProofPresentation: React.FC<OpenIDProofPresentationProps> = ({
-  navigation,
-  route: {
-    params: { credential },
-  },
-}: OpenIDProofPresentationProps) => {
-  const [declineModalVisible, setDeclineModalVisible] = useState(false)
-  const [buttonsVisible, setButtonsVisible] = useState(true)
-  const [acceptModalVisible, setAcceptModalVisible] = useState(false)
-  const [credentialsRequested, setCredentialsRequested] = useState<
-    Array<W3cCredentialRecord | SdJwtVcRecord | MdocRecord>
-  >([])
-  const [satistfiedCredentialsSubmission, setSatistfiedCredentialsSubmission] = useState<SatisfiedCredentialsFormat>()
-  const [selectedCredentialsSubmission, setSelectedCredentialsSubmission] = useState<SelectedCredentialsFormat>()
-
-  const { getW3CCredentialById, getSdJwtCredentialById } = useOpenIDCredentials()
-
-  const { ColorPalette, ListItems, TextTheme } = useTheme()
-  const { t } = useTranslation()
-  const { agent } = useAgent()
-
-  const toggleDeclineModalVisible = () => setDeclineModalVisible(!declineModalVisible)
-
-  const styles = StyleSheet.create({
-    pageContent: {
-      flexGrow: 1,
-      justifyContent: 'space-between',
-      padding: 10,
-    },
-    credentialsList: {
-      marginTop: 20,
-      justifyContent: 'space-between',
-    },
-    headerTextContainer: {
-      paddingVertical: 16,
-    },
-    headerText: {
-      ...ListItems.recordAttributeText,
-      flexShrink: 1,
-    },
-    footerButton: {
-      paddingTop: 10,
-    },
-    cardContainer: {
-      paddingHorizontal: 25,
-      paddingVertical: 16,
-      backgroundColor: ColorPalette.brand.secondaryBackground,
-      marginBottom: 20,
-    },
-    cardAttributes: {
-      flexDirection: 'row',
-      flexWrap: 'wrap',
-      borderColor: ColorPalette.grayscale.lightGrey,
-      borderWidth: 1,
-      borderRadius: 8,
-      padding: 8,
-    },
-    cardGroupContainer: {
-      borderRadius: 8,
-      borderWidth: 2,
-      borderColor: 'rgba(255, 255, 255, 0.2)',
-    },
-    cardGroupHeader: {
-      padding: 8,
-      marginVertical: 8,
-    },
-  })
-
-  const submission = useMemo(
-    () =>
-      credential && credential.credentialsForRequest
-        ? formatDifPexCredentialsForRequest(credential.credentialsForRequest)
-        : undefined,
-    [credential]
-  )
-
-  //This should run only once when the screen is mounted
-  useEffect(() => {
-    if (!submission) return
-    const creds = submission.entries.reduce((acc: SatisfiedCredentialsFormat, entry) => {
-      acc[entry.inputDescriptorId] = entry.credentials.map((cred) => ({
-        id: cred.id,
-        claimFormat: cred.claimFormat,
-      }))
-      return acc
-    }, {})
-    setSatistfiedCredentialsSubmission(creds)
-  }, [submission])
-
-  //Fetch all credentials satisfying the proof
-  useEffect(() => {
-    async function fetchCreds() {
-      if (!satistfiedCredentialsSubmission || satistfiedCredentialsSubmission.entries) return
-
-      const creds: Array<W3cCredentialRecord | SdJwtVcRecord | MdocRecord> = []
-
-      for (const [inputDescriptorID, credIDs] of Object.entries(satistfiedCredentialsSubmission)) {
-        for (const { id, claimFormat } of credIDs) {
-          let credential: W3cCredentialRecord | SdJwtVcRecord | MdocRecord | undefined
-          if (isW3CProofRequest(claimFormat)) {
-            credential = await getW3CCredentialById(id)
-          } else if (isSdJwtProofRequest(claimFormat)) {
-            credential = await getSdJwtCredentialById(id)
-          }
-
-          if (credential && inputDescriptorID) {
-            creds.push(credential)
-          }
-        }
-      }
-      setCredentialsRequested(creds)
-    }
-    fetchCreds()
-  }, [satistfiedCredentialsSubmission, getW3CCredentialById, getSdJwtCredentialById])
-
-  //Once satisfied credentials are set and all credentials fetched, we select the first one of each submission to display on screen
-  useEffect(() => {
-    if (!satistfiedCredentialsSubmission || credentialsRequested?.length <= 0) return
-
-    const creds = Object.entries(satistfiedCredentialsSubmission).reduce(
-      (acc: SelectedCredentialsFormat, [inputDescriptorId, credentials]) => {
-        acc[inputDescriptorId] = {
-          id: credentials[0].id,
-          claimFormat: credentials[0].claimFormat,
-        }
-        return acc
-      },
-      {}
-    )
-    setSelectedCredentialsSubmission(creds)
-  }, [satistfiedCredentialsSubmission, credentialsRequested])
-
-  const { verifierName } = useMemo(() => {
-    return { verifierName: credential?.verifierHostName }
-  }, [credential])
-
-  const handleAcceptTouched = async () => {
-    try {
-      if (!agent || !credential.credentialsForRequest || !selectedCredentialsSubmission) {
-        return
-      }
-      await shareProof({
-        agent,
-        authorizationRequest: credential.authorizationRequest,
-        credentialsForRequest: credential.credentialsForRequest,
-        selectedCredentials: selectedCredentialsSubmission,
-      })
-      setAcceptModalVisible(true)
-    } catch (err: unknown) {
-      setButtonsVisible(true)
-      const error = new BifoldError(t('Error.Title1027'), t('Error.Message1027'), (err as Error)?.message ?? err, 1027)
-      DeviceEventEmitter.emit(EventTypes.ERROR_ADDED, error)
-    }
-  }
-
-  const handleDeclineTouched = async () => {
-    toggleDeclineModalVisible()
-    navigation.getParent()?.navigate(TabStacks.HomeStack, { screen: Screens.Home })
-  }
-
-  const handleDismiss = async () => {
-    navigation.getParent()?.navigate(TabStacks.HomeStack, { screen: Screens.Home })
-  }
-
-  // Re-construct the selected credentials object based on user alt credential
-  const onCredChange = ({
-    inputDescriptorID,
-    id,
-    claimFormat,
-  }: {
-    inputDescriptorID: string
-    id: string
-    claimFormat: string
-  }) => {
-    setSelectedCredentialsSubmission((prev) => ({
-      ...prev,
-      [inputDescriptorID]: {
-        id,
-        claimFormat,
-      },
-    }))
-  }
-
-  const handleAltCredChange = useCallback(
-    (inputDescriptorID: string, selectedCredID: string, inputDescriptor: string) => {
-      const submittionEntries = submission?.entries.find((entry) => entry.inputDescriptorId === inputDescriptor)
-      const credsForEntry = submittionEntries?.credentials
-
-      if (!credsForEntry) return
-
-      navigation.navigate(Screens.OpenIDProofCredentialSelect, {
-        inputDescriptorID: inputDescriptorID,
-        selectedCredID: selectedCredID,
-        altCredIDs: credsForEntry.map((cred) => {
-          return {
-            id: cred.id,
-            claimFormat: cred.claimFormat,
-          }
-        }),
-        onCredChange: onCredChange,
-      })
-    },
-    [submission, navigation]
-  )
-
-  const renderHeader = () => {
-    return (
-      <View style={styles.headerTextContainer}>
-        <Text style={styles.headerText} testID={testIdWithKey('HeaderText')}>
-          <Text style={TextTheme.normal}>{t('ProofRequest.ReceiveProofTitle')}</Text>
-          {'\n'}
-          <Text style={TextTheme.title}>{verifierName ? verifierName : ''}</Text>
-        </Text>
-      </View>
-    )
-  }
-
-  const renderCard = (
-    sub: FormattedSubmissionEntry,
-    selectedCredential: FormattedSelectedCredentialEntry,
-    hasMultipleCreds: boolean
-  ) => {
-    const credential = credentialsRequested.find((c) => c.id === selectedCredential.id)
-    if (!credential) {
-      return null
-    }
-    const credentialDisplay = getCredentialForDisplay(credential)
-    const requestedAttributes = selectedCredential.requestedAttributes
-    const fields = buildFieldsFromW3cCredsCredential(credentialDisplay, requestedAttributes)
-    return (
-      <CredentialCard
-        credential={credential}
-        displayItems={fields as Attribute[]}
-        hasAltCredentials={hasMultipleCreds}
-        handleAltCredChange={() => {
-          handleAltCredChange(sub.inputDescriptorId, selectedCredential.id, sub.inputDescriptorId)
-        }}
-      />
-    )
-  }
-
-  const renderBody = () => {
-    if (!selectedCredentialsSubmission || !submission) return null
-
-    return (
-      <View style={styles.credentialsList}>
-        {Object.entries(selectedCredentialsSubmission).map(([inputDescriptorId, credentialSimplified], i) => {
-          //TODO: Support multiplae credentials
-
-          const globalSubmissionName = submission.name
-          const globalSubmissionPurpose = submission.purpose
-          const correspondingSubmission = submission.entries?.find((s) => s.inputDescriptorId === inputDescriptorId)
-          const submissionName = correspondingSubmission?.name
-          const submissionPurpose = correspondingSubmission?.purpose
-          const isSatisfied = correspondingSubmission?.isSatisfied
-          const credentialSubmittion = correspondingSubmission?.credentials.find(
-            (s) => s.id === credentialSimplified.id
-          )
-          const requestedAttributes = credentialSubmittion?.requestedAttributes
-
-          const name = submissionName || globalSubmissionName || undefined
-          const purpose = submissionPurpose || globalSubmissionPurpose || undefined
-
-          return (
-            <View key={i}>
-              <View style={styles.cardContainer}>
-                <View style={styles.cardGroupContainer}>
-                  {name && purpose && (
-                    <View style={styles.cardGroupHeader}>
-                      <Text style={TextTheme.bold}>{name}</Text>
-                      <Text style={TextTheme.labelTitle}>{purpose}</Text>
-                    </View>
-                  )}
-                  {isSatisfied && requestedAttributes ? (
-                    renderCard(
-                      correspondingSubmission,
-                      credentialSubmittion,
-                      correspondingSubmission.credentials.length > 1
-                    )
-                  ) : (
-                    <Text style={TextTheme.normal}>{t('ProofRequest.CredentialNotInWallet')}</Text>
-                  )}
-                </View>
-              </View>
-            </View>
-          )
-        })}
-      </View>
-    )
-  }
-
-  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 footer = () => {
-    return (
-      <View
-        style={{
-          paddingHorizontal: 25,
-          paddingVertical: 16,
-          paddingBottom: 26,
-          backgroundColor: ColorPalette.brand.secondaryBackground,
-        }}
-      >
-        {selectedCredentialsSubmission && Object.keys(selectedCredentialsSubmission).length > 0 ? (
-          <>
-            {footerButton(
-              t('Global.Send'),
-              handleAcceptTouched,
-              ButtonType.Primary,
-              testIdWithKey('AcceptCredentialOffer'),
-              t('Global.Send')
-            )}
-            {footerButton(
-              t('Global.Decline'),
-              toggleDeclineModalVisible,
-              ButtonType.Secondary,
-              testIdWithKey('DeclineCredentialOffer'),
-              t('Global.Decline')
-            )}
-          </>
-        ) : (
-          <>
-            {footerButton(
-              t('Global.Dismiss'),
-              handleDismiss,
-              ButtonType.Primary,
-              testIdWithKey('DismissCredentialOffer'),
-              t('Global.Dismiss')
-            )}
-          </>
-        )}
-      </View>
-    )
-  }
-
-  return (
-    <ScreenLayout screen={Screens.OpenIDCredentialDetails}>
-      <ScrollView>
-        <View style={styles.pageContent}>
-          {renderHeader()}
-          {renderBody()}
-        </View>
-      </ScrollView>
-      {footer()}
-
-      <ProofRequestAccept visible={acceptModalVisible} proofId={''} confirmationOnly={true} />
-      <CommonRemoveModal
-        usage={ModalUsage.ProofRequestDecline}
-        visible={declineModalVisible}
-        onSubmit={handleDeclineTouched}
-        onCancel={toggleDeclineModalVisible}
-      />
-    </ScreenLayout>
-  )
-}
-
-export default OpenIDProofPresentation

package/src/modules/openid/types.tsx

@@ -1,111 +0,0 @@
-import {
-  OpenId4VciCredentialSupported,
-  OpenId4VciIssuerMetadataDisplay,
-  OpenId4VcSiopResolvedAuthorizationRequest,
-} from '@credo-ts/openid4vc'
-import { CredentialMetadata } from './display'
-import { ClaimFormat, DifPexCredentialsForRequest, DifPresentationExchangeDefinition } from '@credo-ts/core'
-
-export type CredentialForDisplayId = `w3c-credential-${string}` | `sd-jwt-vc-${string}` | `mdoc-${string}`
-export interface OpenId4VcCredentialMetadata {
-  credential: {
-    display?: OpenId4VciCredentialSupported['display']
-    order?: OpenId4VciCredentialSupported['order']
-  }
-  issuer: {
-    display?: OpenId4VciIssuerMetadataDisplay[]
-    id: string
-  }
-}
-
-export type W3cIssuerJson = {
-  id: string
-}
-
-export type W3cCredentialSubjectJson = {
-  id?: string
-  [key: string]: unknown
-}
-
-export type W3cCredentialJson = {
-  type: Array<string>
-  issuer: W3cIssuerJson
-  issuanceDate: string
-  expiryDate?: string
-  credentialSubject: W3cCredentialSubjectJson | W3cCredentialSubjectJson[]
-}
-
-export type JffW3cCredentialJson = W3cCredentialJson & {
-  name?: string
-  description?: string
-  credentialBranding?: {
-    backgroundColor?: string
-  }
-
-  issuer:
-    | string
-    | (W3cIssuerJson & {
-        name?: string
-        iconUrl?: string
-        logoUrl?: string
-        image?: string | { id?: string; type?: 'Image' }
-      })
-}
-
-export interface DisplayImage {
-  url?: string
-  altText?: string
-}
-
-export interface CredentialDisplay {
-  name: string
-  issuer: CredentialIssuerDisplay
-  locale?: string
-  description?: string
-  textColor?: string
-  backgroundColor?: string
-  backgroundImage?: DisplayImage
-  logo?: DisplayImage
-  primary_overlay_attribute?: string
-}
-
-export interface CredentialIssuerDisplay {
-  name: string
-  locale?: string
-  logo?: DisplayImage
-  domain?: string
-}
-
-export interface W3cCredentialDisplay {
-  id: string
-  createdAt: Date
-  display: CredentialDisplay
-  credential?: W3cCredentialJson
-  attributes: W3cCredentialSubjectJson
-  metadata: CredentialMetadata
-  claimFormat: ClaimFormat
-  validUntil: Date | undefined
-  validFrom: Date | undefined
-  credentialSubject: CredentialSubjectRecord | undefined
-}
-
-export interface OpenId4VPRequestRecord extends OpenId4VcSiopResolvedAuthorizationRequest {
-  definition: DifPresentationExchangeDefinition
-  verifierHostName: string | undefined
-  createdAt: string | Date
-  credentialsForRequest: DifPexCredentialsForRequest | undefined
-  type: string
-}
-
-interface DisplayInfo {
-  name: string
-  locale?: string
-}
-
-export type CredentialSubjectRecord = Record<string, { display: DisplayInfo[] }>
-
-export enum OpenIDCredentialType {
-  W3cCredential,
-  SdJwtVc,
-  Mdoc,
-}

package/src/modules/openid/utils/utils.tsx

@@ -1,119 +0,0 @@
-import { getDomainFromUrl } from '@credo-ts/core'
-import { Attribute, Field } from '@bifold/oca/build/legacy'
-
-/**
- * Converts a camelCase string to a sentence format (first letter capitalized, rest in lower case).
- * i.e. sanitizeString("helloWorld")  // returns: 'Hello world'
- */
-export function sanitizeString(str: string) {
-  const result = str.replace(/([a-z0-9])([A-Z])/g, '$1 $2').replaceAll('_', ' ')
-  let words = result.split(' ')
-  words = words.map((word, index) => {
-    if (index === 0 || word.toUpperCase() === word) {
-      return word.charAt(0).toUpperCase() + word.slice(1)
-    }
-    return word.charAt(0).toLowerCase() + word.slice(1)
-  })
-  return words.join(' ')
-}
-
-export function getHostNameFromUrl(url: string) {
-  try {
-    return getDomainFromUrl(url)
-  } catch (error) {
-    throw new Error(`Error getting hostname from url: ${error}`)
-  }
-}
-
-export const buildFieldsFromOpenIDTemplate = (data: { [key: string]: unknown }): Array<Field> => {
-  const fields = []
-  for (const key of Object.keys(data)) {
-    // omit id and type
-    if (key === 'id' || key === 'type') continue
-
-    let pushedVal: string | number | null = null
-    if (typeof data[key] === 'string' || typeof data[key] === 'number') {
-      pushedVal = data[key] as string | number | null
-    }
-    fields.push(new Attribute({ name: key, value: pushedVal }))
-  }
-  return fields
-}
-
-export function formatDate(input: string | Date): string {
-  const date = input instanceof Date ? input : new Date(input)
-  return date.toLocaleString('en-US', {
-    year: 'numeric',
-    month: 'long',
-    day: 'numeric',
-    hour: '2-digit',
-    minute: '2-digit',
-    hour12: true,
-  })
-}
-
-/**
- * Mostly used for mdoc crednetials
- */
-export function detectImageMimeType(data: Uint8Array): 'image/jpeg' | 'image/jp2' | null {
-  // Check if array is too short to contain magic numbers
-  if (data.length < 12) {
-    return null
-  }
-
-  // JPEG starts with FF D8 FF
-  if (data[0] === 0xff && data[1] === 0xd8 && data[2] === 0xff) {
-    return 'image/jpeg'
-  }
-
-  // JPEG2000 has two possible signatures:
-  // 1) 00 00 00 0C 6A 50 20 20 0D 0A 87 0A
-  // 2) FF 4F FF 51
-
-  // Check first signature
-  if (
-    data[0] === 0x00 &&
-    data[1] === 0x00 &&
-    data[2] === 0x00 &&
-    data[3] === 0x0c &&
-    data[4] === 0x6a && // 'j'
-    data[5] === 0x50 && // 'P'
-    data[6] === 0x20 &&
-    data[7] === 0x20 &&
-    data[8] === 0x0d &&
-    data[9] === 0x0a &&
-    data[10] === 0x87 &&
-    data[11] === 0x0a
-  ) {
-    return 'image/jp2'
-  }
-
-  // Check second signature
-  if (data[0] === 0xff && data[1] === 0x4f && data[2] === 0xff && data[3] === 0x51) {
-    return 'image/jp2'
-  }
-
-  return null
-}
-
-/**
- * very simple matcher for `yyyy-mm-dd`
- */
-export function isDateString(value: string) {
-  // We do the length check first to avoid unnecesary regex
-  return value.length === 'yyyy-mm-dd'.length && value.match(/^\d{4}-(0[1-9]|1[0-2])-(0[1-9]|[12]\d|3[01])$/)
-}
-
-export function isW3CProofRequest(type: string): boolean {
-  if (type === 'jwt_vc') {
-    return true
-  }
-  return false
-}
-
-export function isSdJwtProofRequest(type: string): boolean {
-  if (type === 'vc+sd-jwt') {
-    return true
-  }
-  return false
-}