@bifold/core 2.0.1 → 2.1.1

package/src/components/forms/WalletNameForm.tsx

@@ -0,0 +1,148 @@
+import React, { useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import { StyleSheet, View } from 'react-native'
+
+import { DispatchAction } from '../../contexts/reducers/store'
+import { useStore } from '../../contexts/store'
+import { useTheme } from '../../contexts/theme'
+import { generateRandomWalletName } from '../../utils/helpers'
+import { testIdWithKey } from '../../utils/testable'
+import ButtonLoading from '../animated/ButtonLoading'
+import Button, { ButtonType } from '../buttons/Button'
+import LimitedTextInput from '../inputs/LimitedTextInput'
+import { InfoBoxType } from '../misc/InfoBox'
+import PopupModal from '../modals/PopupModal'
+import { ThemedText } from '../texts/ThemedText'
+import KeyboardView from '../views/KeyboardView'
+
+type ErrorState = {
+  visible: boolean
+  title: string
+  description: string
+}
+
+interface NameWalletProps {
+  isRenaming?: boolean
+  onSubmitSuccess?: (name: string) => void
+  onCancel?: () => void
+}
+
+const NameWalletForm: React.FC<NameWalletProps> = ({ isRenaming, onSubmitSuccess, onCancel }) => {
+  const { t } = useTranslation()
+  const { ColorPallet, Assets, Spacing } = useTheme()
+  const [store, dispatch] = useStore()
+  const [loading, setLoading] = useState(false)
+  const [walletName, setWalletName] = useState(store.preferences.walletName ?? generateRandomWalletName())
+  const [errorState, setErrorState] = useState<ErrorState>({
+    visible: false,
+    title: '',
+    description: '',
+  })
+
+  const styles = StyleSheet.create({
+    screenContainer: {
+      flex: 1,
+      backgroundColor: ColorPallet.brand.primaryBackground,
+      padding: Spacing.md,
+      justifyContent: 'space-between',
+    },
+    contentContainer: {
+      justifyContent: 'center',
+      alignItems: 'center',
+      width: '100%',
+    },
+    controlsContainer: {},
+    buttonContainer: {
+      width: '100%',
+    },
+  })
+
+  const handleChangeText = (text: string) => {
+    setWalletName(text)
+  }
+
+  const handleContinuePressed = () => {
+    if (walletName.length < 1) {
+      setErrorState({
+        title: t('NameWallet.EmptyNameTitle'),
+        description: t('NameWallet.EmptyNameDescription'),
+        visible: true,
+      })
+    } else if (walletName.length > 50) {
+      setErrorState({
+        title: t('NameWallet.CharCountTitle'),
+        description: t('NameWallet.CharCountDescription'),
+        visible: true,
+      })
+    } else {
+      setLoading(true)
+      dispatch({
+        type: DispatchAction.UPDATE_WALLET_NAME,
+        payload: [walletName],
+      })
+      dispatch({ type: DispatchAction.DID_NAME_WALLET })
+      onSubmitSuccess?.(walletName)
+    }
+  }
+
+  const handleDismissError = () => {
+    setErrorState((prev) => ({ ...prev, visible: false }))
+  }
+
+  return (
+    <KeyboardView>
+      <View style={styles.screenContainer}>
+        <View style={styles.contentContainer}>
+          <Assets.svg.contactBook height={100} style={{ marginVertical: Spacing.md }} />
+          <ThemedText style={{ width: '100%', marginBottom: Spacing.md }}>{t('NameWallet.ThisIsTheName')}</ThemedText>
+          <View style={{ width: '100%' }}>
+            <LimitedTextInput
+              defaultValue={walletName}
+              label={t('NameWallet.NameYourWallet')}
+              limit={50}
+              handleChangeText={handleChangeText}
+              accessibilityLabel={t('NameWallet.NameYourWallet')}
+              testID={testIdWithKey('NameInput')}
+            />
+          </View>
+        </View>
+        <View style={styles.controlsContainer}>
+          <View style={styles.buttonContainer}>
+            <Button
+              title={isRenaming ? t('Global.Save') : t('Global.Continue')}
+              buttonType={ButtonType.Primary}
+              testID={isRenaming ? testIdWithKey('Save') : testIdWithKey('Continue')}
+              accessibilityLabel={isRenaming ? t('Global.Save') : t('Global.Continue')}
+              onPress={handleContinuePressed}
+              disabled={loading}
+            >
+              {loading && <ButtonLoading />}
+            </Button>
+            {isRenaming && (
+              <View style={{ marginTop: Spacing.sm }}>
+                <Button
+                  title={t('Global.Cancel')}
+                  buttonType={ButtonType.Secondary}
+                  testID={testIdWithKey('Cancel')}
+                  accessibilityLabel={t('Global.Cancel')}
+                  onPress={onCancel}
+                />
+              </View>
+            )}
+          </View>
+        </View>
+      </View>
+      {errorState.visible && (
+        <PopupModal
+          notificationType={InfoBoxType.Info}
+          onCallToActionLabel={t('Global.Okay')}
+          onCallToActionPressed={handleDismissError}
+          title={errorState.title}
+          description={errorState.description}
+        />
+      )}
+    </KeyboardView>
+  )
+}
+
+export default NameWalletForm

package/src/components/inputs/BiometryControl.tsx

@@ -57,18 +57,21 @@ const BiometryControl: React.FC<BiometryControlProps> = ({ biometryEnabled, onBi
     setSettingsPopupConfig(null)
   }
 
-  const onRequestSystemBiometrics = useCallback(async (newToggleValue: boolean) => {
-    const permissionResult: PermissionStatus = await request(BIOMETRY_PERMISSION)
-    switch (permissionResult) {
-      case RESULTS.GRANTED:
-      case RESULTS.LIMITED:
-        // Granted
-        onBiometryToggle(newToggleValue)
-        break
-      default:
-        break
-    }
-  }, [onBiometryToggle])
+  const onRequestSystemBiometrics = useCallback(
+    async (newToggleValue: boolean) => {
+      const permissionResult: PermissionStatus = await request(BIOMETRY_PERMISSION)
+      switch (permissionResult) {
+        case RESULTS.GRANTED:
+        case RESULTS.LIMITED:
+          // Granted
+          onBiometryToggle(newToggleValue)
+          break
+        default:
+          break
+      }
+    },
+    [onBiometryToggle]
+  )
 
   const onCheckSystemBiometrics = useCallback(async (): Promise<PermissionStatus> => {
     if (Platform.OS === 'android') {
@@ -173,4 +176,4 @@ const BiometryControl: React.FC<BiometryControlProps> = ({ biometryEnabled, onBi
   )
 }
 
-export default BiometryControl
+export default BiometryControl

package/src/components/misc/CredentialCard.tsx

@@ -13,7 +13,7 @@ import { GenericCredentialExchangeRecord } from '../../types/credentials'
 import { BrandingOverlay } from '@bifold/oca'
 import { useOpenIDCredentials } from '../../modules/openid/context/OpenIDCredentialRecordProvider'
 import { getCredentialForDisplay } from '../../modules/openid/display'
-import { getAttributeField } from '../../modules/openid/utils/utils'
+import { getAttributeField } from '../../utils/oca'
 
 interface CredentialCardProps {
   credential?: GenericCredentialExchangeRecord
@@ -70,7 +70,10 @@ const CredentialCard: React.FC<CredentialCardProps> = ({
       resolveOverlay(credential)
       const credentialDisplay = getCredentialForDisplay(credential)
       if (credentialDisplay.display.primary_overlay_attribute) {
-        const attributeValue = getAttributeField(credentialDisplay, credentialDisplay.display.primary_overlay_attribute)
+        const attributeValue = getAttributeField(
+          credentialDisplay,
+          credentialDisplay.display.primary_overlay_attribute
+        )?.field
         setExtraOverlayAttribute(attributeValue)
       }
     }

package/src/components/misc/FauxHeader.tsx

@@ -0,0 +1,75 @@
+import React from 'react'
+import { useTranslation } from 'react-i18next'
+import { Platform, StyleSheet, View } from 'react-native'
+
+import { useTheme } from '../../contexts/theme'
+import { testIdWithKey } from '../../utils/testable'
+import IconButton, { ButtonLocation } from '../buttons/IconButton'
+import { ThemedText } from '../texts/ThemedText'
+
+interface FauxHeaderProps {
+  title: string
+  onBackPressed: () => void
+}
+
+// Used for modals that we want to look like regular screens
+const FauxHeader: React.FC<FauxHeaderProps> = ({ title, onBackPressed }) => {
+  const { ColorPallet, Spacing, NavigationTheme } = useTheme()
+  const { t } = useTranslation()
+  const styles = StyleSheet.create({
+    header: {
+      backgroundColor: NavigationTheme.colors.primary,
+      elevation: 0,
+      shadowOffset: { width: 0, height: 6 },
+      shadowRadius: 6,
+      shadowColor: ColorPallet.grayscale.black,
+      shadowOpacity: 0.15,
+      zIndex: 2,
+      borderWidth: 0,
+      flexDirection: 'row',
+      alignItems: 'stretch',
+      minHeight: Platform.OS === 'ios' ? 44 : 56,
+    },
+    left: {
+      justifyContent: 'center',
+      alignItems: 'flex-start',
+    },
+    titleContainer: {
+      marginHorizontal: Spacing.md,
+      justifyContent: 'center',
+      alignItems: 'center',
+      flexShrink: 1,
+      maxWidth: '68%',
+      width: '100%',
+    },
+    title: {
+      textAlign: 'center',
+    },
+    right: {
+      justifyContent: 'center',
+      alignItems: 'flex-end',
+    },
+  })
+
+  return (
+    <View style={styles.header}>
+      <View style={styles.left}>
+        <IconButton
+          buttonLocation={ButtonLocation.Left}
+          accessibilityLabel={t('Global.Back')}
+          testID={testIdWithKey('BackButton')}
+          onPress={onBackPressed}
+          icon="chevron-left"
+        />
+      </View>
+      <View style={styles.titleContainer}>
+        <ThemedText variant={'headerTitle'} numberOfLines={1} ellipsizeMode="tail" style={styles.title}>
+          {title}
+        </ThemedText>
+      </View>
+      <View style={styles.right}></View>
+    </View>
+  )
+}
+
+export default FauxHeader

package/src/components/misc/QRScanner.tsx

@@ -73,7 +73,7 @@ const QRScanner: React.FC<Props> = ({
     },
     bottomSafeArea: {
       flex: 0,
-      backgroundColor: ColorPallet.brand.primaryBackground,
+      backgroundColor: TabTheme.tabBarSecondaryBackgroundColor,
     },
     cameraViewContainer: {
       flex: 1,
@@ -157,7 +157,7 @@ const QRScanner: React.FC<Props> = ({
   }, [agent])
 
   const handleEdit = useCallback(() => {
-    navigation.navigate(Screens.NameWallet)
+    navigation.navigate(Screens.RenameWallet)
   }, [navigation])
 
   useEffect(() => {

package/src/components/modals/DeveloperModal.tsx

@@ -0,0 +1,30 @@
+import React from 'react'
+import { useTranslation } from 'react-i18next'
+import { SafeAreaView } from 'react-native-safe-area-context'
+
+import { TOKENS, useServices } from '../../container-api'
+import FauxHeader from '../misc/FauxHeader'
+import SafeAreaModal from './SafeAreaModal'
+import { useTheme } from '../../contexts/theme'
+
+interface DeveloperModalProps {
+  onBackPressed: () => void
+}
+
+const DeveloperModal: React.FC<DeveloperModalProps> = ({ onBackPressed }) => {
+  const { NavigationTheme, ColorPallet } = useTheme()
+  const [Developer] = useServices([TOKENS.SCREEN_DEVELOPER])
+  const { t } = useTranslation()
+
+  return (
+    <SafeAreaModal>
+      <SafeAreaView edges={['left', 'right', 'top']} style={{ flex: 1, backgroundColor: NavigationTheme.colors.primary }}>
+        <FauxHeader title={t('Screens.Developer')} onBackPressed={onBackPressed} />
+        <Developer />
+      </SafeAreaView>
+      <SafeAreaView edges={['bottom']} style={{ backgroundColor: ColorPallet.brand.primaryBackground }} />
+    </SafeAreaModal>
+  )
+}
+
+export default DeveloperModal

package/src/components/views/PushNotificationsContent.tsx

@@ -15,24 +15,24 @@ const PushNotificationsContent: React.FC = () => {
   ]
 
   const style = StyleSheet.create({
-      image: {
-        height: 200,
-        marginBottom: 20,
-      },
-      heading: {
-        marginBottom: 20,
-      },
-      listItem: {
-        ...TextTheme.normal,
-        flex: 1,
-        paddingLeft: 5,
-      },
-    })
+    image: {
+      height: 200,
+      marginBottom: 20,
+    },
+    heading: {
+      marginBottom: 20,
+    },
+    listItem: {
+      ...TextTheme.normal,
+      flex: 1,
+      paddingLeft: 5,
+    },
+  })
 
   return (
     <>
       <View style={style.image}>
-          <Assets.svg.pushNotificationImg />
+        <Assets.svg.pushNotificationImg />
       </View>
       <ThemedText variant="headingThree" style={style.heading}>
         {t('PushNotifications.EnableNotifications')}
@@ -48,4 +48,4 @@ const PushNotificationsContent: React.FC = () => {
   )
 }
 
-export default PushNotificationsContent
+export default PushNotificationsContent

package/src/components/views/PushNotificationsDisabledContent.tsx

@@ -14,15 +14,15 @@ const PushNotificationsDisabledContent: React.FC = () => {
   ]
 
   const style = StyleSheet.create({
-      heading: {
-        marginBottom: 20,
-      },
-      listItem: {
-        ...TextTheme.normal,
-        flex: 1,
-        paddingLeft: 5,
-      },
-    })
+    heading: {
+      marginBottom: 20,
+    },
+    listItem: {
+      ...TextTheme.normal,
+      flex: 1,
+      paddingLeft: 5,
+    },
+  })
 
   return (
     <>
@@ -44,4 +44,4 @@ const PushNotificationsDisabledContent: React.FC = () => {
   )
 }
 
-export default PushNotificationsDisabledContent
+export default PushNotificationsDisabledContent

package/src/contexts/auth.tsx

@@ -2,7 +2,7 @@
 import '@hyperledger/aries-askar-react-native'
 
 import 'reflect-metadata'
-
+import { DeviceEventEmitter } from 'react-native'
 import { AskarWallet } from '@credo-ts/askar'
 import { Agent, ConsoleLogger, LogLevel, SigningProviderRegistry } from '@credo-ts/core'
 import { agentDependencies } from '@credo-ts/react-native'
@@ -22,6 +22,8 @@ import {
 import { WalletSecret } from '../types/security'
 import { hashPIN } from '../utils/crypto'
 import { migrateToAskar } from '../utils/migration'
+import { BifoldError } from '../types/error'
+import { EventTypes } from '../constants'
 
 export interface AuthContext {
   lockOutUser: () => void
@@ -33,6 +35,7 @@ export interface AuthContext {
   setPIN: (PIN: string) => Promise<void>
   commitWalletToKeychain: (useBiometry: boolean) => Promise<boolean>
   isBiometricsActive: () => Promise<boolean>
+  verifyPIN: (PIN: string) => Promise<boolean>
   rekeyWallet: (agent: Agent, oldPin: string, newPin: string, useBiometry?: boolean) => Promise<boolean>
 }
 
@@ -179,6 +182,34 @@ export const AuthProvider: React.FC<React.PropsWithChildren> = ({ children }) =>
     []
   )
 
+  const verifyPIN = useCallback(
+    async (PIN: string) => {
+      try {
+        const credentials = await getWalletSecret()
+        if (!credentials) {
+          throw new Error('Get wallet credentials error')
+        }
+
+        const key = await hashPIN(PIN, credentials.salt)
+        if (credentials.key !== key) {
+          return false
+        }
+
+        return true
+      } catch (err: unknown) {
+        const error = new BifoldError(
+          t('Error.Title1042'),
+          t('Error.Message1042'),
+          (err as Error)?.message ?? err,
+          1042
+        )
+        DeviceEventEmitter.emit(EventTypes.ERROR_ADDED, error)
+        return false
+      }
+    },
+    [getWalletSecret, t]
+  )
+
   return (
     <AuthContext.Provider
       value={{
@@ -192,6 +223,7 @@ export const AuthProvider: React.FC<React.PropsWithChildren> = ({ children }) =>
         isBiometricsActive,
         rekeyWallet,
         walletSecret,
+        verifyPIN,
       }}
     >
       {children}

package/src/hooks/chat-messages.tsx

@@ -153,7 +153,7 @@ export const useChatMessagesByConnection = (connection: ConnectionRecord): Exten
               [CredentialState.Done]: () => {
                 navigation.navigate(Stacks.ContactStack as any, {
                   screen: Screens.CredentialDetails,
-                  params: { credential: record },
+                  params: { credentialId: record.id },
                 })
               },
               [CredentialState.OfferReceived]: () => {

package/src/hooks/developer-mode.ts

@@ -0,0 +1,25 @@
+import { useCallback, useRef } from 'react'
+import { DispatchAction } from '../contexts/reducers/store'
+import { useStore } from '../contexts/store'
+
+const TOUCH_COUNT_TO_ENABLE_DEVELOPER_MODE = 10
+
+export const useDeveloperMode = (onDevModeTriggered?: () => void) => {
+  const developerOptionCount = useRef(0)
+  const [, dispatch] = useStore()
+
+  const incrementDeveloperMenuCounter = useCallback(() => {
+    if (developerOptionCount.current >= TOUCH_COUNT_TO_ENABLE_DEVELOPER_MODE) {
+      developerOptionCount.current = 0
+      dispatch({
+        type: DispatchAction.ENABLE_DEVELOPER_MODE,
+        payload: [true],
+      })
+      onDevModeTriggered?.()
+    } else {
+      developerOptionCount.current = developerOptionCount.current + 1
+    }
+  }, [dispatch, onDevModeTriggered])
+
+  return { incrementDeveloperMenuCounter }
+}

package/src/hooks/lockout.ts

@@ -0,0 +1,77 @@
+import { useCallback } from 'react'
+import { useNavigation, CommonActions } from '@react-navigation/native'
+import { useStore } from '../contexts/store'
+import { DispatchAction } from '../contexts/reducers/store'
+import { Screens } from '../types/navigators'
+import { TOKENS, useServices } from '../container-api'
+import { attemptLockoutConfig } from '../constants'
+
+export const useAttemptLockout = () => {
+  const [store, dispatch] = useStore()
+  const navigation = useNavigation()
+  // set the attempt lockout time
+  return useCallback(
+    async (penalty: number) => {
+      dispatch({
+        type: DispatchAction.ATTEMPT_UPDATED,
+        payload: [
+          {
+            loginAttempts: store.loginAttempt.loginAttempts + 1,
+            lockoutDate: Date.now() + penalty,
+            servedPenalty: false,
+          },
+        ],
+      })
+      navigation.dispatch(
+        CommonActions.reset({
+          index: 0,
+          routes: [{ name: Screens.AttemptLockout }],
+        })
+      )
+    },
+    [store, dispatch, navigation]
+  )
+}
+
+export const useGetLockoutPenalty = () => {
+  const [{ attemptLockoutConfig: { baseRules, thresholdRules } = attemptLockoutConfig }] = useServices([TOKENS.CONFIG])
+  return useCallback(
+    (attempts: number) => {
+      let penalty = baseRules[attempts]
+      if (!penalty && attempts >= thresholdRules.threshold && !(attempts % thresholdRules.increment)) {
+        penalty = thresholdRules.thresholdPenaltyDuration
+      }
+      return penalty
+    },
+    [baseRules, thresholdRules]
+  )
+}
+
+// This method is used to notify the app that the user is able to receive
+// another lockout penalty
+export const useUnMarkServedPenalty = () => {
+  const [store, dispatch] = useStore()
+  return useCallback(() => {
+    dispatch({
+      type: DispatchAction.ATTEMPT_UPDATED,
+      payload: [
+        {
+          loginAttempts: store.loginAttempt.loginAttempts,
+          lockoutDate: undefined,
+          servedPenalty: undefined,
+        },
+      ],
+    })
+  }, [dispatch, store.loginAttempt.loginAttempts])
+}
+
+export const useLockout = () => {
+  const getLockoutPenalty = useGetLockoutPenalty()
+  const attemptLockout = useAttemptLockout()
+  const unMarkServedPenalty = useUnMarkServedPenalty()
+  return {
+    getLockoutPenalty,
+    attemptLockout,
+    unMarkServedPenalty,
+  }
+}

package/src/hooks/onboarding.ts

@@ -0,0 +1,16 @@
+import { useCallback } from 'react'
+import { useNavigation } from '@react-navigation/core'
+import { useStore } from '../contexts/store'
+
+export const useGotoPostAuthScreens = () => {
+  const [store] = useStore()
+  const navigation = useNavigation()
+  return useCallback(() => {
+    if (store.onboarding.postAuthScreens.length) {
+      const screen = store.onboarding.postAuthScreens[0]
+      if (screen) {
+        navigation.navigate(screen as never)
+      }
+    }
+  }, [store.onboarding.postAuthScreens, navigation])
+}

package/src/hooks/usePINValidation.ts

@@ -28,7 +28,7 @@ export const usePINValidation = (PIN: string, PINTwo: string) => {
   const clearModal = useCallback(() => {
     setModalState(initialModalState)
   }, [])
-  
+
   const [PINValidations, setPINValidations] = useState<PINValidationsType[]>(
     createPINValidations(PIN, PINSecurity.rules)
   )
@@ -57,7 +57,7 @@ export const usePINValidation = (PIN: string, PINTwo: string) => {
           visible: true,
           title: title,
           message: message,
-          onModalDismiss: clearModal
+          onModalDismiss: clearModal,
         })
       }
     },
@@ -93,6 +93,6 @@ export const usePINValidation = (PIN: string, PINTwo: string) => {
     modalState,
     setModalState,
     clearModal,
-    PINSecurity
+    PINSecurity,
   }
 }

package/src/index.ts

@@ -42,6 +42,9 @@ import { useTour } from './contexts/tour/tour-context'
 import { TourProvider } from './contexts/tour/tour-provider'
 import AttemptLockout from './screens/AttemptLockout'
 import Developer from './screens/Developer'
+import DeveloperModal from './components/modals/DeveloperModal'
+import { useDeveloperMode } from './hooks/developer-mode'
+import FauxHeader from './components/misc/FauxHeader'
 import OnboardingPages from './screens/OnboardingPages'
 import Preface from './screens/Preface'
 import Splash from './screens/Splash'
@@ -107,6 +110,7 @@ export type {
   IInlineInputMessage,
   IInputs,
   ITextTheme,
+  ITabTheme,
   IBrandColors,
   ISemanticColors,
   INotificationColors,
@@ -193,6 +197,9 @@ export {
   usePreventScreenCapture,
   Splash,
   Developer,
+  DeveloperModal,
+  useDeveloperMode,
+  FauxHeader,
   Terms,
   Preface,
   UpdateAvailable,

package/src/localization/en/index.ts

@@ -48,6 +48,7 @@ const translation = {
     "Close": "Close",
     "Remove": "Remove",
     "GotIt": "Got it",
+    "Send": "Send",
   },
   "Date": {
     "ShortFormat": "MMM D",

package/src/localization/fr/index.ts

@@ -48,6 +48,7 @@ const translation = {
         "Remove": "Supprimer",
         "Close": "Fermer",
         "GotIt": "Got it (FR)",
+        "Send": "Envoyer",
     },
     "Date": {
         "ShortFormat": "D MMM",