fix: correctly handle pin flows

apps/easypid/src/features/onboarding/screens/data-protection.tsx

@@ -24,6 +24,7 @@ export function OnboardingDataProtection({ goToNextStep }: OnboardingDataProtect
   }
 
   const onToggleCloudHsm = () => {
+    if (isLoading) return
     const newShouldUseCloudHsm = !shouldUseCloudHsm
 
     toast.show(

apps/easypid/src/features/onboarding/screens/welcome.tsx

@@ -19,12 +19,16 @@ export default function OnboardingWelcome({ goToNextStep }: OnboardingWelcomePro
           left="50%"
           ai="center"
           jc="center"
-          shadowOffset={{ width: 5, height: 5 }}
-          shadowColor="$grey-400"
-          shadowOpacity={0.5}
-          shadowRadius={24}
         >
-          <Stack br="$7" ov="hidden">
+          <Stack
+            br="$7"
+            ov="hidden"
+            bg="$primary-500"
+            shadowOffset={{ width: 5, height: 5 }}
+            shadowColor="$grey-400"
+            shadowOpacity={0.5}
+            shadowRadius={24}
+          >
             <Image height={96} width={96} src={appIcon} />
           </Stack>
         </YStack>

apps/easypid/src/features/receive/FunkeOpenIdCredentialNotificationScreen.tsx

@@ -109,7 +109,7 @@ export function FunkeCredentialNotificationScreen() {
     [isDevelopmentModeEnabled]
   )
 
-  const shouldUsePinForPresentation = useShouldUsePinForSubmission(credentialsForRequest)
+  const shouldUsePinForPresentation = useShouldUsePinForSubmission(credentialsForRequest?.formattedSubmission)
   const preAuthGrant =
     resolvedCredentialOffer?.credentialOfferPayload.grants?.['urn:ietf:params:oauth:grant-type:pre-authorized_code']
   const txCode = preAuthGrant?.tx_code

apps/easypid/src/features/share/FunkeMdocOfflineSharingScreen.tsx

@@ -2,6 +2,7 @@ import { useAppAgent } from '@easypid/agent'
 import { setWalletServiceProviderPin } from '@easypid/crypto/WalletServiceProviderClient'
 import { InvalidPinError } from '@easypid/crypto/error'
 import { useDevelopmentMode } from '@easypid/hooks'
+import { useShouldUsePinForSubmission } from '@easypid/hooks/useShouldUsePinForPresentation'
 import { type FormattedSubmission, getSubmissionForMdocDocumentRequest } from '@package/agent'
 import { usePushToWallet } from '@package/app/src/hooks/usePushToWallet'
 import { useToastController } from '@package/ui'
@@ -28,6 +29,7 @@ export function FunkeMdocOfflineSharingScreen({
 
   const [submission, setSubmission] = useState<FormattedSubmission>()
   const [isProcessing, setIsProcessing] = useState(false)
+  const shouldUsePin = useShouldUsePinForSubmission(submission)
 
   useEffect(() => {
     getSubmissionForMdocDocumentRequest(agent, deviceRequest)
@@ -55,30 +57,34 @@ export function FunkeMdocOfflineSharingScreen({
     [toast, pushToWallet]
   )
 
-  const onProofAccept = async ({ pin, onPinComplete, onPinError }: onPinSubmitProps) => {
+  const onProofAccept = async ({ pin, onPinComplete, onPinError }: onPinSubmitProps = {}) => {
     // Already checked for submission in the useEffect
     if (!submission) return
-    if (!pin) {
-      onPinError?.()
-      return
-    }
-
-    setIsProcessing(true)
 
-    try {
-      await setWalletServiceProviderPin(pin.split('').map(Number))
-    } catch (e) {
-      setIsProcessing(false)
-      if (e instanceof InvalidPinError) {
+    if (shouldUsePin) {
+      if (!pin) {
         onPinError?.()
+        return
       }
 
-      handleError({
-        reason: 'Authentication Error',
-        redirect: true,
-        description:
-          e instanceof Error && isDevelopmentModeEnabled ? `Development mode error: ${e.message}` : undefined,
-      })
+      setIsProcessing(true)
+
+      try {
+        await setWalletServiceProviderPin(pin.split('').map(Number))
+      } catch (e) {
+        setIsProcessing(false)
+        if (e instanceof InvalidPinError) {
+          onPinError?.()
+          return handleError({ reason: 'Invalid PIN entered', redirect: false })
+        }
+
+        return handleError({
+          reason: 'Authentication Error',
+          redirect: true,
+          description:
+            e instanceof Error && isDevelopmentModeEnabled ? `Development mode error: ${e.message}` : undefined,
+        })
+      }
     }
 
     // Once this returns we just assume it's successful
@@ -147,6 +153,7 @@ export function FunkeMdocOfflineSharingScreen({
       onAccept={onProofAccept}
       onDecline={onProofDecline}
       onComplete={onProofComplete}
+      usePin={shouldUsePin ?? false}
     />
   )
 }

apps/easypid/src/features/share/FunkeOfflineSharingScreen.tsx

@@ -1,60 +1,64 @@
 import type { FormattedSubmission } from 'packages/agent/src'
-import { SlideWizard } from 'packages/app/src/components'
+import { type SlideStep, SlideWizard } from 'packages/app/src/components'
 import { LoadingRequestSlide } from '../receive/slides/LoadingRequestSlide'
-import { PinSlide, type onPinSubmitProps } from './slides/PinSlide'
+import { PinSlide } from './slides/PinSlide'
 import { PresentationSuccessSlide } from './slides/PresentationSuccessSlide'
 import { ShareCredentialsSlide } from './slides/ShareCredentialsSlide'
 
 interface FunkeOfflineSharingScreenProps {
   submission?: FormattedSubmission
+  usePin: boolean
   isAccepting: boolean
-  onAccept: ({ pin, onPinComplete, onPinError }: onPinSubmitProps) => Promise<void>
+  onAccept: () => Promise<void>
   onDecline: () => void
   onComplete: () => void
 }
 
 export function FunkeOfflineSharingScreen({
   submission,
+  usePin,
   isAccepting,
   onAccept,
   onDecline,
   onComplete,
 }: FunkeOfflineSharingScreenProps) {
   return (
     <SlideWizard
-      steps={[
-        {
-          step: 'loading-request',
-          progress: 25,
-          screen: <LoadingRequestSlide key="loading-request" isLoading={!submission} isError={false} />,
-        },
-        {
-          step: 'share-credentials',
-          progress: 50,
-          backIsCancel: true,
-          screen: (
-            <ShareCredentialsSlide
-              key="share-credentials"
-              onAccept={undefined} // onAccept is handled in the next slide
-              onDecline={onDecline}
-              submission={submission as FormattedSubmission}
-              isAccepting={isAccepting}
-              isOffline
-            />
-          ),
-        },
-        {
-          step: 'pin-enter',
-          progress: 75,
-          screen: <PinSlide key="pin-enter" isLoading={isAccepting} onPinSubmit={onAccept} />,
-        },
-        {
-          step: 'success',
-          progress: 100,
-          backIsCancel: true,
-          screen: <PresentationSuccessSlide onComplete={onComplete} />,
-        },
-      ]}
+      steps={
+        [
+          {
+            step: 'loading-request',
+            progress: 30,
+            screen: <LoadingRequestSlide key="loading-request" isLoading={!submission} isError={false} />,
+          },
+          {
+            step: 'share-credentials',
+            progress: 60,
+            backIsCancel: true,
+            screen: (
+              <ShareCredentialsSlide
+                key="share-credentials"
+                onAccept={usePin ? undefined : onAccept}
+                onDecline={onDecline}
+                submission={submission as FormattedSubmission}
+                isAccepting={isAccepting}
+                isOffline
+              />
+            ),
+          },
+          usePin && {
+            step: 'pin-enter',
+            progress: 80,
+            screen: <PinSlide key="pin-enter" isLoading={isAccepting} onPinSubmit={onAccept} />,
+          },
+          {
+            step: 'success',
+            progress: 100,
+            backIsCancel: true,
+            screen: <PresentationSuccessSlide onComplete={onComplete} />,
+          },
+        ].filter(Boolean) as SlideStep[]
+      }
       onCancel={onDecline}
     />
   )

apps/easypid/src/features/share/FunkeOpenIdPresentationNotificationScreen.tsx

@@ -36,7 +36,7 @@ export function FunkeOpenIdPresentationNotificationScreen() {
     filters: { entityId: credentialsForRequest?.verifier.entityId ?? 'NO MATCH' },
   })
   const lastInteractionDate = activities?.[0]?.date
-  const shouldUsePin = useShouldUsePinForSubmission(credentialsForRequest)
+  const shouldUsePin = useShouldUsePinForSubmission(credentialsForRequest?.formattedSubmission)
 
   useEffect(() => {
     if (credentialsForRequest) return

apps/easypid/src/features/share/slides/ShareCredentialsSlide.tsx

@@ -30,8 +30,12 @@ export const ShareCredentialsSlide = ({
   const { onNext, onCancel } = useWizard()
   const [scrollViewHeight, setScrollViewHeight] = useState(0)
   const { isScrolledByOffset, handleScroll, scrollEventThrottle } = useScrollViewPosition()
+  const [isProcessing, setIsProcessing] = useState(isAccepting)
 
   const handleAccept = async () => {
+    // Manually set to instantly show the loading state
+    setIsProcessing(true)
+
     await onAccept?.()
     onNext()
   }
@@ -96,7 +100,7 @@ export const ShareCredentialsSlide = ({
             declineText="Stop"
             onAccept={handleAccept}
             onDecline={handleDecline}
-            isLoading={isAccepting}
+            isLoading={isProcessing}
           />
         ) : (
           <YStack gap="$3">

apps/easypid/src/hooks/useShouldUsePinForPresentation.tsx

@@ -2,19 +2,19 @@ import type { CredentialsForProofRequest } from '@package/agent'
 import { useMemo } from 'react'
 import { useShouldUseCloudHsm } from '../features/onboarding/useShouldUseCloudHsm'
 
-export const useShouldUsePinForSubmission = (credentialsForRequest?: CredentialsForProofRequest) => {
+export const useShouldUsePinForSubmission = (submission?: CredentialsForProofRequest['formattedSubmission']) => {
   const [shouldUseCloudHsm] = useShouldUseCloudHsm()
 
   const shouldUsePin = useMemo(() => {
     if (shouldUseCloudHsm) return true
     const isPidInSubmission =
-      credentialsForRequest?.formattedSubmission?.entries.some((entry) =>
+      submission?.entries.some((entry) =>
         // TODO: should store this on the category as well so we can easily detect auth
         entry.isSatisfied ? entry.credentials[0].credential.category?.credentialCategory === 'DE-PID' : false
       ) ?? false
 
     return !isPidInSubmission
-  }, [credentialsForRequest, shouldUseCloudHsm])
+  }, [submission, shouldUseCloudHsm])
 
-  return credentialsForRequest === undefined ? undefined : shouldUsePin
+  return submission === undefined ? undefined : shouldUsePin
 }