@bifold/core 1.0.0

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

@@ -0,0 +1,351 @@
+import { 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>
+
+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 { getW3CCredentialById, getSdJwtCredentialById } = useOpenIDCredentials()
+
+  const { ColorPallet, 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: ColorPallet.brand.secondaryBackground,
+      marginBottom: 20,
+    },
+    cardAttributes: {
+      flexDirection: 'row',
+      flexWrap: 'wrap',
+      borderColor: ColorPallet.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]
+  )
+
+  const selectedCredentials:
+    | {
+        [inputDescriptorId: string]: {
+          id: string
+          claimFormat: string
+        }
+      }
+    | undefined = useMemo(
+    () =>
+      submission?.entries.reduce((acc, entry) => {
+        if (entry.isSatisfied) {
+          //TODO: Support multiplae credentials
+          return {
+            ...acc,
+            [entry.inputDescriptorId]: {
+              id: entry.credentials[0].id,
+              claimFormat: entry.credentials[0].claimFormat,
+            },
+          }
+        }
+        return acc
+      }, {}),
+    [submission]
+  )
+
+  useEffect(() => {
+    async function fetchCreds() {
+      if (!selectedCredentials) return
+
+      const creds: Array<W3cCredentialRecord | SdJwtVcRecord | MdocRecord> = []
+
+      for (const [inputDescriptorID, { id, claimFormat }] of Object.entries(selectedCredentials)) {
+        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()
+  }, [selectedCredentials, getW3CCredentialById, getSdJwtCredentialById])
+
+  const { verifierName } = useMemo(() => {
+    return { verifierName: credential?.verifierHostName }
+  }, [credential])
+
+  const handleAcceptTouched = async () => {
+    try {
+      if (!agent || !credential.credentialsForRequest || !selectedCredentials) {
+        return
+      }
+      await shareProof({
+        agent,
+        authorizationRequest: credential.authorizationRequest,
+        credentialsForRequest: credential.credentialsForRequest,
+        selectedCredentials,
+      })
+
+      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 })
+  }
+
+  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,
+    //TODO: Support multiplae credentials
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    hasMultipleCreds: boolean
+  ) => {
+    const credential = credentialsRequested.find((c) => c.id === selectedCredential.id)
+    if (!credential) {
+      return null
+    }
+    const credentialDisplay = getCredentialForDisplay(credential)
+    const fields = buildFieldsFromW3cCredsCredential(credentialDisplay)
+    const requestedAttributes = selectedCredential.requestedAttributes
+    const fieldsMapped = fields.filter((field) => requestedAttributes?.includes(field.name))
+    return (
+      <CredentialCard
+        credential={credential}
+        displayItems={fieldsMapped as Attribute[]}
+        //TODO: Support multiplae credentials
+        // hasAltCredentials={hasMultipleCreds}
+        // handleAltCredChange={selectAltCredentail}
+      />
+    )
+  }
+
+  const renderBody = () => {
+    if (!submission) return null
+
+    return (
+      <View style={styles.credentialsList}>
+        {submission.entries.map((s, i) => {
+          //TODO: Support multiplae credentials
+          const selectedCredential = s.credentials[0]
+
+          const globalSubmissionName = submission.name
+          const globalSubmissionPurpose = submission.purpose
+          const submissionName = s.name
+          const submissionPurpose = s.purpose
+
+          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.labelSubtitle}>{name}</Text>
+                      <Text style={TextTheme.labelSubtitle}>{purpose}</Text>
+                    </View>
+                  )}
+                  {s.isSatisfied && selectedCredential?.requestedAttributes ? (
+                    renderCard(s, selectedCredential, s.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: ColorPallet.brand.secondaryBackground,
+        }}
+      >
+        {selectedCredentials && Object.keys(selectedCredentials).length > 0 ? (
+          <>
+            {footerButton(
+              t('Global.Accept'),
+              handleAcceptTouched,
+              ButtonType.Primary,
+              testIdWithKey('AcceptCredentialOffer'),
+              t('Global.Accept')
+            )}
+            {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

@@ -0,0 +1,103 @@
+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
+}
+
+export interface OpenId4VPRequestRecord extends OpenId4VcSiopResolvedAuthorizationRequest {
+  definition: DifPresentationExchangeDefinition
+  verifierHostName: string | undefined
+  createdAt: string | Date
+  credentialsForRequest: DifPexCredentialsForRequest | undefined
+  type: string
+}
+
+export enum OpenIDCredentialType {
+  W3cCredential,
+  SdJwtVc,
+  Mdoc,
+}

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

@@ -0,0 +1,133 @@
+import { getDomainFromUrl } from '@credo-ts/core'
+import { Attribute, Field } from '@bifold/oca/build/legacy'
+import { W3cCredentialDisplay } from '../types'
+
+/**
+ * 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,
+  })
+}
+
+export const getAttributeField = (display: W3cCredentialDisplay, searchKey: string): Attribute | undefined => {
+  for (const [key, value] of Object.entries(display.attributes)) {
+    if (searchKey === key) {
+      return new Attribute({
+        name: key,
+        value: value as string | number | null,
+        mimeType: typeof value === 'number' ? 'text/number' : 'text/plain',
+      })
+    }
+  }
+  return undefined
+}
+
+/**
+ * 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
+}

package/src/navigators/ConnectStack.tsx

@@ -0,0 +1,68 @@
+import { createStackNavigator } from '@react-navigation/stack'
+import React from 'react'
+import { useTranslation } from 'react-i18next'
+
+import { useTheme } from '../contexts/theme'
+import NameWallet from '../screens/NameWallet'
+import PasteUrl from '../screens/PasteUrl'
+import ScanHelp from '../screens/ScanHelp'
+import { ConnectStackParams, Screens } from '../types/navigators'
+import { testIdWithKey } from '../utils/testable'
+
+import { useDefaultStackOptions } from './defaultStackOptions'
+import { TOKENS, useServices } from '../container-api'
+
+const ConnectStack: React.FC = () => {
+  const Stack = createStackNavigator<ConnectStackParams>()
+  const theme = useTheme()
+  const defaultStackOptions = useDefaultStackOptions(theme)
+  const [scan, ScreenOptionsDictionary] = useServices([TOKENS.SCREEN_SCAN, TOKENS.OBJECT_SCREEN_CONFIG])
+  const { t } = useTranslation()
+
+  return (
+    <Stack.Navigator
+      screenOptions={{
+        ...defaultStackOptions,
+      }}
+    >
+      <Stack.Screen
+        name={Screens.Scan}
+        component={scan}
+        options={{
+          title: t('Screens.Scan'),
+          headerBackTestID: testIdWithKey('Back'),
+          ...ScreenOptionsDictionary[Screens.Scan],
+        }}
+      />
+      <Stack.Screen
+        name={Screens.PasteUrl}
+        component={PasteUrl}
+        options={() => ({
+          title: t('PasteUrl.PasteUrl'),
+          headerBackTestID: testIdWithKey('Back'),
+          ...ScreenOptionsDictionary[Screens.PasteUrl],
+        })}
+      />
+      <Stack.Screen
+        name={Screens.ScanHelp}
+        component={ScanHelp}
+        options={{
+          title: t('Screens.ScanHelp'),
+          ...ScreenOptionsDictionary[Screens.ScanHelp],
+        }}
+      />
+
+      <Stack.Screen
+        name={Screens.NameWallet}
+        component={NameWallet}
+        options={{
+          title: t('Screens.NameWallet'),
+          headerBackTestID: testIdWithKey('Back'),
+          ...ScreenOptionsDictionary[Screens.NameWallet],
+        }}
+      />
+    </Stack.Navigator>
+  )
+}
+
+export default ConnectStack