fix: pid setup fix

apps/easypid/src/features/pid/FunkePidSetupScreen.tsx

@@ -328,12 +328,12 @@ export function FunkePidSetupScreen() {
         {
           step: 'id-card-start',
           progress: 20,
-          screen: () => <PidSetupStartSlide {...getPidSetupSlideContent('id-card-start')} />,
+          screen: <PidSetupStartSlide {...getPidSetupSlideContent('id-card-start')} />,
         },
         {
           step: 'id-card-pin',
           progress: 30,
-          screen: () => (
+          screen: (
             <PidWalletPinSlide
               title="Enter your app PIN code"
               subtitle="Enter the PIN code you use to unlock your wallet."
@@ -345,7 +345,7 @@ export function FunkePidSetupScreen() {
           step: 'id-card-requested-attributes',
           progress: 40,
           backIsCancel: true,
-          screen: () => (
+          screen: (
             <PidReviewRequestSlide
               {...getPidSetupSlideContent('id-card-requested-attributes')}
               requestedAttributes={eidCardRequestedAccessRights}
@@ -356,7 +356,7 @@ export function FunkePidSetupScreen() {
           step: 'id-card-pin',
           progress: 50,
           backIsCancel: true,
-          screen: () => (
+          screen: (
             <PidEidCardPinSlide
               {...getPidSetupSlideContent('id-card-pin')}
               onEnterPin={onIdCardPinReEnter ?? onIdCardPinEnter}
@@ -367,7 +367,7 @@ export function FunkePidSetupScreen() {
           step: 'id-card-start-scan',
           progress: 60,
           backIsCancel: true,
-          screen: () => (
+          screen: (
             <PidCardScanSlide
               {...getPidSetupSlideContent('id-card-start-scan')}
               progress={idCardScanningState.progress}
@@ -386,7 +386,7 @@ export function FunkePidSetupScreen() {
           step: 'id-card-fetch',
           progress: 80,
           backIsCancel: true,
-          screen: () => (
+          screen: (
             <PidIdCardFetchSlide
               {...getPidSetupSlideContent('id-card-fetch')}
               userName={userName}

apps/easypid/src/features/pid/PidEidCardFetchSlide.tsx

@@ -1,4 +1,5 @@
 import { Heading, Paragraph, YStack } from '@package/ui'
+import { useWizard } from 'packages/app/src'
 import { useEffect } from 'react'
 import { OnboardingIdCardFetch } from '../onboarding/screens/id-card-fetch'
 
@@ -11,13 +12,20 @@ interface PidIdCardFetchSlideProps {
 }
 
 export function PidIdCardFetchSlide({ title, subtitle, userName, onFetch, onComplete }: PidIdCardFetchSlideProps) {
+  const { completeProgressBar } = useWizard()
   // biome-ignore lint/correctness/useExhaustiveDependencies: We fetch when this slide is mounted
   useEffect(() => {
     // We can't navigate to the next step from the SlideWizard, so we start the fetching of the credential
     // when this slide is mounted.
     void onFetch()
   }, [])
 
+  useEffect(() => {
+    if (userName) {
+      completeProgressBar()
+    }
+  }, [completeProgressBar, userName])
+
   return (
     <YStack fg={1} gap="$6">
       <YStack gap="$3">

packages/app/src/components/SlideWizard.tsx

@@ -12,7 +12,7 @@ import { WizardProvider } from './WizardContext'
 export type SlideStep = {
   step: string
   progress: number
-  screen: () => React.ReactNode
+  screen: (() => React.ReactNode) | React.ReactElement
   backIsCancel?: boolean
 }
 
@@ -161,7 +161,7 @@ export function SlideWizard({ steps, onCancel, isError, errorScreen, confirmatio
             fg={1}
             px="$4"
           >
-            <Screen />
+            {typeof Screen === 'function' ? <Screen /> : Screen}
           </ScrollableStack>
         </AnimatedStack>
       </FlexPage>