@bifold/core 2.1.7 → 2.1.9

package/src/components/inputs/PINInput.tsx

@@ -11,7 +11,6 @@ import InlineErrorText, { InlineMessageProps } from './InlineErrorText'
 import { InlineErrorPosition } from '../../types/error'
 import { ThemedText } from '../texts/ThemedText'
 
-
 // adjusting for the spaces between numbers
 const cellCount = minPINLength * 2 - 1
 
@@ -33,7 +32,7 @@ const PINInputComponent = (
   const { t } = useTranslation()
   const { PINInputTheme } = useTheme()
   const cellHeight = 48
-  
+
   // including spaces to prevent screen reader from reading the PIN as a single number
   // filling with bullets when masked to prevent screen reader from reading the actual PIN
   // and to have the proper appearance when the PIN is masked
@@ -44,7 +43,7 @@ const PINInputComponent = (
       return '●'.repeat(PIN.length).split('').join(' ')
     }
   }, [PIN, showPIN])
-  
+
   const onChangeText = (value: string) => {
     const cleanValue = value.replaceAll(' ', '')
     // typed new characters
@@ -54,7 +53,7 @@ const PINInputComponent = (
       const newPIN = PIN + newChars.replace(/●/g, '')
       setPIN(newPIN)
       onPINChanged && onPINChanged(newPIN)
-    // characters were removed
+      // characters were removed
     } else if (cleanValue.length < displayValue.replaceAll(' ', '').length) {
       // remove same number of characters from actual PIN
       const newPIN = PIN.slice(0, cleanValue.length)
@@ -62,7 +61,7 @@ const PINInputComponent = (
       onPINChanged && onPINChanged(newPIN)
     }
   }
-  
+
   const [props, getCellOnLayoutHandler] = useClearByFocusCell({
     value: displayValue,
     setValue: onChangeText,

package/src/localization/en/en.json

@@ -470,7 +470,8 @@
     "GoToCredentialDetail": "Go to credential details",
     "CredentialName": "Credential name",
     "Credentials": "My credentials from this contact",
-    "NoCredentials": "You don't have any credentials from this contact."
+    "NoCredentials": "You don't have any credentials from this contact.",
+    "JSONDetails": "View JSON details"
   },
   "WhatAreContacts": {
     "Title": "What are Contacts?",
@@ -487,6 +488,7 @@
     "CredentialDetails": "Credential Details",
     "EmptyList": "Your wallet is empty. Your accepted credentials will be added here.",
     "IssuedBy": "Issued by",
+    "Issued": "Issued",
     "Credential": "credential"
   },
   "PushNotifications": {
@@ -770,6 +772,12 @@
   "QRRender": {
     "GenerationError": "Unable to generate QR code"
   },
+  "JSONDetails": {
+    "Share": "Share JSON",
+    "Copy": "Copy contents",
+    "CopiedSuccess": "Copied to clipboard",
+    "CopiedError": "Unable to copy to clipboard"
+  },
   "Record": {
     "Hide": "Hide",
     "Show": "Show",
@@ -826,7 +834,8 @@
     "HistorySettings": "History Settings",
     "History": "History",
     "HistoryDetails": "History Details",
-    "UpdateAvailable": "Update Available"
+    "UpdateAvailable": "Update Available",
+    "JSONDetails": "JSON details"
   },
   "Loading": {
     "TakingTooLong": "This is taking longer than usual. You can return to home or continue waiting.",

package/src/localization/fr/fr.json

@@ -474,7 +474,8 @@
     "GoToCredentialDetail": "Aller au détail de l'attestation",
     "CredentialName": "Nom du justificatif",
     "Credentials": "Mes justificatifs avec ce contact",
-    "NoCredentials": "Vous n'avez aucun justificatif de ce contact."
+    "NoCredentials": "Vous n'avez aucun justificatif de ce contact.",
+    "JSONDetails": "View JSON details (FR)"
   },
   "WhatAreContacts": {
     "Title": "Que sont les Contacts?",
@@ -491,6 +492,7 @@
     "CredentialDetails": "Détails des attestations",
     "EmptyList": "Votre portefeuille est vide. Vos attestations acceptés seront ajoutés ici.",
     "IssuedBy": "Émis par",
+    "Issued": "Issued (FR)",
     "Credential": "attestation"
   },
   "PushNotifications": {
@@ -757,6 +759,12 @@
   "QRRender": {
     "GenerationError": "Impossible de générer le code QR"
   },
+  "JSONDetails": {
+    "Share": "Share JSON (FR)",
+    "Copy": "Copy contents (FR)",
+    "CopiedSuccess": "Copied to clipboard (FR)",
+    "CopiedError": "Unable to copy to clipboard (FR)"
+  },
   "Record": {
     "Hide": "Masquer",
     "Show": "Afficher",
@@ -812,7 +820,8 @@
     "HistorySettings": "History Settings FR)",
     "History": "History (FR)",
     "HistoryDetails": "History Details (FR)",
-    "UpdateAvailable": "Update Available (FR)"
+    "UpdateAvailable": "Update Available (FR)",
+    "JSONDetails": "JSON details (FR)"
   },
   "Loading": {
     "TakingTooLong": "Cela prend plus de temps que d'habitude. Vous pouvez retourner à l'accueil ou continuer à attendre.",

package/src/localization/pt-br/pt-br.json

@@ -454,7 +454,8 @@
     "GoToCredentialDetail": "Ir para os detalhes da credencial",
     "CredentialName": "Nome da credencial",
     "Credentials": "Minhas credenciais",
-    "NoCredentials": "Você não tem nenhuma credencial com esse Contato."
+    "NoCredentials": "Você não tem nenhuma credencial com esse Contato.",
+    "JSONDetails": "View JSON details (PT-BR)"
   },
   "WhatAreContacts": {
     "Title": "O que são Contatos?",
@@ -471,6 +472,7 @@
     "CredentialDetails": "Detalhes da Credencial",
     "EmptyList": "Sua carteira está vazia. Suas credenciais aceitas serão adicionadas aqui.",
     "IssuedBy": "Emitida por",
+    "Issued": "Issued (PT-BR)",
     "Credential": "credencial"
   },
   "PushNotifications": {
@@ -743,6 +745,12 @@
   "QRRender": {
     "GenerationError": "Não foi possível gerar o código QR"
   },
+  "JSONDetails": {
+    "Share": "Share JSON (PT-BR)",
+    "Copy": "Copy contents (PT-BR)",
+    "CopiedSuccess": "Copied to clipboard (PT-BR)",
+    "CopiedError": "Unable to copy to clipboard (PT-BR)"
+  },
   "Record": {
     "Hide": "Esconder",
     "Show": "Mostrar",
@@ -790,7 +798,8 @@
     "HistorySettings": "History Settings (PT-BR)",
     "History": "History (PT-BR)",
     "HistoryDetails": "History Details (PT-BR)",
-    "UpdateAvailable": "Update Available (PT-BR)"
+    "UpdateAvailable": "Update Available (PT-BR)",
+    "JSONDetails": "JSON details (PT-BR)"
   },
   "Loading": {
     "TakingTooLong": "Isso esta demorando mais que o normal. Você pode voltar para a home ou continuar esperando.",

package/src/navigators/ContactStack.tsx

@@ -12,6 +12,7 @@ import ListContacts from '../screens/ListContacts'
 import ProofDetails from '../screens/ProofDetails'
 import ProofRequest from '../screens/ProofRequest'
 import RenameContact from '../screens/RenameContact'
+import JSONDetails from '../screens/JSONDetails'
 import WhatAreContacts from '../screens/WhatAreContacts'
 import { ContactStackParams, Screens } from '../types/navigators'
 
@@ -48,6 +49,14 @@ const ContactStack: React.FC = () => {
           ...ScreenOptionsDictionary[Screens.RenameContact],
         }}
       />
+      <Stack.Screen
+        name={Screens.JSONDetails}
+        component={JSONDetails}
+        options={{
+          title: t('Screens.JSONDetails'),
+          ...ScreenOptionsDictionary[Screens.JSONDetails],
+        }}
+      />
       <Stack.Screen
         name={Screens.Chat}
         component={Chat}

package/src/navigators/CredentialStack.tsx

@@ -6,6 +6,7 @@ import SettingsMenu from '../components/buttons/SettingsMenu'
 import { useTheme } from '../contexts/theme'
 import ListCredentials from '../screens/ListCredentials'
 import { CredentialStackParams, Screens } from '../types/navigators'
+import JSONDetails from '../screens/JSONDetails'
 
 import { useDefaultStackOptions } from './defaultStackOptions'
 import { TOKENS, useServices } from '../container-api'
@@ -32,6 +33,14 @@ const CredentialStack: React.FC = () => {
           ...ScreenOptionsDictionary[Screens.Credentials],
         })}
       />
+      <Stack.Screen
+        name={Screens.JSONDetails}
+        component={JSONDetails}
+        options={() => ({
+          title: t('Screens.JSONDetails'),
+          ...ScreenOptionsDictionary[Screens.JSONDetails],
+        })}
+      />
     </Stack.Navigator>
   )
 }

package/src/screens/ContactDetails.tsx

@@ -216,6 +216,10 @@ const ContactDetails: React.FC<ContactDetailsProps> = ({ route }) => {
     navigation.navigate(Screens.RenameContact, { connectionId })
   }, [navigation, connectionId])
 
+  const callViewJSONDetails = useCallback(() => {
+    navigation.navigate(Screens.JSONDetails, { jsonBlob: JSON.stringify(connection, null, 2) })
+  }, [navigation, connection])
+
   const contactLabel = useMemo(
     () => getConnectionName(connection, store.preferences.alternateContactNames),
     [connection, store.preferences.alternateContactNames]
@@ -303,6 +307,19 @@ const ContactDetails: React.FC<ContactDetailsProps> = ({ route }) => {
             <ThemedText>{t('Screens.RenameContact')}</ThemedText>
           </TouchableOpacity>
         )}
+        {/* JSON button on dev mode enabled */}
+        {store?.preferences.developerModeEnabled && (
+          <TouchableOpacity
+            onPress={callViewJSONDetails}
+            accessibilityLabel={t('ContactDetails.JSONDetails')}
+            accessibilityRole={'button'}
+            testID={testIdWithKey('JSONDetails')}
+            style={[styles.contentContainer, styles.actionContainer, { marginTop: 10 }]}
+          >
+            <Assets.svg.iconCode width={20} height={20} color={ColorPallet.brand.text} />
+            <ThemedText>{t('ContactDetails.JSONDetails')}</ThemedText>
+          </TouchableOpacity>
+        )}
         <TouchableOpacity
           onPress={callOnRemove}
           accessibilityLabel={t('ContactDetails.RemoveContact')}

package/src/screens/CredentialDetails.tsx

@@ -9,6 +9,7 @@ import { useTranslation } from 'react-i18next'
 import { DeviceEventEmitter, StyleSheet, TouchableOpacity, useWindowDimensions, View } from 'react-native'
 import { SafeAreaView } from 'react-native-safe-area-context'
 import Toast from 'react-native-toast-message'
+import { useStore } from '../contexts/store'
 
 import CredentialCard from '../components/misc/CredentialCard'
 import InfoBox, { InfoBoxType } from '../components/misc/InfoBox'
@@ -66,6 +67,7 @@ const CredentialDetails: React.FC<CredentialDetailsProps> = ({ navigation, route
     (credential?.metadata.get(CredentialMetadata.customMetadata) as credentialCustomMetadata)
       ?.revoked_detail_dismissed ?? false
   )
+  const [store] = useStore()
 
   useEffect(() => {
     setIsRevokedMessageHidden(
@@ -128,6 +130,13 @@ const CredentialDetails: React.FC<CredentialDetailsProps> = ({ navigation, route
     }
   }
 
+  const callViewJSONDetails = useCallback(() => {
+    navigation.navigate(Stacks.ContactStack, {
+      screen: Screens.JSONDetails,
+      params: { jsonBlob: JSON.stringify(credential, null, 2) },
+    })
+  }, [navigation, credential])
+
   useEffect(() => {
     if (!agent) {
       DeviceEventEmitter.emit(
@@ -381,8 +390,40 @@ const CredentialDetails: React.FC<CredentialDetailsProps> = ({ navigation, route
                 {credentialConnectionLabel}
               </ThemedText>
             </ThemedText>
+            {/* issued date if dev mode */}
+            {store?.preferences.developerModeEnabled && credential?.createdAt ? (
+              <ThemedText testID={testIdWithKey('IssuedDate')}>
+                <ThemedText variant="title" style={isRevoked && { color: ColorPallet.grayscale.mediumGrey }}>
+                  {t('CredentialDetails.Issued') + ': '}
+                </ThemedText>
+                <ThemedText style={isRevoked && { color: ColorPallet.grayscale.mediumGrey }}>
+                  {formatTime(credential.createdAt, { format: 'YYYY-MM-DD HH:mm:ss [UTC]' })}
+                </ThemedText>
+              </ThemedText>
+            ) : null}
           </View>
         ) : null}
+        {store?.preferences.developerModeEnabled && (
+          <View
+            style={{
+              backgroundColor: ColorPallet.brand.secondaryBackground,
+              marginTop: paddingVertical,
+              paddingHorizontal,
+              paddingVertical,
+            }}
+          >
+            <TouchableOpacity
+              onPress={callViewJSONDetails}
+              accessibilityLabel={t('ContactDetails.JSONDetails')}
+              accessibilityRole={'button'}
+              testID={testIdWithKey('JSONDetails')}
+              style={{ flexDirection: 'row', gap: 8 }}
+            >
+              <Assets.svg.iconCode width={20} height={20} color={ColorPallet.brand.secondary} />
+              <ThemedText>{t('ContactDetails.JSONDetails')}</ThemedText>
+            </TouchableOpacity>
+          </View>
+        )}
         {isRevoked ? (
           <View
             style={{

package/src/screens/JSONDetails.tsx

@@ -0,0 +1,102 @@
+import { SafeAreaView } from 'react-native-safe-area-context'
+import { View, StyleSheet, Share } from 'react-native'
+import { useTranslation } from 'react-i18next'
+import { useTheme } from '../contexts/theme'
+import { ThemedText } from '../components/texts/ThemedText'
+import { StackScreenProps } from '@react-navigation/stack'
+import { ContactStackParams, Screens } from '../types/navigators'
+import Button, { ButtonType } from '../components/buttons/Button'
+import { testIdWithKey } from '../utils/testable'
+import { ScrollView } from 'react-native-gesture-handler'
+import Clipboard from '@react-native-clipboard/clipboard'
+import Toast from 'react-native-toast-message'
+import { ToastType } from '../components/toast/BaseToast'
+
+type JSONDetailsProps = StackScreenProps<ContactStackParams, Screens.JSONDetails>
+
+const JSONDetails = ({ route }: JSONDetailsProps) => {
+  if (!route?.params) {
+    throw new Error('JSONDetails route params were not set properly')
+  }
+  const { t } = useTranslation()
+  const { ColorPallet } = useTheme()
+  const { jsonBlob } = route.params
+  const styles = StyleSheet.create({
+    container: {
+      flex: 1,
+      backgroundColor: ColorPallet.brand.primaryBackground,
+      padding: 20,
+    },
+    title: {
+      marginBottom: 16,
+    },
+    buttonContainer: {
+      width: '100%',
+      paddingVertical: 8,
+    },
+    jsonContainer: {
+      padding: 16,
+      backgroundColor: ColorPallet.brand.secondaryBackground,
+      height: '75%',
+      borderWidth: 1,
+      borderStyle: 'solid',
+      borderRadius: 5,
+    },
+  })
+
+  const copyToClipboard = async () => {
+    try {
+      await Clipboard.setString(jsonBlob)
+      Toast.show({
+        type: ToastType.Success,
+        text1: t('JSONDetails.CopiedSuccess'),
+      })
+    } catch (e) {
+      Toast.show({
+        type: ToastType.Error,
+        text1: `${t('JSONDetails.CopiedError')}: ${e}`,
+      })
+    }
+  }
+
+  const shareJSON = async () => {
+    await Share.share({
+      message: jsonBlob,
+    })
+  }
+
+  return (
+    <SafeAreaView style={styles.container} edges={['bottom', 'left', 'right']}>
+      <View>
+        <ScrollView style={styles.jsonContainer} testID={testIdWithKey('JSONDetails.ScrollView')}>
+          <ThemedText>{jsonBlob}</ThemedText>
+        </ScrollView>
+
+        <View style={styles.buttonContainer}>
+          <Button
+            title={t('JSONDetails.Share')}
+            buttonType={ButtonType.Primary}
+            testID={testIdWithKey('Share')}
+            accessibilityLabel={t('JSONDetails.Share')}
+            onPress={() => {
+              shareJSON()
+            }}
+          ></Button>
+        </View>
+        <View style={styles.buttonContainer}>
+          <Button
+            title={t('JSONDetails.Copy')}
+            buttonType={ButtonType.Secondary}
+            testID={testIdWithKey('CopyToClipboard')}
+            accessibilityLabel={t('JSONDetails.Copy')}
+            onPress={() => {
+              copyToClipboard()
+            }}
+          ></Button>
+        </View>
+      </View>
+    </SafeAreaView>
+  )
+}
+
+export default JSONDetails

package/src/theme.ts

@@ -4,6 +4,7 @@ import { SvgProps } from 'react-native-svg'
 import Arrow from './assets/icons/large-arrow.svg'
 import IconDelete from './assets/icons/trash.svg'
 import IconEdit from './assets/icons/pencil.svg'
+import IconCode from './assets/icons/code.svg'
 import ActivityIndicator from './assets/img/activity-indicator-circle.svg'
 import AppLockout from './assets/img/app-lockout.svg'
 import Biometrics from './assets/img/biometrics.svg'
@@ -52,6 +53,7 @@ import TabOneIcon from './assets/img/message-text-icon-outline.svg'
 import TabTwoIcon from './assets/img/qrcode-scan-icon.svg'
 import TabThreeFocusedIcon from './assets/img/wallet-icon.svg'
 import TabThreeIcon from './assets/img/wallet-icon-outline.svg'
+import React from 'react'
 
 export interface ISVGAssets {
   activityIndicator: React.FC<SvgProps>
@@ -108,6 +110,7 @@ export interface ISVGAssets {
   iconEdit: React.FC<SvgProps>
   iconWarning: React.FC<SvgProps>
   iconError: React.FC<SvgProps>
+  iconCode: React.FC<SvgProps>
   tabOneIcon: React.FC<SvgProps>
   tabOneFocusedIcon: React.FC<SvgProps>
   tabTwoIcon: React.FC<SvgProps>
@@ -1087,6 +1090,7 @@ export const Assets = {
     homeCenterImg: HomeCenterImg,
     iconDelete: IconDelete,
     iconEdit: IconEdit,
+    iconCode: IconCode,
     iconError: IconError,
     iconWarning: IconWarning,
     tabOneIcon: TabOneIcon,

package/src/types/navigators.ts

@@ -51,6 +51,7 @@ export enum Screens {
   NameWallet = 'Name Wallet',
   RenameWallet = 'Rename Wallet',
   RenameContact = 'Rename Contact',
+  JSONDetails = 'JSON Details',
   ScanHelp = 'Scan Help',
   HistorySettings = 'History Settings',
   HistoryPage = 'History',
@@ -122,6 +123,7 @@ export type ContactStackParams = {
   [Screens.CredentialOffer]: { credentialId: string }
   [Screens.ProofDetails]: { recordId: string; isHistory?: boolean }
   [Screens.ProofRequest]: { proofId: string }
+  [Screens.JSONDetails]: { jsonBlob: string }
 }
 
 export type ProofRequestsStackParams = {
@@ -141,6 +143,7 @@ export type ProofRequestsStackParams = {
 
 export type CredentialStackParams = {
   [Screens.Credentials]: undefined
+  [Screens.JSONDetails]: { jsonBlob: string }
 }
 
 export type HomeStackParams = {