fix: qr scanner now reactivates and shows err msg

packages/agent/src/parsers.ts

@@ -1,9 +1,11 @@
 import type { AppAgent } from './agent'
 import type {
+  ConnectionRecord,
   CredentialStateChangedEvent,
   JwkDidCreateOptions,
   KeyDidCreateOptions,
   OutOfBandInvitation,
+  OutOfBandRecord,
   ProofStateChangedEvent,
   W3cCredentialRecord,
 } from '@aries-framework/core'
@@ -259,12 +261,35 @@ export async function receiveOutOfBandInvitation(
     )
   )
 
-  const { connectionRecord, outOfBandRecord } = await agent.oob.receiveInvitation(invitation, {
-    reuseConnection: true,
-  })
+  let connectionRecord: ConnectionRecord | undefined
+  let outOfBandRecord: OutOfBandRecord
+
+  try {
+    // Check if invitation already exists
+    const receivedInvite = await agent.oob.findByReceivedInvitationId(invitation.id)
+    if (receivedInvite) {
+      return {
+        result: 'error',
+        message: 'Invitation has already been scanned.',
+      }
+    }
+
+    const receiveInvitationResult = await agent.oob.receiveInvitation(invitation, {
+      reuseConnection: true,
+    })
+    connectionRecord = receiveInvitationResult.connectionRecord
+    outOfBandRecord = receiveInvitationResult.outOfBandRecord
 
-  // Assign connectionId so it can be used in the observables.
-  connectionId = connectionRecord?.id
+    // Assign connectionId so it can be used in the observables.
+    connectionId = connectionRecord?.id
+  } catch (error) {
+    agent.config.logger.error(`Error while receiving invitation: ${error as string}`)
+
+    return {
+      result: 'error',
+      message: 'Invalid invitation.',
+    }
+  }
 
   try {
     const event = await eventPromise

packages/app/features/scan/ScanScreen.tsx

@@ -1,74 +1,64 @@
 import { QrScanner } from '@internal/scanner'
 import { Page, Spinner, Paragraph } from '@internal/ui'
+import { sleep } from '@tanstack/query-core/build/lib/utils'
 import * as Haptics from 'expo-haptics'
-import React, { useEffect, useState } from 'react'
+import React, { useState } from 'react'
 import { useRouter } from 'solito/router'
 
 import { useCredentialDataHandler } from 'app/hooks/useCredentialDataHandler'
 import { isAndroid } from 'app/utils/platform'
 
+const unsupportedUrlPrefixes = ['_oob=']
+
 export function QrScannerScreen() {
   const { back } = useRouter()
   const { handleCredentialData } = useCredentialDataHandler()
 
-  const [scannedData, setScannedData] = useState('')
   const [helpText, setHelpText] = useState('')
-  const [isScanModalFocused, setIsScanModalFocused] = useState(true)
   const [isProcessing, setIsProcessing] = useState(false)
-  const [scannedInvalidQrs, setScannedInvalidQrs] = useState<string[]>([])
-
-  const unsupportedUrlPrefixes = ['_oob=']
 
-  // TODO: is there any other way we can detect a modal over modal?
-  useEffect(() => {
-    const onScan = async () => {
-      if (isProcessing) return
-      setIsProcessing(true)
+  const [isLoading, setIsLoading] = useState(false)
 
-      // don't do anything if we already scanned the data and the helpText is still shown
-      if (helpText !== '' && scannedInvalidQrs.includes(scannedData)) return
+  const onScan = async (scannedData: string) => {
+    if (isProcessing) return
+    setIsProcessing(true)
+    setIsLoading(true)
 
-      // Trigger help text if scanning a QR that is already scanned and was invalid
-      if (scannedInvalidQrs.includes(scannedData)) {
-        triggerHelpText(scannedData)
-      }
+    const result = await handleCredentialData(scannedData)
 
-      const result = await handleCredentialData(scannedData)
-      if (result.result === 'success') {
-        setIsScanModalFocused(false)
-      } else if (result.result === 'error') {
-        scannedInvalidQrs.push(scannedData)
-        setScannedInvalidQrs((qrs) => [...qrs, scannedData])
-        triggerHelpText(scannedData)
-      }
+    if (result.result === 'error') {
+      const isUnsupportedUrl = unsupportedUrlPrefixes.find((x) => scannedData.includes(x))
+      setHelpText(
+        isUnsupportedUrl
+          ? 'This QR-code is not supported yet. Try scanning a different one.'
+          : result.message
+          ? result.message
+          : 'Invalid QR code. Try scanning a different one.'
+      )
 
-      setIsProcessing(false)
+      void Haptics.notificationAsync(Haptics.NotificationFeedbackType.Error)
+      setIsLoading(false)
     }
 
-    if (scannedData && isScanModalFocused) void onScan()
-  }, [scannedData])
-
-  const triggerHelpText = (data: string) => {
-    const isUnsupportedUrl = unsupportedUrlPrefixes.find((f) => data.includes(f))
-    setHelpText(
-      isUnsupportedUrl
-        ? 'This QR-code is not supported yet. Try scanning a different one.'
-        : 'Invalid QR code. Try scanning a different one.'
-    )
-    void Haptics.notificationAsync(Haptics.NotificationFeedbackType.Error)
-    //clear the help text after 5 seconds
-    setTimeout(() => {
-      setHelpText('')
-    }, 5000)
+    await sleep(5000)
+    setHelpText('')
+    setIsLoading(false)
+    setIsProcessing(false)
   }
 
   // Only show cancel button on Android
   const onCancel = isAndroid() ? () => back() : undefined
 
   return (
     <>
-      <QrScanner onScan={(data) => setScannedData(data)} onCancel={onCancel} helpText={helpText} />
-      {isProcessing && (
+      <QrScanner
+        onScan={(data) => {
+          void onScan(data)
+        }}
+        onCancel={onCancel}
+        helpText={helpText}
+      />
+      {isLoading && (
         <Page
           position="absolute"
           jc="center"

packages/app/hooks/useCredentialDataHandler.tsx

@@ -86,7 +86,7 @@ export const useCredentialDataHandler = () => {
 
     return {
       result: 'error',
-      message: 'Schema not supported.',
+      message: 'QR Code not recognized.',
     }
   }