@bifold/core 2.1.9 → 2.2.0

package/src/screens/ConfigureMediator.tsx

@@ -0,0 +1,160 @@
+import { FlatList, StyleSheet, View, Pressable } from 'react-native'
+import BouncyCheckbox from 'react-native-bouncy-checkbox'
+import { SafeAreaView } from 'react-native-safe-area-context'
+import Icon from 'react-native-vector-icons/MaterialCommunityIcons'
+import { useStore } from '../contexts/store'
+import { DispatchAction } from '../contexts/reducers/store'
+import { useTheme } from '../contexts/theme'
+import { ThemedText } from '../components/texts/ThemedText'
+import { testIdWithKey } from '../utils/testable'
+import { useEffect, useState } from 'react'
+import { LockoutReason, useAuth } from '../contexts/auth'
+import { useAgent } from '@credo-ts/react-hooks'
+import { MediationRecipientService } from '@credo-ts/core'
+import DismissiblePopupModal from '../components/modals/DismissiblePopupModal'
+import { useTranslation } from 'react-i18next'
+import { StackScreenProps } from '@react-navigation/stack'
+import { Screens, SettingStackParams } from '../types/navigators'
+import { setMediationToDefault } from '../utils/mediatorhelpers'
+
+type MediatorItem = {
+  id: string
+  label: string
+  testID: string
+}
+type ConfigureMediatorProps = StackScreenProps<SettingStackParams, Screens.ConfigureMediator>
+
+const ConfigureMediator = ({ route }: ConfigureMediatorProps) => {
+  const [store, dispatch] = useStore()
+  const { agent } = useAgent()
+  const { ColorPallet, SettingsTheme } = useTheme()
+  const { t } = useTranslation()
+  const { lockOutUser } = useAuth()
+  const supportedMediators = store.preferences.availableMediators
+  const scannedMediatorUri = route.params?.scannedMediatorUri
+  const [isModalVisible, setIsModalVisible] = useState(false)
+  const [pendingMediatorId, setPendingMediatorId] = useState<string | null>(null)
+
+  useEffect(() => {
+    if (scannedMediatorUri && !store.preferences.availableMediators.includes(scannedMediatorUri)) {
+      dispatch({
+        type: DispatchAction.ADD_AVAILABLE_MEDIATOR,
+        payload: [scannedMediatorUri],
+      })
+    }
+  }, [scannedMediatorUri, dispatch, store.preferences.availableMediators])
+  const mediators: MediatorItem[] = supportedMediators.map((mediator) => ({
+    id: mediator,
+    label: String(mediator),
+    testID: testIdWithKey(mediator),
+  }))
+  const styles = StyleSheet.create({
+    container: {
+      backgroundColor: ColorPallet.brand.primaryBackground,
+      width: '100%',
+    },
+    section: {
+      backgroundColor: SettingsTheme.groupBackground,
+      paddingHorizontal: 25,
+      paddingVertical: 16,
+    },
+    sectionRow: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      justifyContent: 'space-between',
+    },
+    itemSeparator: {
+      borderBottomWidth: 1,
+      borderBottomColor: ColorPallet.brand.primaryBackground,
+      marginHorizontal: 25,
+    },
+    checkboxContainer: {
+      justifyContent: 'center',
+    },
+  })
+
+  const confirmMediatorChange = async () => {
+    if (!pendingMediatorId || !agent) return
+
+    await agent.dependencyManager.resolve(MediationRecipientService).clearDefaultMediator(agent.context)
+    agent.config.logger.info(`successfully cleared default mediator`)
+    await setMediationToDefault(agent, pendingMediatorId)
+    dispatch({
+      type: DispatchAction.SET_SELECTED_MEDIATOR,
+      payload: [pendingMediatorId],
+    })
+    lockOutUser(LockoutReason.Logout)
+    setIsModalVisible(false)
+  }
+
+  const handleMediatorChange = async (mediatorId: string) => {
+    if (mediatorId === store.preferences.selectedMediator) return
+    setPendingMediatorId(mediatorId)
+    setIsModalVisible(true)
+  }
+
+  const MediatorRow = ({
+    label,
+    id,
+    testID,
+    selected,
+    onPress,
+  }: {
+    label: string
+    id: string
+    testID: string
+    selected: boolean
+    onPress: (id: string) => void
+  }) => (
+    <View style={[styles.section, styles.sectionRow]}>
+      <ThemedText variant="title">{label}</ThemedText>
+      <Pressable
+        style={styles.checkboxContainer}
+        accessibilityLabel={label}
+        accessibilityRole="radio"
+        testID={testIdWithKey(testID)}
+      >
+        <BouncyCheckbox
+          disableText
+          fillColor={ColorPallet.brand.secondaryBackground}
+          unfillColor={ColorPallet.brand.secondaryBackground}
+          size={36}
+          innerIconStyle={{ borderColor: ColorPallet.brand.primary, borderWidth: 2 }}
+          ImageComponent={() => <Icon name="circle" size={18} color={ColorPallet.brand.primary} />}
+          onPress={() => onPress(id)}
+          isChecked={selected}
+          disableBuiltInState
+        />
+      </Pressable>
+    </View>
+  )
+
+  return (
+    <SafeAreaView style={styles.container}>
+      <FlatList
+        data={mediators}
+        keyExtractor={(item) => item.id}
+        renderItem={({ item }) => (
+          <MediatorRow
+            label={item.label.split('?')[0]}
+            id={item.id}
+            testID={item.testID}
+            selected={store.preferences.selectedMediator === item.id}
+            onPress={handleMediatorChange}
+          />
+        )}
+      />
+      {isModalVisible && (
+        <DismissiblePopupModal
+          title={t('Settings.ChangeMediator')}
+          description={t('Settings.ChangeMediatorDescription')}
+          onCallToActionLabel={t('Global.Confirm')}
+          onCallToActionPressed={() => confirmMediatorChange()}
+          onDismissPressed={() => setIsModalVisible(false)}
+        />
+      )}
+    </SafeAreaView>
+  )
+}
+
+export default ConfigureMediator

package/src/screens/ContactDetails.tsx

@@ -311,13 +311,13 @@ const ContactDetails: React.FC<ContactDetailsProps> = ({ route }) => {
         {store?.preferences.developerModeEnabled && (
           <TouchableOpacity
             onPress={callViewJSONDetails}
-            accessibilityLabel={t('ContactDetails.JSONDetails')}
+            accessibilityLabel={t('Global.ViewJSON')}
             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>
+            <ThemedText>{t('Global.ViewJSON')}</ThemedText>
           </TouchableOpacity>
         )}
         <TouchableOpacity

package/src/screens/CredentialDetails.tsx

@@ -414,13 +414,13 @@ const CredentialDetails: React.FC<CredentialDetailsProps> = ({ navigation, route
           >
             <TouchableOpacity
               onPress={callViewJSONDetails}
-              accessibilityLabel={t('ContactDetails.JSONDetails')}
+              accessibilityLabel={t('Global.ViewJSON')}
               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>
+              <ThemedText>{t('Global.ViewJSON')}</ThemedText>
             </TouchableOpacity>
           </View>
         )}

package/src/screens/ProofRequest.tsx

@@ -637,6 +637,19 @@ const ProofRequest: React.FC<ProofRequestProps> = ({ navigation, proofId }) => {
     navigation.getParent()?.navigate(TabStacks.HomeStack, { screen: Screens.Home })
   }, [navigation])
 
+  const callViewJSONDetails = useCallback(() => {
+    navigation.navigate(Stacks.ContactStack, {
+      screen: Screens.JSONDetails,
+      params: {
+        jsonBlob:
+          '"proof":' +
+          JSON.stringify(proof, null, 2) +
+          '\n"retrievedCredentials":' +
+          JSON.stringify(retrievedCredentials, null, 2),
+      },
+    })
+  }, [navigation, proof, retrievedCredentials])
+
   const shareDisabledErrors = useMemo(() => {
     return {
       hasCredentialError: !hasAvailableCredentials,
@@ -802,6 +815,19 @@ const ProofRequest: React.FC<ProofRequestProps> = ({ navigation, proofId }) => {
                     onPress={toggleDeclineModalVisible}
                   />
                 </View>
+                {store.preferences.developerModeEnabled && (
+                  <>
+                    <View style={styles.footerButton}>
+                      <Button
+                        title={t('Global.ViewJSON')}
+                        accessibilityLabel={t('Global.ViewJSON')}
+                        testID={testIdWithKey('JSONDetails')}
+                        buttonType={ButtonType.Secondary}
+                        onPress={callViewJSONDetails}
+                      />
+                    </View>
+                  </>
+                )}
               </>
             )}
           </>

package/src/screens/Settings.tsx

@@ -218,6 +218,13 @@ const Settings: React.FC<SettingsProps> = ({ navigation }) => {
           testID: testIdWithKey('DeveloperOptions'),
           onPress: () => navigation.navigate(Screens.Developer),
         },
+        {
+          title: t('Settings.ConfigureMediator'),
+          value: store.preferences.selectedMediator,
+          accessibilityLabel: t('Settings.ConfigureMediator'),
+          testID: testIdWithKey('ConfigureMediator'),
+          onPress: () => navigation.navigate(Screens.ConfigureMediator),
+        },
         {
           title: t('Settings.Logout'),
           accessibilityLabel: t('Settings.Logout'),

package/src/theme.ts

@@ -521,6 +521,16 @@ export const Buttons = StyleSheet.create({
     borderRadius: 4,
     backgroundColor: ColorPallet.brand.primary,
   },
+  criticalText: {
+    ...TextTheme.bold,
+    color: ColorPallet.brand.buttonText,
+    textAlign: 'center',
+  },
+  criticalTextDisabled: {
+    ...TextTheme.bold,
+    color: ColorPallet.brand.buttonText,
+    textAlign: 'center',
+  },
   primary: {
     padding: 16,
     borderRadius: 4,
@@ -583,13 +593,39 @@ export const Buttons = StyleSheet.create({
     borderRadius: 4,
     backgroundColor: ColorPallet.brand.primary,
   },
+  modalCriticalDisabled: {
+    padding: 16,
+    borderRadius: 4,
+    backgroundColor: ColorPallet.brand.primaryDisabled,
+  },
+  modalCriticalText: {
+    ...TextTheme.bold,
+    color: ColorPallet.brand.buttonText,
+    textAlign: 'center',
+  },
+  modalCriticalTextDisabled: {
+    ...TextTheme.bold,
+    color: ColorPallet.brand.buttonText,
+    textAlign: 'center',
+  },
   modalPrimary: {
     padding: 16,
     borderRadius: 4,
     backgroundColor: ColorPallet.brand.modalPrimary,
   },
+  modalPrimaryDisabled: {
+    padding: 16,
+    borderRadius: 4,
+    backgroundColor: ColorPallet.brand.primaryDisabled,
+  },
   modalPrimaryText: {
     ...TextTheme.bold,
+    color: ColorPallet.brand.buttonText,
+    textAlign: 'center',
+  },
+  modalPrimaryTextDisabled: {
+    ...TextTheme.bold,
+    color: ColorPallet.brand.buttonText,
     textAlign: 'center',
   },
   modalSecondary: {
@@ -598,19 +634,38 @@ export const Buttons = StyleSheet.create({
     borderWidth: 2,
     borderColor: ColorPallet.brand.modalPrimary,
   },
+  modalSecondaryDisabled: {
+    padding: 16,
+    borderRadius: 4,
+    borderWidth: 2,
+    borderColor: ColorPallet.brand.secondaryDisabled,
+  },
   modalSecondaryText: {
     ...TextTheme.bold,
     color: ColorPallet.brand.modalPrimary,
     textAlign: 'center',
   },
+  modalSecondaryTextDisabled: {
+    ...TextTheme.bold,
+    color: ColorPallet.brand.secondaryDisabled,
+    textAlign: 'center',
+  },
   modalTertiary: {
     padding: 16,
   },
+  modalTertiaryDisabled: {
+    padding: 16,
+  },
   modalTertiaryText: {
     ...TextTheme.bold,
     color: ColorPallet.brand.modalPrimary,
     textAlign: 'center',
   },
+  modalTertiaryTextDisabled: {
+    ...TextTheme.bold,
+    color: ColorPallet.brand.tertiaryDisabled,
+    textAlign: 'center',
+  },
 })
 
 export const ListItems = StyleSheet.create({

package/src/types/navigators.ts

@@ -58,6 +58,7 @@ export enum Screens {
   HistoryDetails = 'History details',
   AutoLock = 'AutoLock',
   UpdateAvailable = 'Update Available',
+  ConfigureMediator = 'Configure Mediator',
 }
 
 export enum Stacks {
@@ -171,6 +172,7 @@ export type SettingStackParams = {
   [Screens.TogglePushNotifications]: undefined
   [Screens.HistorySettings]: undefined
   [Screens.AutoLock]: undefined
+  [Screens.ConfigureMediator]: { scannedMediatorUri: string } | undefined
 }
 
 export type NotificationStackParams = {

package/src/types/state.ts

@@ -33,6 +33,8 @@ export interface Preferences {
   alternateContactNames: Record<string, string>
   autoLockTime: number
   theme?: string
+  selectedMediator: string
+  availableMediators: string[]
 }
 
 export interface Tours {

package/src/utils/helpers.ts

@@ -57,6 +57,7 @@ import {
 } from './anonCredsProofRequestMapper'
 import { parseCredDefFromId } from './cred-def'
 import { isOpenIdCredentialOffer, isOpenIdPresentationRequest } from './parsers'
+import { isMediatorInvitation } from './mediatorhelpers'
 
 export { parsedCredDefNameFromCredential } from './cred-def'
 
@@ -1091,6 +1092,14 @@ export const connectFromScanOrDeepLink = async (
 
       return
     }
+    if (await isMediatorInvitation(agent, uri)) {
+      navigation.navigate(Stacks.SettingStack as any, {
+        screen: Screens.ConfigureMediator,
+        params: { scannedMediatorUri: uri },
+      })
+
+      return
+    }
 
     const aUrl = processBetaUrlIfRequired(uri)
     const receivedInvitation = await connectFromInvitation(aUrl, agent, implicitInvitations, reuseConnection)

package/src/utils/mediatorhelpers.ts

@@ -0,0 +1,60 @@
+import { Agent, MediationRecord } from '@credo-ts/core'
+
+export const isMediatorInvitation = async (agent: Agent, url: string): Promise<boolean> => {
+  const invitation = await agent.oob.parseInvitation(url)
+  if (!invitation) {
+    return false
+  }
+  if (invitation.goalCode === 'aries.vc.mediate') {
+    agent.config.logger.info(`Invitation is a mediator invitation with goal code: ${invitation.goalCode}`)
+    return true
+  }
+  agent.config.logger.info(`Invitation is not a mediator invitation, goal code: ${invitation.goalCode}`)
+  return false
+}
+
+const provisionMediationRecordFromMediatorUrl = async (
+  agent: Agent,
+  url: string
+): Promise<MediationRecord | undefined> => {
+  try {
+    const invitation = await agent.oob.parseInvitation(url)
+    if (!invitation) {
+      agent.config.logger.warn(`No invitation found in URL: ${url}`)
+      return undefined
+    }
+    const outOfBandRecord = await agent.oob.findByReceivedInvitationId(invitation.id)
+    let [connection] = outOfBandRecord ? await agent.connections.findAllByOutOfBandId(outOfBandRecord.id) : []
+
+    if (!connection) {
+      agent.config.logger.warn(`No connection found for out-of-band record: ${outOfBandRecord?.id}`)
+      const invite = await agent.oob.parseInvitation(url)
+      const { connectionRecord: newConnection } = await agent.oob.receiveInvitation(invite)
+      if (!newConnection) {
+        agent.config.logger.warn(`Failed to create connection from invitation: ${JSON.stringify(invite, null, 2)}`)
+        return
+      }
+      connection = newConnection
+    }
+    const result = connection.isReady ? connection : await agent.connections.returnWhenIsConnected(connection.id)
+    return agent.mediationRecipient.provision(result)
+  } catch (error) {
+    agent.config.logger.warn(`Failed to get connection ID from mediator URL: ${error}`)
+    return
+  }
+}
+
+export const setMediationToDefault = async (agent: Agent, mediatorUrl: string) => {
+  const mediationRecord = await provisionMediationRecordFromMediatorUrl(agent, mediatorUrl)
+  if (!mediationRecord) {
+    agent.config.logger.warn(`No connection record found for mediator URL: ${mediatorUrl}`)
+    return
+  }
+  const currentDefault = await agent.mediationRecipient.findDefaultMediator()
+  if (currentDefault?.connectionId === mediationRecord.id) {
+    agent.config.logger.info(`Default mediator already set for connection ID: ${mediationRecord.id}`)
+    return
+  }
+  await agent.mediationRecipient.setDefaultMediator(mediationRecord)
+  agent.config.logger.info(`setting default mediator with record: ${JSON.stringify(mediationRecord)}`)
+}