@bifold/core 2.4.6 → 2.6.0

package/src/components/forms/WalletNameForm.tsx

@@ -1,148 +0,0 @@
-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 { ColorPalette, 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: ColorPalette.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/index.ts

@@ -1,4 +0,0 @@
-import * as buttons from './buttons'
-import * as misc from './misc/index'
-
-export { misc, buttons }

package/src/components/inputs/BiometryControl.tsx

@@ -1,190 +0,0 @@
-import React, { useCallback, useEffect, useState } from 'react'
-import { useTranslation } from 'react-i18next'
-import { Linking, Platform, ScrollView, StyleSheet, View } from 'react-native'
-import { check, PERMISSIONS, PermissionStatus, request, RESULTS } from 'react-native-permissions'
-import { SafeAreaView } from 'react-native-safe-area-context'
-
-import ToggleButton from '../buttons/ToggleButton'
-import DismissiblePopupModal from '../modals/DismissiblePopupModal'
-import { ThemedText } from '../texts/ThemedText'
-import { useAuth } from '../../contexts/auth'
-import { useTheme } from '../../contexts/theme'
-import { testIdWithKey } from '../../utils/testable'
-import { getSupportedBiometryType, BIOMETRY_TYPE } from 'react-native-keychain'
-
-const BIOMETRY_PERMISSION = PERMISSIONS.IOS.FACE_ID
-
-export interface BiometryControlProps {
-  biometryEnabled: boolean
-  onBiometryToggle: (newValue: boolean) => void
-  children?: React.ReactNode
-}
-
-const BiometryControl: React.FC<BiometryControlProps> = ({ biometryEnabled, onBiometryToggle, children }) => {
-  const { t } = useTranslation()
-  const { isBiometricsActive } = useAuth()
-  const [biometryAvailable, setBiometryAvailable] = useState(false)
-  const [settingsPopupConfig, setSettingsPopupConfig] = useState<null | { title: string; description: string }>(null)
-  const { ColorPalette, Assets } = useTheme()
-
-  const styles = StyleSheet.create({
-    container: {
-      height: '100%',
-      padding: 20,
-      backgroundColor: ColorPalette.brand.primaryBackground,
-    },
-    image: {
-      minWidth: 200,
-      minHeight: 200,
-      marginBottom: 66,
-    },
-    biometryAvailableRowGap: {
-      rowGap: 20,
-    },
-  })
-
-  useEffect(() => {
-    isBiometricsActive().then((result: boolean) => {
-      setBiometryAvailable(result)
-    })
-  }, [isBiometricsActive])
-
-  const onOpenSettingsTouched = async () => {
-    await Linking.openSettings()
-    onOpenSettingsDismissed()
-  }
-
-  const onOpenSettingsDismissed = () => {
-    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 onCheckSystemBiometrics = useCallback(async (): Promise<PermissionStatus> => {
-    if (Platform.OS === 'android') {
-      // Android doesn't need to prompt biometric permission
-      // for an app to use it.
-      return biometryAvailable ? RESULTS.GRANTED : RESULTS.UNAVAILABLE
-    } else if (Platform.OS === 'ios') {
-      return await check(BIOMETRY_PERMISSION)
-    }
-
-    return RESULTS.UNAVAILABLE
-  }, [biometryAvailable])
-
-  const toggleSwitch = useCallback(async () => {
-    const newValue = !biometryEnabled
-
-    if (!newValue) {
-      // Turning off doesn't require OS biometrics enabled
-      onBiometryToggle(newValue)
-      return
-    }
-
-    // If the user is turning it on, they need
-    // to first authenticate the OS biometrics before this action is accepted
-    const permissionResult: PermissionStatus = await onCheckSystemBiometrics()
-    const supported_type = await getSupportedBiometryType()
-
-    switch (permissionResult) {
-      case RESULTS.GRANTED:
-      case RESULTS.LIMITED:
-        // Already granted
-        onBiometryToggle(newValue)
-        break
-      case RESULTS.UNAVAILABLE:
-        // Permission is unavailable/ not supported on this device
-        if (Platform.OS === 'ios' && supported_type === BIOMETRY_TYPE.TOUCH_ID) {
-          // if available, access to touch id can be granted without a request
-          onBiometryToggle(newValue)
-        } else {
-          // Not in iOS or no touch id available for iOS, send user to settings
-          // to enable biometrics
-          setSettingsPopupConfig({
-            title: t('Biometry.SetupBiometricsTitle'),
-            description: t('Biometry.SetupBiometricsDesc'),
-          })
-        }
-        break
-      case RESULTS.BLOCKED:
-        // Previously denied
-        setSettingsPopupConfig({
-          title: t('Biometry.AllowBiometricsTitle'),
-          description: t('Biometry.AllowBiometricsDesc'),
-        })
-        break
-      case RESULTS.DENIED:
-        // Has not been requested
-        await onRequestSystemBiometrics(newValue)
-        break
-      default:
-        break
-    }
-  }, [onRequestSystemBiometrics, onCheckSystemBiometrics, biometryEnabled, t, onBiometryToggle])
-
-  return (
-    <SafeAreaView edges={['left', 'right', 'bottom']}>
-      {settingsPopupConfig && (
-        <DismissiblePopupModal
-          title={settingsPopupConfig.title}
-          description={settingsPopupConfig.description}
-          onCallToActionLabel={t('Biometry.OpenSettings')}
-          onCallToActionPressed={onOpenSettingsTouched}
-          onDismissPressed={onOpenSettingsDismissed}
-        />
-      )}
-      <ScrollView style={styles.container}>
-        <View style={{ alignItems: 'center' }}>
-          <Assets.svg.biometrics style={styles.image} />
-        </View>
-        {biometryAvailable ? (
-          <View style={styles.biometryAvailableRowGap}>
-            <ThemedText>{t('Biometry.EnabledText1')}</ThemedText>
-            <ThemedText>
-              {t('Biometry.EnabledText2')}
-              <ThemedText variant="bold"> {t('Biometry.Warning')}</ThemedText>
-            </ThemedText>
-          </View>
-        ) : (
-          <View style={styles.biometryAvailableRowGap}>
-            <ThemedText>{t('Biometry.NotEnabledText1')}</ThemedText>
-            <ThemedText>{t('Biometry.NotEnabledText2')}</ThemedText>
-          </View>
-        )}
-        <View style={{ flexDirection: 'row', marginVertical: 20 }}>
-          <View style={{ flexShrink: 1, marginRight: 10, justifyContent: 'center' }}>
-            <ThemedText variant="bold">{t('Biometry.UseToUnlock')}</ThemedText>
-          </View>
-          <View style={{ justifyContent: 'center' }}>
-            <ToggleButton
-              testID={testIdWithKey('ToggleBiometrics')}
-              isEnabled={biometryEnabled}
-              isAvailable={true}
-              toggleAction={toggleSwitch}
-              disabled={false}
-              enabledIcon="check"
-              disabledIcon="close"
-            />
-          </View>
-        </View>
-      </ScrollView>
-      {children}
-    </SafeAreaView>
-  )
-}
-
-export default BiometryControl

package/src/components/inputs/BulletPoint.tsx

@@ -1,32 +0,0 @@
-import * as React from 'react'
-import { StyleSheet, View, StyleProp, TextStyle } from 'react-native'
-import Icon from 'react-native-vector-icons/MaterialIcons'
-
-import { useTheme } from '../../contexts/theme'
-import { ThemedText } from '../texts/ThemedText'
-
-interface BulletPointProps {
-  text: string
-  textStyle: StyleProp<TextStyle>
-}
-
-const BulletPoint: React.FC<BulletPointProps> = ({ text, textStyle }) => {
-  const { ColorPalette } = useTheme()
-  const styles = StyleSheet.create({
-    iconContainer: {
-      marginRight: 10,
-      marginVertical: 6,
-    },
-  })
-
-  return (
-    <View style={{ marginVertical: 10, flexDirection: 'row', alignItems: 'flex-start' }}>
-      <View style={styles.iconContainer}>
-        <Icon name={'circle'} size={9} color={ColorPalette.brand.modalIcon} />
-      </View>
-      <ThemedText style={[textStyle, { flexShrink: 1 }]}>{text}</ThemedText>
-    </View>
-  )
-}
-
-export default BulletPoint

package/src/components/inputs/CheckBoxRow.tsx

@@ -1,67 +0,0 @@
-import React from 'react'
-import { View, StyleSheet, TouchableOpacity, TextStyle } from 'react-native'
-import Icon from 'react-native-vector-icons/MaterialIcons'
-
-import { hitSlop } from '../../constants'
-import { useTheme } from '../../contexts/theme'
-import { ThemedText } from '../texts/ThemedText'
-
-interface Props {
-  title: string
-  titleStyle?: TextStyle
-  accessibilityLabel?: string
-  testID?: string
-  checked: boolean
-  onPress: () => void
-  reverse?: boolean
-}
-
-const CheckBoxRow: React.FC<Props> = ({
-  title,
-  titleStyle = {},
-  accessibilityLabel,
-  testID,
-  checked,
-  onPress,
-  reverse,
-}) => {
-  const { Inputs } = useTheme()
-  const style = StyleSheet.create({
-    container: {
-      flex: 1,
-      flexDirection: reverse ? 'row-reverse' : 'row',
-      alignItems: 'center',
-      margin: 10,
-    },
-    text: {
-      ...Inputs.checkBoxText,
-      flexShrink: 1,
-      marginLeft: reverse ? 0 : 10,
-      marginRight: reverse ? 10 : 0,
-    },
-  })
-  const accessible = accessibilityLabel && accessibilityLabel !== '' ? true : false
-
-  return (
-    <View style={style.container}>
-      <TouchableOpacity
-        accessible={accessible}
-        accessibilityLabel={accessibilityLabel}
-        accessibilityRole="checkbox"
-        accessibilityState={{ checked }}
-        testID={testID}
-        onPress={onPress}
-        hitSlop={hitSlop}
-      >
-        {checked ? (
-          <Icon name={'check-box'} size={36} color={Inputs.checkBoxColor.color} />
-        ) : (
-          <Icon name={'check-box-outline-blank'} size={36} color={Inputs.checkBoxColor.color} />
-        )}
-      </TouchableOpacity>
-      <ThemedText style={[style.text, titleStyle]}>{title}</ThemedText>
-    </View>
-  )
-}
-
-export default CheckBoxRow

package/src/components/inputs/InlineErrorText.tsx

@@ -1,60 +0,0 @@
-import React from 'react'
-import { View, StyleSheet } from 'react-native'
-
-import { useTheme } from '../../contexts/theme'
-import { SvgProps } from 'react-native-svg'
-import { InlineErrorConfig } from '../../types/error'
-import { testIdWithKey } from '../../utils/testable'
-import { ThemedText } from '../texts/ThemedText'
-
-export enum InlineErrorType {
-  error,
-  warning,
-}
-
-export interface InlineMessageProps {
-  message: string
-  inlineType: InlineErrorType
-  config: InlineErrorConfig
-}
-
-const InlineErrorText: React.FC<InlineMessageProps> = ({ message, inlineType, config }) => {
-  const { InputInlineMessage } = useTheme()
-  const style = StyleSheet.create({
-    container: {
-      flexDirection: 'row',
-      alignContent: 'center',
-      marginVertical: 5,
-      paddingRight: 20,
-    },
-    icon: { marginRight: 4 },
-  })
-
-  const color =
-    inlineType === InlineErrorType.warning
-      ? InputInlineMessage.inlineWarningText.color
-      : InputInlineMessage.inlineErrorText.color
-
-  const props: SvgProps = { height: 24, width: 24, color: color, style: style.icon }
-
-  const getInlineErrorIcon = () => {
-    if (!config.hasErrorIcon) return null
-
-    if (inlineType === InlineErrorType.warning) {
-      return <InputInlineMessage.InlineWarningIcon {...props} />
-    } else {
-      return <InputInlineMessage.InlineErrorIcon {...props} />
-    }
-  }
-
-  return (
-    <View style={[style.container, config.style]}>
-      {getInlineErrorIcon()}
-      <ThemedText style={[InputInlineMessage.inlineErrorText]} testID={testIdWithKey('InlineErrorText')}>
-        {message}
-      </ThemedText>
-    </View>
-  )
-}
-
-export default InlineErrorText

package/src/components/inputs/LimitedTextInput.tsx

@@ -1,71 +0,0 @@
-import React, { useEffect, useState } from 'react'
-import { View, StyleSheet, TextInput, TextInputProps } from 'react-native'
-
-import { useTheme } from '../../contexts/theme'
-import { ThemedText } from '../texts/ThemedText'
-
-interface LimitedTextInputProps extends TextInputProps {
-  showLimitCounter?: boolean
-  label: string
-  limit: number
-  handleChangeText: (text: string) => void
-}
-
-const LimitedTextInput: React.FC<LimitedTextInputProps> = ({
-  showLimitCounter = true,
-  label,
-  limit,
-  handleChangeText,
-  ...textInputProps
-}) => {
-  const [focused, setFocused] = useState(false)
-  const [characterCount, setCharacterCount] = useState(0)
-  const { Inputs, TextTheme, maxFontSizeMultiplier } = useTheme()
-  const styles = StyleSheet.create({
-    container: {
-      marginVertical: 10,
-      width: '100%',
-    },
-    textInput: {
-      ...Inputs.textInput,
-    },
-    limitCounter: {
-      color: TextTheme.normal.color,
-      alignSelf: 'flex-end',
-    },
-  })
-
-  useEffect(() => {
-    if (textInputProps.defaultValue?.length) {
-      setCharacterCount(textInputProps.defaultValue.length)
-    }
-  }, [textInputProps.defaultValue])
-
-  const onChangeText = (text: string) => {
-    setCharacterCount(text.length)
-    handleChangeText(text)
-  }
-
-  return (
-    <View style={styles.container}>
-      <ThemedText style={{ marginBottom: 5 }}>{label}</ThemedText>
-      <TextInput
-        maxLength={limit}
-        maxFontSizeMultiplier={maxFontSizeMultiplier}
-        style={[styles.textInput, focused && { ...Inputs.inputSelected }]}
-        selectionColor={Inputs.inputSelected.borderColor}
-        onFocus={() => setFocused(true)}
-        onBlur={() => setFocused(false)}
-        onChangeText={onChangeText}
-        {...textInputProps}
-      />
-      {showLimitCounter && (
-        <ThemedText style={styles.limitCounter}>
-          {characterCount}/{limit}
-        </ThemedText>
-      )}
-    </View>
-  )
-}
-
-export default LimitedTextInput