@bifold/core 2.4.5 → 2.5.0

package/src/components/chat/ChatEvent.tsx

@@ -1,31 +0,0 @@
-import React from 'react'
-import { View } from 'react-native'
-
-import { useTheme } from '../../contexts/theme'
-import { Role } from '../../types/chat'
-import { ThemedText } from '../texts/ThemedText'
-
-interface ChatEventProps {
-  userLabel?: string
-  actionLabel?: string
-  role: Role
-}
-
-export const ChatEvent: React.FC<ChatEventProps> = ({ userLabel, actionLabel, role }) => {
-  const { ChatTheme } = useTheme()
-
-  return (
-    <View style={{ flexDirection: 'row', flexWrap: 'wrap' }}>
-      {userLabel && (
-        <ThemedText style={[role === Role.me ? ChatTheme.rightText : ChatTheme.leftText, { marginRight: 4 }]}>
-          {userLabel}
-        </ThemedText>
-      )}
-      {actionLabel && (
-        <ThemedText style={role === Role.me ? ChatTheme.rightTextHighlighted : ChatTheme.leftTextHighlighted}>
-          {actionLabel}
-        </ThemedText>
-      )}
-    </View>
-  )
-}

package/src/components/chat/ChatMessage.tsx

@@ -1,142 +0,0 @@
-import React, { useMemo } from 'react'
-import { useTranslation } from 'react-i18next'
-import { TouchableOpacity, View } from 'react-native'
-import { Bubble, IMessage, Message } from 'react-native-gifted-chat'
-
-import { hitSlop } from '../../constants'
-import { useTheme } from '../../contexts/theme'
-import { Role } from '../../types/chat'
-import { formatTime } from '../../utils/helpers'
-import { testIdWithKey } from '../../utils/testable'
-import { ThemedText } from '../texts/ThemedText'
-
-export enum CallbackType {
-  CredentialOffer = 'CredentialOffer',
-  ProofRequest = 'ProofRequest',
-  PresentationSent = 'PresentationSent',
-}
-
-export interface ChatMessageProps {
-  messageProps: React.ComponentProps<typeof Message>
-}
-
-export interface ExtendedChatMessage extends IMessage {
-  renderEvent: () => JSX.Element
-  createdAt: Date
-  messageOpensCallbackType?: CallbackType
-  onDetails?: () => void
-}
-
-const MessageTime: React.FC<{ message: ExtendedChatMessage }> = ({ message }) => {
-  const { ChatTheme: theme } = useTheme()
-
-  return (
-    <ThemedText style={message.user._id === Role.me ? theme.timeStyleRight : theme.timeStyleLeft}>
-      {formatTime(message.createdAt, { includeHour: true, chatFormat: true, trim: true })}
-    </ThemedText>
-  )
-}
-
-const MessageIcon: React.FC<{ type: CallbackType }> = ({ type }) => {
-  const { ChatTheme: theme, Assets } = useTheme()
-
-  return (
-    <View style={{ ...theme.documentIconContainer }}>
-      {type === CallbackType.CredentialOffer && <Assets.svg.iconCredentialOfferLight width={40} height={40} />}
-      {type === CallbackType.PresentationSent && <Assets.svg.iconInfoSentLight width={40} height={40} />}
-      {type === CallbackType.ProofRequest && <Assets.svg.iconProofRequestLight width={40} height={40} />}
-    </View>
-  )
-}
-
-export const ChatMessage: React.FC<ChatMessageProps> = ({ messageProps }) => {
-  const { t } = useTranslation()
-  const { ChatTheme: theme } = useTheme()
-  const message = useMemo(() => messageProps.currentMessage as ExtendedChatMessage, [messageProps])
-
-  const textForCallbackType = (callbackType: CallbackType) => {
-    // Receiving a credential offer
-    if (callbackType === CallbackType.CredentialOffer) {
-      return t('Chat.ViewOffer')
-    }
-
-    // Receiving a proof request
-    if (callbackType === CallbackType.ProofRequest) {
-      return t('Chat.ViewRequest')
-    }
-
-    // After a presentation of a proof
-    if (callbackType === CallbackType.PresentationSent) {
-      return t('Chat.OpenPresentation')
-    }
-
-    return t('Chat.OpenItem')
-  }
-
-  const testIdForCallbackType = (callbackType: CallbackType) => {
-    const text = textForCallbackType(callbackType)
-    const textWithoutSpaces = text.replace(/\s+/g, '')
-
-    return testIdWithKey(textWithoutSpaces)
-  }
-
-  return (
-    <View
-      style={{
-        flexDirection: 'row',
-        justifyContent: message.user._id === Role.me ? 'flex-end' : 'flex-start',
-      }}
-    >
-      <View
-        style={{
-          ...theme.containerStyle,
-        }}
-      >
-        <Bubble
-          {...messageProps}
-          key={messageProps.key}
-          renderUsernameOnMessage={false}
-          renderMessageText={() => message.renderEvent()}
-          containerStyle={{
-            left: {
-              margin: 0,
-            },
-            right: {
-              margin: 0,
-            },
-          }}
-          wrapperStyle={{
-            left: { ...theme.leftBubble, marginRight: 0, marginLeft: 0 },
-            right: { ...theme.rightBubble, marginLeft: 0, marginRight: 0 },
-          }}
-          textStyle={{
-            left: { ...theme.leftText },
-            right: { ...theme.rightText },
-          }}
-          renderTime={() => <MessageTime message={message} />}
-          renderCustomView={() =>
-            message.messageOpensCallbackType ? <MessageIcon type={message.messageOpensCallbackType} /> : null
-          }
-        />
-        {message.messageOpensCallbackType && (
-          <TouchableOpacity
-            accessibilityLabel={textForCallbackType(message.messageOpensCallbackType)}
-            accessibilityRole="button"
-            testID={testIdForCallbackType(message.messageOpensCallbackType)}
-            onPress={() => {
-              if (message.onDetails) message.onDetails()
-            }}
-            style={{
-              ...theme.openButtonStyle,
-            }}
-            hitSlop={hitSlop}
-          >
-            <ThemedText style={{ ...theme.openButtonTextStyle }}>
-              {textForCallbackType(message.messageOpensCallbackType)}
-            </ThemedText>
-          </TouchableOpacity>
-        )}
-      </View>
-    </View>
-  )
-}

package/src/components/chat/MessageInput.tsx

@@ -1,46 +0,0 @@
-import React from 'react'
-import { Composer, InputToolbar, Send } from 'react-native-gifted-chat'
-import Icon from 'react-native-vector-icons/MaterialCommunityIcons'
-
-export const renderInputToolbar = (props: any, theme: any) => (
-  <InputToolbar
-    {...props}
-    containerStyle={{
-      ...theme.inputToolbar,
-      justifyContent: 'center',
-      shadowOffset: {
-        width: 0,
-        height: 1,
-      },
-      shadowOpacity: 0.1,
-      shadowRadius: 5,
-      elevation: 2,
-    }}
-  />
-)
-
-export const renderComposer = (props: any, theme: any, placeholder: string) => (
-  <Composer
-    {...props}
-    textInputStyle={{
-      ...theme.inputText,
-    }}
-    placeholder={placeholder}
-    placeholderTextColor={theme.placeholderText}
-    // the placeholder is read by accessibility features when multiline is enabled so a label is not necessary (results in double announcing if used)
-    textInputProps={{ accessibilityLabel: '', maxFontSizeMultiplier: 1.2 }}
-  />
-)
-
-export const renderSend = (props: any, theme: any) => (
-  <Send
-    {...props}
-    alwaysShowSend={true}
-    disabled={!props.text}
-    containerStyle={{
-      ...theme.sendContainer,
-    }}
-  >
-    <Icon name="send" size={38} color={props.text ? theme.sendEnabled : theme.sendDisabled} />
-  </Send>
-)

package/src/components/chat/index.ts

@@ -1,4 +0,0 @@
-import { renderBubble } from './ChatBubble'
-import { renderSend, renderComposer, renderInputToolbar } from './MessageInput'
-
-export { renderBubble, renderSend, renderComposer, renderInputToolbar }

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