@bifold/core 2.0.1 → 2.1.0

package/src/screens/PINVerify.tsx

@@ -0,0 +1,193 @@
+import React, { useCallback, useEffect, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import { Keyboard, StyleSheet, View } from 'react-native'
+import Button, { ButtonType } from '../components/buttons/Button'
+import { InlineMessageProps } from '../components/inputs/InlineErrorText'
+import PINInput from '../components/inputs/PINInput'
+import { InfoBoxType } from '../components/misc/InfoBox'
+import PopupModal from '../components/modals/PopupModal'
+import { ThemedText } from '../components/texts/ThemedText'
+import KeyboardView from '../components/views/KeyboardView'
+import { minPINLength } from '../constants'
+import { TOKENS, useServices } from '../container-api'
+import { useAnimatedComponents } from '../contexts/animated-components'
+import { useAuth } from '../contexts/auth'
+import { useTheme } from '../contexts/theme'
+import usePreventScreenCapture from '../hooks/screen-capture'
+import { testIdWithKey } from '../utils/testable'
+
+interface Props {
+  setAuthenticated: (status: boolean) => void
+  usage?: PINEntryUsage
+  onCancelAuth?: React.Dispatch<React.SetStateAction<boolean>>
+}
+
+export enum PINEntryUsage {
+  PINCheck,
+  ChangeBiometrics,
+}
+
+const PINVerify: React.FC<Props> = ({ setAuthenticated, usage = PINEntryUsage.PINCheck, onCancelAuth }) => {
+  const { t } = useTranslation()
+  const { verifyPIN } = useAuth()
+  const [PIN, setPIN] = useState<string>('')
+  const [continueDisabled, setContinueDisabled] = useState(false)
+  const [loading, setLoading] = useState(false)
+  const [alertModalVisible, setAlertModalVisible] = useState<boolean>(false)
+  const { ColorPallet } = useTheme()
+  const { ButtonLoading } = useAnimatedComponents()
+  const [inlineMessageField, setInlineMessageField] = useState<InlineMessageProps>()
+  // Temporary until all use cases are built with the new design
+  const isNewDesign = usage === PINEntryUsage.ChangeBiometrics
+  const [{ preventScreenCapture }] = useServices([TOKENS.CONFIG])
+  usePreventScreenCapture(preventScreenCapture)
+
+  useEffect(() => {
+    setInlineMessageField(undefined)
+  }, [PIN])
+
+  const clearAlertModal = useCallback(() => {
+    setAlertModalVisible(false)
+    setAuthenticated(false)
+  }, [setAlertModalVisible, setAuthenticated])
+
+  const onPINInputCompleted = useCallback(async () => {
+    Keyboard.dismiss()
+    setLoading(true)
+    setContinueDisabled(true)
+    const isPINVerified = await verifyPIN(PIN)
+    if (isPINVerified) {
+      setAuthenticated(true)
+    } else {
+      setAlertModalVisible(true)
+    }
+    setLoading(false)
+    setContinueDisabled(false)
+  }, [verifyPIN, setLoading, setAuthenticated, setContinueDisabled, PIN])
+
+  const inputLabelText = {
+    [PINEntryUsage.ChangeBiometrics]: t('PINEnter.ChangeBiometricsInputLabel'),
+    [PINEntryUsage.PINCheck]: t('PINEnter.AppSettingChangedEnterPIN'),
+  }
+
+  const inputTestId = {
+    [PINEntryUsage.ChangeBiometrics]: 'BiometricChangedEnterPIN',
+    [PINEntryUsage.PINCheck]: 'AppSettingChangedEnterPIN',
+  }
+
+  const primaryButtonText = {
+    [PINEntryUsage.ChangeBiometrics]: t('Global.Continue'),
+    [PINEntryUsage.PINCheck]: t('PINEnter.AppSettingSave'),
+  }
+
+  const primaryButtonTestId = {
+    [PINEntryUsage.ChangeBiometrics]: 'Continue',
+    [PINEntryUsage.PINCheck]: 'AppSettingSave',
+  }
+
+  const helpText = {
+    [PINEntryUsage.ChangeBiometrics]: t('PINEnter.ChangeBiometricsSubtext'),
+    [PINEntryUsage.PINCheck]: t('PINEnter.AppSettingChanged'),
+  }
+
+  const isContinueDisabled = continueDisabled || PIN.length < minPINLength
+
+  const style = StyleSheet.create({
+    screenContainer: {
+      flex: 1,
+      padding: 20,
+      backgroundColor: ColorPallet.brand.primaryBackground,
+      justifyContent: isNewDesign ? 'flex-start' : 'space-between',
+    },
+    buttonContainer: {
+      marginTop: 'auto',
+      width: '100%',
+    },
+    helpText: {
+      alignSelf: 'auto',
+      textAlign: 'left',
+      marginBottom: isNewDesign ? 40 : 20,
+    },
+    inputLabelText: {
+      alignSelf: 'auto',
+      textAlign: 'left',
+      marginBottom: isNewDesign ? 20 : 4,
+    },
+    modalText: {
+      marginVertical: 5,
+    },
+    changeBiometricsHeader: {
+      marginTop: 0,
+      marginBottom: isNewDesign ? 40 : 20,
+    },
+  })
+
+  return (
+    <KeyboardView>
+      <View style={style.screenContainer}>
+        {usage === PINEntryUsage.ChangeBiometrics && (
+          <ThemedText variant="headingTwo" style={style.changeBiometricsHeader}>
+            {t('PINEnter.ChangeBiometricsHeader')}
+          </ThemedText>
+        )}
+        <ThemedText style={style.helpText}>{helpText[usage]}</ThemedText>
+        <ThemedText variant="bold" style={style.inputLabelText}>
+          {inputLabelText[usage]}
+          {usage === PINEntryUsage.ChangeBiometrics && (
+            <ThemedText variant="caption">
+              {` `}
+              {t('PINEnter.ChangeBiometricsInputLabelParenthesis')}
+            </ThemedText>
+          )}
+        </ThemedText>
+        <PINInput
+          onPINChanged={(p: string) => {
+            setPIN(p)
+            if (p.length === minPINLength) {
+              Keyboard.dismiss()
+            }
+          }}
+          testID={testIdWithKey(inputTestId[usage])}
+          accessibilityLabel={inputLabelText[usage]}
+          autoFocus={true}
+          inlineMessage={inlineMessageField}
+        />
+        <View style={style.buttonContainer}>
+          <Button
+            title={primaryButtonText[usage]}
+            buttonType={ButtonType.Primary}
+            testID={testIdWithKey(primaryButtonTestId[usage])}
+            disabled={isContinueDisabled}
+            accessibilityLabel={primaryButtonText[usage]}
+            onPress={async () => {
+              await onPINInputCompleted()
+            }}
+          >
+            {loading && <ButtonLoading />}
+          </Button>
+        </View>
+        {usage === PINEntryUsage.PINCheck && (
+          <View style={[style.buttonContainer, { marginTop: 10 }]}>
+            <Button
+              title={t('PINEnter.AppSettingCancel')}
+              buttonType={ButtonType.Secondary}
+              testID={testIdWithKey('AppSettingCancel')}
+              accessibilityLabel={t('PINEnter.AppSettingCancel')}
+              onPress={() => onCancelAuth?.(false)}
+            />
+          </View>
+        )}
+      </View>
+      {alertModalVisible && (
+        <PopupModal
+          notificationType={InfoBoxType.Info}
+          title={t('PINEnter.IncorrectPIN')}
+          onCallToActionLabel={t('Global.Okay')}
+          onCallToActionPressed={clearAlertModal}
+        />
+      )}
+    </KeyboardView>
+  )
+}
+
+export default PINVerify

package/src/screens/PushNotifications.tsx

@@ -28,7 +28,7 @@ const PushNotifications: React.FC = () => {
     },
     controlsContainer: {
       marginTop: 'auto',
-    }
+    },
   })
 
   const activatePushNotifications = async () => {
@@ -40,7 +40,7 @@ const PushNotifications: React.FC = () => {
     <SafeAreaView style={{ flex: 1 }} edges={['left', 'right', 'bottom']}>
       <ScrollView contentContainerStyle={{ flexGrow: 1 }}>
         <View style={styles.screenContainer}>
-          <PushNotificationsContent/>
+          <PushNotificationsContent />
           <View style={styles.controlsContainer}>
             <Button
               buttonType={ButtonType.Primary}

package/src/screens/Settings.tsx

@@ -1,5 +1,5 @@
 import { StackScreenProps } from '@react-navigation/stack'
-import React, { useRef } from 'react'
+import React from 'react'
 import { useTranslation } from 'react-i18next'
 import {
   ScrollView,
@@ -18,9 +18,9 @@ import IconButton, { ButtonLocation } from '../components/buttons/IconButton'
 import { ThemedText } from '../components/texts/ThemedText'
 import { TOKENS, useServices } from '../container-api'
 import { AutoLockTime } from '../contexts/activity'
-import { DispatchAction } from '../contexts/reducers/store'
 import { useStore } from '../contexts/store'
 import { useTheme } from '../contexts/theme'
+import { useDeveloperMode } from '../hooks/developer-mode'
 import { Locales } from '../localization'
 import { GenericFn } from '../types/fn'
 import { Screens, SettingStackParams, Stacks } from '../types/navigators'
@@ -29,12 +29,11 @@ import { testIdWithKey } from '../utils/testable'
 
 type SettingsProps = StackScreenProps<SettingStackParams>
 
-const touchCountToEnableBiometrics = 9
-
 const Settings: React.FC<SettingsProps> = ({ navigation }) => {
   const { t, i18n } = useTranslation()
-  const [store, dispatch] = useStore()
-  const developerOptionCount = useRef(0)
+  const [store] = useStore()
+  const onDevModeTriggered = () => navigation.navigate(Screens.Developer)
+  const { incrementDeveloperMenuCounter } = useDeveloperMode(onDevModeTriggered)
   const { SettingsTheme, TextTheme, ColorPallet, Assets, maxFontSizeMultiplier } = useTheme()
   const [{ settings, enableTours, enablePushNotifications, disableContactsInSettings }, historyEnabled] = useServices([
     TOKENS.CONFIG,
@@ -82,19 +81,6 @@ const Settings: React.FC<SettingsProps> = ({ navigation }) => {
   })
 
   const currentLanguage = i18n.t('Language.code', { context: i18n.language as Locales })
-  const incrementDeveloperMenuCounter = () => {
-    if (developerOptionCount.current >= touchCountToEnableBiometrics) {
-      developerOptionCount.current = 0
-      dispatch({
-        type: DispatchAction.ENABLE_DEVELOPER_MODE,
-        payload: [true],
-      })
-
-      return
-    }
-
-    developerOptionCount.current = developerOptionCount.current + 1
-  }
 
   const settingsSections: SettingSection[] = [
     {
@@ -182,8 +168,7 @@ const Settings: React.FC<SettingsProps> = ({ navigation }) => {
         value: undefined,
         accessibilityLabel: t('Settings.Notifications'),
         testID: testIdWithKey('Notifications'),
-        onPress: () =>
-          navigation.navigate(Screens.TogglePushNotifications),
+        onPress: () => navigation.navigate(Screens.TogglePushNotifications),
       })
   }
 

package/src/screens/ToggleBiometry.tsx

@@ -1,8 +1,8 @@
-import { Header, HeaderBackButton, useHeaderHeight } from '@react-navigation/elements'
 import React, { useCallback, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 
 import BiometryControl from '../components/inputs/BiometryControl'
+import FauxHeader from '../components/misc/FauxHeader'
 import SafeAreaModal from '../components/modals/SafeAreaModal'
 import { TOKENS, useServices } from '../container-api'
 import { useAuth } from '../contexts/auth'
@@ -11,15 +11,9 @@ import { useStore } from '../contexts/store'
 import { useTheme } from '../contexts/theme'
 import { HistoryCardType, HistoryRecord } from '../modules/history/types'
 import { useAppAgent } from '../utils/agent'
-import PINEnter, { PINEntryUsage } from './PINEnter'
+import PINVerify, { PINEntryUsage } from './PINVerify'
+import { SafeAreaView } from 'react-native-safe-area-context'
 
-interface BackButtonProps {
-  setCanSeeCheckPIN: (value: boolean) => void
-}
-
-const BackButton: React.FC<BackButtonProps> = ({ setCanSeeCheckPIN }) => (
-  <HeaderBackButton onPress={() => setCanSeeCheckPIN(false)} tintColor="white" labelVisible={false} />
-)
 
 const ToggleBiometry: React.FC = () => {
   const [store, dispatch] = useStore()
@@ -34,8 +28,7 @@ const ToggleBiometry: React.FC = () => {
   const { commitWalletToKeychain, disableBiometrics } = useAuth()
   const [biometryEnabled, setBiometryEnabled] = useState(store.preferences.useBiometry)
   const [canSeeCheckPIN, setCanSeeCheckPIN] = useState<boolean>(false)
-  const { TextTheme, ColorPallet } = useTheme()
-  const headerHeight = useHeaderHeight()
+  const { ColorPallet, NavigationTheme } = useTheme()
 
   const logHistoryRecord = useCallback(
     (type: HistoryCardType) => {
@@ -79,11 +72,14 @@ const ToggleBiometry: React.FC = () => {
     store.onboarding.didConsiderBiometry,
   ])
 
-  const handleBiometryToggle = useCallback((newValue: boolean) => {
-    if (newValue === biometryEnabled) return
-    
-    onSwitchToggleAllowed()
-  }, [biometryEnabled, onSwitchToggleAllowed])
+  const handleBiometryToggle = useCallback(
+    (newValue: boolean) => {
+      if (newValue === biometryEnabled) return
+
+      onSwitchToggleAllowed()
+    },
+    [biometryEnabled, onSwitchToggleAllowed]
+  )
 
   const onAuthenticationComplete = useCallback(
     (status: boolean) => {
@@ -91,7 +87,7 @@ const ToggleBiometry: React.FC = () => {
       if (status) {
         const newValue = !biometryEnabled
         setBiometryEnabled(newValue)
-        
+
         if (newValue) {
           commitWalletToKeychain(newValue).then(() => {
             dispatch({
@@ -107,7 +103,7 @@ const ToggleBiometry: React.FC = () => {
             })
           })
         }
-        
+
         if (
           historyEventsLogger.logToggleBiometry &&
           store.onboarding.didAgreeToTerms &&
@@ -131,30 +127,20 @@ const ToggleBiometry: React.FC = () => {
     ]
   )
 
-  const renderHeaderLeft = useCallback(
-    () => <BackButton setCanSeeCheckPIN={() => setCanSeeCheckPIN(false)} />,
-    [setCanSeeCheckPIN]
-  )
+  const onBackPressed = () => setCanSeeCheckPIN(false)
 
   return (
-    <BiometryControl 
-      biometryEnabled={biometryEnabled} 
-      onBiometryToggle={handleBiometryToggle}
-    >
+    <BiometryControl biometryEnabled={biometryEnabled} onBiometryToggle={handleBiometryToggle}>
       <SafeAreaModal
         style={{ backgroundColor: ColorPallet.brand.primaryBackground }}
         visible={canSeeCheckPIN}
         transparent={false}
         animationType={'slide'}
-        presentationStyle="fullScreen"
+        presentationStyle={'fullScreen'}
       >
-        <Header
-          title={t('Screens.EnterPIN')}
-          headerTitleStyle={TextTheme.headerTitle}
-          headerStyle={{ height: headerHeight }}
-          headerLeft={renderHeaderLeft}
-        />
-        <PINEnter
+        <SafeAreaView edges={['top']} style={{ backgroundColor: NavigationTheme.colors.primary }}/>
+        <FauxHeader title={t('Screens.EnterPIN')} onBackPressed={onBackPressed}/>
+        <PINVerify
           usage={PINEntryUsage.ChangeBiometrics}
           setAuthenticated={onAuthenticationComplete}
           onCancelAuth={setCanSeeCheckPIN}

package/src/theme.ts

@@ -1,4 +1,4 @@
-import { StyleSheet, ViewStyle } from 'react-native'
+import { StyleSheet, TextStyle, ViewStyle } from 'react-native'
 import { SvgProps } from 'react-native-svg'
 
 import Arrow from './assets/icons/large-arrow.svg'
@@ -717,7 +717,37 @@ export const ListItems = StyleSheet.create({
   },
 })
 
-export const TabTheme = {
+export interface ITabTheme {
+  tabBarStyle: ViewStyle & {
+    height: number
+    backgroundColor: string
+    shadowOffset: {
+      width: number
+      height: number
+    }
+    shadowRadius: number
+    shadowColor: string
+    shadowOpacity: number
+    borderTopWidth: number
+    paddingBottom: number
+  },
+  tabBarContainerStyle: ViewStyle,
+  tabBarActiveTintColor: string,
+  tabBarInactiveTintColor: string,
+  tabBarTextStyle: TextStyle & {
+    fontSize: number
+  },
+  tabBarButtonIconStyle: {
+    color: string
+  },
+  focusTabIconStyle: ViewStyle,
+  focusTabActiveTintColor: {
+    backgroundColor: string
+  },
+  tabBarSecondaryBackgroundColor: string,
+}
+
+export const TabTheme: ITabTheme = {
   tabBarStyle: {
     height: 60,
     backgroundColor: ColorPallet.brand.secondaryBackground,
@@ -753,6 +783,7 @@ export const TabTheme = {
   focusTabActiveTintColor: {
     backgroundColor: ColorPallet.brand.secondary,
   },
+  tabBarSecondaryBackgroundColor: ColorPallet.brand.secondaryBackground,
 }
 
 export const NavigationTheme = {
@@ -1098,7 +1129,7 @@ export interface ITheme {
   Inputs: IInputs
   Buttons: any
   ListItems: any
-  TabTheme: any
+  TabTheme: ITabTheme
   NavigationTheme: any
   HomeTheme: any
   SettingsTheme: any

package/src/types/navigators.ts

@@ -22,6 +22,7 @@ export enum Screens {
   OpenIDCredentialDetails = 'Open ID Credential details',
   OpenIDCredentialOffer = 'Open ID Credential offer',
   OpenIDProofPresentation = 'Open ID Proof Presentation',
+  OpenIDProofCredentialSelect = 'Open ID Proof Credential Select',
   ProofRequest = 'Proof Request',
   ProofRequestDetails = 'Proof Request Details',
   ProofRequestUsageHistory = 'Proof Request Usage History',
@@ -108,7 +109,6 @@ export type OnboardingStackParams = {
   [Screens.Biometry]: undefined
   [Screens.NameWallet]: undefined
   [Screens.PushNotifications]: undefined
-  [Screens.Developer]: undefined
 }
 
 export type ContactStackParams = {
@@ -199,6 +199,23 @@ export type DeliveryStackParams = {
     credential: SdJwtVcRecord | W3cCredentialRecord | MdocRecord
   }
   [Screens.OpenIDProofPresentation]: { credential: OpenId4VPRequestRecord }
+  [Screens.OpenIDProofCredentialSelect]: {
+    inputDescriptorID: string
+    selectedCredID: string
+    altCredIDs: {
+      id: string
+      claimFormat: string
+    }[]
+    onCredChange: ({
+      inputDescriptorID,
+      id,
+      claimFormat,
+    }: {
+      inputDescriptorID: string
+      id: string
+      claimFormat: string
+    }) => void
+  }
 }
 
 export type HistoryStackParams = {

package/src/utils/oca.ts

@@ -11,32 +11,73 @@ import {
 import { W3cCredentialDisplay } from '../modules/openid/types'
 import { BrandingOverlay } from '@bifold/oca'
 
-export const buildFieldsFromAnonCredsCredential = (credential: CredentialExchangeRecord): Array<Field> => {
-  return credential?.credentialAttributes?.map((attr) => new Attribute(attr)) || []
+export type FieldExt = {
+  field: Attribute
+  attribute_name: string
 }
 
-export const buildFieldsFromW3cCredsCredential = (value: W3cCredentialDisplay): Array<Field> => {
-  return (
-    Object.entries(value.attributes)
-      .filter(([key]) => key !== 'id')
-      .map(([key, value]) => {
-        let formattedValue: string | number | null
+type AttributeFieldValue = string | number | null
 
-        if (typeof value === 'object' && value !== null) {
-          formattedValue = JSON.stringify(value) // Convert object to string
-        } else {
-          formattedValue = value as string | number | null
-        }
+export const getAttributeField = (display: W3cCredentialDisplay, searchKey: string): FieldExt | undefined => {
+  let attributeName: string = 'Unknown'
+  let attributeValue: AttributeFieldValue = 'Unknown'
 
-        return new Attribute({
-          name: key,
-          value: formattedValue,
-          mimeType: typeof value === 'number' ? 'text/number' : 'text/plain',
-        })
-      }) || []
+  for (const [key, value] of Object.entries(display.attributes)) {
+    let formattedValue: AttributeFieldValue
+
+    if (searchKey === key) {
+      if (typeof value === 'object' && value !== null) {
+        formattedValue = JSON.stringify(value) // Convert object to string
+      } else {
+        formattedValue = value as AttributeFieldValue
+      }
+
+      attributeName = key
+      attributeValue = formattedValue
+    }
+  }
+
+  //Now check credentialSubject for attributeName mapping
+  const credentialSubject = display.credentialSubject
+
+  if (credentialSubject) {
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    for (const [key, value] of Object.entries(credentialSubject)) {
+      if (key !== searchKey || !value) continue
+      const { display } = value
+      const { name } = display[0]
+      attributeName = name
+    }
+  }
+
+  return {
+    field: new Attribute({
+      name: attributeName,
+      value: attributeValue,
+      mimeType: typeof attributeValue === 'number' ? 'text/number' : 'text/plain',
+    }),
+    attribute_name: searchKey,
+  }
+}
+
+export const buildFieldsFromW3cCredsCredential = (
+  display: W3cCredentialDisplay,
+  filterByAttributes?: string[]
+): Array<Field> => {
+  return (
+    Object.entries(display.attributes)
+      .filter(([key]) => key !== 'id')
+      .map(([key]) => getAttributeField(display, key))
+      .filter((field) => field !== undefined)
+      .filter((field: FieldExt) => (filterByAttributes ? filterByAttributes.includes(field.attribute_name) : true))
+      .map((fld) => fld.field) || []
   )
 }
 
+export const buildFieldsFromAnonCredsCredential = (credential: CredentialExchangeRecord): Array<Field> => {
+  return credential?.credentialAttributes?.map((attr) => new Attribute(attr)) || []
+}
+
 export const buildFieldsFromAnonCredsProofRequestTemplate = (
   data: AnonCredsProofRequestTemplatePayloadData
 ): Array<Field> => {