@bifold/core 2.4.5 → 2.5.0

package/src/screens/OnboardingPages.tsx

@@ -1,160 +0,0 @@
-import React from 'react'
-import { useTranslation } from 'react-i18next'
-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 { GenericFn } from '../types/fn'
-import { testIdWithKey } from '../utils/testable'
-
-import { useTheme } from '../contexts/theme'
-
-import { ThemedText } from '../components/texts/ThemedText'
-import { OnboardingStyleSheet } from './Onboarding'
-
-export const createCarouselStyle = (OnboardingTheme: any) => {
-  return StyleSheet.create<OnboardingStyleSheet>({
-    container: {
-      ...OnboardingTheme.container,
-      flex: 1,
-      alignItems: 'center',
-    },
-    carouselContainer: {
-      ...OnboardingTheme.carouselContainer,
-      flexDirection: 'column',
-    },
-    pagerContainer: {
-      flexShrink: 1,
-      flexDirection: 'row',
-      alignItems: 'center',
-      marginBottom: 30,
-    },
-    pagerDot: {
-      ...OnboardingTheme.pagerDot,
-      borderWidth: 1,
-      borderStyle: 'solid',
-    },
-    pagerDotActive: {
-      ...OnboardingTheme.pagerDotActive,
-    },
-    pagerDotInactive: {
-      ...OnboardingTheme.pagerDotInactive,
-    },
-    pagerPosition: {
-      position: 'relative',
-      top: 0,
-    },
-    pagerNavigationButton: {
-      ...OnboardingTheme.pagerNavigationButton,
-    },
-  })
-}
-
-export const createStyles = (OnboardingTheme: any) => {
-  return StyleSheet.create({
-    headerText: {
-      ...OnboardingTheme.headerText,
-    },
-    bodyText: {
-      ...OnboardingTheme.bodyText,
-      flexShrink: 1,
-    },
-    point: {
-      flexDirection: 'row',
-      alignItems: 'center',
-      marginLeft: 20,
-      marginTop: 10,
-      marginRight: 20,
-      marginBottom: 10,
-    },
-    icon: {
-      marginRight: 10,
-    },
-  })
-}
-
-const createImageDisplayOptions = (OnboardingTheme: any) => {
-  return {
-    ...OnboardingTheme.imageDisplayOptions,
-    height: 180,
-    width: 180,
-  }
-}
-
-const CustomPages = (onTutorialCompleted: GenericFn, OnboardingTheme: any) => {
-  const { Assets } = useTheme()
-  const { t } = useTranslation()
-  const styles = createStyles(OnboardingTheme)
-  const imageDisplayOptions = createImageDisplayOptions(OnboardingTheme)
-  return (
-    <>
-      <ScrollView style={{ padding: 20 }}>
-        <View style={{ alignItems: 'center' }}>
-          <Assets.svg.secureImage {...imageDisplayOptions} />
-        </View>
-        <View style={{ marginBottom: 20 }}>
-          <ThemedText style={styles.headerText} testID={testIdWithKey('HeaderText')}>
-            Ornare suspendisse sed nisi lacus
-          </ThemedText>
-          <ThemedText style={[styles.bodyText, { marginTop: 25 }]} testID={testIdWithKey('BodyText')}>
-            Enim facilisis gravida neque convallis a cras semper. Suscipit adipiscing bibendum est ultricies integer
-            quis auctor elit sed.
-          </ThemedText>
-        </View>
-      </ScrollView>
-      <View style={{ marginTop: 'auto', margin: 20 }}>
-        <Button
-          title={t('Global.GetStarted')}
-          accessibilityLabel={t('Global.GetStarted')}
-          testID={testIdWithKey('GetStarted')}
-          onPress={onTutorialCompleted}
-          buttonType={ButtonType.Primary}
-        />
-      </View>
-    </>
-  )
-}
-
-const guides: Array<{ image: React.FC<SvgProps>; title: string; body: string; devModeListener?: boolean }> = [
-  {
-    image: CredentialList,
-    title: 'Lorem ipsum dolor sit amet',
-    body: 'Ipsum faucibus vitae aliquet nec ullamcorper sit amet risus.',
-    devModeListener: true,
-  },
-  {
-    image: ScanShare,
-    title: 'Excepteur sint occaecat ',
-    body: 'Mollis aliquam ut porttitor leo a diam sollicitudin tempor.',
-  },
-]
-
-export const createPageWith = (PageImage: React.FC<SvgProps>, title: string, body: string, OnboardingTheme: any) => {
-  const styles = createStyles(OnboardingTheme)
-  const imageDisplayOptions = createImageDisplayOptions(OnboardingTheme)
-
-  return (
-    <ScrollView style={{ padding: 20 }}>
-      <View style={{ alignItems: 'center' }}>{<PageImage style={imageDisplayOptions} />}</View>
-      <View style={{ marginBottom: 20 }}>
-        <ThemedText style={styles.headerText} testID={testIdWithKey('HeaderText')}>
-          {title}
-        </ThemedText>
-        <ThemedText style={[styles.bodyText, { marginTop: 25 }]} testID={testIdWithKey('BodyText')}>
-          {body}
-        </ThemedText>
-      </View>
-    </ScrollView>
-  )
-}
-
-const OnboardingPages = (onTutorialCompleted: GenericFn, OnboardingTheme: any): Array<Element> => {
-  return [
-    ...guides.map((g) => createPageWith(g.image, g.title, g.body, OnboardingTheme)),
-    CustomPages(onTutorialCompleted, OnboardingTheme),
-  ]
-}
-
-export default OnboardingPages

package/src/screens/PINChange.tsx

@@ -1,249 +0,0 @@
-import { useNavigation } from '@react-navigation/native'
-import { StackNavigationProp, StackScreenProps } from '@react-navigation/stack'
-import React, { useCallback, useMemo, useRef, useState } from 'react'
-import { useTranslation } from 'react-i18next'
-import {
-  AccessibilityInfo,
-  DeviceEventEmitter,
-  findNodeHandle,
-  Keyboard,
-  StyleSheet,
-  TextInput,
-  TouchableOpacity,
-  View,
-} from 'react-native'
-
-import { ButtonType } from '../components/buttons/Button-api'
-import PINInput from '../components/inputs/PINInput'
-import PINValidationHelper from '../components/misc/PINValidationHelper'
-import AlertModal from '../components/modals/AlertModal'
-import KeyboardView from '../components/views/KeyboardView'
-import { EventTypes, minPINLength } from '../constants'
-import { TOKENS, useServices } from '../container-api'
-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'
-import { OnboardingStackParams, Screens, SettingStackParams } from '../types/navigators'
-import { useAppAgent } from '../utils/agent'
-import { testIdWithKey } from '../utils/testable'
-
-const PINChange: React.FC<StackScreenProps<SettingStackParams, Screens.ChangePIN>> = () => {
-  const { agent } = useAppAgent()
-  const { checkWalletPIN, rekeyWallet } = useAuth()
-  const [PIN, setPIN] = useState('')
-  const [PINTwo, setPINTwo] = useState('')
-  const [PINOld, setPINOld] = useState('')
-  const [isLoading, setIsLoading] = useState(false)
-  const navigation = useNavigation<StackNavigationProp<OnboardingStackParams>>()
-  const [store] = useStore()
-  const { t } = useTranslation()
-  const { ColorPalette } = useTheme()
-  const { ButtonLoading } = useAnimatedComponents()
-  const PINTwoInputRef = useRef<TextInput>(null)
-  const createPINButtonRef = useRef<TouchableOpacity>(null)
-
-  const [
-    PINHeader,
-    Button,
-    inlineMessages,
-    logger,
-    historyManagerCurried,
-    historyEnabled,
-    historyEventsLogger,
-    { preventScreenCapture },
-  ] = useServices([
-    TOKENS.COMPONENT_PIN_HEADER,
-    TOKENS.COMP_BUTTON,
-    TOKENS.INLINE_ERRORS,
-    TOKENS.UTIL_LOGGER,
-    TOKENS.FN_LOAD_HISTORY,
-    TOKENS.HISTORY_ENABLED,
-    TOKENS.HISTORY_EVENTS_LOGGER,
-    TOKENS.CONFIG,
-  ])
-
-  const {
-    PINValidations,
-    validatePINEntry,
-    inlineMessageField1,
-    inlineMessageField2,
-    modalState,
-    setModalState,
-    clearModal,
-    PINSecurity,
-  } = usePINValidation(PIN, PINTwo)
-  usePreventScreenCapture(preventScreenCapture)
-
-  const style = StyleSheet.create({
-    screenContainer: {
-      height: '100%',
-      backgroundColor: ColorPalette.brand.primaryBackground,
-      padding: 20,
-      justifyContent: 'space-between',
-    },
-
-    // below used as helpful labels for views, no properties needed atp
-    contentContainer: {},
-    controlsContainer: {},
-  })
-
-  const checkOldPIN = useCallback(
-    async (PIN: string): Promise<boolean> => {
-      const valid = await checkWalletPIN(PIN)
-      if (!valid) {
-        setModalState({
-          visible: true,
-          title: t('PINCreate.InvalidPIN'),
-          message: t(`PINCreate.Message.OldPINIncorrect`),
-          onModalDismiss: clearModal,
-        })
-      }
-      return valid
-    },
-    [checkWalletPIN, t, setModalState, clearModal]
-  )
-
-  const logHistoryRecord = useCallback(() => {
-    try {
-      if (!(agent && historyEnabled)) {
-        logger.trace(
-          `[${PINChange.name}]:[logHistoryRecord] Skipping history log, either history function disabled or agent undefined`
-        )
-        return
-      }
-      const historyManager = historyManagerCurried(agent)
-      /** Save history record for pin edited */
-      const recordData: HistoryRecord = {
-        type: HistoryCardType.PinChanged,
-        message: HistoryCardType.PinChanged,
-        createdAt: new Date(),
-      }
-
-      historyManager.saveHistory(recordData)
-    } catch (err: unknown) {
-      logger.error(`[${PINChange.name}]:[logHistoryRecord] Error saving history: ${err}`)
-    }
-  }, [agent, historyEnabled, logger, historyManagerCurried])
-
-  const handleChangePinTap = async () => {
-    try {
-      setIsLoading(true)
-      const valid = validatePINEntry(PIN, PINTwo)
-      if (valid) {
-        const oldPinValid = await checkOldPIN(PINOld)
-        if (oldPinValid) {
-          const success = await rekeyWallet(agent, PINOld, PIN, store.preferences.useBiometry)
-          if (success) {
-            if (historyEventsLogger.logPinChanged) {
-              logHistoryRecord()
-            }
-
-            setModalState({
-              visible: true,
-              title: t('PINChange.PinChangeSuccessTitle'),
-              message: t('PINChange.PinChangeSuccessMessage'),
-              onModalDismiss: () => {
-                navigation.navigate(Screens.Settings as never)
-                clearModal()
-              },
-            })
-          }
-        }
-      }
-    } catch (err: unknown) {
-      const error = new BifoldError(t('Error.Title1049'), t('Error.Message1049'), (err as Error)?.message ?? err, 1049)
-
-      DeviceEventEmitter.emit(EventTypes.ERROR_ADDED, error)
-    } finally {
-      setIsLoading(false)
-    }
-  }
-
-  const isContinueDisabled = useMemo((): boolean => {
-    if (inlineMessages || isLoading) {
-      return false
-    }
-
-    return PIN === '' || PINTwo === '' || PINOld === '' || PIN.length < minPINLength || PINTwo.length < minPINLength
-  }, [inlineMessages, isLoading, PIN, PINTwo, PINOld])
-
-  return (
-    <KeyboardView keyboardAvoiding={false}>
-      <View style={style.screenContainer}>
-        <View style={style.contentContainer}>
-          <PINHeader updatePin />
-          <PINInput
-            label={t('PINChange.EnterOldPINTitle')}
-            testID={testIdWithKey('EnterOldPIN')}
-            accessibilityLabel={t('PINChange.EnterOldPIN')}
-            onPINChanged={(p: string) => {
-              setPINOld(p)
-            }}
-            onSubmitEditing={handleChangePinTap}
-          />
-          <PINInput
-            label={t('PINChange.EnterPINTitle')}
-            onPINChanged={(p: string) => {
-              setPIN(p)
-              if (p.length === minPINLength && PINTwoInputRef?.current) {
-                PINTwoInputRef.current.focus()
-                const reactTag = findNodeHandle(PINTwoInputRef.current)
-                if (reactTag) {
-                  AccessibilityInfo.setAccessibilityFocus(reactTag)
-                }
-              }
-            }}
-            testID={testIdWithKey('EnterPIN')}
-            accessibilityLabel={t('PINCreate.EnterPIN')}
-            autoFocus={false}
-            inlineMessage={inlineMessageField1}
-            onSubmitEditing={handleChangePinTap}
-          />
-          <PINInput
-            label={t('PINChange.ReenterPIN')}
-            onPINChanged={(p: string) => {
-              setPINTwo(p)
-              if (p.length === minPINLength) {
-                Keyboard.dismiss()
-                const reactTag = createPINButtonRef?.current && findNodeHandle(createPINButtonRef.current)
-                if (reactTag) {
-                  AccessibilityInfo.setAccessibilityFocus(reactTag)
-                }
-              }
-            }}
-            testID={testIdWithKey('ReenterPIN')}
-            accessibilityLabel={t('PINChange.ReenterPIN')}
-            autoFocus={false}
-            ref={PINTwoInputRef}
-            inlineMessage={inlineMessageField2}
-            onSubmitEditing={handleChangePinTap}
-          />
-          {PINSecurity.displayHelper && <PINValidationHelper validations={PINValidations} />}
-          {modalState.visible && (
-            <AlertModal title={modalState.title} message={modalState.message} submit={modalState.onModalDismiss} />
-          )}
-        </View>
-        <View style={style.controlsContainer}>
-          <Button
-            title={t('PINChange.ChangePIN')}
-            testID={testIdWithKey('ChangePIN')}
-            accessibilityLabel={t('PINChange.ChangePIN')}
-            buttonType={ButtonType.Primary}
-            disabled={isContinueDisabled}
-            onPress={handleChangePinTap}
-            ref={createPINButtonRef}
-          >
-            {isLoading ? <ButtonLoading /> : null}
-          </Button>
-        </View>
-      </View>
-    </KeyboardView>
-  )
-}
-
-export default PINChange

package/src/screens/PINCreate.tsx

@@ -1,185 +0,0 @@
-import { ParamListBase } from '@react-navigation/native'
-import { StackScreenProps } from '@react-navigation/stack'
-import React, { useCallback, useMemo, useRef, useState } from 'react'
-import { useTranslation } from 'react-i18next'
-import {
-  AccessibilityInfo,
-  DeviceEventEmitter,
-  Keyboard,
-  StyleSheet,
-  TextInput,
-  TouchableOpacity,
-  View,
-  findNodeHandle,
-} from 'react-native'
-
-// eslint-disable-next-line import/no-named-as-default
-import { ButtonType } from '../components/buttons/Button-api'
-import PINInput from '../components/inputs/PINInput'
-import PINValidationHelper from '../components/misc/PINValidationHelper'
-import AlertModal from '../components/modals/AlertModal'
-import KeyboardView from '../components/views/KeyboardView'
-import { EventTypes, minPINLength } from '../constants'
-import { TOKENS, useServices } from '../container-api'
-import { useAnimatedComponents } from '../contexts/animated-components'
-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'
-import { testIdWithKey } from '../utils/testable'
-
-interface PINCreateProps extends StackScreenProps<ParamListBase, Screens.CreatePIN> {
-  setAuthenticated: (status: boolean) => void
-  explainedStatus: boolean
-}
-
-const PINCreate: React.FC<PINCreateProps> = ({ setAuthenticated, explainedStatus }) => {
-  const { setPIN: setWalletPIN } = useAuth()
-  const [PIN, setPIN] = useState('')
-  const [PINTwo, setPINTwo] = useState('')
-  const [isLoading, setIsLoading] = useState(false)
-  const [, dispatch] = useStore()
-  const { t } = useTranslation()
-
-  const { ColorPalette } = useTheme()
-  const { ButtonLoading } = useAnimatedComponents()
-  const PINTwoInputRef = useRef<TextInput>(null)
-  const createPINButtonRef = useRef<TouchableOpacity>(null)
-  const [PINExplainer, PINHeader, { showPINExplainer, preventScreenCapture }, Button, inlineMessages] = useServices([
-    TOKENS.SCREEN_PIN_EXPLAINER,
-    TOKENS.COMPONENT_PIN_HEADER,
-    TOKENS.CONFIG,
-    TOKENS.COMP_BUTTON,
-    TOKENS.INLINE_ERRORS,
-  ])
-
-  const [explained, setExplained] = useState(explainedStatus || showPINExplainer === false)
-  const { PINValidations, validatePINEntry, inlineMessageField1, inlineMessageField2, modalState, PINSecurity } =
-    usePINValidation(PIN, PINTwo)
-  usePreventScreenCapture(preventScreenCapture)
-
-  const style = StyleSheet.create({
-    screenContainer: {
-      height: '100%',
-      backgroundColor: ColorPalette.brand.primaryBackground,
-      padding: 20,
-      justifyContent: 'space-between',
-    },
-
-    // below used as helpful labels for views, no properties needed atp
-    contentContainer: {},
-    controlsContainer: {},
-  })
-
-  const passcodeCreate = useCallback(
-    async (PIN: string) => {
-      try {
-        await setWalletPIN(PIN)
-        setAuthenticated(true)
-        // this dispatch finishes this step of onboarding and will cause a navigation
-        dispatch({
-          type: DispatchAction.DID_CREATE_PIN,
-        })
-      } catch (err: unknown) {
-        const error = new BifoldError(
-          t('Error.Title1040'),
-          t('Error.Message1040'),
-          (err as Error)?.message ?? err,
-          1040
-        )
-
-        DeviceEventEmitter.emit(EventTypes.ERROR_ADDED, error)
-      }
-    },
-    [setWalletPIN, setAuthenticated, dispatch, t]
-  )
-
-  const handleCreatePinTap = useCallback(async () => {
-    setIsLoading(true)
-    if (validatePINEntry(PIN, PINTwo)) {
-      await passcodeCreate(PIN)
-    }
-    setIsLoading(false)
-  }, [PIN, PINTwo, passcodeCreate, validatePINEntry])
-
-  const isContinueDisabled = useMemo((): boolean => {
-    if (inlineMessages.enabled) {
-      return false
-    }
-    return isLoading || PIN.length < minPINLength || PINTwo.length < minPINLength
-  }, [isLoading, PIN, PINTwo, inlineMessages])
-
-  const continueCreatePIN = useCallback(() => {
-    setExplained(true)
-  }, [])
-
-  return explained ? (
-    <KeyboardView keyboardAvoiding={false}>
-      <View style={style.screenContainer}>
-        <View style={style.contentContainer}>
-          <PINHeader />
-          <PINInput
-            label={t('PINCreate.EnterPINTitle')}
-            onPINChanged={(p: string) => {
-              setPIN(p)
-              if (p.length === minPINLength && PINTwoInputRef?.current) {
-                PINTwoInputRef.current.focus()
-                const reactTag = findNodeHandle(PINTwoInputRef.current)
-                if (reactTag) {
-                  AccessibilityInfo.setAccessibilityFocus(reactTag)
-                }
-              }
-            }}
-            testID={testIdWithKey('EnterPIN')}
-            accessibilityLabel={t('PINCreate.EnterPIN')}
-            autoFocus={false}
-            inlineMessage={inlineMessageField1}
-          />
-          <PINInput
-            label={t('PINCreate.ReenterPIN')}
-            onPINChanged={(p: string) => {
-              setPINTwo(p)
-              if (p.length === minPINLength) {
-                Keyboard.dismiss()
-                const reactTag = createPINButtonRef?.current && findNodeHandle(createPINButtonRef.current)
-                if (reactTag) {
-                  AccessibilityInfo.setAccessibilityFocus(reactTag)
-                }
-              }
-            }}
-            testID={testIdWithKey('ReenterPIN')}
-            accessibilityLabel={t('PINCreate.ReenterPIN')}
-            autoFocus={false}
-            ref={PINTwoInputRef}
-            inlineMessage={inlineMessageField2}
-          />
-          {PINSecurity.displayHelper && <PINValidationHelper validations={PINValidations} />}
-          {modalState.visible && (
-            <AlertModal title={modalState.title} message={modalState.message} submit={modalState.onModalDismiss} />
-          )}
-        </View>
-        <View style={style.controlsContainer}>
-          <Button
-            title={t('PINCreate.CreatePIN')}
-            testID={testIdWithKey('CreatePIN')}
-            accessibilityLabel={t('PINCreate.CreatePIN')}
-            buttonType={ButtonType.Primary}
-            disabled={isContinueDisabled}
-            onPress={handleCreatePinTap}
-            ref={createPINButtonRef}
-          >
-            {isLoading ? <ButtonLoading /> : null}
-          </Button>
-        </View>
-      </View>
-    </KeyboardView>
-  ) : (
-    <PINExplainer continueCreatePIN={continueCreatePIN} />
-  )
-}
-
-export default PINCreate