@bifold/core 2.1.0 → 2.1.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bifold/core",
-  "version": "2.1.0",
+  "version": "2.1.2",
   "main": "lib/commonjs/index.js",
   "module": "lib/module/index.js",
   "react-native": "src/index.ts",
@@ -33,8 +33,8 @@
   "devDependencies": {
     "@babel/core": "^7.20.0",
     "@babel/runtime": "^7.20.0",
-    "@bifold/oca": "2.1.0",
-    "@bifold/verifier": "2.1.0",
+    "@bifold/oca": "2.1.2",
+    "@bifold/verifier": "2.1.2",
     "@commitlint/cli": "^11.0.0",
     "@credo-ts/anoncreds": "0.5.13",
     "@credo-ts/askar": "0.5.13",

package/src/components/forms/WalletNameForm.tsx

@@ -0,0 +1,148 @@
+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 { ColorPallet, 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: ColorPallet.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/misc/QRScanner.tsx

@@ -157,7 +157,7 @@ const QRScanner: React.FC<Props> = ({
   }, [agent])
 
   const handleEdit = useCallback(() => {
-    navigation.navigate(Screens.NameWallet)
+    navigation.navigate(Screens.RenameWallet)
   }, [navigation])
 
   useEffect(() => {

package/src/navigators/ConnectStack.tsx

@@ -3,7 +3,7 @@ import React from 'react'
 import { useTranslation } from 'react-i18next'
 
 import { useTheme } from '../contexts/theme'
-import NameWallet from '../screens/NameWallet'
+import RenameWallet from '../screens/RenameWallet'
 import PasteUrl from '../screens/PasteUrl'
 import ScanHelp from '../screens/ScanHelp'
 import { ConnectStackParams, Screens } from '../types/navigators'
@@ -53,12 +53,12 @@ const ConnectStack: 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.Navigator>

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/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'),

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],
-      })
-      dispatch({ type: DispatchAction.DID_NAME_WALLET })
-
-      if (agent) {
-        agent.config.label = walletName
-        navigation.goBack()
-      }
-    }
-  }
-
-  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/PINEnter.tsx

@@ -1,6 +1,6 @@
 import React, { useCallback, useEffect, useMemo, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import { DeviceEventEmitter, InteractionManager, Keyboard, Pressable, StyleSheet, View } from 'react-native'
+import { DeviceEventEmitter, InteractionManager, Keyboard, Pressable, StyleSheet, Vibration, View } from 'react-native'
 
 import Button, { ButtonType } from '../components/buttons/Button'
 import { InlineErrorType, InlineMessageProps } from '../components/inputs/InlineErrorText'
@@ -41,14 +41,23 @@ const PINEnter: React.FC<PINEnterProps> = ({ setAuthenticated }) => {
   const [biometricsEnrollmentChange, setBiometricsEnrollmentChange] = useState(false)
   const { ColorPallet } = useTheme()
   const { ButtonLoading } = useAnimatedComponents()
-  const [logger, { preventScreenCapture, enableHiddenDevModeTrigger, attemptLockoutConfig: { thresholdRules } = attemptLockoutConfig }] =
-    useServices([TOKENS.UTIL_LOGGER, TOKENS.CONFIG])
+  const [
+    logger,
+    {
+      preventScreenCapture,
+      enableHiddenDevModeTrigger,
+      attemptLockoutConfig: { thresholdRules } = attemptLockoutConfig,
+    },
+  ] = useServices([TOKENS.UTIL_LOGGER, TOKENS.CONFIG])
   const [inlineMessageField, setInlineMessageField] = useState<InlineMessageProps>()
   const [inlineMessages] = useServices([TOKENS.INLINE_ERRORS])
   const [alertModalMessage, setAlertModalMessage] = useState('')
   const { getLockoutPenalty, attemptLockout, unMarkServedPenalty } = useLockout()
   const onBackPressed = () => setDevModalVisible(false)
-  const onDevModeTriggered = () => setDevModalVisible(true)
+  const onDevModeTriggered = () => {
+    Vibration.vibrate()
+    setDevModalVisible(true)
+  }
   const { incrementDeveloperMenuCounter } = useDeveloperMode(onDevModeTriggered)
   const gotoPostAuthScreens = useGotoPostAuthScreens()
   const isContinueDisabled = inlineMessages.enabled ? !continueEnabled : !continueEnabled || PIN.length < minPINLength

package/src/screens/ProofRequest.tsx

@@ -652,9 +652,9 @@ const ProofRequest: React.FC<ProofRequestProps> = ({ navigation, proofId }) => {
 
   const proofPageHeader = () => {
     return (
-      <View style={styles.pageMargin}>
+      <>
         {attestationLoading && (
-          <View style={{ paddingTop: 20 }}>
+          <View style={{ padding: 20 }}>
             <InfoTextBox>{t('ProofRequest.JustAMoment')}</InfoTextBox>
           </View>
         )}
@@ -669,7 +669,7 @@ const ProofRequest: React.FC<ProofRequestProps> = ({ navigation, proofId }) => {
             testID={testIdWithKey('ProofRequestLoading')}
           />
         ) : (
-          <>
+          <View style={styles.pageMargin}>
             <ConnectionImage connectionId={proof?.connectionId} />
             <View style={styles.headerTextContainer}>
               <ThemedText style={styles.headerText} testID={testIdWithKey('HeaderText')}>
@@ -708,9 +708,9 @@ const ProofRequest: React.FC<ProofRequestProps> = ({ navigation, proofId }) => {
                 </InfoTextBox>
               )}
             </View>
-          </>
+          </View>
         )}
-      </View>
+      </>
     )
   }
 
@@ -718,16 +718,16 @@ const ProofRequest: React.FC<ProofRequestProps> = ({ navigation, proofId }) => {
     let finalMessage = `${t('ProofRequest.YouCantRespondReasons')}\n`
 
     if (shareDisabledErrors.hasCredentialError) {
-      finalMessage += `\n \u2B24 ${t('ProofRequest.CredentialIsMissing')}`
+      finalMessage += `\n \u2022 ${t('ProofRequest.CredentialIsMissing')}`
     }
     if (shareDisabledErrors.hasSatisfiedPredicateError) {
-      finalMessage += `\n \u2B24 ${t('ProofRequest.ProofRequestPredicateError')}`
+      finalMessage += `\n \u2022 ${t('ProofRequest.ProofRequestPredicateError')}`
     }
     if (shareDisabledErrors.hasRevokedOffense) {
-      finalMessage += `\n \u2B24 ${t('ProofRequest.CredentialForProofIsRevoked')}`
+      finalMessage += `\n \u2022 ${t('ProofRequest.CredentialForProofIsRevoked')}`
     }
     if (shareDisabledErrors.hasProofStateReceivedError) {
-      finalMessage += `\n \u2B24 ${t('ProofRequest.ProofRequestStateError', { state: proof?.state })}`
+      finalMessage += `\n \u2022 ${t('ProofRequest.ProofRequestStateError', { state: proof?.state })}`
     }
 
     finalMessage += `\n\n${t('ProofRequest.PleaseAddress')}`

package/src/screens/RenameWallet.tsx

@@ -0,0 +1,25 @@
+import { useAgent } from '@credo-ts/react-hooks'
+import { useNavigation } from '@react-navigation/native'
+import React, { useCallback } from 'react'
+
+import WalletNameForm from '../components/forms/WalletNameForm'
+
+const RenameWallet: React.FC = () => {
+  const navigation = useNavigation()
+  const { agent } = useAgent()
+
+  const onCancel = useCallback(() => {
+    navigation.goBack()
+  }, [navigation])
+
+  const onSubmitSuccess = useCallback((name: string) => {
+    agent.config.label = name
+    navigation.goBack()
+  }, [navigation, agent])
+
+  return (
+    <WalletNameForm isRenaming onCancel={onCancel} onSubmitSuccess={onSubmitSuccess} />
+  )
+}
+
+export default RenameWallet

package/src/screens/Settings.tsx

@@ -8,6 +8,7 @@ import {
   TouchableOpacity,
   TouchableWithoutFeedback,
   useWindowDimensions,
+  Vibration,
   View,
 } from 'react-native'
 import { getBuildNumber, getVersion } from 'react-native-device-info'
@@ -32,7 +33,10 @@ type SettingsProps = StackScreenProps<SettingStackParams>
 const Settings: React.FC<SettingsProps> = ({ navigation }) => {
   const { t, i18n } = useTranslation()
   const [store] = useStore()
-  const onDevModeTriggered = () => navigation.navigate(Screens.Developer)
+  const onDevModeTriggered = () => {
+    Vibration.vibrate()
+    navigation.navigate(Screens.Developer)
+  }
   const { incrementDeveloperMenuCounter } = useDeveloperMode(onDevModeTriggered)
   const { SettingsTheme, TextTheme, ColorPallet, Assets, maxFontSizeMultiplier } = useTheme()
   const [{ settings, enableTours, enablePushNotifications, disableContactsInSettings }, historyEnabled] = useServices([
@@ -90,7 +94,7 @@ const Settings: React.FC<SettingsProps> = ({ navigation }) => {
         iconRight: {
           name: 'edit',
           action: () => {
-            navigation.navigate(Screens.NameWallet)
+            navigation.navigate(Screens.RenameWallet)
           },
           accessibilityLabel: t('NameWallet.EditWalletName'),
           testID: testIdWithKey('EditWalletName'),

package/src/types/navigators.ts

@@ -49,6 +49,7 @@ export enum Screens {
   ProofRequesting = 'Proof Requesting',
   ProofDetails = 'Proof Details',
   NameWallet = 'Name Wallet',
+  RenameWallet = 'Rename Wallet',
   RenameContact = 'Rename Contact',
   ScanHelp = 'Scan Help',
   HistorySettings = 'History Settings',
@@ -148,13 +149,13 @@ export type HomeStackParams = {
 
 export type ConnectStackParams = {
   [Screens.Scan]: undefined
-  [Screens.NameWallet]: undefined
+  [Screens.RenameWallet]: undefined
   [Screens.ScanHelp]: undefined
   [Screens.PasteUrl]: undefined
 }
 
 export type SettingStackParams = {
-  [Screens.NameWallet]: undefined
+  [Screens.RenameWallet]: undefined
   [Screens.Settings]: undefined
   [Screens.Language]: undefined
   [Screens.DataRetention]: undefined