@bifold/core 2.4.3 → 2.4.4

package/src/components/misc/ErrorBoundary.tsx

@@ -0,0 +1,200 @@
+import React, { ReactNode } from 'react'
+import { StyleSheet, Text, useWindowDimensions, ScrollView, View, TouchableOpacity } from 'react-native'
+import { SafeAreaView } from 'react-native-safe-area-context'
+import { GenericFn } from 'types/fn'
+import { useTranslation } from 'react-i18next'
+import Button, { ButtonType } from '../buttons/Button'
+import Icon from 'react-native-vector-icons/MaterialIcons'
+import { getBuildNumber, getVersion } from 'react-native-device-info'
+import { testIdWithKey } from '../../utils/testable'
+import { BifoldError } from '../../types/error'
+import { BifoldLogger } from '../../services/logger'
+
+const iconSize = 30
+
+interface ErrorBoundaryProps {
+  children: ReactNode
+  styles: ReturnType<typeof StyleSheet.create>
+  t: (key: string) => string
+  logger: BifoldLogger
+}
+
+interface ErrorBoundaryState {
+  hasError: boolean
+  error: Error | null
+  reported: boolean
+}
+
+class ErrorBoundary extends React.Component<ErrorBoundaryProps, ErrorBoundaryState> {
+  state: ErrorBoundaryState = { hasError: false, error: null, reported: false }
+
+  static getDerivedStateFromError(error: Error): ErrorBoundaryState {
+    return { hasError: true, error, reported: false }
+  }
+
+  onDismissModalTouched = () => {
+    this.setState({ hasError: false, error: null, reported: false })
+  }
+
+  componentDidCatch(error: Error) {
+    const { logger } = this.props
+    logger.error('ErrorBoundary caught an error:', error)
+  }
+
+  reportError = (error: Error, logger: BifoldLogger) => {
+    if (error) {
+      this.setState({ reported: true })
+      logger.report(error as BifoldError)
+    }
+  }
+
+  render() {
+    const { hasError, error, reported } = this.state
+    const { t, styles, logger } = this.props
+
+    if (hasError && error) {
+      return (
+        <SafeAreaView style={[styles.container, { justifyContent: 'center', alignItems: 'center' }]}>
+          <ErrorBoundaryInfoBox
+            title={error.name}
+            description={error.message}
+            secondaryCallToActionTitle={reported ? t('Error.Reported') : t('Error.ReportThisProblem')}
+            secondaryCallToActionPressed={() => this.reportError(error, logger)}
+            secondaryCallToActionDisabled={reported}
+            onCallToActionPressed={this.onDismissModalTouched}
+            onCallToActionLabel={t('Global.Okay')}
+            showVersionFooter
+          />
+        </SafeAreaView>
+      )
+    }
+
+    return this.props.children
+  }
+}
+
+interface ErrorBoundaryInfoBoxProps {
+  title: string
+  description?: string
+  secondaryCallToActionTitle?: string
+  secondaryCallToActionPressed?: GenericFn
+  secondaryCallToActionDisabled?: boolean
+  onCallToActionPressed?: GenericFn
+  onCallToActionLabel?: string
+  showVersionFooter: boolean
+}
+
+const ErrorBoundaryInfoBox: React.FC<ErrorBoundaryInfoBoxProps> = ({
+  title,
+  description,
+  secondaryCallToActionTitle,
+  secondaryCallToActionPressed,
+  secondaryCallToActionDisabled,
+  onCallToActionPressed,
+  onCallToActionLabel,
+  showVersionFooter,
+}) => {
+  const { width } = useWindowDimensions()
+  const { t } = useTranslation()
+
+  const styles = StyleSheet.create({
+    container: {
+      backgroundColor: 'lightgrey',
+      borderColor: 'darkgrey',
+      borderRadius: 5,
+      borderWidth: 1,
+      padding: 10,
+      minWidth: width - 2 * 25,
+      height: 400,
+    },
+    headerContainer: {
+      flexDirection: 'row',
+      paddingHorizontal: 5,
+      paddingTop: 5,
+    },
+    bodyContainer: {
+      flexDirection: 'column',
+      marginLeft: 10,
+      paddingHorizontal: 5,
+      paddingBottom: 5,
+      flexGrow: 0,
+    },
+    headerText: {
+      marginLeft: 7,
+      flexShrink: 1,
+      alignSelf: 'center',
+      color: 'darkred',
+    },
+    bodyText: {
+      flexShrink: 1,
+      marginVertical: 16,
+      color: 'darkred',
+    },
+    showDetailsText: {
+      fontWeight: 'normal',
+      color: 'black',
+    },
+  })
+  return (
+    <View style={styles.container}>
+      <View style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
+        <View style={styles.headerContainer}>
+          <Icon name={'error'} size={iconSize} color={'darkred'} />
+          <Text style={styles.headerText}>{title}</Text>
+        </View>
+        <TouchableOpacity accessibilityLabel={'dismiss'} accessibilityRole={'button'} onPress={onCallToActionPressed}>
+          <Icon name={'close'} size={iconSize} color={'black'} />
+        </TouchableOpacity>
+      </View>
+      <View style={{ maxHeight: 150, marginBottom: 8 }}>
+        <ScrollView>
+          <Text style={styles.bodyText}>{description}</Text>
+        </ScrollView>
+      </View>
+      {onCallToActionLabel && (
+        <View style={{ marginBottom: 8 }}>
+          <Button buttonType={ButtonType.Critical} title={onCallToActionLabel} onPress={onCallToActionPressed} />
+        </View>
+      )}
+      {secondaryCallToActionTitle && (
+        <Button
+          buttonType={ButtonType.Critical}
+          title={secondaryCallToActionTitle}
+          onPress={secondaryCallToActionPressed}
+          disabled={secondaryCallToActionDisabled}
+        />
+      )}
+      {showVersionFooter ? (
+        <Text
+          style={{ flex: 1, marginTop: 8, textAlign: 'center', color: 'darkred' }}
+          testID={testIdWithKey('VersionNumber')}
+        >
+          {`${t('Settings.Version')} ${getVersion()} (${getBuildNumber()})`}
+        </Text>
+      ) : null}
+    </View>
+  )
+}
+
+interface ErrorBoundaryWrapperProps {
+  children: ReactNode
+  logger: BifoldLogger
+}
+
+const ErrorBoundaryWrapper: React.FC<ErrorBoundaryWrapperProps> = ({ children, logger }) => {
+  const { t } = useTranslation()
+  const styles = StyleSheet.create({
+    container: {
+      flex: 1,
+      padding: 20,
+    },
+  })
+
+  return (
+    <ErrorBoundary t={t} styles={styles} logger={logger}>
+      {children}
+    </ErrorBoundary>
+  )
+}
+
+export default ErrorBoundaryWrapper

package/src/container-impl.ts

@@ -44,6 +44,7 @@ import ToggleBiometry from './screens/ToggleBiometry'
 import UpdateAvailable from './screens/UpdateAvailable'
 import { loadLoginAttempt } from './services/keychain'
 import { BifoldLogger } from './services/logger'
+import { bifoldLoggerInstance } from './services/bifoldLogger'
 import { PersistentStorage } from './services/storage'
 import { Config, HistoryEventsLoggerConfig } from './types/config'
 import { InlineErrorPosition } from './types/error'
@@ -139,7 +140,7 @@ export class MainContainer implements Container {
     this._container.registerInstance(TOKENS.CRED_HELP_ACTION_OVERRIDES, [])
     this._container.registerInstance(TOKENS.OBJECT_SCREEN_CONFIG, DefaultScreenOptionsDictionary)
     this._container.registerInstance(TOKENS.OBJECT_LAYOUT_CONFIG, DefaultScreenLayoutOptions)
-    this._container.registerInstance(TOKENS.UTIL_LOGGER, new BifoldLogger())
+    this._container.registerInstance(TOKENS.UTIL_LOGGER, bifoldLoggerInstance)
     this._container.registerInstance(TOKENS.UTIL_OCA_RESOLVER, new DefaultOCABundleResolver(bundle))
     this._container.registerInstance(TOKENS.UTIL_LEDGERS, defaultIndyLedgers)
     this._container.registerInstance(TOKENS.UTIL_PROOF_TEMPLATE, getProofRequestTemplates)

package/src/index.ts

@@ -12,6 +12,7 @@ import BulletPoint from './components/inputs/BulletPoint'
 import CheckBoxRow from './components/inputs/CheckBoxRow'
 import ContentGradient from './components/misc/ContentGradient'
 import CredentialCard from './components/misc/CredentialCard'
+import ErrorBoundaryWrapper from './components/misc/ErrorBoundary'
 import InfoBox, { InfoBoxType } from './components/misc/InfoBox'
 import ErrorModal from './components/modals/ErrorModal'
 import SafeAreaModal from './components/modals/SafeAreaModal'
@@ -64,6 +65,8 @@ import useBifoldAgentSetup from './hooks/useBifoldAgentSetup'
 import usePreventScreenCapture from './hooks/screen-capture'
 import { DefaultScreenLayoutOptions } from './navigators/defaultLayoutOptions'
 import { DeepPartial, ThemeBuilder } from './theme-builder'
+import { BannerMessage } from './components/views/Banner'
+import { bifoldLoggerInstance } from './services/bifoldLogger'
 
 export * from './navigators'
 export * from './services/storage'
@@ -175,6 +178,8 @@ export {
   ButtonLocation,
   CheckBoxRow,
   CredentialCard,
+  ErrorBoundaryWrapper,
+  bifoldLoggerInstance,
   ContentGradient,
   ErrorModal,
   SafeAreaModal,
@@ -229,4 +234,4 @@ export {
   DefaultScreenLayoutOptions,
   ThemeBuilder,
 }
-export type { IButton, DeepPartial }
+export type { IButton, DeepPartial, BannerMessage }

package/src/services/bifoldLogger.ts

@@ -0,0 +1,3 @@
+import { BifoldLogger } from './logger'
+
+export const bifoldLoggerInstance = new BifoldLogger()

package/src/theme.ts

@@ -269,6 +269,7 @@ const BrandColors = {
   unorderedList: GrayscaleColors.white,
   unorderedListModal: GrayscaleColors.white,
   link: '#42803E',
+  credentialLink: '#42803E',
   text: GrayscaleColors.white,
   icon: GrayscaleColors.white,
   headerIcon: GrayscaleColors.white,
@@ -572,12 +573,12 @@ export function createButtonsTheme(theme: { ColorPalette: IColorPalette; TextThe
     critical: {
       padding: 16,
       borderRadius: 4,
-      backgroundColor: theme.ColorPalette.brand.primary,
+      backgroundColor: theme.ColorPalette.semantic.error,
     },
     criticalDisabled: {
       padding: 16,
       borderRadius: 4,
-      backgroundColor: theme.ColorPalette.brand.primaryDisabled,
+      backgroundColor: `rgba(216, 41, 47, ${lightOpacity})`,
     },
     primary: {
       padding: 16,