Store evidence, files and images in was

app/ClientLayout.tsx

@@ -9,6 +9,7 @@ import { usePathname } from 'next/navigation'
 import background from './Assets/Images/Background.svg'
 import Providers from './components/signing/Providers'
 import AppDidInitializer from './components/AppDidInitializer'
+import { AppDidProvider } from './contexts/AppDidContext'
 
 export default function ClientLayout({
   children
@@ -28,33 +29,35 @@ export default function ClientLayout({
       <ThemeProvider theme={Theme}>
         <CssBaseline />
         <Providers>
-          <StepProvider>
-            <NavBar />
-            <Box
-              component='main'
-              sx={{
-                flexGrow: 1,
-                minHeight: `calc(100vh - 315px)`,
-                backgroundImage: pathname === '/' ? `url(${background.src})` : 'none',
-                backgroundRepeat: 'no-repeat',
-                backgroundSize: 'cover',
-                backgroundPosition: 'center',
-                pb: '60px',
-                backgroundBlendMode: pathname === '/' ? 'overlay' : 'normal',
-                backgroundColor:
-                  pathname === '/'
-                    ? {
-                        xs: 'rgba(255, 255, 255, 0.8)',
-                        md: 'rgba(255, 255, 255, 0.85)'
-                      }
-                    : '#F0F4F8'
-              }}
-            >
-              <AppDidInitializer />
-              {children}
-            </Box>
-            <Footer />
-          </StepProvider>
+          <AppDidProvider>
+            <StepProvider>
+              <NavBar />
+              <Box
+                component='main'
+                sx={{
+                  flexGrow: 1,
+                  minHeight: `calc(100vh - 315px)`,
+                  backgroundImage: pathname === '/' ? `url(${background.src})` : 'none',
+                  backgroundRepeat: 'no-repeat',
+                  backgroundSize: 'cover',
+                  backgroundPosition: 'center',
+                  pb: '60px',
+                  backgroundBlendMode: pathname === '/' ? 'overlay' : 'normal',
+                  backgroundColor:
+                    pathname === '/'
+                      ? {
+                          xs: 'rgba(255, 255, 255, 0.8)',
+                          md: 'rgba(255, 255, 255, 0.85)'
+                        }
+                      : '#F0F4F8'
+                }}
+              >
+                <AppDidInitializer />
+                {children}
+              </Box>
+              <Footer />
+            </StepProvider>
+          </AppDidProvider>
         </Providers>
       </ThemeProvider>
     </body>

app/contexts/AppDidContext.tsx

@@ -0,0 +1,59 @@
+'use client'
+
+import React, { createContext, useContext, useState, useEffect, ReactNode } from 'react'
+
+interface AppDidContextType {
+  appInstanceDid: any
+  hasZcap: boolean
+  zcapInfo: any
+}
+
+const AppDidContext = createContext<AppDidContextType | undefined>(undefined)
+
+interface AppDidProviderProps {
+  children: ReactNode
+}
+
+export function AppDidProvider({ children }: AppDidProviderProps) {
+  const [zcapInfo, setZcapInfo] = useState<any>(null)
+  const [appInstanceDid, setAppInstanceDid] = useState<any>(null)
+
+  useEffect(() => {
+    // Check for stored zCap on mount
+    const storedZcap = localStorage.getItem('delegatedWasZcap')
+    const storedAppInstanceDid = localStorage.getItem('AppInstanceDID')
+    if (storedZcap) {
+      setZcapInfo(storedZcap)
+    }
+    if (storedAppInstanceDid) {
+      try {
+        const appInstanceDidObject = JSON.parse(storedAppInstanceDid)
+        setAppInstanceDid(appInstanceDidObject)
+      } catch (error) {
+        console.error('Error parsing stored AppInstanceDID:', error)
+      }
+    }
+  }, [])
+
+  const hasZcap = !!zcapInfo
+
+  const value: AppDidContextType = {
+    appInstanceDid,
+    hasZcap,
+    zcapInfo,
+  }
+
+  return (
+    <AppDidContext.Provider value={value}>
+      {children}
+    </AppDidContext.Provider>
+  )
+}
+
+export function useAppDid() {
+  const context = useContext(AppDidContext)
+  if (context === undefined) {
+    throw new Error('useAppDid must be used within an AppDidProvider')
+  }
+  return context
+}

app/credentialForm/form/StepContext.tsx

@@ -25,7 +25,7 @@ const StepContext = createContext<StepContextType>({
   handleNext: async () => {},
   handleBack: () => {},
   handleSkip: () => {},
-  setUploadImageFn: () => () => {}
+  setUploadImageFn: (_fn: () => Promise<void>) => {}
 })
 
 export const StepProvider = ({ children }: { children: React.ReactNode }) => {
@@ -116,17 +116,25 @@ export const StepProvider = ({ children }: { children: React.ReactNode }) => {
     setActiveStep(prevStep => prevStep + 1)
   }, [])
 
+  // Ensure passing function as value, not as state updater
+  const setUploadImageFnSafe = useCallback(
+    (fn: () => Promise<void>) => {
+      setUploadImageFn(() => fn)
+    },
+    []
+  )
+
   const contextValue = useMemo(
     () => ({
       activeStep,
       setActiveStep,
       handleNext,
       handleBack,
-      setUploadImageFn,
+      setUploadImageFn: setUploadImageFnSafe,
       loading,
       handleSkip
     }),
-    [activeStep, handleNext, handleBack, setUploadImageFn, loading, handleSkip]
+    [activeStep, handleNext, handleBack, setUploadImageFnSafe, loading, handleSkip]
   )
 
   return <StepContext.Provider value={contextValue}>{children}</StepContext.Provider>