@bifold/core 2.0.1 → 2.1.1

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/ProofRequest.tsx

@@ -652,9 +652,9 @@ const ProofRequest: React.FC<ProofRequestProps> = ({ navigation, proofId }) => {
 
   const proofPageHeader = () => {
     return (
-      <View style={styles.pageMargin}>
+      <>
         {attestationLoading && (
-          <View style={{ paddingTop: 20 }}>
+          <View style={{ padding: 20 }}>
             <InfoTextBox>{t('ProofRequest.JustAMoment')}</InfoTextBox>
           </View>
         )}
@@ -669,7 +669,7 @@ const ProofRequest: React.FC<ProofRequestProps> = ({ navigation, proofId }) => {
             testID={testIdWithKey('ProofRequestLoading')}
           />
         ) : (
-          <>
+          <View style={styles.pageMargin}>
             <ConnectionImage connectionId={proof?.connectionId} />
             <View style={styles.headerTextContainer}>
               <ThemedText style={styles.headerText} testID={testIdWithKey('HeaderText')}>
@@ -708,9 +708,9 @@ const ProofRequest: React.FC<ProofRequestProps> = ({ navigation, proofId }) => {
                 </InfoTextBox>
               )}
             </View>
-          </>
+          </View>
         )}
-      </View>
+      </>
     )
   }
 
@@ -718,16 +718,16 @@ const ProofRequest: React.FC<ProofRequestProps> = ({ navigation, proofId }) => {
     let finalMessage = `${t('ProofRequest.YouCantRespondReasons')}\n`
 
     if (shareDisabledErrors.hasCredentialError) {
-      finalMessage += `\n \u2B24 ${t('ProofRequest.CredentialIsMissing')}`
+      finalMessage += `\n \u2022 ${t('ProofRequest.CredentialIsMissing')}`
     }
     if (shareDisabledErrors.hasSatisfiedPredicateError) {
-      finalMessage += `\n \u2B24 ${t('ProofRequest.ProofRequestPredicateError')}`
+      finalMessage += `\n \u2022 ${t('ProofRequest.ProofRequestPredicateError')}`
     }
     if (shareDisabledErrors.hasRevokedOffense) {
-      finalMessage += `\n \u2B24 ${t('ProofRequest.CredentialForProofIsRevoked')}`
+      finalMessage += `\n \u2022 ${t('ProofRequest.CredentialForProofIsRevoked')}`
     }
     if (shareDisabledErrors.hasProofStateReceivedError) {
-      finalMessage += `\n \u2B24 ${t('ProofRequest.ProofRequestStateError', { state: proof?.state })}`
+      finalMessage += `\n \u2022 ${t('ProofRequest.ProofRequestStateError', { state: proof?.state })}`
     }
 
     finalMessage += `\n\n${t('ProofRequest.PleaseAddress')}`

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/RenameWallet.tsx

@@ -0,0 +1,25 @@
+import { useAgent } from '@credo-ts/react-hooks'
+import { useNavigation } from '@react-navigation/native'
+import React, { useCallback } from 'react'
+
+import WalletNameForm from '../components/forms/WalletNameForm'
+
+const RenameWallet: React.FC = () => {
+  const navigation = useNavigation()
+  const { agent } = useAgent()
+
+  const onCancel = useCallback(() => {
+    navigation.goBack()
+  }, [navigation])
+
+  const onSubmitSuccess = useCallback((name: string) => {
+    agent.config.label = name
+    navigation.goBack()
+  }, [navigation, agent])
+
+  return (
+    <WalletNameForm isRenaming onCancel={onCancel} onSubmitSuccess={onSubmitSuccess} />
+  )
+}
+
+export default RenameWallet

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,
@@ -8,6 +8,7 @@ import {
   TouchableOpacity,
   TouchableWithoutFeedback,
   useWindowDimensions,
+  Vibration,
   View,
 } from 'react-native'
 import { getBuildNumber, getVersion } from 'react-native-device-info'
@@ -18,9 +19,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 +30,14 @@ 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 = () => {
+    Vibration.vibrate()
+    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 +85,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[] = [
     {
@@ -104,7 +94,7 @@ const Settings: React.FC<SettingsProps> = ({ navigation }) => {
         iconRight: {
           name: 'edit',
           action: () => {
-            navigation.navigate(Screens.NameWallet)
+            navigation.navigate(Screens.RenameWallet)
           },
           accessibilityLabel: t('NameWallet.EditWalletName'),
           testID: testIdWithKey('EditWalletName'),
@@ -182,8 +172,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',
@@ -48,6 +49,7 @@ export enum Screens {
   ProofRequesting = 'Proof Requesting',
   ProofDetails = 'Proof Details',
   NameWallet = 'Name Wallet',
+  RenameWallet = 'Rename Wallet',
   RenameContact = 'Rename Contact',
   ScanHelp = 'Scan Help',
   HistorySettings = 'History Settings',
@@ -108,7 +110,6 @@ export type OnboardingStackParams = {
   [Screens.Biometry]: undefined
   [Screens.NameWallet]: undefined
   [Screens.PushNotifications]: undefined
-  [Screens.Developer]: undefined
 }
 
 export type ContactStackParams = {
@@ -148,13 +149,13 @@ export type HomeStackParams = {
 
 export type ConnectStackParams = {
   [Screens.Scan]: undefined
-  [Screens.NameWallet]: undefined
+  [Screens.RenameWallet]: undefined
   [Screens.ScanHelp]: undefined
   [Screens.PasteUrl]: undefined
 }
 
 export type SettingStackParams = {
-  [Screens.NameWallet]: undefined
+  [Screens.RenameWallet]: undefined
   [Screens.Settings]: undefined
   [Screens.Language]: undefined
   [Screens.DataRetention]: undefined
@@ -199,6 +200,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 = {