@bifold/core 2.0.1 → 2.1.1

package/src/navigators/OnboardingStack.tsx

@@ -2,7 +2,7 @@
 import { Agent } from '@credo-ts/core'
 import { StackActions, useNavigation, useNavigationState } from '@react-navigation/native'
 import { StackNavigationProp, createStackNavigator } from '@react-navigation/stack'
-import React, { useMemo, useCallback, useEffect } from 'react'
+import React, { useCallback, useEffect, useMemo } from 'react'
 import { useTranslation } from 'react-i18next'
 import { DeviceEventEmitter } from 'react-native'
 
@@ -18,10 +18,10 @@ import { createCarouselStyle } from '../screens/OnboardingPages'
 import PINCreate from '../screens/PINCreate'
 import PINEnter from '../screens/PINEnter'
 import PushNotifications from '../screens/PushNotifications'
+import { Config } from '../types/config'
 import { OnboardingStackParams } from '../types/navigators'
 import { WalletSecret } from '../types/security'
 import { State } from '../types/state'
-import { Config } from '../types/config'
 
 import { useDefaultStackOptions } from './defaultStackOptions'
 import { getOnboardingScreens } from './OnboardingScreens'
@@ -44,7 +44,6 @@ const OnboardingStack: React.FC<OnboardingStackProps> = ({ initializeAgent, agen
     pages,
     Biometry,
     Onboarding,
-    Developer,
     { screen: Terms, version: termsVersion },
     onTutorialCompletedCurried,
     ScreenOptionsDictionary,
@@ -58,7 +57,6 @@ const OnboardingStack: React.FC<OnboardingStackProps> = ({ initializeAgent, agen
     TOKENS.SCREEN_ONBOARDING_PAGES,
     TOKENS.SCREEN_BIOMETRY,
     TOKENS.SCREEN_ONBOARDING,
-    TOKENS.SCREEN_DEVELOPER,
     TOKENS.SCREEN_TERMS,
     TOKENS.FN_ONBOARDING_DONE,
     TOKENS.OBJECT_SCREEN_CONFIG,
@@ -172,7 +170,6 @@ const OnboardingStack: React.FC<OnboardingStackProps> = ({ initializeAgent, agen
         NameWallet,
         Biometry,
         PushNotifications,
-        Developer,
         AttemptLockout,
         OnboardingScreen,
         CreatePINScreen,
@@ -181,7 +178,6 @@ const OnboardingStack: React.FC<OnboardingStackProps> = ({ initializeAgent, agen
     [
       SplashScreen,
       CreatePINScreen,
-      Developer,
       EnterPINScreen,
       OnboardingScreen,
       Preface,

package/src/navigators/RootStack.tsx

@@ -45,7 +45,7 @@ const RootStack: React.FC = () => {
   useEffect(() => {
     // Load state only if it hasn't been loaded yet
     if (store.stateLoaded) return
-    
+
     loadState(dispatch).catch((err: unknown) => {
       const error = new BifoldError(t('Error.Title1044'), t('Error.Message1044'), (err as Error).message, 1001)
 

package/src/navigators/SettingStack.tsx

@@ -6,7 +6,7 @@ import { useTheme } from '../contexts/theme'
 import HistorySettings from '../modules/history/ui/HistorySettings'
 import DataRetention from '../screens/DataRetention'
 import Language from '../screens/Language'
-import NameWallet from '../screens/NameWallet'
+import RenameWallet from '../screens/RenameWallet'
 import Onboarding from '../screens/Onboarding'
 import { createCarouselStyle } from '../screens/OnboardingPages'
 import PINChange from '../screens/PINChange'
@@ -47,12 +47,12 @@ const SettingStack: React.FC = () => {
         }}
       />
       <Stack.Screen
-        name={Screens.NameWallet}
-        component={NameWallet}
+        name={Screens.RenameWallet}
+        component={RenameWallet}
         options={{
           title: t('Screens.NameWallet'),
           headerBackTestID: testIdWithKey('Back'),
-          ...ScreenOptionsDictionary[Screens.NameWallet],
+          ...ScreenOptionsDictionary[Screens.RenameWallet],
         }}
       />
       <Stack.Screen

package/src/navigators/TabStack.tsx

@@ -61,7 +61,7 @@ const TabStack: React.FC = () => {
   const { t } = useTranslation()
   const Tab = createBottomTabNavigator<TabStackParams>()
   const { assertNetworkConnected } = useNetwork()
-  const { ColorPallet, TabTheme, TextTheme, Assets } = useTheme()
+  const { ColorPallet, TabTheme, TextTheme, Assets, NavigationTheme } = useTheme()
   const [orientation, setOrientation] = useState(OrientationType.PORTRAIT)
   const [store, dispatch] = useStore()
   const { agent } = useAgent()
@@ -133,7 +133,7 @@ const TabStack: React.FC = () => {
   }, [store.deepLink, agent, store.authentication.didAuthenticate, handleDeepLink])
 
   return (
-    <SafeAreaView style={{ flex: 1, backgroundColor: ColorPallet.brand.primary }}>
+    <SafeAreaView style={{ flex: 1, backgroundColor: NavigationTheme.colors.primary }} edges={['left', 'right', 'top']}>
       <Tab.Navigator
         initialRouteName={TabStacks.HomeStack}
         screenOptions={{
@@ -296,6 +296,7 @@ const TabStack: React.FC = () => {
           }}
         />
       </Tab.Navigator>
+      <SafeAreaView style={{ backgroundColor: TabTheme.tabBarSecondaryBackgroundColor }} edges={['bottom']} />
     </SafeAreaView>
   )
 }

package/src/navigators/defaultStackOptions.tsx

@@ -34,6 +34,10 @@ export const DefaultScreenOptionsDictionary: ScreenOptionsType = {
     headerTintColor: OnboardingTheme.headerTintColor,
     headerBackTestID: testIdWithKey('Back'),
   },
+  [Screens.RenameWallet]: {
+    headerTintColor: OnboardingTheme.headerTintColor,
+    headerBackTestID: testIdWithKey('Back'),
+  },
   [Screens.Biometry]: {
     headerTintColor: OnboardingTheme.headerTintColor,
     headerBackTestID: testIdWithKey('Back'),
@@ -62,6 +66,7 @@ export const DefaultScreenOptionsDictionary: ScreenOptionsType = {
   },
   [Screens.OpenIDProofPresentation]: {
     headerShown: true,
+    headerRight: () => false,
   },
 }
 

package/src/screens/Biometry.tsx

@@ -34,10 +34,7 @@ const Biometry: React.FC = () => {
   }, [])
 
   return (
-    <BiometryControl 
-      biometryEnabled={biometryEnabled} 
-      onBiometryToggle={handleBiometryToggle}
-    >
+    <BiometryControl biometryEnabled={biometryEnabled} onBiometryToggle={handleBiometryToggle}>
       <View style={{ marginTop: 'auto', margin: 20 }}>
         <Button
           title={t('Global.Continue')}

package/src/screens/NameWallet.tsx

@@ -1,159 +1,10 @@
-import { useAgent } from '@credo-ts/react-hooks'
-import { useNavigation } from '@react-navigation/native'
-import React, { useState } from 'react'
-import { useTranslation } from 'react-i18next'
-import { StyleSheet, View } from 'react-native'
+import React from 'react'
 
-import ButtonLoading from '../components/animated/ButtonLoading'
-import Button, { ButtonType } from '../components/buttons/Button'
-import LimitedTextInput from '../components/inputs/LimitedTextInput'
-import { InfoBoxType } from '../components/misc/InfoBox'
-import PopupModal from '../components/modals/PopupModal'
-import KeyboardView from '../components/views/KeyboardView'
-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 { ThemedText } from '../components/texts/ThemedText'
-
-type ErrorState = {
-  visible: boolean
-  title: string
-  description: string
-}
+import WalletNameForm from '../components/forms/WalletNameForm'
 
 const NameWallet: React.FC = () => {
-  const { t } = useTranslation()
-  const { ColorPallet, Assets } = useTheme()
-  const navigation = useNavigation()
-  const [store, dispatch] = useStore()
-  const { agent } = useAgent()
-  const [walletName, setWalletName] = useState(store.preferences.walletName ?? generateRandomWalletName())
-  const [loading, setLoading] = useState(false)
-  const didCompleteOnboarding = store.onboarding.didCompleteOnboarding
-
-  const [errorState, setErrorState] = useState<ErrorState>({
-    visible: false,
-    title: '',
-    description: '',
-  })
-
-  const styles = StyleSheet.create({
-    screenContainer: {
-      height: '100%',
-      backgroundColor: ColorPallet.brand.primaryBackground,
-      padding: 20,
-      justifyContent: 'space-between',
-    },
-
-    contentContainer: {
-      justifyContent: 'center',
-      alignItems: 'center',
-      width: '100%',
-    },
-    // below used as helpful label for view, no properties needed atp
-    controlsContainer: {},
-
-    buttonContainer: {
-      width: '100%',
-    },
-  })
-
-  const handleChangeText = (text: string) => {
-    setWalletName(text)
-  }
-
-  const handleCancelPressed = () => {
-    navigation.goBack()
-  }
-
-  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],
-      })
-
-      if (agent) {
-        agent.config.label = walletName
-      }
-
-      dispatch({ type: DispatchAction.DID_NAME_WALLET })
-    }
-  }
-
-  const handleDismissError = () => {
-    setErrorState((prev) => ({ ...prev, visible: false }))
-  }
-
   return (
-    <KeyboardView>
-      <View style={styles.screenContainer}>
-        <View style={styles.contentContainer}>
-          <Assets.svg.contactBook height={100} style={{ marginVertical: 20 }} />
-          <ThemedText style={{ width: '100%', marginBottom: 16 }}>{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={didCompleteOnboarding ? t('Global.Save') : t('Global.Continue')}
-              buttonType={ButtonType.Primary}
-              testID={didCompleteOnboarding ? testIdWithKey('Save') : testIdWithKey('Continue')}
-              accessibilityLabel={didCompleteOnboarding ? t('Global.Save') : t('Global.Continue')}
-              onPress={handleContinuePressed}
-              disabled={loading}
-            >
-              {loading && <ButtonLoading />}
-            </Button>
-            {didCompleteOnboarding && (
-              <View style={{ marginTop: 15 }}>
-                <Button
-                  title={t('Global.Cancel')}
-                  buttonType={ButtonType.Secondary}
-                  testID={testIdWithKey('Cancel')}
-                  accessibilityLabel={t('Global.Cancel')}
-                  onPress={handleCancelPressed}
-                />
-              </View>
-            )}
-          </View>
-        </View>
-      </View>
-      {errorState.visible && (
-        <PopupModal
-          notificationType={InfoBoxType.Info}
-          onCallToActionLabel={t('Global.Okay')}
-          onCallToActionPressed={handleDismissError}
-          title={errorState.title}
-          description={errorState.description}
-        />
-      )}
-    </KeyboardView>
+    <WalletNameForm />
   )
 }
 

package/src/screens/OnboardingPages.tsx

@@ -1,23 +1,18 @@
-import { useNavigation } from '@react-navigation/native'
-import { StackNavigationProp } from '@react-navigation/stack'
-import React, { useRef } from 'react'
+import React from 'react'
 import { useTranslation } from 'react-i18next'
-import { ScrollView, StyleSheet, View, TouchableWithoutFeedback } from 'react-native'
+import { ScrollView, StyleSheet, View } from 'react-native'
 import { SvgProps } from 'react-native-svg'
 
 import CredentialList from '../assets/img/credential-list.svg'
 import ScanShare from '../assets/img/scan-share.svg'
 import Button, { ButtonType } from '../components/buttons/Button'
-import { DispatchAction } from '../contexts/reducers/store'
-import { useStore } from '../contexts/store'
 import { GenericFn } from '../types/fn'
-import { OnboardingStackParams, Screens } from '../types/navigators'
 import { testIdWithKey } from '../utils/testable'
 
 import { useTheme } from '../contexts/theme'
 
-import { OnboardingStyleSheet } from './Onboarding'
 import { ThemedText } from '../components/texts/ThemedText'
+import { OnboardingStyleSheet } from './Onboarding'
 
 export const createCarouselStyle = (OnboardingTheme: any) => {
   return StyleSheet.create<OnboardingStyleSheet>({
@@ -136,32 +131,17 @@ const guides: Array<{ image: React.FC<SvgProps>; title: string; body: string; de
   },
 ]
 
-export const createPageWith = (
-  PageImage: React.FC<SvgProps>,
-  title: string,
-  body: string,
-  OnboardingTheme: any,
-  devModeListener?: boolean,
-  onDevModeTouched?: () => void
-) => {
+export const createPageWith = (PageImage: React.FC<SvgProps>, title: string, body: string, OnboardingTheme: any) => {
   const styles = createStyles(OnboardingTheme)
   const imageDisplayOptions = createImageDisplayOptions(OnboardingTheme)
-  const titleElement = (
-    <ThemedText style={styles.headerText} testID={testIdWithKey('HeaderText')}>
-      {title}
-    </ThemedText>
-  )
+
   return (
     <ScrollView style={{ padding: 20 }}>
       <View style={{ alignItems: 'center' }}>{<PageImage style={imageDisplayOptions} />}</View>
       <View style={{ marginBottom: 20 }}>
-        {devModeListener ? (
-          <TouchableWithoutFeedback testID={testIdWithKey('DeveloperModeTouch')} onPress={onDevModeTouched}>
-            {titleElement}
-          </TouchableWithoutFeedback>
-        ) : (
-          titleElement
-        )}
+        <ThemedText style={styles.headerText} testID={testIdWithKey('HeaderText')}>
+          {title}
+        </ThemedText>
         <ThemedText style={[styles.bodyText, { marginTop: 25 }]} testID={testIdWithKey('BodyText')}>
           {body}
         </ThemedText>
@@ -171,40 +151,8 @@ export const createPageWith = (
 }
 
 const OnboardingPages = (onTutorialCompleted: GenericFn, OnboardingTheme: any): Array<Element> => {
-  const navigation = useNavigation<StackNavigationProp<OnboardingStackParams>>()
-  const [, dispatch] = useStore()
-  const onDevModeEnabled = () => {
-    dispatch({
-      type: DispatchAction.ENABLE_DEVELOPER_MODE,
-      payload: [true],
-    })
-    navigation.getParent()?.navigate(Screens.Developer)
-  }
-  const developerOptionCount = useRef(0)
-  const touchCountToEnableBiometrics = 9
-
-  const incrementDeveloperMenuCounter = () => {
-    if (developerOptionCount.current >= touchCountToEnableBiometrics) {
-      developerOptionCount.current = 0
-      if (onDevModeEnabled) {
-        onDevModeEnabled()
-      }
-      return
-    }
-
-    developerOptionCount.current = developerOptionCount.current + 1
-  }
   return [
-    ...guides.map((g) =>
-      createPageWith(
-        g.image,
-        g.title,
-        g.body,
-        OnboardingTheme,
-        g.devModeListener,
-        g.devModeListener ? incrementDeveloperMenuCounter : undefined
-      )
-    ),
+    ...guides.map((g) => createPageWith(g.image, g.title, g.body, OnboardingTheme)),
     CustomPages(onTutorialCompleted, OnboardingTheme),
   ]
 }

package/src/screens/PINChange.tsx

@@ -25,6 +25,7 @@ import { useAnimatedComponents } from '../contexts/animated-components'
 import { useAuth } from '../contexts/auth'
 import { useStore } from '../contexts/store'
 import { useTheme } from '../contexts/theme'
+import usePreventScreenCapture from '../hooks/screen-capture'
 import { usePINValidation } from '../hooks/usePINValidation'
 import { HistoryCardType, HistoryRecord } from '../modules/history/types'
 import { BifoldError } from '../types/error'
@@ -55,6 +56,7 @@ const PINChange: React.FC<StackScreenProps<ParamListBase, Screens.ChangePIN>> =
     historyManagerCurried,
     historyEnabled,
     historyEventsLogger,
+    { preventScreenCapture },
   ] = useServices([
     TOKENS.COMPONENT_PIN_HEADER,
     TOKENS.COMP_BUTTON,
@@ -63,6 +65,7 @@ const PINChange: React.FC<StackScreenProps<ParamListBase, Screens.ChangePIN>> =
     TOKENS.FN_LOAD_HISTORY,
     TOKENS.HISTORY_ENABLED,
     TOKENS.HISTORY_EVENTS_LOGGER,
+    TOKENS.CONFIG,
   ])
 
   const {
@@ -75,6 +78,7 @@ const PINChange: React.FC<StackScreenProps<ParamListBase, Screens.ChangePIN>> =
     clearModal,
     PINSecurity,
   } = usePINValidation(PIN, PINTwo)
+  usePreventScreenCapture(preventScreenCapture)
 
   const style = StyleSheet.create({
     screenContainer: {
@@ -169,7 +173,6 @@ const PINChange: React.FC<StackScreenProps<ParamListBase, Screens.ChangePIN>> =
     return PIN === '' || PINTwo === '' || PINOld === '' || PIN.length < minPINLength || PINTwo.length < minPINLength
   }, [inlineMessages, isLoading, PIN, PINTwo, PINOld])
 
-
   return (
     <KeyboardView>
       <View style={style.screenContainer}>
@@ -218,15 +221,9 @@ const PINChange: React.FC<StackScreenProps<ParamListBase, Screens.ChangePIN>> =
             ref={PINTwoInputRef}
             inlineMessage={inlineMessageField2}
           />
-          {PINSecurity.displayHelper && (
-            <PINValidationHelper validations={PINValidations} />
-          )}
+          {PINSecurity.displayHelper && <PINValidationHelper validations={PINValidations} />}
           {modalState.visible && (
-            <AlertModal
-              title={modalState.title}
-              message={modalState.message}
-              submit={modalState.onModalDismiss}
-            />
+            <AlertModal title={modalState.title} message={modalState.message} submit={modalState.onModalDismiss} />
           )}
         </View>
         <View style={style.controlsContainer}>

package/src/screens/PINCreate.tsx

@@ -26,6 +26,7 @@ import { useAuth } from '../contexts/auth'
 import { DispatchAction } from '../contexts/reducers/store'
 import { useStore } from '../contexts/store'
 import { useTheme } from '../contexts/theme'
+import usePreventScreenCapture from '../hooks/screen-capture'
 import { usePINValidation } from '../hooks/usePINValidation'
 import { BifoldError } from '../types/error'
 import { Screens } from '../types/navigators'
@@ -48,7 +49,7 @@ const PINCreate: React.FC<PINCreateProps> = ({ setAuthenticated, explainedStatus
   const { ButtonLoading } = useAnimatedComponents()
   const PINTwoInputRef = useRef<TextInput>(null)
   const createPINButtonRef = useRef<TouchableOpacity>(null)
-  const [PINExplainer, PINHeader, { showPINExplainer }, Button, inlineMessages] = useServices([
+  const [PINExplainer, PINHeader, { showPINExplainer, preventScreenCapture }, Button, inlineMessages] = useServices([
     TOKENS.SCREEN_PIN_EXPLAINER,
     TOKENS.COMPONENT_PIN_HEADER,
     TOKENS.CONFIG,
@@ -57,15 +58,9 @@ const PINCreate: React.FC<PINCreateProps> = ({ setAuthenticated, explainedStatus
   ])
 
   const [explained, setExplained] = useState(explainedStatus || showPINExplainer === false)
-
-  const {
-    PINValidations,
-    validatePINEntry,
-    inlineMessageField1,
-    inlineMessageField2,
-    modalState,
-    PINSecurity
-  } = usePINValidation(PIN, PINTwo)
+  const { PINValidations, validatePINEntry, inlineMessageField1, inlineMessageField2, modalState, PINSecurity } =
+    usePINValidation(PIN, PINTwo)
+  usePreventScreenCapture(preventScreenCapture)
 
   const style = StyleSheet.create({
     screenContainer: {
@@ -162,15 +157,9 @@ const PINCreate: React.FC<PINCreateProps> = ({ setAuthenticated, explainedStatus
             ref={PINTwoInputRef}
             inlineMessage={inlineMessageField2}
           />
-          {PINSecurity.displayHelper && (
-            <PINValidationHelper validations={PINValidations} />
-          )}
+          {PINSecurity.displayHelper && <PINValidationHelper validations={PINValidations} />}
           {modalState.visible && (
-            <AlertModal
-              title={modalState.title}
-              message={modalState.message}
-              submit={modalState.onModalDismiss}
-            />
+            <AlertModal title={modalState.title} message={modalState.message} submit={modalState.onModalDismiss} />
           )}
         </View>
         <View style={style.controlsContainer}>