Learn how to build an application that can present an mDoc via a proximity workflow

As part of your onboarding process you should have been provided with access to the following assets:

• ZIP file which includes the required framework: (MobileCredentialHolderSDK-*version*.xcframework.zip).
• Sample Wallet app: You can use this app for reference as you work through this tutorial.

As part of your onboarding process you should have been provided with access to the following assets:

• ZIP file which includes the required library: (holder-*version*.zip).
• Sample Wallet app: You can use this app for reference as you work through this tutorial.

You will need access to the SDK and additional MATTR dependencies to complete this tutorial. Contact us if you are interested in trialing the SDK.

• Xcode setup with either:
  • Local build settings if you are developing locally.
  • iOS developer account if you intend to publish your app.

• Android Studio.

• Code editor (such as VS Code).
• Android Studio.
• Xcode.
• yarn (v1.22.22 was used during development).
• Java v17.

• Holder device:
  • Supported iOS device to run the built application on, setup with:
    • Biometric authentication.
    • Bluetooth access.
    • Available internet connection.
• Verifier device:
  • Android/iOS device with an installed verifier application. We recommend downloading and using the MATTR GO Verify example app.
  • Setup with Bluetooth access.

• Holder device:
  • Supported Android device to run the built application on, setup with:
    • Biometric authentication (Face recognition, fingerprint recognition).
    • Bluetooth access and Bluetooth turned on.
    • Available internet connection.
    • USB debugging enabled.
• Verifier device:
  • Android/iOS mobile device with an installed verifier application. We recommend downloading and using the MATTR GO Verify example app.
  • Setup with Bluetooth access.

• Holder device:
  • Supported iOS and/or Android device to run the built application on, setup with:
    • Biometric authentication.
    • Bluetooth access and Bluetooth turned on.
    • Available internet connection.
    • USB debugging enabled (Android only).
• Verifier device:
  • Android/iOS device with an installed verifier application. We recommend downloading and using the MATTR GO Verify example app.
  • Setup with Bluetooth access and Bluetooth turned on.

1. Open the project that you built as part of the Claim a credential tutorial.

2. Open the ContentView file and add the following code under the // Proximity Presentation - Step 1.2: Create deviceEngagementString and proximityPresentationSession variables comment to create new variables to hold the device engagement string and the proximity presentation session.

       @Published var deviceEngagementString: String?
       @Published var proximityPresentationSession: ProximityPresentationSession?

3. Replace the print statement under the // Proximity Presentation - Step 1.3: Create function to create a proximity presentation session and generate QR code comment with the following code to call the SDK's createProximityPresentationSession method when the user selects the Create QR Code button:

           Task { @MainActor in
               do {
                   proximityPresentationSession = try await mobileCredentialHolder.createProximityPresentationSession(
                       onRequestReceived: onRequestReceived(_:error:)
                   )
                   deviceEngagementString = proximityPresentationSession?.deviceEngagement
   
               } catch {
                   print(error)
               }
           }

4. Replace the func statement below the // Proximity Presentation - Step 1.4: Update function signature comment with the following code to update the function's signature (don't change the function body for now):

       func onRequestReceived(_ mobileCredentialRequests: [(request: MobileCredentialRequest, matchedMobileCredentials: [MobileCredentialMetadata])]?, error: Error?) {

5. Replace the EmptyView() statement under the // Proximity Presentation - Step 1.5: Add button to generate QR code comment and add the following code to create a button that will generate the QR code when the user selects it:

       Button {
           viewModel.createDeviceEngagementString()
           // Navigates user to presentCredentialsView, once the string has been created.
           viewModel.navigationPath.append(NavigationState.presentCredentials)
       } label: {
           Text("Present Credentials")
       }

Now, when the user selects the Create QR Code button, the application will call the SDK's createProximityPresentationSession method, which returns a ProximityPresentationSession instance that includes a deviceEngagement string in base64 format:

"mdoc:owBjMS4wAYIB2BhYS6QBAiABIVgghaBYJe7KSqcEolhmnIJaYJ2AIevkKbEy5xP7tkwlqAwiWCAMGCGe6uFI2hKeghb59h_K4hPV-Ldq6vnaxsRiySMH9gKBgwIBowD0AfULUKRoj0ZH60Qco-m0k97qRSQ"

The deviceEngagement string is always prefixed with mdoc: and contains the information required to establish a secure connection between the two devices, including:

• Wireless communication protocols supported by the holder.
• How the verifier can connect with the holder.
• Ephemeral public key which is unique to the current session.
• Additional feature negotiations.

Your app needs to convert this deviceEngagement string into a QR code and display it in the wallet UI for the verifier to scan.

6. Replace the return nil statement under the // Proximity Presentation - Step 1.6: Generate QR code comment with the following code to retrieve data from the deviceEngagement string and convert it into a QR code:

       guard let filter = CIFilter(name: "CIQRCodeGenerator") else { return nil }
       filter.setValue(data, forKey: "inputMessage")
       guard let ciimage = filter.outputImage else { return nil }
       let transform = CGAffineTransform(scaleX: 10, y: 10)
       let scaledCIImage = ciimage.transformed(by: transform)
       let uiimage = UIImage(ciImage: scaledCIImage)
       return uiimage.pngData()

7. Replace the EmptyView() statement under the // Proximity Presentation - Step 1.7: Create QR code view comment with the following code to generate a QR Code and display it to the user:

       VStack {
           Text("Scan to establish device engagement session")
               .font(.title3)
           Spacer()
           if let imageData =  generateQRCode(data: viewModel.deviceEngagementString?.data(using: .utf8) ?? Data()),
              let image = UIImage(data: imageData) {
               Image(uiImage: image)
                   .resizable()
                   .aspectRatio(contentMode: .fit)
           }
           Spacer()
       }

8. Run the app and select the Present Credentials button. You should see a result similar to the following:

• As the user selects the Present Credentials button, they are navigated to the new view, and a new proximity presentation session is created.
• Once the session is created, the application generates and displays a QR code that can be scanned by a verifier device to establish a secure proximity communication channel over Bluetooth.
• Once the QR code is displayed, the createProximityPresentationSession function enters a listening state, ready to establish a Bluetooth connection with a verifier application that scans the QR Code.
• When a verifier application scans the QR code, the devices will automatically exchange public keys to establish a secure communication channel, enabling the verifier to send a presentation request, which details:
  • What credentials are required.
  • What specific claims are required from these credentials.

1. In your Claim a tutorial application project, create a new file named PresentationQrScreen.kt and add the following code:

   import android.app.Activity
   import android.graphics.Bitmap
   import android.graphics.Color
   import android.widget.Toast
   import androidx.compose.foundation.Image
   import androidx.compose.foundation.layout.Box
   import androidx.compose.foundation.layout.aspectRatio
   import androidx.compose.foundation.layout.fillMaxSize
   import androidx.compose.runtime.Composable
   import androidx.compose.runtime.LaunchedEffect
   import androidx.compose.runtime.getValue
   import androidx.compose.runtime.mutableStateOf
   import androidx.compose.runtime.remember
   import androidx.compose.runtime.setValue
   import androidx.compose.ui.Modifier
   import androidx.compose.ui.graphics.asImageBitmap
   import androidx.compose.ui.layout.onSizeChanged
   import androidx.compose.ui.unit.IntSize
   import androidx.navigation.NavController
   import com.google.zxing.BarcodeFormat
   import com.google.zxing.EncodeHintType
   import com.google.zxing.qrcode.decoder.ErrorCorrectionLevel
   import com.journeyapps.barcodescanner.BarcodeEncoder
   import global.mattr.mobilecredential.holder.MobileCredentialHolder
   import global.mattr.mobilecredential.holder.ProximityPresentationSession
   import kotlinx.coroutines.Dispatchers
   import kotlinx.coroutines.withContext
   
   @Composable
   fun PresentationQrScreen(activity: Activity, navController: NavController) {
       var containerSize by remember { mutableStateOf(IntSize.Zero) }
       var session: ProximityPresentationSession? by remember { mutableStateOf(null) }
       var qrCode: Bitmap? by remember { mutableStateOf(null) }
   
       LaunchedEffect(Unit) {
           // Step 1.4: Create a Proximity presentation session
       }
   
       LaunchedEffect(session, containerSize) {
           // Step 1.6: Generate a QR code
       }
   
       Box(
           modifier = Modifier
               .aspectRatio(1f)
               .onSizeChanged { containerSize = it }
       ) {
           qrCode?.let {
               Image(
                   bitmap = it.asImageBitmap(),
                   contentDescription = "A QR Code",
                   modifier = Modifier.fillMaxSize()
               )
           }
       }
   }
   
   // Step 1.5: Create function to generate QR Code from String

2. Return to your MainActivity file and add the following code under the // Proximity Presentation - Step 1.2: Add "QR Presentation" screen call comment to connect the created composable to the navigation graph:

   PresentationQrScreen(this@MainActivity, navController)

3. Still in the MainActivity file file, add the following code under the // Proximity Presentation - Step 1.3: Add button for starting the credentials presentation workflow comment to add a button that navigates the user to the PresentationQrScreen:

   Button(onClick = { navController.navigate("presentationQr") }, Modifier.fillMaxWidth()) {
       Text("Present Credentials")
   }

4. Open the PresentationQrScreen.kt file and add the following code under the // Step 1.4: Create a Proximity presentation session comment to call the createProximityPresentationSession function when the screen is loaded:

   session = MobileCredentialHolder.getInstance().createProximityPresentationSession(
       activity,
       onRequestReceived = { _, requests, e ->
           // Step 2.2: Handle the presentation request
       }
   )

Now, when the PresentationQrScreen is loaded, the application will call the SDK's createProximityPresentationSession function, which returns a ProximityPresentationSession instance that includes a deviceEngagement string in base64 format:

"mdoc:owBjMS4wAYIB2BhYS6QBAiABIVgghaBYJe7KSqcEolhmnIJaYJ2AIevkKbEy5xP7tkwlqAwiWCAMGCGe6uFI2hKeghb59h_K4hPV-Ldq6vnaxsRiySMH9gKBgwIBowD0AfULUKRoj0ZH60Qco-m0k97qRSQ"

This deviceEngagement string is always prefixed with mdoc: and contains the information required to establish a secure connection between the holder and verifier devices, including:

• Wireless communication protocols supported by the holder.
• How the verifier can connect with the holder.
• Ephemeral public key which is unique to the current session.
• Additional feature negotiations.

Your application needs to convert this deviceEngagement string into a QR code and display it in the PresentationQrScreen for the verifier to scan.

5. Add the following code under the // Step 1.5: Create function to generate QR Code from String comment to add a function that converts a String to a QR code rendered as a Bitmap image:

   private fun String.toQrCode(size: IntSize): Bitmap? {
       if (this.isEmpty() || size == IntSize.Zero) return null
   
       val (width, height) = size
       return Bitmap.createBitmap(width, height, Bitmap.Config.RGB_565).apply {
           val hints = mapOf(EncodeHintType.ERROR_CORRECTION to ErrorCorrectionLevel.M)
           val encoded = BarcodeEncoder()
               .encode(this@toQrCode, BarcodeFormat.QR_CODE, width, height, hints)
   
           for (x in 0 until width) {
               for (y in 0 until height) {
                   setPixel(x, y, if (encoded[x, y]) Color.BLACK else Color.WHITE)
               }
           }
       }
   }

To generate the QR code, you need the ProximityPresentationSession to be established by the SDK and the container size to be calculated.

6. Add the following code under the // Step 1.6: Generate a QR code comment to call the new toQrCode function and generate the QR code when the session or containerSize state changes:

   qrCode = session?.deviceEngagement?.toQrCode(containerSize)

7. Run the app, and select the Present Credentials button. You should see a result similar to the following:

• As the user selects the Present Credentials button, they are navigated to the new PresentationQrScreen, and a new proximity presentation session is created.
• Once the session is created, the application generates and displays a QR code that can be scanned by a verifier device to establish a secure proximity communication channel over Bluetooth.
• Once the QR code is displayed, the createProximityPresentationSession function enters a listening state, ready to establish a Bluetooth connection with a verifier application that scans the QR Code.
• When a verifier application scans the QR code, the devices will automatically exchange public keys to establish a secure communication channel, enabling the verifier to send a presentation request, which details:
  • What credentials are required.
  • What specific claims are required from these credentials.

1. In your project's app directory, create a new file named proximity-presentation.tsx and add the following scaffolding code to create a new screen that will display the generated QR code:

   // Step 2.2: Import Credential selector component
   
   import { useHolder } from "@/providers/HolderProvider";
   import {
     type PresentationSessionSuccessRequest,
     createProximityPresentationSession,
     sendProximityPresentationResponse,
     terminateProximityPresentationSession,
   } from "@mattrglobal/mobile-credential-holder-react-native";
   import { useRouter } from "expo-router";
   import React, { useState, useCallback, useEffect } from "react";
   import {
     Alert,
     StyleSheet,
     Text,
     TouchableOpacity,
     View,
   } from "react-native";
   import QRCode from "react-native-qrcode-svg";
   
   export default function ProximityPresentation() {
     const router = useRouter();
     const { isHolderInitialised } = useHolder();
     const [error, setError] = useState<string | null>(null);
     const [deviceEngagement, setDeviceEngagement] = useState<string | null>(
       null,
     );
     const [requests, setRequests] = useState<
       PresentationSessionSuccessRequest["request"]
     >([]);
     const [selectedCredentialIds, setSelectedCredentialIds] = useState<
       string[]
     >([]);
   
     const navigateToIndex = useCallback(() => {
       router.push("/");
     }, [router]);
   
     const resetState = useCallback(() => {
       setDeviceEngagement(null);
       setRequests([]);
       setSelectedCredentialIds([]);
     }, []);
   
     const handleError = useCallback((message: string) => {
       setError(message);
       console.error(message);
     }, []);
   
     // Step 2.3: Add handleToggleSelection function
   
     if (!isHolderInitialised) {
       return (
         <View style={styles.container}>
           <Text style={styles.errorText}>
             Holder instance not found. Please restart the app and try again.
           </Text>
         </View>
       );
     }
   
     // Step 1.2: Add handleStartSession function
   
     // Step 1.6: Add terminateSession function
   
     // Step 3.1: Add handleSendResponse function
   
     return (
       <View style={styles.container}>
         {error && <Text style={styles.errorText}>{error}</Text>}
         {/* Step 1.3: Add fallback UI */}
       </View>
     );
   }
   
   const styles = StyleSheet.create({
     container: { flex: 1, padding: 16, paddingBottom: 32 },
     errorText: { color: "red", marginBottom: 10 },
     infoText: { marginBottom: 10 },
     qrContainer: { alignItems: "center", marginVertical: 20 },
     button: {
       backgroundColor: "#007AFF",
       paddingVertical: 12,
       paddingHorizontal: 20,
       borderRadius: 8,
       alignItems: "center",
       marginTop: 20,
     },
     buttonDanger: {
       backgroundColor: "#FF3B30",
     },
     buttonText: {
       color: "white",
       fontSize: 16,
       fontWeight: "600",
     },
   });

2. Add the following code under the // Step 1.2: Add handleStartSession function comment to create a new handleStartSession function that calls the SDK's createProximityPresentationSession function:

   const handleStartSession = useCallback(async () => {
     try {
       const result = await createProximityPresentationSession({
         onRequestReceived: (data) => {
           if ("error" in data) {
             handleError(`Request received error: ${data.error}`);
             return;
           }
           setRequests(data.request);
         },
         onSessionTerminated: () => {
           resetState();
           navigateToIndex();
         },
       });
       if (result.isErr()) {
         throw new Error(
           `Error creating proximity session: ${JSON.stringify(result.error)}`,
         );
       }
       setDeviceEngagement(result.value.deviceEngagement);
     } catch (err: any) {
       handleError(err.message);
     }
   }, [handleError, resetState, navigateToIndex]);
   
   // Automatically start session when component mounts
   useEffect(() => {
     handleStartSession();
   }, [handleStartSession]);

3. Add the following code under the {/* Step 1.3: Add fallback UI */} comment to display a message to the user while the proximity session is being established:

   {
     !deviceEngagement ? (
       <>
         <Text style={styles.infoText}>
           Waiting for session to establish...
         </Text>
       </>
     ) : (
       <>{/* Step 1.4: Display QR code */}</>
     );
   }

   Now, when the user navigates to the Proximity Presentation screen, the handleStartSession function is called and creates a new proximity presentation session by calling the SDK's createProximityPresentationSession function. This SDK function returns a ProximityPresentationSession instance that includes a deviceEngagement string in Base64 format:

   "mdoc:owBjMS4wAYIB2BhYS6QBAiABIVgghaBYJe7KSqcEolhmnIJaYJ2AIevkKbEy5xP7tkwlqAwiWCAMGCGe6uFI2hKeghb59h_K4hPV-Ldq6vnaxsRiySMH9gKBgwIBowD0AfULUKRoj0ZH60Qco-m0k97qRSQ"

   The deviceEngagement string is always prefixed with mdoc: and contains the information required to establish a secure connection between the two devices, including:

   • Wireless communication protocols supported by the holder.
   • How the verifier can connect with the holder.
   • Ephemeral public key which is unique to the current session.
   • Additional feature negotiations.

   Your app needs to convert this deviceEngagement string into a QR code and display it so that the verifier can scan it.

4. Add the following code under the {/* Step 1.4: Display QR code */} comment to use the deviceEngagement variable to generate a QR code and display it:

   <>
     <Text style={styles.infoText}>A proximity session is active.</Text>
     {requests.length === 0 ? (
       <View style={styles.qrContainer}>
         <QRCode value={deviceEngagement} size={200} />
         {/* Step 1.7: Add Terminate session button */}
       </View>
     ) : (
       <>
         {/* Step 2.4: Display request details */}
   
         {/* Step 3.2: Send response */}
       </>
     )}
   </>

5. Open the index.tsx file in the app directory and add the following code under the {/* Proximity Presentation - Step 1.5: Add Proximity Presentation button */} comment to add a new button to navigate to the new proximity-presentation screen created in the previous steps:

   <TouchableOpacity
     style={styles.button}
     onPress={() => router.replace("/proximity-presentation")}
   >
     <Text style={styles.buttonText}>Proximity Presentation</Text>
   </TouchableOpacity>

Proximity verification workflows require the use of Bluetooth to establish a secure communication channel with a verifier device. To enable this feature for iOS applications, you need to adjust the app configuration to include the necessary permissions.

To properly manage proximity sessions, we will create two functions that allow the application to gracefully handle scenarios where users navigate away from the screen before completing the verification process.

6. Add the following code under the {/* Proximity Presentation - Step 1.7: Add terminateSession function */} comment to create the terminateSession and handleTerminateSession functions:

   const terminateSession = useCallback(async () => {
     try {
       await terminateProximityPresentationSession();
       resetState();
       navigateToIndex();
     } catch (err: any) {
       handleError(`Failed to terminate session: ${err.message}`);
     }
   }, [isHolderInitialised, resetState, handleError, navigateToIndex]);
   
   const handleTerminateSession = useCallback(async () => {
     await terminateSession();
   }, [terminateSession]);
   
   useEffect(() => {
     return () => {
       if (deviceEngagement) {
         terminateSession();
       }
     };
   }, [deviceEngagement, terminateSession]);

7. Add the following code under the {/* Proximity Presentation - Step 1.7: Add Terminate session button */} comment to create a button that will call the handleTerminateSession function when selected:

   <TouchableOpacity
     style={[styles.button, styles.buttonDanger]}
     onPress={handleTerminateSession}
   >
     <Text style={styles.buttonText}>Terminate Session</Text>
   </TouchableOpacity>

   The handleTerminateSession function is called when the user selects the Terminate Session button, and it displays an alert to confirm that the session has been terminated.

   The useEffect hook acts as a cleanup function when the component is unmounted or if the user navigates away from the screen. If a proximity session is active, it calls the terminateSession function to end the session.

   The terminateSession function calls the SDK's terminateProximityPresentationSession method to end the current proximity presentation session and reset the application state.

8. Run the app and select the Proximity Presentation button. You should see a result similar to the following:

• As the user selects the Proximity Presentation button a new proximity presentation session is created.

• Once the session is created, the application retrieves the deviceEngagement string and uses it to generate and display a QR code that can be scanned by a verifier device to establish a secure proximity communication channel over Bluetooth.

• Once the QR code is displayed, the createProximityPresentationSession function enters a listening state, ready to establish a Bluetooth connection with a verifier application that scans the QR Code.

• When a verifier application scans the QR code, the devices will automatically exchange public keys to establish a secure communication channel, enabling the verifier to send a presentation request, which details:

  • What credentials are required.
  • What specific claims are required from these credentials.

  We will implement the logic that handles this presentation request in the next step.

1. Add the following code under the // Proximity and Online Presentation: Create variables for credential presentations comment to create the following variables:

       @Published var matchedCredentials: [MobileCredential] = []
       @Published var matchedMetadata: [MobileCredentialMetadata] = []
       @Published var credentialRequest: [MobileCredentialRequest] = []

   • matchedCredentials : Holds stored credentials that match the credential request.
   • matchedMetadata : Holds metadata of credentials that match the credential request.
   • credentialRequest: Holds the credentials that were requested for verification.

Once the application receives a credential request from a verifier (onRequestReceived event), the createProximityPresentationSession function will return a mobileCredentialRequests array that includes pairs of credentials requested by the verifier (MobileCredentialRequest) and the metadata of stored credentials that match the requested information (MobileCredentialMetadata).

2. Replace the print statements under the // Proximity Presentation - Step 2.2: Store credential requests and matched credentials comment with the following code to store the values from the mobileCredentialRequests array in the matchedMetadata and credentialRequest variables:

        Task { @MainActor in
            matchedMetadata = mobileCredentialRequests?
                .flatMap { $0.matchedMobileCredentials }
                .compactMap { $0 } ?? []

            credentialRequest = mobileCredentialRequests?
                .compactMap { $0.request }
                .compactMap { $0 } ?? []
            // Navigate to presentation view if there are no errors
            if error == nil {
                navigationPath.append(NavigationState.proximityPresentation)
            } else {
                print(error!)
            }
        }

3. Replace the print statement under the // Proximity and Online Presentation: Retrieve a credential from storage comment with the following code create a function that uses the SDK's getCredential method to retrieve a credential from the application storage:

       Task {
           do {
               let credential = try await mobileCredentialHolder.getCredential(credentialId: id)
               matchedCredentials.append(credential)
           } catch {
               print(error)
           }
       }

   The MobileCredentialMetadata object does not include the values of claims included in the credential. To display these values, the above function calls the SDK's getCredential method with the id property of the MobileCredentialMetadata.

4. Create a new file called PresentCredentialsView.swift and paste the following code to create a view to display credential requests and matching credentials stored in the application:

   import MobileCredentialHolderSDK
   import SwiftUI
   
   struct PresentCredentialsView: View {
       @ObservedObject var viewModel: PresentCredentialsViewModel
       @State var selectedID: String?
   
       init(viewModel: PresentCredentialsViewModel) {
           self.viewModel = viewModel
       }
   
       var body: some View {
           ScrollView {
               VStack(alignment: .leading, spacing: 20) {
                   Text("Requested Documents")
                       .font(.headline)
                       .padding(.leading)
   
                   ForEach(viewModel.requestedDocuments, id: \.docType) { requestedDocument in
                       DocumentView(viewModel: DocumentViewModel(from: requestedDocument))
                   }
   
                   Text("Matched Credentials")
                       .font(.headline)
                       .padding(.leading)
   
                   ForEach(viewModel.matchedMetadata, id: \.id) { matchedMetadata in
                       VStack(alignment: .leading, spacing: 10) {
                           if let matchedCredential = viewModel.matchedMobileCredential(id: matchedMetadata.id) {
                               DocumentView(viewModel: DocumentViewModel(from: matchedCredential))
                                   .padding(.vertical)
                                   .background(selectedID == matchedMetadata.id ? Color.blue.opacity(0.2) : Color.clear)
                                   .onTapGesture {
                                       guard selectedID != matchedMetadata.id else {
                                           selectedID = nil
                                           return
                                       }
                                       selectedID = matchedMetadata.id
                                   }
                               Button("Hide claim values") {
                                   viewModel.matchedCredentials.removeAll(where: { $0.id == matchedMetadata.id })
                               }
                               .frame(maxWidth: .infinity, alignment: .center)
                           } else {
                               DocumentView(viewModel: DocumentViewModel(from: matchedMetadata))
                                   .padding(.vertical)
                                   .background(selectedID == matchedMetadata.id ? Color.blue.opacity(0.2) : Color.clear)
                                   .onTapGesture {
                                       guard selectedID != matchedMetadata.id else {
                                           selectedID = nil
                                           return
                                       }
                                       selectedID = matchedMetadata.id
                                   }
                               Button("Show claim values") {
                                   viewModel.getCredentialAction(matchedMetadata.id)
                               }
                               .frame(maxWidth: .infinity, alignment: .center)
                           }
                       }
                   }
               }
           }
           if selectedID != nil {
               Button("Send Response") {
                   viewModel.sendCredentialAction(selectedID!)
               }
               .buttonStyle(.borderedProminent)
               .clipShape(Capsule())
               .frame(maxWidth: .infinity, alignment: .center)
           }
       }
   }
   
   // MARK: PresentCredentialsViewModel
   
   class PresentCredentialsViewModel: ObservableObject {
       @Binding var requestedDocuments: [MobileCredentialRequest]
       @Binding var matchedCredentials: [MobileCredential]
       @Binding var matchedMetadata: [MobileCredentialMetadata]
   
       var getCredentialAction: (String) -> Void
       var sendCredentialAction: (String) -> Void
   
       init(
           requestedDocuments: Binding<[MobileCredentialRequest]>,
           matchedCredentials: Binding<[MobileCredential]>,
           matchedMetadata: Binding<[MobileCredentialMetadata]>,
           sendCredentialAction: @escaping (String) -> Void,
           getCredentialAction: @escaping (String) -> Void
       ) {
           self._requestedDocuments = requestedDocuments
           self._matchedCredentials = matchedCredentials
           self._matchedMetadata = matchedMetadata
           self.sendCredentialAction = sendCredentialAction
           self.getCredentialAction = getCredentialAction
       }
   
       func matchedMobileCredential(id: String) -> MobileCredential? {
           matchedCredentials.first(where: { $0.id == id })
       }
   }

   The PresentCredentialsView view is used to:

   • Display requested information.
   • Display stored credentials that include the requested information.
   • Enable the user to provide consent to sharing the requested information with the verifier.

   The PresentCredentialsViewModel object is used to reference values from a credential request. It takes two closures in its initializer:

   • getCredentialAction: (String) -> Void is used to display claim values.
   • sendCredentialAction: (String) -> Void is used to send a credential response to the verifier once the user selected a credential and provided consent by selecting the Send Response button.

5. Return to the ContentView file and replace the EmptyView() statement under the // Proximity Presentation - Step 2.5: Display proximity presentation view comment with the new view that you created:

                   PresentCredentialsView(
                       viewModel: PresentCredentialsViewModel(
                           requestedDocuments: $viewModel.credentialRequest,
                           matchedCredentials: $viewModel.matchedCredentials,
                           matchedMetadata: $viewModel.matchedMetadata,
                           sendCredentialAction: viewModel.sendProximityPresentationResponse(id:),
                           getCredentialAction: viewModel.getCredential(id:)
                       )
                   )

6. Run the app, select the Present Credentials button and then select the Create QR code button. Next, use your testing verifier app to scan the presented QR code and send a presentation request. You should see a result similar to the following:

As the user selects the Present Credentials button, the wallet generates and displays a QR code.

When a compliant verifier app scans the QR code, a secure communication channel is established via Bluetooth. The verifier then sends a presentation request, which is displayed to the user on their digital wallet, alongside any credentials they have stored in their wallet that match the request.

When the user selects the Show claim values button, the SDK retrieves the corresponding credential and the application displays its claim values.

When the user selects a credential, it is highlighted and the Send Response button appears at the bottom of the screen.

1. In your MainActivity file, add the following code under the // Step 2.1: Add proximity presentation request variable comment to create a new variable that will hold the presentation request information and share it between the screens:

   var proximityPresentationRequest: ProximityPresentationSession.CredentialRequestInfo? = null

2. Open the PresentationQrScreen.kt file and add the following code under the // Step 2.2: Handle the presentation request comment to navigate to a new screen when an onRequestReceived event is received.

   if (e == null && !requests.isNullOrEmpty()) {
       // Using only the first request for simplicity
       SharedData.proximityPresentationRequest = requests.first()
       withContext(Dispatchers.Main) {
           navController.navigate("presentationSelectCredentials")
       }
   } else {
       val msg = "Error while retrieving the request"
       withContext(Dispatchers.Main) {
           Toast.makeText(activity, msg, Toast.LENGTH_SHORT).show()
       }
   }

3. Create a new file named PresentationSelectCredentialsScreen.kt and add the following code to create the new screen which displays matching credentials and enables the user to select which credential to share:

   import android.app.Activity
   import androidx.compose.foundation.border
   import androidx.compose.foundation.clickable
   import androidx.compose.foundation.layout.Column
   import androidx.compose.foundation.layout.Spacer
   import androidx.compose.foundation.layout.fillMaxWidth
   import androidx.compose.foundation.layout.padding
   import androidx.compose.foundation.rememberScrollState
   import androidx.compose.foundation.shape.RoundedCornerShape
   import androidx.compose.foundation.verticalScroll
   import androidx.compose.material3.Button
   import androidx.compose.material3.Card
   import androidx.compose.material3.MaterialTheme
   import androidx.compose.material3.Text
   import androidx.compose.runtime.Composable
   import androidx.compose.runtime.getValue
   import androidx.compose.runtime.mutableStateOf
   import androidx.compose.runtime.remember
   import androidx.compose.runtime.rememberCoroutineScope
   import androidx.compose.runtime.setValue
   import androidx.compose.ui.Modifier
   import androidx.compose.ui.graphics.Color
   import androidx.compose.ui.unit.dp
   import global.mattr.mobilecredential.common.deviceretrieval.devicerequest.DataElements
   import global.mattr.mobilecredential.common.deviceretrieval.deviceresponse.NameSpace
   import global.mattr.mobilecredential.common.dto.MobileCredential
   import global.mattr.mobilecredential.common.dto.MobileCredentialMetaData
   import global.mattr.mobilecredential.holder.MobileCredentialHolder
   import kotlinx.coroutines.launch
   
   @Composable
   fun PresentationSelectCredentialsScreen(activity: Activity) {
       val request = SharedData.proximityPresentationRequest ?: return
   
       var matchedCredentials by remember { mutableStateOf(request.matchedCredentials) }
       var selectedCredentialId by remember { mutableStateOf(matchedCredentials.first().id) }
       val coroutineScope = rememberCoroutineScope()
   
       Column(Modifier.verticalScroll(rememberScrollState())) {
           Text("REQUESTED DATA", style = MaterialTheme.typography.titleLarge)
           Card(Modifier.padding(vertical = 8.dp)) {
               Document(request.request.docType, request.request.nameSpaces.value.toUi())
           }
           Spacer(Modifier.padding(12.dp))
   
           Text("MATCHED CREDENTIALS", style = MaterialTheme.typography.titleLarge)
           Spacer(Modifier.padding(6.dp))
           matchedCredentials.forEach { matchedCredential ->
               // Step 2.5: Display matching credentials and claims
           }
   
           // Step 3.2: Send response
       }
   }
   
   // Step 2.4: Create function to add values to claims
   
   private fun Map<NameSpace, DataElements>.toUi() = mapValues { (_, dataElements) ->
       dataElements.value.keys.toSet()
   }
   
   // Step 3.1: Create function to send the credential response

The application retrieves information from the SDK's ProximityPresentationSession object and displays it to the user:

• Credentials and claims included in the verification request are retrieved from the docType and nameSpaces.value properties and displayed in the "REQUESTED INFORMATION" area.
• Available credentials that match the requested information are retrieved from the matchedCredentials property and displayed in the "MATCHING CREDENTIALS" area.

4. Add the following code under the // Step 2.4: Create function to add values to claims comment to create a new function that will enable displaying the values of the claims the user is about to share.

   private fun List<MobileCredentialMetaData>.withClaimValues(
       from: MobileCredential
   ): List<MobileCredentialMetaData> = map { credential ->
       if (credential.id != from.id) {
           credential
       } else {
           credential.copy(
               claims = credential.claims.mapValues { (namespace, claims) ->
                   claims.map { claim ->
                       val claimValue = from.claims[namespace]?.get(claim)
                       claimValue?.let { "$claim: ${it.toUiString()}" } ?: claim
                   }.toSet()
               }
           )
       }
   }

5. Add the following code under the // Step 2.5: Display matching credentials and claims comment to display to the user what credentials and claims they are about to share with the verifier, as well as a button that enables the user to display the value of those claims:

   val borderWidth = if (matchedCredential.id == selectedCredentialId) 4.dp else 0.dp
   Column(
       Modifier
           .clickable { selectedCredentialId = matchedCredential.id }
           .border(borderWidth, Color.Blue, RoundedCornerShape(16.dp))
           .padding(8.dp)
   ) {
       Card(Modifier.fillMaxWidth()) {
           Document(matchedCredential.docType, matchedCredential.claims)
       }
   
       Button(
           onClick = {
               val credentialWithValues = MobileCredentialHolder.getInstance()
                   .getCredential(matchedCredential.id, skipStatusCheck = true)
   
               matchedCredentials =
                   matchedCredentials.withClaimValues(from = credentialWithValues)
           },
           Modifier.fillMaxWidth()
       ) { Text("Show Values") }
   }
   Spacer(Modifier.padding(12.dp))

6. Back in the MainActivity file, add the following code under the // Proximity Presentation - Step 2.6: Add "Select Credential" screen call comment to connect the created composable to the navigation graph:

   PresentationSelectCredentialsScreen(this@MainActivity)

7. Run the app, and select the Present Credentials button. Next, use your testing verifier app to scan the presented QR code and send a presentation request. You should see a result similar to the following:

• As the user selects the Present Credentials button, they are navigated to the new PresentCredentialsView where the application generates and displays a QR code.
• When a compliant verifier app scans the QR code, a secure communication channel is established via Bluetooth.
• The verifier then sends a presentation request, which is displayed to the user alongside any credentials they have stored that match the request.

1. In the app/components directory, create a file named RequestCredentialSelector.tsx and add the following code:

import type {
  MobileCredentialMetadata,
  OnlinePresentationSession,
} from "@mattrglobal/mobile-credential-holder-react-native";
import type React from "react";
import {
  FlatList,
  type ListRenderItem,
  StyleSheet,
  Text,
  TouchableOpacity,
  View,
} from "react-native";

type RequestCredentialSelectorProps = {
  requests: PresentationSessionSuccessRequest["request"];
  selectedCredentialIds: string[];
  onToggleSelection: (credentialId: string) => void;
};

type RequestItem = PresentationSessionSuccessRequest["request"][number];

/**
 * Component that renders a list of credential requests and their matched credentials.
 *
 * @param props - The component props.
 * @param props.requests - The list of credential requests.
 * @param props.selectedCredentialIds - The list of selected credential IDs.
 * @param props.onToggleSelection - Callback function to toggle the selection of a credential.
 * @returns The rendered component.
 */
export default function RequestCredentialSelector({
  requests,
  selectedCredentialIds,
  onToggleSelection,
}: RequestCredentialSelectorProps) {
  const renderCredential: ListRenderItem<MobileCredentialMetadata> = ({
    item: cred,
  }) => {
    const isSelected = selectedCredentialIds.includes(cred.id);
    return (
      <TouchableOpacity
        style={styles.credentialItem}
        onPress={() => onToggleSelection(cred.id)}
      >
        <View style={styles.selectionIndicator}>
          {isSelected && <View style={styles.selectionInner} />}
        </View>
        <Text style={styles.credentialText}>
          {cred.branding?.name ?? "Credential"} ({cred.id})
        </Text>
      </TouchableOpacity>
    );
  };

  const renderRequest: ListRenderItem<RequestItem> = ({ item }) => (
    <View style={styles.requestContainer}>
      <Text style={styles.label}>Request Details</Text>
      <Text style={styles.requestInfo}>
        {typeof item.request === "object"
          ? JSON.stringify(item.request, null, 2)
          : item.request}
      </Text>
      <Text style={styles.label}>Matched Credentials:</Text>
      <FlatList
        data={item.matchedCredentials}
        keyExtractor={(cred) => cred.id}
        renderItem={renderCredential}
        style={styles.credentialsList}
        contentContainerStyle={styles.credentialsListContent}
      />
    </View>
  );

  return (
    <FlatList
      data={requests}
      keyExtractor={(_, idx) => idx.toString()}
      renderItem={renderRequest}
      style={styles.requestsList}
      contentContainerStyle={styles.requestsListContent}
    />
  );
}

const styles = StyleSheet.create({
  requestsList: {
    flex: 1,
  },
  requestsListContent: {
    paddingBottom: 10,
  },
  requestContainer: {
    backgroundColor: "#f0f0f0",
    padding: 10,
    borderRadius: 8,
    marginBottom: 15,
  },
  requestInfo: {
    fontStyle: "italic",
    fontSize: 12,
    marginBottom: 10,
  },
  label: {
    fontWeight: "bold",
    fontSize: 14,
    textTransform: "uppercase",
    marginBottom: 5,
  },
  credentialsList: {
    maxHeight: 200,
  },
  credentialsListContent: {
    paddingBottom: 10,
  },
  credentialItem: {
    flexDirection: "row",
    alignItems: "center",
    marginBottom: 8,
    paddingVertical: 4,
  },
  selectionIndicator: {
    height: 20,
    width: 20,
    borderRadius: 10,
    borderWidth: 1,
    borderColor: "#000",
    alignItems: "center",
    justifyContent: "center",
    marginRight: 8,
  },
  selectionInner: {
    height: 10,
    width: 10,
    borderRadius: 5,
    backgroundColor: "#000",
  },
  credentialText: {
    fontSize: 16,
  },
});

This component displays all existing credentials that match the verification request, and provides a UI for the user to select the credential they wish to share.

Identifiers of the selected credentials are assigned to the selectedCredentialIds variable, making them available for use in the next steps.

2. Add the following code under the // Step 2.2: Import Credential selector component comment in the proximity-presentation.tsx file to import the RequestCredentialSelector component created in the previous step:

import RequestCredentialSelector from "@/components/RequestCredentialSelector";

Before we can display and use the RequestCredentialSelector component, we need to implement a functionality that allows users to select which credentials they want to share.

The handleToggleSelection function updates the selectedCredentialIds state array when users tap on credentials. This function is passed to the RequestCredentialSelector component to handle selection state, and the resulting array of selected credential identifiers will be used when sending the presentation response to the verifier.

3. Add the following code under the // Step 2.3: Add handleToggleSelection function comment to create the handleToggleSelection function:

const handleToggleSelection = useCallback((id: string) => {
  setSelectedCredentialIds(
    (prev) =>
      prev.includes(id)
        ? prev.filter((item) => item !== id) // Remove if already selected
        : [...prev, id], // Add if not selected
  );
}, []);

4. Add the following code under the {/* Step 2.4: Display request details */} comment to display the RequestCredentialSelector component to the user, enabling them to select which credentials to share:

<RequestCredentialSelector
  requests={requests}
  selectedCredentialIds={selectedCredentialIds}
  onToggleSelection={handleToggleSelection}
/>

5. Run the app, select the Proximity Presentation button and the use your verifier testing device to scan the displayed QR code. You should see a result similar to the following:

• As the user selects the Proximity Presentation button a new proximity presentation session is created and a QR code is displayed.

• When a verifier application scans the QR code, the devices will automatically exchange public keys to establish a secure communication channel, enabling the verifier to send a presentation request, which details:

  • What credentials are required.
  • What specific claims are required from these credentials.

• The request details are then displayed by the RequestCredentialSelector component and enable the user to select which matching credential to share with the verifier.

We will implement the logic to share the information with the verifier in the next step.

1. In the ContentView file replace the print statement under the // Proximity Presentation - Step 3.1: Send a credential response comment with the following code to call the sendResponse method when the user selects the Send Response button:

       Task {
           do {
               let _ = try await proximityPresentationSession?.sendResponse(credentialIds: [id])
               // set presentation session to nil after sending a response
               onlinePresentationSession = nil
               // Return to root view after the response is sent
               navigationPath = NavigationPath()
           } catch {
               print(error)
           }
       }

   The sendResponse function signs the presentation response with the user’s device private key (to prove Device authentication) and shares it as an encoded CBOR file.

1. Open the PresentationSelectCredentialsScreen.kt file and add the following code under the // Step 3.1: Create function to send the credential response comment to create a new function that calls the SDK's sendResponse method.

   private suspend fun sendResponse(credentialId: String, activity: Activity) {
       MobileCredentialHolder.getInstance()
           .getCurrentProximityPresentationSession()
           ?.sendResponse(listOf(credentialId), activity)
   }

   The sendResponse function signs the presentation response with the user’s device private key (to prove Device authentication) and shares it as an encoded CBOR file.

2. Add the following code under the // Step 3.2: Send response to call the created sendResponse function when the user selects the "Send Response" button:

   Button(
       onClick = {
           coroutineScope.launch { sendResponse(selectedCredentialId, activity) }
       },
       Modifier.fillMaxWidth()
   ) { Text("Send Response") }

1. Add the following code under the // Step 3.1: Add handleSendResponse function comment to create a new handleSendResponse function that calls the SDK's sendProximityPresentationResponse function:

   const handleSendResponse = useCallback(async () => {
     if (selectedCredentialIds.length === 0) {
       Alert.alert(
         "No Credentials Selected",
         "Please select at least one credential to send.",
       );
       return;
     }
     try {
       const result = await sendProximityPresentationResponse({
         credentialIds: selectedCredentialIds,
       });
       if (result.isErr()) {
         await terminateSession();
         throw new Error(`Error sending proximity response: ${result.error}`);
       }
       Alert.alert("Success", "Presentation response sent successfully!");
       navigateToIndex();
     } catch (err: any) {
       handleError(err.message);
     }
   }, [selectedCredentialIds, handleError, terminateSession, navigateToIndex]);

2. Add the following code under the {/* Step 3.2: Send response */} comment to add a new button that calls the handleSendResponse function created in the previous step:

   <TouchableOpacity style={styles.button} onPress={handleSendResponse}>
     <Text style={styles.buttonText}>Share credential</Text>
   </TouchableOpacity>

   The sendProximityPresentationResponse function signs the presentation response with the user’s device private key (to prove Device authentication) and shares it as an encoded CBOR file.