@bifold/core 2.1.8 → 2.1.9

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 = {