{status === "connected" && address ? (
{context?.user.username}
) : (
)}
);
}
```
3. Setup the Main App component and AppContent component, with a call to sdk.actions.ready() when the app is fully loaded.
```typescript
import React, { useState, useEffect } from 'react'
import { Web3Provider } from './Web3Provider';
import { FarcasterConnect } from './FarcasterConnect';
import { sdk } from '@farcaster/miniapp-sdk'
import { useAccount } from 'wagmi'
// AppContent must be inside Web3Provider to use wagmi hooks
const AppContent = () => {
const [isAppReady, setIsAppReady] = useState(false)
const { address, status } = useAccount() // This is now safely inside WagmiProvider
// Call sdk.actions.ready() when app is ready. Otherwise, farcaster will show a splash screen to the consumer while loading.
useEffect(() => {
if (!isAppReady) {
const markAppReady = async () => {
try {
await sdk.actions.ready()
setIsAppReady(true)
console.log('App marked as ready!')
} catch (error) {
console.error('Failed to mark app as ready:', error)
setIsAppReady(true) // Still mark as ready to prevent infinite loading
}
}
// Small delay to ensure UI is rendered
const timer = setTimeout(() => {
markAppReady()
}, 100)
return () => clearTimeout(timer)
}
}, [isAppReady])
return (