fix missing discovered network set to appkit

Signed-off-by: p4u <pau@dabax.net>

Author: p4u

src/Layout.tsx

@@ -9,54 +9,66 @@ import { initializeAppKit } from '~lib/appkit-miniapp'
 import { getConfiguredNetworkAsync } from '~lib/network-config'
 
 export function Layout() {
-  const { caipNetwork, switchNetwork } = useAppKitNetwork()
   const { isInitialized } = useMiniApp()
-  const [appKitInitialized, setAppKitInitialized] = useState(false)
+  const [appKitReady, setAppKitReady] = useState(false)
   const [detectedNetwork, setDetectedNetwork] = useState<AppKitNetwork | null>(null)
   const [shouldAutoSwitch, setShouldAutoSwitch] = useState(false)
 
-  // Detect network once on mount and cache it
+  // Detect network and initialize AppKit before rendering
   useEffect(() => {
-    const initializeNetworkDetection = async () => {
+    const initialize = async () => {
+      if (!isInitialized) return
+
       try {
         // Check if network is manually configured
         const isManuallyConfigured = !!import.meta.env.ETHEREUM_NETWORK
 
-        // This will detect sequencer network and validate against env var
+        // Detect sequencer network and validate against env var
         const network = await getConfiguredNetworkAsync()
         setDetectedNetwork(network)
 
         // Only auto-switch if network was NOT manually configured
         setShouldAutoSwitch(!isManuallyConfigured)
-      } catch (error) {
-        console.error('Failed to initialize network detection:', error)
-      }
-    }
-
-    initializeNetworkDetection()
-  }, [])
-
-  // Initialize AppKit once mini app context is ready
-  useEffect(() => {
-    const initialize = async () => {
-      if (!isInitialized) return
 
-      try {
-        // Initialize AppKit with conditional Farcaster support
-        await initializeAppKit()
-        setAppKitInitialized(true)
+        // Initialize AppKit with the detected network
+        await initializeAppKit(network)
+        setAppKitReady(true)
       } catch (error) {
-        console.error('Failed to initialize AppKit:', error)
-        setAppKitInitialized(true) // Still allow app to continue
+        console.error('Failed to initialize network detection or AppKit:', error)
+        setAppKitReady(true) // Still allow app to continue
       }
     }
 
     initialize()
   }, [isInitialized])
 
+  // Don't render until AppKit is ready
+  if (!appKitReady) {
+    return (
+      <div className='min-h-screen bg-davinci-paper-base/30 flex items-center justify-center'>
+        <div className='text-center'>
+          <div className='animate-spin rounded-full h-12 w-12 border-b-2 border-davinci-black-alt mx-auto mb-4'></div>
+          <p className='text-davinci-black-alt'>Initializing...</p>
+        </div>
+      </div>
+    )
+  }
+
+  return <LayoutContent detectedNetwork={detectedNetwork} shouldAutoSwitch={shouldAutoSwitch} />
+}
+
+function LayoutContent({ 
+  detectedNetwork, 
+  shouldAutoSwitch 
+}: { 
+  detectedNetwork: AppKitNetwork | null
+  shouldAutoSwitch: boolean 
+}) {
+  const { caipNetwork, switchNetwork } = useAppKitNetwork()
+
   // Switch to detected network only if auto-detection is enabled
   useEffect(() => {
-    if (!caipNetwork || !appKitInitialized || !detectedNetwork || !shouldAutoSwitch) return
+    if (!caipNetwork || !detectedNetwork || !shouldAutoSwitch) return
 
     // Only switch if using auto-detection (no manual env var configuration)
     if (caipNetwork.id !== detectedNetwork.id) {
@@ -66,7 +78,7 @@ export function Layout() {
         console.error('Failed to switch to detected network:', error)
       }
     }
-  }, [caipNetwork, switchNetwork, appKitInitialized, detectedNetwork, shouldAutoSwitch])
+  }, [caipNetwork, switchNetwork, detectedNetwork, shouldAutoSwitch])
 
   return (
     <div className='min-h-screen bg-davinci-paper-base/30 flex flex-col font-work-sans'>

src/lib/appkit-miniapp.ts

@@ -1,6 +1,6 @@
 import { EthersAdapter } from '@reown/appkit-adapter-ethers'
 import { AppKit, createAppKit } from '@reown/appkit/react'
-import { getConfiguredNetwork } from './network-config'
+import type { AppKitNetwork } from '@reown/appkit/networks'
 
 // 1. Get projectId from environment
 const projectId = import.meta.env.WALLETCONNECT_PROJECT_ID
@@ -13,23 +13,21 @@ const metadata = {
   icons: ['/images/davinci-icon-small.png'],
 }
 
-// 3. Get configured network
-const network = getConfiguredNetwork()
-
-// 4. Create Ethers Adapter with conditional provider
+// 3. Create Ethers Adapter with conditional provider
 const ethersAdapter = new EthersAdapter()
 
 let appKit: AppKit | null = null
 
 /**
- * Initialize AppKit - simplified version since mini app logic is now in context
+ * Initialize AppKit with the detected network
+ * @param network The network to initialize AppKit with
  */
-export async function initializeAppKit() {
+export async function initializeAppKit(network: AppKitNetwork) {
   if (appKit) {
     return appKit
   }
 
-  console.log('Initializing AppKit...')
+  console.log('Initializing AppKit with network:', network.name)
 
   // Create standard AppKit (works for both mini app and regular web)
   appKit = createAppKit({

src/main.tsx

@@ -7,8 +7,6 @@ import { OfflineIndicator } from '~components/offline-indicator'
 import { VocdoniApiProvider } from '~components/vocdoni-api-context'
 import { MiniAppProvider } from '~contexts/MiniAppContext'
 import { RouterProvider } from '~router'
-// Initialize AppKit
-import '~lib/appkit'
 
 import '@fontsource/averia-libre/400.css'
 import '@fontsource/averia-libre/700.css'