feat: pid flow in wallet

apps/easypid/src/app/(app)/_layout.tsx

@@ -98,6 +98,7 @@ export default function AppLayout() {
             <Stack.Screen name="pinConfirmation" options={headerNormalOptions} />
             <Stack.Screen name="pinLocked" options={headerNormalOptions} />
             <Stack.Screen name="issuer" options={headerNormalOptions} />
+            <Stack.Screen name="pidSetup" />
           </Stack>
         </DeeplinkHandler>
       </WalletJsonStoreProvider>

apps/easypid/src/app/(app)/pidSetup.tsx

@@ -0,0 +1,5 @@
+import { FunkePidSetupScreen } from '@easypid/features/pid/FunkePidSetupScreen'
+
+export default function PidSetup() {
+  return <FunkePidSetupScreen />
+}

apps/easypid/src/app/authenticate.tsx

@@ -22,15 +22,26 @@ export default function Authenticate() {
   const biometricsType = useBiometricsType()
   const pinInputRef = useRef<PinDotsInputRef>(null)
   const [isInitializingAgent, setIsInitializingAgent] = useState(false)
+  const [isAllowedToUnlockWithFaceId, setIsAllowedToUnlockWithFaceId] = useState(false)
   const isLoading =
     secureUnlock.state === 'acquired-wallet-key' || (secureUnlock.state === 'locked' && secureUnlock.isUnlocking)
 
+  // After resetting the wallet, we want to avoid prompting for face id immediately
+  // So we add an artificial delay
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      setIsAllowedToUnlockWithFaceId(true)
+    }, 500)
+
+    return () => clearTimeout(timer)
+  }, [])
+
   // biome-ignore lint/correctness/useExhaustiveDependencies: canTryUnlockingUsingBiometrics not needed
   useEffect(() => {
-    if (secureUnlock.state === 'locked' && secureUnlock.canTryUnlockingUsingBiometrics) {
+    if (secureUnlock.state === 'locked' && secureUnlock.canTryUnlockingUsingBiometrics && isAllowedToUnlockWithFaceId) {
       secureUnlock.tryUnlockingUsingBiometrics()
     }
-  }, [secureUnlock.state])
+  }, [secureUnlock.state, isAllowedToUnlockWithFaceId])
 
   useEffect(() => {
     if (secureUnlock.state !== 'acquired-wallet-key') return

apps/easypid/src/features/menu/FunkeMenuScreen.tsx

@@ -51,7 +51,7 @@ export function FunkeMenuScreen() {
     <MenuItem
       key="id"
       item={{
-        href: '/',
+        href: '/pidSetup',
         icon: HeroIcons.IdentificationFilled,
         title: 'Setup digital ID',
       }}

apps/easypid/src/features/onboarding/onboardingContext.tsx

@@ -48,79 +48,7 @@ type Page =
       animationKey?: string
     }
 
-// Same animation key means the content won't fade out and then in again. So if the two screens have most content in common
-// this looks nicer.
-const onboardingSteps = [
-  {
-    step: 'welcome',
-    alternativeFlow: false,
-    progress: 0,
-    page: {
-      type: 'fullscreen',
-    },
-    Screen: OnboardingWelcome,
-  },
-  {
-    step: 'introduction-steps',
-    alternativeFlow: false,
-    progress: 16.5,
-    page: {
-      type: 'content',
-      animation: 'delayed',
-      title: 'Get your digital identity',
-      subtitle: 'Before you can use the app we will go through the following steps.',
-    },
-    Screen: OnboardingIntroductionSteps,
-  },
-
-  {
-    step: 'pin',
-    alternativeFlow: false,
-    progress: 33,
-    page: {
-      type: 'content',
-      title: 'Choose a 6-digit PIN',
-      subtitle: 'This PIN secures your identity wallet. You enter it every time you share data.',
-      animationKey: 'pin',
-    },
-    Screen: OnboardingPinEnter,
-  },
-  {
-    step: 'pin-reenter',
-    alternativeFlow: false,
-    progress: 33,
-    page: {
-      type: 'content',
-      title: 'Repeat your PIN',
-      subtitle: 'This PIN secures your identity wallet. You enter it every time you share data.',
-      animationKey: 'pin',
-    },
-    Screen: OnboardingPinEnter,
-  },
-  {
-    step: 'biometrics',
-    alternativeFlow: false,
-    progress: 33,
-    page: {
-      type: 'content',
-      title: 'Set up biometrics',
-      subtitle:
-        'Activate the biometrics functionality of your phone to make sure only you can enter your wallet and share data.',
-    },
-    Screen: OnboardingBiometrics,
-  },
-  {
-    step: 'biometrics-disabled',
-    progress: 33,
-    alternativeFlow: true,
-    page: {
-      type: 'content',
-      title: 'You need to enable biometrics',
-      subtitle:
-        'To continue, make sure your device has biometric protection enabled, and that EasyPID is allowed to use biometrics.',
-    },
-    Screen: OnboardingBiometrics,
-  },
+export const pidSetupSteps = [
   {
     step: 'id-card-start',
     alternativeFlow: false,
@@ -223,18 +151,93 @@ const onboardingSteps = [
     },
     Screen: OnboardingIdCardFetch,
   },
-] as const satisfies Array<{
+] as const satisfies Array<OnboardingStep>
+
+type OnboardingStep = {
   step: string
   progress: number
   page: Page
   // if true will not be navigated to by goToNextStep
   alternativeFlow: boolean
   // biome-ignore lint/suspicious/noExplicitAny: <explanation>
   Screen: React.FunctionComponent<any>
-}>
+}
+
+export const onboardingSteps = [
+  {
+    step: 'welcome',
+    alternativeFlow: false,
+    progress: 0,
+    page: {
+      type: 'fullscreen',
+    },
+    Screen: OnboardingWelcome,
+  },
+  {
+    step: 'introduction-steps',
+    alternativeFlow: false,
+    progress: 16.5,
+    page: {
+      type: 'content',
+      animation: 'delayed',
+      title: 'Get your digital identity',
+      subtitle: 'Before you can use the app we will go through the following steps.',
+    },
+    Screen: OnboardingIntroductionSteps,
+  },
+
+  {
+    step: 'pin',
+    alternativeFlow: false,
+    progress: 33,
+    page: {
+      type: 'content',
+      title: 'Choose a 6-digit PIN',
+      subtitle: 'This PIN secures your identity wallet. You enter it every time you share data.',
+      animationKey: 'pin',
+    },
+    Screen: OnboardingPinEnter,
+  },
+  {
+    step: 'pin-reenter',
+    alternativeFlow: false,
+    progress: 33,
+    page: {
+      type: 'content',
+      title: 'Repeat your PIN',
+      subtitle: 'This PIN secures your identity wallet. You enter it every time you share data.',
+      animationKey: 'pin',
+    },
+    Screen: OnboardingPinEnter,
+  },
+  {
+    step: 'biometrics',
+    alternativeFlow: false,
+    progress: 33,
+    page: {
+      type: 'content',
+      title: 'Set up biometrics',
+      subtitle:
+        'Activate the biometrics functionality of your phone to make sure only you can enter your wallet and share data.',
+    },
+    Screen: OnboardingBiometrics,
+  },
+  {
+    step: 'biometrics-disabled',
+    progress: 33,
+    alternativeFlow: true,
+    page: {
+      type: 'content',
+      title: 'You need to enable biometrics',
+      subtitle:
+        'To continue, make sure your device has biometric protection enabled, and that EasyPID is allowed to use biometrics.',
+    },
+    Screen: OnboardingBiometrics,
+  },
+  ...pidSetupSteps,
+] as const satisfies Array<OnboardingStep>
 
 export type OnboardingSteps = typeof onboardingSteps
-export type OnboardingStep = OnboardingSteps[number]
 
 export type OnboardingContext = {
   currentStep: OnboardingStep['step']

apps/easypid/src/features/onboarding/screens/id-card-scan.tsx

@@ -2,13 +2,13 @@ import { AnimatedNfcScan, Button, NfcScannerModalAndroid, Stack, YStack } from '
 
 import { Platform } from 'react-native'
 
-interface OnboardingIdCardScanProps {
+export interface OnboardingIdCardScanProps {
   isCardAttached?: boolean
   scanningState: 'readyToScan' | 'scanning' | 'complete' | 'error'
   progress: number
   showScanModal: boolean
   onCancel: () => void
-  onStartScanning?: () => void
+  onStartScanning?: () => Promise<void>
 }
 
 export function OnboardingIdCardScan({

apps/easypid/src/features/onboarding/screens/id-card-start.tsx

@@ -5,14 +5,14 @@ import { useState } from 'react'
 
 interface OnboardingIdCardStartScanProps {
   goToNextStep: () => Promise<void>
-  onSkipCardSetup: () => void
+  onSkipCardSetup?: () => void
 }
 
 export function OnboardingIdCardStart({ goToNextStep, onSkipCardSetup }: OnboardingIdCardStartScanProps) {
   const [isLoading, setIsLoading] = useState(false)
 
   const onSetupLater = () => {
-    if (isLoading) return
+    if (isLoading || !onSkipCardSetup) return
 
     setIsLoading(true)
     onSkipCardSetup()
@@ -38,9 +38,11 @@ export function OnboardingIdCardStart({ goToNextStep, onSkipCardSetup }: Onboard
         </ScrollView>
       </YStack>
       <YStack gap="$4" alignItems="center">
-        <Button.Text disabled={isLoading} icon={HeroIcons.ArrowRight} scaleOnPress onPress={onSetupLater}>
-          Set up later
-        </Button.Text>
+        {onSkipCardSetup && (
+          <Button.Text disabled={isLoading} icon={HeroIcons.ArrowRight} scaleOnPress onPress={onSetupLater}>
+            Set up later
+          </Button.Text>
+        )}
         <Button.Solid scaleOnPress disabled={isLoading} onPress={onContinue}>
           {isLoading ? <Spinner variant="dark" /> : 'Continue'}
         </Button.Solid>