@bifold/core 1.0.0

package/src/screens/ListCredentials.tsx

@@ -0,0 +1,135 @@
+import { AnonCredsCredentialMetadataKey } from '@credo-ts/anoncreds'
+import { CredentialExchangeRecord, CredentialState, SdJwtVcRecord, W3cCredentialRecord } from '@credo-ts/core'
+import { useCredentialByState } from '@credo-ts/react-hooks'
+import { useNavigation, useIsFocused } from '@react-navigation/native'
+import { StackNavigationProp } from '@react-navigation/stack'
+import React, { useEffect } from 'react'
+import { useTranslation } from 'react-i18next'
+import { FlatList, View } from 'react-native'
+
+import CredentialCard from '../components/misc/CredentialCard'
+import { DispatchAction } from '../contexts/reducers/store'
+import { useStore } from '../contexts/store'
+import { useTheme } from '../contexts/theme'
+import { useTour } from '../contexts/tour/tour-context'
+import { RootStackParams, Screens } from '../types/navigators'
+import { TOKENS, useServices } from '../container-api'
+import { EmptyListProps } from '../components/misc/EmptyList'
+import { CredentialListFooterProps } from '../types/credential-list-footer'
+import { useOpenIDCredentials } from '../modules/openid/context/OpenIDCredentialRecordProvider'
+import { GenericCredentialExchangeRecord } from '../types/credentials'
+import { CredentialErrors } from '../components/misc/CredentialCard11'
+import { BaseTourID } from '../types/tour'
+import { OpenIDCredentialType } from '../modules/openid/types'
+
+const ListCredentials: React.FC = () => {
+  const { t } = useTranslation()
+  const [store, dispatch] = useStore()
+  const [
+    CredentialListOptions,
+    credentialEmptyList,
+    credentialListFooter,
+    { enableTours: enableToursConfig, credentialHideList },
+  ] = useServices([
+    TOKENS.COMPONENT_CRED_LIST_OPTIONS,
+    TOKENS.COMPONENT_CRED_EMPTY_LIST,
+    TOKENS.COMPONENT_CRED_LIST_FOOTER,
+    TOKENS.CONFIG,
+  ])
+  const navigation = useNavigation<StackNavigationProp<RootStackParams>>()
+  const { ColorPallet } = useTheme()
+  const { start, stop } = useTour()
+  const screenIsFocused = useIsFocused()
+  const {
+    openIdState: { w3cCredentialRecords, sdJwtVcRecords },
+  } = useOpenIDCredentials()
+
+  let credentials: GenericCredentialExchangeRecord[] = [
+    ...useCredentialByState(CredentialState.CredentialReceived),
+    ...useCredentialByState(CredentialState.Done),
+    ...w3cCredentialRecords,
+    ...sdJwtVcRecords,
+  ]
+
+  const CredentialEmptyList = credentialEmptyList as React.FC<EmptyListProps>
+  const CredentialListFooter = credentialListFooter as React.FC<CredentialListFooterProps>
+
+  // Filter out hidden credentials when not in dev mode
+  if (!store.preferences.developerModeEnabled) {
+    credentials = credentials.filter((r) => {
+      const credDefId = r.metadata.get(AnonCredsCredentialMetadataKey)?.credentialDefinitionId
+      return !credentialHideList?.includes(credDefId)
+    })
+  }
+
+  useEffect(() => {
+    const shouldShowTour = enableToursConfig && store.tours.enableTours && !store.tours.seenCredentialsTour
+
+    if (shouldShowTour && screenIsFocused) {
+      start(BaseTourID.CredentialsTour)
+      dispatch({
+        type: DispatchAction.UPDATE_SEEN_CREDENTIALS_TOUR,
+        payload: [true],
+      })
+    }
+  }, [enableToursConfig, store.tours.enableTours, store.tours.seenCredentialsTour, screenIsFocused, start, dispatch])
+
+  // stop the tour when the screen unmounts
+  useEffect(() => {
+    return stop
+  }, [stop])
+
+  const renderCardItem = (cred: GenericCredentialExchangeRecord) => {
+    return (
+      <CredentialCard
+        credential={cred as CredentialExchangeRecord}
+        credentialErrors={
+          (cred as CredentialExchangeRecord).revocationNotification?.revocationDate && [CredentialErrors.Revoked]
+        }
+        onPress={() => {
+          if (cred instanceof W3cCredentialRecord) {
+            navigation.navigate(Screens.OpenIDCredentialDetails, {
+              credentialId: cred.id,
+              type: OpenIDCredentialType.W3cCredential,
+            })
+          } else if (cred instanceof SdJwtVcRecord) {
+            navigation.navigate(Screens.OpenIDCredentialDetails, {
+              credentialId: cred.id,
+              type: OpenIDCredentialType.SdJwtVc,
+            })
+          } else {
+            navigation.navigate(Screens.CredentialDetails, { credentialId: cred.id })
+          }
+        }}
+      />
+    )
+  }
+
+  return (
+    <View>
+      <FlatList
+        style={{ backgroundColor: ColorPallet.brand.primaryBackground }}
+        data={credentials.sort((a, b) => new Date(b.createdAt).valueOf() - new Date(a.createdAt).valueOf())}
+        keyExtractor={(credential) => credential.id}
+        renderItem={({ item: credential, index }) => {
+          return (
+            <View
+              style={{
+                marginHorizontal: 15,
+                marginTop: 15,
+                marginBottom: index === credentials.length - 1 ? 45 : 0,
+              }}
+            >
+              {renderCardItem(credential)}
+            </View>
+          )
+        }}
+        ListEmptyComponent={() => <CredentialEmptyList message={t('Credentials.EmptyList')} />}
+        ListFooterComponent={() => <CredentialListFooter credentialsCount={credentials.length} />}
+      />
+      <CredentialListOptions />
+    </View>
+  )
+}
+
+export default ListCredentials

package/src/screens/ListProofRequests.tsx

@@ -0,0 +1,148 @@
+import { ProofRequestTemplate, hasPredicates, isParameterizable } from '@bifold/verifier'
+import { MetaOverlay, OverlayType } from '@bifold/oca'
+import { StackNavigationProp, StackScreenProps } from '@react-navigation/stack'
+import React, { useEffect, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import { FlatList, StyleSheet, TouchableOpacity, View } from 'react-native'
+import { SafeAreaView } from 'react-native-safe-area-context'
+import Icon from 'react-native-vector-icons/MaterialIcons'
+
+import EmptyList from '../components/misc/EmptyList'
+import { TOKENS, useServices } from '../container-api'
+import { useStore } from '../contexts/store'
+import { useTheme } from '../contexts/theme'
+import { useTemplates } from '../hooks/proof-request-templates'
+import { ProofRequestsStackParams, Screens } from '../types/navigators'
+import { testIdWithKey } from '../utils/testable'
+import { ThemedText } from '../components/texts/ThemedText'
+
+interface ProofRequestsCardProps {
+  navigation: StackNavigationProp<ProofRequestsStackParams>
+  template: ProofRequestTemplate
+  connectionId?: string
+}
+
+const ProofRequestsCard: React.FC<ProofRequestsCardProps> = ({ navigation, template, connectionId }) => {
+  const { t } = useTranslation()
+  const { i18n } = useTranslation()
+  const { ListItems } = useTheme()
+  const [bundleResolver] = useServices([TOKENS.UTIL_OCA_RESOLVER])
+  const style = StyleSheet.create({
+    card: {
+      ...ListItems.requestTemplateBackground,
+      flexDirection: 'row',
+      borderRadius: 8,
+      padding: 12,
+      marginBottom: 10,
+    },
+    textContainer: {
+      flex: 1,
+    },
+    templateTitle: {
+      ...ListItems.requestTemplateTitle,
+      marginBottom: 4,
+    },
+    templateDetails: {
+      ...ListItems.requestTemplateDetails,
+      marginBottom: 4,
+    },
+    templateZkpLabel: {
+      ...ListItems.requestTemplateZkpLabel,
+    },
+    iconContainer: {
+      alignSelf: 'center',
+    },
+    icon: {
+      ...ListItems.requestTemplateIcon,
+    },
+  })
+
+  const [meta, setMeta] = useState<MetaOverlay | undefined>(undefined)
+
+  useEffect(() => {
+    bundleResolver.resolve({ identifiers: { templateId: template.id }, language: i18n.language }).then((bundle) => {
+      const metaOverlay =
+        bundle?.metaOverlay ||
+        new MetaOverlay({
+          capture_base: '',
+          type: OverlayType.Meta10,
+          name: template.name,
+          description: template.description,
+          language: i18n.language,
+          credential_help_text: '',
+          credential_support_url: '',
+          issuer: '',
+          issuer_description: '',
+          issuer_url: '',
+        })
+      setMeta(metaOverlay)
+    })
+  }, [bundleResolver, template, i18n.language])
+
+  return meta ? (
+    <TouchableOpacity
+      style={style.card}
+      onPress={() => navigation.navigate(Screens.ProofRequestDetails, { templateId: template.id, connectionId })}
+      accessibilityLabel={t('Screens.ProofRequestDetails')}
+      accessibilityRole="button"
+      testID={testIdWithKey('ProofRequestsCard')}
+    >
+      <View style={style.textContainer}>
+        <ThemedText style={style.templateTitle} numberOfLines={1}>
+          {meta.name}
+        </ThemedText>
+        <ThemedText style={style.templateDetails} numberOfLines={2}>
+          {meta.description}
+        </ThemedText>
+        {hasPredicates(template) && (
+          <ThemedText style={style.templateZkpLabel}>{t('Verifier.ZeroKnowledgeProof')}</ThemedText>
+        )}
+        {isParameterizable(template) && (
+          <ThemedText style={style.templateZkpLabel}>{t('Verifier.Parameterizable')}</ThemedText>
+        )}
+      </View>
+      <View style={style.iconContainer}>
+        <Icon style={style.icon} name={'chevron-right'} />
+      </View>
+    </TouchableOpacity>
+  ) : null
+}
+
+type ListProofRequestsProps = StackScreenProps<ProofRequestsStackParams, Screens.ProofRequests>
+
+const ListProofRequests: React.FC<ListProofRequestsProps> = ({ navigation, route }) => {
+  const { t } = useTranslation()
+  const { ColorPallet } = useTheme()
+  const [store] = useStore()
+
+  const style = StyleSheet.create({
+    container: {
+      flexGrow: 1,
+      margin: 24,
+      elevation: 5,
+    },
+  })
+
+  const connectionId = route?.params?.connectionId
+
+  // if useDevVerifierTemplates not set then exclude dev templates
+  const proofRequestTemplates = useTemplates().filter(
+    (tem) => store.preferences.useDevVerifierTemplates || !tem.devOnly
+  )
+
+  return (
+    <SafeAreaView style={style.container} edges={['left', 'right']}>
+      <FlatList
+        style={{ backgroundColor: ColorPallet.brand.primaryBackground }}
+        data={proofRequestTemplates}
+        keyExtractor={(records) => records.id}
+        renderItem={({ item }) => {
+          return <ProofRequestsCard template={item} connectionId={connectionId} navigation={navigation} />
+        }}
+        ListEmptyComponent={() => <EmptyList message={t('Verifier.EmptyList')} />}
+      />
+    </SafeAreaView>
+  )
+}
+
+export default ListProofRequests

package/src/screens/MobileVerifierLoading.tsx

@@ -0,0 +1,106 @@
+import { useAgent, useProofById } from '@credo-ts/react-hooks'
+import { isPresentationFailed, isPresentationReceived } from '@bifold/verifier'
+import { StackScreenProps } from '@react-navigation/stack'
+import React, { useCallback, useEffect } from 'react'
+import { useTranslation } from 'react-i18next'
+import { SafeAreaView, ScrollView, StyleSheet, View } from 'react-native'
+
+import PresentationLoading from '../components/animated/PresentationLoading'
+import Button, { ButtonType } from '../components/buttons/Button'
+import SafeAreaModal from '../components/modals/SafeAreaModal'
+import { useTheme } from '../contexts/theme'
+import { useOutOfBandByConnectionId } from '../hooks/connections'
+import { DeliveryStackParams, Screens } from '../types/navigators'
+import { testIdWithKey } from '../utils/testable'
+import { ThemedText } from '../components/texts/ThemedText'
+
+type MobileVerifierLoadingProps = StackScreenProps<DeliveryStackParams, Screens.MobileVerifierLoading>
+
+const MobileVerifierLoading: React.FC<MobileVerifierLoadingProps> = ({ navigation, route }) => {
+  const { proofId, connectionId } = route.params
+  const goalCode = useOutOfBandByConnectionId(connectionId)?.outOfBandInvitation.goalCode
+  const proofRecord = useProofById(proofId)
+  const { t } = useTranslation()
+  const { ColorPallet, TextTheme } = useTheme()
+  const { agent } = useAgent()
+
+  if (!agent) {
+    throw new Error('Unable to fetch agent from Credo')
+  }
+
+  const styles = StyleSheet.create({
+    container: {
+      height: '100%',
+      backgroundColor: ColorPallet.brand.modalPrimaryBackground,
+      padding: 20,
+    },
+    image: {
+      marginTop: 20,
+    },
+    messageContainer: {
+      alignItems: 'center',
+    },
+    messageText: {
+      fontWeight: TextTheme.normal.fontWeight,
+      textAlign: 'center',
+      marginTop: 30,
+    },
+    controlsContainer: {
+      marginTop: 'auto',
+      margin: 20,
+    },
+    delayMessageText: {
+      textAlign: 'center',
+      marginTop: 20,
+    },
+  })
+
+  const onDismissModalTouched = useCallback(() => {
+    if (proofRecord && (isPresentationReceived(proofRecord) || isPresentationFailed(proofRecord))) {
+      if (goalCode?.endsWith('verify.once')) {
+        agent.connections.deleteById(connectionId)
+      }
+    }
+
+    navigation.pop()
+  }, [navigation, proofRecord, goalCode, agent, connectionId])
+
+  useEffect(() => {
+    if (proofRecord && (isPresentationReceived(proofRecord) || isPresentationFailed(proofRecord))) {
+      navigation.replace(Screens.ProofDetails, { recordId: proofRecord.id })
+    }
+  }, [proofRecord, goalCode, agent, connectionId, navigation])
+
+  return (
+    <SafeAreaModal transparent animationType={'slide'}>
+      <SafeAreaView style={{ backgroundColor: ColorPallet.brand.modalPrimaryBackground }}>
+        <ScrollView style={styles.container}>
+          <View style={styles.messageContainer}>
+            <ThemedText
+              variant="modalHeadingThree"
+              style={styles.messageText}
+              testID={testIdWithKey('VerifierLoading')}
+            >
+              {t('Verifier.WaitingForResponse')}
+            </ThemedText>
+          </View>
+
+          <View style={styles.image}>
+            <PresentationLoading />
+          </View>
+        </ScrollView>
+        <View style={styles.controlsContainer}>
+          <Button
+            title={t('Global.GoBack')}
+            accessibilityLabel={t('Global.GoBack')}
+            testID={testIdWithKey('BackToProofList')}
+            onPress={onDismissModalTouched}
+            buttonType={ButtonType.ModalSecondary}
+          />
+        </View>
+      </SafeAreaView>
+    </SafeAreaModal>
+  )
+}
+
+export default MobileVerifierLoading

package/src/screens/NameWallet.tsx

@@ -0,0 +1,160 @@
+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 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
+}
+
+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],
+      })
+
+      if (agent) {
+        agent.config.label = walletName
+      }
+
+      dispatch({ type: DispatchAction.DID_NAME_WALLET })
+    }
+  }
+
+  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>
+  )
+}
+
+export default NameWallet